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

Bump version to 1.6.2.1
Add option to include watched content in random selection
2026-02-14 23:52:43 +00:00 · 2026-02-15 00:51:54 +01:00 · 2026-02-15 00:51:00 +01:00 · 2026-02-15 00:36:42 +01:00 · 2026-02-14 23:34:47 +00:00 · 2026-02-15 00:33:58 +01:00
9 changed files with 875 additions and 235 deletions
--- a/Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs
+++ b/Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs
@@ -22,6 +22,9 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
        public bool EnableVideoBackdrop { get; set; } = true;
        public bool UseSponsorBlock { get; set; } = true;
        public bool PreferLocalTrailers { get; set; } = false;
        public bool RandomizeLocalTrailers { get; set; } = false;
        public bool PreferLocalBackdrops { get; set; } = false;
        public bool RandomizeThemeVideos { get; set; } = false;
        public bool WaitForTrailerToEnd { get; set; } = true;
        public bool StartMuted { get; set; } = true;
        public bool FullWidthVideo { get; set; } = true;
@@ -34,8 +37,11 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
        public bool EnableCustomMediaIds { get; set; } = true;
        public string PreferredVideoQuality { get; set; } = "Auto";
        public bool EnableSeasonalContent { get; set; } = false;
        public string SeasonalSections { get; set; } = "[]";
        public bool IsEnabled { get; set; } = true;
        public bool EnableClientSideSettings { get; set; } = false;
        public bool ApplyLimitsToCustomIds { get; set; } = false;
        public bool IncludeWatchedContent { get; set; } = false;
        public string SortBy { get; set; } = "Random";
        public string SortOrder { get; set; } = "Ascending";
    }
--- a/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html
+++ b/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html
@@ -65,6 +65,14 @@
                            </label>
                            <div class="fieldDescription">If enabled, local trailers will be preferred over remote (YouTube) trailers.</div>
                        </div>
                        <div class="checkboxContainer checkboxContainer-withDescription" id="PreferLocalBackdropsContainer">
                            <label>
                                <input is="emby-checkbox" type="checkbox" id="PreferLocalBackdrops"
                                    name="PreferLocalBackdrops" />
                                <span>Prefer Local Backdrops / Theme Videos</span>
                            </label>
                            <div class="fieldDescription">If enabled, local backdrop videos (Theme Videos) will be preferred over trailers.</div>
                        </div>
                        <div class="checkboxContainer checkboxContainer-withDescription">
                            <label>
                                <input is="emby-checkbox" type="checkbox" id="WaitForTrailerToEnd"
@@ -94,6 +102,7 @@
                    <!-- CUSTOM CONTENT TAB -->
                    <div id="custom" class="tab-content" style="display:none;">
                        <!-- Default Custom Media IDs -->
                        <h2 class="sectionTitle">Custom Media IDs</h2>
                        <div class="checkboxContainer checkboxContainer-withDescription">
                            <label>
@@ -101,55 +110,68 @@
                                    name="EnableCustomMediaIds" />
                                <span>Enable Custom Media IDs</span>
                            </label>
-                            <div class="fieldDescription">If enabled, the slideshow will try to show the items listed
+                            <div class="fieldDescription">If enabled, the slideshow will show the items listed
-                                below. If the list is empty, default behavior (random items) is used. Disable this
+                                below as the default content. If the list is empty, random items from your library are used.</div>
                                to temporarily ignore your custom list without deleting it.</div>
                        </div>
                        <div class="checkboxContainer checkboxContainer-withDescription">
                            <label>
                                <input is="emby-checkbox" type="checkbox" id="ApplyLimitsToCustomIds"
                                    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>
                        <div id="customMediaIdsContainer">
                            <div class="inputContainer">
                                <label class="inputLabel inputLabelUnfocused" for="CustomMediaIds">Default 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.
                                    <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
                                    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>
                                    </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>
                                    <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>
                                <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>
                        <!-- Seasonal Content -->
                        <h2 class="sectionTitle" style="margin-top: 2em;">Seasonal Content</h2>
                        <div class="checkboxContainer checkboxContainer-withDescription">
                            <label>
                                <input is="emby-checkbox" type="checkbox" id="EnableSeasonalContent"
                                    name="EnableSeasonalContent" />
-                                <span>Enable Seasonal Content Mode</span>
+                                <span>Enable Seasonal Content</span>
                            </label>
-                            <div class="fieldDescription">Enable this to define time-based lists in the field below.
+                            <div class="fieldDescription">When enabled, seasonal sections below will override the default list or random selection
-                            </div>
+                                during their active date ranges. If no season matches the current date, the default Custom Media IDs above or random selection are used as fallback.</div>
                        </div>
-                        <div class="inputContainer">
+                        <div id="seasonalContentContainer" style="display: none;">
-                            <label class="inputLabel inputLabelUnfocused" for="CustomMediaIds">Media/Collection/Playlist
+                            <div id="seasonalSectionsList"></div>
-                                IDs
+                            <button is="emby-button" type="button" id="addSeasonBtn" class="raised emby-button"
-                                (Newline or Comma separated)</label>
+                                style="margin-top: 1em; display: inline-flex; align-items: center; gap: 0.4em;">
-                            <textarea is="emby-textarea" id="CustomMediaIds" name="CustomMediaIds"
+                                <i class="material-icons" style="font-size: 24px;">add</i>
-                                style="width: 100%; height: 150px; font-family: monospace;"></textarea>
+                                <span>Add Season</span>
-                            <div class="fieldDescription" id="customMediaIdsDesc">Enter the IDs of the items you want to show in the slideshow.
+                            </button>
                                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
                                    fetch the list.txt or 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>
                        <input type="hidden" id="SeasonalSections" name="SeasonalSections" value="[]" />
                    </div>
                    <!-- ADVANCED TAB -->
@@ -173,17 +195,32 @@
                            <div class="fieldDescription">If enabled, users will see a media bar icon in the header to
                                override settings (like disabling the bar or trailer backdrops) locally on their device.</div>
                        </div>
                        <div class="checkboxContainer checkboxContainer-withDescription">
                            <label>
                                <input is="emby-checkbox" type="checkbox" id="RandomizeThemeVideos"
                                    name="RandomizeThemeVideos" />
                                <span>Randomize Backdrop Video</span>
                            </label>
                            <div class="fieldDescription">If enabled, a random video from the backdrops/theme videos will be selected instead of the first one (if multiple exist).</div>
                        </div>
                        <div class="checkboxContainer checkboxContainer-withDescription">
                            <label>
                                <input is="emby-checkbox" type="checkbox" id="RandomizeLocalTrailers"
                                    name="RandomizeLocalTrailers" />
                                <span>Randomize Local Trailer</span>
                            </label>
                            <div class="fieldDescription">If enabled, a random local trailer will be selected instead of the first one (if multiple exist).</div>
                        </div>
                        <div class="checkboxContainer checkboxContainer-withDescription">
                            <label>
                                <input is="emby-checkbox" type="checkbox" id="UseSponsorBlock" name="UseSponsorBlock" />
                                <span>Use SponsorBlock</span>
                            </label>
-                            <div class="fieldDescription">Skip intro/outro segments in YouTube trailers.</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"
+                            <select is="emby-select" id="PreferredVideoQuality" name="PreferredVideoQuality" class="selectLayout emby-select-withcolor emby-select" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
                                class="emby-select-withcolor emby-select">
                                <option value="Auto">Auto (Smart)</option>
                                <option value="Maximum">Maximum (4K+)</option>
                                <option value="1080p">1080p</option>
@@ -285,7 +322,7 @@
                        <h2 class="sectionTitle">Content Sorting</h2>
                        <div class="selectContainer">
                            <label class="selectLabel" for="SortBy">Sort By</label>
-                            <select is="emby-select" id="SortBy" name="SortBy" class="emby-select-withcolor emby-select">
+                            <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>
@@ -299,7 +336,7 @@
                        </div>
                        <div class="selectContainer">
                            <label class="selectLabel" for="SortOrder">Sort Order</label>
-                            <select is="emby-select" id="SortOrder" name="SortOrder" class="emby-select-withcolor emby-select">
+                            <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>
@@ -332,7 +369,7 @@
                        <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 class="fieldDescription">Number of slides to preload.</div>
                        </div>
                        <div class="inputContainer">
                            <label class="inputLabel inputLabelUnfocused" for="MaxPaginationDots">Max Pagination
@@ -348,6 +385,14 @@
                            <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
