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

Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs

@@ -21,6 +21,7 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
         public bool SlideAnimationEnabled { get; set; } = true;
         public bool EnableVideoBackdrop { get; set; } = true;
         public bool UseSponsorBlock { get; set; } = true;
+        public bool PreferLocalTrailers { get; set; } = false;
         public bool WaitForTrailerToEnd { get; set; } = true;
         public bool StartMuted { get; set; } = true;
         public bool FullWidthVideo { get; set; } = true;
@@ -35,5 +36,7 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
         public bool EnableSeasonalContent { get; set; } = false;
         public bool IsEnabled { get; set; } = true;
         public bool EnableClientSideSettings { get; set; } = false;
+        public string SortBy { get; set; } = "Random";
+        public string SortOrder { get; set; } = "Ascending";
     }
 }

Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html

@@ -57,6 +57,14 @@
                             <div class="fieldDescription">Show trailers as background if available.<br>Adds a
                                 mute/unmute and pause/play button to control the video in the right top corner.</div>
                         </div>
+                        <div class="checkboxContainer checkboxContainer-withDescription" id="PreferLocalTrailersContainer">
+                            <label>
+                                <input is="emby-checkbox" type="checkbox" id="PreferLocalTrailers"
+                                    name="PreferLocalTrailers" />
+                                <span>Prefer Local Trailers</span>
+                            </label>
+                            <div class="fieldDescription">If enabled, local trailers will be preferred over remote (YouTube) trailers.</div>
+                        </div>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
                                 <input is="emby-checkbox" type="checkbox" id="WaitForTrailerToEnd"
@@ -174,8 +182,7 @@
                         </div>
                         <div class="selectContainer">
                             <label class="selectLabel" for="PreferredVideoQuality">Preferred YouTube Quality</label>
-                            <select is="emby-select" id="PreferredVideoQuality" name="PreferredVideoQuality"
+                            <select is="emby-select" id="PreferredVideoQuality" name="PreferredVideoQuality" class="selectLayout emby-select-withcolor emby-select">
-                                class="emby-select-withcolor emby-select">
                                 <option value="Auto">Auto (Smart)</option>
                                 <option value="Maximum">Maximum (4K+)</option>
                                 <option value="1080p">1080p</option>
@@ -274,6 +281,33 @@
                                 mobile).</div>
                         </div>
 
+                        <h2 class="sectionTitle">Content Sorting</h2>
+                        <div class="selectContainer">
+                            <label class="selectLabel" for="SortBy">Sort By</label>
+                            <select is="emby-select" id="SortBy" name="SortBy" class="selectLayout emby-select-withcolor emby-select">
+                                <option value="Random">Random</option>
+                                <option value="Original">Original (Custom List Order)</option>
+                                <option value="PremiereDate">Premiere Date</option>
+                                <option value="ProductionYear">Production Year</option>
+                                <option value="CriticRating">Critic Rating</option>
+                                <option value="CommunityRating">Community Rating</option>
+                                <option value="Name">Name</option>
+                                <option value="Runtime">Runtime</option>
+                            </select>
+                            <div class="fieldDescription">Sort items by the selected criteria.</div>
+                        </div>
+                        <div class="selectContainer">
+                            <label class="selectLabel" for="SortOrder">Sort Order</label>
+                            <select is="emby-select" id="SortOrder" name="SortOrder" class="selectLayout emby-select-withcolor emby-select">
+                                <option value="Ascending">Ascending</option>
+                                <option value="Descending">Descending</option>
+                            </select>
+                            <div class="fieldDescription">Sort items in Ascending or Descending order.</div>
+                        </div>
+                        <div class="fieldDescription" style="margin-bottom: 2em; color: #ffcc00;">
+                            <b>Note:</b> Sorting settings apply to both Server content and Custom IDs. 'Original' preserves Custom List order.
+                        </div>
+
                         <h2 class="sectionTitle">Content Limits</h2>
                         <p>Leave a setting blank to use the default value.</p>
                         <div class="inputContainer">
