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

Remove upstream trailer layout feature from configuration and UI

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-09 16:40:01 +01:00
parent e6b769f099
commit 0c3e74829a
4 changed files with 8 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css
View File

@@ -343,50 +343,6 @@
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;
width: 100%;
}
.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%;
@@ -423,10 +379,6 @@
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%,
@@ -437,20 +389,6 @@
#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;

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

@@ -52,7 +52,6 @@ const CONFIG = {
customMediaIds: "",
enableLoadingScreen: true,
enableClientSideSettings: false,
enableUpstreamTrailerLayout: false,
sortBy: "Random",
sortOrder: "Ascending",
};
@@ -1538,7 +1537,6 @@ const SlideCreator = {
let backdrop;
let isVideo = false;
let hasUpstreamVideo = false;
let trailerUrl = null;
// 1. Check for Remote/Local Trailers
@@ -1586,31 +1584,13 @@ const SlideCreator = {
if (isYoutube && videoId) {
isVideo = true;
// Create container for YouTube API
const videoClass = CONFIG.fullWidthVideo ? "video-backdrop-full" : "video-backdrop-default";
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}`
});
}
backdrop = SlideUtils.createElement("div", {
className: `backdrop video-backdrop ${videoClass}`,
id: `youtube-player-${itemId}`
});
// Initialize YouTube Player
SlideUtils.loadYouTubeIframeAPI().then(() => {
@@ -1696,19 +1676,7 @@ 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 || event.data === YT.PlayerState.BUFFERING) {
if (videoContainer) videoContainer.classList.add('active');
} else {
if (videoContainer && event.data !== YT.PlayerState.BUFFERING) {
videoContainer.classList.remove('active');
}
}
if (event.data === YT.PlayerState.ENDED) {
if (videoContainer) videoContainer.classList.remove('active');
if (CONFIG.waitForTrailerToEnd) {
SlideshowManager.nextSlide();
} else {
@@ -1717,7 +1685,6 @@ const SlideCreator = {
}
},
'onError': () => {
if (videoContainer) videoContainer.classList.remove('active');
// Fallback to next slide on error
if (CONFIG.waitForTrailerToEnd) {
SlideshowManager.nextSlide();
@@ -1770,34 +1737,12 @@ 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;
// Use requestAnimationFrame to ensure listeners attach and class adds correctly
requestAnimationFrame(() => {
backdrop.addEventListener('play', () => videoContainer.classList.add('active'));
backdrop.addEventListener('playing', () => 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: hasUpstreamVideo ? "backdrop high-quality with-video" : "backdrop high-quality",
className: "backdrop high-quality",
src: this.buildImageUrl(item, "Backdrop", 0, serverAddress, 60),
alt: LocalizationUtils.getLocalizedString('Backdrop', 'Backdrop'),
loading: "eager",