Add backdrop video delay and plot width constraint options; improve autoplay handling

This commit is contained in:
CodeDevMLH
2026-03-24 00:17:05 +01:00
parent 23a73543c9
commit 5e398d06a8

View File

@@ -1,4 +1,4 @@
/* /*
* Jellyfin Slideshow by M0RPH3US v4.0.1 * Jellyfin Slideshow by M0RPH3US v4.0.1
* Modified by CodeDevMLH * Modified by CodeDevMLH
* *
@@ -67,6 +67,8 @@ const CONFIG = {
customOverlayPositionX: 0, customOverlayPositionX: 0,
customOverlayPositionY: 0, customOverlayPositionY: 0,
customOverlayScale: 100, customOverlayScale: 100,
backdropVideoDelay: 0,
constrainPlotWidth: false,
enableCustomMediaIds: true, enableCustomMediaIds: true,
enableSeasonalContent: false, enableSeasonalContent: false,
customMediaIds: "", customMediaIds: "",
@@ -2582,31 +2584,37 @@ const SlideshowManager = {
if (videoBackdrop.tagName === 'VIDEO') { if (videoBackdrop.tagName === 'VIDEO') {
videoBackdrop.play().catch(e => { videoBackdrop.play().catch(e => {
// Check if it actually started playing after a short delay (handling autoplay blocks) if (!STATE.slideshow.isMuted) {
setTimeout(() => { // Check if it actually started playing after a short delay (handling autoplay blocks)
if (videoBackdrop.paused && currentSlide.classList.contains('active')) { setTimeout(() => {
console.warn("🎬 Media Bar:", `Autoplay blocked for ${currentItemId}, attempting muted fallback`); if (videoBackdrop.paused && currentSlide.classList.contains('active')) {
videoBackdrop.muted = true; console.warn("🎬 Media Bar:", `Autoplay blocked for ${currentItemId}, attempting muted fallback`);
videoBackdrop.play().catch(err => console.error("🎬 Media Bar:", "Muted fallback failed", err)); videoBackdrop.muted = true;
} videoBackdrop.play().catch(err => console.error("🎬 Media Bar:", "Muted fallback failed", err));
}, 1000); }
}, 1000);
} else {
console.error("🎬 Media Bar:", "Playback failed despite being muted", e);
}
}); });
} else if (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) { } else if (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
const player = STATE.slideshow.videoPlayers[currentItemId]; const player = STATE.slideshow.videoPlayers[currentItemId];
if (player && typeof player.playVideo === 'function') { if (player && typeof player.playVideo === 'function') {
player.playVideo(); player.playVideo();
// Check if playback successfully started, otherwise fallback to muted if (!STATE.slideshow.isMuted) {
setTimeout(() => { // Check if playback successfully started, otherwise fallback to muted
if (!currentSlide.classList.contains('active')) return; setTimeout(() => {
if (player.getPlayerState && if (!currentSlide.classList.contains('active')) return;
player.getPlayerState() !== YT.PlayerState.PLAYING && if (player.getPlayerState &&
player.getPlayerState() !== YT.PlayerState.BUFFERING) { player.getPlayerState() !== YT.PlayerState.PLAYING &&
console.log("🎬 Media Bar:", "YouTube didn't start playback, retrying muted..."); player.getPlayerState() !== YT.PlayerState.BUFFERING) {
player.mute(); console.log("🎬 Media Bar:", "YouTube didn't start playback, retrying muted...");
player.playVideo(); player.mute();
} player.playVideo();
}, 1000); }
}, 1000);
}
} }
} }
}; };