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

.gitea/workflows/release_automation.yml

@@ -186,79 +186,79 @@ jobs:
           fi
 
       # Update Message in Seasonals Repository
-      - name: Checkout Seasonal Manifest Repo
-        uses: actions/checkout@v6
-        with:
-          repository: ${{ github.repository_owner }}/Jellyfin-Seasonals-Plugin
-          path: seasonal-manifest
-          token: ${{ secrets.JELLYFIN_PLUGIN_MANIFEST_UPDATER_PAT }}
+      # - name: Checkout Seasonal Manifest Repo
+      #   uses: actions/checkout@v6
+      #   with:
+      #     repository: ${{ github.repository_owner }}/Jellyfin-Seasonals-Plugin
+      #     path: seasonal-manifest
+      #     token: ${{ secrets.JELLYFIN_PLUGIN_MANIFEST_UPDATER_PAT }}
 
-      - name: Update Seasonal Manifest
-        shell: bash
-        run: |
-            cd seasonal-manifest
+      # - name: Update Seasonal Manifest
+      #   shell: bash
+      #   run: |
+      #       cd seasonal-manifest
             
-            REPO_OWNER="${{ github.repository_owner }}"
-            REPO_NAME="${{ github.event.repository.name }}"
+      #       REPO_OWNER="${{ github.repository_owner }}"
+      #       REPO_NAME="${{ github.event.repository.name }}"
             
-            # 1. Get info from previous steps
-            VERSION="${{ env.VERSION }}"
-            HASH="${{ env.ZIP_HASH }}"
-            TIME="${{ env.BUILD_TIME }}"
-            DOWNLOAD_URL="https://git.mahom03-spacecloud.de/$REPO_OWNER/$REPO_NAME/releases/download/v$VERSION/Jellyfin.Plugin.MediaBarEnhanced.zip"
+      #       # 1. Get info from previous steps
+      #       VERSION="${{ env.VERSION }}"
+      #       HASH="${{ env.ZIP_HASH }}"
+      #       TIME="${{ env.BUILD_TIME }}"
+      #       DOWNLOAD_URL="https://git.mahom03-spacecloud.de/$REPO_OWNER/$REPO_NAME/releases/download/v$VERSION/Jellyfin.Plugin.MediaBarEnhanced.zip"
             
-            # 2. Get info from env
-            PLUGIN_GUID="${{ env.PLUGIN_GUID }}"
-            CHANGELOG="${{ env.CHANGELOG }}"
-            TARGET_ABI="${{ env.TARGET_ABI }}"
+      #       # 2. Get info from env
+      #       PLUGIN_GUID="${{ env.PLUGIN_GUID }}"
+      #       CHANGELOG="${{ env.CHANGELOG }}"
+      #       TARGET_ABI="${{ env.TARGET_ABI }}"
             
-            echo "Updating Seasonal Manifest for Plugin GUID: $PLUGIN_GUID"
+      #       echo "Updating Seasonal Manifest for Plugin GUID: $PLUGIN_GUID"
             
-            # 3. Update/Prepend entry in seasonal manifest.json
-            # Logic:
-            # - If array is empty or new version != old version: PREPEND new entry
-            # - If new version == old version: OVERWRITE (update) existing entry (re-release)
+      #       # 3. Update/Prepend entry in seasonal manifest.json
+      #       # Logic:
+      #       # - If array is empty or new version != old version: PREPEND new entry
+      #       # - If new version == old version: OVERWRITE (update) existing entry (re-release)
             
-            jq --arg guid "$PLUGIN_GUID" \
-               --arg hash "$HASH" \
-               --arg time "$TIME" \
-               --arg url "$DOWNLOAD_URL" \
-               --arg ver "$VERSION" \
-               --arg changelog "$CHANGELOG" \
-               --arg abi "$TARGET_ABI" \
-               'map(if .guid == $guid then 
-                  if .versions[0].version != $ver then
-                      # New Version -> Prepend
-                      .versions = [{
-                        "version": $ver,
-                        "changelog": $changelog,
-                        "targetAbi": $abi,
-                        "sourceUrl": $url,
-                        "checksum": $hash,
-                        "timestamp": $time
-                      }] + .versions
-                  else
-                      # Same Version -> Update existing (overwrite top)
-                      .versions[0].changelog = $changelog |
-                      .versions[0].targetAbi = $abi |
-                      .versions[0].sourceUrl = $url |
-                      .versions[0].checksum = $hash |
-                      .versions[0].timestamp = $time
-                  end
-                else . end)' \
-               manifest.json > manifest.json.tmp && mv manifest.json.tmp manifest.json
+      #       jq --arg guid "$PLUGIN_GUID" \
+      #          --arg hash "$HASH" \
+      #          --arg time "$TIME" \
+      #          --arg url "$DOWNLOAD_URL" \
+      #          --arg ver "$VERSION" \
+      #          --arg changelog "$CHANGELOG" \
+      #          --arg abi "$TARGET_ABI" \
+      #          'map(if .guid == $guid then 
+      #             if .versions[0].version != $ver then
+      #                 # New Version -> Prepend
+      #                 .versions = [{
+      #                   "version": $ver,
+      #                   "changelog": $changelog,
+      #                   "targetAbi": $abi,
+      #                   "sourceUrl": $url,
+      #                   "checksum": $hash,
+      #                   "timestamp": $time
+      #                 }] + .versions
+      #             else
+      #                 # Same Version -> Update existing (overwrite top)
+      #                 .versions[0].changelog = $changelog |
+      #                 .versions[0].targetAbi = $abi |
+      #                 .versions[0].sourceUrl = $url |
+      #                 .versions[0].checksum = $hash |
+      #                 .versions[0].timestamp = $time
+      #             end
+      #           else . end)' \
+      #          manifest.json > manifest.json.tmp && mv manifest.json.tmp manifest.json
                
-      - name: Commit and Push Seasonal Manifest
-        run: |
-          cd seasonal-manifest
-          git config user.name "CodeDevMLH"
-          git config user.email "145071728+CodeDevMLH@users.noreply.github.com"
+      # - name: Commit and Push Seasonal Manifest
+      #   run: |
+      #     cd seasonal-manifest
+      #     git config user.name "CodeDevMLH"
+      #     git config user.email "145071728+CodeDevMLH@users.noreply.github.com"
           
-          # Check if there are changes
-          if [[ -n $(git status -s) ]]; then
-            git add manifest.json
-            git commit -m "Auto-Update MediaBar Enhanced to v${{ env.VERSION }}"
-            git push
-          else
-            echo "No changes to seasonal manifest."
-          fi
+      #     # Check if there are changes
+      #     if [[ -n $(git status -s) ]]; then
+      #       git add manifest.json
+      #       git commit -m "Auto-Update MediaBar Enhanced to v${{ env.VERSION }}"
+      #       git push
+      #     else
+      #       echo "No changes to seasonal manifest."
+      #     fi

.github/workflows/release_automation.yml

@@ -222,79 +222,79 @@ jobs:
           fi
 
       # Update Message in Seasonals Repository
-      - name: Checkout Seasonal Manifest Repo
-        uses: actions/checkout@v6
-        with:
-          repository: ${{ github.repository_owner }}/Jellyfin-Seasonals
-          path: seasonal-manifest
-          token: ${{ secrets.JELLYFIN_PLUGIN_MANIFEST_UPDATER_PAT }}
+      # - name: Checkout Seasonal Manifest Repo
+      #   uses: actions/checkout@v6
+      #   with:
+      #     repository: ${{ github.repository_owner }}/Jellyfin-Seasonals
+      #     path: seasonal-manifest
+      #     token: ${{ secrets.JELLYFIN_PLUGIN_MANIFEST_UPDATER_PAT }}
 
-      - name: Update Seasonal Manifest
-        shell: bash
-        run: |
-            cd seasonal-manifest
+      # - name: Update Seasonal Manifest
+      #   shell: bash
+      #   run: |
+      #       cd seasonal-manifest
             
-            REPO_OWNER="${{ github.repository_owner }}"
-            REPO_NAME="${{ github.event.repository.name }}"
+      #       REPO_OWNER="${{ github.repository_owner }}"
+      #       REPO_NAME="${{ github.event.repository.name }}"
             
-            # 1. Get info from previous steps
-            VERSION="${{ env.VERSION }}"
-            HASH="${{ env.ZIP_HASH }}"
-            TIME="${{ env.BUILD_TIME }}"
-            DOWNLOAD_URL="https://github.com/$REPO_OWNER/$REPO_NAME/releases/download/v$VERSION/Jellyfin.Plugin.MediaBarEnhanced.zip"
+      #       # 1. Get info from previous steps
+      #       VERSION="${{ env.VERSION }}"
+      #       HASH="${{ env.ZIP_HASH }}"
+      #       TIME="${{ env.BUILD_TIME }}"
+      #       DOWNLOAD_URL="https://github.com/$REPO_OWNER/$REPO_NAME/releases/download/v$VERSION/Jellyfin.Plugin.MediaBarEnhanced.zip"
             