@@ -370,7 +404,8 @@
                             'WaitForTrailerToEnd', 'StartMuted', 'FullWidthVideo', 'EnableMobileVideo',
                             'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
                             'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
-                            'EnableSeasonalContent', 'EnableClientSideSettings'
+                            'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
+                            'PreferLocalTrailers'
                         ];
 
                         keys.forEach(function (key) {
@@ -404,6 +439,23 @@
                             updateDesc();
                         }
 
+                        // Handle Prefer Local Trailers visibility
+                        var enableVideoBackdropCheckbox = page.querySelector('#EnableVideoBackdrop');
+                        var preferLocalContainer = page.querySelector('#PreferLocalTrailersContainer');
+
+                        function updatePreferLocalVisibility() {
+                            if (enableVideoBackdropCheckbox && enableVideoBackdropCheckbox.checked) {
+                                if (preferLocalContainer) preferLocalContainer.style.display = 'block';
+                            } else {
+                                if (preferLocalContainer) preferLocalContainer.style.display = 'none';
+                            }
+                        }
+
+                        if (enableVideoBackdropCheckbox) {
+                            enableVideoBackdropCheckbox.addEventListener('change', updatePreferLocalVisibility);
+                            updatePreferLocalVisibility();
+                        }
+
                         Dashboard.hideLoadingMsg();
                     });
                 },
@@ -419,7 +471,8 @@
                         'WaitForTrailerToEnd', 'StartMuted', 'FullWidthVideo', 'EnableMobileVideo',
                         'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
                         'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
-                        'EnableSeasonalContent', 'EnableClientSideSettings'
+                        'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
+                        'PreferLocalTrailers'
                     ];
 
                     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.5.0.3</Version>
+    <Version>1.5.1.2</Version>
     <RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced</RepositoryUrl>
   </PropertyGroup>
 

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css

@@ -1,6 +1,6 @@
 /*
- * Jellyfin Slideshow by M0RPH3US v3.0.9
+ * Jellyfin Slideshow by M0RPH3US v4.0.1
- * Modified by CodeDevMLH v1.1.0.0
+ * Modified by CodeDevMLH
  * 
  * New features:
  * - optional Trailer background video support
@@ -14,6 +14,9 @@
  * - option to disable loading screen
  * - option to put collection (boxsets) IDs into the slideshow to display their items
  * - option to enable client-side settings (allow users to override settings locally on their device)
+ * - option to enable seasonal content (only show items that are relevant to the current season/holiday)
+ * - option to prefer local trailers (from the media item) over online sources
+ * - options to sort the content by various criteria (PremiereDate, ProductionYear, Random, Original order, etc.)
  */
 
 @import url(https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&display=swap);
@@ -161,7 +164,7 @@
 
 .homeSectionsContainer {
   position: relative;
-  top: 65vh;
+  margin-top: 65vh;
   z-index: 6;
 }
 

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js

@@ -1,6 +1,6 @@
 /*
  * Jellyfin Slideshow by M0RPH3US v4.0.1
- * Modified by CodeDevMLH v1.1.0.0
+ * Modified by CodeDevMLH
  * 
  * New features:
  * - optional Trailer background video support
@@ -14,6 +14,9 @@
  * - option to disable loading screen
  * - option to put collection (boxsets) IDs into the slideshow to display their items
  * - option to enable client-side settings (allow users to override settings locally on their device)
+ * - option to enable seasonal content (only show items that are relevant to the current season/holiday)
+ * - option to prefer local trailers (from the media item) over online sources
+ * - options to sort the content by various criteria (PremiereDate, ProductionYear, Random, Original order, etc.)
  */
 
 //Core Module Configuration
