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

Enhance video backdrop handling with opacity transitions for smoother playback

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-19 03:24:27 +01:00
parent d3f6641158
commit 5a1048687c
1 changed files with 25 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1723,11 +1723,19 @@ const SlideCreator = {
// Create container for YouTube API // Create container for YouTube API
const videoClass = CONFIG.fullWidthVideo ? "video-backdrop-full" : "video-backdrop-default"; const videoClass = CONFIG.fullWidthVideo ? "video-backdrop-full" : "video-backdrop-default";
// Create a wrapper for opacity transition
videoBackdrop = SlideUtils.createElement("div", { videoBackdrop = SlideUtils.createElement("div", {
className: `backdrop video-backdrop ${videoClass}`, className: `backdrop video-backdrop ${videoClass}`,
id: `youtube-player-${itemId}` style: "opacity: 0; transition: opacity 1.2s ease-in-out;" // Start interrupted/transparent
}); });
const ytPlayerDiv = SlideUtils.createElement("div", {
id: `youtube-player-${itemId}`,
style: "width: 100%; height: 100%;"
});
videoBackdrop.appendChild(ytPlayerDiv);
// Initialize YouTube Player // Initialize YouTube Player
SlideUtils.loadYouTubeIframeAPI().then(() => { SlideUtils.loadYouTubeIframeAPI().then(() => {
// Fetch SponsorBlock data // Fetch SponsorBlock data
@@ -1783,6 +1791,9 @@ const SlideCreator = {
event.target._startTime = playerVars.start || 0; event.target._startTime = playerVars.start || 0;
event.target._endTime = playerVars.end || undefined; event.target._endTime = playerVars.end || undefined;
event.target._videoId = videoId; event.target._videoId = videoId;
// Store reference to wrapper for fading
event.target._wrapperDiv = videoBackdrop;
if (STATE.slideshow.isMuted) { if (STATE.slideshow.isMuted) {
event.target.mute(); event.target.mute();
@@ -1832,6 +1843,13 @@ const SlideCreator = {
} }
}, },
'onStateChange': (event) => { 'onStateChange': (event) => {
// Fade in when playing
if (event.data === YT.PlayerState.PLAYING) {
if (event.target._wrapperDiv) {
event.target._wrapperDiv.style.opacity = "1";
}
}
if (event.data === YT.PlayerState.ENDED) { if (event.data === YT.PlayerState.ENDED) {
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`); const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
if (slide && slide.classList.contains('active')) { if (slide && slide.classList.contains('active')) {
@@ -1861,7 +1879,7 @@ const SlideCreator = {
preload: "none", preload: "none",
disablePictureInPicture: true, disablePictureInPicture: true,
"data-src": videoSrc, "data-src": videoSrc,
style: "object-fit: cover; object-position: center center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none;" style: "object-fit: cover; object-position: center center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease-in-out;"
}; };
videoAttributes.muted = ""; videoAttributes.muted = "";
@@ -1879,6 +1897,10 @@ const SlideCreator = {
event.target.currentTime = 0; event.target.currentTime = 0;
return; return;
} }
// Fade in
event.target.style.opacity = "1";
if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) { if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
STATE.slideshow.slideInterval.stop(); STATE.slideshow.slideInterval.stop();
} }