Bump version to 1.7.0.11

Enhance YouTube player integration with fullscreen and picture-in-picture support
Update manifest.json for release v1.7.0.10 [skip ci]
2026-03-06 03:18:26 +01:00 · 2026-03-06 03:18:13 +01:00 · 2026-03-06 02:02:52 +00:00 · 2026-03-06 03:02:01 +01:00 · 2026-03-06 03:01:34 +01:00 · 2026-03-06 01:24:40 +00:00
3 changed files with 93 additions and 103 deletions
--- a/Jellyfin.Plugin.MediaBarEnhanced/Jellyfin.Plugin.MediaBarEnhanced.csproj
+++ b/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.2</Version>
+    <Version>1.7.0.11</Version>
    <RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced</RepositoryUrl>
  </PropertyGroup>

--- a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
+++ b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
@@ -163,6 +163,14 @@ const isUserLoggedIn = () => {
  }
 };

+/**
+ * Detects if the current device is a low-power device (Smart TVs, etc.)
+ * @returns {boolean} True if running on a low-power device
+ */
+const isLowPowerDevice = () => {
+  return /webOS|LG Browser|SMART-TV|SmartTV|Tizen|Viera|NetCast|Roku|VIDAA/i.test(navigator.userAgent);
+};
+
 /**
 * Initializes Jellyfin data from ApiClient
 * @param {Function} callback - Function to call once data is initialized
@@ -734,17 +742,21 @@ const SlideUtils = {
    }

    if (isYoutube && videoId) {
-      const playerDiv = this.createElement('div', { id: 'modal-yt-player' });
-      contentContainer.appendChild(playerDiv);
+      const ytIframe = this.createElement('iframe', {
+        id: 'modal-yt-player',
+        src: `https://www.youtube-nocookie.com/embed/${videoId}?enablejsapi=1&origin=${encodeURIComponent(window.location.origin)}`,
+        allow: 'autoplay; encrypted-media; fullscreen; picture-in-picture',
+        style: 'width: 100%; height: 100%; border: none;',
+        referrerpolicy: 'strict-origin-when-cross-origin',
+        allowfullscreen: 'true'
+      });
+
+      contentContainer.appendChild(ytIframe);
      overlay.append(closeButton, contentContainer);
      document.body.appendChild(overlay);

      this.loadYouTubeIframeAPI().then(() => {
-        new YT.Player('modal-yt-player', {
-          height: '100%',
-          width: '100%',
-          videoId: videoId,
-          host: 'https://www.youtube-nocookie.com',
+        new YT.Player(ytIframe, {
          playerVars: {
            autoplay: 1,
            controls: 1,
@@ -753,14 +765,6 @@ const SlideUtils = {
            playsinline: 1,
            origin: window.location.origin,
            enablejsapi: 1
-          },
-          events: {
-            'onReady': (event) => {
-              const iframe = event.target.getIframe();
-              if (iframe) {
-                iframe.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
-              }
-            }
          }
        });
      });
@@ -1403,7 +1407,7 @@ const ApiUtils = {

            return {
                id: trailer.Id,
-                url: `${STATE.jellyfinData.serverAddress}/Videos/${trailer.Id}/stream.mp4?mediaSourceId=${mediaSourceId}&api_key=${STATE.jellyfinData.accessToken}`
+                url: `${STATE.jellyfinData.serverAddress}/Videos/${trailer.Id}/stream.mp4?mediaSourceId=${mediaSourceId}&api_key=${STATE.jellyfinData.accessToken}&static=true`
            };
        }
        return null;
@@ -1442,7 +1446,7 @@ const ApiUtils = {

               return {
                   id: video.Id,
-                   url: `${STATE.jellyfinData.serverAddress}/Videos/${video.Id}/stream.mp4?api_key=${STATE.jellyfinData.accessToken}`
+                   url: `${STATE.jellyfinData.serverAddress}/Videos/${video.Id}/stream.mp4?api_key=${STATE.jellyfinData.accessToken}&static=true`
               };
           }
      }
@@ -1668,7 +1672,7 @@ const SlideCreator = {
          
          trailerUrl = {
              id: videoId,
-              url: `${STATE.jellyfinData.serverAddress}/Videos/${videoId}/stream.mp4?api_key=${STATE.jellyfinData.accessToken}`
+              url: `${STATE.jellyfinData.serverAddress}/Videos/${videoId}/stream.mp4?api_key=${STATE.jellyfinData.accessToken}&static=true`
          };
      } else {
          // Assume it's a standard URL (YouTube, etc.)
@@ -1696,7 +1700,7 @@ const SlideCreator = {
         console.log(`Using local trailer fallback for ${itemId}: ${trailerUrl}`);
    }

-    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    
    // Client Setting Overrides
    const enableVideo = MediaBarEnhancedSettingsManager.getSetting('videoBackdrops', CONFIG.enableVideoBackdrop);
@@ -1726,7 +1730,12 @@ const SlideCreator = {
        console.warn("Invalid trailer URL:", trailerUrl);
      }

-      if (isYoutube && videoId) {
+      const isLowPower = isLowPowerDevice();
+      const itemIndex = STATE.slideshow.itemIds ? STATE.slideshow.itemIds.indexOf(itemId) : -1;
+      const isActiveSlide = itemIndex !== -1 && itemIndex === STATE.slideshow.currentSlideIndex;
+      const shouldCreateVideo = !isLowPower || isActiveSlide;
+
+      if (isYoutube && videoId && shouldCreateVideo) {
        isVideo = true;
        // Create container for YouTube API
        const videoClass = CONFIG.fullWidthVideo ? "video-backdrop-full" : "video-backdrop-default";
@@ -1737,20 +1746,25 @@ const SlideCreator = {
            style: "opacity: 0; transition: opacity 1.2s ease-in-out;" // Start interrupted/transparent
        });

-        const ytPlayerDiv = SlideUtils.createElement("div", {
+        // Create an iframe upfront
+        const ytPlayerIframe = SlideUtils.createElement("iframe", {
          id: `youtube-player-${itemId}`,
-          style: "width: 100%; height: 100%;"
+          src: `https://www.youtube-nocookie.com/embed/${videoId}?enablejsapi=1&origin=${encodeURIComponent(window.location.origin)}`,
+          style: "width: 100%; height: 100%; border: none;",
+          allow: "autoplay; encrypted-media; fullscreen; picture-in-picture",
+          referrerpolicy: "strict-origin-when-cross-origin",
+          allowfullscreen: "true"
        });
        
-        videoBackdrop.appendChild(ytPlayerDiv);
+        videoBackdrop.appendChild(ytPlayerIframe);

        // Initialize YouTube Player
        SlideUtils.loadYouTubeIframeAPI().then(() => {
          // Fetch SponsorBlock data
          ApiUtils.fetchSponsorBlockData(videoId).then(segments => {
            const playerVars = {
-              autoplay: 1,
-              mute: 1, // need to be muted for Safari, because apple makes life difficult...
+              autoplay: 0,
+              mute: STATE.slideshow.isMuted ? 1 : 0,
              controls: 0,
              disablekb: 1,
              fs: 0,
@@ -1787,19 +1801,10 @@ const SlideCreator = {
              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',
+            STATE.slideshow.videoPlayers[itemId] = new YT.Player(ytPlayerIframe, {
              playerVars: playerVars,
              events: {
                'onReady': (event) => {
-                  const iframe = event.target.getIframe();
-                  if (iframe) {
-                    iframe.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
-                  }
-
                  // Store start/end time and videoId for later use
                  event.target._startTime = playerVars.start || 0;
                  event.target._endTime = playerVars.end || undefined;
@@ -1808,8 +1813,9 @@ const SlideCreator = {
                  // Store reference to wrapper for fading
                  event.target._wrapperDiv = videoBackdrop;

-                  // Unmute now if user wants sound.
-                  if (!STATE.slideshow.isMuted) {
+                  if (STATE.slideshow.isMuted) {
+                    event.target.mute();
+                  } else {
                    event.target.unMute();
                    event.target.setVolume(40);
                  }
@@ -1818,34 +1824,28 @@ const SlideCreator = {
                    event.target.setPlaybackQuality(quality);
                  }

-                  // Stop playback if slide was navigated away from
+                  // Only play if this is the active slide
                  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 {
-                    // 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.
+                  if (slide && slide.classList.contains('active') && !document.hidden && (!isVideoPlayerOpen || isVideoPlayerOpen.classList.contains('hide'))) {
+                    event.target.playVideo();
+                    
+                    // Check if it actually started playing after a short delay (handling autoplay blocks)
                    const timeoutId = setTimeout(() => {
+                      // Re-check conditions before processing fallback
                      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;
+                          console.log(`Navigation detected during autoplay check for ${itemId}, stopping video.`);
+                          try {
+                            event.target.stopVideo();
+                          } catch (e) { console.warn("Error stopping video in timeout:", e); }
+                          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`);
+                      if (event.target.getPlayerState() !== YT.PlayerState.PLAYING &&
+                        event.target.getPlayerState() !== YT.PlayerState.BUFFERING) {
+                        console.warn(`Autoplay blocked for ${itemId}, attempting muted fallback`);
                        event.target.mute();
                        event.target.playVideo();
                      }
@@ -1853,6 +1853,11 @@ const SlideCreator = {

                    if (!STATE.slideshow.autoplayTimeouts) STATE.slideshow.autoplayTimeouts = [];
                    STATE.slideshow.autoplayTimeouts.push(timeoutId);
+
+                    // Pause slideshow timer when video starts if configured
+                    if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
+                      STATE.slideshow.slideInterval.stop();
+                    }
                  }
                },
                'onStateChange': (event) => {
@@ -1883,7 +1888,7 @@ const SlideCreator = {
        });

        // 2. Check for local video trailers in MediaSources if yt is not available
-      } else if (!isYoutube) {
+      } else if (!isYoutube && shouldCreateVideo) {
        isVideo = true;

        const videoSrc = (typeof trailerUrl === 'object' ? trailerUrl.url : trailerUrl);
@@ -1896,7 +1901,6 @@ const SlideCreator = {
        };

        videoAttributes.muted = "";
-        videoAttributes.playsinline = ""; // again Safari needs extra treatment...

        videoBackdrop = SlideUtils.createElement("video", videoAttributes);
        videoBackdrop.volume = 0.4;
@@ -2467,58 +2471,42 @@ const SlideshowManager = {
        if (videoBackdrop.tagName === 'VIDEO') {
          // Restore src from data-src if it was deactivated to release connections
          const lazySrc = videoBackdrop.getAttribute('data-src');
-          const isFreshLoad = lazySrc && !videoBackdrop.src;
+          if (lazySrc && !videoBackdrop.src) {
+            videoBackdrop.src = lazySrc;
+          }
+
+          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 => {
-              setTimeout(() => {
-                if (videoBackdrop.paused && currentSlide.classList.contains('active')) {
-                  console.warn(`Autoplay blocked for ${currentItemId}, attempting muted fallback`);
-                  videoBackdrop.muted = true;
-                  videoBackdrop.play().catch(err => console.error("Muted fallback failed", err));
-                }
-              }, 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();
-          }
+          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`);
+                videoBackdrop.muted = true;
+                videoBackdrop.play().catch(err => console.error("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) {
            // Use loadVideoById to enforce start and end times
-            // load always starts muted first, then unmute if needed
            player.loadVideoById({
              videoId: player._videoId,
              startSeconds: player._startTime || 0,
              endSeconds: player._endTime
            });
-            player.mute();
-            if (!STATE.slideshow.isMuted) {
-              setTimeout(() => {
-                // Only unmute if still on the same slide
-                if (currentSlide.classList.contains('active')) {
-                  player.unMute();
-                  player.setVolume(40);
-                }
-              }, 600);
+
+            if (STATE.slideshow.isMuted) {
+              player.mute();
+            } else {
+              player.unMute();
+              player.setVolume(40);
            }

            // Check if playback successfully started, otherwise fallback to muted
@@ -2592,7 +2580,7 @@ const SlideshowManager = {
        STATE.slideshow.isTransitioning = false;

        if (previousVisibleSlide) {
-          const enableAnimations = MediaBarEnhancedSettingsManager.getSetting('slideAnimations', CONFIG.slideAnimationEnabled);
+          const enableAnimations = MediaBarEnhancedSettingsManager.getSetting('slideAnimations', CONFIG.slideAnimationEnabled) && !isLowPowerDevice();
          if (enableAnimations) {
            const prevBackdrop = previousVisibleSlide.querySelector(".backdrop");
            const prevLogo = previousVisibleSlide.querySelector(".logo");
@@ -2633,7 +2621,9 @@ const SlideshowManager = {
   */
  async preloadAdjacentSlides(currentIndex) {
    const totalItems = STATE.slideshow.totalItems;
-    const preloadCount = Math.min(Math.max(CONFIG.preloadCount || 1, 1), 5);
+    let preloadCount = Math.min(Math.max(CONFIG.preloadCount || 1, 1), 5);
+    if (isLowPowerDevice()) preloadCount = 1; // Strict limit for TVs
+    
    const preloadedIds = new Set();

    // Preload next slides
--- a/manifest.json
+++ b/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.2",
+        "version": "1.7.0.11",
        "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.2/Jellyfin.Plugin.MediaBarEnhanced.zip",
-        "checksum": "ac29b647173ef306beb01f3f66373c21",
-        "timestamp": "2026-03-05T22:44:55Z"
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.7.0.10/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "054793363c988cfd1dce37876a0e800f",
+        "timestamp": "2026-03-06T02:02:52Z"
      },
      {
        "version": "1.6.6.4",
Author	SHA1	Message	Date
CodeDevMLH	fc2491a4ef	Bump version to 1.7.0.11 All checks were successful Auto Release Plugin / build-and-release (push) Successful in 52s Details	2026-03-06 03:18:26 +01:00
CodeDevMLH	03276d7722	Enhance YouTube player integration with fullscreen and picture-in-picture support	2026-03-06 03:18:13 +01:00
CodeDevMLH	8676160e7b	Update manifest.json for release v1.7.0.10 [skip ci]	2026-03-06 02:02:52 +00:00
CodeDevMLH	c562560bc0	Bump version to 1.7.0.10 All checks were successful Auto Release Plugin / build-and-release (push) Successful in 51s Details	2026-03-06 03:02:01 +01:00
CodeDevMLH	98474d4ff6	Refactor YouTube player integration to use iframe for improved performance and security	2026-03-06 03:01:34 +01:00
CodeDevMLH	14c0eb43ed	Update manifest.json for release v1.7.0.9 [skip ci]	2026-03-06 01:24:40 +00:00
CodeDevMLH	c4cbeda2b8	Bump version to 1.7.0.9 All checks were successful Auto Release Plugin / build-and-release (push) Successful in 51s Details	2026-03-06 02:23:50 +01:00
CodeDevMLH	53ad568be4	Fix active slide detection logic in SlideCreator for improved video playback handling	2026-03-06 02:23:13 +01:00
CodeDevMLH	fba64bd0f6	Update manifest.json for release v1.7.0.8 [skip ci]	2026-03-06 01:17:19 +00:00
CodeDevMLH	3da16c4c5c	Bump version to 1.7.0.8 All checks were successful Auto Release Plugin / build-and-release (push) Successful in 52s Details	2026-03-06 02:16:28 +01:00
CodeDevMLH	c7cd7be3ee	Add low-power device detection and adjust video playback settings	2026-03-06 02:16:09 +01:00
CodeDevMLH	6d90523eef	Update manifest.json for release v1.7.0.7 [skip ci]	2026-03-06 00:45:38 +00:00
CodeDevMLH	2a3e8057a1	Bump version to 1.7.0.7 All checks were successful Auto Release Plugin / build-and-release (push) Successful in 51s Details	2026-03-06 01:44:24 +01:00
CodeDevMLH	42026b0ee8	test revert	2026-03-06 01:44:04 +01:00
CodeDevMLH	64dbc3cfd3	Update manifest.json for release v1.7.0.6 [skip ci]	2026-03-06 00:25:04 +00:00
CodeDevMLH	c998266dd7	Bump version to 1.7.0.6 All checks were successful Auto Release Plugin / build-and-release (push) Successful in 53s Details	2026-03-06 01:24:11 +01:00
CodeDevMLH	9b941e5a77	test again	2026-03-06 01:23:49 +01:00
CodeDevMLH	1d70d7166d	Update manifest.json for release v1.7.0.5 [skip ci]	2026-03-05 23:59:06 +00:00
CodeDevMLH	5331f0faf1	Bump version to 1.7.0.5 All checks were successful Auto Release Plugin / build-and-release (push) Successful in 50s Details	2026-03-06 00:58:15 +01:00
CodeDevMLH	0508188705	test nochmal Some checks failed Auto Release Plugin / build-and-release (push) Has been cancelled Details	2026-03-06 00:57:58 +01:00
CodeDevMLH	cc861f4263	Update manifest.json for release v1.7.0.4 [skip ci]	2026-03-05 23:35:23 +00:00
CodeDevMLH	10e6cdc4a2	Bump version to 1.7.0.4 All checks were successful Auto Release Plugin / build-and-release (push) Successful in 51s Details	2026-03-06 00:34:32 +01:00
CodeDevMLH	a8c7faab6b	Add Safari support for YouTube video playback using plain iframe embed	2026-03-06 00:34:19 +01:00
CodeDevMLH	6df390fa18	Update manifest.json for release v1.7.0.3 [skip ci]	2026-03-05 23:23:07 +00:00
CodeDevMLH	d0c3d7ee4d	Bump version to 1.7.0.3 (test 3) All checks were successful Auto Release Plugin / build-and-release (push) Successful in 52s Details	2026-03-06 00:22:14 +01:00
CodeDevMLH	bc621aacdf	test	2026-03-06 00:21:54 +01:00