-            # 2. Get info from env
-            PLUGIN_GUID="${{ env.PLUGIN_GUID }}"
-            CHANGELOG="${{ env.CHANGELOG }}"
-            TARGET_ABI="${{ env.TARGET_ABI }}"
+      #       # 2. Get info from env
+      #       PLUGIN_GUID="${{ env.PLUGIN_GUID }}"
+      #       CHANGELOG="${{ env.CHANGELOG }}"
+      #       TARGET_ABI="${{ env.TARGET_ABI }}"
             
-            echo "Updating Seasonal Manifest for Plugin GUID: $PLUGIN_GUID"
+      #       echo "Updating Seasonal Manifest for Plugin GUID: $PLUGIN_GUID"
             
-            # 3. Update/Prepend entry in seasonal manifest.json
-            # Logic:
-            # - If array is empty or new version != old version: PREPEND new entry
-            # - If new version == old version: OVERWRITE (update) existing entry (re-release)
+      #       # 3. Update/Prepend entry in seasonal manifest.json
+      #       # Logic:
+      #       # - If array is empty or new version != old version: PREPEND new entry
+      #       # - If new version == old version: OVERWRITE (update) existing entry (re-release)
             
-            jq --arg guid "$PLUGIN_GUID" \
-               --arg hash "$HASH" \
-               --arg time "$TIME" \
-               --arg url "$DOWNLOAD_URL" \
-               --arg ver "$VERSION" \
-               --arg changelog "$CHANGELOG" \
-               --arg abi "$TARGET_ABI" \
-               'map(if .guid == $guid then 
-                  if .versions[0].version != $ver then
-                      # New Version -> Prepend
-                      .versions = [{
-                        "version": $ver,
-                        "changelog": $changelog,
-                        "targetAbi": $abi,
-                        "sourceUrl": $url,
-                        "checksum": $hash,
-                        "timestamp": $time
-                      }] + .versions
-                  else
-                      # Same Version -> Update existing (overwrite top)
-                      .versions[0].changelog = $changelog |
-                      .versions[0].targetAbi = $abi |
-                      .versions[0].sourceUrl = $url |
-                      .versions[0].checksum = $hash |
-                      .versions[0].timestamp = $time
-                  end
-                else . end)' \
-               manifest.json > manifest.json.tmp && mv manifest.json.tmp manifest.json
+      #       jq --arg guid "$PLUGIN_GUID" \
+      #          --arg hash "$HASH" \
+      #          --arg time "$TIME" \
+      #          --arg url "$DOWNLOAD_URL" \
+      #          --arg ver "$VERSION" \
+      #          --arg changelog "$CHANGELOG" \
+      #          --arg abi "$TARGET_ABI" \
+      #          'map(if .guid == $guid then 
+      #             if .versions[0].version != $ver then
+      #                 # New Version -> Prepend
+      #                 .versions = [{
+      #                   "version": $ver,
+      #                   "changelog": $changelog,
+      #                   "targetAbi": $abi,
+      #                   "sourceUrl": $url,
+      #                   "checksum": $hash,
+      #                   "timestamp": $time
+      #                 }] + .versions
+      #             else
+      #                 # Same Version -> Update existing (overwrite top)
+      #                 .versions[0].changelog = $changelog |
+      #                 .versions[0].targetAbi = $abi |
+      #                 .versions[0].sourceUrl = $url |
+      #                 .versions[0].checksum = $hash |
+      #                 .versions[0].timestamp = $time
+      #             end
+      #           else . end)' \
+      #          manifest.json > manifest.json.tmp && mv manifest.json.tmp manifest.json
                
-      - name: Commit and Push Seasonal Manifest
-        run: |
-          cd seasonal-manifest
-          git config user.name "CodeDevMLH"
-          git config user.email "145071728+CodeDevMLH@users.noreply.github.com"
+      # - name: Commit and Push Seasonal Manifest
+      #   run: |
+      #     cd seasonal-manifest
+      #     git config user.name "CodeDevMLH"
+      #     git config user.email "145071728+CodeDevMLH@users.noreply.github.com"
           
-          # Check if there are changes
-          if [[ -n $(git status -s) ]]; then
-            git add manifest.json
-            git commit -m "Auto-Update MediaBar Enhanced to v${{ env.VERSION }}"
-            git push
-          else
-            echo "No changes to seasonal manifest."
-          fi
+      #     # Check if there are changes
+      #     if [[ -n $(git status -s) ]]; then
+      #       git add manifest.json
+      #       git commit -m "Auto-Update MediaBar Enhanced to v${{ env.VERSION }}"
+      #       git push
+      #     else
+      #       echo "No changes to seasonal manifest."
+      #     fi

Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs

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

Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html

@@ -52,11 +52,19 @@
                             <label>
                                 <input is="emby-checkbox" type="checkbox" id="EnableVideoBackdrop"
                                     name="EnableVideoBackdrop" />
-                                <span>Enable Video Backdrops</span>
+                                <span>Enable Trailer Backdrops</span>
                             </label>
-                            <div class="fieldDescription">Show video trailers as background if available.<br>Adds a
+                            <div class="fieldDescription">Show trailers as background if available.<br>Adds a
                                 mute/unmute and pause/play button to control the video in the right top corner.</div>
                         </div>
+                        <div class="checkboxContainer checkboxContainer-withDescription" id="PreferLocalTrailersContainer">
+                            <label>
+                                <input is="emby-checkbox" type="checkbox" id="PreferLocalTrailers"
+                                    name="PreferLocalTrailers" />
+                                <span>Prefer Local Trailers</span>
+                            </label>
+                            <div class="fieldDescription">If enabled, local trailers will be preferred over remote (YouTube) trailers.</div>
+                        </div>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
                                 <input is="emby-checkbox" type="checkbox" id="WaitForTrailerToEnd"
@@ -69,7 +77,7 @@
                             <label>
                                 <input is="emby-checkbox" type="checkbox" id="EnableMobileVideo"
                                     name="EnableMobileVideo" />
-                                <span>Enable Mobile Video</span>
+                                <span>Enable Trailer On Mobile</span>
                             </label>
                             <div class="fieldDescription">Allow video playback on mobile devices.</div>
                         </div>
@@ -80,7 +88,7 @@
                                 <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.</div>
+                                trailer is not set as backdrop or if no trailer is available.</div>
                         </div>
                     </div>
 
@@ -153,8 +161,17 @@
                                     name="SlideAnimationEnabled" />
                                 <span>Enable Slide Animations</span>
                             </label>
-                            <div class="fieldDescription">Enable the zooming-in effect when a new slide is
-                                shown. Attention: This may cause performance issues on weaker client hardware.</div>
+                            <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>
@@ -221,15 +238,6 @@
                                 Space (pause), M (mute/unmute)) for
                                 the slideshow.</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 video backdrops) locally on their device.</div>
-                        </div>
 
                         <h2 class="sectionTitle">Time Settings</h2>
                         <p>Leave a setting blank to use the default value.</p>
@@ -274,6 +282,33 @@
                                 mobile).</div>
                         </div>
 
+                        <h2 class="sectionTitle">Content Sorting</h2>
+                        <div class="selectContainer">
+                            <label class="selectLabel" for="SortBy">Sort By</label>
+                            <select is="emby-select" id="SortBy" name="SortBy" class="emby-select-withcolor emby-select">
+                                <option value="Random">Random</option>
+                                <option value="Original">Original (Custom List Order)</option>
+                                <option value="PremiereDate">Premiere Date</option>
+                                <option value="ProductionYear">Production Year</option>
+                                <option value="CriticRating">Critic Rating</option>
+                                <option value="CommunityRating">Community Rating</option>
+                                <option value="Name">Name</option>
+                                <option value="Runtime">Runtime</option>
+                            </select>
+                            <div class="fieldDescription">Sort items by the selected criteria.</div>
+                        </div>
+                        <div class="selectContainer">
+                            <label class="selectLabel" for="SortOrder">Sort Order</label>
+                            <select is="emby-select" id="SortOrder" name="SortOrder" class="emby-select-withcolor emby-select">
+                                <option value="Ascending">Ascending</option>
+                                <option value="Descending">Descending</option>
+                            </select>
+                            <div class="fieldDescription">Sort items in Ascending or Descending order.</div>
+                        </div>
+                        <div class="fieldDescription" style="margin-bottom: 2em; color: #ffcc00;">
+                            <b>Note:</b> Sorting settings apply to both Server content and Custom IDs. 'Original' preserves Custom List order.
+                        </div>
+
                         <h2 class="sectionTitle">Content Limits</h2>
                         <p>Leave a setting blank to use the default value.</p>
                         <div class="inputContainer">
