Add configuration options for local backdrops and randomization features

Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs

@@ -22,6 +22,9 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
         public bool EnableVideoBackdrop { get; set; } = true;
         public bool UseSponsorBlock { get; set; } = true;
         public bool PreferLocalTrailers { get; set; } = false;
+        public bool RandomizeLocalTrailers { get; set; } = false;
+        public bool PreferLocalBackdrops { get; set; } = false;
+        public bool RandomizeThemeVideos { get; set; } = false;
         public bool WaitForTrailerToEnd { get; set; } = true;
         public bool StartMuted { get; set; } = true;
         public bool FullWidthVideo { get; set; } = true;

Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html

@@ -65,6 +65,14 @@
                             </label>
                             <div class="fieldDescription">If enabled, local trailers will be preferred over remote (YouTube) trailers.</div>
                         </div>
+                        <div class="checkboxContainer checkboxContainer-withDescription" id="PreferLocalBackdropsContainer">
+                            <label>
+                                <input is="emby-checkbox" type="checkbox" id="PreferLocalBackdrops"
+                                    name="PreferLocalBackdrops" />
+                                <span>Prefer Local Backdrops / Theme Videos</span>
+                            </label>
+                            <div class="fieldDescription">If enabled, local backdrop videos (Theme Videos) will be preferred over trailers.</div>
+                        </div>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
                                 <input is="emby-checkbox" type="checkbox" id="WaitForTrailerToEnd"
@@ -187,6 +195,22 @@
                             <div class="fieldDescription">If enabled, users will see a media bar icon in the header to
                                 override settings (like disabling the bar or trailer backdrops) locally on their device.</div>
                         </div>
+                        <div class="checkboxContainer checkboxContainer-withDescription">
+                            <label>
+                                <input is="emby-checkbox" type="checkbox" id="RandomizeThemeVideos"
+                                    name="RandomizeThemeVideos" />
+                                <span>Randomize Backdrop Video</span>
+                            </label>
+                            <div class="fieldDescription">If enabled, a random video from the backdrops/theme videos will be selected instead of the first one.</div>
+                        </div>
+                        <div class="checkboxContainer checkboxContainer-withDescription">
+                            <label>
+                                <input is="emby-checkbox" type="checkbox" id="RandomizeLocalTrailers"
+                                    name="RandomizeLocalTrailers" />
+                                <span>Randomize Local Trailer</span>
+                            </label>
+                            <div class="fieldDescription">If enabled, a random local trailer will be selected instead of the first one (if multiple exist).</div>
+                        </div>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
                                 <input is="emby-checkbox" type="checkbox" id="UseSponsorBlock" name="UseSponsorBlock" />
@@ -419,7 +443,8 @@
                             'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
                             'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
                             'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