@@ -406,7 +451,9 @@
                            'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
                            'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
                            'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
-                            'PreferLocalTrailers'
+                            'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
                            'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
                            'IncludeWatchedContent'
                        ];
                        keys.forEach(function (key) {
@@ -420,35 +467,52 @@
                            }
                        });
-                        // Handle Seasonal UI logic
+                        // Render Seasonal Sections
-                        var seasonalCheckbox = page.querySelector('#EnableSeasonalContent');
+                        try {
-                        var normalDesc = page.querySelector('#customMediaIdsDesc');
+                            var sections = JSON.parse(config.SeasonalSections || "[]");
-                        var seasonalDesc = page.querySelector('#seasonalMediaIdsDesc');
+                            MediaBarEnhancedConfigurationPage.renderSeasonalSections(page, sections);
                        } catch (e) {
                            console.error("Error parsing SeasonalSections", e);
                        }
-                        function updateDesc() {
+                        // Handle Seasonal UI visibility
-                            if (seasonalCheckbox && seasonalCheckbox.checked) {
+                        var seasonalCheckbox = page.querySelector('#EnableSeasonalContent');
-                                if (normalDesc) normalDesc.style.display = 'none';
+                        var seasonalContainer = page.querySelector('#seasonalContentContainer');
-                                if (seasonalDesc) seasonalDesc.style.display = 'block';
+
-                            } else {
+                        function updateSeasonalVisibility() {
-                                if (normalDesc) normalDesc.style.display = 'block';
+                            if (seasonalContainer) {
-                                if (seasonalDesc) seasonalDesc.style.display = 'none';
+                                seasonalContainer.style.display = seasonalCheckbox && seasonalCheckbox.checked ? 'block' : 'none';
                            }
                        }
                        if (seasonalCheckbox) {
-                            seasonalCheckbox.addEventListener('change', updateDesc);
+                            seasonalCheckbox.addEventListener('change', updateSeasonalVisibility);
-                            updateDesc();
+                            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);
                             addSeasonBtn.parentNode.replaceChild(newBtn, addSeasonBtn);
                             newBtn.addEventListener('click', function() {
                                 MediaBarEnhancedConfigurationPage.addSeasonalSection(page);
                             });
                        }
                        // Handle Prefer Local Trailers visibility
                        var enableVideoBackdropCheckbox = page.querySelector('#EnableVideoBackdrop');
                        var preferLocalContainer = page.querySelector('#PreferLocalTrailersContainer');
                        var preferLocalBackdropsContainer = page.querySelector('#PreferLocalBackdropsContainer');
                        function updatePreferLocalVisibility() {
                            if (enableVideoBackdropCheckbox && enableVideoBackdropCheckbox.checked) {
                                if (preferLocalContainer) preferLocalContainer.style.display = 'block';
                                if (preferLocalBackdropsContainer) preferLocalBackdropsContainer.style.display = 'block';
                            } else {
                                if (preferLocalContainer) preferLocalContainer.style.display = 'none';
                                if (preferLocalBackdropsContainer) preferLocalBackdropsContainer.style.display = 'none';
                            }
                        }
@@ -463,6 +527,11 @@
                saveConfiguration: function (page) {
                    Dashboard.showLoadingMsg();
                    var sections = MediaBarEnhancedConfigurationPage.getSeasonalSectionsFromUI(page);
                    var sectionsJson = JSON.stringify(sections);
                    var seasonalInput = page.querySelector('#SeasonalSections');
                    if (seasonalInput) seasonalInput.value = sectionsJson;
                    var config = {};
                    var keys = [
                        'IsEnabled', 'ShuffleInterval', 'RetryInterval', 'MinSwipeDistance',
@@ -473,7 +542,9 @@
                        'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
                        'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
                        'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
-                        'PreferLocalTrailers'
+                        'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
                        'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
                        'IncludeWatchedContent'
                    ];
                    keys.forEach(function (key) {
@@ -490,6 +561,105 @@
                    ApiClient.updatePluginConfiguration(MediaBarEnhancedConfigurationPage.pluginId, config).then(function (result) {
                        Dashboard.processPluginConfigurationUpdateResult(result);
                    });
                },
                renderSeasonalSections: function(page, sections) {
                    var container = page.querySelector('#seasonalSectionsList');
                    if (!container) return;
                    container.innerHTML = '';
                    sections.forEach(function(section, index) {
                        MediaBarEnhancedConfigurationPage.createSectionElement(container, section, index + 1);
                    });
                },
                addSeasonalSection: function(page) {
                    var container = page.querySelector('#seasonalSectionsList');
                    if (!container) return;
                    var index = container.children.length + 1;
                    MediaBarEnhancedConfigurationPage.createSectionElement(container, {
                        Name: 'New Season',
                        StartDay: 1, StartMonth: 1,
                        EndDay: 1, EndMonth: 1,
                        MediaIds: ''
                    }, 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);
                    var months = [
                        {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: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) {
                            var v = o.v || o;
                            var n = o.n || o;
                            h += '<option value="'+v+'" ' + (v == val ? 'selected' : '') + '>' + n + '</option>';
                        });
                        h += '</select>';
                        return h;
                    }
                    var labelText = 'Season list #' + (index || 1);
                    div.innerHTML =
                        '<div class="inputContainer" style="margin-bottom: 0.5em;">' +
                        '    <label class="inputLabel" style="font-size: 1.2em; font-weight: bold; margin-bottom:0.5em; display:block;">' + labelText + '</label>' +
                        '    <div style="display: flex; align-items: center;">' +
                        '        <div style="flex-grow:1;">' +
                        '            <input is="emby-input" type="text" class="emby-input section-name" value="' + (data.Name || '') + '" />' +
                        '        </div>' +
                        '        <button type="button" class="raised emby-button remove-section" style="background: #a94442; min-width: unset; margin-left: 1em;">Remove</button>' +
                        '    </div>' +
                        '    <div class="fieldDescription">Name of the season</div>' +
                        '</div>' +
                        '<div class="inputContainer" style="margin-bottom: 1em;">' +
                        '    <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.StartMonth, months, 'start-month') +
                        '        <span style="margin-left: 1em;">To:</span>' +
                                 mkSelect(data.EndDay, days, 'end-day') +
                                 mkSelect(data.EndMonth, months, 'end-month') +
                        '    </div>' +
                        '    <div class="fieldDescription">Date range (inclusive) when this content is active.</div>' +
                        '</div>' +
                        '<div class="inputContainer">' +
                        '    <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Media IDs</label>' +
                        '    <textarea is="emby-textarea" class="emby-textarea section-ids" style="width: 100%; height: 80px; font-family: monospace;">' + (data.MediaIds || '') + '</textarea>' +
                        '    <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('.remove-section').addEventListener('click', function() {
                        div.remove();
                    });
                    container.appendChild(div);
                },
                getSeasonalSectionsFromUI: function(page) {
                    var sections = [];
                    var els = page.querySelectorAll('.seasonal-section');
                    els.forEach(function(el) {
                        sections.push({
                            Name: el.querySelector('.section-name').value,
                            StartDay: parseInt(el.querySelector('.start-day').value),
                            StartMonth: parseInt(el.querySelector('.start-month').value),
                            EndDay: parseInt(el.querySelector('.end-day').value),
                            EndMonth: parseInt(el.querySelector('.end-month').value),
                            MediaIds: el.querySelector('.section-ids').value
                        });
                    });
                    return sections;
                }
            };
--- a/Jellyfin.Plugin.MediaBarEnhanced/Jellyfin.Plugin.MediaBarEnhanced.csproj
+++ b/Jellyfin.Plugin.MediaBarEnhanced/Jellyfin.Plugin.MediaBarEnhanced.csproj
@@ -12,7 +12,7 @@
    <!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
    <Title>Jellyfin Media Bar Enhanced Plugin</Title>
    <Authors>CodeDevMLH</Authors>
-    <Version>1.5.0.27</Version>
+    <Version>1.6.2.1</Version>
    <RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced</RepositoryUrl>
  </PropertyGroup>
