Compare commits
26 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6910eba7d6 | ||
|
|
3585b47b6c | ||
|
|
8170abdc94 | ||
|
|
535c0e17bf | ||
|
|
df1cee0eeb | ||
|
|
16cc56030f | ||
|
|
13ecbac96e | ||
|
|
8bca6f9052 | ||
|
|
217db2a66d | ||
|
|
5fd7bcb8b6 | ||
|
|
0b0e41a9f9 | ||
|
|
370db55714 | ||
|
|
e5d4800ef1 | ||
|
|
b910e92364 | ||
|
|
82283b1faf | ||
|
|
1588b1a6b2 | ||
|
|
de19466341 | ||
|
|
15054e314c | ||
|
|
3877f96b09 | ||
|
|
abca7cb3b6 | ||
|
|
998a0cfc68 | ||
|
|
63be8214d0 | ||
|
|
99411afffd | ||
|
|
9510ae6ba7 | ||
|
|
2030538acc | ||
|
|
463e9ef424 |
@@ -21,6 +21,7 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
|
||||
public bool SlideAnimationEnabled { get; set; } = true;
|
||||
public bool EnableVideoBackdrop { get; set; } = true;
|
||||
public bool UseSponsorBlock { get; set; } = true;
|
||||
public bool PreferLocalTrailers { get; set; } = false;
|
||||
public bool WaitForTrailerToEnd { get; set; } = true;
|
||||
public bool StartMuted { get; set; } = true;
|
||||
public bool FullWidthVideo { get; set; } = true;
|
||||
@@ -35,5 +36,8 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
|
||||
public bool EnableSeasonalContent { get; set; } = false;
|
||||
public bool IsEnabled { get; set; } = true;
|
||||
public bool EnableClientSideSettings { get; set; } = false;
|
||||
public bool EnableUpstreamTrailerLayout { get; set; } = false;
|
||||
public string SortBy { get; set; } = "Random";
|
||||
public string SortOrder { get; set; } = "Ascending";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,6 +57,14 @@
|
||||
<div class="fieldDescription">Show trailers as background if available.<br>Adds a
|
||||
mute/unmute and pause/play button to control the video in the right top corner.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription" id="PreferLocalTrailersContainer">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" id="PreferLocalTrailers"
|
||||
name="PreferLocalTrailers" />
|
||||
<span>Prefer Local Trailers</span>
|
||||
</label>
|
||||
<div class="fieldDescription">If enabled, local trailers will be preferred over remote (YouTube) trailers.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" id="WaitForTrailerToEnd"
|
||||
@@ -65,6 +73,14 @@
|
||||
</label>
|
||||
<div class="fieldDescription">Delay slide transition until trailer finishes.</div>
|
||||
</div>
|
||||
<div id="UpstreamTrailerLayoutContainer" class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" id="EnableUpstreamTrailerLayout"
|
||||
name="EnableUpstreamTrailerLayout" />
|
||||
<span>Enable Upstream Trailer Layout</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Use the upstream (original) layout for trailers. This renders the video inside a container overlaying the backdrop, instead of replacing it to support full-width video.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" id="EnableMobileVideo"
|
||||
@@ -274,6 +290,33 @@
|
||||
mobile).</div>
|
||||
</div>
|
||||
|
||||
<h2 class="sectionTitle">Content Sorting</h2>
|
||||
<div class="selectContainer">
|
||||
<label class="selectLabel" for="SortBy">Sort By</label>
|
||||
<select is="emby-select" id="SortBy" name="SortBy" class="emby-select-withcolor emby-select">
|
||||
<option value="Random">Random</option>
|
||||
<option value="Original">Original (Custom List Order)</option>
|
||||
<option value="PremiereDate">Premiere Date</option>
|
||||
<option value="ProductionYear">Production Year</option>
|
||||
<option value="CriticRating">Critic Rating</option>
|
||||
<option value="CommunityRating">Community Rating</option>
|
||||
<option value="Name">Name</option>
|
||||
<option value="Runtime">Runtime</option>
|
||||
</select>
|
||||
<div class="fieldDescription">Sort items by the selected criteria.</div>
|
||||
</div>
|
||||
<div class="selectContainer">
|
||||
<label class="selectLabel" for="SortOrder">Sort Order</label>
|
||||
<select is="emby-select" id="SortOrder" name="SortOrder" class="emby-select-withcolor emby-select">
|
||||
<option value="Ascending">Ascending</option>
|
||||
<option value="Descending">Descending</option>
|
||||
</select>
|
||||
<div class="fieldDescription">Sort items in Ascending or Descending order.</div>
|
||||
</div>
|
||||
<div class="fieldDescription" style="margin-bottom: 2em; color: #ffcc00;">
|
||||
<b>Note:</b> Sorting settings apply to both Server content and Custom IDs. 'Original' preserves Custom List order.
|
||||
</div>
|
||||
|
||||
<h2 class="sectionTitle">Content Limits</h2>
|
||||
<p>Leave a setting blank to use the default value.</p>
|
||||
<div class="inputContainer">
|
||||
@@ -370,7 +413,8 @@
|
||||
'WaitForTrailerToEnd', 'StartMuted', 'FullWidthVideo', 'EnableMobileVideo',
|
||||
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
|
||||
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
|
||||
'EnableSeasonalContent', 'EnableClientSideSettings'
|
||||
'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
|
||||
'PreferLocalTrailers', 'EnableUpstreamTrailerLayout'
|
||||
];
|
||||
|
||||
keys.forEach(function (key) {
|
||||
@@ -404,6 +448,26 @@
|
||||
updateDesc();
|
||||
}
|
||||
|
||||
// Handle Prefer Local Trailers visibility
|
||||
var enableVideoBackdropCheckbox = page.querySelector('#EnableVideoBackdrop');
|
||||
var preferLocalContainer = page.querySelector('#PreferLocalTrailersContainer');
|
||||
var upstreamLayoutContainer = page.querySelector('#UpstreamTrailerLayoutContainer');
|
||||
|
||||
function updatePreferLocalVisibility() {
|
||||
if (enableVideoBackdropCheckbox && enableVideoBackdropCheckbox.checked) {
|
||||
if (preferLocalContainer) preferLocalContainer.style.display = 'block';
|
||||
if (upstreamLayoutContainer) upstreamLayoutContainer.style.display = 'block';
|
||||
} else {
|
||||
if (preferLocalContainer) preferLocalContainer.style.display = 'none';
|
||||
if (upstreamLayoutContainer) upstreamLayoutContainer.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
if (enableVideoBackdropCheckbox) {
|
||||
enableVideoBackdropCheckbox.addEventListener('change', updatePreferLocalVisibility);
|
||||
updatePreferLocalVisibility();
|
||||
}
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
},
|
||||
@@ -419,7 +483,8 @@
|
||||
'WaitForTrailerToEnd', 'StartMuted', 'FullWidthVideo', 'EnableMobileVideo',
|
||||
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
|
||||
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
|
||||
'EnableSeasonalContent', 'EnableClientSideSettings'
|
||||
'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
|
||||
'PreferLocalTrailers', 'EnableUpstreamTrailerLayout'
|
||||
];
|
||||
|
||||
keys.forEach(function (key) {
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
|
||||
<Title>Jellyfin Media Bar Enhanced Plugin</Title>
|
||||
<Authors>CodeDevMLH</Authors>
|
||||
<Version>1.5.0.4</Version>
|
||||
<Version>1.5.0.12</Version>
|
||||
<RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced</RepositoryUrl>
|
||||
</PropertyGroup>
|
||||
|
||||
|
||||
@@ -343,6 +343,49 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
width 0.5s ease-in-out,
|
||||
opacity 0.5s ease-in-out;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
mask-image:
|
||||
linear-gradient(to right, transparent 10%, black 30%),
|
||||
linear-gradient(to top, transparent 2%, rgba(0, 0, 0, 0.5) 6%, black 8%);
|
||||
|
||||
-webkit-mask-image:
|
||||
linear-gradient(to right, transparent 10%, black 30%),
|
||||
linear-gradient(to top, transparent 2%, rgba(0, 0, 0, 0.5) 6%, black 8%);
|
||||
|
||||
mask-composite: intersect;
|
||||
-webkit-mask-composite: source-in;
|
||||
}
|
||||
|
||||
.video-container.active {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.video-player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Ensure video inside container fills it */
|
||||
.video-container iframe,
|
||||
.video-container video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.backdrop-container {
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
@@ -379,6 +422,10 @@
|
||||
object-position: center 20%;
|
||||
border-radius: 5px;
|
||||
z-index: 3;
|
||||
transition:
|
||||
width 0.5s ease-in-out,
|
||||
mask-image 0.5s ease-in-out,
|
||||
-webkit-mask-image 0.5s ease-in-out;
|
||||
mask-image: linear-gradient(to top,
|
||||
#fff0 2%,
|
||||
rgb(0 0 0 / 0.5) 6%,
|
||||
@@ -389,6 +436,20 @@
|
||||
#000000 8%);
|
||||
}
|
||||
|
||||
.backdrop.with-video {
|
||||
width: 100%;
|
||||
mask-image:
|
||||
linear-gradient(to top, #fff0 2%, rgb(0 0 0 / 0.5) 6%, #000000 8%),
|
||||
linear-gradient(to right, black 30%, transparent 85%);
|
||||
|
||||
-webkit-mask-image:
|
||||
linear-gradient(to top, #fff0 2%, rgb(0 0 0 / 0.5) 6%, #000000 8%),
|
||||
linear-gradient(to right, black 30%, transparent 85%);
|
||||
|
||||
mask-composite: source-in;
|
||||
-webkit-mask-composite: source-in;
|
||||
}
|
||||
|
||||
.backdrop-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@@ -38,6 +38,7 @@ const CONFIG = {
|
||||
slideAnimationEnabled: true,
|
||||
enableVideoBackdrop: true,
|
||||
useSponsorBlock: true,
|
||||
preferLocalTrailers: false,
|
||||
waitForTrailerToEnd: true,
|
||||
startMuted: true,
|
||||
fullWidthVideo: true,
|
||||
@@ -51,6 +52,9 @@ const CONFIG = {
|
||||
customMediaIds: "",
|
||||
enableLoadingScreen: true,
|
||||
enableClientSideSettings: false,
|
||||
enableUpstreamTrailerLayout: false,
|
||||
sortBy: "Random",
|
||||
sortOrder: "Ascending",
|
||||
};
|
||||
|
||||
// State management
|
||||
@@ -460,6 +464,66 @@ waitForApiClientAndInitialize();
|
||||
* Utility functions for slide creation and management
|
||||
*/
|
||||
const SlideUtils = {
|
||||
/**
|
||||
* Sorts items based on configuration
|
||||
* @param {Array<Object>} items - Array of item objects
|
||||
* @param {string} sortBy - Sort criteria
|
||||
* @param {string} sortOrder - Sort order 'Ascending' or 'Descending'
|
||||
* @returns {Array<Object>} Sorted array of items
|
||||
*/
|
||||
sortItems(items, sortBy, sortOrder) {
|
||||
if (sortBy === 'Random' || sortBy === 'Original') {
|
||||
return items;
|
||||
}
|
||||
|
||||
const simpleCompare = (a, b) => {
|
||||
if (a < b) return -1;
|
||||
if (a > b) return 1;
|
||||
return 0;
|
||||
};
|
||||
|
||||
const sorted = [...items].sort((a, b) => {
|
||||
let valA, valB;
|
||||
|
||||
switch (sortBy) {
|
||||
case 'PremiereDate':
|
||||
valA = new Date(a.PremiereDate).getTime();
|
||||
valB = new Date(b.PremiereDate).getTime();
|
||||
break;
|
||||
case 'ProductionYear':
|
||||
valA = a.ProductionYear || 0;
|
||||
valB = b.ProductionYear || 0;
|
||||
break;
|
||||
case 'CriticRating':
|
||||
valA = a.CriticRating || 0;
|
||||
valB = b.CriticRating || 0;
|
||||
break;
|
||||
case 'CommunityRating':
|
||||
valA = a.CommunityRating || 0;
|
||||
valB = b.CommunityRating || 0;
|
||||
break;
|
||||
case 'Runtime':
|
||||
valA = a.RunTimeTicks || 0;
|
||||
valB = b.RunTimeTicks || 0;
|
||||
break;
|
||||
case 'Name':
|
||||
valA = (a.Name || '').toLowerCase();
|
||||
valB = (b.Name || '').toLowerCase();
|
||||
break;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
|
||||
return simpleCompare(valA, valB);
|
||||
});
|
||||
|
||||
if (sortOrder === 'Descending') {
|
||||
sorted.reverse();
|
||||
}
|
||||
|
||||
return sorted;
|
||||
},
|
||||
|
||||
/**
|
||||
* Shuffles array elements randomly
|
||||
* @param {Array} array - Array to shuffle
|
||||
@@ -960,8 +1024,8 @@ const ApiUtils = {
|
||||
}
|
||||
|
||||
const response = await fetch(
|
||||
`${STATE.jellyfinData.serverAddress}/Items/${itemId}`,
|
||||
// `${STATE.jellyfinData.serverAddress}/Users/${STATE.jellyfinData.userId}/Items/${itemId}?Fields=Overview,RemoteTrailers,Genres,CommunityRating,CriticRating,OfficialRating,PremiereDate,RunTimeTicks,ProductionYear,MediaSources`,
|
||||
// `${STATE.jellyfinData.serverAddress}/Items/${itemId}`,
|
||||
`${STATE.jellyfinData.serverAddress}/Items/${itemId}?Fields=Overview,RemoteTrailers,Genres,CommunityRating,CriticRating,OfficialRating,PremiereDate,ProductionYear,MediaSources,RunTimeTicks,LocalTrailerCount`,
|
||||
{
|
||||
headers: this.getAuthHeaders(),
|
||||
}
|
||||
@@ -1033,8 +1097,16 @@ const ApiUtils = {
|
||||
|
||||
console.log("Fetching random items from server...");
|
||||
|
||||
let sortParams = `sortBy=${CONFIG.sortBy}`;
|
||||
|
||||
if (CONFIG.sortBy === 'Random' || CONFIG.sortBy === 'Original') {
|
||||
sortParams = 'sortBy=Random';
|
||||
} else {
|
||||
sortParams += `&sortOrder=${CONFIG.sortOrder}`;
|
||||
}
|
||||
|
||||
const response = await fetch(
|
||||
`${STATE.jellyfinData.serverAddress}/Items?IncludeItemTypes=Movie,Series&Recursive=true&hasOverview=true&imageTypes=Logo,Backdrop&sortBy=Random&isPlayed=False&enableUserData=true&Limit=${CONFIG.maxItems}&fields=Id`,
|
||||
`${STATE.jellyfinData.serverAddress}/Items?IncludeItemTypes=Movie,Series&Recursive=true&hasOverview=true&imageTypes=Logo,Backdrop&${sortParams}&isPlayed=False&enableUserData=true&Limit=${CONFIG.maxItems}&fields=Id`,
|
||||
{
|
||||
headers: this.getAuthHeaders(),
|
||||
}
|
||||
@@ -1253,6 +1325,39 @@ const ApiUtils = {
|
||||
console.error(`Error fetching collection items for ${collectionId}:`, error);
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Fetches the first local trailer for an item
|
||||
* @param {string} itemId - Item ID
|
||||
* @returns {Promise<string|null>} Stream URL or null
|
||||
*/
|
||||
async fetchLocalTrailer(itemId) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${STATE.jellyfinData.serverAddress}/Users/${STATE.jellyfinData.userId}/Items/${itemId}/LocalTrailers`,
|
||||
{
|
||||
headers: this.getAuthHeaders(),
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const trailers = await response.json();
|
||||
if (trailers && trailers.length > 0) {
|
||||
const trailer = trailers[0];
|
||||
const mediaSourceId = trailer.MediaSources && trailer.MediaSources[0] ? trailer.MediaSources[0].Id : trailer.Id;
|
||||
|
||||
// Construct stream URL
|
||||
return `${STATE.jellyfinData.serverAddress}/Videos/${trailer.Id}/stream.mp4?Static=true&mediaSourceId=${mediaSourceId}&api_key=${STATE.jellyfinData.accessToken}`;
|
||||
}
|
||||
return null;
|
||||
} catch (error) {
|
||||
console.error(`Error fetching local trailer for ${itemId}:`, error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1433,14 +1538,24 @@ const SlideCreator = {
|
||||
|
||||
let backdrop;
|
||||
let isVideo = false;
|
||||
let hasUpstreamVideo = false;
|
||||
let trailerUrl = null;
|
||||
|
||||
// 1. Check for Remote Trailers (YouTube)
|
||||
// Priority: Custom Config URL > Metadata RemoteTrailer
|
||||
// 1. Check for Remote/Local Trailers
|
||||
// Priority: Custom Config URL > (PreferLocal -> Local) > Metadata RemoteTrailer
|
||||
|
||||
// 1a. Custom URL override
|
||||
if (STATE.slideshow.customTrailerUrls && STATE.slideshow.customTrailerUrls[itemId]) {
|
||||
trailerUrl = STATE.slideshow.customTrailerUrls[itemId];
|
||||
console.log(`Using custom trailer URL for ${itemId}: ${trailerUrl}`);
|
||||
} else if (item.RemoteTrailers && item.RemoteTrailers.length > 0) {
|
||||
}
|
||||
// 1b. Check Local Trailer if preferred
|
||||
else if (CONFIG.preferLocalTrailers && item.LocalTrailerCount > 0 && item.localTrailerUrl) {
|
||||
trailerUrl = item.localTrailerUrl;
|
||||
console.log(`Using local trailer for ${itemId}: ${trailerUrl}`);
|
||||
}
|
||||
// 1c. Fallback to Remote Trailer
|
||||
else if (item.RemoteTrailers && item.RemoteTrailers.length > 0) {
|
||||
trailerUrl = item.RemoteTrailers[0].Url;
|
||||
}
|
||||
|
||||
@@ -1471,13 +1586,31 @@ const SlideCreator = {
|
||||
|
||||
if (isYoutube && videoId) {
|
||||
isVideo = true;
|
||||
// Create container for YouTube API
|
||||
const videoClass = CONFIG.fullWidthVideo ? "video-backdrop-full" : "video-backdrop-default";
|
||||
|
||||
backdrop = SlideUtils.createElement("div", {
|
||||
className: `backdrop video-backdrop ${videoClass}`,
|
||||
id: `youtube-player-${itemId}`
|
||||
});
|
||||
if (CONFIG.enableUpstreamTrailerLayout) {
|
||||
// UPSTREAM LAYOUT: Wrapper Container
|
||||
const videoContainer = SlideUtils.createElement("div", {
|
||||
className: "video-container",
|
||||
id: `video-container-${itemId}`
|
||||
});
|
||||
|
||||
const playerDiv = SlideUtils.createElement("div", {
|
||||
id: `youtube-player-${itemId}`
|
||||
});
|
||||
|
||||
videoContainer.appendChild(playerDiv);
|
||||
slide.appendChild(videoContainer); // Append container first
|
||||
|
||||
isVideo = false;
|
||||
hasUpstreamVideo = true;
|
||||
} else {
|
||||
// ENHANCED LAYOUT: Direct Backdrop Replacement
|
||||
backdrop = SlideUtils.createElement("div", {
|
||||
className: `backdrop video-backdrop ${videoClass}`,
|
||||
id: `youtube-player-${itemId}`
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize YouTube Player
|
||||
SlideUtils.loadYouTubeIframeAPI().then(() => {
|
||||
@@ -1563,6 +1696,15 @@ const SlideCreator = {
|
||||
}
|
||||
},
|
||||
'onStateChange': (event) => {
|
||||
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
||||
const videoContainer = slide ? slide.querySelector('.video-container') : null;
|
||||
|
||||
if (event.data === YT.PlayerState.PLAYING) {
|
||||
if (videoContainer) videoContainer.classList.add('active');
|
||||
} else {
|
||||
if (videoContainer) videoContainer.classList.remove('active');
|
||||
}
|
||||
|
||||
if (event.data === YT.PlayerState.ENDED) {
|
||||
if (CONFIG.waitForTrailerToEnd) {
|
||||
SlideshowManager.nextSlide();
|
||||
@@ -1592,7 +1734,7 @@ const SlideCreator = {
|
||||
autoplay: false,
|
||||
preload: "auto",
|
||||
loop: false,
|
||||
style: "object-fit: cover; width: 100%; height: 100%; pointer-events: none;"
|
||||
style: "object-fit: cover; object-position: center center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none;"
|
||||
};
|
||||
|
||||
if (STATE.slideshow.isMuted) {
|
||||
@@ -1624,12 +1766,30 @@ const SlideCreator = {
|
||||
SlideshowManager.nextSlide();
|
||||
}
|
||||
});
|
||||
|
||||
if (CONFIG.enableUpstreamTrailerLayout) {
|
||||
// Wrap in container
|
||||
const videoContainer = SlideUtils.createElement("div", {
|
||||
className: "video-container",
|
||||
id: `video-container-${itemId}`
|
||||
});
|
||||
backdrop.style.position = "";
|
||||
videoContainer.appendChild(backdrop);
|
||||
slide.appendChild(videoContainer);
|
||||
|
||||
isVideo = false;
|
||||
hasUpstreamVideo = true;
|
||||
|
||||
backdrop.addEventListener('play', () => videoContainer.classList.add('active'));
|
||||
backdrop.addEventListener('pause', () => videoContainer.classList.remove('active'));
|
||||
backdrop.addEventListener('ended', () => videoContainer.classList.remove('active'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!isVideo) {
|
||||
backdrop = SlideUtils.createElement("img", {
|
||||
className: "backdrop high-quality",
|
||||
className: hasUpstreamVideo ? "backdrop high-quality with-video" : "backdrop high-quality",
|
||||
src: this.buildImageUrl(item, "Backdrop", 0, serverAddress, 60),
|
||||
alt: LocalizationUtils.getLocalizedString('Backdrop', 'Backdrop'),
|
||||
loading: "eager",
|
||||
@@ -1934,6 +2094,11 @@ const SlideCreator = {
|
||||
|
||||
const item = await ApiUtils.fetchItemDetails(itemId);
|
||||
|
||||
// Pre-fetch local trailer URL if needed
|
||||
if (CONFIG.preferLocalTrailers && item.LocalTrailerCount > 0) {
|
||||
item.localTrailerUrl = await ApiUtils.fetchLocalTrailer(itemId);
|
||||
}
|
||||
|
||||
const slideElement = this.createSlideElement(
|
||||
item,
|
||||
item.Type === "Movie" ? "Movie" : "TV Show"
|
||||
@@ -2537,18 +2702,6 @@ const SlideshowManager = {
|
||||
return;
|
||||
}
|
||||
|
||||
// Only trap keys if focus is on body (neutral) or inside our container.
|
||||
// To allow standard TV navigation to work for other elements (e.g. library cards).
|
||||
const activeEl = document.activeElement;
|
||||
const isBody = activeEl === document.body || !activeEl;
|
||||
const isInContainer = container.contains(activeEl) || activeEl === container;
|
||||
|
||||
if (!isBody && !isInContainer) {
|
||||
return;
|
||||
}
|
||||
|
||||
const focusElement = document.activeElement;
|
||||
|
||||
switch (e.key) {
|
||||
case "ArrowRight":
|
||||
SlideshowManager.nextSlide();
|
||||
@@ -2560,16 +2713,6 @@ const SlideshowManager = {
|
||||
e.preventDefault();
|
||||
break;
|
||||
|
||||
case "ArrowUp":
|
||||
case "ArrowDown":
|
||||
setTimeout(() => {
|
||||
const active = document.activeElement;
|
||||
if (active && active !== document.body && active.id !== "slides-container") {
|
||||
active.scrollIntoView({behavior: 'smooth', block: 'center'});
|
||||
}
|
||||
}, 100);
|
||||
break;
|
||||
|
||||
case " ": // Space bar
|
||||
this.togglePause();
|
||||
e.preventDefault();
|
||||
@@ -2784,10 +2927,28 @@ const SlideshowManager = {
|
||||
if (itemIds.length === 0) {
|
||||
console.log("No custom list found, fetching random items from server...");
|
||||
itemIds = await ApiUtils.fetchItemIdsFromServer();
|
||||
|
||||
if (CONFIG.sortBy === 'Random') {
|
||||
itemIds = SlideUtils.shuffleArray(itemIds);
|
||||
}
|
||||
} else {
|
||||
// Custom IDs
|
||||
if (CONFIG.sortBy === 'Random') {
|
||||
itemIds = SlideUtils.shuffleArray(itemIds);
|
||||
} else if (CONFIG.sortBy !== 'Original') {
|
||||
// Client-side sort required...
|
||||
console.log(`Sorting ${itemIds.length} custom items by ${CONFIG.sortBy} ${CONFIG.sortOrder}`);
|
||||
const itemsWithDetails = [];
|
||||
for (const id of itemIds) {
|
||||
const item = await ApiUtils.fetchItemDetails(id);
|
||||
if (item) itemsWithDetails.push(item);
|
||||
}
|
||||
|
||||
const sortedItems = SlideUtils.sortItems(itemsWithDetails, CONFIG.sortBy, CONFIG.sortOrder);
|
||||
itemIds = sortedItems.map(i => i.Id);
|
||||
}
|
||||
}
|
||||
|
||||
itemIds = SlideUtils.shuffleArray(itemIds);
|
||||
|
||||
STATE.slideshow.itemIds = itemIds;
|
||||
STATE.slideshow.totalItems = itemIds.length;
|
||||
|
||||
|
||||
@@ -9,12 +9,12 @@
|
||||
"imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
|
||||
"versions": [
|
||||
{
|
||||
"version": "1.5.0.4",
|
||||
"changelog": "- fix: keyboard controls in TV mode \n- Update mediaBarEnhanced.js and mediaBarEnhanced.css with version 4.0.1 from original repo",
|
||||
"version": "1.5.0.12",
|
||||
"changelog": "- fix: keyboard controls in TV mode\n- Add sorting options for content\n- Update mediaBarEnhanced.js and mediaBarEnhanced.css with version 4.0.1 from original repo",
|
||||
"targetAbi": "10.11.0.0",
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.5.0.4/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||
"checksum": "4a9bf88fd4c7580a961b5fda0d3d3678",
|
||||
"timestamp": "2026-02-08T01:32:39Z"
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.5.0.12/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||
"checksum": "f43d2193b1da2bd319668c73ab7a19ee",
|
||||
"timestamp": "2026-02-09T15:10:06Z"
|
||||
},
|
||||
{
|
||||
"version": "1.3.0.3",
|
||||
|
||||
32
test_scripts/fetch_random_item_browser_console.js
Normal file
32
test_scripts/fetch_random_item_browser_console.js
Normal file
@@ -0,0 +1,32 @@
|
||||
(async () => {
|
||||
const apiClient = window.ApiClient;
|
||||
if (!apiClient) { console.error("Logged in?"); return; }
|
||||
|
||||
try {
|
||||
// Fetch 1 random item ID
|
||||
const rnd = await apiClient.getItems(apiClient.getCurrentUserId(), { SortBy: "Random", Limit: 1, Recursive: true, IncludeItemTypes: "Movie,Series" });
|
||||
if (rnd.Items.length > 0) {
|
||||
const id = rnd.Items[0].Id;
|
||||
console.log("Random Item ID:", id);
|
||||
|
||||
// Fetch Default Details
|
||||
const defd = await apiClient.getItem(apiClient.getCurrentUserId(), id);
|
||||
console.log("Default Fields:", defd);
|
||||
|
||||
// Fetch ALL Known Fields manually
|
||||
const allFields = "Chapters,People,MediaStreams,UserData,RecursiveItemCount,DateCreated,MediaSources,ProductionYear,Studios,Genres,Tags,RemoteTrailers,ProviderIds,Overview,CommunityRating,CriticRating,OfficialRating,PremiereDate,RunTimeTicks";
|
||||
const full = await res.json();
|
||||
console.log("Full Details:", full);
|
||||
|
||||
// Helper to download JSON
|
||||
const blob = new Blob([JSON.stringify(full, null, 2)], { type: "application/json" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `jellyfin-item-${id}.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
console.log("Downloaded JSON file.");
|
||||
} else { console.warn("No items."); }
|
||||
} catch (e) { console.error(e); }
|
||||
})();
|
||||
32
test_scripts/fetch_random_item_browser_console_2.js
Normal file
32
test_scripts/fetch_random_item_browser_console_2.js
Normal file
@@ -0,0 +1,32 @@
|
||||
(async () => {
|
||||
// 1. Get Auth Data from the active client
|
||||
const apiClient = window.ApiClient;
|
||||
if (!apiClient) {
|
||||
console.error("ApiClient not found. Are you logged in?");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log("Fetching random item...");
|
||||
|
||||
// 2. Fetch 1 random item
|
||||
// const result = await apiClient.getItems(apiClient.getCurrentUserId(), { SortBy: "Random", Limit: 1, Recursive: true, IncludeItemTypes: "Movie,Series" });
|
||||
const result = await apiClient.getItems(apiClient.getCurrentUserId(), {
|
||||
SortBy: "Random",
|
||||
Limit: 1,
|
||||
Recursive: true,
|
||||
IncludeItemTypes: "Movie,Series", // Optional: filter types
|
||||
Fields: "Overview,RemoteTrailers,Genres,CommunityRating,CriticRating,OfficialRating,PremiereDate,RunTimeTicks,ProductionYear,MediaSources" // Request ALL fields
|
||||
});
|
||||
|
||||
if (result.Items.length > 0) {
|
||||
const item = result.Items[0];
|
||||
console.log("Random Item Found:", item.Name);
|
||||
console.dir(item); // Prints the full interactive object
|
||||
} else {
|
||||
console.warn("No items found.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching item:", error);
|
||||
}
|
||||
})();
|
||||
28
test_scripts/fetch_specific_items.js
Normal file
28
test_scripts/fetch_specific_items.js
Normal file
@@ -0,0 +1,28 @@
|
||||
(async () => {
|
||||
const apiClient = window.ApiClient;
|
||||
if (!apiClient) {
|
||||
console.error("ApiClient nicht gefunden.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Die ID des Items, das du abrufen möchtest
|
||||
const itemId = "DEINE_ITEM_ID_HIER";
|
||||
const userId = apiClient.getCurrentUserId();
|
||||
|
||||
try {
|
||||
console.log(`Rufe Details für Item ${itemId} ab...`);
|
||||
|
||||
// Nutze getItem() statt getItems()
|
||||
// Parameter: userId, itemId
|
||||
const item = await apiClient.getItem(userId, itemId);
|
||||
|
||||
if (item) {
|
||||
console.log("Item Details gefunden:", item.Name);
|
||||
console.dir(item); // Zeigt alle Metadaten (Genres, Pfade, ProviderIds, etc.)
|
||||
} else {
|
||||
console.warn("Item konnte nicht gefunden werden.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Abrufen des Items:", error);
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user