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

Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs

@@ -15,9 +15,12 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
         public int MaxMovies { get; set; } = 15;
         public int MaxTvShows { get; set; } = 15;
         public int MaxItems { get; set; } = 500;
+        public int MaxParentalRating { get; set; } = 0;
+        public int MaxDaysRecent { get; set; } = 0;
         public int PreloadCount { get; set; } = 3;
         public int FadeTransitionDuration { get; set; } = 500;
         public int MaxPaginationDots { get; set; } = 15;
+        public bool ShowPaginationDots { get; set; } = true;
         public bool SlideAnimationEnabled { get; set; } = true;
         public bool EnableVideoBackdrop { get; set; } = true;
         public bool UseSponsorBlock { get; set; } = true;
@@ -33,10 +36,12 @@ 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";
         public bool EnableSeasonalContent { get; set; } = false;
+        public bool ExcludeSeasonalContent { get; set; } = true;
         public string SeasonalSections { get; set; } = "[]";
         public bool IsEnabled { get; set; } = true;
         public bool EnableClientSideSettings { get; set; } = false;

Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html

@@ -43,7 +43,8 @@
                         <h2 class="sectionTitle">Main Plugin Settings</h2>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
-                                <input is="emby-checkbox" type="checkbox" id="MediaBarIsEnabled" name="MediaBarIsEnabled" />
+                                <input is="emby-checkbox" type="checkbox" id="MediaBarIsEnabled"
+                                    name="MediaBarIsEnabled" />
                                 <span>Enable Media Bar Enhanced Plugin</span>
                             </label>
                             <div class="fieldDescription">Enable or disable the entire plugin functionality.</div>
@@ -57,23 +58,27 @@
                             <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">
+                        <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 class="fieldDescription">If enabled, local trailers will be preferred over remote
+                                (YouTube) trailers.</div>
                         </div>
-                        <div class="checkboxContainer checkboxContainer-withDescription" id="PreferLocalBackdropsContainer">
+                        <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 remote and local trailers.</div>
+                            <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" />
@@ -81,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" />
@@ -95,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>
 
@@ -111,7 +116,8 @@
                                 <span>Enable Custom Media IDs</span>
                             </label>
                             <div class="fieldDescription">If enabled, the slideshow will show the items listed
-                                below as the default content. If the list is empty, random items from your library are used.</div>
+                                below as the default content. If the list is empty, random items from your library are
+                                used.</div>
                         </div>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
@@ -119,35 +125,47 @@
                                     name="ApplyLimitsToCustomIds" />
                                 <span>Apply Limits to Custom IDs</span>
                             </label>
-                            <div class="fieldDescription">If enabled, the Max Items limit (Advanced &rarr; Content Limits) will also apply to Custom Media IDs and Collections. By default, custom lists are not limited.</div>
+                            <div class="fieldDescription">If enabled, the Max Items limit (Advanced &rarr; Content
+                                Limits) will also apply to Custom Media IDs and Collections. By default, custom lists
+                                are not limited.</div>
                         </div>
                         <div id="customMediaIdsContainer">
                             <div class="inputContainer">
-                                <label class="inputLabel inputLabelUnfocused" for="CustomMediaIds">Default Media/Collection/Playlist IDs (Newline or Comma-separated)</label>
+                                <label class="inputLabel inputLabelUnfocused" for="CustomMediaIds">Default
-                                <textarea class="emby-textarea" is="emby-textarea" id="CustomMediaIds" name="CustomMediaIds"
+                                    Media/Collection/Playlist IDs (Newline or Comma-separated)</label>
+                                <textarea class="emby-textarea" is="emby-textarea" id="CustomMediaIds"
+                                    name="CustomMediaIds"
                                     style="width: 100%; height: 150px; font-family: monospace;"></textarea>
-                                <div class="fieldDescription">Enter the IDs of the items you want to show in the slideshow as your default content. You can separate them by new line or comma.
+                                <div class="fieldDescription">Enter the IDs of the items you want to show in the
+                                    slideshow as your default content. You can separate them by new line or comma.
                                     <br><br>
-                                    <b>Manual Trailer/Video Override:</b> You can specify a YouTube URL <b>OR</b> a Jellyfin Item ID (e.g. for a Theme Video) for an item by adding it in
+                                    <b>Manual Trailer/Video Override:</b> You can specify a YouTube URL <b>OR</b> a
-                                    brackets: <br> <code>e.g. ID DESCRIPTION [https://youtu.be/...]</code> or <code>ID [JellyfinItemId] DESCRIPTION</code>.
+                                    Jellyfin Item ID (e.g. for a Theme Video) for an item by adding it in
+                                    brackets: <br> <code>e.g. ID DESCRIPTION [https://youtu.be/...]</code> or
+                                    <code>ID [JellyfinItemId] DESCRIPTION</code>.
                                     <br>
                                     Methods:
                                     <ul>
                                         <li><b>YouTube URL:</b> Play a remote trailer from YouTube.</li>
-                                        <li><b>Jellyfin Item ID (GUID):</b> Play the video of another library item (e.g. a Theme Video or Backdrop Video) using the native player.</li>
+                                        <li><b>Jellyfin Item ID (GUID):</b> Play the video of another library item (e.g.
+                                            a Theme Video or Backdrop Video) using the native player.</li>
                                     </ul>
-                                    You can also add a description after the ID using any separator like space, pipe (|) or dash (-): <br>e.g. <code>ID DESCRIPTION</code> or <code>ID | DESCRIPTION</code>
+                                    You can also add a description after the ID using any separator like space, pipe (|)
+                                    or dash (-): <br>e.g. <code>ID DESCRIPTION</code> or <code>ID | DESCRIPTION</code>
                                     <br><br>
-                                    <b>Note:</b> If using a <b>Collection Name</b> (instead of an ID) combined with a description, you <b>MUST</b> use the pipe (|) separator.
+                                    <b>Note:</b> If using a <b>Collection Name</b> (instead of an ID) combined with a
+                                    description, you <b>MUST</b> use the pipe (|) separator.
                                     <br>
                                     <b>Note:</b> The separator <b>MUST NOT</b> be a hex character (0-9, a-f).
                                 </div>
-                                <p>You can find the IDs of your items in the URL of the item page in the web interface.<br>
+                                <p>You can find the IDs of your items in the URL of the item page in the web
+                                    interface.<br>
                                     Example:
                                     <code>https://your-jellyfin-url/web/#/details?id=<b style="color:red;">your-item-id</b>&serverId=your-server-id</code><br><br>
-                                    You can also insert a name of a collection or playlist to fetch the IDs of all items in
+                                    You can also insert a name of a collection or playlist to fetch the IDs of all items
-                                    it (will take the first hit.<br><b>Note:</b> There is currently no feedback if the name
+                                    in it (will take the first hit.<br><b>Note:</b> There is currently no feedback if
-                                    resolution succeeded, you will have to look if the bar displays the correct items).
+                                    the name resolution succeeded, you will have to look if the bar displays the correct
+                                    items).
                                 </p>
                             </div>
                         </div>
@@ -160,14 +178,26 @@
                                     name="EnableSeasonalContent" />
                                 <span>Enable Seasonal Content</span>
                             </label>
-                            <div class="fieldDescription">When enabled, seasonal sections below will override the default list or random selection
+                            <div class="fieldDescription">When enabled, seasonal sections below will override the
-                                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>
+                                default list or random selection
+                                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 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;">
+                            <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;">
                                 <i class="material-icons" style="color: #00a4dc; font-size: 24px;">info</i>
-                                <div>Define seasonal rules to automatically select a selection of items based on the date. Rules are evaluated from top to bottom. The first matching rule wins.</div>
+                                <div>Define seasonal rules to automatically select a selection of items based on the
+                                    date. Rules are evaluated from top to bottom. The first matching rule wins.</div>
                             </div>
 
                             <div id="seasonalSectionsList"></div>
@@ -189,8 +219,9 @@
                                     name="SlideAnimationEnabled" />
                                 <span>Enable Slide Animations</span>
                             </label>
-                            <div class="fieldDescription">Enable the zooming-in effect on background images when a new slide is
+                            <div class="fieldDescription">Enable the zooming-in effect on background images when a new
-                                shown (does not affect trailer backdrops). Attention: This may cause performance issues on weaker client hardware.</div>
+                                slide is shown (does not affect trailer backdrops). Attention: This may cause
+                                performance issues on weaker client hardware.</div>
                         </div>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
@@ -199,7 +230,8 @@
                                 <span>Enable Client-Side Settings</span>
                             </label>
                             <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>
+                                override settings (like disabling the bar or trailer backdrops) locally on their device.
+                            </div>
                         </div>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
@@ -207,7 +239,8 @@
                                     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 (if multiple exist).</div>
+                            <div class="fieldDescription">If enabled, a random video from the backdrops/theme videos
+                                will be selected instead of the first one (if multiple exist).</div>
                         </div>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
@@ -215,18 +248,22 @@
                                     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 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" />
                                 <span>Use SponsorBlock</span>
                             </label>
-                            <div class="fieldDescription">Skip intro/outro segments in YouTube trailers (if data is available).</div>
+                            <div class="fieldDescription">Skip intro/outro segments in YouTube trailers (if data is
+                                available).</div>
                         </div>
                         <div class="selectContainer">
                             <label class="selectLabel" for="PreferredVideoQuality">Preferred YouTube Quality</label>
-                            <select is="emby-select" id="PreferredVideoQuality" name="PreferredVideoQuality" class="selectLayout emby-select-withcolor emby-select" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
+                            <select is="emby-select" id="PreferredVideoQuality" name="PreferredVideoQuality"
+                                class="selectLayout emby-select-withcolor emby-select"
+                                style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
                                 <option value="Auto">Auto (Smart)</option>
                                 <option value="Maximum">Maximum (4K+)</option>
                                 <option value="1080p">1080p</option>
@@ -241,7 +278,9 @@
                                 <span>Start Muted</span>
                             </label>
                             <div class="fieldDescription">Start trailer video playback muted. (Known issue: In the
-                                Android/IOS app, backdrop trailers are always muted.)<br><b style="color:#ffcc00">Warning:</b> Disabling this may cause autoplay to fail on certain browsers due to strict autoplay policies.</div>
+                                Android/IOS app, backdrop trailers are always muted.)<br>
+                                <b style="color:#ffcc00">Warning:</b> Disabling this may cause autoplay to fail on
+                                certain browsers due to strict autoplay policies.</div>
                         </div>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
@@ -260,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>
@@ -281,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>
@@ -324,11 +371,14 @@
                             <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</h2>
+                        <h2 class="sectionTitle">Content Sorting and Filtering</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" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
+                            <select is="emby-select" id="SortBy" name="SortBy"
+                                class="selectLayout emby-select-withcolor emby-select"
+                                style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
                                 <option value="Random">Random</option>
                                 <option value="Original">Original (Custom List Order)</option>
                                 <option value="PremiereDate">Premiere Date</option>
@@ -342,15 +392,38 @@
                         </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" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
+                            <select is="emby-select" id="SortOrder" name="SortOrder"
+                                class="selectLayout emby-select-withcolor emby-select"
+                                style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
                                 <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.
+                            <b>Note:</b> Sorting settings apply to both Server content and Custom IDs. 'Original'
+                            preserves Custom List order.
                         </div>
+                        <div class="inputContainer">
+                            <label class="inputLabel inputLabelUnfocused" for="MaxParentalRating">Max Parental Rating (Age Limit)</label>
+                            <input is="emby-input" type="number" id="MaxParentalRating" name="MaxParentalRating" />
+                            <div class="fieldDescription">Items exceeding this age rating will not be shown. Leave blank or set to 0 for no limit. Examples: 12, 16, 18.</div>
+                        </div>
+                        <div class="inputContainer">
+                            <label class="inputLabel inputLabelUnfocused" for="MaxDaysRecent">Max Days Recent</label>
+                            <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>
@@ -377,6 +450,15 @@
                             <input is="emby-input" type="number" id="PreloadCount" name="PreloadCount" />
                             <div class="fieldDescription">Number of slides to preload.</div>
                         </div>
+                        <div class="checkboxContainer checkboxContainer-withDescription">
+                            <label>
+                                <input is="emby-checkbox" type="checkbox" id="ShowPaginationDots"
+                                    name="ShowPaginationDots" />
+                                <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>
+                        </div>
                         <div class="inputContainer">
                             <label class="inputLabel inputLabelUnfocused" for="MaxPaginationDots">Max Pagination
                                 Dots</label>
@@ -391,14 +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
@@ -459,7 +533,8 @@
                             'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
                             'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
                             'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
-                            'IncludeWatchedContent'
+                            'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating',
+                            'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile'
                         ];
 
                         // Manual mapping for MediaBarIsEnabled -> IsEnabled, to avoid conflicts with other plugins
