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

Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs

@@ -36,6 +36,7 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
         public bool EnableLoadingScreen { get; set; } = true;
         public bool EnableKeyboardControls { get; set; } = true;
         public bool AlwaysShowArrows { get; set; } = false;
+        public bool HideArrowsOnMobile { get; set; } = true;
         public string CustomMediaIds { get; set; } = "";
         public bool EnableCustomMediaIds { get; set; } = true;
         public string PreferredVideoQuality { get; set; } = "Auto";

Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html

@@ -78,7 +78,7 @@
                             <div class="fieldDescription">If enabled, local backdrop videos (Theme Videos) will be
                                 preferred over remote and local trailers.</div>
                         </div>
-                        <div class="checkboxContainer checkboxContainer-withDescription">
+                        <div class="checkboxContainer checkboxContainer-withDescription" id="WaitForTrailerToEndContainer">
                             <label>
                                 <input is="emby-checkbox" type="checkbox" id="WaitForTrailerToEnd"
                                     name="WaitForTrailerToEnd" />
@@ -86,7 +86,7 @@
                             </label>
                             <div class="fieldDescription">Delay slide transition until trailer finishes.</div>
                         </div>
-                        <div class="checkboxContainer checkboxContainer-withDescription">
+                        <div class="checkboxContainer checkboxContainer-withDescription" id="EnableMobileVideoContainer">
                             <label>
                                 <input is="emby-checkbox" type="checkbox" id="EnableMobileVideo"
                                     name="EnableMobileVideo" />
@@ -100,8 +100,8 @@
                                     name="ShowTrailerButton" />
                                 <span>Show Trailer Button</span>
                             </label>
-                            <div class="fieldDescription">Display a button to open trailer in modal. Only visible if
+                            <div class="fieldDescription">Display a button to open trailer in modal. Button only
-                                trailer is not set as backdrop or if no trailer is available.</div>
+                                visible if trailer is not set as backdrop.</div>
                         </div>
                     </div>
 
@@ -183,15 +183,15 @@
                                 during their active date ranges. If no season matches the current date, the default
                                 Custom Media IDs above or random selection are used as fallback.</div>
                         </div>
-                        <div class="checkboxContainer checkboxContainer-withDescription">
-                            <label>
-                                <input is="emby-checkbox" type="checkbox" id="ExcludeSeasonalContent"
-                                    name="ExcludeSeasonalContent" />
-                                <span>Exclude Seasonal Content from Random Lists</span>
-                            </label>
-                            <div class="fieldDescription">When enabled, any items defined in your Seasonal Sections below will be explicitly excluded from being shown when the plugin pulls random items from your library.</div>
-                        </div>
                         <div id="seasonalContentContainer" style="display: none;">
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label>
+                                    <input is="emby-checkbox" type="checkbox" id="ExcludeSeasonalContent"
+                                        name="ExcludeSeasonalContent" />
+                                    <span>Exclude Seasonal Content from Random Lists</span>
+                                </label>
+                                <div class="fieldDescription">When enabled, any items defined in your Seasonal Sections below will be explicitly excluded from being shown when the plugin pulls random items from your library.</div>
+                            </div>
 
                             <div
                                 style="background-color: rgba(255, 255, 255, 0.05); border-left: 4px solid #00a4dc; border-radius: 4px; padding: 1em 1.5em; margin: 1.5em 0; display: flex; align-items: center; gap: 1em;">
@@ -299,16 +299,23 @@
                                 <span>Enable Loading Screen</span>
                             </label>
                             <div class="fieldDescription">Show a loading screen while the slideshow initializes. (You
-                                may have to reload the page twice)</div>
+                                may have to reload the page twice (after changing this setting) to take effect)</div>
                         </div>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
                                 <input is="emby-checkbox" type="checkbox" id="AlwaysShowArrows"
                                     name="AlwaysShowArrows" />
-                                <span>Always Show Arrows</span>
+                                <span>Always Show Arrow Navigation Buttons</span>
                             </label>
-                            <div class="fieldDescription">If enabled, navigation arrows will always be visible instead
+                            <div class="fieldDescription">Force the UI arrow navigation buttons to always be visible instead of only when hovered.</div>
-                                of only on hover.</div>
+                        </div>
+                        <div class="checkboxContainer checkboxContainer-withDescription">
+                            <label>
+                                <input is="emby-checkbox" type="checkbox" id="HideArrowsOnMobile"
+                                    name="HideArrowsOnMobile" />
+                                <span>Hide Arrows on Mobile</span>
+                            </label>
+                            <div class="fieldDescription">Completely disable the navigation arrows on mobile devices (since swiping is available).</div>
                         </div>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
@@ -320,6 +327,7 @@
                                 Space (pause), M (mute/unmute)) for
                                 the slideshow.</div>
                         </div>
