Update Max Plot Length field description to clarify character limits

Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs

@@ -49,6 +49,8 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
         public bool IncludeWatchedContent { get; set; } = false;
         public string SortBy { get; set; } = "Random";
         public string SortOrder { get; set; } = "Ascending";
+        public int BackdropVideoDelay { get; set; } = 0;
+        public bool ConstrainPlotWidth { get; set; } = false;
         
         public bool EnableCustomOverlay { get; set; } = false;
         public string CustomOverlayText { get; set; } = "";

Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html

@@ -418,6 +418,13 @@
                                 on
                                 mobile devices. (looks bad on desktops)</div>
                         </div>
+                        <div class="checkboxContainer checkboxContainer-withDescription">
+                            <label>
+                                <input is="emby-checkbox" type="checkbox" id="ConstrainPlotWidth" name="ConstrainPlotWidth" />
+                                <span>Constrain Plot Width</span>
+                            </label>
+                            <div class="fieldDescription">Align the description text left to match the logo width, preventing it from crossing the entire screen. (Increases the text limit to 3 lines instead of 2).</div>
+                        </div>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
                                 <input is="emby-checkbox" type="checkbox" id="EnableLoadingScreen"
@@ -463,6 +470,11 @@
                             <input is="emby-input" type="number" id="ShuffleInterval" name="ShuffleInterval" />
                             <div class="fieldDescription">Time in milliseconds between changing slides.</div>
                         </div>
+                        <div class="inputContainer">
+                            <label class="inputLabel inputLabelUnfocused" for="BackdropVideoDelay">Backdrop Video Delay (ms)</label>
+                            <input is="emby-input" type="number" id="BackdropVideoDelay" name="BackdropVideoDelay" />
+                            <div class="fieldDescription">Time in milliseconds to wait before playing backdrops/theme videos (leaves static backdrop visible longer).</div>
+                        </div>
 
                         <div class="inputContainer">
                             <label class="inputLabel inputLabelUnfocused" for="RetryInterval">Retry Interval
@@ -594,10 +606,10 @@
                                 enable counter style directly.</div>
                         </div>
                         <div class="inputContainer">
-                            <label class="inputLabel inputLabelUnfocused" for="MaxPlotLength">Max Plot
+                            <label class="inputLabel inputLabelUnfocused" for="MaxPlotLength">Max Plot Length</label>
-                                Length</label>
                             <input is="emby-input" type="number" id="MaxPlotLength" name="MaxPlotLength" />
-                            <div class="fieldDescription">Maximum characters for the plot summary.</div>
+                            <div class="fieldDescription">Maximum characters for the plot summary. Limited to max 2 lines
+                                (or 3 if 'Constrain Plot Width' is enabled).</div>
                         </div>
                     </div>
 
@@ -663,7 +675,8 @@
                             'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile',
                             'EnableCustomOverlay', 'CustomOverlayText', 'CustomOverlayImageUrl',
                             'CustomOverlayStyle', 'CustomOverlayImageStyle', 'CustomOverlayPriority',
-                            'CustomOverlayPositionX', 'CustomOverlayPositionY', 'CustomOverlayScale'
+                            'CustomOverlayPositionX', 'CustomOverlayPositionY', 'CustomOverlayScale',
+                            'BackdropVideoDelay', 'ConstrainPlotWidth'
                         ];
 
                         // Manual mapping for MediaBarIsEnabled -> IsEnabled, to avoid conflicts with other plugins
@@ -908,7 +921,8 @@
                         'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile',
                         'EnableCustomOverlay', 'CustomOverlayText', 'CustomOverlayImageUrl',
                         'CustomOverlayStyle', 'CustomOverlayImageStyle', 'CustomOverlayPriority',