-                            'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections'
+                            'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
+                            'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers'
                         ];
 
                         keys.forEach(function (key) {
@@ -470,12 +495,15 @@
                         // Handle Prefer Local Trailers visibility
                         var enableVideoBackdropCheckbox = page.querySelector('#EnableVideoBackdrop');
                         var preferLocalContainer = page.querySelector('#PreferLocalTrailersContainer');
+                        var preferLocalBackdropsContainer = page.querySelector('#PreferLocalBackdropsContainer');
 
                         function updatePreferLocalVisibility() {
                             if (enableVideoBackdropCheckbox && enableVideoBackdropCheckbox.checked) {
                                 if (preferLocalContainer) preferLocalContainer.style.display = 'block';
+                                if (preferLocalBackdropsContainer) preferLocalBackdropsContainer.style.display = 'block';
                             } else {
                                 if (preferLocalContainer) preferLocalContainer.style.display = 'none';
+                                if (preferLocalBackdropsContainer) preferLocalBackdropsContainer.style.display = 'none';
                             }
                         }
 
@@ -505,7 +533,8 @@
                         'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
                         'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
                         'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
-                        'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections'
+                        'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
+                        'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers'
                     ];
 
                     keys.forEach(function (key) {

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js

@@ -42,6 +42,9 @@ const CONFIG = {
   enableVideoBackdrop: true,
   useSponsorBlock: true,
   preferLocalTrailers: false,
+  randomizeLocalTrailers: false,
+  preferLocalBackdrops: false,
+  randomizeThemeVideos: false,
   waitForTrailerToEnd: true,
   startMuted: true,
   fullWidthVideo: true,
@@ -1371,20 +1374,68 @@ const ApiUtils = {
         return null;
       }
 
-      const trailers = await response.json();
+        const trailers = await response.json();
-      if (trailers && trailers.length > 0) {
+        if (trailers && trailers.length > 0) {
-        const trailer = trailers[0];
-        const mediaSourceId = trailer.MediaSources && trailer.MediaSources[0] ? trailer.MediaSources[0].Id : trailer.Id;
             
-        // Return object with ID and URL
+            let trailer;
-        return {
+            if (CONFIG.randomizeLocalTrailers && trailers.length > 1) {
-            id: trailer.Id,
+                const randomIndex = Math.floor(Math.random() * trailers.length);
-            url: `${STATE.jellyfinData.serverAddress}/Videos/${trailer.Id}/stream.mp4?Static=true&mediaSourceId=${mediaSourceId}&api_key=${STATE.jellyfinData.accessToken}`
+                trailer = trailers[randomIndex];
-        };
+                 console.log(`Using random local trailer (${randomIndex + 1}/${trailers.length}) for ${itemId}: ${trailer.Name}`);
+            } else {
+                trailer = trailers[0];
+            }
+
+            const mediaSourceId = trailer.MediaSources && trailer.MediaSources[0] ? trailer.MediaSources[0].Id : trailer.Id;
+
+            return {
+                id: trailer.Id,
+                url: `${STATE.jellyfinData.serverAddress}/Videos/${trailer.Id}/stream.mp4?mediaSourceId=${mediaSourceId}&api_key=${STATE.jellyfinData.accessToken}`
+            };
+        }
+        return null;
+    } catch (error) {
+      console.error(`Error fetching local trailer for ${itemId}:`, error);
+      return null;
+    }
+  },
+
+  /**
+   * Fetches theme videos for an item
+   * @param {string} itemId - Item ID
+   * @returns {Promise<Object|null>} Theme video data object {id, url} or null
+   */
+  async fetchThemeVideos(itemId) {
+    try {
+      const response = await fetch(
+          `${STATE.jellyfinData.serverAddress}/Items/${itemId}/ThemeVideos?userId=${STATE.jellyfinData.userId}`, 
+          { headers: this.getAuthHeaders() }
+      );
+      
+      if (response.ok) {
+           const data = await response.json();
+           const items = Array.isArray(data) ? data : (data.Items || []);
+           
+           if (items.length > 0) {
+               let video;
+               if (CONFIG.randomizeThemeVideos && items.length > 1) {
+                   const randomIndex = Math.floor(Math.random() * items.length);
+                   video = items[randomIndex];
+                   console.log(`Found Theme Video (Random ${randomIndex + 1}/${items.length}) via ThemeVideos endpoint: ${video.Name} (${video.Id})`);
+               } else {
+                   video = items[0];
+                   console.log(`Found Theme Video (First) via ThemeVideos endpoint: ${video.Name} (${video.Id})`);
+               }
+
+               return {
+                   id: video.Id,
+                   url: `${STATE.jellyfinData.serverAddress}/Videos/${video.Id}/stream.mp4?api_key=${STATE.jellyfinData.accessToken}`
+               };
+           }
       }
       return null;
     } catch (error) {
-      console.error(`Error fetching local trailer for ${itemId}:`, error);
+      console.error(`Error fetching theme videos for ${itemId}:`, error);
       return null;
     }
   }
@@ -1603,7 +1654,7 @@ const SlideCreator = {
           
           trailerUrl = {
               id: videoId,
-              url: `${STATE.jellyfinData.serverAddress}/Videos/${videoId}/stream.mp4?Static=true&api_key=${STATE.jellyfinData.accessToken}`
+              url: `${STATE.jellyfinData.serverAddress}/Videos/${videoId}/stream.mp4?api_key=${STATE.jellyfinData.accessToken}`
           };
       } else {
           // Assume it's a standard URL (YouTube, etc.)
@@ -1611,16 +1662,21 @@ const SlideCreator = {
           console.log(`Using custom trailer URL for ${itemId}: ${trailerUrl}`);
       }
     }
-    // 1b. Check Local Trailer if preferred
+    // 1b. Check Theme Video if preferred (Local Backdrop)
+    else if (CONFIG.preferLocalBackdrops && item.themeVideoUrl) {
+        trailerUrl = item.themeVideoUrl;
+        console.log(`Using theme video (local backdrop) for ${itemId}: ${trailerUrl.url || trailerUrl}`);
+    } 
+    // 1c. 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
+    // 1d. Fallback to Remote Trailer
     else if (item.RemoteTrailers && item.RemoteTrailers.length > 0) {
       trailerUrl = item.RemoteTrailers[0].Url;
     }
-    // 1d. Final Fallback to Local Trailer (even if not preferred)
+    // 1e. Final Fallback to Local Trailer (even if not preferred)
     else if (item.LocalTrailerCount > 0 && item.localTrailerUrl) {
          trailerUrl = item.localTrailerUrl;
          console.log(`Using local trailer fallback for ${itemId}: ${trailerUrl}`);
@@ -2170,6 +2226,11 @@ const SlideCreator = {
           item.localTrailerUrl = await ApiUtils.fetchLocalTrailer(itemId);
       }
 
+      // Pre-fetch theme video URL if needed
+      if (CONFIG.preferLocalBackdrops) {
+          item.themeVideoUrl = await ApiUtils.fetchThemeVideos(itemId);
+      }
+
       const slideElement = this.createSlideElement(
         item,
         item.Type === "Movie" ? "Movie" : "TV Show"