@@ -38,6 +41,7 @@ const CONFIG = {
   slideAnimationEnabled: true,
   enableVideoBackdrop: true,
   useSponsorBlock: true,
+  preferLocalTrailers: false,
   waitForTrailerToEnd: true,
   startMuted: true,
   fullWidthVideo: true,
@@ -51,6 +55,8 @@ const CONFIG = {
   customMediaIds: "",
   enableLoadingScreen: true,
   enableClientSideSettings: false,
+  sortBy: "Random",
+  sortOrder: "Ascending",
 };
 
 // State management
@@ -82,6 +88,7 @@ const STATE = {
     isMuted: CONFIG.startMuted,
     customTrailerUrls: {},
     ytPromise: null,
+    autoplayTimeouts: [],
   },
 };
 
@@ -460,6 +467,66 @@ waitForApiClientAndInitialize();
  * Utility functions for slide creation and management
  */
 const SlideUtils = {
+  /**
+   * Sorts items based on configuration
+   * @param {Array<Object>} items - Array of item objects
+   * @param {string} sortBy - Sort criteria
+   * @param {string} sortOrder - Sort order 'Ascending' or 'Descending'
+   * @returns {Array<Object>} Sorted array of items
+   */
+  sortItems(items, sortBy, sortOrder) {
+    if (sortBy === 'Random' || sortBy === 'Original') {
+      return items;
+    }
+
+    const simpleCompare = (a, b) => {
+      if (a < b) return -1;
+      if (a > b) return 1;
+      return 0;
+    };
+
+    const sorted = [...items].sort((a, b) => {
+      let valA, valB;
+
+      switch (sortBy) {
+        case 'PremiereDate':
+          valA = new Date(a.PremiereDate).getTime();
+          valB = new Date(b.PremiereDate).getTime();
+          break;
+        case 'ProductionYear':
+           valA = a.ProductionYear || 0;
+           valB = b.ProductionYear || 0;
+           break;
+        case 'CriticRating':
+           valA = a.CriticRating || 0;
+           valB = b.CriticRating || 0;
+           break;
+        case 'CommunityRating':
+          valA = a.CommunityRating || 0;
+          valB = b.CommunityRating || 0;
+          break;
+        case 'Runtime':
+          valA = a.RunTimeTicks || 0;
+          valB = b.RunTimeTicks || 0;
+          break;
+        case 'Name':
+          valA = (a.Name || '').toLowerCase();
+          valB = (b.Name || '').toLowerCase();
+          break;
+        default:
+          return 0;
+      }
+
+      return simpleCompare(valA, valB);
+    });
+
+    if (sortOrder === 'Descending') {
+      sorted.reverse();
+    }
+
+    return sorted;
+  },
+
   /**
    * Shuffles array elements randomly
    * @param {Array} array - Array to shuffle
@@ -542,7 +609,10 @@ const SlideUtils = {
   getOrCreateSlidesContainer() {
     let container = document.getElementById("slides-container");
     if (!container) {
-      container = this.createElement("div", { id: "slides-container" });
+      container = this.createElement("div", { 
+        id: "slides-container",
+        className: "noautofocus"
+      });
       document.body.appendChild(container);
     }
     return container;
@@ -670,7 +740,9 @@ const SlideUtils = {
             autoplay: 1,
             controls: 1,
             iv_load_policy: 3,
-            rel: 0
+            rel: 0,
+            playsinline: 1,
+            origin: window.location.origin
           }
         });
       });
@@ -960,8 +1032,8 @@ const ApiUtils = {
       }
 
       const response = await fetch(
-        `${STATE.jellyfinData.serverAddress}/Items/${itemId}`,
+        // `${STATE.jellyfinData.serverAddress}/Items/${itemId}`,
-        // `${STATE.jellyfinData.serverAddress}/Users/${STATE.jellyfinData.userId}/Items/${itemId}?Fields=Overview,RemoteTrailers,Genres,CommunityRating,CriticRating,OfficialRating,PremiereDate,RunTimeTicks,ProductionYear,MediaSources`,
+        `${STATE.jellyfinData.serverAddress}/Items/${itemId}?Fields=Overview,RemoteTrailers,Genres,CommunityRating,CriticRating,OfficialRating,PremiereDate,ProductionYear,MediaSources,RunTimeTicks,LocalTrailerCount`,
         {
           headers: this.getAuthHeaders(),
         }
@@ -1033,8 +1105,16 @@ const ApiUtils = {
 
       console.log("Fetching random items from server...");
 
+      let sortParams = `sortBy=${CONFIG.sortBy}`;
+
+      if (CONFIG.sortBy === 'Random' || CONFIG.sortBy === 'Original') {
+          sortParams = 'sortBy=Random';
+      } else {
+        sortParams += `&sortOrder=${CONFIG.sortOrder}`;
+      }
+
       const response = await fetch(
-        `${STATE.jellyfinData.serverAddress}/Items?IncludeItemTypes=Movie,Series&Recursive=true&hasOverview=true&imageTypes=Logo,Backdrop&sortBy=Random&isPlayed=False&enableUserData=true&Limit=${CONFIG.maxItems}&fields=Id`,
+        `${STATE.jellyfinData.serverAddress}/Items?IncludeItemTypes=Movie,Series&Recursive=true&hasOverview=true&imageTypes=Logo,Backdrop&${sortParams}&isPlayed=False&enableUserData=true&Limit=${CONFIG.maxItems}&fields=Id`,
         {
           headers: this.getAuthHeaders(),
         }
@@ -1253,6 +1333,39 @@ const ApiUtils = {
       console.error(`Error fetching collection items for ${collectionId}:`, error);
       return [];
     }
+  },
+
+  /**
+   * Fetches the first local trailer for an item
+   * @param {string} itemId - Item ID
+   * @returns {Promise<string|null>} Stream URL or null
+   */
+  async fetchLocalTrailer(itemId) {
+    try {
+      const response = await fetch(
+        `${STATE.jellyfinData.serverAddress}/Users/${STATE.jellyfinData.userId}/Items/${itemId}/LocalTrailers`,
+        {
+          headers: this.getAuthHeaders(),
+        }
+      );
+
+      if (!response.ok) {
+        return null;
+      }
+
+      const trailers = await response.json();
+      if (trailers && trailers.length > 0) {
+        const trailer = trailers[0];
+        const mediaSourceId = trailer.MediaSources && trailer.MediaSources[0] ? trailer.MediaSources[0].Id : trailer.Id;
+        
+        // Construct stream URL
+        return `${STATE.jellyfinData.serverAddress}/Videos/${trailer.Id}/stream.mp4?Static=true&mediaSourceId=${mediaSourceId}&api_key=${STATE.jellyfinData.accessToken}`;
+      }
+      return null;
+    } catch (error) {
+      console.error(`Error fetching local trailer for ${itemId}:`, error);
+      return null;
+    }
   }
 };
 
