Update manifest.json for release v1.7.0.6 [skip ci]

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.0.3</Version>
+    <Version>1.7.0.6</Version>
     <RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced</RepositoryUrl>
   </PropertyGroup>
 

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js

@@ -1736,155 +1736,275 @@ const SlideCreator = {
         // Create a wrapper for opacity transition
         videoBackdrop = SlideUtils.createElement("div", {
             className: `backdrop video-backdrop ${videoClass}`,
-            style: "opacity: 0; transition: opacity 1.2s ease-in-out;" // Start interrupted/transparent
+            style: "opacity: 0; transition: opacity 1.2s ease-in-out;"
         });
 
-        const ytPlayerDiv = SlideUtils.createElement("div", {
-          id: `youtube-player-${itemId}`,
-          style: "width: 100%; height: 100%;"
-        });
+        // Detect Safari/WebKit — the YouTube IFrame API causes Error 153 on WebKit
+        // due to cross-origin postMessage restrictions. Use a plain iframe embed instead.
+        const isSafariWebKit = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent) && !/Chromium/.test(navigator.userAgent);
 
-        videoBackdrop.appendChild(ytPlayerDiv);
-
-        // Initialize YouTube Player
-        SlideUtils.loadYouTubeIframeAPI().then(() => {
-          // Fetch SponsorBlock data
+        if (isSafariWebKit) {
+          // ── Safari: plain iframe embed ───────────────────────────────────────────
+          // Fetch SponsorBlock data and apply as URL params (start= / end=)
           ApiUtils.fetchSponsorBlockData(videoId).then(segments => {
-            const playerVars = {
-              autoplay: 1,
-              mute: 1, // need to be muted for Safari, because apple makes life difficult...
-              controls: 0,
-              disablekb: 1,
-              fs: 0,
-              iv_load_policy: 3,
-              rel: 0,
-              loop: 0,
-              playsinline: 1,
-              origin: window.location.origin,
-              enablejsapi: 1
-            };
-
-            // Determine video quality
-            let quality = 'hd1080';
-            if (CONFIG.preferredVideoQuality === 'Maximum') {
-              quality = 'highres';
-            } else if (CONFIG.preferredVideoQuality === '720p') {
-              quality = 'hd720';
-            } else if (CONFIG.preferredVideoQuality === '1080p') {
-              quality = 'hd1080';
-            } else { // Auto or fallback
-              // If screen is wider than 1920, prefer highres, otherwise 1080p
-              quality = window.screen.width > 1920 ? 'highres' : 'hd1080';
-            }
-
-            playerVars.suggestedQuality = quality;
-
-            // Apply SponsorBlock start/end times
+            let startParam = '';
+            let endParam = '';
             if (segments.intro) {
-              playerVars.start = Math.ceil(segments.intro[1]);
-              console.info(`SponsorBlock intro detected for video ${videoId}: skipping to ${playerVars.start}s`);
+              startParam = `&start=${Math.ceil(segments.intro[1])}`;
+              console.info(`SponsorBlock (Safari) intro skip: starting at ${Math.ceil(segments.intro[1])}s`);
             }
             if (segments.outro) {
-              playerVars.end = Math.floor(segments.outro[0]);
-              console.info(`SponsorBlock outro detected for video ${videoId}: ending at ${playerVars.end}s`);
+              endParam = `&end=${Math.floor(segments.outro[0])}`;
+              console.info(`SponsorBlock (Safari) outro skip: ending at ${Math.floor(segments.outro[0])}s`);
             }
 
-            STATE.slideshow.videoPlayers[itemId] = new YT.Player(`youtube-player-${itemId}`, {
-              height: '100%',
-              width: '100%',
-              videoId: videoId,
-              host: 'https://www.youtube-nocookie.com',
-              playerVars: playerVars,
-              events: {
-                'onReady': (event) => {
-                  const iframe = event.target.getIframe();
-                  if (iframe) {
-                    iframe.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
-                    // Full allow attribute matching what YouTube sets on their own embed pages
-                    iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
-                  }
+            // enablejsapi=1 needed for postMessage commands — does NOT trigger IFrame API handshake
+            const embedUrl = `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&mute=1&controls=0&playsinline=1&rel=0&iv_load_policy=3&enablejsapi=1&origin=${encodeURIComponent(window.location.origin)}${startParam}${endParam}`;
 
-                  // Store start/end time and videoId for later use
-                  event.target._startTime = playerVars.start || 0;
-                  event.target._endTime = playerVars.end || undefined;
-                  event.target._videoId = videoId;
+            const ytIframe = document.createElement('iframe');
+            ytIframe.style.cssText = 'width:100%;height:100%;border:0;pointer-events:none;';
+            ytIframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
+            ytIframe.setAttribute('allowfullscreen', '');
+            ytIframe.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
+            ytIframe.src = embedUrl;
+            videoBackdrop.appendChild(ytIframe);
 
-                  // Store reference to wrapper for fading
-                  event.target._wrapperDiv = videoBackdrop;
+            // Show immediately — no onStateChange available for plain iframes
+            videoBackdrop.style.opacity = '1';
 
-                  // Unmute now if user wants sound.
-                  if (!STATE.slideshow.isMuted) {
-                    event.target.unMute();
-                    event.target.setVolume(40);
-                  }
+            // Helper: send postMessage command to the iframe player
+            const ytCmd = (func, args = []) => {
+              try {
+                ytIframe.contentWindow?.postMessage(
+                  JSON.stringify({ event: 'command', func, args }),
+                  'https://www.youtube-nocookie.com'
+                );
+              } catch(e) { /* cross-origin access may fail on some iOS versions */ }
+            };
 
-                  if (typeof event.target.setPlaybackQuality === 'function') {
-                    event.target.setPlaybackQuality(quality);
-                  }
+            // YouTube won't send onStateChange events unless we explicitly subscribe.
+            // The IFrame API does this automatically; we must do it manually for plain iframes.
+            const subscribeToYtEvents = () => {
+              try {
+                // Step 1: Announce we're listening
+                ytIframe.contentWindow?.postMessage(
+                  JSON.stringify({ event: 'listening' }),
+                  'https://www.youtube-nocookie.com'
+                );
+                // Step 2: Subscribe to state change events
+                ytIframe.contentWindow?.postMessage(
+                  JSON.stringify({ event: 'command', func: 'addEventListener', args: ['onStateChange'] }),
+                  'https://www.youtube-nocookie.com'
+                );
+              } catch(e) {}
+            };
 
-                  // Stop playback if slide was navigated away from
-                  const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
-                  const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
+            // Subscribe when iframe has finished loading
+            ytIframe.addEventListener('load', subscribeToYtEvents);
 
-                  if (!slide || !slide.classList.contains('active') || document.hidden || (isVideoPlayerOpen && !isVideoPlayerOpen.classList.contains('hide'))) {
-                    event.target.stopVideo();
-                  } else {
-                    // Pause slideshow timer when video starts if configured
-                    if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
-                      STATE.slideshow.slideInterval.stop();
-                    }
+            // Listen for YouTube state changes (video ended → advance slide)
+            const handleYtMessage = (event) => {
+              if (!event.origin.includes('youtube')) return;
+              try {
+                const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
 
-                    // Safety check after 1s: handle navigation-away during the window,
-                    // and fallback to muted play if autoplay failed for any reason.
-                    const timeoutId = setTimeout(() => {
-                      const isVideoPlayerOpenNow = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
-                      if (document.hidden || (isVideoPlayerOpenNow && !isVideoPlayerOpenNow.classList.contains('hide')) || !slide.classList.contains('active')) {
-                        console.log(`Navigation detected during autoplay check for ${itemId}, stopping video.`);
-                        try {
-                          event.target.stopVideo();
-                        } catch (e) { console.warn("Error stopping video:", e); }
-                        return;
-                      }
+                // Player is ready — re-subscribe in case the first attempt was too early
+                if (data.event === 'onReady') {
+                  subscribeToYtEvents();
+                }
 
-                      // If somehow not playing/buffering yet, force muted fallback
-                      const state = event.target.getPlayerState();
-                      if (state !== YT.PlayerState.PLAYING && state !== YT.PlayerState.BUFFERING) {
-                        console.warn(`Autoplay stalled for ${itemId}, attempting muted fallback`);
-                        event.target.mute();
-                        event.target.playVideo();
-                      }
-                    }, 1000);
-
-                    if (!STATE.slideshow.autoplayTimeouts) STATE.slideshow.autoplayTimeouts = [];
-                    STATE.slideshow.autoplayTimeouts.push(timeoutId);
-                  }
-                },
-                'onStateChange': (event) => {
-                  // Fade in when playing
-                  if (event.data === YT.PlayerState.PLAYING) {
-                      if (event.target._wrapperDiv) {
-                          event.target._wrapperDiv.style.opacity = "1";
-                      }
-                  }
-                  
-                  if (event.data === YT.PlayerState.ENDED) {
+                if (data.event === 'onStateChange') {
+                  console.log(`🍎 Safari YT state: ${data.info} for ${itemId}`);
+                  if (data.info === 0) { // 0 = ENDED
                     const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
                     if (slide && slide.classList.contains('active')) {
                       SlideshowManager.nextSlide();
                     }
                   }
-                },
-                'onError': (event) => {
-                  console.warn(`YouTube player error ${event.data} for video ${videoId}`);
-                  // Fallback to next slide on error
-                  if (CONFIG.waitForTrailerToEnd) {
-                    SlideshowManager.nextSlide();
+                }
+              } catch(e) {}
+            };
+            window.addEventListener('message', handleYtMessage);
+
+            // Create a postMessage-based stub compatible with all slide management code
+            // Key: we NEVER clear ytIframe.src — that would break the YouTube session and cause Error 153.
+            // Instead we use postMessage pause/play/seek to control playback state.
+            STATE.slideshow.videoPlayers[itemId] = {
+              _isSafariIframe: true,
+              _iframe: ytIframe,
+              _videoId: videoId,
+              _embedUrl: embedUrl,
+              _msgHandler: handleYtMessage,
+              pauseVideo()         { ytCmd('pauseVideo'); },
+              stopVideo()          { ytCmd('pauseVideo'); ytCmd('seekTo', [0, true]); },
+              playVideo()          { ytCmd('playVideo'); },
+              mute()               { ytCmd('mute'); },
+              unMute()             { ytCmd('unMute'); },
+              setVolume(v)         { ytCmd('setVolume', [v]); },
+              getIframe()          { return ytIframe; },
+              getPlayerState()     { return 1; }, // approximate: avoids triggering fallback timeouts
+              loadVideoById({ videoId: vid, startSeconds = 0 }) {
+                if (vid === this._videoId) {
+                  // Same video — seek to start and resume. NEVER change src (would cause Error 153).
+                  ytCmd('seekTo', [startSeconds, true]);
+                  ytCmd('playVideo');
+                } else {
+                  // Different video — need a fresh embed URL
+                  const url = `https://www.youtube-nocookie.com/embed/${vid}?autoplay=1&mute=1&controls=0&playsinline=1&rel=0&iv_load_policy=3&enablejsapi=1&origin=${encodeURIComponent(window.location.origin)}`;
+                  ytIframe.src = url;
+                  this._videoId = vid;
+                  this._embedUrl = url;
+                }
+              },
+              destroy() {
+                window.removeEventListener('message', this._msgHandler);
+                ytIframe.remove();
+              }
+            };
+
+            console.log(`🍎 Safari detected — using plain iframe embed for YouTube video ${videoId}`);
+          });
+
+        } else {
+          // ── Non-Safari: YouTube IFrame API ──────────────────────────────────────
+          const ytPlayerDiv = SlideUtils.createElement("div", {
+            id: `youtube-player-${itemId}`,
+            style: "width: 100%; height: 100%;"
+          });
+
+          videoBackdrop.appendChild(ytPlayerDiv);
+
+          SlideUtils.loadYouTubeIframeAPI().then(() => {
+            ApiUtils.fetchSponsorBlockData(videoId).then(segments => {
+              const playerVars = {
+                autoplay: 1,
+                mute: 1, // need to be muted for Safari, because apple makes life difficult...
+                controls: 0,
+                disablekb: 1,
+                fs: 0,
+                iv_load_policy: 3,
+                rel: 0,
+                loop: 0,
+                playsinline: 1,
+                origin: window.location.origin,
+                enablejsapi: 1
+              };
+
+              // Determine video quality
+              let quality = 'hd1080';
+              if (CONFIG.preferredVideoQuality === 'Maximum') {
+                quality = 'highres';
+              } else if (CONFIG.preferredVideoQuality === '720p') {
+                quality = 'hd720';
+              } else if (CONFIG.preferredVideoQuality === '1080p') {
+                quality = 'hd1080';
+              } else {
+                quality = window.screen.width > 1920 ? 'highres' : 'hd1080';
+              }
+
+              playerVars.suggestedQuality = quality;
+
+              // Apply SponsorBlock start/end times
+              if (segments.intro) {
+                playerVars.start = Math.ceil(segments.intro[1]);
+                console.info(`SponsorBlock intro detected for video ${videoId}: skipping to ${playerVars.start}s`);
+              }
+              if (segments.outro) {
+                playerVars.end = Math.floor(segments.outro[0]);
+                console.info(`SponsorBlock outro detected for video ${videoId}: ending at ${playerVars.end}s`);
+              }
+
+              STATE.slideshow.videoPlayers[itemId] = new YT.Player(`youtube-player-${itemId}`, {
+                height: '100%',
+                width: '100%',
+                videoId: videoId,
+                host: 'https://www.youtube-nocookie.com',
+                playerVars: playerVars,
+                events: {
+                  'onReady': (event) => {
+                    const iframe = event.target.getIframe();
+                    if (iframe) {
+                      iframe.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
+                      // Full allow attribute matching what YouTube sets on their own embed pages
+                      iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
+                    }
+
+                    // Store start/end time and videoId for later use
+                    event.target._startTime = playerVars.start || 0;
+                    event.target._endTime = playerVars.end || undefined;
+                    event.target._videoId = videoId;
+
+                    // Store reference to wrapper for fading
+                    event.target._wrapperDiv = videoBackdrop;
+
+                    // Unmute now if user wants sound.
+                    if (!STATE.slideshow.isMuted) {
+                      event.target.unMute();
+                      event.target.setVolume(40);
+                    }
+
+                    if (typeof event.target.setPlaybackQuality === 'function') {
+                      event.target.setPlaybackQuality(quality);
+                    }
+
+                    // Stop playback if slide was navigated away from
+                    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'))) {
+                      event.target.stopVideo();
+                    } else {
+                      if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
+                        STATE.slideshow.slideInterval.stop();
+                      }
+
+                      const timeoutId = setTimeout(() => {
+                        const isVideoPlayerOpenNow = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
+                        if (document.hidden || (isVideoPlayerOpenNow && !isVideoPlayerOpenNow.classList.contains('hide')) || !slide.classList.contains('active')) {
+                          console.log(`Navigation detected during autoplay check for ${itemId}, stopping video.`);
+                          try {
+                            event.target.stopVideo();
+                          } catch (e) { console.warn("Error stopping video:", e); }
+                          return;
+                        }
+
+                        const state = event.target.getPlayerState();
+                        if (state !== YT.PlayerState.PLAYING && state !== YT.PlayerState.BUFFERING) {
+                          console.warn(`Autoplay stalled for ${itemId}, attempting muted fallback`);
+                          event.target.mute();
+                          event.target.playVideo();
+                        }
+                      }, 1000);
+
+                      if (!STATE.slideshow.autoplayTimeouts) STATE.slideshow.autoplayTimeouts = [];
+                      STATE.slideshow.autoplayTimeouts.push(timeoutId);
+                    }
+                  },
+                  'onStateChange': (event) => {
+                    if (event.data === YT.PlayerState.PLAYING) {
+                        if (event.target._wrapperDiv) {
+                            event.target._wrapperDiv.style.opacity = "1";
+                        }
+                    }
+
+                    if (event.data === YT.PlayerState.ENDED) {
+                      const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
+                      if (slide && slide.classList.contains('active')) {
+                        SlideshowManager.nextSlide();
+                      }
+                    }
+                  },
+                  'onError': (event) => {
+                    console.warn(`YouTube player error ${event.data} for video ${videoId}`);
+                    if (CONFIG.waitForTrailerToEnd) {
+                      SlideshowManager.nextSlide();
+                    }
                   }
                 }
-              }
+              });
             });
           });
-        });
+        } // end non-Safari
 
         // 2. Check for local video trailers in MediaSources if yt is not available
       } else if (!isYoutube) {
@@ -2529,9 +2649,10 @@ const SlideshowManager = {
             }
 
             // Check if playback successfully started, otherwise fallback to muted
+            // (Only for real YT.Player instances — Safari stub's getPlayerState() always returns 1)
             setTimeout(() => {
               if (!currentSlide.classList.contains('active')) return;
-              if (player.getPlayerState &&
+              if (player.getPlayerState && typeof YT !== 'undefined' &&
                 player.getPlayerState() !== YT.PlayerState.PLAYING &&
                 player.getPlayerState() !== YT.PlayerState.BUFFERING) {
                 console.log("YouTube loadVideoById didn't start playback, retrying muted...");

manifest.json

@@ -9,12 +9,12 @@
     "imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
     "versions": [
       {
-        "version": "1.7.0.3",
+        "version": "1.7.0.6",
         "changelog": "- Add YouTube no-cookie host and referrer policy for iframe security to fix playback issues on iOS/MacOS",
         "targetAbi": "10.11.0.0",
-        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.7.0.3/Jellyfin.Plugin.MediaBarEnhanced.zip",
-        "checksum": "b4f35ff869129d43c075948e5430b199",
-        "timestamp": "2026-03-05T23:23:07Z"
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.7.0.6/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "58cb845a803a209362acbc01acc7dacc",
+        "timestamp": "2026-03-06T00:25:03Z"
       },
       {
         "version": "1.6.6.4",