+                        <hr style="max-width: 800px; margin: 1em 0;">
 
                         <h2 class="sectionTitle">Time Settings</h2>
                         <p>Leave a setting blank to use the default value.</p>
@@ -363,6 +371,7 @@
                             <div class="fieldDescription">Minimum distance in pixels for a swipe to be registered (for
                                 mobile).</div>
                         </div>
+                        <hr style="max-width: 800px; margin: 1em 0;">
 
                         <h2 class="sectionTitle">Content Sorting and Filtering</h2>
                         <div class="selectContainer">
@@ -405,6 +414,16 @@
                             <input is="emby-input" type="number" id="MaxDaysRecent" name="MaxDaysRecent" />
                             <div class="fieldDescription">Only show items added in the last X days. Leave blank or set to 0 for no limit. Example: 30.</div>
                         </div>
+                        <div class="checkboxContainer checkboxContainer-withDescription">
+                            <label>
+                                <input is="emby-checkbox" type="checkbox" id="IncludeWatchedContent"
+                                    name="IncludeWatchedContent" />
+                                <span>Include Watched Content</span>
+                            </label>
+                            <div class="fieldDescription">If enabled, watched content will be included in the random
+                                selection results.</div>
+                        </div>
+                        <hr style="max-width: 800px; margin: 1em 0;">
 
                         <h2 class="sectionTitle">Content Limits</h2>
                         <p>Leave a setting blank to use the default value.</p>
@@ -435,7 +454,7 @@
                             <label>
                                 <input is="emby-checkbox" type="checkbox" id="ShowPaginationDots"
                                     name="ShowPaginationDots" />
-                                <span>Show Pagination Dots</span>
+                                <span>Show Pagination Dots/Counter</span>
                             </label>
                             <div class="fieldDescription">Show or hide the pagination dots/counter navigation at the
                                 bottom of the slideshow.</div>
@@ -454,15 +473,6 @@
                             <input is="emby-input" type="number" id="MaxPlotLength" name="MaxPlotLength" />
                             <div class="fieldDescription">Maximum characters for the plot summary.</div>
                         </div>
-                        <div class="checkboxContainer checkboxContainer-withDescription">
-                            <label>
-                                <input is="emby-checkbox" type="checkbox" id="IncludeWatchedContent"
-                                    name="IncludeWatchedContent" />
-                                <span>Include Watched Content</span>
-                            </label>
-                            <div class="fieldDescription">If enabled, watched content will be included in the random
-                                selection results.</div>
-                        </div>
                     </div>
 
                     <div
@@ -524,7 +534,7 @@
                             'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
                             'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
                             'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating',
-                            'MaxDaysRecent', 'ExcludeSeasonalContent'
+                            'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile'
                         ];
 
                         // Manual mapping for MediaBarIsEnabled -> IsEnabled, to avoid conflicts with other plugins
@@ -582,14 +592,20 @@
                         var enableVideoBackdropCheckbox = page.querySelector('#EnableVideoBackdrop');
                         var preferLocalContainer = page.querySelector('#PreferLocalTrailersContainer');
                         var preferLocalBackdropsContainer = page.querySelector('#PreferLocalBackdropsContainer');
+                        var waitForTrailerContainer = page.querySelector('#WaitForTrailerToEndContainer');
+                        var enableMobileVideoContainer = page.querySelector('#EnableMobileVideoContainer');
 
                         function updatePreferLocalVisibility() {
                             if (enableVideoBackdropCheckbox && enableVideoBackdropCheckbox.checked) {
                                 if (preferLocalContainer) preferLocalContainer.style.display = 'block';
                                 if (preferLocalBackdropsContainer) preferLocalBackdropsContainer.style.display = 'block';
+                                if (waitForTrailerContainer) waitForTrailerContainer.style.display = 'block';
+                                if (enableMobileVideoContainer) enableMobileVideoContainer.style.display = 'block';
                             } else {
                                 if (preferLocalContainer) preferLocalContainer.style.display = 'none';
                                 if (preferLocalBackdropsContainer) preferLocalBackdropsContainer.style.display = 'none';
+                                if (waitForTrailerContainer) waitForTrailerContainer.style.display = 'none';
+                                if (enableMobileVideoContainer) enableMobileVideoContainer.style.display = 'none';
                             }
                         }
 
@@ -629,7 +645,7 @@
                         'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
                         'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
                         'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating',