-                        'CustomOverlayPositionX', 'CustomOverlayPositionY', 'CustomOverlayScale'
+                        'CustomOverlayPositionX', 'CustomOverlayPositionY', 'CustomOverlayScale',
+                        'BackdropVideoDelay', 'ConstrainPlotWidth'
                     ];
 
                     keys.forEach(function (key) {
@@ -1026,7 +1040,7 @@
                         '            <span style="font-size: 0.85em; color: rgba(255,255,255,0.7);">Upload seasonal image</span>' +
                         '            <input type="file" class="seasonal-file-input" accept="image/png, image/jpeg, image/gif, image/webp" style="display: none;">' +
                         '            <img class="seasonal-preview-img" style="display: none; max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 4px; z-index: 2; object-fit: contain;" />' +
-                        '            <button type="button" is="paper-icon-button-light" class="paper-icon-button-light seasonal-clear-btn remove-img" title="Clear Image" style="background: transparent; border: none; display: none; position: absolute; top: 10px; right: 10px; z-index: 3; color: #a94442;"><i class="material-icons">delete</i></button>' +
+                        '            <button type="button" is="paper-icon-button-light" class="seasonal-clear-btn remove-img" title="Clear Image" style="background: transparent; border: none; padding: 0; cursor: pointer; display: none; position: absolute; top: 10px; right: 10px; z-index: 3; color: #a94442;"><i class="material-icons">delete</i></button>' +
                         '        </div>' +
                         '    </div>' +
                         '</div>';

Jellyfin.Plugin.MediaBarEnhanced/Jellyfin.Plugin.MediaBarEnhanced.csproj

@@ -12,7 +12,7 @@
     <!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
     <Title>Jellyfin Media Bar Enhanced Plugin</Title>
     <Authors>CodeDevMLH</Authors>
-    <Version>1.7.2.15</Version>
+    <Version>1.8.1.6</Version>
     <RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced</RepositoryUrl>
   </PropertyGroup>
 

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css

@@ -489,6 +489,15 @@
   overflow: hidden;
 }
 
+.plot-container.constrained-plot {
+  width: 40%;
+}
+
+.plot-container.constrained-plot .plot {
+  line-clamp: 3;
+  -webkit-line-clamp: 3;
+}
+
 .genre {
   display: flex;
   gap: 5px;
@@ -749,6 +758,15 @@
     left: 50%;
     transform: translateX(-50%) scale(0.8);
     background-color: #ffffff00;
+    width: max-content;
+    max-width: 90vw;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    padding: 10px 0;
+  }
+
+  .dot {
+    flex-shrink: 0;
   }
 
   .dot.active {

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: "",
@@ -110,6 +112,7 @@ const STATE = {
     customTrailerUrls: {},
     ytPromise: null,
     autoplayTimeouts: [],
+    playSignals: {},
   },
 };
 
@@ -340,6 +343,15 @@ const initLoadingScreen = () => {
       });
     });
   };
