From 5e398d06a8f312d3b805f818ca4ff88d927b1adf Mon Sep 17 00:00:00 2001
From: CodeDevMLH <145071728+CodeDevMLH@users.noreply.github.com>
Date: Tue, 24 Mar 2026 00:17:05 +0100
Subject: [PATCH] Add backdrop video delay and plot width constraint options;
 improve autoplay handling

---
 .../Web/mediaBarEnhanced.js                   | 48 +++++++++++--------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
index 78633f3..cfdb830 100644
--- a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
+++ b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
@@ -1,4 +1,4 @@
-/*
+/*
  * Jellyfin Slideshow by M0RPH3US v4.0.1
  * Modified by CodeDevMLH
  * 
@@ -67,6 +67,8 @@ const CONFIG = {
   customOverlayPositionX: 0,
   customOverlayPositionY: 0,
   customOverlayScale: 100,
+  backdropVideoDelay: 0,
+  constrainPlotWidth: false,
   enableCustomMediaIds: true,
   enableSeasonalContent: false,
   customMediaIds: "",
@@ -2582,31 +2584,37 @@ const SlideshowManager = {
 
           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);
+              if (!STATE.slideshow.isMuted) {
+                // 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 {
+                console.error("🎬 Media Bar:", "Playback failed despite being muted", e);
+              }
             });
           } 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 (!STATE.slideshow.isMuted) {
+                // 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);
+              }
             }
           }
         };