@@ -501,30 +576,36 @@
                             seasonalCheckbox.addEventListener('change', updateSeasonalVisibility);
                             updateSeasonalVisibility();
                         }
-                        
+
                         // Add Season Button
                         var addSeasonBtn = page.querySelector('#addSeasonBtn');
                         if (addSeasonBtn) {
                             // Remove existing listeners to avoid duplicates if re-attached
-                             var newBtn = addSeasonBtn.cloneNode(true);
+                            var newBtn = addSeasonBtn.cloneNode(true);
-                             addSeasonBtn.parentNode.replaceChild(newBtn, addSeasonBtn);
+                            addSeasonBtn.parentNode.replaceChild(newBtn, addSeasonBtn);
-                             newBtn.addEventListener('click', function() {
+                            newBtn.addEventListener('click', function () {
-                                 MediaBarEnhancedConfigurationPage.addSeasonalSection(page);
+                                MediaBarEnhancedConfigurationPage.addSeasonalSection(page);
-                             });
+                            });
                         }
 
                         // Handle Prefer Local Trailers visibility
                         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';
                             }
                         }
 
@@ -545,7 +626,7 @@
                     if (seasonalInput) seasonalInput.value = sectionsJson;
 
                     var config = {};
-                    
+
                     // Manual mapping for MediaBarIsEnabled -> IsEnabled, to avoid conflicts with other plugins
                     var mediaBarEnabledCheckbox = page.querySelector('#MediaBarIsEnabled');
                     if (mediaBarEnabledCheckbox) {
@@ -563,7 +644,8 @@
                         'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
                         'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
                         'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
-                        'IncludeWatchedContent'
+                        'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating',
+                        'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile'
                     ];
 
                     keys.forEach(function (key) {
@@ -582,16 +664,16 @@
                     });
                 },
 
