CodeDevMLH/jellyfin-plugin-media-bar-enhanced
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 24 Wiki Activity

Implement manual mapping for MediaBarIsEnabled and enhance video backdrop handling

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-19 01:52:17 +01:00
parent e12a5b56a2
commit f0c9462878
2 changed files with 42 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
View File

@@ -63,6 +63,7 @@ const CONFIG = {
sortOrder: "Ascending",
applyLimitsToCustomIds: false,
seasonalSections: "[]",
isEnabled: true,
};
// State management
@@ -1638,6 +1639,7 @@ const SlideCreator = {
"data-item-id": itemId,
});
let videoBackdrop;
let backdrop;
let isVideo = false;
let trailerUrl = null;
@@ -1721,7 +1723,7 @@ const SlideCreator = {
// Create container for YouTube API
const videoClass = CONFIG.fullWidthVideo ? "video-backdrop-full" : "video-backdrop-default";
backdrop = SlideUtils.createElement("div", {
videoBackdrop = SlideUtils.createElement("div", {
className: `backdrop video-backdrop ${videoClass}`,
id: `youtube-player-${itemId}`
});
@@ -1864,12 +1866,12 @@ const SlideCreator = {
videoAttributes.muted = "";
backdrop = SlideUtils.createElement("video", videoAttributes);
backdrop.volume = 0.4;
videoBackdrop = SlideUtils.createElement("video", videoAttributes);
videoBackdrop.volume = 0.4;
STATE.slideshow.videoPlayers[itemId] = backdrop;
STATE.slideshow.videoPlayers[itemId] = videoBackdrop;
backdrop.addEventListener('play', (event) => {
videoBackdrop.addEventListener('play', (event) => {
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
if (!slide || !slide.classList.contains('active')) {
console.log(`Local video ${itemId} started playing but slide is not active, pausing.`);
@@ -1882,14 +1884,14 @@ const SlideCreator = {
}
});
backdrop.addEventListener('ended', (event) => {
videoBackdrop.addEventListener('ended', (event) => {
const slide = event.target.closest('.slide');
if (slide && slide.classList.contains('active')) {
SlideshowManager.nextSlide();
}
});
backdrop.addEventListener('error', (event) => {
videoBackdrop.addEventListener('error', (event) => {
console.warn(`Local video error for item ${itemId}`);
const slide = event.target.closest('.slide');
if (slide && slide.classList.contains('active')) {
@@ -1899,13 +1901,18 @@ const SlideCreator = {
}
}
if (!isVideo) {
backdrop = SlideUtils.createElement("img", {
className: "backdrop high-quality",
src: this.buildImageUrl(item, "Backdrop", 0, serverAddress, 60),
alt: LocalizationUtils.getLocalizedString('Backdrop', 'Backdrop'),
loading: "eager",
});
// Always create a static backdrop image (to show while video loads or if no video)
backdrop = SlideUtils.createElement("img", {
className: "backdrop high-quality",
src: this.buildImageUrl(item, "Backdrop", 0, serverAddress, 60),
alt: LocalizationUtils.getLocalizedString('Backdrop', 'Backdrop'),
loading: "eager",
});
// If video, static backdrop should be strictly a background (no animation)
if (isVideo) {
backdrop.style.animation = "none";
backdrop.style.transition = "none";
}
const backdropOverlay = SlideUtils.createElement("div", {
@@ -1915,8 +1922,14 @@ const SlideCreator = {
const backdropContainer = SlideUtils.createElement("div", {
className: "backdrop-container" + (isVideo && CONFIG.fullWidthVideo ? " full-width-video" : ""),
});
backdropContainer.append(backdrop, backdropOverlay);
// If video exists, append on top of static backdrop
if (isVideo && videoBackdrop) {
backdropContainer.appendChild(videoBackdrop);
}
const logo = SlideUtils.createElement("img", {
className: "logo high-quality",
src: this.buildImageUrl(item, "Logo", undefined, serverAddress, 40),