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

Add configuration options for backdrop video delay and plot width constraint

Browse Source
This commit is contained in:
CodeDevMLH
2026-03-23 23:37:47 +01:00
parent c30300d1ba
commit 992f854dd2
4 changed files with 80 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
/*
/*
* Jellyfin Slideshow by M0RPH3US v4.0.1
* Modified by CodeDevMLH
*
@@ -2055,7 +2055,7 @@ const SlideCreator = {
SlideUtils.truncateText(plotElement, CONFIG.maxPlotLength);
const plotContainer = SlideUtils.createElement("div", {
className: "plot-container",
className: "plot-container" + (CONFIG.constrainPlotWidth ? " constrained-plot" : ""),
});
plotContainer.appendChild(plotElement);
@@ -2443,6 +2443,11 @@ const SlideshowManager = {
STATE.slideshow.isTransitioning = true;
if (STATE.slideshow.backdropVideoTimeout) {
clearTimeout(STATE.slideshow.backdropVideoTimeout);
STATE.slideshow.backdropVideoTimeout = null;
}
let previousVisibleSlide;
try {
const container = SlideUtils.getOrCreateSlidesContainer();
@@ -2534,11 +2539,13 @@ const SlideshowManager = {
}
if (videoBackdrop) {
// preload logic
if (videoBackdrop.tagName === 'VIDEO') {
// Restore src from data-src if it was deactivated to release connections
const lazySrc = videoBackdrop.getAttribute('data-src');
if (lazySrc && !videoBackdrop.src) {
videoBackdrop.src = lazySrc;
videoBackdrop.load(); // Force pre-buffering
}
videoBackdrop.currentTime = 0;
@@ -2547,22 +2554,11 @@ const SlideshowManager = {
if (!STATE.slideshow.isMuted) {
videoBackdrop.volume = 0.4;
}
videoBackdrop.play().catch(e => {
// Check if it actually started playing after a short delay (handling autoplay blocks)
setTimeout(() => {
if (videoBackdrop.paused && currentSlide.classList.contains('active')) {
console.warn("🎬 Media Bar:", `Autoplay blocked for ${currentItemId}, attempting muted fallback`);
videoBackdrop.muted = true;
videoBackdrop.play().catch(err => console.error("🎬 Media Bar:", "Muted fallback failed", err));
}
}, 1000);
});
} else if (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
const player = STATE.slideshow.videoPlayers[currentItemId];
if (player && typeof player.loadVideoById === 'function' && player._videoId) {
// Use loadVideoById to enforce start and end times
player.loadVideoById({
if (player && typeof player.cueVideoById === 'function' && player._videoId) {
// Use cueVideoById to buffer video without auto-playing it
player.cueVideoById({
videoId: player._videoId,
startSeconds: player._startTime || 0,
endSeconds: player._endTime
@@ -2574,25 +2570,52 @@ const SlideshowManager = {
player.unMute();
player.setVolume(40);
}
// Check if playback successfully started, otherwise fallback to muted
setTimeout(() => {
if (!currentSlide.classList.contains('active')) return;
if (player.getPlayerState &&
player.getPlayerState() !== YT.PlayerState.PLAYING &&
player.getPlayerState() !== YT.PlayerState.BUFFERING) {
console.log("🎬 Media Bar:", "YouTube loadVideoById didn't start playback, retrying muted...");
player.mute();
player.playVideo();
}
}, 1000);
} else if (player && typeof player.seekTo === 'function') {
// Fallback if loadVideoById is not available or videoId missing
const startTime = player._startTime || 0;
player.seekTo(startTime);
player.playVideo();
}
}
// play logic
const playVideoLogic = () => {
if (!currentSlide.classList.contains('active')) return;
if (videoBackdrop.tagName === 'VIDEO') {
videoBackdrop.play().catch(e => {
// Check if it actually started playing after a short delay (handling autoplay blocks)
setTimeout(() => {
if (videoBackdrop.paused && currentSlide.classList.contains('active')) {
console.warn("🎬 Media Bar:", `Autoplay blocked for ${currentItemId}, attempting muted fallback`);
videoBackdrop.muted = true;
videoBackdrop.play().catch(err => console.error("🎬 Media Bar:", "Muted fallback failed", err));
}
}, 1000);
});
} else if (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
const player = STATE.slideshow.videoPlayers[currentItemId];
if (player && typeof player.playVideo === 'function') {
player.playVideo();
// Check if playback successfully started, otherwise fallback to muted
setTimeout(() => {
if (!currentSlide.classList.contains('active')) return;
if (player.getPlayerState &&
player.getPlayerState() !== YT.PlayerState.PLAYING &&
player.getPlayerState() !== YT.PlayerState.BUFFERING) {
console.log("🎬 Media Bar:", "YouTube didn't start playback, retrying muted...");
player.mute();
player.playVideo();
}
}, 1000);
}
}
};
if (CONFIG.backdropVideoDelay > 0) {
STATE.slideshow.backdropVideoTimeout = setTimeout(playVideoLogic, CONFIG.backdropVideoDelay);
} else {
playVideoLogic();
}
}
const enableAnimations = MediaBarEnhancedSettingsManager.getSetting('slideAnimations', CONFIG.slideAnimationEnabled);