-                renderSeasonalSections: function(page, sections) {
+                renderSeasonalSections: function (page, sections) {
                     var container = page.querySelector('#seasonalSectionsList');
                     if (!container) return;
                     container.innerHTML = '';
-                    sections.forEach(function(section, index) {
+                    sections.forEach(function (section, index) {
                         MediaBarEnhancedConfigurationPage.createSectionElement(container, section, index + 1);
                     });
                 },
 
-                addSeasonalSection: function(page) {
+                addSeasonalSection: function (page) {
                     var container = page.querySelector('#seasonalSectionsList');
                     if (!container) return;
                     var index = container.children.length + 1;
@@ -603,25 +685,25 @@
                     }, index);
                 },
 
-                createSectionElement: function(container, data, index) {
+                createSectionElement: function (container, data, index) {
                     var div = document.createElement('div');
                     div.className = 'seasonal-section';
                     div.style.cssText = 'background: rgba(0,0,0,0.2); padding: 1em; margin-bottom: 1em; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1);';
-                    
+
                     var days = [];
-                    for(var i=1; i<=31; i++) days.push(i);
+                    for (var i = 1; i <= 31; i++) days.push(i);
                     var months = [
-                        {v:1, n:'Jan'}, {v:2, n:'Feb'}, {v:3, n:'Mar'}, {v:4, n:'Apr'}, 
+                        { v: 1, n: 'Jan' }, { v: 2, n: 'Feb' }, { v: 3, n: 'Mar' }, { v: 4, n: 'Apr' },
-                        {v:5, n:'May'}, {v:6, n:'Jun'}, {v:7, n:'Jul'}, {v:8, n:'Aug'}, 
+                        { v: 5, n: 'May' }, { v: 6, n: 'Jun' }, { v: 7, n: 'Jul' }, { v: 8, n: 'Aug' },
-                        {v:9, n:'Sep'}, {v:10, n:'Oct'}, {v:11, n:'Nov'}, {v:12, n:'Dec'}
+                        { v: 9, n: 'Sep' }, { v: 10, n: 'Oct' }, { v: 11, n: 'Nov' }, { v: 12, n: 'Dec' }
                     ];
 
                     function mkSelect(val, opts, cls) {
                         var h = '<select class="emby-select emby-select-withcolor ' + cls + '" style="width: auto; display: inline-block; margin-right: 5px; -webkit-appearance: menulist; appearance: menulist;">';
-                        opts.forEach(function(o) {
+                        opts.forEach(function (o) {
                             var v = o.v || o;
                             var n = o.n || o;
-                            h += '<option value="'+v+'" ' + (v == val ? 'selected' : '') + '>' + n + '</option>';
+                            h += '<option value="' + v + '" ' + (v == val ? 'selected' : '') + '>' + n + '</option>';
                         });
                         h += '</select>';
                         return h;
@@ -648,11 +730,11 @@
                         '    <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Active Period</label>' +
                         '    <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em;">' +
                         '        <span>From:</span>' +
-                                 mkSelect(data.StartDay, days, 'start-day') +
+                        mkSelect(data.StartDay, days, 'start-day') +
-                                 mkSelect(data.StartMonth, months, 'start-month') +
+                        mkSelect(data.StartMonth, months, 'start-month') +
                         '        <span style="margin-left: 1em;">To:</span>' +
-                                 mkSelect(data.EndDay, days, 'end-day') +
+                        mkSelect(data.EndDay, days, 'end-day') +
-                                 mkSelect(data.EndMonth, months, 'end-month') +
+                        mkSelect(data.EndMonth, months, 'end-month') +
                         '    </div>' +
                         '    <div class="fieldDescription">Date range (inclusive) when this content is active.</div>' +
                         '</div>' +
@@ -662,19 +744,19 @@
                         '    <div class="fieldDescription">Comma-separated or Newline separated list of Movie/Series/Collection IDs to show during this season.<br>Same options available as for the default media IDs.</div>' +
                         '</div>';
 
-                    div.querySelector('.btn-remove').addEventListener('click', function() {
+                    div.querySelector('.btn-remove').addEventListener('click', function () {
                         div.remove();
                         MediaBarEnhancedConfigurationPage.updateSectionTitles(container);
                     });
 
-                    div.querySelector('.btn-move-up').addEventListener('click', function() {
+                    div.querySelector('.btn-move-up').addEventListener('click', function () {
                         if (div.previousElementSibling) {
                             container.insertBefore(div, div.previousElementSibling);
                             MediaBarEnhancedConfigurationPage.updateSectionTitles(container);
                         }
                     });
 
-                    div.querySelector('.btn-move-down').addEventListener('click', function() {
+                    div.querySelector('.btn-move-down').addEventListener('click', function () {
                         if (div.nextElementSibling) {
                             container.insertBefore(div.nextElementSibling, div);
                             MediaBarEnhancedConfigurationPage.updateSectionTitles(container);
@@ -684,9 +766,9 @@
                     container.appendChild(div);
                 },
 
-                updateSectionTitles: function(container) {
+                updateSectionTitles: function (container) {
                     var sections = container.querySelectorAll('.seasonal-section');
-                    sections.forEach(function(section, index) {
+                    sections.forEach(function (section, index) {
                         var title = section.querySelector('.section-title');
                         if (title) {
                             title.innerText = 'Season list #' + (index + 1);
@@ -694,10 +776,10 @@
                     });
                 },
 
-                getSeasonalSectionsFromUI: function(page) {
+                getSeasonalSectionsFromUI: function (page) {
                     var sections = [];
                     var els = page.querySelectorAll('.seasonal-section');
-                    els.forEach(function(el) {
+                    els.forEach(function (el) {
                         sections.push({
                             Name: el.querySelector('.section-name').value,
                             StartDay: parseInt(el.querySelector('.start-day').value),

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.12</Version>
+    <Version>1.7.1.12</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,
+  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 +377,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 +390,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 +405,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 {
@@ -525,16 +501,21 @@
   font-family: "Archivo Narrow", sans-serif;
   font-size: 18px;
   white-space: nowrap;
+  background-color: rgba(255, 255, 255, 0.9);
+  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: rgba(255, 255, 255, 0.9);
   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: rgba(255, 255, 255, 0.9);
   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,
+    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 +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,
+    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 {
@@ -768,7 +742,22 @@
   .button-container {
     top: calc(50% + 25vh);
     left: 50%;
-    transform: translateX(-50%) scale(0.95);
+    transform: translateX(-50%);
+    width: max-content;
+    max-width: 98vw;
+    flex-wrap: nowrap;
+    justify-content: center;
+    gap: 15px;
+  }
+
+  .button-container button {
+    margin: 0 !important;
+    min-width: 0 !important;
+  }
+
+  .button-container .detail-button,
+  .button-container .favorite-button {
+    flex-shrink: 0;
   }
 
   .logo {
@@ -825,10 +814,6 @@
     .genre {
       top: calc(50% + 16vh);
     }
-
-    .button-container {
-      top: calc(50% + 27vh);
-    }
   }
 }
 
@@ -1000,3 +985,19 @@
 .layout-tv .backdrop-container{
   top: -5%;
 }
+
+@media screen and (min-width: 960px) and (-webkit-device-pixel-ratio: 1) {
+  .layout-tv .backdrop.animate {
+    animation: none !important;
+  }
+  
+  .layout-tv .logo.animate {
+    animation: none !important;
+  }
+  
+  .layout-tv .slide-counter,
+  .layout-tv .dots-container {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js

@@ -1,4 +1,4 @@
-/*
+/*
  * Jellyfin Slideshow by M0RPH3US v4.0.1
  * Modified by CodeDevMLH
  * 
@@ -38,6 +38,9 @@ const CONFIG = {
   preloadCount: 3,
   fadeTransitionDuration: 500,
   maxPaginationDots: 15,
+  showPaginationDots: true,
+  maxParentalRating: null,
+  maxDaysRecent: null,
   slideAnimationEnabled: true,
   enableVideoBackdrop: true,
   useSponsorBlock: true,
@@ -54,6 +57,7 @@ const CONFIG = {
   preferredVideoQuality: "Auto",
   enableKeyboardControls: true,
   alwaysShowArrows: false,
+  hideArrowsOnMobile: true,
   enableCustomMediaIds: true,
   enableSeasonalContent: false,
   customMediaIds: "",
@@ -63,6 +67,7 @@ const CONFIG = {
   sortOrder: "Ascending",
   applyLimitsToCustomIds: false,
   seasonalSections: "[]",
+  excludeSeasonalContent: true,
   isEnabled: true,
 };
 
@@ -124,7 +129,7 @@ const processNextRequest = () => {
     })
     .then(callback)
     .catch((error) => {
-      console.error("Error in throttled request:", error);
+      console.error("🎬 Media Bar:", "Error in throttled request:", error);
     })
     .finally(() => {
       setTimeout(processNextRequest, 100);
@@ -158,7 +163,7 @@ const isUserLoggedIn = () => {
       window.ApiClient._serverInfo.AccessToken
     );
   } catch (error) {
-    console.error("Error checking login status:", error);
+    console.error("🎬 Media Bar:", "Error checking login status:", error);
     return false;
   }
 };
@@ -177,7 +182,7 @@ const isLowPowerDevice = () => {
  */
 const initJellyfinData = (callback) => {
   if (!window.ApiClient) {
-    console.warn("⏳ window.ApiClient is not available yet. Retrying...");
+    console.warn("🎬 Media Bar:", "⏳ window.ApiClient is not available yet. Retrying...");
     setTimeout(() => initJellyfinData(callback), CONFIG.retryInterval);
     return;
   }
@@ -198,7 +203,7 @@ const initJellyfinData = (callback) => {
       callback();
     }
   } catch (error) {
-    console.error("Error initializing Jellyfin data:", error);
+    console.error("🎬 Media Bar:", "Error initializing Jellyfin data:", error);
     setTimeout(() => initJellyfinData(callback), CONFIG.retryInterval);
   }
 };
@@ -210,9 +215,9 @@ const initLocalization = async () => {
   try {
     const locale = await LocalizationUtils.getCurrentLocale();
     await LocalizationUtils.loadTranslations(locale);
-    console.log("✅ Localization initialized");
+    console.log("🎬 Media Bar:", "✅ Localization initialized");
   } catch (error) {
-    console.error("Error initializing localization:", error);
+    console.error("🎬 Media Bar:", "Error initializing localization:", error);
   }
 };
 
@@ -332,7 +337,7 @@ const initLoadingScreen = () => {
  * Resets the slideshow state completely
  */
 const resetSlideshowState = () => {
-  console.log("🔄 Resetting slideshow state...");
+  console.log("🎬 Media Bar:", "🔄 Resetting slideshow state...");
 
   if (STATE.slideshow.slideInterval) {
     STATE.slideshow.slideInterval.stop();
@@ -386,14 +391,14 @@ const startLoginStatusWatcher = () => {
 
     if (isLoggedIn !== wasLoggedIn) {
       if (isLoggedIn) {
-        console.log("👤 User logged in. Initializing slideshow...");
+        console.log("🎬 Media Bar:", "👤 User logged in. Initializing slideshow...");
         if (!STATE.slideshow.hasInitialized) {
           waitForApiClientAndInitialize();
         } else {
-          console.log("🔄 Slideshow already initialized, skipping");
+          console.log("🎬 Media Bar:", "🔄 Slideshow already initialized, skipping");
         }
       } else {
-        console.log("👋 User logged out. Stopping slideshow...");
+        console.log("🎬 Media Bar:", "👋 User logged out. Stopping slideshow...");
         resetSlideshowState();
       }
       wasLoggedIn = isLoggedIn;
@@ -411,7 +416,7 @@ const waitForApiClientAndInitialize = () => {
 
   window.slideshowCheckInterval = setInterval(() => {
     if (!window.ApiClient) {
-      console.log("⏳ ApiClient not available yet. Waiting...");
+      console.log("🎬 Media Bar:", "⏳ ApiClient not available yet. Waiting...");
       return;
     }
 
@@ -421,23 +426,23 @@ const waitForApiClientAndInitialize = () => {
       window.ApiClient._serverInfo &&
       window.ApiClient._serverInfo.AccessToken
     ) {
-      console.log(
+      console.log("🎬 Media Bar:", 
         "🔓 User is fully logged in. Starting slideshow initialization..."
       );
       clearInterval(window.slideshowCheckInterval);
 
       if (!STATE.slideshow.hasInitialized) {
         initJellyfinData(async () => {
-          console.log("✅ Jellyfin API client initialized successfully");
+          console.log("🎬 Media Bar:", "✅ Jellyfin API client initialized successfully");
           await initLocalization();
           await fetchPluginConfig();
           slidesInit();
         });
       } else {
-        console.log("🔄 Slideshow already initialized, skipping");
+        console.log("🎬 Media Bar:", "🔄 Slideshow already initialized, skipping");
       }
     } else {
-      console.log(
+      console.log("🎬 Media Bar:", 
         "🔒 Authentication incomplete. Waiting for complete login..."
       );
     }
@@ -468,11 +473,11 @@ const fetchPluginConfig = async () => {
         // Sync to LocalStorage for next load
         localStorage.setItem('mediaBarEnhanced-enableLoadingScreen', CONFIG.enableLoadingScreen);
 
-        console.log("✅ MediaBarEnhanced config loaded", CONFIG);
+        console.log("🎬 Media Bar:", "✅ MediaBarEnhanced config loaded", CONFIG);
       }
     }
   } catch (e) {
-    console.error("Failed to load MediaBarEnhanced config", e);
+    console.error("🎬 Media Bar:", "Failed to load MediaBarEnhanced config", e);
   }
 };
 
@@ -738,7 +743,7 @@ const SlideUtils = {
         }
       }
     } catch (e) {
-      console.warn("Invalid URL for modal:", url);
+      console.warn("🎬 Media Bar:", "Invalid URL for modal:", url);
     }
 
     if (isYoutube && videoId) {
@@ -821,7 +826,7 @@ const LocalizationUtils = {
         locale = localStorage.getItem("language").toLowerCase();
       }
     } catch (e) {
-      console.warn("Could not access localStorage for language:", e);
+      console.warn("🎬 Media Bar:", "Could not access localStorage for language:", e);
     }
 
     if (!locale) {
@@ -831,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) {
@@ -841,17 +846,17 @@ 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();
             }
           }
         }
       } catch (error) {
-        console.warn("Could not fetch user audio language preference:", error);
+        console.warn("🎬 Media Bar:", "Could not fetch user audio language preference:", error);
       }
     }
 
-    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, {
@@ -867,7 +872,7 @@ const LocalizationUtils = {
           }
         }
       } catch (error) {
-        console.warn("Could not fetch server metadata language preference:", error);
+        console.warn("🎬 Media Bar:", "Could not fetch server metadata language preference:", error);
       }
     }
 
@@ -912,7 +917,7 @@ const LocalizationUtils = {
           }
         }
       } catch (e) {
-        console.warn("Error checking performance entries:", e);
+        console.warn("🎬 Media Bar:", "Error checking performance entries:", e);
       }
     }
 
@@ -977,7 +982,7 @@ const LocalizationUtils = {
           this.translations[locale] = JSON.parse(jsonString);
           return;
         } catch (e) {
-          console.error('Failed to parse JSON from standard extraction.');
+          console.error("🎬 Media Bar:", 'Failed to parse JSON from standard extraction.');
           // Try alternative extraction below
         }
 
@@ -989,7 +994,7 @@ const LocalizationUtils = {
             this.translations[locale] = JSON.parse(jsonString);
             return;
           } catch (e) {
-            console.error('Failed to parse JSON from direct extraction.');
+            console.error("🎬 Media Bar:", 'Failed to parse JSON from direct extraction.');
             // Try direct extraction
           }
         }
@@ -1003,11 +1008,11 @@ const LocalizationUtils = {
             this.translations[locale] = JSON.parse(jsonString);
             return;
           } catch (e) {
-            console.error("Failed to parse JSON from chunk:", e);
+            console.error("🎬 Media Bar:", "Failed to parse JSON from chunk:", e);
           }
         }
       } catch (error) {
-        console.error("Error loading translations:", error);
+        console.error("🎬 Media Bar:", "Error loading translations:", error);
       } finally {
         delete this.isLoading[locale];
       }
@@ -1026,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++) {
@@ -1071,38 +1076,11 @@ const ApiUtils = {
 
       return itemData;
     } catch (error) {
-      console.error(`Error fetching details for item ${itemId}:`, error);
+      console.error("🎬 Media Bar:", `Error fetching details for item ${itemId}:`, error);
       return null;
     }
   },
 
-  /**
-   * Fetch item IDs from the list file
-   * @returns {Promise<Array>} Array of item IDs
-   */
-  // MARK: LIST FILE
-  async fetchItemIdsFromList() {
-    try {
-      const listFileName = `${STATE.jellyfinData.serverAddress}/web/avatars/list.txt?userId=${STATE.jellyfinData.userId}`;
-      const response = await fetch(listFileName);
-
-      if (!response.ok) {
-        console.warn("list.txt not found or inaccessible. Using random items.");
-        return [];
-      }
-
-      const text = await response.text();
-      return text
-        .split("\n")
-        .map((id) => id.trim())
-        .filter((id) => id)
-        .slice(1);
-    } catch (error) {
-      console.error("Error fetching list.txt:", error);
-      return [];
-    }
-  },
-
   /**
    * Fetches random items from the server
    * @returns {Promise<Array>} Array of item objects
@@ -1113,7 +1091,7 @@ const ApiUtils = {
         !STATE.jellyfinData.accessToken ||
         STATE.jellyfinData.accessToken === "Not Found"
       ) {
-        console.warn("Access token not available. Delaying API request...");
+        console.warn("🎬 Media Bar:", "Access token not available. Delaying API request...");
         return [];
       }
 
@@ -1121,11 +1099,11 @@ const ApiUtils = {
         !STATE.jellyfinData.serverAddress ||
         STATE.jellyfinData.serverAddress === "Not Found"
       ) {
-        console.warn("Server address not available. Delaying API request...");
+        console.warn("🎬 Media Bar:", "Server address not available. Delaying API request...");
         return [];
       }
 
-      console.log("Fetching random items from server...");
+      console.log("🎬 Media Bar:", "Fetching random items from server...");
 
       let sortParams = `sortBy=${CONFIG.sortBy}`;
 
@@ -1137,31 +1115,98 @@ const ApiUtils = {
 
       // Filter by isPlayed=False unless IncludeWatchedContent is enabled
       const playedFilter = CONFIG.includeWatchedContent ? '' : '&isPlayed=False';
+      
+      let parentalFilter = '';
+      if (CONFIG.maxParentalRating) {
+        parentalFilter = `&MaxOfficialRating=${CONFIG.maxParentalRating}`;
+      }
 
-      const response = await fetch(
+      let dateFilter = '';
-        `${STATE.jellyfinData.serverAddress}/Items?IncludeItemTypes=Movie,Series&Recursive=true&hasOverview=true&imageTypes=Logo,Backdrop&${sortParams}${playedFilter}&enableUserData=true&Limit=${CONFIG.maxItems}&fields=Id`,
+      if (CONFIG.maxDaysRecent) {
-        {
+        const pastDate = new Date();
-          headers: this.getAuthHeaders(),
+        pastDate.setDate(pastDate.getDate() - CONFIG.maxDaysRecent);
+        dateFilter = `&minDateLastSaved=${pastDate.toISOString()}`;
+      }
+      
+      // Exclude seasonal content from random lists
+      let excludeFilter = '';
+      if (CONFIG.excludeSeasonalContent && CONFIG.seasonalSections) {
+        try {
+            const sections = JSON.parse(CONFIG.seasonalSections || "[]");
+            let allExcludedIds = [];
+            
+            for (const section of sections) {
+                if (section.MediaIds) {
+                    const idsInThisSection = section.MediaIds.split(/[\n,]/)
+                        .map((line) => {
+                            const urlMatch = line.match(/\[(.*?)\]/);
+                            let id = line;
+                            if (urlMatch) {
+                                id = line.replace(/\[.*?\]/, '').trim();
+                                const guidMatch = id.match(/([0-9a-f]{32})/i);
+                                if (guidMatch) { id = guidMatch[1]; } else { id = id.split('|')[0].trim(); }
+                            }
+                            return id.trim();
+                        })
+                        .filter((id) => id);
+                    
+                    allExcludedIds.push(...idsInThisSection);
+                }
+            }
+            
+            if (allExcludedIds.length > 0) {
+                 excludeFilter = `&ExcludeItemIds=${allExcludedIds.join(',')}`;
+            }
+        } catch(e) {
+             console.error("🎬 Media Bar:", "Error extracting seasonal IDs for exclusion:", e);
         }
-      );
+      }
+
+      const fetchItems = async (currentDateFilter) => {
+        const url = `${STATE.jellyfinData.serverAddress}/Items?IncludeItemTypes=Movie,Series&Recursive=true&hasOverview=true&imageTypes=Logo,Backdrop&${sortParams}${playedFilter}${parentalFilter}${currentDateFilter}${excludeFilter}&enableUserData=true&Limit=${CONFIG.maxItems}&fields=Id,DateCreated`;
+        const resp = await fetch(url, { headers: this.getAuthHeaders() });
+        return resp;
+      };
+
+      let response = await fetchItems(dateFilter);
 
       if (!response.ok) {
-        console.error(
+        console.error("🎬 Media Bar:", 
           `Failed to fetch items: ${response.status} ${response.statusText}`
         );
         return [];
       }
 
-      const data = await response.json();
+      let data = await response.json();
-      const items = data.Items || [];
+      let items = data.Items || [];
 
-      console.log(
+      // Local exact DateCreated filter: minDateLastSaved pulls items that were merely modified recently (e.g. metadata updates)
-        `Successfully fetched ${items.length} random items from server`
+      // explicitly discard them if their actual DateCreated is older than X days
-      );
+      if (CONFIG.maxDaysRecent && dateFilter !== '') {
+        const pastDate = new Date();
+        pastDate.setDate(pastDate.getDate() - CONFIG.maxDaysRecent);
+        items = items.filter(item => {
+            if (!item.DateCreated) return true;
+            return new Date(item.DateCreated) >= pastDate;
+        });
+      }
+
+      // Fallback: If we have a date filter but no items are returned, try again without it
+      if (items.length === 0 && dateFilter !== '') {
+        console.warn("🎬 Media Bar:", `No items found within the last ${CONFIG.maxDaysRecent} days. Falling back to random fetching.`);
+        response = await fetchItems('');
+        
+        if (response.ok) {
+            data = await response.json();
+            items = data.Items || [];
+        }
+      }
+
+      console.log("🎬 Media Bar:", `Successfully fetched ${items.length} random items from server`);
 
       return items.map((item) => item.Id);
     } catch (error) {
-      console.error("Error fetching item IDs:", error);
+      console.error("🎬 Media Bar:", "Error fetching item IDs:", error);
       return [];
     }
   },
@@ -1185,7 +1230,7 @@ const ApiUtils = {
     try {
       const sessionId = await this.getSessionId();
       if (!sessionId) {
-        console.error("Session ID not found.");
+        console.error("🎬 Media Bar:", "Session ID not found.");
         return false;
       }
 
@@ -1201,10 +1246,10 @@ const ApiUtils = {
         );
       }
 
-      console.log("Play command sent successfully to session:", sessionId);
+      console.log("🎬 Media Bar:", "Play command sent successfully to session:", sessionId);
       return true;
     } catch (error) {
-      console.error("Error sending play command:", error);
+      console.error("🎬 Media Bar:", "Error sending play command:", error);
       return false;
     }
   },
@@ -1230,7 +1275,7 @@ const ApiUtils = {
       const sessions = await response.json();
 
       if (!sessions || sessions.length === 0) {
-        console.warn(
+        console.warn("🎬 Media Bar:", 
           "No sessions found for deviceId:",
           STATE.jellyfinData.deviceId
         );
@@ -1239,7 +1284,7 @@ const ApiUtils = {
 
       return sessions[0].Id;
     } catch (error) {
-      console.error("Error fetching session data:", error);
+      console.error("🎬 Media Bar:", "Error fetching session data:", error);
       return null;
     }
   },
@@ -1267,7 +1312,7 @@ const ApiUtils = {
       }
       button.classList.toggle("favorited", !isFavorite);
     } catch (error) {
-      console.error("Error toggling favorite:", error);
+      console.error("🎬 Media Bar:", "Error toggling favorite:", error);
     }
   },
 
@@ -1309,7 +1354,7 @@ const ApiUtils = {
       this._sponsorBlockCache[videoId] = result;
       return result;
     } catch (error) {
-      console.warn('Error fetching SponsorBlock data:', error);
+      console.warn("🎬 Media Bar:", 'Error fetching SponsorBlock data:', error);
       return { intro: null, outro: null };
     }
   },
@@ -1329,7 +1374,7 @@ const ApiUtils = {
       );
 
       if (!response.ok) {
-        console.warn(`Failed to search for '${name}'`);
+        console.warn("🎬 Media Bar:", `Failed to search for '${name}'`);
         return null;
       }
 
@@ -1339,7 +1384,7 @@ const ApiUtils = {
       }
       return null;
     } catch (error) {
-      console.error(`Error searching for '${name}':`, error);
+      console.error("🎬 Media Bar:", `Error searching for '${name}':`, error);
       return null;
     }
   },
@@ -1359,16 +1404,16 @@ const ApiUtils = {
       );
 
       if (!response.ok) {
-        console.warn(`Failed to fetch collection items for ${collectionId}`);
+        console.warn("🎬 Media Bar:", `Failed to fetch collection items for ${collectionId}`);
         return [];
       }
 
       const data = await response.json();
       const items = data.Items || [];
-      console.log(`Resolved collection ${collectionId} to ${items.length} items`);
+      console.log("🎬 Media Bar:", `Resolved collection ${collectionId} to ${items.length} items`);
       return items.map(i => ({ Id: i.Id, Type: i.Type }));
     } catch (error) {
-      console.error(`Error fetching collection items for ${collectionId}:`, error);
+      console.error("🎬 Media Bar:", `Error fetching collection items for ${collectionId}:`, error);
       return [];
     }
   },
@@ -1398,7 +1443,7 @@ const ApiUtils = {
             if (CONFIG.randomizeLocalTrailers && trailers.length > 1) {
                 const randomIndex = Math.floor(Math.random() * trailers.length);
                 trailer = trailers[randomIndex];
-                 console.log(`Using random local trailer (${randomIndex + 1}/${trailers.length}) for ${itemId}: ${trailer.Name}`);
+                 console.log("🎬 Media Bar:", `Using random local trailer (${randomIndex + 1}/${trailers.length}) for ${itemId}: ${trailer.Name}`);
             } else {
                 trailer = trailers[0];
             }
@@ -1412,7 +1457,7 @@ const ApiUtils = {
         }
         return null;
     } catch (error) {
-      console.error(`Error fetching local trailer for ${itemId}:`, error);
+      console.error("🎬 Media Bar:", `Error fetching local trailer for ${itemId}:`, error);
       return null;
     }
   },
@@ -1438,10 +1483,10 @@ const ApiUtils = {
                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})`);
+                   console.log("🎬 Media Bar:", `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})`);
+                   console.log("🎬 Media Bar:", `Found Theme Video (First) via ThemeVideos endpoint: ${video.Name} (${video.Id})`);
                }
 
                return {
@@ -1452,7 +1497,7 @@ const ApiUtils = {
       }
       return null;
     } catch (error) {
-      console.error(`Error fetching theme videos for ${itemId}:`, error);
+      console.error("🎬 Media Bar:", `Error fetching theme videos for ${itemId}:`, error);
       return null;
     }
   }
@@ -1636,7 +1681,7 @@ const SlideCreator = {
    */
   createSlideElement(item, title) {
     if (!item || !item.Id) {
-      console.error("Invalid item data:", item);
+      console.error("🎬 Media Bar:", "Invalid item data:", item);
       return null;
     }
 
@@ -1668,7 +1713,7 @@ const SlideCreator = {
       
       if (guidMatch) {
           const videoId = guidMatch[1];
-          console.log(`Using custom local video ID for ${itemId}: ${videoId}`);
+          console.log("🎬 Media Bar:", `Using custom local video ID for ${itemId}: ${videoId}`);
           
           trailerUrl = {
               id: videoId,
@@ -1677,18 +1722,18 @@ const SlideCreator = {
       } else {
           // Assume it's a standard URL (YouTube, etc.)
           trailerUrl = customValue;
-          console.log(`Using custom trailer URL for ${itemId}: ${trailerUrl}`);
+          console.log("🎬 Media Bar:", `Using custom trailer URL for ${itemId}: ${trailerUrl}`);
       }
     }
     // 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}`);
+        console.log("🎬 Media Bar:", `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}`);
+         console.log("🎬 Media Bar:", `Using local trailer for ${itemId}: ${trailerUrl}`);
     }
     // 1d. Fallback to Remote Trailer
     else if (item.RemoteTrailers && item.RemoteTrailers.length > 0) {
@@ -1697,7 +1742,7 @@ const SlideCreator = {
     // 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}`);
+         console.log("🎬 Media Bar:", `Using local trailer fallback for ${itemId}: ${trailerUrl}`);
     }
 
     const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
@@ -1727,13 +1772,16 @@ const SlideCreator = {
           }
         }
       } catch (e) {
-        console.warn("Invalid trailer URL:", trailerUrl);
+        console.warn("🎬 Media Bar:", "Invalid trailer URL:", trailerUrl);
       }
 
       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;
@@ -1794,11 +1842,11 @@ const SlideCreator = {
             // Apply SponsorBlock start/end times
             if (segments.intro) {
               playerVars.start = Math.ceil(segments.intro[1]);
-              console.info(`SponsorBlock intro detected for video ${videoId}: skipping to ${playerVars.start}s`);
+              console.info("🎬 Media Bar:", `SponsorBlock intro detected for video ${videoId}: skipping to ${playerVars.start}s`);
             }
             if (segments.outro) {
               playerVars.end = Math.floor(segments.outro[0]);
-              console.info(`SponsorBlock outro detected for video ${videoId}: ending at ${playerVars.end}s`);
+              console.info("🎬 Media Bar:", `SponsorBlock outro detected for video ${videoId}: ending at ${playerVars.end}s`);
             }
 
             STATE.slideshow.videoPlayers[itemId] = new YT.Player(ytPlayerIframe, {
@@ -1836,16 +1884,16 @@ const SlideCreator = {
                       // 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.`);
+                          console.log("🎬 Media Bar:", `Navigation detected during autoplay check for ${itemId}, stopping video.`);
                           try {
                             event.target.stopVideo();
-                          } catch (e) { console.warn("Error stopping video in timeout:", e); }
+                          } catch (e) { console.warn("🎬 Media Bar:", "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`);
+                        console.warn("🎬 Media Bar:", `Autoplay blocked for ${itemId}, attempting muted fallback`);
                         event.target.mute();
                         event.target.playVideo();
                       }
@@ -1876,7 +1924,7 @@ const SlideCreator = {
                   }
                 },
                 'onError': (event) => {
-                  console.warn(`YouTube player error ${event.data} for video ${videoId}`);
+                  console.warn("🎬 Media Bar:", `YouTube player error ${event.data} for video ${videoId}`);
                   // Fallback to next slide on error
                   if (CONFIG.waitForTrailerToEnd) {
                     SlideshowManager.nextSlide();
@@ -1910,7 +1958,7 @@ const SlideCreator = {
         videoBackdrop.addEventListener('play', (event) => {
           const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
           if (!slide || !slide.classList.contains('active')) {
-            console.log(`Local video ${itemId} started playing but slide is not active, pausing.`);
+            console.log("🎬 Media Bar:", `Local video ${itemId} started playing but slide is not active, pausing.`);
             event.target.pause();
             event.target.currentTime = 0;
             return;
@@ -1932,7 +1980,7 @@ const SlideCreator = {
         });
 
         videoBackdrop.addEventListener('error', (event) => {
-          console.warn(`Local video error for item ${itemId}`);
+          console.warn("🎬 Media Bar:", `Local video error for item ${itemId}`);
           const slide = event.target.closest('.slide');
           if (slide && slide.classList.contains('active')) {
             SlideshowManager.nextSlide();
@@ -2295,7 +2343,7 @@ const SlideCreator = {
 
       return slideElement;
     } catch (error) {
-      console.error("Error creating slide for item:", error, itemId);
+      console.error("🎬 Media Bar:", "Error creating slide for item:", error, itemId);
       return null;
     }
   },
@@ -2307,6 +2355,8 @@ const SlideCreator = {
 const SlideshowManager = {
 
   createPaginationDots() {
+    if (!CONFIG.showPaginationDots) return;
+
     let dotsContainer = document.querySelector(".dots-container");
     if (!dotsContainer) {
       dotsContainer = document.createElement("div");
@@ -2394,7 +2444,7 @@ const SlideshowManager = {
         this.upgradeSlideImageQuality(currentSlide);
 
         if (!currentSlide) {
-          console.error(`Failed to create slide for item ${currentItemId}`);
+          console.error("🎬 Media Bar:", `Failed to create slide for item ${currentItemId}`);
           STATE.slideshow.isTransitioning = false;
           setTimeout(() => this.nextSlide(), 500);
           return;
@@ -2407,6 +2457,7 @@ const SlideshowManager = {
         previousVisibleSlide.classList.remove("active");
       }
 
+      void currentSlide.offsetWidth;
       currentSlide.classList.add("active");
 
       // Manage Video Playback: Stop others, Play current
@@ -2486,9 +2537,9 @@ const SlideshowManager = {
             // 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`);
+                console.warn("🎬 Media Bar:", `Autoplay blocked for ${currentItemId}, attempting muted fallback`);
                 videoBackdrop.muted = true;
-                videoBackdrop.play().catch(err => console.error("Muted fallback failed", err));
+                videoBackdrop.play().catch(err => console.error("🎬 Media Bar:", "Muted fallback failed", err));
               }
             }, 1000);
           });
@@ -2515,7 +2566,7 @@ const SlideshowManager = {
               if (player.getPlayerState &&
                 player.getPlayerState() !== YT.PlayerState.PLAYING &&
                 player.getPlayerState() !== YT.PlayerState.BUFFERING) {
-                console.log("YouTube loadVideoById didn't start playback, retrying muted...");
+                console.log("🎬 Media Bar:", "YouTube loadVideoById didn't start playback, retrying muted...");
                 player.mute();
                 player.playVideo();
               }
@@ -2574,7 +2625,7 @@ const SlideshowManager = {
 
       this.pruneSlideCache();
     } catch (error) {
-      console.error("Error updating current slide:", error);
+      console.error("🎬 Media Bar:", "Error updating current slide:", error);
     } finally {
       setTimeout(() => {
         STATE.slideshow.isTransitioning = false;
@@ -2684,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
@@ -2718,7 +2769,7 @@ const SlideshowManager = {
         delete STATE.slideshow.createdSlides[itemId];
         prunedAny = true;
 
-        console.log(`Pruned slide ${itemId} at distance ${distance} from view`);
+        console.log("🎬 Media Bar:", `Pruned slide ${itemId} at distance ${distance} from view`);
       }
     });
 
@@ -2756,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;
@@ -2765,7 +2816,7 @@ const SlideshowManager = {
         }
 
         video.play().catch(error => {
-          console.warn("Unmuted play blocked, reverting to muted...");
+          console.warn("🎬 Media Bar:", "Unmuted play blocked, reverting to muted...");
           STATE.slideshow.isMuted = true;
           video.muted = true;
           video.play();
@@ -2786,7 +2837,7 @@ const SlideshowManager = {
           setTimeout(() => {
             const state = player.getPlayerState();
             if (state === 2) {
-              console.log("Video was paused after unmute...");
+              console.log("🎬 Media Bar:", "Video was paused after unmute...");
               STATE.slideshow.isMuted = true;
               player.mute();
               player.playVideo();
@@ -2877,7 +2928,7 @@ const SlideshowManager = {
             player.pauseVideo();
           }
         } catch (e) {
-          console.warn("Error pausing/stopping YouTube player:", e);
+          console.warn("🎬 Media Bar:", "Error pausing/stopping YouTube player:", e);
         }
       });
     }
@@ -2897,7 +2948,7 @@ const SlideshowManager = {
           video.removeAttribute('src');
           video.load();
         } catch (e) {
-          console.warn("Error stopping HTML5 video:", e);
+          console.warn("🎬 Media Bar:", "Error stopping HTML5 video:", e);
         }
       });
     }
@@ -2916,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();
@@ -2938,7 +2989,7 @@ const SlideshowManager = {
       }
       html5Video.muted = STATE.slideshow.isMuted;
       if (!STATE.slideshow.isMuted) html5Video.volume = 0.4;
-      html5Video.play().catch(e => console.warn("Error resuming HTML5 video:", e));
+      html5Video.play().catch(e => console.warn("🎬 Media Bar:", "Error resuming HTML5 video:", e));
     }
   },
 
@@ -3140,14 +3191,14 @@ const SlideshowManager = {
            }
 
            if (isInRange) {
-             console.log(`Seasonal match found: ${section.Name}`);
+             console.log("🎬 Media Bar:", `Seasonal match found: ${section.Name}`);
              idsString = section.MediaIds;
              usingSeasonal = true;
              break; // Use first matching season
            }
         }
       } catch (e) {
-        console.error("Error parsing seasonal sections in JS:", e);
+        console.error("🎬 Media Bar:", "Error parsing seasonal sections in JS:", e);
       }
     }
 
@@ -3205,14 +3256,14 @@ const SlideshowManager = {
           if (guidMatch) {
             id = guidMatch[1];
           } else {
-            console.log(`Input '${rawId}' is not a GUID, searching for Collection/Playlist by name...`);
+            console.log("🎬 Media Bar:", `Input '${rawId}' is not a GUID, searching for Collection/Playlist by name...`);
             const resolvedId = await ApiUtils.findCollectionOrPlaylistByName(rawId);
 
             if (resolvedId) {
-              console.log(`Resolved name '${rawId}' to ID: ${resolvedId}`);
+              console.log("🎬 Media Bar:", `Resolved name '${rawId}' to ID: ${resolvedId}`);
               id = resolvedId;
             } else {
-              console.warn(`Could not find Collection or Playlist with name: '${rawId}'`);
+              console.warn("🎬 Media Bar:", `Could not find Collection or Playlist with name: '${rawId}'`);
               continue; // Skip if resolution failed
             }
           }
@@ -3220,14 +3271,14 @@ const SlideshowManager = {
 
         const item = await ApiUtils.fetchItemDetails(id);
         if (item && (item.Type === 'BoxSet' || item.Type === 'Playlist')) {
-          console.log(`Found Collection/Playlist: ${id} (${item.Type}), fetching children...`);
+          console.log("🎬 Media Bar:", `Found Collection/Playlist: ${id} (${item.Type}), fetching children...`);
           const children = await ApiUtils.fetchCollectionItems(id);
           finalIds.push(...children);
         } else if (item) {
           finalIds.push({ Id: item.Id, Type: item.Type });
         }
       } catch (e) {
-        console.warn(`Error resolving item ${rawId}:`, e);
+        console.warn("🎬 Media Bar:", `Error resolving item ${rawId}:`, e);
       }
     }
     return finalIds;
@@ -3243,7 +3294,7 @@ const SlideshowManager = {
 
       // 1. Try Custom Media/Collection IDs from Config & seasonal content
       if (CONFIG.enableCustomMediaIds || CONFIG.enableSeasonalContent) {
-        console.log("Using Custom Media IDs from configuration");
+        console.log("🎬 Media Bar:", "Using Custom Media IDs from configuration");
         const rawIds = this.parseCustomIds();
         const resolvedItems = await this.resolveCollectionsAndItems(rawIds);
 
@@ -3273,20 +3324,15 @@ const SlideshowManager = {
                  }
             }
             itemIds = keptItems.map(i => i.Id);
-            console.log(`Applied limits to custom IDs: ${itemIds.length} items (Movies: ${movieCount}, Shows: ${showCount})`);
+            console.log("🎬 Media Bar:", `Applied limits to custom IDs: ${itemIds.length} items (Movies: ${movieCount}, Shows: ${showCount})`);
         } else {
             itemIds = resolvedItems.map(i => i.Id);
         }
       }
 
-      // 2. Try Avatar List (list.txt)
+      // 2. Fallback to server query (Random)
       if (itemIds.length === 0) {
-        itemIds = await ApiUtils.fetchItemIdsFromList();
+        console.log("🎬 Media Bar:", "No custom list found, fetching random items from server...");
-      }
-
-      // 3. Fallback to server query (Random)
-      if (itemIds.length === 0) {
-        console.log("No custom list found, fetching random items from server...");
         itemIds = await ApiUtils.fetchItemIdsFromServer();
         
         if (CONFIG.sortBy === 'Random') {
@@ -3298,7 +3344,7 @@ const SlideshowManager = {
              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}`);
+             console.log("🎬 Media Bar:", `Sorting ${itemIds.length} custom items by ${CONFIG.sortBy} ${CONFIG.sortOrder}`);
              const itemsWithDetails = [];
              for (const id of itemIds) {
                  const item = await ApiUtils.fetchItemDetails(id);
@@ -3340,7 +3386,7 @@ const SlideshowManager = {
         }
       }
     } catch (error) {
-      console.error("Error loading slideshow data:", error);
+      console.error("🎬 Media Bar:", "Error loading slideshow data:", error);
     } finally {
       STATE.slideshow.isLoading = false;
     }
@@ -3428,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";
 
@@ -3486,7 +3536,7 @@ const MediaBarEnhancedSettingsManager = {
 
     this.initialized = true;
     this.injectSettingsIcon();
-    console.log("MediaBarEnhanced: Client-Side Settings Manager initialized.");
+    console.log("🎬 Media Bar:", "Client-Side Settings Manager initialized.");
   },
 
   getSetting(key, defaultValue) {
@@ -3660,7 +3710,7 @@ const initPageVisibilityHandler = () => {
 
   document.addEventListener("visibilitychange", () => {
     if (document.hidden) {
-      console.log("Tab inactive - pausing slideshow and videos");
+      console.log("🎬 Media Bar:", "Tab inactive - pausing slideshow and videos");
       wasVideoPlayingBeforeHide = STATE.slideshow.isVideoPlaying;
       
       if (STATE.slideshow.slideInterval) {
@@ -3678,7 +3728,7 @@ const initPageVisibilityHandler = () => {
               player.pauseVideo();
               STATE.slideshow.isVideoPlaying = false;
             } catch (e) {
-              console.warn("Error pausing video on tab hide:", e);
+              console.warn("🎬 Media Bar:", "Error pausing video on tab hide:", e);
             }
           } else if (player.tagName === 'VIDEO') { // HTML5 Video
              player.pause();
@@ -3687,7 +3737,7 @@ const initPageVisibilityHandler = () => {
         }
       }
     } else {
-      console.log("Tab active - resuming slideshow");
+      console.log("🎬 Media Bar:", "Tab active - resuming slideshow");
       if (!STATE.slideshow.isPaused) {
         const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
         
@@ -3700,16 +3750,16 @@ const initPageVisibilityHandler = () => {
               player.playVideo();
               STATE.slideshow.isVideoPlaying = true;
             } catch (e) {
-              console.warn("Error resuming video on tab show:", e);
+              console.warn("🎬 Media Bar:", "Error resuming video on tab show:", e);
               if (STATE.slideshow.slideInterval) {
                 STATE.slideshow.slideInterval.start();
               }
             }
           } else if (player.tagName === 'VIDEO') { // HTML5 Video
              try {
-                player.play().catch(e => console.warn("Error resuming HTML5 video:", e));
+                player.play().catch(e => console.warn("🎬 Media Bar:", "Error resuming HTML5 video:", e));
                 STATE.slideshow.isVideoPlaying = true;
-             } catch(e) { console.warn(e); }
+             } catch(e) { console.warn("🎬 Media Bar:", e); }
           }
         } else {
           // No video was playing, just restart interval
@@ -3735,7 +3785,7 @@ const initPageVisibilityHandler = () => {
  */
 const slidesInit = async () => {
   if (STATE.slideshow.hasInitialized) {
-    console.log("⚠️ Slideshow already initialized, skipping");
+    console.log("🎬 Media Bar:", "⚠️ Slideshow already initialized, skipping");
     return;
   }
   
@@ -3743,7 +3793,7 @@ const slidesInit = async () => {
       MediaBarEnhancedSettingsManager.init();
       const isClientSideEnabled = MediaBarEnhancedSettingsManager.getSetting('enabled', true);
       if (!isClientSideEnabled) {
-          console.log("MediaBarEnhanced: Disabled by client-side setting.");
+          console.log("🎬 Media Bar:", "Disabled by client-side setting.");
           const homeSections = document.querySelector('.homeSectionsContainer');
           if (homeSections) {
             homeSections.style.top = '0';
@@ -3833,7 +3883,7 @@ const slidesInit = async () => {
   const lazyLoadObserver = initLazyLoading();
 
   try {
-    console.log("🌟 Initializing Enhanced Jellyfin Slideshow");
+    console.log("🎬 Media Bar:", "🌟 Initializing Enhanced Jellyfin Slideshow");
 
     initArrowNavigation();
 
@@ -3847,9 +3897,9 @@ const slidesInit = async () => {
 
     VisibilityObserver.init();
 
-    console.log("✅ Enhanced Jellyfin Slideshow initialized successfully");
+    console.log("🎬 Media Bar:", "✅ Enhanced Jellyfin Slideshow initialized successfully");
   } catch (error) {
-    console.error("Error initializing slideshow:", error);
+    console.error("🎬 Media Bar:", "Error initializing slideshow:", error);
     STATE.slideshow.hasInitialized = false;
   }
 };

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.7.0.12",
+        "version": "1.7.1.12",
-        "changelog": "- Add YouTube no-cookie host and referrer policy for iframe security to fix playback issues on iOS/MacOS",
+        "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.0.12/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.7.1.12/Jellyfin.Plugin.MediaBarEnhanced.zip",
-        "checksum": "70589d1f3bd64896594d5312b49d974c",
+        "checksum": "f00a5abf5a2bfd7d6ca3adf20d75b110",
-        "timestamp": "2026-03-06T02:26:16Z"
+        "timestamp": "2026-03-08T22:15:28Z"
+      },
+      {
+        "version": "1.7.0.14",
+        "changelog": "- Switched to YouTube no-cookie host and referrer policy for iframe security\n- fix playback issues on iOS/MacOS \n- Disable animations and backdrop filters for TV layout\n- removed list.txt functionality to clean up, use the web ui instead\n- Enhance logging with contextual messages, in order to be able to clearly assign logs to this plugin",
+        "targetAbi": "10.11.0.0",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.7.0.14/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "07875c74aab766657be3b8033be6d53f",
+        "timestamp": "2026-03-06T03:13:48Z"
       },
       {
         "version": "1.6.6.4",

test_scripts/test_direct_date_created.js

@@ -0,0 +1,73 @@
+(async () => {
+    const apiClient = window.ApiClient;
+    if (!apiClient) {
+        console.error("ApiClient not found. Are you logged in?");
+        return;
+    }
+
+    const userId = apiClient.getCurrentUserId();
+    const serverAddress = apiClient.serverAddress();
+
+    const maxDaysRecent = 30; // 30 Tage Limit
+    const pastDate = new Date();
+    pastDate.setDate(pastDate.getDate() - maxDaysRecent);
+    const dateStr = pastDate.toISOString();
+
+    console.log(`\n%c=== TEST: DateCreated Direkt-Abfrage ===`, "color: #00a4dc; font-weight: bold; font-size: 14px;");
+    console.log(`Wir suchen Filme, die nach dem ${dateStr} hinzugefügt wurden.\n`);
+
+    // Wir probieren alle denkbaren Parameter-Schreibweisen aus,
+    // die Jellyfin historisch oder in Forks für "DateCreated" akzeptieren könnte.
+    const testCases = [
+        { name: "MinDateCreated (PascalCase)", param: `MinDateCreated=${dateStr}` },
+        { name: "minDateCreated (camelCase)", param: `minDateCreated=${dateStr}` },
+        { name: "DateCreatedMin", param: `DateCreatedMin=${dateStr}` },
+        { name: "dateCreatedMin", param: `dateCreatedMin=${dateStr}` },
+        { name: "StartDate", param: `StartDate=${dateStr}` },
+        { name: "startDate", param: `startDate=${dateStr}` }
+    ];
+
+    try {
+        for (let i = 0; i < testCases.length; i++) {
+            const test = testCases[i];
+            const apiUrl = `${serverAddress}/Items?IncludeItemTypes=Movie,Series&Recursive=true&enableUserData=true&Limit=5&fields=Id,DateCreated&userId=${userId}&${test.param}`;
+            
+            console.log(`%cTest ${i+1}: ${test.name}`, "color: yellow;");
+            console.log(`URL: ${apiUrl}`);
+
+            const response = await fetch(apiUrl, {
+                headers: {
+                    Authorization: `MediaBrowser Client="${apiClient.appName()}", Device="${apiClient.deviceName()}", DeviceId="${apiClient.deviceId()}", Version="${apiClient.appVersion()}", Token="${apiClient.accessToken()}"`
+                }
+            });
+
+            if (!response.ok) {
+                 console.error(`-> ❌ HTTP Fehler: ${response.status}`);
+                 continue;
+            }
+
+            const data = await response.json();
+            const items = data.Items || [];
+            
+            // Zur Auswertung: Wenn die Abfrage ignoriert wird, liefert er oft ALLE (hier max 5) zurück.
+            // Filtert er wirklich, sollten es WENIGER als 5, und zwar im besten Fall genau die RICHTIGEN sein.
+            console.log(`-> Ergebnis: ${items.length} Items zurückgeliefert.`);
+            
+            if (items.length > 0) {
+                // Wir checken, ob die zurückgelieferten Items WIRKLICH neu sind
+                const oldItems = items.filter(item => new Date(item.DateCreated) < pastDate);
+                if (oldItems.length > 0) {
+                     console.log(`   ❌ Filter FEHLGESCHLAGEN: Es wurden ${oldItems.length} "alte" Filme zurückgegeben (z.B. ${oldItems[0].Name}). Er ignoriert also den Parameter.`);
+                } else {
+                     console.log(`   ✅ Filter KÖNNTE funktionieren: Alle zurückgegebenen Filme sind neuer als unser Datum! (Erster: ${items[0].Name})`);
+                }
+            } else {
+                 console.log(`   ❓ Keine Items gefunden (entweder strenger Filter oder gar keine neuen Filme vorhanden).`);
+            }
+            console.log("\n");
+        }
+
+    } catch (error) {
+        console.error("Fehler beim Abruf:", error);
+    }
+})();

test_scripts/test_filters_dates.js

@@ -0,0 +1,56 @@
+(async () => {
+    const apiClient = window.ApiClient;
+    if (!apiClient) {
+        console.error("ApiClient not found. Are you logged in?");
+        return;
+    }
+
+    const userId = apiClient.getCurrentUserId();
+    const serverAddress = apiClient.serverAddress();
+
+    const maxDaysRecent = 30; // Test: Added in last 30 days
+    const pastDate = new Date();
+    pastDate.setDate(pastDate.getDate() - maxDaysRecent);
+    const dateStr = pastDate.toISOString();
+
+    console.log(`Searching for items added after: ${dateStr}`);
+
+    const testUrls = [
+        // Test 1: minDateCreated (CamelCase)
+        `${serverAddress}/Items?IncludeItemTypes=Movie,Series&Recursive=true&enableUserData=true&Limit=5&fields=Id,DateCreated&userId=${userId}&minDateCreated=${dateStr}`,
+        // Test 2: minDateLastSaved
+        `${serverAddress}/Items?IncludeItemTypes=Movie,Series&Recursive=true&enableUserData=true&Limit=5&fields=Id,DateCreated&userId=${userId}&minDateLastSaved=${dateStr}`,
+    ];
+
+    try {
+        for (let i = 0; i < testUrls.length; i++) {
+            const apiUrl = testUrls[i];
+            console.log(`\n%cTest ${i+1}: Testing URL:\n${apiUrl}`, "color: yellow;");
+
+            const response = await fetch(apiUrl, {
+                headers: {
+                    Authorization: `MediaBrowser Client="${apiClient.appName()}", Device="${apiClient.deviceName()}", DeviceId="${apiClient.deviceId()}", Version="${apiClient.appVersion()}", Token="${apiClient.accessToken()}"`
+                }
+            });
+
+            if (!response.ok) {
+                 console.error(`Failed to fetch items: ${response.status} ${response.statusText}`);
+                 continue;
+            }
+
+            const data = await response.json();
+            const items = data.Items || [];
+
+            console.log(`%cErgebnis: ${items.length} Items gefunden!`, "color: #00a4dc; font-weight: bold;");
+            
+            if(items.length > 0) {
+                console.log("Gefundene Items:");
+                items.forEach(item => {
+                    console.log(`- Name: ${item.Name}, DateCreated: ${item.DateCreated}, Art: ${item.Type}`);
+                });
+            }
+        }
+    } catch (error) {
+        console.error("Fehler beim Abrufen der URL:", error);
+    }
+})();

test_scripts/test_filters_dates_final.js

@@ -0,0 +1,72 @@
+(async () => {
+    const apiClient = window.ApiClient;
+    if (!apiClient) {
+        console.error("ApiClient not found. Are you logged in?");
+        return;
+    }
+
+    const userId = apiClient.getCurrentUserId();
+    const serverAddress = apiClient.serverAddress();
+
+    const maxDaysRecent = 30; // Test: Added in last 30 days
+    
+    // 1. Calculate the cutoff date
+    const pastDate = new Date();
+    pastDate.setDate(pastDate.getDate() - maxDaysRecent);
+    const dateStr = pastDate.toISOString();
+
+    console.log(`\n%c=== TEST: 2-Stufen "Zuletzt Hinzugefügt" Filter ===`, "color: #00a4dc; font-weight: bold; font-size: 14px;");
+    console.log(`Suche Items neuer als: ${dateStr} (${maxDaysRecent} Tage alt)\n`);
+
+    const apiUrl = `${serverAddress}/Items?IncludeItemTypes=Movie,Series&Recursive=true&enableUserData=true&Limit=50&fields=Id,DateCreated&userId=${userId}&minDateLastSaved=${dateStr}`;
+
+    try {
+        console.log(`%cSchritt 1: API Call mit minDateLastSaved...`, "color: yellow;");
+        console.log(`URL: ${apiUrl}`);
+
+        const response = await fetch(apiUrl, {
+            headers: {
+                Authorization: `MediaBrowser Client="${apiClient.appName()}", Device="${apiClient.deviceName()}", DeviceId="${apiClient.deviceId()}", Version="${apiClient.appVersion()}", Token="${apiClient.accessToken()}"`
+            }
+        });
+
+        if (!response.ok) {
+             throw new Error(`Failed to fetch items: ${response.status} ${response.statusText}`);
+        }
+
+        const data = await response.json();
+        let items = data.Items || [];
+        
+        console.log(`-> API lieferte ${items.length} potenziell neue/geänderte Items zurück.\n`);
+        if (items.length > 0) {
+            console.log("Die API hielt diese Items für neu/aktuell:");
+            items.forEach(item => console.log(`  - ${item.Name} (DateCreated: ${item.DateCreated})`));
+        }
+
+        console.log(`\n%cSchritt 2: Lokaler DateCreated Filter (Wie das Plugin ihn jetzt nutzt)...`, "color: yellow;");
+        
+        // Exakt dieser Filter-Block ist jetzt auch so in mediaBarEnhanced.js
+        const finalItems = items.filter(item => {
+            if (!item.DateCreated) return true; // Fallback falls Jellyfin kein Datum schickt
+            const dCreated = new Date(item.DateCreated);
+            return dCreated >= pastDate;
+        });
+
+        console.log(`%c-> FINALES ERGEBNIS: ${finalItems.length} echte Neuzugänge bleiben übrig!`, "color: #00ff00; font-weight: bold; font-size: 14px;");
+        
+        if(finalItems.length > 0) {
+            console.log("Diese Items schaffen es in die Slideshow:");
+            finalItems.forEach(item => {
+                console.log(`  🎬 Name: ${item.Name}, DateCreated: ${item.DateCreated}`);
+            });
+        }
+        
+        // Teste den Fallback
+        if(finalItems.length === 0 && items.length > 0) {
+            console.log("\n%c💡 HINWEIS: Da nach Filterung 0 Items übrig bleiben, greift in der Slideshow jetzt automatisch unser Fallback und zeigt zufällige Filme aller Jahre!", "color: orange;");
+        }
+
+    } catch (error) {
+        console.error("Fehler beim Abruf:", error);
+    }
+})();

test_scripts/test_filters_url.js

@@ -0,0 +1,62 @@
+(async () => {
+    const apiClient = window.ApiClient;
+    if (!apiClient) {
+        console.error("ApiClient not found. Are you logged in?");
+        return;
+    }
+
+    const userId = apiClient.getCurrentUserId();
+    const serverAddress = apiClient.serverAddress();
+    
+    // Example test configuration flags
+    const maxItems = 50;
+    const includeWatchedContent = false; // set to false to ONLY show unplayed (newly watched)
+    const maxParentalRating = 12; // Test age limit
+    const maxDaysRecent = 30;     // Test recency limit
+
+    // Build the query parameters just like in mediaBarEnhanced.js
+    const sortParams = "sortBy=Random";
+    const playedFilter = includeWatchedContent ? '' : '&isPlayed=False';
+    
+    let parentalFilter = '';
+    if (maxParentalRating) {
+      parentalFilter = `&MaxOfficialRating=${maxParentalRating}`;
+    }
+
+    let dateFilter = '';
+    if (maxDaysRecent) {
+      const pastDate = new Date();
+      pastDate.setDate(pastDate.getDate() - maxDaysRecent);
+      dateFilter = `&MinDateCreated=${pastDate.toISOString()}`;
+    }
+
+    const apiUrl = `${serverAddress}/Items?IncludeItemTypes=Movie,Series&Recursive=true&hasOverview=true&imageTypes=Logo,Backdrop&${sortParams}${playedFilter}${parentalFilter}${dateFilter}&enableUserData=true&Limit=${maxItems}&fields=Id&userId=${userId}`;
+
+    try {
+        console.log(`Testing generated URL with filters:\n%c${apiUrl}`, "color: yellow;");
+
+        // Execute the fetch
+        const response = await fetch(apiUrl, {
+            headers: {
+                Authorization: `MediaBrowser Client="${apiClient.appName()}", Device="${apiClient.deviceName()}", DeviceId="${apiClient.deviceId()}", Version="${apiClient.appVersion()}", Token="${apiClient.accessToken()}"`
+            }
+        });
+
+        if (!response.ok) {
+             throw new Error(`Failed to fetch items: ${response.status} ${response.statusText}`);
+        }
+
+        const data = await response.json();
+        const items = data.Items || [];
+
+        console.log(`%cErgebnis: ${items.length} Items gefunden!`, "color: #00a4dc; font-weight: bold;");
+        
+        if(items.length > 0) {
+            console.log("Erstes Item als Beispiel:");
+            console.dir(items[0]);
+        }
+
+    } catch (error) {
+        console.error("Fehler beim Abrufen der URL:", error);
+    }
+})();

without_list_txt/configPage.html

@@ -1,462 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <title>Media Bar Enhanced Configuration</title>
-</head>
-
-<body>
-    <div id="MediaBarEnhancedConfigurationPage" data-role="page" class="page type-interior pluginConfigurationPage"
-        data-require="emby-input,emby-button,emby-select,emby-checkbox,emby-textarea">
-        <div data-role="content">
-            <div class="content-primary">
-                <div class="sectionTitleContainer">
-                    <h2 class="sectionTitle">Media Bar Enhanced</h2>
-                    <a is="emby-linkbutton" class="raised raised-mini emby-button" style="margin-left: 2em;"
-                        target="_blank" href="https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced">
-                        <i class="md-icon button-icon button-icon-left secondaryText"></i>
-                        <span>${Help}</span>
-                    </a>
-                </div>
-                <hr style="max-width: 800px; margin: 1em 0;">
-
-                <div style="margin-bottom: 1.5em;">
-                    <button class="jellyfin-tab-button active" onclick="showTab('basic', this)"
-                        style="background: none; border: none; color: #fff; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid #00a4dc;">
-                        <h3>General Settings</h3>
-                    </button>
-                    <button class="jellyfin-tab-button" onclick="showTab('custom', this)"
-                        style="background: none; border: none; color: #ccc; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid transparent;">
-                        <h3>Custom Content</h3>
-                    </button>
-                    <button class="jellyfin-tab-button" onclick="showTab('advanced', this)"
-                        style="background: none; border: none; color: #ccc; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid transparent;">
-                        <h3>Advanced Settings</h3>
-                    </button>
-                </div>
-
-                <form id="mediaBarEnhancedConfigForm">
-
-                    <!-- BASIC TAB -->
-                    <div id="basic" class="tab-content">
-                        <h2 class="sectionTitle">Main Plugin Settings</h2>
-                        <div class="checkboxContainer checkboxContainer-withDescription">
-                            <label>
-                                <input is="emby-checkbox" type="checkbox" id="IsEnabled" name="IsEnabled" />
-                                <span>Enable Media Bar Enhanced Plugin</span>
-                            </label>
-                            <div class="fieldDescription">Enable or disable the entire plugin functionality.</div>
-                        </div>
-                        <div class="checkboxContainer checkboxContainer-withDescription">
-                            <label>
-                                <input is="emby-checkbox" type="checkbox" id="EnableVideoBackdrop"
-                                    name="EnableVideoBackdrop" />
-                                <span>Enable Trailer Backdrops</span>
-                            </label>
-                            <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">
-                            <label>
-                                <input is="emby-checkbox" type="checkbox" id="WaitForTrailerToEnd"
-                                    name="WaitForTrailerToEnd" />
-                                <span>Wait For Trailer To End</span>
-                            </label>
-                            <div class="fieldDescription">Delay slide transition until trailer finishes.</div>
-                        </div>
-                        <div class="checkboxContainer checkboxContainer-withDescription">
-                            <label>
-                                <input is="emby-checkbox" type="checkbox" id="EnableMobileVideo"
-                                    name="EnableMobileVideo" />
-                                <span>Enable Trailer On Mobile</span>
-                            </label>
-                            <div class="fieldDescription">Allow video playback on mobile devices.</div>
-                        </div>
-                        <div class="checkboxContainer checkboxContainer-withDescription">
-                            <label>
-                                <input is="emby-checkbox" type="checkbox" id="ShowTrailerButton"
-                                    name="ShowTrailerButton" />
-                                <span>Show Trailer Button</span>
-                            </label>
-                            <div class="fieldDescription">Display a button to open trailer in modal. Only visible if
-                                trailer is not set as backdrop or if no trailer is available.</div>
-                        </div>
-                    </div>
-
-                    <!-- CUSTOM CONTENT TAB -->
-                    <div id="custom" class="tab-content" style="display:none;">
-                        <h2 class="sectionTitle">Custom Media IDs</h2>
-                        <div class="checkboxContainer checkboxContainer-withDescription">
-                            <label>
-                                <input is="emby-checkbox" type="checkbox" id="EnableCustomMediaIds"
-                                    name="EnableCustomMediaIds" />
-                                <span>Enable Custom Media IDs</span>
-                            </label>
-                            <div class="fieldDescription">If enabled, the slideshow will try to show the items listed
-                                below. If the list is empty, default behavior (random items) is used. Disable this
-                                to temporarily ignore your custom list without deleting it.</div>
-                        </div>
-                        <div class="checkboxContainer checkboxContainer-withDescription">
-                            <label>
-                                <input is="emby-checkbox" type="checkbox" id="EnableSeasonalContent"
-                                    name="EnableSeasonalContent" />
-                                <span>Enable Seasonal Content Mode</span>
-                            </label>
-                            <div class="fieldDescription">Enable this to define time-based lists in the field below.
-                            </div>
-                        </div>
-                        <div class="inputContainer">
-                            <label class="inputLabel inputLabelUnfocused" for="CustomMediaIds">Media/Collection/Playlist
-                                IDs
-                                (Newline or Comma separated)</label>
-                            <textarea is="emby-textarea" id="CustomMediaIds" name="CustomMediaIds"
-                                style="width: 100%; height: 150px; font-family: monospace;"></textarea>
-                            <div class="fieldDescription" id="customMediaIdsDesc">Enter the IDs of the items you want to show in the slideshow.
-                                You can separate them by new line or comma.
-                                <br><br>
-                                <b>Manual Trailer Override:</b> You can specify a YouTube URL for an item by adding it in
-                                brackets: <br> <code>e.g. ID DESCRIPTION [https://youtu.be/...]</code> or <code>ID [https://youtu.be/...] DESCRIPTION</code>
-                                <br><br>
-                                You can also add a description after the ID using any separator like space, pipe
-                                (|) or dash (-): <br>e.g. <code>ID DESCRIPTION</code> or <code>ID | DESCRIPTION</code>
-                                <br><br>
-                                <b>Note:</b> If using a <b>Collection Name</b> (instead of an ID) combined with a description, you <b>MUST</b> use 
-                                the pipe (|) separator.
-                                <br>
-                                <b>Note:</b> The separator <b>MUST NOT</b> be a hex character (0-9, a-f).</div>
-                            <div class="fieldDescription" id="seasonalMediaIdsDesc" style="display: none;">
-                                <b>Seasonal Mode Enabled:</b> Define lines with date ranges (Format: DD.MM-DD.MM |
-                                <i>name</i> | <i>IDs</i>).<br>
-                                Example:<br>
-                                <code>20.10-31.10 | Halloween | ID1, ID2 [https://youtu.be/...]</code><br>
-                                <code>01.12-26.12 | Christmas | ID3, ID4</code><br>
-                                <i>Only lines matching the current date will be used. If no line matches, it will try to
-                                    use random items.</i>
-                            </div>
-                            <p>You can find the IDs of your items in the URL of the item page in the web interface.<br>
-                                Example:
-                                <code>https://your-jellyfin-url/web/#/details?id=<b style="color:red;">your-item-id</b>&serverId=your-server-id</code><br><br>
-                                You can also insert a name of a collection or playlist to fetch the IDs of all items in
-                                it (will take the first hit.<br><b>Note:</b> there is currently no feedback if the name
-                                resolution succeeded, you will have to look if the bar displays the correct items.).
-                            </p>
-                        </div>
-                    </div>
-
-                    <!-- ADVANCED TAB -->
-                    <div id="advanced" class="tab-content" style="display:none;">
-                        <h2 class="sectionTitle">Features</h2>
-                        <div class="checkboxContainer checkboxContainer-withDescription">
-                            <label>
-                                <input is="emby-checkbox" type="checkbox" id="SlideAnimationEnabled"
-                                    name="SlideAnimationEnabled" />
-                                <span>Enable Slide Animations</span>
-                            </label>
-                            <div class="fieldDescription">Enable the zooming-in effect on background images when a new slide is
-                                shown (does not affect trailer backdrops). Attention: This may cause performance issues on weaker client hardware.</div>
-                        </div>
-                        <div class="checkboxContainer checkboxContainer-withDescription">
-                            <label>
-                                <input is="emby-checkbox" type="checkbox" id="EnableClientSideSettings"
-                                    name="EnableClientSideSettings" />
-                                <span>Enable Client-Side Settings</span>
-                            </label>
-                            <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="UseSponsorBlock" name="UseSponsorBlock" />
-                                <span>Use SponsorBlock</span>
-                            </label>
-                            <div class="fieldDescription">Skip intro/outro segments in YouTube trailers.</div>
-                        </div>
-                        <div class="selectContainer">
-                            <label class="selectLabel" for="PreferredVideoQuality">Preferred YouTube Quality</label>
-                            <select is="emby-select" id="PreferredVideoQuality" name="PreferredVideoQuality"
-                                class="emby-select-withcolor emby-select">
-                                <option value="Auto">Auto (Smart)</option>
-                                <option value="Maximum">Maximum (4K+)</option>
-                                <option value="1080p">1080p</option>
-                                <option value="720p">720p</option>
-                            </select>
-                            <div class="fieldDescription">"Auto" selects Maximum if screen width > 1920px, otherwise
-                                1080p.</div>
-                        </div>
-                        <div class="checkboxContainer checkboxContainer-withDescription">
-                            <label>
-                                <input is="emby-checkbox" type="checkbox" id="StartMuted" name="StartMuted" />
-                                <span>Start Muted</span>
-                            </label>
-                            <div class="fieldDescription">Start trailer video playback muted. (Known issue: In the
-                                Android/IOS app, backdrop trailers are always muted.)</div>
-                        </div>
-                        <div class="checkboxContainer checkboxContainer-withDescription">
-                            <label>
-                                <input is="emby-checkbox" type="checkbox" id="FullWidthVideo" name="FullWidthVideo" />
-                                <span>Full Width Video</span>
-                            </label>
-                            <div class="fieldDescription">Stretch video to full width. Very nice on desktops, on mobile
-                                devices only the middle of the video is visible.<br>Disable to get the full aspect ratio
-                                on
-                                mobile devices. (looks bad on desktops)</div>
-                        </div>
-                        <div class="checkboxContainer checkboxContainer-withDescription">
-                            <label>
-                                <input is="emby-checkbox" type="checkbox" id="EnableLoadingScreen"
-                                    name="EnableLoadingScreen" />
-                                <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>
-                        </div>
-                        <div class="checkboxContainer checkboxContainer-withDescription">
-                            <label>
-                                <input is="emby-checkbox" type="checkbox" id="AlwaysShowArrows"
-                                    name="AlwaysShowArrows" />
-                                <span>Always Show Arrows</span>
-                            </label>
-                            <div class="fieldDescription">If enabled, navigation arrows will always be visible instead
-                                of only on hover.</div>
-                        </div>
-                        <div class="checkboxContainer checkboxContainer-withDescription">
-                            <label>
-                                <input is="emby-checkbox" type="checkbox" id="EnableKeyboardControls"
-                                    name="EnableKeyboardControls" />
-                                <span>Enable Keyboard Controls</span>
-                            </label>
-                            <div class="fieldDescription">Enable keyboard shortcuts (Arrows left/right (change slide),
-                                Space (pause), M (mute/unmute)) for
-                                the slideshow.</div>
-                        </div>
-
-                        <h2 class="sectionTitle">Time Settings</h2>
-                        <p>Leave a setting blank to use the default value.</p>
-                        <div class="inputContainer">
-                            <label class="inputLabel inputLabelUnfocused" for="ShuffleInterval">Shuffle Interval
-                                (ms)</label>
-                            <input is="emby-input" type="number" id="ShuffleInterval" name="ShuffleInterval" />
-                            <div class="fieldDescription">Time in milliseconds between changing slides.</div>
-                        </div>
-
-                        <div class="inputContainer">
-                            <label class="inputLabel inputLabelUnfocused" for="RetryInterval">Retry Interval
-                                (ms)</label>
-                            <input is="emby-input" type="number" id="RetryInterval" name="RetryInterval" />
-                            <div class="fieldDescription">Time in milliseconds to wait before retrying failed
-                                operations.</div>
-                        </div>
-
-                        <div class="inputContainer">
-                            <label class="inputLabel inputLabelUnfocused" for="LoadingCheckInterval">Loading Check
-                                Interval (ms)</label>
-                            <input is="emby-input" type="number" id="LoadingCheckInterval"
-                                name="LoadingCheckInterval" />
-                            <div class="fieldDescription">Frequency of checking wether the login screen or home screen
-                                has loaded (in milliseconds).</div>
-                        </div>
-
-                        <div class="inputContainer">
-                            <label class="inputLabel inputLabelUnfocused" for="FadeTransitionDuration">Fade
-                                Transition Duration (ms)</label>
-                            <input is="emby-input" type="number" id="FadeTransitionDuration"
-                                name="FadeTransitionDuration" />
-                            <div class="fieldDescription">Duration in milliseconds of the transition between slides.
-                            </div>
-                        </div>
-
-                        <div class="inputContainer">
-                            <label class="inputLabel inputLabelUnfocused" for="MinSwipeDistance">Min Swipe Distance
-                                (px)</label>
-                            <input is="emby-input" type="number" id="MinSwipeDistance" name="MinSwipeDistance" />
-                            <div class="fieldDescription">Minimum distance in pixels for a swipe to be registered (for
-                                mobile).</div>
-                        </div>
-
-                        <h2 class="sectionTitle">Content Limits</h2>
-                        <p>Leave a setting blank to use the default value.</p>
-                        <div class="inputContainer">
-                            <label class="inputLabel inputLabelUnfocused" for="MaxItems">Total Max Items</label>
-                            <input is="emby-input" type="number" id="MaxItems" name="MaxItems" />
-                            <div class="fieldDescription">Maximum total items to fetch (for all content types combined).
-                            </div>
-                        </div>
-                        <div class="inputContainer">
-                            <label class="inputLabel inputLabelUnfocused" for="MaxMovies">Max Movies</label>
-                            <input is="emby-input" type="number" id="MaxMovies" name="MaxMovies" />
-                            <div class="fieldDescription">Maximum movies to include in slideshow (for random selection).
-                            </div>
-                        </div>
-                        <div class="inputContainer">
-                            <label class="inputLabel inputLabelUnfocused" for="MaxTvShows">Max TV Shows</label>
-                            <input is="emby-input" type="number" id="MaxTvShows" name="MaxTvShows" />
-                            <div class="fieldDescription">Maximum TV shows to include in slideshow (for random
-                                selection).</div>
-                        </div>
-                        <div class="inputContainer">
-                            <label class="inputLabel inputLabelUnfocused" for="PreloadCount">Preload Count</label>
-                            <input is="emby-input" type="number" id="PreloadCount" name="PreloadCount" />
-                            <div class="fieldDescription">Number of images to preload.</div>
-                        </div>
-                        <div class="inputContainer">
-                            <label class="inputLabel inputLabelUnfocused" for="MaxPaginationDots">Max Pagination
-                                Dots</label>
-                            <input is="emby-input" type="number" id="MaxPaginationDots" name="MaxPaginationDots" />
-                            <div class="fieldDescription">Maximum number of dots to show in navigation. If the number
-                                will be exceeded, the dots will "turn" into a counter style (e.g. 1/100). Set to 0 to
-                                enable counter style directly.</div>
-                        </div>
-                        <div class="inputContainer">
-                            <label class="inputLabel inputLabelUnfocused" for="MaxPlotLength">Max Plot
-                                Length</label>
-                            <input is="emby-input" type="number" id="MaxPlotLength" name="MaxPlotLength" />
-                            <div class="fieldDescription">Maximum characters for the plot summary.</div>
-                        </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;">
-                        <i class="material-icons" style="color: #00a4dc; font-size: 24px;">info</i>
-                        <div>
-                            All changes require a page refresh (ctrl + r or F5) after saving for changes to take effect.
-                            <br />
-                            If old settings persist, please force clear browser cache.
-                        </div>
-                    </div>
-
-                    <div>
-                        <button is="emby-button" type="submit" class="raised button-submit block emby-button">
-                            <span>${Save}</span>
-                        </button>
-                        <button is="emby-button" type="button" class="raised button-cancel block btnCancel"
-                            onclick="history.back();">
-                            <span>${ButtonCancel}</span>
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-
-        <script>
-            function showTab(tabId, btn) {
-                document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
-                document.getElementById(tabId).style.display = 'block';
-
-                document.querySelectorAll('.jellyfin-tab-button').forEach(b => {
-                    b.classList.remove('active');
-                    b.style.color = '#ccc';
-                    b.style.borderBottom = '2px solid transparent';
-                });
-
-                if (btn) {
-                    btn.classList.add('active');
-                    btn.style.color = '#fff';
-                    btn.style.borderBottom = '2px solid #00a4dc';
-                }
-            }
-
-            var MediaBarEnhancedConfigurationPage = {
-                pluginId: 'd7e11d57-819b-4bdd-a88d-53c5f5560225',
-                loadConfiguration: function (page) {
-                    Dashboard.showLoadingMsg();
-                    ApiClient.getPluginConfiguration(MediaBarEnhancedConfigurationPage.pluginId).then(function (config) {
-
-                        var keys = [
-                            'IsEnabled', 'ShuffleInterval', 'RetryInterval', 'MinSwipeDistance',
-                            'LoadingCheckInterval', 'MaxPlotLength', 'MaxMovies', 'MaxTvShows',
-                            'MaxItems', 'PreloadCount', 'FadeTransitionDuration', 'MaxPaginationDots',
-                            'SlideAnimationEnabled', 'EnableVideoBackdrop', 'UseSponsorBlock',
-                            'WaitForTrailerToEnd', 'StartMuted', 'FullWidthVideo', 'EnableMobileVideo',
-                            'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
-                            'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
-                            'EnableSeasonalContent', 'EnableClientSideSettings'
-                        ];
-
-                        keys.forEach(function (key) {
-                            var el = page.querySelector('#' + key);
-                            if (el) {
-                                if (el.type === 'checkbox') {
-                                    el.checked = config[key];
-                                } else {
-                                    el.value = config[key];
-                                }
-                            }
-                        });
-
-                        // Handle Seasonal UI logic
-                        var seasonalCheckbox = page.querySelector('#EnableSeasonalContent');
-                        var normalDesc = page.querySelector('#customMediaIdsDesc');
-                        var seasonalDesc = page.querySelector('#seasonalMediaIdsDesc');
-
-                        function updateDesc() {
-                            if (seasonalCheckbox && seasonalCheckbox.checked) {
-                                if (normalDesc) normalDesc.style.display = 'none';
-                                if (seasonalDesc) seasonalDesc.style.display = 'block';
-                            } else {
-                                if (normalDesc) normalDesc.style.display = 'block';
-                                if (seasonalDesc) seasonalDesc.style.display = 'none';
-                            }
-                        }
-
-                        if (seasonalCheckbox) {
-                            seasonalCheckbox.addEventListener('change', updateDesc);
-                            updateDesc();
-                        }
-
-                        Dashboard.hideLoadingMsg();
-                    });
-                },
-                saveConfiguration: function (page) {
-                    Dashboard.showLoadingMsg();
-
-                    var config = {};
-                    var keys = [
-                        'IsEnabled', 'ShuffleInterval', 'RetryInterval', 'MinSwipeDistance',
-                        'LoadingCheckInterval', 'MaxPlotLength', 'MaxMovies', 'MaxTvShows',
-                        'MaxItems', 'PreloadCount', 'FadeTransitionDuration', 'MaxPaginationDots',
-                        'SlideAnimationEnabled', 'EnableVideoBackdrop', 'UseSponsorBlock',
-                        'WaitForTrailerToEnd', 'StartMuted', 'FullWidthVideo', 'EnableMobileVideo',
-                        'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
-                        'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
-                        'EnableSeasonalContent', 'EnableClientSideSettings'
-                    ];
-
-                    keys.forEach(function (key) {
-                        var el = page.querySelector('#' + key);
-                        if (el) {
-                            if (el.type === 'checkbox') {
-                                config[key] = el.checked;
-                            } else {
-                                config[key] = (el.type === 'number') ? parseInt(el.value, 10) : el.value;
-                            }
-                        }
-                    });
-
-                    ApiClient.updatePluginConfiguration(MediaBarEnhancedConfigurationPage.pluginId, config).then(function (result) {
-                        Dashboard.processPluginConfigurationUpdateResult(result);
-                    });
-                }
-            };
-
-            document.querySelector('#MediaBarEnhancedConfigurationPage').addEventListener('pageshow', function () {
-                MediaBarEnhancedConfigurationPage.loadConfiguration(this);
-            });
-
-            document.querySelector('#mediaBarEnhancedConfigForm').addEventListener('submit', function (e) {
-                e.preventDefault();
-                MediaBarEnhancedConfigurationPage.saveConfiguration(document.querySelector('#MediaBarEnhancedConfigurationPage'));
-                return false;
-            });
-        </script>
-
-        <style>
-            .jellyfin-tab-button.active {
-                color: #fff !important;
-                border-bottom: 2px solid #00a4dc !important;
-            }
-        </style>
-    </div>
-</body>
-
-</html>