--- a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css
+++ b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css
@@ -1,6 +1,6 @@
 /*
- * Jellyfin Slideshow by M0RPH3US v3.0.9
+ * Jellyfin Slideshow by M0RPH3US v4.0.1
- * Modified by CodeDevMLH v1.1.0.0
+ * Modified by CodeDevMLH
 * 
 * New features:
 * - optional Trailer background video support
@@ -14,6 +14,9 @@
 * - option to disable loading screen
 * - option to put collection (boxsets) IDs into the slideshow to display their items
 * - option to enable client-side settings (allow users to override settings locally on their device)
 * - option to enable seasonal content (only show items that are relevant to the current season/holiday)
 * - option to prefer local trailers (from the media item) over online sources
 * - options to sort the content by various criteria (PremiereDate, ProductionYear, Random, Original order, etc.)
 */
@import url(https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&display=swap);
@@ -161,7 +164,7 @@
 .homeSectionsContainer {
  position: relative;
-  margin-top: 65vh;
+  top: 65vh;
  z-index: 6;
 }
@@ -172,6 +175,7 @@
  overflow: hidden;
  margin: 0 auto;
  pointer-events: auto;
  outline: none;
 }
 #slides-container[style*="display: none"],
@@ -993,7 +997,6 @@
  margin: 0;
 }
-/* Fix scrolling issue in TV mode - preserve space for slideshow */
+.layout-tv .backdrop-container{
-.layout-tv html, .layout-tv body {
+  top: -5%;
  scroll-padding-top: 65vh;
 }
--- a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
+++ b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
@@ -1,6 +1,6 @@
 /*
 * Jellyfin Slideshow by M0RPH3US v4.0.1
- * Modified by CodeDevMLH v1.1.0.0
+ * Modified by CodeDevMLH
 * 
 * New features:
 * - optional Trailer background video support
@@ -14,6 +14,9 @@
 * - option to disable loading screen
 * - option to put collection (boxsets) IDs into the slideshow to display their items
 * - option to enable client-side settings (allow users to override settings locally on their device)
 * - option to enable seasonal content (only show items that are relevant to the current season/holiday)
 * - option to prefer local trailers (from the media item) over online sources
 * - options to sort the content by various criteria (PremiereDate, ProductionYear, Random, Original order, etc.)
 */
 //Core Module Configuration
@@ -39,6 +42,9 @@ const CONFIG = {
  enableVideoBackdrop: true,
  useSponsorBlock: true,
  preferLocalTrailers: false,
  randomizeLocalTrailers: false,
  preferLocalBackdrops: false,
  randomizeThemeVideos: false,
  waitForTrailerToEnd: true,
  startMuted: true,
  fullWidthVideo: true,
@@ -54,6 +60,8 @@ const CONFIG = {
  enableClientSideSettings: false,
  sortBy: "Random",
  sortOrder: "Ascending",
  applyLimitsToCustomIds: false,
  seasonalSections: "[]",
 };
 // State management
@@ -608,7 +616,8 @@ const SlideUtils = {
    if (!container) {
      container = this.createElement("div", { 
        id: "slides-container",
-        className: "noautofocus"
+        className: "noautofocus",
        tabIndex: "-1"
      });
      document.body.appendChild(container);
    }
@@ -737,7 +746,11 @@ const SlideUtils = {
            autoplay: 1,
            controls: 1,
            iv_load_policy: 3,
-            rel: 0
+            rel: 0,
            playsinline: 1,
            origin: window.location.origin,
            widget_referrer: window.location.href,
            enablejsapi: 1
          }
        });
      });
