Update manifest.json for release v1.7.0.4 [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.1</Version>
+    <Version>1.7.0.4</Version>
     <RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced</RepositoryUrl>
   </PropertyGroup>
 

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js

@@ -1403,7 +1403,9 @@ const ApiUtils = {
 
             return {
                 id: trailer.Id,
-                url: `${STATE.jellyfinData.serverAddress}/Videos/${trailer.Id}/stream.mp4?mediaSourceId=${mediaSourceId}&api_key=${STATE.jellyfinData.accessToken}`
+                // static=true forces Jellyfin to direct-stream (no transcoding) which enables
+                // HTTP Range Requests (Accept-Ranges: bytes) — required by Safari for video playback
+                url: `${STATE.jellyfinData.serverAddress}/Videos/${trailer.Id}/stream.mp4?mediaSourceId=${mediaSourceId}&api_key=${STATE.jellyfinData.accessToken}&static=true`
             };
         }
         return null;
@@ -1734,9 +1736,55 @@ 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;"
         });
 
+        // 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);
+
+        if (isSafariWebKit) {
+          // ── Safari: plain iframe embed ───────────────────────────────────────────
+          const embedUrl = `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&mute=1&controls=0&playsinline=1&rel=0&iv_load_policy=3&enablejsapi=0&origin=${encodeURIComponent(window.location.origin)}`;
+
+          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);
+
+          // Show immediately — no onStateChange available for plain iframes
+          videoBackdrop.style.opacity = '1';
+
+          // Create a stub player compatible with all slide management code
+          STATE.slideshow.videoPlayers[itemId] = {
+            _isSafariIframe: true,
+            _iframe: ytIframe,
+            _videoId: videoId,
+            _embedUrl: embedUrl,
+            pauseVideo()   { ytIframe.src = ''; },
+            stopVideo()    { ytIframe.src = ''; },
+            playVideo()    { if (!ytIframe.src) ytIframe.src = this._embedUrl; },
+            mute()         { /* cannot mute plain iframe mid-play */ },
+            unMute()       { /* cannot unmute plain iframe mid-play */ },
+            setVolume()    { /* not available */ },
+            getIframe()    { return ytIframe; },
+            getPlayerState() { return 1; }, // always report PLAYING so fallback timeouts don't fire
+            loadVideoById({ videoId: vid }) {
+              const url = `https://www.youtube-nocookie.com/embed/${vid}?autoplay=1&mute=1&controls=0&playsinline=1&rel=0&iv_load_policy=3&enablejsapi=0`;
+              ytIframe.src = url;
+              this._videoId = vid;
+              this._embedUrl = url;
+            },
+            destroy() { 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%;"
@@ -1744,9 +1792,7 @@ const SlideCreator = {
 
           videoBackdrop.appendChild(ytPlayerDiv);
 
-        // Initialize YouTube Player
           SlideUtils.loadYouTubeIframeAPI().then(() => {
-          // Fetch SponsorBlock data
             ApiUtils.fetchSponsorBlockData(videoId).then(segments => {
               const playerVars = {
                 autoplay: 1,
@@ -1770,8 +1816,7 @@ const SlideCreator = {
                 quality = 'hd720';
               } else if (CONFIG.preferredVideoQuality === '1080p') {
                 quality = 'hd1080';
-            } else { // Auto or fallback
+              } else {
-              // If screen is wider than 1920, prefer highres, otherwise 1080p
                 quality = window.screen.width > 1920 ? 'highres' : 'hd1080';
               }
 
@@ -1798,6 +1843,8 @@ const SlideCreator = {
                     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
@@ -1825,13 +1872,10 @@ const SlideCreator = {
                     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();
                       }
 
-                    // 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')) {
@@ -1842,7 +1886,6 @@ const SlideCreator = {
                           return;
                         }
 
-                      // 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`);
@@ -1856,7 +1899,6 @@ const SlideCreator = {
                     }
                   },
                   'onStateChange': (event) => {
-                  // Fade in when playing
                     if (event.data === YT.PlayerState.PLAYING) {
                         if (event.target._wrapperDiv) {
                             event.target._wrapperDiv.style.opacity = "1";
@@ -1872,7 +1914,6 @@ const SlideCreator = {
                   },
                   'onError': (event) => {
                     console.warn(`YouTube player error ${event.data} for video ${videoId}`);
-                  // Fallback to next slide on error
                     if (CONFIG.waitForTrailerToEnd) {
                       SlideshowManager.nextSlide();
                     }
@@ -1881,6 +1922,7 @@ const SlideCreator = {
               });
             });
           });
+        } // end non-Safari
 
         // 2. Check for local video trailers in MediaSources if yt is not available
       } else if (!isYoutube) {
@@ -1928,7 +1970,10 @@ const SlideCreator = {
         });
 
         videoBackdrop.addEventListener('error', (event) => {
-          console.warn(`Local video error for item ${itemId}`);
+          const src = event.target.src || event.target.getAttribute('data-src') || 'unknown';
+          const errCode = event.target.error ? event.target.error.code : 'n/a';
+          const errMsg = event.target.error ? event.target.error.message : 'n/a';
+          console.warn(`Local video error for item ${itemId} | code=${errCode} | msg=${errMsg} | url=${src}`);
           const slide = event.target.closest('.slide');
           if (slide && slide.classList.contains('active')) {
             SlideshowManager.nextSlide();
@@ -2467,20 +2512,16 @@ const SlideshowManager = {
         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) {
+          const isFreshLoad = lazySrc && !videoBackdrop.src;
-            videoBackdrop.src = lazySrc;
-            videoBackdrop.load();
-          }
-
-          videoBackdrop.currentTime = 0;
 
           videoBackdrop.muted = STATE.slideshow.isMuted;
           if (!STATE.slideshow.isMuted) {
             videoBackdrop.volume = 0.4;
           }
 
+          const doPlay = () => {
+            if (!currentSlide.classList.contains('active')) return;
             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(`Autoplay blocked for ${currentItemId}, attempting muted fallback`);
@@ -2489,6 +2530,21 @@ const SlideshowManager = {
                 }
               }, 1000);
             });
+          };
+
+          if (isFreshLoad) {
+            // Safari: set src, then wait for loadedmetadata before seeking/playing
+            videoBackdrop.src = lazySrc;
+            videoBackdrop.load();
+            videoBackdrop.addEventListener('loadedmetadata', () => {
+              videoBackdrop.currentTime = 0;
+              doPlay();
+            }, { once: true });
+          } else {
+            // src already set (e.g. paused slide resuming)
+            videoBackdrop.currentTime = 0;
+            doPlay();
+          }
         } else if (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
           const player = STATE.slideshow.videoPlayers[currentItemId];
           if (player && typeof player.loadVideoById === 'function' && player._videoId) {

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.1",
+        "version": "1.7.0.4",
         "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.1/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.7.0.4/Jellyfin.Plugin.MediaBarEnhanced.zip",
-        "checksum": "1e75cf789d686565176fea5a7010dd50",
+        "checksum": "a8f3cbea12cdce5902212d4ca753eb83",
-        "timestamp": "2026-03-05T21:43:50Z"
+        "timestamp": "2026-03-05T23:35:22Z"
       },
       {
         "version": "1.6.6.4",