@@ -1309,6 +1422,24 @@ class SlideTimer {
  */
 const VisibilityObserver = {
   updateVisibility() {
+    const videoPlayer = document.querySelector('.videoPlayerContainer');
+    const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+    
+    // If a full screen video player is active, hide slideshow and stop playback
+    if ((videoPlayer && !videoPlayer.classList.contains('hide')) || (trailerPlayer && !trailerPlayer.classList.contains('hide'))) {
+        const container = document.getElementById("slides-container");
+        if (container) {
+            container.style.display = "none";
+            container.style.visibility = "hidden";
+            container.style.pointerEvents = "none";
+        }
+        if (STATE.slideshow.slideInterval) {
+            STATE.slideshow.slideInterval.stop();
+        }
+        SlideshowManager.stopAllPlayback();
+        return;
+    }
+
     const activeTab = document.querySelector(".emby-tab-button-active");
     const container = document.getElementById("slides-container");
 
@@ -1435,12 +1566,21 @@ const SlideCreator = {
     let isVideo = false;
     let trailerUrl = null;
 
-    // 1. Check for Remote Trailers (YouTube)
+    // 1. Check for Remote/Local Trailers
-    // Priority: Custom Config URL > Metadata RemoteTrailer
+    // Priority: Custom Config URL > (PreferLocal -> Local) > Metadata RemoteTrailer
+
+    // 1a. Custom URL override
     if (STATE.slideshow.customTrailerUrls && STATE.slideshow.customTrailerUrls[itemId]) {
       trailerUrl = STATE.slideshow.customTrailerUrls[itemId];
       console.log(`Using custom trailer URL for ${itemId}: ${trailerUrl}`);
-    } else if (item.RemoteTrailers && item.RemoteTrailers.length > 0) {
+    } 
+    // 1b. Check Local Trailer if preferred
+    else if (CONFIG.preferLocalTrailers && item.LocalTrailerCount > 0 && item.localTrailerUrl) {
+         trailerUrl = item.localTrailerUrl;
+         console.log(`Using local trailer for ${itemId}: ${trailerUrl}`);
+    }
+    // 1c. Fallback to Remote Trailer
+    else if (item.RemoteTrailers && item.RemoteTrailers.length > 0) {
       trailerUrl = item.RemoteTrailers[0].Url;
     }
 
@@ -1491,7 +1631,9 @@ const SlideCreator = {
               fs: 0,
               iv_load_policy: 3,
               rel: 0,
-              loop: 0
+              loop: 0,
+              playsinline: 1,
+              origin: window.location.origin
             };
 
             // Determine video quality
@@ -1544,10 +1686,23 @@ const SlideCreator = {
 
                   // Only play if this is the active slide
                   const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
-                  if (slide && slide.classList.contains('active')) {
+                  const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
+
+                  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)
-                    setTimeout(() => {
+                    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 in timeout:", e); }
+                          return;
+                      }
+
                       if (event.target.getPlayerState() !== YT.PlayerState.PLAYING &&
                         event.target.getPlayerState() !== YT.PlayerState.BUFFERING) {
                         console.warn(`Autoplay blocked for ${itemId}, attempting muted fallback`);
@@ -1556,6 +1711,9 @@ const SlideCreator = {
                       }
                     }, 1000);
 
+                    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();
@@ -1592,7 +1750,7 @@ const SlideCreator = {
           autoplay: false,
           preload: "auto",
           loop: false,
-          style: "object-fit: cover; width: 100%; height: 100%; pointer-events: none;"
+          style: "object-fit: cover; object-position: center center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none;"
         };
 
         if (STATE.slideshow.isMuted) {
@@ -1934,6 +2092,11 @@ const SlideCreator = {
 
       const item = await ApiUtils.fetchItemDetails(itemId);
 
+      // Pre-fetch local trailer URL if needed
+      if (CONFIG.preferLocalTrailers && item.LocalTrailerCount > 0) {
+          item.localTrailerUrl = await ApiUtils.fetchLocalTrailer(itemId);
+      }
+
       const slideElement = this.createSlideElement(
         item,
         item.Type === "Movie" ? "Movie" : "TV Show"
@@ -2426,15 +2589,26 @@ const SlideshowManager = {
    * Used when navigating away from the home screen
    */
   stopAllPlayback() {
-    // 1. Pause all YouTube players
+    // Clear any pending autoplay timeouts
+    if (STATE.slideshow.autoplayTimeouts) {
+        STATE.slideshow.autoplayTimeouts.forEach(id => clearTimeout(id));
+        STATE.slideshow.autoplayTimeouts = [];
+    }
+
+    // 1. Stop all YouTube players
     if (STATE.slideshow.videoPlayers) {
       Object.values(STATE.slideshow.videoPlayers).forEach(player => {
         try {
-          if (player && typeof player.pauseVideo === 'function') {
+          if (player && typeof player.stopVideo === 'function') {
+            player.stopVideo();
+            if (typeof player.clearVideo === 'function') {
+                player.clearVideo();
+            }
+          } else if (player && typeof player.pauseVideo === 'function') {
             player.pauseVideo();
           }
         } catch (e) {
-          console.warn("Error pausing YouTube player:", e);
+          console.warn("Error pausing/stopping YouTube player:", e);
         }
       });
     }
@@ -2537,76 +2711,76 @@ const SlideshowManager = {
         return;
       }
 
-      // Only trap keys if focus is on body (neutral) or inside our container.
+      const activeElement = document.activeElement;
-      // To allow standard TV navigation to work for other elements (e.g. library cards).
+      const isTvDevice = window.browser && window.browser.tv;
-      const activeEl = document.activeElement;
+      const isTvLayout = window.layoutManager && window.layoutManager.tv;
-      const isBody = activeEl === document.body || !activeEl;
+      const hasTvClass = document.documentElement.classList.contains('layout-tv') || document.body.classList.contains('layout-tv');
-      const isInContainer = container.contains(activeEl) || activeEl === container;
+      const isTvMode = isTvDevice || isTvLayout || hasTvClass;
 
-      if (!isBody && !isInContainer) {
+      // Check Focus State
-        return;
+      const isBodyFocused = activeElement === document.body;
-      }
+      const hasDirectFocus = container.contains(activeElement) || activeElement === container;
       
-      const focusElement = document.activeElement;
+      // Determine if we should handle navigation keys (Arrows, Space, M)
+      // TV Mode: Strict focus required (must be on slideshow)
+      // Desktop Mode: Loose focus allowed (slideshow OR body/nothing focused)
+      const canControlSlideshow = isTvMode ? hasDirectFocus : (hasDirectFocus || isBodyFocused);
+
+      // Check for Input Fields (always ignore typing)
+      const isInputElement = activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable);
+      if (isInputElement) return;
+
+      // Check active video players (ignore if video is playing/overlay is open)
+      const videoPlayer = document.querySelector('.videoPlayerContainer');
+      const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+      const isVideoOpen = (videoPlayer && !videoPlayer.classList.contains('hide')) || (trailerPlayer && !trailerPlayer.classList.contains('hide'));
+      if (isVideoOpen) return;
 
       switch (e.key) {
         case "ArrowRight":
-          SlideshowManager.nextSlide();
+          if (canControlSlideshow) {
-          e.preventDefault();
+            SlideshowManager.nextSlide();
+            e.preventDefault();
+          }
           break;
 
         case "ArrowLeft":
-          SlideshowManager.prevSlide();
+          if (canControlSlideshow) {
-          e.preventDefault();
+            SlideshowManager.prevSlide();
+            e.preventDefault();
+          }
           break;
 
-        // case "ArrowDown":
-        //   // Manually shift focus to the content below the slideshow
-        //   const contentBelow = document.querySelector('.homeSectionsContainer');
-        //   if (contentBelow) {
-        //      const focusable = contentBelow.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-        //      if (focusable) {
-        //         focusable.focus();
-        //         e.preventDefault();
-        //      }
-        //   }
-        //   break;
-
-        // case "ArrowUp":
-        //    // Manually shift focus to the header (Search/User)
-        //    const header = document.querySelector('.skinHeader');
-        //    if (header) {
-        //       const focusable = header.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-        //       if (focusable) {
-        //          focusable.focus();
-        //          e.preventDefault();
-        //       }
-        //    }
-        //    break;
-
         case " ": // Space bar
-          this.togglePause();
+          if (canControlSlideshow) {
-          e.preventDefault();
+            this.togglePause();
+            e.preventDefault();
+          }
           break;
 
         case "m": // Mute toggle
         case "M":
-          this.toggleMute();
+          if (canControlSlideshow) {
-          e.preventDefault();
+            this.toggleMute();
+            e.preventDefault();
+          }
           break;
 
         case "Enter":
-          const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
+          // Enter always requires direct focus on the slideshow to avoid conflicts
-          if (currentItemId) {
+          if (hasDirectFocus) {
-             if (window.Emby && window.Emby.Page) {
+            const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
-               Emby.Page.show(
+            if (currentItemId) {
-                 `/details?id=${currentItemId}&serverId=${STATE.jellyfinData.serverId}`
+               if (window.Emby && window.Emby.Page) {
-               );
+                 Emby.Page.show(
-             } else {
+                   `/details?id=${currentItemId}&serverId=${STATE.jellyfinData.serverId}`
-               window.location.href = `#/details?id=${currentItemId}&serverId=${STATE.jellyfinData.serverId}`;
+                 );
-             }
+               } else {
+                 window.location.href = `#/details?id=${currentItemId}&serverId=${STATE.jellyfinData.serverId}`;
+               }
+            }
+            e.preventDefault();
           }
-          e.preventDefault();
           break;
       }
     });
@@ -2798,9 +2972,27 @@ const SlideshowManager = {
       if (itemIds.length === 0) {
         console.log("No custom list found, fetching random items from server...");
         itemIds = await ApiUtils.fetchItemIdsFromServer();
-      }
         
-      itemIds = SlideUtils.shuffleArray(itemIds);
+        if (CONFIG.sortBy === 'Random') {
+            itemIds = SlideUtils.shuffleArray(itemIds);
+        }
+      } else {
+        // Custom IDs
+        if (CONFIG.sortBy === 'Random') {
+             itemIds = SlideUtils.shuffleArray(itemIds);
+        } else if (CONFIG.sortBy !== 'Original') {
+            // Client-side sort required...
+             console.log(`Sorting ${itemIds.length} custom items by ${CONFIG.sortBy} ${CONFIG.sortOrder}`);
+             const itemsWithDetails = [];
+             for (const id of itemIds) {
+                 const item = await ApiUtils.fetchItemDetails(id);
+                 if (item) itemsWithDetails.push(item);
+             }
+             
+             const sortedItems = SlideUtils.sortItems(itemsWithDetails, CONFIG.sortBy, CONFIG.sortOrder);
+             itemIds = sortedItems.map(i => i.Id);
+        }
+      }
 
       STATE.slideshow.itemIds = itemIds;
       STATE.slideshow.totalItems = itemIds.length;

manifest.json

@@ -9,12 +9,20 @@
     "imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
     "versions": [
       {
-        "version": "1.5.0.3",
+        "version": "1.5.1.2",
-        "changelog": "- fix: keyboard controls in TV mode \n- Update mediaBarEnhanced.js and mediaBarEnhanced.css with version 4.0.1 from original repo",
+        "changelog": "- fix: iOS/MacOS playback issue?",
         "targetAbi": "10.11.0.0",
-        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.5.0.3/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.5.1.2/Jellyfin.Plugin.MediaBarEnhanced.zip",
-        "checksum": "f5454300163a4d30559d552ef7c4bbd0",
+        "checksum": "93fa8dec096d7f032a039d0a8a35241a",
-        "timestamp": "2026-02-08T00:41:44Z"
+        "timestamp": "2026-02-10T17:39:21Z"
+      },
+      {
+        "version": "1.5.0.28",
+        "changelog": "- fix: Keyboard controls in TV mode\n- Add sorting options for content\n- Add local trailer support\n- fix performance issue\n- Update mediaBarEnhanced.js and mediaBarEnhanced.css with version 4.0.1 from upstream repo",
+        "targetAbi": "10.11.0.0",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.5.0.28/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "0261ff27be18d48cefa5078706954240",
+        "timestamp": "2026-02-10T00:35:41Z"
       },
       {
         "version": "1.3.0.3",

test_scripts/fetch_random_item_browser_console.js

@@ -0,0 +1,32 @@
+(async () => {
+    const apiClient = window.ApiClient;
+    if (!apiClient) { console.error("Logged in?"); return; }
+
+    try {
+        // Fetch 1 random item ID
+        const rnd = await apiClient.getItems(apiClient.getCurrentUserId(), { SortBy: "Random", Limit: 1, Recursive: true, IncludeItemTypes: "Movie,Series" });
+        if (rnd.Items.length > 0) {
+            const id = rnd.Items[0].Id;
+            console.log("Random Item ID:", id);
+
+            // Fetch Default Details
+            const defd = await apiClient.getItem(apiClient.getCurrentUserId(), id);
+            console.log("Default Fields:", defd);
+            
+            // Fetch ALL Known Fields manually
+            const allFields = "Chapters,People,MediaStreams,UserData,RecursiveItemCount,DateCreated,MediaSources,ProductionYear,Studios,Genres,Tags,RemoteTrailers,ProviderIds,Overview,CommunityRating,CriticRating,OfficialRating,PremiereDate,RunTimeTicks";
+            const full = await res.json();
+            console.log("Full Details:", full);
+
+            // Helper to download JSON
+            const blob = new Blob([JSON.stringify(full, null, 2)], { type: "application/json" });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = `jellyfin-item-${id}.json`;
+            a.click();
+            URL.revokeObjectURL(url);
+            console.log("Downloaded JSON file.");
+        } else { console.warn("No items."); }
+    } catch (e) { console.error(e); }
+})();

test_scripts/fetch_random_item_browser_console_2.js

@@ -0,0 +1,32 @@
+(async () => {
+    // 1. Get Auth Data from the active client
+    const apiClient = window.ApiClient;
+    if (!apiClient) {
+        console.error("ApiClient not found. Are you logged in?");
+        return;
+    }
+
+    try {
+        console.log("Fetching random item...");
+        
+        // 2. Fetch 1 random item
+        // const result = await apiClient.getItems(apiClient.getCurrentUserId(), { SortBy: "Random", Limit: 1, Recursive: true, IncludeItemTypes: "Movie,Series" });
+        const result = await apiClient.getItems(apiClient.getCurrentUserId(), {
+            SortBy: "Random",
+            Limit: 1,
+            Recursive: true,
+            IncludeItemTypes: "Movie,Series", // Optional: filter types
+            Fields: "Overview,RemoteTrailers,Genres,CommunityRating,CriticRating,OfficialRating,PremiereDate,RunTimeTicks,ProductionYear,MediaSources" // Request ALL fields
+        });
+
+        if (result.Items.length > 0) {
+            const item = result.Items[0];
+            console.log("Random Item Found:", item.Name);
+            console.dir(item); // Prints the full interactive object
+        } else {
+            console.warn("No items found.");
+        }
+    } catch (error) {
+        console.error("Error fetching item:", error);
+    }
+})();

test_scripts/fetch_specific_items.js

@@ -0,0 +1,28 @@
+(async () => {
+    const apiClient = window.ApiClient;
+    if (!apiClient) {
+        console.error("ApiClient nicht gefunden.");
+        return;
+    }
+
+    // Die ID des Items, das du abrufen möchtest
+    const itemId = "DEINE_ITEM_ID_HIER"; 
+    const userId = apiClient.getCurrentUserId();
+
+    try {
+        console.log(`Rufe Details für Item ${itemId} ab...`);
+
+        // Nutze getItem() statt getItems()
+        // Parameter: userId, itemId
+        const item = await apiClient.getItem(userId, itemId);
+
+        if (item) {
+            console.log("Item Details gefunden:", item.Name);
+            console.dir(item); // Zeigt alle Metadaten (Genres, Pfade, ProviderIds, etc.)
+        } else {
+            console.warn("Item konnte nicht gefunden werden.");
+        }
+    } catch (error) {
+        console.error("Fehler beim Abrufen des Items:", error);
+    }
+})();