@@ -1108,8 +1121,11 @@ const ApiUtils = {
        sortParams += `&sortOrder=${CONFIG.sortOrder}`;
      }
      // Filter by isPlayed=False unless IncludeWatchedContent is enabled
      const playedFilter = CONFIG.includeWatchedContent ? '' : '&isPlayed=False';
      const response = await fetch(
-        `${STATE.jellyfinData.serverAddress}/Items?IncludeItemTypes=Movie,Series&Recursive=true&hasOverview=true&imageTypes=Logo,Backdrop&${sortParams}&isPlayed=False&enableUserData=true&Limit=${CONFIG.maxItems}&fields=Id`,
+        `${STATE.jellyfinData.serverAddress}/Items?IncludeItemTypes=Movie,Series&Recursive=true&hasOverview=true&imageTypes=Logo,Backdrop&${sortParams}${playedFilter}&enableUserData=true&Limit=${CONFIG.maxItems}&fields=Id`,
        {
          headers: this.getAuthHeaders(),
        }
@@ -1248,9 +1264,20 @@ const ApiUtils = {
   */
  async fetchSponsorBlockData(videoId) {
    if (!CONFIG.useSponsorBlock) return { intro: null, outro: null };
    // Return cached result if available
    if (!this._sponsorBlockCache) this._sponsorBlockCache = {};
    if (this._sponsorBlockCache[videoId]) {
      return this._sponsorBlockCache[videoId];
    }
    try {
      const response = await fetch(`https://sponsor.ajay.app/api/skipSegments?videoID=${videoId}&categories=["intro","outro"]`);
-      if (!response.ok) return { intro: null, outro: null };
+      if (!response.ok) {
        const result = { intro: null, outro: null };
        this._sponsorBlockCache[videoId] = result;
        return result;
      }
      const segments = await response.json();
      let intro = null;
@@ -1264,7 +1291,9 @@ const ApiUtils = {
        }
      });
-      return { intro, outro };
+      const result = { intro, outro };
      this._sponsorBlockCache[videoId] = result;
      return result;
    } catch (error) {
      console.warn('Error fetching SponsorBlock data:', error);
      return { intro: null, outro: null };
@@ -1309,7 +1338,7 @@ const ApiUtils = {
  async fetchCollectionItems(collectionId) {
    try {
      const response = await fetch(
-        `${STATE.jellyfinData.serverAddress}/Items?ParentId=${collectionId}&Recursive=true&IncludeItemTypes=Movie,Series&fields=Id&userId=${STATE.jellyfinData.userId}`,
+        `${STATE.jellyfinData.serverAddress}/Items?ParentId=${collectionId}&Recursive=true&IncludeItemTypes=Movie,Series&fields=Id,Type&userId=${STATE.jellyfinData.userId}`,
        {
          headers: this.getAuthHeaders(),
        }
@@ -1323,7 +1352,7 @@ const ApiUtils = {
      const data = await response.json();
      const items = data.Items || [];
      console.log(`Resolved collection ${collectionId} to ${items.length} items`);
-      return items.map(i => i.Id);
+      return items.map(i => ({ Id: i.Id, Type: i.Type }));
    } catch (error) {
      console.error(`Error fetching collection items for ${collectionId}:`, error);
      return [];
@@ -1333,7 +1362,7 @@ const ApiUtils = {
  /**
   * Fetches the first local trailer for an item
   * @param {string} itemId - Item ID
-   * @returns {Promise<string|null>} Stream URL or null
+   * @returns {Promise<Object|null>} Trailer data object {id, url} or null
   */
  async fetchLocalTrailer(itemId) {
    try {
@@ -1348,17 +1377,68 @@ const ApiUtils = {
        return null;
      }
-      const trailers = await response.json();
+        const trailers = await response.json();
-      if (trailers && trailers.length > 0) {
+        if (trailers && trailers.length > 0) {
        const trailer = trailers[0];
        const mediaSourceId = trailer.MediaSources && trailer.MediaSources[0] ? trailer.MediaSources[0].Id : trailer.Id;
-        // Construct stream URL
+            let trailer;
-        return `${STATE.jellyfinData.serverAddress}/Videos/${trailer.Id}/stream.mp4?Static=true&mediaSourceId=${mediaSourceId}&api_key=${STATE.jellyfinData.accessToken}`;
+            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}`);
            } else {
                trailer = trailers[0];
            }
            const mediaSourceId = trailer.MediaSources && trailer.MediaSources[0] ? trailer.MediaSources[0].Id : trailer.Id;
            return {
                id: trailer.Id,
                url: `${STATE.jellyfinData.serverAddress}/Videos/${trailer.Id}/stream.mp4?mediaSourceId=${mediaSourceId}&api_key=${STATE.jellyfinData.accessToken}`
            };
        }
        return null;
    } catch (error) {
      console.error(`Error fetching local trailer for ${itemId}:`, error);
      return null;
    }
  },
  /**
   * Fetches theme videos for an item
   * @param {string} itemId - Item ID
   * @returns {Promise<Object|null>} Theme video data object {id, url} or null
   */
  async fetchThemeVideos(itemId) {
    try {
      const response = await fetch(
          `${STATE.jellyfinData.serverAddress}/Items/${itemId}/ThemeVideos?userId=${STATE.jellyfinData.userId}`, 
          { headers: this.getAuthHeaders() }
      );
      if (response.ok) {
           const data = await response.json();
           const items = Array.isArray(data) ? data : (data.Items || []);
           if (items.length > 0) {
               let video;
               if (CONFIG.randomizeThemeVideos && items.length > 1) {
                   const randomIndex = Math.floor(Math.random() * items.length);
                   video = items[randomIndex];
                   console.log(`Found Theme Video (Random ${randomIndex + 1}/${items.length}) via ThemeVideos endpoint: ${video.Name} (${video.Id})`);
               } else {
                   video = items[0];
                   console.log(`Found Theme Video (First) via ThemeVideos endpoint: ${video.Name} (${video.Id})`);
               }
               return {
                   id: video.Id,
                   url: `${STATE.jellyfinData.serverAddress}/Videos/${video.Id}/stream.mp4?api_key=${STATE.jellyfinData.accessToken}`
               };
           }
      }
      return null;
    } catch (error) {
-      console.error(`Error fetching local trailer for ${itemId}:`, error);
+      console.error(`Error fetching theme videos for ${itemId}:`, error);
      return null;
    }
  }
@@ -1566,18 +1646,44 @@ const SlideCreator = {
    // 1a. Custom URL override
    if (STATE.slideshow.customTrailerUrls && STATE.slideshow.customTrailerUrls[itemId]) {
-      trailerUrl = STATE.slideshow.customTrailerUrls[itemId];
+      const customValue = STATE.slideshow.customTrailerUrls[itemId];
-      console.log(`Using custom trailer URL for ${itemId}: ${trailerUrl}`);
+      
      // Check if the custom value is a Jellyfin Item ID (GUID)
      const guidMatch = customValue.match(/^([0-9a-f]{32})$/i);
      if (guidMatch) {
          const videoId = guidMatch[1];
          console.log(`Using custom local video ID for ${itemId}: ${videoId}`);
          trailerUrl = {
              id: videoId,
              url: `${STATE.jellyfinData.serverAddress}/Videos/${videoId}/stream.mp4?api_key=${STATE.jellyfinData.accessToken}`
          };
      } else {
          // Assume it's a standard URL (YouTube, etc.)
          trailerUrl = customValue;
          console.log(`Using custom trailer URL for ${itemId}: ${trailerUrl}`);
      }
    }
-    // 1b. Check Local Trailer if preferred
+    // 1b. Check Theme Video if preferred (Local Backdrop)
    else if (CONFIG.preferLocalBackdrops && item.themeVideoUrl) {
        trailerUrl = item.themeVideoUrl;
        console.log(`Using theme video (local backdrop) for ${itemId}: ${trailerUrl.url || trailerUrl}`);
    } 
    // 1c. Check Local Trailer if preferred
    else if (CONFIG.preferLocalTrailers && item.LocalTrailerCount > 0 && item.localTrailerUrl) {
         trailerUrl = item.localTrailerUrl;
         console.log(`Using local trailer for ${itemId}: ${trailerUrl}`);
    }
-    // 1c. Fallback to Remote Trailer
+    // 1d. Fallback to Remote Trailer
    else if (item.RemoteTrailers && item.RemoteTrailers.length > 0) {
      trailerUrl = item.RemoteTrailers[0].Url;
    }
    // 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}`);
    }
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
@@ -1592,12 +1698,17 @@ const SlideCreator = {
      let videoId = null;
      try {
-        const urlObj = new URL(trailerUrl);
+        let urlToCheck = trailerUrl;
-        if (urlObj.hostname.includes('youtube.com') || urlObj.hostname.includes('youtu.be')) {
+        if (typeof trailerUrl === 'object' && trailerUrl.url) {
            urlToCheck = trailerUrl.url;
        }
        const urlObjChecked = new URL(urlToCheck);
        if (urlObjChecked.hostname.includes('youtube.com') || urlObjChecked.hostname.includes('youtu.be')) {
          isYoutube = true;
-          videoId = urlObj.searchParams.get('v');
+          videoId = urlObjChecked.searchParams.get('v');
-          if (!videoId && urlObj.hostname.includes('youtu.be')) {
+          if (!videoId && urlObjChecked.hostname.includes('youtu.be')) {
-            videoId = urlObj.pathname.substring(1);
+            videoId = urlObjChecked.pathname.substring(1);
          }
        }
      } catch (e) {
@@ -1626,7 +1737,11 @@ const SlideCreator = {
              fs: 0,
              iv_load_policy: 3,
              rel: 0,
-              loop: 0
+              loop: 0,
              playsinline: 1,
              origin: window.location.origin,
              widget_referrer: window.location.href,
              enablejsapi: 1
            };
            // Determine video quality
@@ -1715,14 +1830,18 @@ const SlideCreator = {
                },
                'onStateChange': (event) => {
                  if (event.data === YT.PlayerState.ENDED) {
-                    if (CONFIG.waitForTrailerToEnd) {
+                    const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
-                      SlideshowManager.nextSlide();
+                    if (slide && slide.classList.contains('active')) {
-                    } else {
+                      if (CONFIG.waitForTrailerToEnd) {
-                      event.target.playVideo(); // Loop if not waiting for end if trailer is shorter than slide duration
+                        SlideshowManager.nextSlide();
                      } else {
                        event.target.playVideo(); // Loop if trailer is shorter than slide duration
                      }
                    }
                  }
                },
-                'onError': () => {
+                'onError': (event) => {
                  console.warn(`YouTube player error ${event.data} for video ${videoId}`);
                  // Fallback to next slide on error
                  if (CONFIG.waitForTrailerToEnd) {
                    SlideshowManager.nextSlide();
@@ -1739,39 +1858,44 @@ const SlideCreator = {
        const videoAttributes = {
          className: "backdrop video-backdrop",
-          src: trailerUrl,
+          src: (typeof trailerUrl === 'object' ? trailerUrl.url : trailerUrl),
          autoplay: false,
          preload: "auto",
          loop: false,
          disablePictureInPicture: true,
          style: "object-fit: cover; object-position: center center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none;"
        };
-        if (STATE.slideshow.isMuted) {
+        videoAttributes.muted = "";
          videoAttributes.muted = "";
        }
        backdrop = SlideUtils.createElement("video", videoAttributes);
-
+        backdrop.volume = 0.4;
        if (!STATE.slideshow.isMuted) {
          backdrop.volume = 0.4;
        }
        STATE.slideshow.videoPlayers[itemId] = backdrop;
-        backdrop.addEventListener('play', () => {
+        backdrop.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.`);
            event.target.pause();
            event.target.currentTime = 0;
            return;
          }
          if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
            STATE.slideshow.slideInterval.stop();
          }
        });
        backdrop.addEventListener('ended', () => {
-          if (CONFIG.waitForTrailerToEnd) {
+            const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
-            SlideshowManager.nextSlide();
+            if (slide && slide.classList.contains('active')) {
-          }
+              SlideshowManager.nextSlide();
            }
        });
        backdrop.addEventListener('error', () => {
-          if (CONFIG.waitForTrailerToEnd) {
+          const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
          if (CONFIG.waitForTrailerToEnd && slide && slide.classList.contains('active')) {
            SlideshowManager.nextSlide();
          }
        });
@@ -2030,11 +2154,20 @@ const SlideCreator = {
  /**
   * Creates a trailer button
-   * @param {string} url - Trailer URL
+   * @param {string|Object} trailerInfo - Trailer URL string or object {id, url}
   * @returns {HTMLElement} Trailer button element
   */
-  createTrailerButton(url) {
+  createTrailerButton(trailerInfo) {
    const trailerText = LocalizationUtils.getLocalizedString('Trailer', 'Trailer');
    let url = trailerInfo;
    let localTrailerId = null;
    if (typeof trailerInfo === 'object' && trailerInfo !== null) {
        url = trailerInfo.url;
        localTrailerId = trailerInfo.id;
    }
    return SlideUtils.createElement("button", {
      className: "detailButton trailer-button",
      innerHTML: `<span class="material-icons">movie</span> <span class="trailer-text">${trailerText}</span>`,
@@ -2042,7 +2175,13 @@ const SlideCreator = {
      onclick: (e) => {
        e.preventDefault();
        e.stopPropagation();
-        SlideUtils.openVideoModal(url);
+        
        if (localTrailerId) {
            // Play local trailer using native player
            ApiUtils.playItem(localTrailerId);
        } else {
            SlideUtils.openVideoModal(url);
        }
      },
    });
  },
@@ -2090,6 +2229,11 @@ const SlideCreator = {
          item.localTrailerUrl = await ApiUtils.fetchLocalTrailer(itemId);
      }
      // Pre-fetch theme video URL if needed
      if (CONFIG.preferLocalBackdrops) {
          item.themeVideoUrl = await ApiUtils.fetchThemeVideos(itemId);
      }
      const slideElement = this.createSlideElement(
        item,
        item.Type === "Movie" ? "Movie" : "TV Show"
@@ -2216,15 +2360,22 @@ const SlideshowManager = {
      currentSlide.classList.add("active");
      // Manage Video Playback: Stop others, Play current
-
+      // 1. Stop all other YouTube players and local video elements
      // 1. Pause all other YouTube players
      if (STATE.slideshow.videoPlayers) {
        Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
          if (id !== currentItemId) {
            const p = STATE.slideshow.videoPlayers[id];
-            if (p && typeof p.pauseVideo === 'function') {
+            if (!p) return;
            // YouTube player
            if (typeof p.pauseVideo === 'function') {
              p.pauseVideo();
            }
            // HTML5 <video> element (local trailers)
            if (p instanceof HTMLVideoElement) {
              p.pause();
              p.muted = true;
              p.currentTime = 0;
            }
          }
        });
      }
@@ -2239,6 +2390,18 @@ const SlideshowManager = {
      // 3. Play and Reset current video
      const videoBackdrop = currentSlide.querySelector('.video-backdrop');
      // Auto-unpause when a video slide becomes active
      if (videoBackdrop && STATE.slideshow.isPaused) {
          STATE.slideshow.isPaused = false;
          const pauseButton = document.querySelector('.pause-button');
          if (pauseButton) {
              pauseButton.innerHTML = '<i class="material-icons">pause</i>';
              const pauseLabel = LocalizationUtils.getLocalizedString('ButtonPause', 'Pause');
              pauseButton.setAttribute("aria-label", pauseLabel);
              pauseButton.setAttribute("title", pauseLabel);
          }
      }
      // Update mute button visibility
      const muteButton = document.querySelector('.mute-button');
      if (muteButton) {
@@ -2258,8 +2421,8 @@ const SlideshowManager = {
          videoBackdrop.play().catch(e => {
            // Check if it actually started playing after a short delay (handling autoplay blocks)
            setTimeout(() => {
-              if (videoBackdrop.paused) {
+              if (videoBackdrop.paused && currentSlide.classList.contains('active')) {
-                console.warn(`Autoplay blocked for ${itemId}, attempting muted fallback`);
+                console.warn(`Autoplay blocked for ${currentItemId}, attempting muted fallback`);
                videoBackdrop.muted = true;
                videoBackdrop.play().catch(err => console.error("Muted fallback failed", err));
              }
@@ -2284,6 +2447,7 @@ const SlideshowManager = {
            // Check if playback successfully started, otherwise fallback to muted
            setTimeout(() => {
              if (!currentSlide.classList.contains('active')) return;
              if (player.getPlayerState &&
                player.getPlayerState() !== YT.PlayerState.PLAYING &&
                player.getPlayerState() !== YT.PlayerState.BUFFERING) {
@@ -2308,7 +2472,8 @@ const SlideshowManager = {
        if (backdrop && !backdrop.classList.contains("video-backdrop")) {
          backdrop.classList.add("animate");
        }
-        currentSlide.querySelector(".logo").classList.add("animate");
+        const logo = currentSlide.querySelector(".logo");
        if (logo) logo.classList.add("animate");
      }
      STATE.slideshow.currentSlideIndex = index;
@@ -2333,7 +2498,8 @@ const SlideshowManager = {
      this.updateDots();
      // Only restart interval if we are NOT waiting for a video to end
-      const hasVideo = currentSlide.querySelector('.video-backdrop');
+      const hasVideo = currentSlide.querySelector('.video-backdrop') || 
        (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]);
      if (STATE.slideshow.slideInterval && !STATE.slideshow.isPaused) {
        if (CONFIG.waitForTrailerToEnd && hasVideo) {
          STATE.slideshow.slideInterval.stop();
@@ -2391,18 +2557,31 @@ const SlideshowManager = {
   */
  async preloadAdjacentSlides(currentIndex) {
    const totalItems = STATE.slideshow.totalItems;
-    const preloadCount = CONFIG.preloadCount;
+    const preloadCount = Math.min(Math.max(CONFIG.preloadCount || 1, 1), 5);
    const preloadedIds = new Set();
-    const nextIndex = (currentIndex + 1) % totalItems;
+    // Preload next slides
-    const itemId = STATE.slideshow.itemIds[nextIndex];
+    for (let i = 1; i <= preloadCount; i++) {
        const nextIndex = (currentIndex + i) % totalItems;
        if (nextIndex === currentIndex) break;
-    await SlideCreator.createSlideForItemId(itemId);
+        const itemId = STATE.slideshow.itemIds[nextIndex];
        if (!preloadedIds.has(itemId)) {
             preloadedIds.add(itemId);
             SlideCreator.createSlideForItemId(itemId);
        }
    }
-    if (preloadCount > 1) {
+    // Preload previous slides
-      const prevIndex = (currentIndex - 1 + totalItems) % totalItems;
+    for (let i = 1; i <= preloadCount; i++) {
-      const prevItemId = STATE.slideshow.itemIds[prevIndex];
+        const prevIndex = (currentIndex - i + totalItems) % totalItems;
        if (prevIndex === currentIndex) break;
-      SlideCreator.createSlideForItemId(prevItemId);
+        const prevItemId = STATE.slideshow.itemIds[prevIndex];
        if (!preloadedIds.has(prevItemId)) {
             preloadedIds.add(prevItemId);
             SlideCreator.createSlideForItemId(prevItemId);
        }
    }
  },
@@ -2431,12 +2610,18 @@ const SlideshowManager = {
  pruneSlideCache() {
    const currentIndex = STATE.slideshow.currentSlideIndex;
    const keepRange = 5;
    let prunedAny = false;
    Object.keys(STATE.slideshow.createdSlides).forEach((itemId) => {
      const index = STATE.slideshow.itemIds.indexOf(itemId);
      if (index === -1) return;
-      const distance = Math.abs(index - currentIndex);
+      const totalItems = STATE.slideshow.itemIds.length;
      let distance = Math.abs(index - currentIndex);
      if (totalItems > keepRange * 2) {
          distance = Math.min(distance, totalItems - distance);
      }
      if (distance > keepRange) {
        // Destroy video player if exists
        if (STATE.slideshow.videoPlayers[itemId]) {
@@ -2455,10 +2640,25 @@ const SlideshowManager = {
        if (slide) slide.remove();
        delete STATE.slideshow.createdSlides[itemId];
        prunedAny = true;
        console.log(`Pruned slide ${itemId} at distance ${distance} from view`);
      }
    });
    if (prunedAny) {
      const isTvMode = (window.layoutManager && window.layoutManager.tv) ||
        document.documentElement.classList.contains('layout-tv') ||
        document.body.classList.contains('layout-tv');
      if (isTvMode) {
        setTimeout(() => {
          const container = document.getElementById("slides-container");
          if (container && container.style.display !== 'none') {
            container.focus({ preventScroll: true });
          }
        }, 0);
      }
    }
  },
  toggleMute() {
@@ -2606,14 +2806,16 @@ const SlideshowManager = {
      });
    }
-    // 2. Pause all HTML5 videos
+    // 2. Stop and mute all HTML5 videos
    const container = document.getElementById("slides-container");
    if (container) {
      container.querySelectorAll('video').forEach(video => {
        try {
          video.pause();
          video.muted = true;
          video.currentTime = 0;
        } catch (e) {
-          console.warn("Error pausing HTML5 video:", e);
+          console.warn("Error stopping HTML5 video:", e);
        }
      });
    }
@@ -2631,18 +2833,24 @@ const SlideshowManager = {
    const currentSlide = document.querySelector(`.slide[data-item-id="${currentItemId}"]`);
    if (!currentSlide) return;
-    // 1. Try YouTube Player
+    // YouTube player: just resume, don't reload
-    const ytPlayer = STATE.slideshow.videoPlayers[currentItemId];
+    const ytPlayer = STATE.slideshow.videoPlayers?.[currentItemId];
    if (ytPlayer && typeof ytPlayer.playVideo === 'function') {
      if (STATE.slideshow.isMuted) {
        if (typeof ytPlayer.mute === 'function') ytPlayer.mute();
      } else {
        if (typeof ytPlayer.unMute === 'function') ytPlayer.unMute();
        if (typeof ytPlayer.setVolume === 'function') ytPlayer.setVolume(40);
      }
      ytPlayer.playVideo();
      return;
    }
-    // 2. Try HTML5 Video
+    // HTML5 video: just resume, don't reset currentTime
-    const html5Video = currentSlide.querySelector('video');
+    const html5Video = currentSlide.querySelector('video.video-backdrop');
    if (html5Video) {
-      if (STATE.slideshow.isMuted) {
+      html5Video.muted = STATE.slideshow.isMuted;
-        html5Video.muted = true;
+      if (!STATE.slideshow.isMuted) html5Video.volume = 0.4;
      }
      html5Video.play().catch(e => console.warn("Error resuming HTML5 video:", e));
    }
  },
@@ -2790,22 +2998,96 @@ const SlideshowManager = {
  },
  /**
-   * Parses custom media IDs, handling seasonal content if enabled
+   * Parses custom media IDs, handling seasonal content if enabled.
   * If Seasonal Content is enabled:
   *  - Check if any defined season matches the current date.
   *  - If match: Return IDs from that season.
   *  - If NO match: Fall back to Default Custom IDs.
   * If Custom Media IDs are enabled (and no seasonal match):
   *  - Return Default Custom IDs.
   * If no Custom Media IDs are enabled:
   *  - Return empty array (triggering random fallback).
   * @returns {string[]} Array of media IDs
   */
  parseCustomIds() {
-    if (!CONFIG.enableSeasonalContent) {
+    let idsString = CONFIG.customMediaIds;
-    return CONFIG.customMediaIds
+    let usingSeasonal = false;
-      .split(/[\n,]/).map((line) => {
+
    if (CONFIG.enableSeasonalContent) {
      try {
        const sections = JSON.parse(CONFIG.seasonalSections || "[]");
        const currentDate = new Date();
        const currentMonth = currentDate.getMonth() + 1; // 1-12
        const currentDay = currentDate.getDate(); // 1-31
        for (const section of sections) {
           const startDay = parseInt(section.StartDay);
           const startMonth = parseInt(section.StartMonth);
           const endDay = parseInt(section.EndDay);
           const endMonth = parseInt(section.EndMonth);
           let isInRange = false;
           if (startMonth === endMonth) {
             if (currentMonth === startMonth && currentDay >= startDay && currentDay <= endDay) {
               isInRange = true;
             }
           } else if (startMonth < endMonth) {
             // Normal range
             if (
               (currentMonth > startMonth && currentMonth < endMonth) ||
               (currentMonth === startMonth && currentDay >= startDay) ||
               (currentMonth === endMonth && currentDay <= endDay)
             ) {
               isInRange = true;
             }
           } else {
             // Wrap around year
             if (
               (currentMonth > startMonth || currentMonth < endMonth) ||
               (currentMonth === startMonth && currentDay >= startDay) ||
               (currentMonth === endMonth && currentDay <= endDay)
             ) {
               isInRange = true;
             }
           }
           if (isInRange) {
             console.log(`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);
      }
    }
    // If NOT using seasonal content (disabled or no match), 
    // Custom IDs are disabled, return empty to skip to random
    if (!usingSeasonal && !CONFIG.enableCustomMediaIds) {
        return [];
    }
    // Parse the resulting string (either seasonal or default)
    if (!idsString) return [];
    return idsString
      .split(/[\n,]/)
      .map((line) => {
        const urlMatch = line.match(/\[(.*?)\]/);
        let id = line;
        if (urlMatch) {
            const url = urlMatch[1];
            // Remove the [url] part from the ID string for parsing
            id = line.replace(/\[.*?\]/, '').trim();
            // Attempt to extract GUID if present
            const guidMatch = id.match(/([0-9a-f]{32})/i);
            if (guidMatch) {
                id = guidMatch[1];
            } else {
                // Fallback: split by pipe if used
                id = id.split('|')[0].trim();
            }
            STATE.slideshow.customTrailerUrls[id] = url;
@@ -2814,83 +3096,6 @@ const SlideshowManager = {
      }) 
      .map((id) => id.trim())
      .filter((id) => id);
    } else {
      return this.parseSeasonalIds();
    }
  },
  /**
   * Parses custom media IDs, handling seasonal content if enabled
   * @returns {string[]} Array of media IDs
   */
  parseSeasonalIds() {
    console.log("Using Seasonal Content Mode");
    const lines = CONFIG.customMediaIds.split('\n');
    const currentDate = new Date();
    const currentMonth = currentDate.getMonth() + 1; // 1-12
    const currentDay = currentDate.getDate(); // 1-31
    const rawIds = [];
    for (const line of lines) {
      const match = line.match(/^\s*(\d{1,2})\.(\d{1,2})-(\d{1,2})\.(\d{1,2})\s*\|.*\|(.*)$/) ||
        line.match(/^\s*(\d{1,2})\.(\d{1,2})-(\d{1,2})\.(\d{1,2})\s*\|(.*)$/);
      if (match) {
        const startDay = parseInt(match[1]);
        const startMonth = parseInt(match[2]);
        const endDay = parseInt(match[3]);
        const endMonth = parseInt(match[4]);
        const idsPart = match[5];
        let isInRange = false;
        if (startMonth === endMonth) {
          if (currentMonth === startMonth && currentDay >= startDay && currentDay <= endDay) {
            isInRange = true;
          }
        } else if (startMonth < endMonth) {
          // Normal range spanning months (e.g. 15.06 - 15.08)
          if (
            (currentMonth > startMonth && currentMonth < endMonth) ||
            (currentMonth === startMonth && currentDay >= startDay) ||
            (currentMonth === endMonth && currentDay <= endDay)
          ) {
            isInRange = true;
          }
        } else {
          // Wrap around year (e.g. 01.12 - 15.01)
          if (
            (currentMonth > startMonth || currentMonth < endMonth) ||
            (currentMonth === startMonth && currentDay >= startDay) ||
            (currentMonth === endMonth && currentDay <= endDay)
          ) {
            isInRange = true;
          }
        }
        if (isInRange) {
          console.log(`Seasonal match found: ${line}`);
          const ids = idsPart.split(/[,]/).map(line => {
              const urlMatch = line.match(/\[(.*?)\]/);
              let id = line;
              if (urlMatch) {
                  const url = urlMatch[1];
                  id = line.replace(/\[.*?\]/, '').trim();
                  const guidMatch = id.match(/([0-9a-f]{32})/i);
                  if (guidMatch) {
                       id = guidMatch[1];
                  } else {
                       id = id.split('|')[0].trim();
                  }
                  STATE.slideshow.customTrailerUrls[id] = url;
              }
              return id.trim();
          }).filter(id => id);
          rawIds.push(...ids);
        }
      }
    }
    return rawIds;
  },
  /**
@@ -2932,10 +3137,10 @@ const SlideshowManager = {
          const children = await ApiUtils.fetchCollectionItems(id);
          finalIds.push(...children);
        } else if (item) {
-          finalIds.push(id);
+          finalIds.push({ Id: item.Id, Type: item.Type });
        }
      } catch (e) {
-        console.warn(`Error resolving item ${id}:`, e);
+        console.warn(`Error resolving item ${rawId}:`, e);
      }
    }
    return finalIds;
@@ -2950,10 +3155,41 @@ const SlideshowManager = {
      let itemIds = [];
      // 1. Try Custom Media/Collection IDs from Config & seasonal content
-      if (CONFIG.enableCustomMediaIds && CONFIG.customMediaIds) {
+      if (CONFIG.enableCustomMediaIds || CONFIG.enableSeasonalContent) {
        console.log("Using Custom Media IDs from configuration");
        const rawIds = this.parseCustomIds();
-        itemIds = await this.resolveCollectionsAndItems(rawIds);
+        const resolvedItems = await this.resolveCollectionsAndItems(rawIds);
        // Apply max items limit to custom IDs if enabled
        if (CONFIG.applyLimitsToCustomIds) {
            let movieCount = 0;
            let showCount = 0;
            let keptItems = [];
            for (const item of resolvedItems) {
                 if (keptItems.length >= CONFIG.maxItems) break;
                 if (item.Type === 'Movie') {
                     if (movieCount < CONFIG.maxMovies) {
                         movieCount++;
                         keptItems.push(item);
                     }
                 } else if (item.Type === 'Series' || item.Type === 'Season' || item.Type === 'Episode') { 
                     // Count Seasons/Episodes as TV Shows
                     if (showCount < CONFIG.maxTvShows) {
                         showCount++;
                         keptItems.push(item);
                     }
                 } else {
                     // Other types: count towards total only
                     keptItems.push(item);
                 }
            }
            itemIds = keptItems.map(i => i.Id);
            console.log(`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)
--- a/README.md
+++ b/README.md
@@ -20,11 +20,14 @@ This plugin is a fork and enhancement of the original [Media Bar by MakD](https:
  - [Configuration](#configuration)
    - [General Settings](#general-settings)
    - [Custom Content](#custom-content)
    - [Content Sorting](#content-sorting)
    - [Content Limits](#content-limits)
    - [Advanced Settings](#advanced-settings)
  - [Build The Plugin By Yourself](#build-the-plugin-by-yourself)
  - [Troubleshooting](#troubleshooting)
    - [Effects Not Showing](#effects-not-showing)
    - [Docker Permission Issues](#docker-permission-issues)
  - [Credits](#credits)
  - [Contributing](#contributing)
 ---
@@ -97,6 +100,9 @@ This plugin builds upon the original Media Bar with new capabilities and improve
        <summary>Have a look:</summary>
        <img width="513" height="575" alt="Client-Settings" src="https://github.com/user-attachments/assets/3e29a84f-f8ea-4b7b-b561-80493cb1535b" />
        </details>
    *   **Local Trailers Preference**: Option to prefer local trailers (from the media item) over online sources.
    *   **Content Sorting Options**: Sort content by various criteria such as PremiereDate, ProductionYear, Random, or Original order.
    *   **Client-Side Settings**: Allow users to override settings locally on their device.
 ### Core Features
 *   **Immersive Slideshow**: Rotates through your media library
@@ -104,6 +110,7 @@ This plugin builds upon the original Media Bar with new capabilities and improve
 *   **Direct Play**: Click "Play" to start watching immediately
 *   **Details View**: Click "Info" to jump to the item's detail page
 *   **Add To Favorites**: Click the heart to add the item to your favorites
 *   **Customize**: Change the plugins behavior through the Jellyfin admin panel
 ## Installation
@@ -155,21 +162,48 @@ Configure the plugin via **Dashboard** > **Plugins** > **Media Bar Enhanced**.
 Define exactly what shows up in your bar.
 *   **Enable Custom Media IDs**: Restrict the slideshow to a specific list of IDs.
-    *   **Manual Trailer Override**: Add `[YouTube_URL]` after an ID to force a specific trailer.
+    *   **Manual Trailer Override**: Add `[YouTube_URL]` or `[Jellyfin_ID]` after an ID to force a specific trailer/video.
    *   Example ID: `a1b2c3d4e5... [https://www.youtube.com/watch?v=VIDEO_ID]`
    *   Example ID: `z1b2c3d4e5... [Jellyfin_ID]`
    *   **Example Mixed List**:
        ```
        a1b2c3d4e5f6...                         <-- Plays local item video
        6bdu812812hd... [https://youtu.be/...]  <-- Item metadata + Custom YouTube Trailer
        12h44h124sf7... [hdc78127z4ff...]       <-- Item metadata + Custom Jellyfin Trailer/Video etc.
        ```
    *   Example Collection Name: `Halloween Collection [https://...] | My Description` (Note: Use `|` to separate description from name if using a name instead of an ID)
 *   **Apply Limits to Custom IDs**: If enabled, the "Content Limits" (see below) will also apply to your Custom Media IDs list. By default, custom lists show all listed items regardless of limits.
 *   **Enable Seasonal Content Mode**: Advanced date-based scheduling.
-    *   Format: `DD.MM-DD.MM | Name | ID1, ID2, ID3`
+    *   **GUI Configuration**: You can easily add "Seasons" via the **Add Season** button.
-    *   Example: `20.10-31.10 | Halloween | <ID_OF_HALLOWEEN_COLLECTION>`
+    *   **Active Period**: Select the Start and End Day/Month for each season.
-    *   If the current date matches a range, those IDs are used. Otherwise, it defaults to standard behavior or the Custom Media IDs list.
+    *   **Media IDs**: Enter the Comma-separated list of IDs (Movies, Series, Collections) for that season.
    *   **Priority**: If the current date matches a defined season, those IDs are used. If multiple seasons overlap, the first matching one is used. If no season matches, it falls back to the Default Custom Media IDs.
 **How to get IDs:**
 Check the URL of an item in the web interface:
 `.../web/#/details?id=YOUR_ITEM_ID_HERE&...`
 ### Content Sorting
 Customize the order of slides in the Media Bar.
 *   **Sort By**: Choose criteria like *Random*, *Premiere Date*, *Production Year*, *Critic Rating*, *Community Rating*, *Name*, or *Runtime*.
 *   **Sort Order**: Ascending or Descending.
 *   **Note**: Sorting applies to both server-fetched content AND Custom Media IDs. Select **Original** to preserve the exact order of your Custom Media IDs list.
 ### Content Limits
 Fine-tune performance by limiting the number of items fetched from the server.
 *   **Total Max Items**: Maximum total items to fetch (combined).
 *   **Max Movies**: Maximum movies to include (for random selection).
 *   **Max Tv Shows**: Maximum TV shows to include (for random selection).
 *   **Preload Count**: Number of slides to preload for smooth transitions.
    *   *Intelligent Preloading*: The plugin uses a safe preloading strategy that respects this count but handles small lists gracefully to avoid playback issues.
 *   **Max Pagination Dots**: Maximum number of dots to show. If exceeded, it switches to a counter (e.g., 1/20).
 ### Advanced Settings
 *   **Slide Animations**: Enable/disable the "Zoom In" effect.
 *   **Use SponsorBlock**: Skips non-content segments in YouTube trailers (if the data exists).
 *   **Preferred YouTube Quality**: Select your preferred resolution (*Auto*, *Maximum*, *1080p*, *720p*).
 *   **Start Muted**: Videos start without sound (user can unmute).
 *   **Full Width Video**: Stretches video to cover the entire width (good for desktop, crop on mobile).
 *   **Enable Loading Screen**: Enable/disable the loading indicator while the bar initializes.
@@ -244,6 +278,12 @@ volumes:
  - /path/to/jellyfin/config/index.html:/jellyfin/jellyfin-web/index.html
 ```
 ## Credits
 This project is based on the original [Jellyfin Media Bar by MakD](https://github.com/MakD/Jellyfin-Media-Bar) and incorporates concepts from [IAmParadox27's plugin fork](https://github.com/IAmParadox27/jellyfin-plugin-media-bar). Thanks for their work!
 Also, special thanks to IAmParadox27 for the [File Transformation plugin](https://github.com/IAmParadox27/jellyfin-plugin-file-transformation) which this plugin can optionally use for improved Docker compatibility.
 ## Contributing
 Feel free to contribute to this project by creating pull requests or reporting issues.
--- a/manifest.json
+++ b/manifest.json
@@ -8,13 +8,45 @@
    "category": "General",
    "imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
    "versions": [
      {
        "version": "1.6.2.1",
        "changelog": "- feat: add options for local backdrops (theme videos) support and randomization features for local trailer/backdrops if more than one is available\n- feat: add option to include watched content in the random selection",
        "targetAbi": "10.11.0.0",
        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.2.1/Jellyfin.Plugin.MediaBarEnhanced.zip",
        "checksum": "8d789cefb9d95a8e1ff25e7963736fd1",
        "timestamp": "2026-02-14T23:52:43Z"
      },
      {
        "version": "1.6.1.32",
        "changelog": "- feat: add seasonal UI logic\n- add option to also set the limits for custom ids\n- fix tv mode scroll issue\n- smaller fixes and improvements",
        "targetAbi": "10.11.0.0",
        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.1.32/Jellyfin.Plugin.MediaBarEnhanced.zip",
        "checksum": "e196fd393ef0bcf51f8ce535103f1811",
        "timestamp": "2026-02-14T16:34:32Z"
      },
      {
        "version": "1.6.0.2",
        "changelog": "- add local trailer support on trailer button\nfix: iOS/MacOS playback issue?",
        "targetAbi": "10.11.0.0",
        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.0.2/Jellyfin.Plugin.MediaBarEnhanced.zip",
        "checksum": "cdd0208f8cc4f4b04f50e7138e508370",
        "timestamp": "2026-02-10T22:07:33Z"
      },
      {
        "version": "1.5.1.3",
        "changelog": "- fix: iOS/MacOS playback issue?",
        "targetAbi": "10.11.0.0",
        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.5.1.3/Jellyfin.Plugin.MediaBarEnhanced.zip",
        "checksum": "9d9dbed453673d4b78acf2adaaaee126",
        "timestamp": "2026-02-10T20:12:59Z"
      },
      {
        "version": "1.5.0.28",
-        "changelog": "- fix: Keyboard controls in TV mode\n- Add sorting options for content\n- Update mediaBarEnhanced.js and mediaBarEnhanced.css with version 4.0.1 from original repo",
+        "changelog": "- fix: Keyboard controls in TV mode\n- Add sorting options for content\n- Add local trailer support\n- fix performance issue\n- Update mediaBarEnhanced.js and mediaBarEnhanced.css with version 4.0.1 from upstream repo",
        "targetAbi": "10.11.0.0",
        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.5.0.28/Jellyfin.Plugin.MediaBarEnhanced.zip",
-        "checksum": "3f5f50a4de348ad4626920516fe4cd39",
+        "checksum": "0261ff27be18d48cefa5078706954240",
-        "timestamp": "2026-02-10T00:22:00Z"
+        "timestamp": "2026-02-10T00:35:41Z"
      },
      {
        "version": "1.3.0.3",
--- a/test_scripts/check_backdrop_fields.js
+++ b/test_scripts/check_backdrop_fields.js
@@ -0,0 +1,116 @@
 (async () => {
    // 1. Initialisierung
    const apiClient = window.ApiClient;
    if (!apiClient) {
        console.error("❌ ApiClient nicht gefunden. Bitte in der Browser-Konsole einer Jellyfin-Seite ausführen.");
        return;
    }
    // 2. Item ID abfragen oder festlegen
    let itemId = prompt("Bitte die Item ID eingeben (von einem Film/Serie mit Theme Video/Backdrop Video):");
    if (!itemId) {
        console.warn("Keine Item ID eingegeben. Abbruch.");
        return;
    }
    itemId = itemId.trim();
    const userId = apiClient.getCurrentUserId();
    console.log(`%c🔍 Untersuche Item: ${itemId}`, "color: #00a4dc; font-size: 1.2em; font-weight: bold;");
    // 3. Helper Funktion für Fetch requests
    const fetchJson = async (url) => {
        try {
            const res = await fetch(url, {
                headers: {
                    'Authorization': `MediaBrowser Client="Jellyfin Web", Device="Browser", DeviceId="${apiClient.deviceId()}", Version="${apiClient.appVersion()}", Token="${apiClient.accessToken()}"`
                }
            });
            if (res.ok) return await res.json();
            console.warn(`⚠️ Request fehlgeschlagen: ${url} (${res.status})`);
            return null;
        } catch (e) {
            console.error(`❌ Fehler bei Request: ${url}`, e);
            return null;
        }
    };
    // ---------------------------------------------------------
    // TEST 1: Standard Item Details mit erweiterten Feldern
    // ---------------------------------------------------------
    console.group("1. Standard Item Details (mit Fields)");
    const fields = "Overview,RemoteTrailers,MediaSources,LocalTrailerCount,ThemeVideoIds,ThemeSongIds";
    const itemDetailsUrl = `${apiClient.serverAddress()}/Users/${userId}/Items/${itemId}?Fields=${fields}`;
    const item = await fetchJson(itemDetailsUrl);
    if (item) {
        console.log("Name:", item.Name);
        console.log("ThemeVideoIds:", item.ThemeVideoIds);
        console.log("ThemeSongIds:", item.ThemeSongIds);
        console.log("LocalTrailerCount:", item.LocalTrailerCount);
        console.log("RemoteTrailers:", item.RemoteTrailers);
        if (item.ThemeVideoIds && item.ThemeVideoIds.length > 0) {
            console.log(`%c✅ ThemeVideoIds gefunden: ${item.ThemeVideoIds.length}`, "color: green; font-weight: bold;");
        } else {
             console.log(`%c❌ Keine ThemeVideoIds im Item-Objekt.`, "color: orange;");
        }
    }
    console.groupEnd();
    // ---------------------------------------------------------
    // TEST 2: ThemeMedia Endpoint
    // ---------------------------------------------------------
    console.group("2. Endpoint: /Items/{Id}/ThemeMedia");
    const themeMediaUrl = `${apiClient.serverAddress()}/Items/${itemId}/ThemeMedia?userId=${userId}`;
    const themeMedia = await fetchJson(themeMediaUrl);
    if (themeMedia) {
        console.dir(themeMedia);
        if (themeMedia.ThemeVideos && themeMedia.ThemeVideos.length > 0) {
            console.log(`%c✅ ThemeVideos gefunden: ${themeMedia.ThemeVideos.length}`, "color: green; font-weight: bold;");
            themeMedia.ThemeVideos.forEach(v => console.log(`   - ID: ${v.Id}, Name: ${v.Name}, Path: ${v.Path}`));
        } else {
            console.log("❌ Keine ThemeVideos in ThemeMedia gefunden.");
        }
    }
    console.groupEnd();
    // ---------------------------------------------------------
    // TEST 3: ThemeVideos Endpoint (Spezifisch)
    // ---------------------------------------------------------
    console.group("3. Endpoint: /Items/{Id}/ThemeVideos");
    // Manchmal auch unter Users/{UserId}/Items/{Id}/ThemeVideos
    const themeVideosUrl = `${apiClient.serverAddress()}/Items/${itemId}/ThemeVideos?userId=${userId}`;
    const themeVideos = await fetchJson(themeVideosUrl);
    if (themeVideos) {
        // Kann Array oder Objekt mit Items sein
        const videos = Array.isArray(themeVideos) ? themeVideos : (themeVideos.Items || []);
        console.dir(videos);
        if (videos.length > 0) {
             console.log(`%c✅ ThemeVideos Endpoint lieferte Ergebnisse: ${videos.length}`, "color: green; font-weight: bold;");
        } else {
             console.log("❌ ThemeVideos Endpoint lieferte leeres Array.");
        }
    }
    console.groupEnd();
    // ---------------------------------------------------------
    // TEST 4: LocalTrailers Endpoint
    // ---------------------------------------------------------
    console.group("4. Endpoint: /Items/{Id}/LocalTrailers");
    const localTrailersUrl = `${apiClient.serverAddress()}/Users/${userId}/Items/${itemId}/LocalTrailers`;
    const localTrailers = await fetchJson(localTrailersUrl);
    if (localTrailers && localTrailers.length > 0) {
        console.log(`%cℹ️ LocalTrailers gefunden: ${localTrailers.length}`, "color: blue;");
        console.dir(localTrailers);
    } else {
        console.log("❌ Keine LocalTrailers gefunden.");
    }
    console.groupEnd();
    console.log("%cFertig.", "font-weight: bold;");
 })();
--- a/test_scripts/fetch_specific_items_with_fields.js
+++ b/test_scripts/fetch_specific_items_with_fields.js
@@ -0,0 +1,37 @@
 (async () => {
    const apiClient = window.ApiClient;
    if (!apiClient) {
        console.error("ApiClient nicht gefunden.");
        return;
    }
    const itemId = "DEINE_ITEM_ID_HIER";
    const userId = apiClient.getCurrentUserId();
    const fields = "Overview,RemoteTrailers,Genres,CommunityRating,CriticRating,OfficialRating,PremiereDate,ProductionYear,MediaSources,RunTimeTicks,LocalTrailerCount,ThemeVideoIds";
    try {
        console.log(`Rufe erweiterte Details für Item ${itemId} ab...`);
        const url = apiClient.getUrl(`Users/${userId}/Items/${itemId}`, {
            Fields: fields
        });
        const item = await apiClient.getJSON(url);
        if (item) {
            console.log(`%cErgebnis für: ${item.Name}`, "color: #00a4dc; font-weight: bold;");
            console.log("Remote Trailer:", item.RemoteTrailers);
            console.log("Local Trailer Count:", item.LocalTrailerCount);
            console.log("Media Sources:", item.MediaSources);
            console.log("ThemeVideos:", item.ThemeVideoIds);
            console.dir(item);
        } else {
            console.warn("Item konnte nicht gefunden werden.");
        }
    } catch (error) {
        console.error("Fehler beim Abrufen des Items:", error);
    }
 })();