-                        'MaxDaysRecent', 'ExcludeSeasonalContent'
+                        'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile'
                     ];
 
                     keys.forEach(function (key) {

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

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css

@@ -201,6 +201,9 @@
   user-select: none;
   margin: 0;
   padding: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  border: none;
 }
 
 .arrow i {
@@ -238,6 +241,9 @@
   opacity: 0.3;
   transition: opacity 0.3s ease;
   text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
+  -webkit-appearance: none;
+  appearance: none;
+  border: none;
 }
 
 .pause-button i {
@@ -274,6 +280,9 @@
   opacity: 0.3;
   transition: opacity 0.3s ease;
   text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
+  -webkit-appearance: none;
+  appearance: none;
+  border: none;
 }
 
 .mute-button i {
@@ -353,14 +362,8 @@
   right: 0%;
   width: 100%;
   height: 100%;
-  mask-image: linear-gradient(to top,
+  mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
-      #fff0 2%,
+  -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
-      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%);
 }
 
 .backdrop-container.full-width-video {
@@ -383,14 +386,8 @@
   object-position: center 20%;
   border-radius: 5px;
   z-index: 3;
-  mask-image: linear-gradient(to top,
+  mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
-      #fff0 2%,
+  -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
-      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%);
 }
 
 .backdrop-overlay {
@@ -402,14 +399,8 @@
   background-color: rgba(0, 0, 0, 0.2);
   border-radius: 5px;
   z-index: 4;
-  mask-image: linear-gradient(to top,
+  mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 4%, #000000 6%);
-      #fff0 2%,
+  -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 4%, #000000 6%);
-      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%);
 }
 
 .gradient-overlay {
@@ -423,14 +414,8 @@
       rgba(29, 29, 29, 0.35) 30%,
       rgba(29, 29, 29, 0) 100%);
   z-index: 4;
-  mask-image: linear-gradient(to top,
+  mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 4%, #000000 6%);
-      #fff0 2%,
+  -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 4%, #000000 6%);
-      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%);
 }
 
 .gradient-overlay.full-width-video {
@@ -531,6 +516,8 @@
   gap: 6px;
   -webkit-tap-highlight-color: #fff0;
   border-radius: 8px;
+  -webkit-appearance: none;
+  appearance: none;
 }
 
 .detail-button {
@@ -543,6 +530,8 @@
   cursor: pointer;
   transition: color 0.2s;
   -webkit-tap-highlight-color: #fff0;
+  -webkit-appearance: none;
+  appearance: none;
 }
 
 .favorite-button {
@@ -555,6 +544,8 @@
   cursor: pointer;
   transition: color 0.2s;
   -webkit-tap-highlight-color: #fff0;
+  -webkit-appearance: none;
+  appearance: none;
 }
 
 .favorite-button.favorited {
@@ -662,7 +653,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 +702,8 @@
     object-fit: cover;
     object-position: center 20%;
     z-index: 3;
-    mask-image: linear-gradient(to top,
+    mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
-        #fff0 2%,
+    -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
-        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%);
   }
 
   .gradient-overlay {
@@ -727,17 +712,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,
+    mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
-        #fff0 2%,
+    -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
-        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%);
   }
 
   .dots-container {

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js

@@ -57,6 +57,7 @@ const CONFIG = {
   preferredVideoQuality: "Auto",
   enableKeyboardControls: true,
   alwaysShowArrows: false,
+  hideArrowsOnMobile: true,
   enableCustomMediaIds: true,
   enableSeasonalContent: false,
   customMediaIds: "",
@@ -835,7 +836,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) {
@@ -845,7 +846,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();
             }
           }
@@ -855,7 +856,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, {
@@ -1030,7 +1031,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++) {
@@ -1775,9 +1776,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;
@@ -2453,6 +2457,7 @@ const SlideshowManager = {
         previousVisibleSlide.classList.remove("active");
       }
 
+      void currentSlide.offsetWidth;
       currentSlide.classList.add("active");
 
       // Manage Video Playback: Stop others, Play current
@@ -2730,9 +2735,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
@@ -2802,7 +2807,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;
@@ -2962,7 +2967,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();
@@ -3469,6 +3474,10 @@ const initArrowNavigation = () => {
   container.appendChild(muteButton);
 
   const showArrows = () => {
+    if (CONFIG.hideArrowsOnMobile && window.matchMedia("only screen and (max-width: 768px)").matches) {
+        return; // disable arrow display on mobile
+    }
+
     leftArrow.style.display = "block";
     rightArrow.style.display = "block";
 

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.6",
+        "version": "1.7.1.10",
-        "changelog": "- feat: add option to disable pagination dots/counter\n- feat: add exclude seasonal content from random fetching option\n- fix button issue on mobile when using ElegantFin Theme",
+        "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.6/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.7.1.10/Jellyfin.Plugin.MediaBarEnhanced.zip",
-        "checksum": "d334b961ac8c6a527dba490b5a926c40",
+        "checksum": "97e83bbdd363ad11174ffac651ee8bd3",
-        "timestamp": "2026-03-08T18:33:15Z"
+        "timestamp": "2026-03-08T21:36:22Z"
       },
       {
         "version": "1.7.0.14",