Refactor video playback management in SlideshowManager for improved performance and auto-unpause functionality

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js

@@ -2303,9 +2303,6 @@ const SlideshowManager = {
       }
 
       currentSlide.classList.add("active");
-      // currentSlide.removeAttribute("inert");
-      // currentSlide.setAttribute("tabindex", "0");
-
       // // Update Play/Pause Button State if it was paused
       // if (STATE.slideshow.isPaused) {
       //     STATE.slideshow.isPaused = false;
@@ -2320,20 +2317,13 @@ const SlideshowManager = {
 
       // Manage Video Playback: Stop others, Play current
 
-      // 1. Pause and mute all other YouTube players
+      // 1. Stop all other YouTube players
       if (STATE.slideshow.videoPlayers) {
         Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
           if (id !== currentItemId) {
             const p = STATE.slideshow.videoPlayers[id];
-            if (p) {
+            if (p && typeof p.pauseVideo === 'function') {
-              try {
+              p.pauseVideo();
-                if (typeof p.pauseVideo === 'function') {
-                  p.pauseVideo();
-                  if (typeof p.mute === 'function') {
-                    p.mute();
-                  }
-                }
-              } catch (e) { console.warn("Error pausing player", id, e); }
             }
           }
         });
@@ -2343,13 +2333,24 @@ const SlideshowManager = {
       document.querySelectorAll('video').forEach(video => {
         if (!video.closest(`.slide[data-item-id="${currentItemId}"]`)) {
           video.pause();
-          video.muted = true;
         }
       });
 
       // 3. Play and Reset current video
       const videoBackdrop = currentSlide.querySelector('.video-backdrop');
 
+      // Auto-unpause when a video slide becomes active
+      if (videoBackdrop && STATE.slideshow.isPaused) {
+          STATE.slideshow.isPaused = false;
+          const pauseButton = document.querySelector('.pause-button');
+          if (pauseButton) {
+              pauseButton.innerHTML = '<i class="material-icons">pause</i>';
+              const pauseLabel = LocalizationUtils.getLocalizedString('ButtonPause', 'Pause');
+              pauseButton.setAttribute("aria-label", pauseLabel);
+              pauseButton.setAttribute("title", pauseLabel);
+          }
+      }
+
       // Update mute button visibility
       const muteButton = document.querySelector('.mute-button');
       if (muteButton) {
@@ -2379,28 +2380,12 @@ const SlideshowManager = {
         } else if (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
           const player = STATE.slideshow.videoPlayers[currentItemId];
           if (player && typeof player.loadVideoById === 'function' && player._videoId) {
-            // If same video is already loaded, just seek and play (much faster)
+            // Use loadVideoById to enforce start and end times
-            let isAlreadyLoaded = false;
+            player.loadVideoById({
-            if (typeof player.getVideoData === 'function') {
+              videoId: player._videoId,
-              try {
+              startSeconds: player._startTime || 0,
-                const data = player.getVideoData();
+              endSeconds: player._endTime
-                if (data && data.video_id === player._videoId) {
+            });
-                  isAlreadyLoaded = true;
-                }
-              } catch (e) { /* player not fully ready */ }
-            }
-
-            if (isAlreadyLoaded) {
-              player.seekTo(player._startTime || 0);
-              player.playVideo();
-            } else {
-              // Full load needed (first time or different video)
-              player.loadVideoById({
-                videoId: player._videoId,
-                startSeconds: player._startTime || 0,
-                endSeconds: player._endTime
-              });
-            }
 
             if (STATE.slideshow.isMuted) {
               player.mute();