@@ -370,7 +405,8 @@
                             'WaitForTrailerToEnd', 'StartMuted', 'FullWidthVideo', 'EnableMobileVideo',
                             'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
                             'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
-                            'EnableSeasonalContent', 'EnableClientSideSettings'
+                            'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
+                            'PreferLocalTrailers'
                         ];
 
                         keys.forEach(function (key) {
@@ -404,6 +440,23 @@
                             updateDesc();
                         }
 
+                        // Handle Prefer Local Trailers visibility
+                        var enableVideoBackdropCheckbox = page.querySelector('#EnableVideoBackdrop');
+                        var preferLocalContainer = page.querySelector('#PreferLocalTrailersContainer');
+
+                        function updatePreferLocalVisibility() {
+                            if (enableVideoBackdropCheckbox && enableVideoBackdropCheckbox.checked) {
+                                if (preferLocalContainer) preferLocalContainer.style.display = 'block';
+                            } else {
+                                if (preferLocalContainer) preferLocalContainer.style.display = 'none';
+                            }
+                        }
+
+                        if (enableVideoBackdropCheckbox) {
+                            enableVideoBackdropCheckbox.addEventListener('change', updatePreferLocalVisibility);
+                            updatePreferLocalVisibility();
+                        }
+
                         Dashboard.hideLoadingMsg();
                     });
                 },
@@ -419,7 +472,8 @@
                         'WaitForTrailerToEnd', 'StartMuted', 'FullWidthVideo', 'EnableMobileVideo',
                         'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
                         'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
