Bump version to 1.7.1.13 in project file and manifest for release

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

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css

@@ -353,14 +353,8 @@
   right: 0%;
   width: 100%;
   height: 100%;
-  mask-image: linear-gradient(to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%);
-  -webkit-mask-image: linear-gradient(to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%);
+  mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
+  -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
 }
 
 .backdrop-container.full-width-video {
@@ -383,14 +377,8 @@
   object-position: center 20%;
   border-radius: 5px;
   z-index: 3;
-  mask-image: linear-gradient(to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%);
-  -webkit-mask-image: linear-gradient(to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%);
+  mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
+  -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
 }
 
 .backdrop-overlay {
@@ -402,14 +390,8 @@
   background-color: rgba(0, 0, 0, 0.2);
   border-radius: 5px;
   z-index: 4;
-  mask-image: linear-gradient(to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 4%,
-      #000000 6%);
-  -webkit-mask-image: linear-gradient(to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 4%,
-      #000000 6%);
+  mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 4%, #000000 6%);
+  -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 4%, #000000 6%);
 }
 
 .gradient-overlay {
@@ -423,14 +405,8 @@
       rgba(29, 29, 29, 0.35) 30%,
       rgba(29, 29, 29, 0) 100%);
   z-index: 4;
-  mask-image: linear-gradient(to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 4%,
-      #000000 6%);
-  -webkit-mask-image: linear-gradient(to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 4%,
-      #000000 6%);
+  mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 4%, #000000 6%);
+  -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 4%, #000000 6%);
 }
 
 .gradient-overlay.full-width-video {
@@ -525,16 +501,21 @@
   font-family: "Archivo Narrow", sans-serif;
   font-size: 18px;
   white-space: nowrap;
+  background-color: rgb(255, 255, 255);
+  color: rgb(0, 0, 0);
   cursor: pointer;
   transition: all 0.3s ease;
   font-weight: 700;
   gap: 6px;
   -webkit-tap-highlight-color: #fff0;
   border-radius: 8px;
+  -webkit-appearance: none;
+  appearance: none;
 }
 
 .detail-button {
   font-size: 18px;
+  background-color: rgb(255, 255, 255);
   color: rgb(0, 0, 0);
   border-radius: 50%;
   height: 50px;
@@ -543,10 +524,13 @@
   cursor: pointer;
   transition: color 0.2s;
   -webkit-tap-highlight-color: #fff0;
+  -webkit-appearance: none;
+  appearance: none;
 }
 
 .favorite-button {
   font-size: 18px;
+  background-color: rgb(255, 255, 255);
   color: red;
   border-radius: 50%;
   height: 50px;
@@ -555,6 +539,8 @@
   cursor: pointer;
   transition: color 0.2s;
   -webkit-tap-highlight-color: #fff0;
+  -webkit-appearance: none;
+  appearance: none;
 }
 
 .favorite-button.favorited {
@@ -662,7 +648,7 @@
   display: flex;
   align-items: center;
   border-radius: 5px;
-  background: rgb(255 255 255 / 0.8);
+  background: rgba(255, 255, 255, 0.8);
   color: #000;
   border: none;
   font-weight: 600;
@@ -711,14 +697,8 @@
     object-fit: cover;
     object-position: center 20%;
     z-index: 3;
-    mask-image: linear-gradient(to top,
-        #fff0 2%,
-        rgb(0 0 0 / 0.5) 6%,
-        #000000 8%);
-    -webkit-mask-image: linear-gradient(to top,
-        #fff0 2%,
-        rgb(0 0 0 / 0.5) 6%,
-        #000000 8%);
+    mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
+    -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
   }
 
   .gradient-overlay {
@@ -727,17 +707,11 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgb(0 0 0 / 0.25);
+    background: rgba(0, 0, 0, 0.25);
     z-index: 4;
     pointer-events: none;
-    mask-image: linear-gradient(to top,
-        #fff0 2%,
-        rgb(0 0 0 / 0.5) 6%,
-        #000000 8%);
-    -webkit-mask-image: linear-gradient(to top,
-        #fff0 2%,
-        rgb(0 0 0 / 0.5) 6%,
-        #000000 8%);
+    mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
+    -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
   }
 
   .dots-container {

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js

@@ -749,7 +749,7 @@ const SlideUtils = {
     if (isYoutube && videoId) {
       const ytIframe = this.createElement('iframe', {
         id: 'modal-yt-player',
-        src: `https://www.youtube-nocookie.com/embed/${videoId}?enablejsapi=1&origin=${encodeURIComponent(window.location.origin)}`,
+        src: `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&controls=1&iv_load_policy=3&rel=0&playsinline=1`,
         allow: 'autoplay; encrypted-media',
         style: 'width: 100%; height: 100%; border: none;',
         referrerpolicy: 'strict-origin-when-cross-origin',
@@ -759,20 +759,6 @@ const SlideUtils = {
       contentContainer.appendChild(ytIframe);
       overlay.append(closeButton, contentContainer);
       document.body.appendChild(overlay);
-
-      this.loadYouTubeIframeAPI().then(() => {
-        new YT.Player(ytIframe, {
-          playerVars: {
-            autoplay: 1,
-            controls: 1,
-            iv_load_policy: 3,
-            rel: 0,
-            playsinline: 1,
-            origin: window.location.origin,
-            enablejsapi: 1
-          }
-        });
-      });
     } else {
       const video = this.createElement('video', {
         src: url,
@@ -780,6 +766,7 @@ const SlideUtils = {
         autoplay: true,
         className: 'video-modal-player'
       });
+      video.setAttribute('playsinline', '');
       contentContainer.appendChild(video);
       overlay.append(closeButton, contentContainer);
       document.body.appendChild(overlay);
@@ -836,7 +823,7 @@ const LocalizationUtils = {
       }
     }
 
-    if (window.ApiClient && STATE.jellyfinData?.accessToken) {
+    if (window.ApiClient && STATE.jellyfinData && STATE.jellyfinData.accessToken) {
       try {
         const userId = window.ApiClient.getCurrentUserId();
         if (userId) {
@@ -846,7 +833,7 @@ const LocalizationUtils = {
           });
           if (userResponse.ok) {
             const userData = await userResponse.json();
-            if (userData.Configuration?.AudioLanguagePreference) {
+            if (userData.Configuration && userData.Configuration.AudioLanguagePreference) {
               locale = userData.Configuration.AudioLanguagePreference.toLowerCase();
             }
           }
@@ -856,7 +843,7 @@ const LocalizationUtils = {
       }
     }
 
-    if (!locale && window.ApiClient && STATE.jellyfinData?.accessToken) {
+    if (!locale && window.ApiClient && (STATE.jellyfinData && STATE.jellyfinData.accessToken)) {
       try {
         const configUrl = window.ApiClient.getUrl('System/Configuration');
         const configResponse = await fetch(configUrl, {
@@ -1031,7 +1018,7 @@ const LocalizationUtils = {
    */
   getLocalizedString(key, fallback, ...args) {
     const locale = this.cachedLocale || 'en-us';
-    let translated = this.translations[locale]?.[key] || fallback;
+    let translated = (this.translations[locale] && this.translations[locale][key]) || fallback;
 
     if (args.length > 0) {
       for (let i = 0; i < args.length; i++) {
@@ -1776,9 +1763,12 @@ const SlideCreator = {
       }
 
       const isLowPower = isLowPowerDevice();
+      const isIOSApp = /iPhone|iPad|iPod/i.test(navigator.userAgent);
+      const limitVideos = isLowPower || isIOSApp;
       const itemIndex = STATE.slideshow.itemIds ? STATE.slideshow.itemIds.indexOf(itemId) : -1;
       const isActiveSlide = itemIndex !== -1 && itemIndex === STATE.slideshow.currentSlideIndex;
-      const shouldCreateVideo = !isLowPower || isActiveSlide;
+      // Limit YouTube iframe bulk creation on low power devices OR iOS (which kills the WebProcess on OOM)
+      const shouldCreateVideo = !limitVideos || isActiveSlide;
 
       if (isYoutube && videoId && shouldCreateVideo) {
         isVideo = true;
@@ -1946,6 +1936,7 @@ const SlideCreator = {
         };
 
         videoAttributes.muted = "";
+        videoAttributes.playsinline = "";
 
         videoBackdrop = SlideUtils.createElement("video", videoAttributes);
         videoBackdrop.volume = 0.4;
@@ -2454,6 +2445,7 @@ const SlideshowManager = {
         previousVisibleSlide.classList.remove("active");
       }
 
+      void currentSlide.offsetWidth;
       currentSlide.classList.add("active");
 
       // Manage Video Playback: Stop others, Play current
@@ -2731,9 +2723,9 @@ const SlideshowManager = {
 
       const totalItems = STATE.slideshow.itemIds.length;
       let distance = Math.abs(index - currentIndex);
-      if (totalItems > keepRange * 2) {
-          distance = Math.min(distance, totalItems - distance);
-      }
+      
+      // Always calculate circular distance for slideshow
+      distance = Math.min(distance, totalItems - distance);
 
       if (distance > keepRange) {
         // Destroy video player if exists
@@ -2803,7 +2795,7 @@ const SlideshowManager = {
 
     if (currentItemId) {
       const currentSlide = document.querySelector(`.slide[data-item-id="${currentItemId}"]`);
-      const video = currentSlide?.querySelector('video');
+      const video = currentSlide ? currentSlide.querySelector('video') : null;
 
       if (video) {
         video.muted = STATE.slideshow.isMuted;
@@ -2963,7 +2955,7 @@ const SlideshowManager = {
     if (!currentSlide) return;
 
     // YouTube player: just resume, don't reload
-    const ytPlayer = STATE.slideshow.videoPlayers?.[currentItemId];
+    const ytPlayer = (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) ? STATE.slideshow.videoPlayers[currentItemId] : undefined;
     if (ytPlayer && typeof ytPlayer.playVideo === 'function') {
       if (STATE.slideshow.isMuted) {
         if (typeof ytPlayer.mute === 'function') ytPlayer.mute();

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.1.7",
+        "version": "1.7.1.13",
         "changelog": "- 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.7.1.7/Jellyfin.Plugin.MediaBarEnhanced.zip",
-        "checksum": "2ed5fe25cdce41fa44c159649c8a7898",
-        "timestamp": "2026-03-08T19:15:10Z"
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.7.1.12/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "f00a5abf5a2bfd7d6ca3adf20d75b110",
+        "timestamp": "2026-03-08T22:15:28Z"
       },
       {
         "version": "1.7.0.14",