+
+  // Global Failsafe, force remove loading screen after 15 seconds to prevent infinite lockouts
+  setTimeout(() => {
+    const loader = document.querySelector(".bar-loading");
+    if (loader) {
+      console.warn("🎬 Media Bar:", "Loading screen timed out! Forcing removal as a failsafe.");
+      finishLoading();
+    }
+  }, 15000);
 };
 
 /**
@@ -387,6 +399,7 @@ const resetSlideshowState = () => {
   STATE.slideshow.customTrailerUrls = {};
   STATE.slideshow.totalItems = 0;
   STATE.slideshow.isLoading = false;
+  STATE.slideshow.playSignals = {};
 };
 
 /**
@@ -1793,7 +1806,7 @@ const SlideCreator = {
         // Create an iframe upfront
         const ytPlayerIframe = SlideUtils.createElement("iframe", {
           id: `youtube-player-${itemId}`,
-          src: `https://www.youtube-nocookie.com/embed/${videoId}?enablejsapi=1&origin=${encodeURIComponent(window.location.origin)}`,
+          src: `https://www.youtube-nocookie.com/embed/${videoId}?enablejsapi=1&autoplay=0&controls=0&playsinline=1&mute=${STATE.slideshow.isMuted ? 1 : 0}&origin=${encodeURIComponent(window.location.origin)}`,
           style: "width: 100%; height: 100%; border: none;",
           allow: "autoplay; encrypted-media",
           referrerpolicy: "strict-origin-when-cross-origin",
@@ -1868,11 +1881,11 @@ const SlideCreator = {
                     event.target.setPlaybackQuality(quality);
                   }
 
-                  // Only play if this is the active slide
+                  // Only play if this is the active slide and the play signal has been issued (delay finished)
                   const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
                   const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
 
-                  if (slide && slide.classList.contains('active') && !document.hidden && (!isVideoPlayerOpen || isVideoPlayerOpen.classList.contains('hide'))) {
+                  if (slide && slide.classList.contains('active') && STATE.slideshow.playSignals[itemId] === true && !document.hidden && (!isVideoPlayerOpen || isVideoPlayerOpen.classList.contains('hide'))) {
                     event.target.playVideo();
                     
                     // Check if it actually started playing after a short delay (handling autoplay blocks)
@@ -1905,8 +1918,14 @@ const SlideCreator = {
                   }
                 },
                 'onStateChange': (event) => {
-                  // Fade in when playing
                   if (event.data === YT.PlayerState.PLAYING) {
+                      const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
+                      if (slide && STATE.slideshow.playSignals[itemId] === false) {
+                          event.target.pauseVideo();
+                          return;
+                      }
+                      
+                      // Fade in when legitimately playing
                       if (event.target._wrapperDiv) {
                           event.target._wrapperDiv.style.opacity = "1";
                       }
@@ -1961,6 +1980,11 @@ const SlideCreator = {
             return;
           }
           
+          if (STATE.slideshow.playSignals[itemId] === false) {
+            event.target.pause();
+            return;
+          }
+          
           // Fade in
           event.target.style.opacity = "1";
           
@@ -2046,7 +2070,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);
 
@@ -2363,8 +2387,17 @@ const SlideshowManager = {
 
     const totalItems = STATE.slideshow.totalItems || 0;
 
+    // dynamically lower the max dots threshold on small screens 
+    let effectiveMaxDots = CONFIG.maxPaginationDots;
+    if (window.matchMedia("(max-width: 767px) and (orientation: portrait)").matches) {
+      const availableWidth = window.innerWidth * 0.9;
+      const dotWidth = 18; // approximate width per dot
+      const fittingDots = Math.floor(availableWidth / dotWidth) - 1;
+      effectiveMaxDots = Math.min(effectiveMaxDots, fittingDots);
+    }
+
     // Switch to counter style if too many items
-    if (totalItems > CONFIG.maxPaginationDots) {
+    if (totalItems > effectiveMaxDots) {
       const counter = document.createElement("span");
       counter.className = "slide-counter";
       counter.id = "slide-counter";
@@ -2425,6 +2458,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();
@@ -2456,6 +2494,7 @@ const SlideshowManager = {
 
       void currentSlide.offsetWidth;
       currentSlide.classList.add("active");
+      STATE.slideshow.playSignals[currentItemId] = false;
 
       // Manage Video Playback: Stop others, Play current
       // 1. Stop all other YouTube players and local video elements, release connections
@@ -2516,11 +2555,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;
@@ -2529,22 +2570,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) {
+          if (player && typeof player.cueVideoById === 'function' && player._videoId) {
-            // Use loadVideoById to enforce start and end times
+            // Use cueVideoById to buffer video without auto-playing it
-            player.loadVideoById({
+            player.cueVideoById({
               videoId: player._videoId,
               startSeconds: player._startTime || 0,
               endSeconds: player._endTime
@@ -2556,25 +2586,60 @@ 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;
+          
+          STATE.slideshow.playSignals[currentItemId] = true;
+
+          if (videoBackdrop.tagName === 'VIDEO') {
+            videoBackdrop.play().catch(e => {
+              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();
+
+              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);
+              }
+            }
+          }
+        };
+
+        if (CONFIG.backdropVideoDelay > 0) {
+          STATE.slideshow.backdropVideoTimeout = setTimeout(playVideoLogic, CONFIG.backdropVideoDelay);
+        } else {
+          playVideoLogic();
+        }
       }
 
       const enableAnimations = MediaBarEnhancedSettingsManager.getSetting('slideAnimations', CONFIG.slideAnimationEnabled);
@@ -3892,8 +3957,16 @@ const slidesInit = async () => {
             homeSections.style.top = '0';
             homeSections.style.marginTop = '0';
           }
-          const container = document.getElementById('slides-container');
+          let container = document.getElementById('slides-container');
-          if (container) container.style.display = 'none';
+          if (container) {
+            container.style.display = 'none';
+          } else {
+            // Create dummy container so loading screen's interval can trigger its own cleanup
+            container = document.createElement('div');
+            container.id = 'slides-container';
+            container.style.display = 'none';
+            document.body.appendChild(container);
+          }
           
           return;
       }

RELEASE_GUIDE.md

@@ -42,6 +42,10 @@ Bevor du baust, musst du die Versionsnummer in den folgenden Dateien aktualisier
 
 Führe den folgenden Befehl im Terminal (PowerShell) im Hauptverzeichnis aus. Wir nutzen hier `dotnet build` statt `publish`, um unnötige Dateien zu vermeiden.
 
+```powershell
+dotnet build Jellyfin.Plugin.MediaBarEnhanced/Jellyfin.Plugin.MediaBarEnhanced.csproj --configuration Release --output bin/Publish;
+```
+
 ```powershell
 dotnet build Jellyfin.Plugin.MediaBarEnhanced/Jellyfin.Plugin.MediaBarEnhanced.csproj --configuration Release --output bin/Publish; Compress-Archive -Path bin/Publish/* -DestinationPath bin/Publish/Jellyfin.Plugin.MediaBarEnhanced.zip -Force; $hash = (Get-FileHash -Algorithm MD5 bin/Publish/Jellyfin.Plugin.MediaBarEnhanced.zip).Hash.ToLower(); $time = (Get-Date).ToUniversalTime().ToString("yyyy-MM-ddTHH:mm:ssZ"); Write-Output "`n----------------------------------------"; Write-Output "NEUE CHECKSUMME (MD5): $hash"; Write-Output "ZEITSTEMPEL:           $time"; Write-Output "----------------------------------------`n"
 ```

manifest.json

@@ -9,12 +9,20 @@
     "imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
     "versions": [
       {
-        "version": "1.7.2.15",
+        "version": "1.8.1.6",
-        "changelog": "feat: add custom text/image overlay option\n- feat: add option to disable pagination dots/counter\n- feat: add exclude seasonal content from random fetching option\n- Add hide arrows on mobile option \n- fix button issue on mobile when using ElegantFin Theme",
+        "changelog": "- fix pagination dot issue on mobile when showing more than 10 dots (should now dynamically adjust the max dots threshold based on screen size)\n- add option to delay trailer playback\n- add option to limit the plot width",
         "targetAbi": "10.11.0.0",
-        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.7.2.15/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.8.1.6/Jellyfin.Plugin.MediaBarEnhanced.zip",
-        "checksum": "931bd55ea32ef15ae0b6196deb761950",
+        "checksum": "f6b8dfde71b376e73a83d66e13171e9c",
-        "timestamp": "2026-03-11T00:31:07Z"
+        "timestamp": "2026-03-24T00:04:23Z"
+      },
+      {
+        "version": "1.8.0.0",
+        "changelog": "- feat: add custom text/image overlay option\n- feat: add option to disable pagination dots/counter\n- feat: add exclude seasonal content from random fetching option\n- Add hide arrows on mobile option \n- fix button issue on mobile when using ElegantFin Theme",
+        "targetAbi": "10.11.0.0",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.8.0.0/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "0aac723796d41fc15987c94ac0476584",
+        "timestamp": "2026-03-11T01:38:43Z"
       },
       {
         "version": "1.7.0.14",