-                        'EnableSeasonalContent', 'EnableClientSideSettings'
+                        'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
+                        'PreferLocalTrailers'
                     ];
 
                     keys.forEach(function (key) {

Jellyfin.Plugin.MediaBarEnhanced/Jellyfin.Plugin.MediaBarEnhanced.csproj

@@ -12,7 +12,7 @@
     <!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
     <Title>Jellyfin Media Bar Enhanced Plugin</Title>
     <Authors>CodeDevMLH</Authors>
-    <Version>1.4.0.5</Version>
+    <Version>1.5.0.16</Version>
     <RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced</RepositoryUrl>
   </PropertyGroup>
 

Jellyfin.Plugin.MediaBarEnhanced/Web/assets/logo_SW_MINIMAL.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="100%"
+   viewBox="0 0 661 614"
+   enable-background="new 0 0 661 614"
+   xml:space="preserve"
+   sodipodi:docname="logo.svg"
+   inkscape:version="1.4.3 (0d15f75, 2025-12-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs6" /><sodipodi:namedview
+   id="namedview6"
+   pagecolor="#505050"
+   bordercolor="#eeeeee"
+   borderopacity="1"
+   inkscape:showpageshadow="0"
+   inkscape:pageopacity="0"
+   inkscape:pagecheckerboard="0"
+   inkscape:deskcolor="#505050"
+   inkscape:zoom="1.3925081"
+   inkscape:cx="330.33918"
+   inkscape:cy="307"
+   inkscape:window-width="1920"
+   inkscape:window-height="1057"
+   inkscape:window-x="1912"
+   inkscape:window-y="-8"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Layer_1" />
+
+<path
+   fill="#FFFFFF"
+   opacity="1.000000"
+   stroke="none"
+   d=" M327.000000,536.000000   C342.496460,536.000000 357.498688,536.258484 372.487610,535.922241   C385.664062,535.626770 398.866150,535.102905 411.983582,533.888245   C428.681671,532.341858 445.408508,530.610413 461.935608,527.840759   C481.796478,524.512451 501.467499,520.042786 521.199707,515.965698   C523.529053,515.484375 526.041382,514.803894 527.927551,513.457397   C534.700745,508.622009 542.319885,508.932159 550.045410,508.959991   C578.189880,509.061340 606.334900,509.000000 634.740234,509.000000   C637.186890,520.472595 639.957642,531.779480 636.933289,543.351501   C634.903503,551.117737 628.718933,555.934631 622.355957,559.773132   C608.164856,568.333984 592.050842,571.987366 576.187866,575.886841   C559.302490,580.037537 542.257751,583.610168 525.170837,586.844788   C514.799194,588.808228 504.204498,589.571716 493.731018,591.025574   C485.218262,592.207336 476.759888,593.799255 468.234467,594.866150   C460.604767,595.821045 452.927185,596.476501 445.251709,596.965637   C427.840851,598.075317 410.418152,598.998474 393.000580,600.003540   C387.415436,600.325806 381.835144,600.855774 376.246216,600.966370   C355.166992,601.383362 334.085815,601.853882 313.004028,601.930115   C300.255890,601.976196 287.500092,601.463989 274.757141,600.963013   C262.081879,600.464600 249.388809,600.007324 236.757446,598.910950   C221.974625,597.627930 207.229050,595.838806 192.505737,593.967224   C175.589020,591.816711 158.624741,589.840515 141.845245,586.863647   C122.976410,583.516113 104.227318,579.411011 85.549820,575.099731   C74.786339,572.615234 64.115028,569.507751 53.686581,565.866333   C45.305603,562.939758 36.992039,559.384155 30.888775,552.377869   C23.703732,544.129883 24.449305,534.207397 25.353891,524.421143   C25.793415,519.666260 27.276276,515.007690 28.352476,510.000000   C31.826927,510.000000 35.304031,510.000000 38.781136,510.000000   C64.774979,510.000000 90.768852,509.977386 116.762634,510.017090   C122.732361,510.026184 128.391159,510.172974 134.351212,512.686401   C143.412094,516.507568 153.202728,518.885010 162.889816,520.866455   C176.838547,523.719727 190.930084,525.975830 205.039062,527.917175   C219.893982,529.961182 234.816391,531.620972 249.755615,532.913391   C262.386749,534.006165 275.078796,534.468628 287.753540,534.962585   C300.662903,535.465698 313.584015,535.666687 327.000000,536.000000  z"
+   id="path2" />
+<path
+   fill="#FFFFFF"
+   opacity="1.000000"
+   stroke="none"
+   d=" M606.999634,140.000000   C616.128296,140.706787 625.146667,140.066467 633.298218,142.423615   C646.862671,146.345963 654.950256,156.523895 657.932922,170.401443   C658.647095,173.724014 658.955444,177.196487 658.957458,180.600327   C659.010925,271.765411 659.009338,362.930511 658.991943,454.095612   C658.988525,471.780304 647.686096,487.160645 629.451294,490.947906   C626.281982,491.606171 622.988159,491.957306 619.751709,491.958099   C427.255005,492.004913 234.758301,491.987091 42.261608,492.021698   C24.730577,492.024841 8.072522,479.153046 5.027515,461.896179   C4.492155,458.862152 4.043763,455.761963 4.042027,452.692047   C3.990298,361.193634 3.871316,269.694855 4.104546,178.197021   C4.153368,159.043365 16.296051,146.063629 33.331520,141.092468   C36.402164,140.196411 39.775433,140.042984 43.009106,140.042160   C230.839310,139.994934 418.669525,140.000000 606.999634,140.000000  M359.500000,157.000000   C289.517120,157.000000 219.534225,157.000000 149.551346,157.000000   C114.893280,157.000000 80.235199,156.980255 45.577160,157.011627   C34.607761,157.021545 24.557083,164.368423 22.403088,174.518036   C21.314177,179.648972 21.059866,185.035080 21.055122,190.306381   C20.977442,276.618225 21.132351,362.930573 20.868862,449.241699   C20.825279,463.518036 31.508949,474.175995 45.628529,474.158508   C236.414246,473.922333 427.200470,473.908447 617.986023,474.208954   C630.511597,474.228729 642.140198,463.677826 642.108398,450.146484   C641.898560,360.835785 642.000916,271.524384 641.999146,182.213196   C641.998840,166.797821 632.262817,157.001709 616.936340,157.001236   C531.457581,156.998657 445.978790,157.000000 359.500000,157.000000  z"
+   id="path3" />
+<path
+   fill="#FFFFFF"
+   opacity="1.000000"
+   stroke="none"
+   d=" M410.281616,93.782341   C415.291992,100.787689 420.140594,107.470741 424.713318,114.337517   C425.884766,116.096649 426.184479,118.436256 426.884674,120.509186   C424.913452,121.006126 422.942780,121.934616 420.970886,121.937248   C363.000671,122.014679 305.030334,122.011337 247.060028,121.969559   C243.859818,121.967247 240.659912,121.524078 236.054047,121.181580   C238.077652,116.962379 239.199081,113.266785 241.360825,110.339432   C254.448532,92.616531 267.699677,75.012611 281.049347,57.485538   C288.331970,47.924042 295.607147,38.325375 303.457062,29.236992   C310.346344,21.260773 318.726776,14.498528 329.750397,14.243196   C337.574341,14.061975 345.864899,15.756383 351.433380,22.105671   C364.247803,36.716980 376.755737,51.604027 389.124115,66.596909   C396.351105,75.357414 403.069855,84.537186 410.281616,93.782341  z"
+   id="path4" />
+<path
+   fill="#B9B9B9"
+   opacity="1.000000"
+   stroke="none"
+   d=" M360.000000,157.000000   C445.978790,157.000000 531.457581,156.998657 616.936340,157.001236   C632.262817,157.001709 641.998840,166.797821 641.999146,182.213196   C642.000916,271.524384 641.898560,360.835785 642.108398,450.146484   C642.140198,463.677826 630.511597,474.228729 617.986023,474.208954   C427.200470,473.908447 236.414246,473.922333 45.628529,474.158508   C31.508949,474.175995 20.825279,463.518036 20.868862,449.241699   C21.132351,362.930573 20.977442,276.618225 21.055122,190.306381   C21.059866,185.035080 21.314177,179.648972 22.403088,174.518036   C24.557083,164.368423 34.607761,157.021545 45.577160,157.011627   C80.235199,156.980255 114.893280,157.000000 149.551346,157.000000   C219.534225,157.000000 289.517120,157.000000 360.000000,157.000000  M265.000000,302.500000   C265.000000,329.638916 264.986816,356.777832 265.030060,383.916656   C265.032898,385.700653 265.134369,387.610443 265.756378,389.246338   C268.897522,397.507599 276.467865,400.490845 284.746582,395.464508   C301.954895,385.016602 318.697327,373.801392 335.631592,362.902100   C353.537262,351.377533 371.500580,339.941193 389.328918,328.298248   C400.978180,320.690613 400.993195,311.320953 389.382721,303.731628   C365.885529,288.372528 342.291901,273.160889 318.730255,257.900482   C307.365387,250.539673 296.161346,242.908707 284.556580,235.946579   C273.636658,229.395309 265.002625,234.531113 265.000702,247.055817   C264.997925,265.203888 265.000000,283.351929 265.000000,302.500000  z"
+   id="path5" />
+<path
+   fill="#FFFFFF"
+   opacity="1.000000"
+   stroke="none"
+   d=" M265.000000,302.000000   C265.000000,283.351929 264.997925,265.203888 265.000702,247.055817   C265.002625,234.531113 273.636658,229.395309 284.556580,235.946579   C296.161346,242.908707 307.365387,250.539673 318.730255,257.900482   C342.291901,273.160889 365.885529,288.372528 389.382721,303.731628   C400.993195,311.320953 400.978180,320.690613 389.328918,328.298248   C371.500580,339.941193 353.537262,351.377533 335.631592,362.902100   C318.697327,373.801392 301.954895,385.016602 284.746582,395.464508   C276.467865,400.490845 268.897522,397.507599 265.756378,389.246338   C265.134369,387.610443 265.032898,385.700653 265.030060,383.916656   C264.986816,356.777832 265.000000,329.638916 265.000000,302.000000  z"
+   id="path6" />
+</svg>

Jellyfin.Plugin.MediaBarEnhanced/Web/assets/logo_SW_SHORT.svg

@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="100%"
+   viewBox="0 0 1039 614"
+   enable-background="new 0 0 1039 614"
+   xml:space="preserve"
+   sodipodi:docname="MediaBar_logo_SW_mono_SHORT.svg"
+   inkscape:version="1.4.3 (0d15f75, 2025-12-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs10" /><sodipodi:namedview
+   id="namedview10"
+   pagecolor="#505050"
+   bordercolor="#eeeeee"
+   borderopacity="1"
+   inkscape:showpageshadow="0"
+   inkscape:pageopacity="0"
+   inkscape:pagecheckerboard="0"
+   inkscape:deskcolor="#505050"
+   inkscape:zoom="0.98465195"
+   inkscape:cx="383.3842"
+   inkscape:cy="268.62284"
+   inkscape:window-width="1920"
+   inkscape:window-height="1057"
+   inkscape:window-x="1912"
+   inkscape:window-y="-8"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Layer_1" />
+
+<path
+   fill="#FFFFFF"
+   opacity="1.000000"
+   stroke="none"
+   d=" M215.230072,518.448547   C216.097900,515.443542 216.766510,512.833374 217.492325,510.000000   C245.648331,510.000000 273.793915,510.000000 301.939484,510.000000   C302.939331,510.000000 303.955444,510.117462 304.936493,509.981628   C313.343964,508.817383 320.674316,511.954315 328.378204,514.797546   C337.342743,518.106018 346.869507,520.088257 356.294983,521.906006   C371.867737,524.909302 387.508484,527.647339 403.209564,529.868103   C414.376190,531.447510 425.675507,532.195068 436.940094,532.947632   C450.260864,533.837524 463.601135,534.604797 476.945160,534.939026   C499.188751,535.496155 521.441528,535.867615 543.691467,535.929138   C558.440735,535.969788 573.226501,535.846863 587.932678,534.857544   C603.060181,533.839905 618.131775,531.848083 633.189392,529.973938   C647.529541,528.189148 661.894775,526.424377 676.112915,523.888184   C692.549683,520.956238 709.140747,518.246887 724.096924,510.011292   C725.304810,509.346222 726.865112,509.043365 728.262390,509.041016   C759.918213,508.987732 791.574036,509.000031 823.689392,509.000031   C826.219116,520.269714 828.853699,531.504944 825.976807,543.085388   C823.978455,551.129578 817.664246,555.932556 811.155334,559.864441   C798.097412,567.752258 783.349731,571.421509 768.683411,574.911438   C753.177429,578.601196 737.558228,581.845886 721.920593,584.941956   C710.332214,587.236267 698.673035,589.250488 686.976013,590.896667   C675.032043,592.577637 663.003235,593.655762 651.011902,595.000488   C639.175720,596.327820 627.352295,597.784241 615.499207,598.937012   C609.108643,599.558533 602.671326,599.774353 596.248901,599.976440   C583.167419,600.388245 570.083069,600.730896 556.997620,600.985046   C536.915833,601.375183 516.833008,601.840393 496.749054,601.931274   C485.666565,601.981384 474.576111,601.445251 463.497986,600.969482   C450.989288,600.432373 438.468353,599.937683 425.993683,598.921692   C414.128784,597.955383 402.311890,596.381531 390.482666,594.999573   C376.571899,593.374573 362.627686,591.959412 348.777679,589.913574   C335.662842,587.976318 322.697510,585.027222 309.582977,583.087280   C290.888214,580.321899 272.677460,575.598938 254.744934,569.879639   C245.490875,566.928101 236.261154,563.377563 227.757507,558.744751   C219.453522,554.220642 213.865524,546.819397 214.043716,536.577576   C214.146606,530.662292 214.687256,524.754578 215.230072,518.448547  z"
+   id="path2" />
+<path
+   fill="#C8C8C8"
+   opacity="1.000000"
+   stroke="none"
+   d=" M174.078720,187.882538   C174.385803,189.408966 174.960938,190.935257 174.961624,192.461823   C174.999268,276.011963 174.988754,359.562103 174.453644,443.563446   C129.277191,444.009735 84.630196,444.013519 39.983231,443.993744   C29.198257,443.988983 21.325663,436.491302 21.028820,425.828705   C20.864725,419.934387 20.999969,414.031769 20.999973,408.132874   C21.000015,346.326721 21.001759,284.520538 20.990532,222.714386   C20.990231,221.055740 20.676064,219.383453 20.805677,217.740997   C21.238888,212.251480 20.492048,206.188721 22.610405,201.416809   C26.479988,192.699936 34.791191,189.113480 44.038651,189.075058   C85.519699,188.902679 127.001884,189.014496 168.483551,188.952637   C170.349152,188.949860 172.213684,188.255020 174.078720,187.882538  z"
+   id="path3" />
+<path
+   fill="#CACACA"
+   opacity="1.000000"
+   stroke="none"
+   d=" M866.159912,444.043640   C866.106628,442.882202 866.006592,441.720764 866.006592,440.559326   C866.004822,357.335419 866.010986,274.111511 866.546448,190.436707   C911.044739,189.990524 955.013000,189.989151 998.981323,190.020020   C1000.956421,190.021408 1003.010071,190.019989 1004.893005,190.522461   C1014.309570,193.035324 1019.999939,200.675659 1019.999939,210.526749   C1020.000000,281.309113 1019.990295,352.091492 1020.009766,422.873871   C1020.012939,434.589478 1011.696716,444.366974 999.061157,444.213806   C954.766541,443.676971 910.461243,444.029114 866.159912,444.043640  z"
+   id="path4" />
+<path
+   fill="#FFFFFF"
+   opacity="1.000000"
+   stroke="none"
+   d=" M642.000000,492.000000   C504.668976,492.000000 367.837982,492.007538 231.006973,491.990753   C213.329834,491.988586 197.742874,479.343262 194.068604,462.633972   C193.339264,459.317200 193.044693,455.840637 193.042694,452.437439   C192.989120,360.939026 192.856583,269.440186 193.117493,177.942459   C193.171539,158.983154 205.450027,145.812973 222.583267,141.079895   C225.673691,140.226166 229.030045,140.042664 232.263763,140.041870   C424.427155,139.995071 616.590576,140.032379 808.753967,139.947617   C827.057373,139.939545 843.486572,152.051819 846.960083,170.650864   C847.555481,173.839096 847.955994,177.117783 847.957886,180.354980   C848.010376,271.520081 847.995483,362.685181 848.003906,453.850311   C848.005554,471.728851 836.792358,486.961578 818.693909,490.930542   C815.376343,491.658081 811.900452,491.952789 808.497070,491.956573   C753.164734,492.017883 697.832397,492.000000 642.000000,492.000000  M408.500000,474.000000   C541.155823,474.000000 673.812073,473.849609 806.466797,474.234650   C819.614380,474.272797 831.175842,463.575836 831.134583,449.658783   C830.870544,360.666779 830.931946,271.673523 831.064148,182.680923   C831.087341,167.063034 820.378662,156.888992 805.397217,156.900894   C615.746033,157.051605 426.094727,157.000000 236.443451,157.000046   C235.443527,157.000046 234.429825,156.892563 233.445816,157.017914   C222.831177,158.369949 214.189850,163.378632 211.540894,174.189514   C210.374725,178.948914 210.065567,184.018188 210.060806,188.947449   C209.976807,275.940308 209.998886,362.933258 210.001083,449.926208   C210.001450,464.527679 219.366562,473.994415 233.819275,473.998169   C259.048828,474.004730 284.278412,474.000000 309.507965,474.000000   C342.171967,474.000000 374.835999,474.000000 408.500000,474.000000  z"
+   id="path5" />
+<path
+   fill="#FFFFFF"
+   opacity="1.000000"
+   stroke="none"
+   d=" M470.999268,56.008606   C478.080780,46.904430 484.917328,37.975853 492.243896,29.469269   C499.274078,21.306780 507.730499,14.547179 518.938110,14.236814   C526.245911,14.034445 534.043579,15.664103 539.490784,21.206964   C547.066956,28.916189 554.111450,37.174259 561.055176,45.472176   C569.831726,55.960323 578.543762,66.523552 586.798096,77.422142   C596.652222,90.432991 605.991638,103.833656 615.555847,117.064087   C617.796204,120.163223 615.770142,121.274780 613.182678,121.957214   C612.247803,122.203773 611.193848,121.999855 610.194275,121.999855   C550.384399,122.000015 490.574524,122.000038 430.764648,121.999641   C429.598450,121.999634 428.321289,122.302048 427.288483,121.929474   C424.932068,121.079414 423.416840,119.791931 425.460999,117.011757   C439.162445,98.377037 452.780548,79.681015 466.488373,61.051033   C467.757965,59.325569 469.464752,57.921833 470.999268,56.008606  z"
+   id="path6" />
+<path
+   fill="#FFFFFF"
+   opacity="1.000000"
+   stroke="none"
+   d=" M866.085632,444.503815   C910.461243,444.029114 954.766541,443.676971 999.061157,444.213806   C1011.696716,444.366974 1020.012939,434.589478 1020.009766,422.873871   C1019.990295,352.091492 1020.000000,281.309113 1019.999939,210.526749   C1019.999939,200.675659 1014.309570,193.035324 1004.893005,190.522461   C1003.010071,190.019989 1000.956421,190.021408 998.981323,190.020020   C955.013000,189.989151 911.044739,189.990524 866.618164,189.970871   C866.159912,185.154236 866.159912,180.352509 866.159912,175.219986   C867.653748,175.144806 869.092346,175.009506 870.530884,175.009140   C914.169250,174.997925 957.808472,174.851959 1001.445618,175.084991   C1015.605042,175.160599 1025.345459,182.384720 1032.258301,194.884445   C1035.300171,200.384384 1034.944214,205.512314 1034.949707,210.926346   C1035.024414,285.044891 1034.976929,359.163574 1035.034058,433.282135   C1035.040161,441.160797 1030.435303,446.713684 1025.517456,451.668091   C1017.754089,459.489075 1007.615479,461.114532 996.880737,461.070099   C955.241760,460.897766 913.601685,461.000000 871.961975,461.000000   C870.155457,461.000000 868.348877,461.000000 866.011292,461.000000   C866.011292,455.499420 866.011292,450.231689 866.085632,444.503815  z"
+   id="path7" />
+<path
+   fill="#FFFFFF"
+   opacity="1.000000"
+   stroke="none"
+   d=" M174.224472,187.493225   C172.213684,188.255020 170.349152,188.949860 168.483551,188.952637   C127.001884,189.014496 85.519699,188.902679 44.038651,189.075058   C34.791191,189.113480 26.479988,192.699936 22.610405,201.416809   C20.492048,206.188721 21.238888,212.251480 20.805677,217.740997   C20.676064,219.383453 20.990231,221.055740 20.990532,222.714386   C21.001759,284.520538 21.000015,346.326721 20.999973,408.132874   C20.999969,414.031769 20.864725,419.934387 21.028820,425.828705   C21.325663,436.491302 29.198257,443.988983 39.983231,443.993744   C84.630196,444.013519 129.277191,444.009735 174.382401,444.030182   C174.737961,448.729980 174.817245,453.430756 174.393692,458.085815   C174.298065,459.136627 172.588226,460.310577 171.366852,460.901947   C170.420822,461.359955 169.077637,460.999695 167.911011,460.999695   C125.078690,461.000061 82.245537,461.148987 39.414570,460.908203   C26.748209,460.837006 16.930914,455.100189 9.852262,444.182495   C6.592582,439.154968 5.933938,434.201477 5.940778,428.565857   C6.029986,355.067688 6.164409,281.568512 5.764170,208.072418   C5.720665,200.083664 9.208368,194.251083 13.163262,188.681961   C19.964035,179.105347 29.633146,174.772690 41.836056,174.866425   C85.991035,175.205673 130.150192,175.000000 175.168060,175.000000   C174.895874,179.129318 174.633041,183.116623 174.224472,187.493225  z"
+   id="path8" />
+<path
+   fill="#B9B9B9"
+   opacity="1.000000"
+   stroke="none"
+   d=" M408.000000,474.000000   C374.835999,474.000000 342.171967,474.000000 309.507965,474.000000   C284.278412,474.000000 259.048828,474.004730 233.819275,473.998169   C219.366562,473.994415 210.001450,464.527679 210.001083,449.926208   C209.998886,362.933258 209.976807,275.940308 210.060806,188.947449   C210.065567,184.018188 210.374725,178.948914 211.540894,174.189514   C214.189850,163.378632 222.831177,158.369949 233.445816,157.017914   C234.429825,156.892563 235.443527,157.000046 236.443451,157.000046   C426.094727,157.000000 615.746033,157.051605 805.397217,156.900894   C820.378662,156.888992 831.087341,167.063034 831.064148,182.680923   C830.931946,271.673523 830.870544,360.666779 831.134583,449.658783   C831.175842,463.575836 819.614380,474.272797 806.466797,474.234650   C673.812073,473.849609 541.155823,474.000000 408.000000,474.000000  M586.229492,319.395325   C587.844971,313.210358 585.613464,308.445679 578.616882,303.871887   C551.096436,285.881165 523.586060,267.874084 495.963287,250.041458   C487.238708,244.409042 478.472534,238.692429 469.170746,234.150177   C461.849823,230.575211 454.054626,236.239990 454.040649,244.358078   C453.959473,291.498627 453.959900,338.639465 454.058899,385.779907   C454.069946,391.030212 456.924652,394.877625 461.877869,396.864655   C468.895386,399.679810 474.590881,395.717529 479.854248,392.373016   C498.671570,380.415802 517.141296,367.913239 535.831177,355.753143   C548.286072,347.649658 561.049011,340.010132 573.349304,331.683136   C578.020752,328.520630 581.782837,324.014771 586.229492,319.395325  z"
+   id="path9" />
+<path
+   fill="#FFFFFF"
+   opacity="1.000000"
+   stroke="none"
+   d=" M586.094482,319.758270   C581.782837,324.014771 578.020752,328.520630 573.349304,331.683136   C561.049011,340.010132 548.286072,347.649658 535.831177,355.753143   C517.141296,367.913239 498.671570,380.415802 479.854248,392.373016   C474.590881,395.717529 468.895386,399.679810 461.877869,396.864655   C456.924652,394.877625 454.069946,391.030212 454.058899,385.779907   C453.959900,338.639465 453.959473,291.498627 454.040649,244.358078   C454.054626,236.239990 461.849823,230.575211 469.170746,234.150177   C478.472534,238.692429 487.238708,244.409042 495.963287,250.041458   C523.586060,267.874084 551.096436,285.881165 578.616882,303.871887   C585.613464,308.445679 587.844971,313.210358 586.094482,319.758270  z"
+   id="path10" />
+</svg>

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js

@@ -1,5 +1,5 @@
 /*
- * Jellyfin Slideshow by M0RPH3US v3.0.9
+ * Jellyfin Slideshow by M0RPH3US v4.0.1
  * Modified by CodeDevMLH v1.1.0.0
  * 
  * New features:
@@ -38,6 +38,7 @@ const CONFIG = {
   slideAnimationEnabled: true,
   enableVideoBackdrop: true,
   useSponsorBlock: true,
+  preferLocalTrailers: false,
   waitForTrailerToEnd: true,
   startMuted: true,
   fullWidthVideo: true,
@@ -51,6 +52,8 @@ const CONFIG = {
   customMediaIds: "",
   enableLoadingScreen: true,
   enableClientSideSettings: false,
+  sortBy: "Random",
+  sortOrder: "Ascending",
 };
 
 // State management
@@ -81,6 +84,7 @@ const STATE = {
     sponsorBlockInterval: null,
     isMuted: CONFIG.startMuted,
     customTrailerUrls: {},
+    ytPromise: null,
   },
 };
 
@@ -459,6 +463,66 @@ waitForApiClientAndInitialize();
  * Utility functions for slide creation and management
  */
 const SlideUtils = {
+  /**
+   * Sorts items based on configuration
+   * @param {Array<Object>} items - Array of item objects
+   * @param {string} sortBy - Sort criteria
+   * @param {string} sortOrder - Sort order 'Ascending' or 'Descending'
+   * @returns {Array<Object>} Sorted array of items
+   */
+  sortItems(items, sortBy, sortOrder) {
+    if (sortBy === 'Random' || sortBy === 'Original') {
+      return items;
+    }
+
+    const simpleCompare = (a, b) => {
+      if (a < b) return -1;
+      if (a > b) return 1;
+      return 0;
+    };
+
+    const sorted = [...items].sort((a, b) => {
+      let valA, valB;
+
+      switch (sortBy) {
+        case 'PremiereDate':
+          valA = new Date(a.PremiereDate).getTime();
+          valB = new Date(b.PremiereDate).getTime();
+          break;
+        case 'ProductionYear':
+           valA = a.ProductionYear || 0;
+           valB = b.ProductionYear || 0;
+           break;
+        case 'CriticRating':
+           valA = a.CriticRating || 0;
+           valB = b.CriticRating || 0;
+           break;
+        case 'CommunityRating':
+          valA = a.CommunityRating || 0;
+          valB = b.CommunityRating || 0;
+          break;
+        case 'Runtime':
+          valA = a.RunTimeTicks || 0;
+          valB = b.RunTimeTicks || 0;
+          break;
+        case 'Name':
+          valA = (a.Name || '').toLowerCase();
+          valB = (b.Name || '').toLowerCase();
+          break;
+        default:
+          return 0;
+      }
+
+      return simpleCompare(valA, valB);
+    });
+
+    if (sortOrder === 'Descending') {
+      sorted.reverse();
+    }
+
+    return sorted;
+  },
+
   /**
    * Shuffles array elements randomly
    * @param {Array} array - Array to shuffle
@@ -582,23 +646,25 @@ const SlideUtils = {
    * @returns {Promise<void>}
    */
   loadYouTubeIframeAPI() {
-    return new Promise((resolve) => {
+    if (STATE.slideshow.ytPromise) return STATE.slideshow.ytPromise;
+
+    STATE.slideshow.ytPromise = new Promise((resolve) => {
       if (window.YT && window.YT.Player) {
-        resolve();
+        resolve(window.YT);
         return;
       }
 
-      const tag = document.createElement('script');
-      tag.src = "https://www.youtube.com/iframe_api";
-      const firstScriptTag = document.getElementsByTagName('script')[0];
-      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-
-      const previousOnYouTubeIframeAPIReady = window.onYouTubeIframeAPIReady;
-      window.onYouTubeIframeAPIReady = () => {
-        if (previousOnYouTubeIframeAPIReady) previousOnYouTubeIframeAPIReady();
-        resolve();
-      };
+      window.onYouTubeIframeAPIReady = () => resolve(window.YT);
+      
+      if (!document.querySelector('script[src*="youtube.com/iframe_api"]')) {
+        const tag = document.createElement('script');
+        tag.src = "https://www.youtube.com/iframe_api";
+        const firstScriptTag = document.getElementsByTagName('script')[0];
+        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+      }
     });
+    
+    return STATE.slideshow.ytPromise;
   },
 
   /**
@@ -957,8 +1023,8 @@ const ApiUtils = {
       }
 
       const response = await fetch(
-        `${STATE.jellyfinData.serverAddress}/Items/${itemId}`,
-        // `${STATE.jellyfinData.serverAddress}/Users/${STATE.jellyfinData.userId}/Items/${itemId}?Fields=Overview,RemoteTrailers,Genres,CommunityRating,CriticRating,OfficialRating,PremiereDate,RunTimeTicks,ProductionYear,MediaSources`,
+        // `${STATE.jellyfinData.serverAddress}/Items/${itemId}`,
+        `${STATE.jellyfinData.serverAddress}/Items/${itemId}?Fields=Overview,RemoteTrailers,Genres,CommunityRating,CriticRating,OfficialRating,PremiereDate,ProductionYear,MediaSources,RunTimeTicks,LocalTrailerCount`,
         {
           headers: this.getAuthHeaders(),
         }
@@ -1030,8 +1096,16 @@ const ApiUtils = {
 
       console.log("Fetching random items from server...");
 
+      let sortParams = `sortBy=${CONFIG.sortBy}`;
+
+      if (CONFIG.sortBy === 'Random' || CONFIG.sortBy === 'Original') {
+          sortParams = 'sortBy=Random';
+      } else {
+        sortParams += `&sortOrder=${CONFIG.sortOrder}`;
+      }
+
       const response = await fetch(
-        `${STATE.jellyfinData.serverAddress}/Items?IncludeItemTypes=Movie,Series&Recursive=true&hasOverview=true&imageTypes=Logo,Backdrop&sortBy=Random&isPlayed=False&enableUserData=true&Limit=${CONFIG.maxItems}&fields=Id`,
+        `${STATE.jellyfinData.serverAddress}/Items?IncludeItemTypes=Movie,Series&Recursive=true&hasOverview=true&imageTypes=Logo,Backdrop&${sortParams}&isPlayed=False&enableUserData=true&Limit=${CONFIG.maxItems}&fields=Id`,
         {
           headers: this.getAuthHeaders(),
         }
@@ -1250,6 +1324,39 @@ const ApiUtils = {
       console.error(`Error fetching collection items for ${collectionId}:`, error);
       return [];
     }
+  },
+
+  /**
+   * Fetches the first local trailer for an item
+   * @param {string} itemId - Item ID
+   * @returns {Promise<string|null>} Stream URL or null
+   */
+  async fetchLocalTrailer(itemId) {
+    try {
+      const response = await fetch(
+        `${STATE.jellyfinData.serverAddress}/Users/${STATE.jellyfinData.userId}/Items/${itemId}/LocalTrailers`,
+        {
+          headers: this.getAuthHeaders(),
+        }
+      );
+
+      if (!response.ok) {
+        return null;
+      }
+
+      const trailers = await response.json();
+      if (trailers && trailers.length > 0) {
+        const trailer = trailers[0];
+        const mediaSourceId = trailer.MediaSources && trailer.MediaSources[0] ? trailer.MediaSources[0].Id : trailer.Id;
+        
+        // Construct stream URL
+        return `${STATE.jellyfinData.serverAddress}/Videos/${trailer.Id}/stream.mp4?Static=true&mediaSourceId=${mediaSourceId}&api_key=${STATE.jellyfinData.accessToken}`;
+      }
+      return null;
+    } catch (error) {
+      console.error(`Error fetching local trailer for ${itemId}:`, error);
+      return null;
+    }
   }
 };
 
@@ -1432,12 +1539,21 @@ const SlideCreator = {
     let isVideo = false;
     let trailerUrl = null;
 
-    // 1. Check for Remote Trailers (YouTube)
-    // Priority: Custom Config URL > Metadata RemoteTrailer
+    // 1. Check for Remote/Local Trailers
+    // Priority: Custom Config URL > (PreferLocal -> Local) > Metadata RemoteTrailer
+
+    // 1a. Custom URL override
     if (STATE.slideshow.customTrailerUrls && STATE.slideshow.customTrailerUrls[itemId]) {
       trailerUrl = STATE.slideshow.customTrailerUrls[itemId];
       console.log(`Using custom trailer URL for ${itemId}: ${trailerUrl}`);
-    } else if (item.RemoteTrailers && item.RemoteTrailers.length > 0) {
+    } 
+    // 1b. Check Local Trailer if preferred
+    else if (CONFIG.preferLocalTrailers && item.LocalTrailerCount > 0 && item.localTrailerUrl) {
+         trailerUrl = item.localTrailerUrl;
+         console.log(`Using local trailer for ${itemId}: ${trailerUrl}`);
+    }
+    // 1c. Fallback to Remote Trailer
+    else if (item.RemoteTrailers && item.RemoteTrailers.length > 0) {
       trailerUrl = item.RemoteTrailers[0].Url;
     }
 
@@ -1589,7 +1705,7 @@ const SlideCreator = {
           autoplay: false,
           preload: "auto",
           loop: false,
-          style: "object-fit: cover; width: 100%; height: 100%; pointer-events: none;"
+          style: "object-fit: cover; object-position: center center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none;"
         };
 
         if (STATE.slideshow.isMuted) {
@@ -1931,6 +2047,11 @@ const SlideCreator = {
 
       const item = await ApiUtils.fetchItemDetails(itemId);
 
+      // Pre-fetch local trailer URL if needed
+      if (CONFIG.preferLocalTrailers && item.LocalTrailerCount > 0) {
+          item.localTrailerUrl = await ApiUtils.fetchLocalTrailer(itemId);
+      }
+
       const slideElement = this.createSlideElement(
         item,
         item.Type === "Movie" ? "Movie" : "TV Show"
@@ -2530,29 +2651,25 @@ const SlideshowManager = {
 
     document.addEventListener("keydown", (e) => {
       const container = document.getElementById("slides-container");
-      // Allow interaction if container is visible, even if not strictly focused
       if (!container || container.style.display === "none") {
         return;
       }
 
-      const focusElement = document.activeElement;
+      const activeElement = document.activeElement;
+      const isSlideshowFocused = container.contains(activeElement) || activeElement === container || activeElement === document.body;
+
+      if ((e.key === "ArrowRight" || e.key === "ArrowLeft") && !isSlideshowFocused) {
+        return;
+      }
 
       switch (e.key) {
         case "ArrowRight":
-          if (focusElement && focusElement.classList.contains("detail-button")) {
-            focusElement.previousElementSibling.focus();
-          } else {
-            SlideshowManager.nextSlide();
-          }
+          SlideshowManager.nextSlide();
           e.preventDefault();
           break;
 
         case "ArrowLeft":
-          if (focusElement && focusElement.classList.contains("play-button")) {
-            focusElement.nextElementSibling.focus();
-          } else {
-            SlideshowManager.prevSlide();
-          }
+          SlideshowManager.prevSlide();
           e.preventDefault();
           break;
 
@@ -2568,8 +2685,15 @@ const SlideshowManager = {
           break;
 
         case "Enter":
-          if (focusElement) {
-            focusElement.click();
+          const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
+          if (currentItemId) {
+             if (window.Emby && window.Emby.Page) {
+               Emby.Page.show(
+                 `/details?id=${currentItemId}&serverId=${STATE.jellyfinData.serverId}`
+               );
+             } else {
+               window.location.href = `#/details?id=${currentItemId}&serverId=${STATE.jellyfinData.serverId}`;
+             }
           }
           e.preventDefault();
           break;
@@ -2763,10 +2887,28 @@ const SlideshowManager = {
       if (itemIds.length === 0) {
         console.log("No custom list found, fetching random items from server...");
         itemIds = await ApiUtils.fetchItemIdsFromServer();
+        
+        if (CONFIG.sortBy === 'Random') {
+            itemIds = SlideUtils.shuffleArray(itemIds);
+        }
+      } else {
+        // Custom IDs
+        if (CONFIG.sortBy === 'Random') {
+             itemIds = SlideUtils.shuffleArray(itemIds);
+        } else if (CONFIG.sortBy !== 'Original') {
+            // Client-side sort required...
+             console.log(`Sorting ${itemIds.length} custom items by ${CONFIG.sortBy} ${CONFIG.sortOrder}`);
+             const itemsWithDetails = [];
+             for (const id of itemIds) {
+                 const item = await ApiUtils.fetchItemDetails(id);
+                 if (item) itemsWithDetails.push(item);
+             }
+             
+             const sortedItems = SlideUtils.sortItems(itemsWithDetails, CONFIG.sortBy, CONFIG.sortOrder);
+             itemIds = sortedItems.map(i => i.Id);
+        }
       }
 
-      itemIds = SlideUtils.shuffleArray(itemIds);
-
       STATE.slideshow.itemIds = itemIds;
       STATE.slideshow.totalItems = itemIds.length;
 
@@ -2962,9 +3104,13 @@ const MediaBarEnhancedSettingsManager = {
     button.className = 'paper-icon-button-light headerButton media-bar-settings-button';
     button.title = 'Media Bar Settings';
     // button.innerHTML = '<span class="material-icons">tune</span>';
+
     // button.innerHTML = '<img src="/MediaBarEnhanced/Resources/assets/logo_SW.svg" style="width: 24px; height: 24px; vertical-align: middle;">';
     // currently not optimal, as it's egg-shaped due to the svg format... but if it's square, it's very small...
-    button.innerHTML = '<img src="/MediaBarEnhanced/Resources/assets/logo_SW.svg" draggable="false" style="width: 52px; height: 24px; vertical-align: middle; pointer-events: none;">';
+    // button.innerHTML = '<img src="/MediaBarEnhanced/Resources/assets/logo_SW.svg" draggable="false" style="width: 52px; height: 24px; vertical-align: middle; pointer-events: none;">';
+    // button.innerHTML = '<img src="/MediaBarEnhanced/Resources/assets/logo_SW_SHORT.svg" draggable="false" style="width: 41px; height: 24px; vertical-align: middle; pointer-events: none;">';
+    button.innerHTML = '<img src="/MediaBarEnhanced/Resources/assets/logo_SW_MINIMAL.svg" draggable="false" style="width: 24px; height: 24px; vertical-align: middle; pointer-events: none;">';
+    
     button.style.verticalAlign = 'middle';
 
     button.addEventListener('click', (e) => {
@@ -3022,12 +3168,12 @@ const MediaBarEnhancedSettingsManager = {
     popup.style.top = `${rect.bottom + 10}px`;
 
     const settings = [
-        { key: 'enabled', label: 'Enable Media Bar', description: 'Toggle the entire media bar visibility.', default: true },
-        { key: 'videoBackdrops', label: 'Enable Video Backdrops', description: 'Play trailers as background videos.', default: CONFIG.enableVideoBackdrop },
-        { key: 'trailerButton', label: 'Show Trailer Button', description: 'Show button to play trailers in popup on non Video backdrops.', default: CONFIG.showTrailerButton },
-        { key: 'mobileVideo', label: 'Enable Mobile Video', description: 'Allow video backdrops on mobile devices.', default: CONFIG.enableMobileVideo },
+        { key: 'enabled', label: 'Enable Media Bar Enhanced', description: 'Toggle the entire media bar visibility.', default: true },
+        { key: 'videoBackdrops', label: 'Enable Trailer Backdrops', description: 'Play trailers as background videos.', default: CONFIG.enableVideoBackdrop },
+        { key: 'trailerButton', label: 'Show Trailer Button', description: 'Show button to play trailer in popup (only backdrops without trailer)', default: CONFIG.showTrailerButton },
+        { key: 'mobileVideo', label: 'Enable Trailer On Mobile', description: 'Allow trailer backdrops on mobile devices.', default: CONFIG.enableMobileVideo },
         { key: 'waitForTrailer', label: 'Wait For Trailer To End', description: 'Wait for the trailer to finish before changing slides.', default: CONFIG.waitForTrailerToEnd },
-        { key: 'slideAnimations', label: 'Enable Animations', description: 'Enable transition animations between slides.', default: CONFIG.slideAnimationEnabled },
+        { key: 'slideAnimations', label: 'Enable Animations', description: 'Enable zooming-in effect (only on background images)', default: CONFIG.slideAnimationEnabled },
     ];
 
     let html = '<h3 style="margin-top:0; margin-bottom:1em; border-bottom:1px solid #444; padding-bottom:0.5em;">Media Bar Settings</h3>';
@@ -3045,11 +3191,14 @@ const MediaBarEnhancedSettingsManager = {
         `;
     });
 
-    // Reload button
+    // Buttons Container
     html += `
-    <div style="margin-top:1em; text-align:right;">
+    <div style="margin-top:1em; display:flex; justify-content:flex-end; align-items:center; gap:1.5em;">
+        <button is="emby-button" type="button" class="raised button-cancel emby-button" id="mb-settings-reset" title="Reset to Server Defaults">
+            <span>Load Server Defaults</span>
+        </button>
         <button is="emby-button" type="button" class="raised button-submit emby-button" id="mb-settings-save">
-            <span>Reload</span>
+            <span>Save & Reload</span>
         </button>
     </div>
     `;
@@ -3064,10 +3213,23 @@ const MediaBarEnhancedSettingsManager = {
         });
     });
 
+    // Reload Handler
     popup.querySelector('#mb-settings-save').addEventListener('click', () => {
         location.reload();
     });
 
+    // Reset Handler
+    popup.querySelector('#mb-settings-reset').addEventListener('click', () => {
+        if (confirm("Reset all local Media Bar settings to server defaults?")) {
+            Object.keys(localStorage).forEach(key => {
+                if (key.startsWith('mediaBarEnhanced-')) {
+                    localStorage.removeItem(key);
+                }
+            });
+            location.reload();
+        }
+    });
+
     const closeHandler = (e) => {
         if (!popup.contains(e.target) && e.target !== anchorElement && !anchorElement.contains(e.target)) {
             popup.remove();
@@ -3089,6 +3251,84 @@ const MediaBarEnhancedSettingsManager = {
   }
 };
 
+/**
+ * Initialize page visibility handling to pause when tab is inactive
+ */
+const initPageVisibilityHandler = () => {
+  let wasVideoPlayingBeforeHide = false;
+
+  document.addEventListener("visibilitychange", () => {
+    if (document.hidden) {
+      console.log("Tab inactive - pausing slideshow and videos");
+      wasVideoPlayingBeforeHide = STATE.slideshow.isVideoPlaying;
+      
+      if (STATE.slideshow.slideInterval) {
+        STATE.slideshow.slideInterval.stop();
+      }
+      
+      // Pause active video if playing
+      const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
+      if (currentItemId) {
+        // YouTube
+        if (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
+          const player = STATE.slideshow.videoPlayers[currentItemId];
+          if (typeof player.pauseVideo === "function") {
+            try {
+              player.pauseVideo();
+              STATE.slideshow.isVideoPlaying = false;
+            } catch (e) {
+              console.warn("Error pausing video on tab hide:", e);
+            }
+          } else if (player.tagName === 'VIDEO') { // HTML5 Video
+             player.pause();
+             STATE.slideshow.isVideoPlaying = false;
+          }
+        }
+      }
+    } else {
+      console.log("Tab active - resuming slideshow");
+      if (!STATE.slideshow.isPaused) {
+        const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
+        
+        if (wasVideoPlayingBeforeHide && currentItemId && STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
+          const player = STATE.slideshow.videoPlayers[currentItemId];
+          
+          // YouTube
+          if (typeof player.playVideo === "function") {
+            try {
+              player.playVideo();
+              STATE.slideshow.isVideoPlaying = true;
+            } catch (e) {
+              console.warn("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));
+                STATE.slideshow.isVideoPlaying = true;
+             } catch(e) { console.warn(e); }
+          }
+        } else {
+          // No video was playing, just restart interval
+          const activeSlide = document.querySelector('.slide.active');
+          const hasVideo = activeSlide && activeSlide.querySelector('.video-backdrop');
+          
+          if (CONFIG.waitForTrailerToEnd && hasVideo) {
+             // Don't restart interval if waiting for trailer
+          } else {
+             if (STATE.slideshow.slideInterval) {
+               STATE.slideshow.slideInterval.start();
+             }
+          }
+        }
+        wasVideoPlayingBeforeHide = false;
+      }
+    }
+  });
+};
+
 /**
  * Initialize the slideshow
  */
@@ -3202,6 +3442,8 @@ const slidesInit = async () => {
 
     SlideshowManager.initKeyboardEvents();
 
+    initPageVisibilityHandler();
+
     VisibilityObserver.init();
 
     console.log("✅ Enhanced Jellyfin Slideshow initialized successfully");

README.md

@@ -82,11 +82,21 @@ This plugin builds upon the original Media Bar with new capabilities and improve
 *   **Smarter Playback**:
     *   Option to wait for the trailer to end before advancing the slide.
     *   Mute/Unmute controls
+*   **Override Trailers**: Manually specify a custom trailer URL for any item via the Custom Media IDs list
 *   **Customization**:
     *   **Custom Media IDs**: Manually specify which items (Movies, Series, Collections/Boxsets) to display. Easily configurable via the plugin settings
     *   **Seasonal Content Mode**: Define date-based lists for holidays and seasons (e.g., Halloween, Christmas)
     *   Pagination dots turn into a counter (e.g., 1/20) if the limit is exceeded
+        <details>
+        <summary>Have a look:</summary>
+        <img width="167" height="142" alt="PagDots_Number" src="https://github.com/user-attachments/assets/6a0a5040-cf13-4d9c-ae96-f50ec249c3f1" />
+        </details>
     *   Option to disable the loading screen
+    *   Client Settings: Optionally allow users to set selected media bar settings from their client.
+        <details>
+        <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>
 
 ### Core Features
 *   **Immersive Slideshow**: Rotates through your media library
@@ -118,13 +128,14 @@ Because this plugin relies on injecting JavaScript and CSS into the web interfac
 
 | Client Platform | Status | Notes |
 | :--- | :---: | :--- |
-| **Web Browsers** (Chrome, Firefox, Edge, etc.) | ✅ | Fully supported. |
-| **Jellyfin Media Player** (Windows/Linux/macOS) | ✅ | Fully supported. |
-| **Android App** | ✅ | Works (Web wrapper). |
-| **iOS App** | ✅ | Works (Web wrapper). |
-| **Android TV / Fire TV** | ❌ | **Not supported** (Native UI). |
-| **Roku** | ❌ | **Not supported** (Native UI). |
-| **Swiftfin** | ❌ | **Not supported** (Native UI). |
+| **Web Browsers** (Firefox, Chrome etc.) | ✅ | Direct JS injection |
+| **Jellyfin Media Player** (Windows/Linux/macOS) | ✅ | Uses jellyfin web |
+| **Android App** | ✅ | Uses a web wrapper |
+| **iOS App** | ✅ | Uses a web wrapper |
+| **Android TV / Fire TV** | ❌ | **Not supported.** Uses a native Java/Kotlin UI. |
+| **Roku** | ❌ | **Not supported.** Uses a native UI. |
+| **Swiftfin** (iOS/tvOS) | ❌ | **Not supported.** Uses a native Swift UI. |
+| **Kodi** (via Jellyfin Addon) | ❌ | **Not supported.** Uses Kodi's native skinning engine. |
 
 ## Configuration
 

manifest.json

@@ -9,12 +9,12 @@
     "imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
     "versions": [
       {
-        "version": "1.4.0.5",
-        "changelog": "- feat: Add client-side settings feature for selected media bar settings",
+        "version": "1.5.0.16",
+        "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",
         "targetAbi": "10.11.0.0",
-        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.4.0.5/Jellyfin.Plugin.MediaBarEnhanced.zip",
-        "checksum": "3ba68bae1c492767bddab2dee2540226",
-        "timestamp": "2026-02-04T16:23:14Z"
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.5.0.16/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "b0d18538fbe28b843029efe40be827e8",
+        "timestamp": "2026-02-09T15:54:24Z"
       },
       {
         "version": "1.3.0.3",

test_scripts/fetch_random_item_browser_console.js

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

test_scripts/fetch_random_item_browser_console_2.js

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

test_scripts/fetch_specific_items.js

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

without_list_txt/configPage.html

@@ -0,0 +1,462 @@
+<!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>