Bump version to 1.7.1.4 and update changelog for new features and fixes

.gitea/workflows/release_automation.yml

@@ -51,7 +51,31 @@ jobs:
           echo "$CHANGELOG" >> $GITHUB_ENV
           echo "EOF" >> $GITHUB_ENV
 
+      - name: Check if Release Already Exists
+        id: check_release
+        shell: bash
+        run: |
+          REPO_OWNER="${{ github.repository_owner }}"
+          REPO_NAME="${{ github.event.repository.name }}"
+          VERSION="${{ env.VERSION }}"
+          TAG="v$VERSION"
+          SERVER_URL="https://git.mahom03-spacecloud.de"
+
+          HTTP_STATUS=$(curl -s -o /dev/null -w "%{http_code}" -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" "$SERVER_URL/api/v1/repos/$REPO_OWNER/$REPO_NAME/releases/tags/$TAG")
+
+          if [ "$HTTP_STATUS" -eq 200 ]; then
+            echo "Release $TAG already exists. Skipping release-related steps."
+            echo "release_exists=true" >> $GITHUB_OUTPUT
+          elif [ "$HTTP_STATUS" -eq 404 ]; then
+            echo "No existing release for $TAG. Continuing." 
+            echo "release_exists=false" >> $GITHUB_OUTPUT
+          else
+            echo "Unexpected response when checking release: $HTTP_STATUS"
+            exit 1
+          fi
+
       - name: Build and Zip
+        if: steps.check_release.outputs.release_exists == 'false'
         shell: bash
         run: |
           # Inject version from manifest into the build
@@ -71,6 +95,7 @@ jobs:
           echo "ZIP_PATH=bin/Publish/Jellyfin.Plugin.MediaBarEnhanced.zip" >> $GITHUB_ENV
 
       - name: Update manifest.json
+        if: steps.check_release.outputs.release_exists == 'false'
         shell: bash
         run: |
             REPO_OWNER="${{ github.repository_owner }}"
@@ -90,12 +115,14 @@ jobs:
              manifest.json > manifest.json.tmp && mv manifest.json.tmp manifest.json
 
       - name: Commit manifest.json
+        if: steps.check_release.outputs.release_exists == 'false'
         uses: stefanzweifel/git-auto-commit-action@v7
         with:
           commit_message: "Update manifest.json for release v${{ env.VERSION }} [skip ci]"
           file_pattern: manifest.json
 
       - name: Create Release
+        if: steps.check_release.outputs.release_exists == 'false'
         uses: akkuman/gitea-release-action@v1
         with:
           server_url: "https://git.mahom03-spacecloud.de"
@@ -109,6 +136,7 @@ jobs:
 
       # Update Message in Remote Repository
       - name: Checkout Central Manifest Repo
+        if: steps.check_release.outputs.release_exists == 'false'
         uses: actions/checkout@v6
         with:
           repository: ${{ github.repository_owner }}/jellyfin-plugin-manifest
@@ -116,6 +144,7 @@ jobs:
           token: ${{ secrets.JELLYFIN_PLUGIN_MANIFEST_UPDATER_PAT }}
 
       - name: Update Central Manifest
+        if: steps.check_release.outputs.release_exists == 'false'
         shell: bash
         run: |
             cd central-manifest
@@ -171,6 +200,7 @@ jobs:
                manifest.json > manifest.json.tmp && mv manifest.json.tmp manifest.json
                
       - name: Commit and Push Central Manifest
+        if: steps.check_release.outputs.release_exists == 'false'
         run: |
           cd central-manifest
           git config user.name "CodeDevMLH"

.github/workflows/release_automation.yml

@@ -52,7 +52,32 @@ jobs:
           echo "$CHANGELOG" >> $GITHUB_ENV
           echo "EOF" >> $GITHUB_ENV
 
+      - name: Check if Release Already Exists
+        id: check_release
+        shell: bash
+        run: |
+          REPO_OWNER="${{ github.repository_owner }}"
+          REPO_NAME="${{ github.event.repository.name }}"
+          VERSION="${{ env.VERSION }}"
+          TAG="v$VERSION"
+          API_URL="https://api.github.com/repos/$REPO_OWNER/$REPO_NAME/releases/tags/$TAG"
+
+          HTTP_STATUS=$(curl -s -o /dev/null -w "%{http_code}" -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" "$API_URL")
+
+          if [ "$HTTP_STATUS" -eq 200 ]; then
+            echo "Release $TAG already exists. Skipping release-related steps."
+            echo "release_exists=true" >> $GITHUB_OUTPUT
+          elif [ "$HTTP_STATUS" -eq 404 ]; then
+            echo "No existing release for $TAG. Continuing." 
+            echo "release_exists=false" >> $GITHUB_OUTPUT
+          else
+            echo "Unexpected response when checking release: $HTTP_STATUS"
+            exit 1
+          fi
+
+
       - name: Build and Zip
+        if: steps.check_release.outputs.release_exists == 'false'
         shell: bash
         run: |
           # Inject version from manifest into the build
@@ -72,6 +97,7 @@ jobs:
           echo "ZIP_PATH=bin/Publish/Jellyfin.Plugin.MediaBarEnhanced.zip" >> $GITHUB_ENV
 
       - name: Update manifest.json
+        if: steps.check_release.outputs.release_exists == 'false'
         shell: bash
         run: |
             REPO_OWNER="${{ github.repository_owner }}"
@@ -91,13 +117,14 @@ jobs:
              manifest.json > manifest.json.tmp && mv manifest.json.tmp manifest.json
 
       - name: Commit manifest.json
+        if: steps.check_release.outputs.release_exists == 'false'
         uses: stefanzweifel/git-auto-commit-action@v7
         with:
           commit_message: "Update manifest.json for release v${{ env.VERSION }} [skip ci]"
           file_pattern: manifest.json
 
       - name: Generate Commit Log
-        if: success()
+        if: success() && steps.check_release.outputs.release_exists == 'false'
         shell: bash
         run: |
             echo "Generating commit log since last tag..."
@@ -131,6 +158,7 @@ jobs:
             cat release_body.txt
 
       - name: Create Release
+        if: steps.check_release.outputs.release_exists == 'false'
         uses: softprops/action-gh-release@v2
         with:
           tag_name: "v${{ env.VERSION }}"
@@ -145,6 +173,7 @@ jobs:
 
       # Update Message in Remote Repository
       - name: Checkout Central Manifest Repo
+        if: steps.check_release.outputs.release_exists == 'false'
         uses: actions/checkout@v6
         with:
           repository: ${{ github.repository_owner }}/jellyfin-plugin-manifest
@@ -152,6 +181,7 @@ jobs:
           token: ${{ secrets.JELLYFIN_PLUGIN_MANIFEST_UPDATER_PAT }}
 
       - name: Update Central Manifest
+        if: steps.check_release.outputs.release_exists == 'false'
         shell: bash
         run: |
             cd central-manifest
@@ -207,6 +237,7 @@ jobs:
                manifest.json > manifest.json.tmp && mv manifest.json.tmp manifest.json
                
       - name: Commit and Push Central Manifest
+        if: steps.check_release.outputs.release_exists == 'false'
         run: |
           cd central-manifest
           git config user.name "CodeDevMLH"

Injector_new.cs

@@ -0,0 +1,246 @@
+using System;
+using System.Reflection;
+using System.IO;
+using System.Collections.Generic;
+using System.Linq;
+using System.Runtime.Loader;
+using Microsoft.Extensions.Logging;
+using Newtonsoft.Json.Linq;
+using MediaBrowser.Common.Configuration;
+using Jellyfin.Plugin.MediaBarEnhanced.Helpers;
+
+namespace Jellyfin.Plugin.MediaBarEnhanced
+{
+    /// <summary>
+    /// Handles the injection of the MediaBarEnhanced script into the Jellyfin web interface.
+    /// </summary>
+    public class ScriptInjector
+    {
+        private readonly IApplicationPaths _appPaths;
+        private readonly ILogger<ScriptInjector> _logger;
+        public const string ScriptTag = "<script src=\"../MediaBarEnhanced/Resources/mediaBarEnhanced.js\" defer></script>";
+        public const string CssTag = "<link rel=\"stylesheet\" href=\"../MediaBarEnhanced/Resources/mediaBarEnhanced.css\" />";
+        public const string ScriptMarker = "</body>";
+        public const string CssMarker = "</head>";
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="ScriptInjector"/> class.
+        /// </summary>
+        /// <param name="appPaths">The application paths.</param>
+        /// <param name="logger">The logger.</param>
+        public ScriptInjector(IApplicationPaths appPaths, ILogger<ScriptInjector> logger)
+        {
+            _appPaths = appPaths;
+            _logger = logger;
+        }
+
+        /// <summary>
+        /// Injects the script tag into index.html if it's not already present.
+        /// </summary>
+        public void Inject()
+        {
+            try
+            {
+                var webPath = GetWebPath();
+                if (string.IsNullOrEmpty(webPath))
+                {
+                    _logger.LogWarning("Could not find Jellyfin web path. Script injection skipped. Attempting fallback.");
+                    RegisterFileTransformation();
+                    return;
+                }
+
+                var indexPath = Path.Combine(webPath, "index.html");
+                if (!File.Exists(indexPath))
+                {
+                    _logger.LogWarning("index.html not found at {Path}. Script injection skipped. Attempting fallback.", indexPath);
+                    RegisterFileTransformation();
+                    return;
+                }
+
+                var content = File.ReadAllText(indexPath);
+                var injectedJS = false;
+                var injectedCSS = false;
+
+                if (!content.Contains(ScriptTag))
+                {
+                    var index = content.IndexOf(ScriptMarker, StringComparison.OrdinalIgnoreCase);
+                    if (index != -1)
+                    {
+                        content = content.Insert(index, ScriptTag + Environment.NewLine);
+                        injectedJS = true;
+                    }
+                }
+                
+                if (!content.Contains(CssTag))
+                {
+                     var index = content.IndexOf(CssMarker, StringComparison.OrdinalIgnoreCase);
+                     if (index != -1)
+                     {
+                         content = content.Insert(index, CssTag + Environment.NewLine);
+                         injectedCSS = true;
+                     }
+                }
+
+                if (injectedJS && injectedCSS)
+                {
+                    File.WriteAllText(indexPath, content);
+                    _logger.LogInformation("MediaBarEnhanced script injected into index.html.");
+                } else if (injectedJS)
+                {
+                    File.WriteAllText(indexPath, content);
+                    _logger.LogInformation("MediaBarEnhanced JS script injected into index.html. But CSS was already present or could not be injected.");
+                }
+                else if (injectedCSS)
+                {
+                    File.WriteAllText(indexPath, content);
+                    _logger.LogInformation("MediaBarEnhanced CSS injected into index.html. But JS script was already present or could not be injected.");
+                }
+                else
+                {
+                    _logger.LogInformation("MediaBarEnhanced script and CSS already present in index.html. Or could not be injected.");
+                }
+            }
+            catch (UnauthorizedAccessException)
+            {
+                _logger.LogWarning("Unauthorized access when attempting to inject script into index.html. Automatic injection failed. Attempting fallback now...");
+                RegisterFileTransformation();
+            }
+            catch (Exception ex)
+            {
+                _logger.LogError(ex, "Error injecting MediaBarEnhanced resources. Attempting fallback.");
+                RegisterFileTransformation();
+            }
+        }
+
+        /// <summary>
+        /// Removes the script tag from index.html.
+        /// </summary>
+        public void Remove()
+        {
+            UnregisterFileTransformation();
+
+            try
+            {
+                var webPath = GetWebPath();
+                if (string.IsNullOrEmpty(webPath))
+                {
+                    return;
+                }
+
+                var indexPath = Path.Combine(webPath, "index.html");
+                if (!File.Exists(indexPath))
+                {
+                    return;
+                }
+
+                var content = File.ReadAllText(indexPath);
+                var modified = false;
+
+                if (content.Contains(ScriptTag))
+                {
+                    content = content.Replace(ScriptTag + Environment.NewLine, "").Replace(ScriptTag, "");
+                    modified = true;
+                }
+                
+                if (content.Contains(CssTag))
+                {
+                    content = content.Replace(CssTag + Environment.NewLine, "").Replace(CssTag, "");
+                    modified = true;
+                }
+
+                if (modified)
+                {
+                    File.WriteAllText(indexPath, content);
+                    _logger.LogInformation("MediaBarEnhanced script removed from index.html.");
+                } else
+                {
+                    _logger.LogInformation("MediaBarEnhanced script not found in index.html. No removal necessary.");
+                }
+            }
+            catch (UnauthorizedAccessException uaEx)
+            {
+                _logger.LogError(uaEx, "Unauthorized access when trying to remove MediaBarEnhanced script. Check file permissions.");
+            }
+            catch (Exception ex)
+            {
+                _logger.LogError(ex, "Error removing MediaBarEnhanced script.");
+            }
+        }
+
+        private string? GetWebPath()
+        {
+            var prop = _appPaths.GetType().GetProperty("WebPath", BindingFlags.Instance | BindingFlags.Public);
+            return prop?.GetValue(_appPaths) as string;
+        }
+
+        private void RegisterFileTransformation()
+        {
+            _logger.LogInformation("MediaBarEnhanced Fallback. Registering file transformations.");
+            
+            List<JObject> payloads = new List<JObject>();
+
+            {
+                JObject payload = new JObject();
+                payload.Add("id", "0dfac9d7-d898-4944-900b-1c1837707279"); 
+                payload.Add("fileNamePattern", "index.html");
+                payload.Add("callbackAssembly", GetType().Assembly.FullName);
+                payload.Add("callbackClass", typeof(TransformationPatches).FullName);
+                payload.Add("callbackMethod", nameof(TransformationPatches.IndexHtml));
+                
+                payloads.Add(payload);
+            }
+
+            Assembly? fileTransformationAssembly =
+                AssemblyLoadContext.All.SelectMany(x => x.Assemblies).FirstOrDefault(x =>
+                    x.FullName?.Contains(".FileTransformation") ?? false);
+
+            if (fileTransformationAssembly != null)
+            {
+                Type? pluginInterfaceType = fileTransformationAssembly.GetType("Jellyfin.Plugin.FileTransformation.PluginInterface");
+
+                if (pluginInterfaceType != null)
+                {
+                    foreach (JObject payload in payloads)
+                    {
+                        pluginInterfaceType.GetMethod("RegisterTransformation")?.Invoke(null, new object?[] { payload });
+                    }
+                    _logger.LogInformation("File transformations registered successfully.");
+                }
+                else
+                {
+                    _logger.LogWarning("FileTransformation plugin found but PluginInterface type missing.");
+                }
+            }
+            else
+            {
+                 _logger.LogWarning("FileTransformation plugin assembly not found. Fallback failed.");
+            }
+        }
+        
+        private void UnregisterFileTransformation()
+        {
+            try 
+            {
+                Assembly? fileTransformationAssembly =
+                    AssemblyLoadContext.All.SelectMany(x => x.Assemblies).FirstOrDefault(x =>
+                        x.FullName?.Contains(".FileTransformation") ?? false);
+
+                if (fileTransformationAssembly != null)
+                {
+                    Type? pluginInterfaceType = fileTransformationAssembly.GetType("Jellyfin.Plugin.FileTransformation.PluginInterface");
+
+                    if (pluginInterfaceType != null)
+                    {
+                        Guid id = Guid.Parse("0dfac9d7-d898-4944-900b-1c1837707279");
+                        pluginInterfaceType.GetMethod("RemoveTransformation")?.Invoke(null, new object?[] { id });
+                        _logger.LogInformation("File transformation unregistered successfully.");
+                    }
+                }
+            }
+            catch (Exception ex)
+            {
+                _logger.LogWarning(ex, "Error attempting to unregister file transformation. It might not have been registered.");
+            }
+        }
+    }
+}

Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs

@@ -18,6 +18,7 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
         public int PreloadCount { get; set; } = 3;
         public int FadeTransitionDuration { get; set; } = 500;
         public int MaxPaginationDots { get; set; } = 15;
+        public bool ShowPaginationDots { get; set; } = true;
         public bool SlideAnimationEnabled { get; set; } = true;
         public bool EnableVideoBackdrop { get; set; } = true;
         public bool UseSponsorBlock { get; set; } = true;

Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html

@@ -22,15 +22,15 @@
                 <hr style="max-width: 800px; margin: 1em 0;">
 
                 <div style="margin-bottom: 1.5em;">
-                    <button class="jellyfin-tab-button active" onclick="showTab('basic', this)"
+                    <button class="jellyfin-tab-button active" onclick="showTab('media-bar-enhanced-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)"
+                    <button class="jellyfin-tab-button" onclick="showTab('media-bar-enhanced-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)"
+                    <button class="jellyfin-tab-button" onclick="showTab('media-bar-enhanced-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>
@@ -39,11 +39,12 @@
                 <form id="mediaBarEnhancedConfigForm">
 
                     <!-- BASIC TAB -->
-                    <div id="basic" class="tab-content">
+                    <div id="media-bar-enhanced-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" />
+                                <input is="emby-checkbox" type="checkbox" id="MediaBarIsEnabled"
+                                    name="MediaBarIsEnabled" />
                                 <span>Enable Media Bar Enhanced Plugin</span>
                             </label>
                             <div class="fieldDescription">Enable or disable the entire plugin functionality.</div>
@@ -57,21 +58,25 @@
                             <div class="fieldDescription">Show trailers as background if available.<br>Adds a
                                 mute/unmute and pause/play button to control the video in the right top corner.</div>
                         </div>
-                        <div class="checkboxContainer checkboxContainer-withDescription" id="PreferLocalTrailersContainer">
+                        <div class="checkboxContainer checkboxContainer-withDescription"
+                            id="PreferLocalTrailersContainer">
                             <label>
                                 <input is="emby-checkbox" type="checkbox" id="PreferLocalTrailers"
                                     name="PreferLocalTrailers" />
                                 <span>Prefer Local Trailers</span>
                             </label>
-                            <div class="fieldDescription">If enabled, local trailers will be preferred over remote (YouTube) trailers.</div>
+                            <div class="fieldDescription">If enabled, local trailers will be preferred over remote
+                                (YouTube) trailers.</div>
                         </div>
-                        <div class="checkboxContainer checkboxContainer-withDescription" id="PreferLocalBackdropsContainer">
+                        <div class="checkboxContainer checkboxContainer-withDescription"
+                            id="PreferLocalBackdropsContainer">
                             <label>
                                 <input is="emby-checkbox" type="checkbox" id="PreferLocalBackdrops"
                                     name="PreferLocalBackdrops" />
                                 <span>Prefer Local Backdrops / Theme Videos</span>
                             </label>
-                            <div class="fieldDescription">If enabled, local backdrop videos (Theme Videos) will be preferred over remote and local trailers.</div>
+                            <div class="fieldDescription">If enabled, local backdrop videos (Theme Videos) will be
+                                preferred over remote and local trailers.</div>
                         </div>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
@@ -101,7 +106,7 @@
                     </div>
 
                     <!-- CUSTOM CONTENT TAB -->
-                    <div id="custom" class="tab-content" style="display:none;">
+                    <div id="media-bar-enhanced-custom" class="tab-content" style="display:none;">
                         <!-- Default Custom Media IDs -->
                         <h2 class="sectionTitle">Custom Media IDs</h2>
                         <div class="checkboxContainer checkboxContainer-withDescription">
@@ -111,7 +116,8 @@
                                 <span>Enable Custom Media IDs</span>
                             </label>
                             <div class="fieldDescription">If enabled, the slideshow will show the items listed
-                                below as the default content. If the list is empty, random items from your library are used.</div>
+                                below as the default content. If the list is empty, random items from your library are
+                                used.</div>
                         </div>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
@@ -119,35 +125,47 @@
                                     name="ApplyLimitsToCustomIds" />
                                 <span>Apply Limits to Custom IDs</span>
                             </label>
-                            <div class="fieldDescription">If enabled, the Max Items limit (Advanced &rarr; Content Limits) will also apply to Custom Media IDs and Collections. By default, custom lists are not limited.</div>
+                            <div class="fieldDescription">If enabled, the Max Items limit (Advanced &rarr; Content
+                                Limits) will also apply to Custom Media IDs and Collections. By default, custom lists
+                                are not limited.</div>
                         </div>
                         <div id="customMediaIdsContainer">
                             <div class="inputContainer">
-                                <label class="inputLabel inputLabelUnfocused" for="CustomMediaIds">Default Media/Collection/Playlist IDs (Newline or Comma-separated)</label>
-                                <textarea class="emby-textarea" is="emby-textarea" id="CustomMediaIds" name="CustomMediaIds"
+                                <label class="inputLabel inputLabelUnfocused" for="CustomMediaIds">Default
+                                    Media/Collection/Playlist IDs (Newline or Comma-separated)</label>
+                                <textarea class="emby-textarea" is="emby-textarea" id="CustomMediaIds"
+                                    name="CustomMediaIds"
                                     style="width: 100%; height: 150px; font-family: monospace;"></textarea>
-                                <div class="fieldDescription">Enter the IDs of the items you want to show in the slideshow as your default content. You can separate them by new line or comma.
+                                <div class="fieldDescription">Enter the IDs of the items you want to show in the
+                                    slideshow as your default content. You can separate them by new line or comma.
                                     <br><br>
-                                    <b>Manual Trailer/Video Override:</b> You can specify a YouTube URL <b>OR</b> a Jellyfin Item ID (e.g. for a Theme Video) for an item by adding it in
-                                    brackets: <br> <code>e.g. ID DESCRIPTION [https://youtu.be/...]</code> or <code>ID [JellyfinItemId] DESCRIPTION</code>.
+                                    <b>Manual Trailer/Video Override:</b> You can specify a YouTube URL <b>OR</b> a
+                                    Jellyfin Item ID (e.g. for a Theme Video) for an item by adding it in
+                                    brackets: <br> <code>e.g. ID DESCRIPTION [https://youtu.be/...]</code> or
+                                    <code>ID [JellyfinItemId] DESCRIPTION</code>.
                                     <br>
                                     Methods:
                                     <ul>
                                         <li><b>YouTube URL:</b> Play a remote trailer from YouTube.</li>
-                                        <li><b>Jellyfin Item ID (GUID):</b> Play the video of another library item (e.g. a Theme Video or Backdrop Video) using the native player.</li>
+                                        <li><b>Jellyfin Item ID (GUID):</b> Play the video of another library item (e.g.
+                                            a Theme Video or Backdrop Video) using the native player.</li>
                                     </ul>
-                                    You can also add a description after the ID using any separator like space, pipe (|) or dash (-): <br>e.g. <code>ID DESCRIPTION</code> or <code>ID | DESCRIPTION</code>
+                                    You can also add a description after the ID using any separator like space, pipe (|)
+                                    or dash (-): <br>e.g. <code>ID DESCRIPTION</code> or <code>ID | DESCRIPTION</code>
                                     <br><br>
-                                    <b>Note:</b> If using a <b>Collection Name</b> (instead of an ID) combined with a description, you <b>MUST</b> use the pipe (|) separator.
+                                    <b>Note:</b> If using a <b>Collection Name</b> (instead of an ID) combined with a
+                                    description, you <b>MUST</b> use the pipe (|) separator.
                                     <br>
                                     <b>Note:</b> The separator <b>MUST NOT</b> be a hex character (0-9, a-f).
                                 </div>
-                                <p>You can find the IDs of your items in the URL of the item page in the web interface.<br>
+                                <p>You can find the IDs of your items in the URL of the item page in the web
+                                    interface.<br>
                                     Example:
                                     <code>https://your-jellyfin-url/web/#/details?id=<b style="color:red;">your-item-id</b>&serverId=your-server-id</code><br><br>
-                                    You can also insert a name of a collection or playlist to fetch the IDs of all items in
-                                    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).
+                                    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>
@@ -160,10 +178,20 @@
                                     name="EnableSeasonalContent" />
                                 <span>Enable Seasonal Content</span>
                             </label>
-                            <div class="fieldDescription">When enabled, seasonal sections below will override the default list or random selection
-                                during their active date ranges. If no season matches the current date, the default Custom Media IDs above or random selection are used as fallback.</div>
+                            <div class="fieldDescription">When enabled, seasonal sections below will override the
+                                default list or random selection
+                                during their active date ranges. If no season matches the current date, the default
+                                Custom Media IDs above or random selection are used as fallback.</div>
                         </div>
                         <div id="seasonalContentContainer" style="display: none;">
+
+                            <div
+                                style="background-color: rgba(255, 255, 255, 0.05); border-left: 4px solid #00a4dc; border-radius: 4px; padding: 1em 1.5em; margin: 1.5em 0; display: flex; align-items: center; gap: 1em;">
+                                <i class="material-icons" style="color: #00a4dc; font-size: 24px;">info</i>
+                                <div>Define seasonal rules to automatically select a selection of items based on the
+                                    date. Rules are evaluated from top to bottom. The first matching rule wins.</div>
+                            </div>
+
                             <div id="seasonalSectionsList"></div>
                             <button is="emby-button" type="button" id="addSeasonBtn" class="raised emby-button"
                                 style="margin-top: 1em; display: inline-flex; align-items: center; gap: 0.4em;">
@@ -175,7 +203,7 @@
                     </div>
 
                     <!-- ADVANCED TAB -->
-                    <div id="advanced" class="tab-content" style="display:none;">
+                    <div id="media-bar-enhanced-advanced" class="tab-content" style="display:none;">
                         <h2 class="sectionTitle">Features</h2>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
@@ -183,8 +211,9 @@
                                     name="SlideAnimationEnabled" />
                                 <span>Enable Slide Animations</span>
                             </label>
-                            <div class="fieldDescription">Enable the zooming-in effect on background images when a new slide is
-                                shown (does not affect trailer backdrops). 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>
@@ -193,7 +222,8 @@
                                 <span>Enable Client-Side Settings</span>
                             </label>
                             <div class="fieldDescription">If enabled, users will see a media bar icon in the header to
-                                override settings (like disabling the bar or trailer backdrops) locally on their device.</div>
+                                override settings (like disabling the bar or trailer backdrops) locally on their device.
+                            </div>
                         </div>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
@@ -201,7 +231,8 @@
                                     name="RandomizeThemeVideos" />
                                 <span>Randomize Backdrop Video</span>
                             </label>
-                            <div class="fieldDescription">If enabled, a random video from the backdrops/theme videos will be selected instead of the first one (if multiple exist).</div>
+                            <div class="fieldDescription">If enabled, a random video from the backdrops/theme videos
+                                will be selected instead of the first one (if multiple exist).</div>
                         </div>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
@@ -209,18 +240,22 @@
                                     name="RandomizeLocalTrailers" />
                                 <span>Randomize Local Trailer</span>
                             </label>
-                            <div class="fieldDescription">If enabled, a random local trailer will be selected instead of the first one (if multiple exist).</div>
+                            <div class="fieldDescription">If enabled, a random local trailer will be selected instead of
+                                the first one (if multiple exist).</div>
                         </div>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
                                 <input is="emby-checkbox" type="checkbox" id="UseSponsorBlock" name="UseSponsorBlock" />
                                 <span>Use SponsorBlock</span>
                             </label>
-                            <div class="fieldDescription">Skip intro/outro segments in YouTube trailers (if data is available).</div>
+                            <div class="fieldDescription">Skip intro/outro segments in YouTube trailers (if data is
+                                available).</div>
                         </div>
                         <div class="selectContainer">
                             <label class="selectLabel" for="PreferredVideoQuality">Preferred YouTube Quality</label>
-                            <select is="emby-select" id="PreferredVideoQuality" name="PreferredVideoQuality" class="selectLayout emby-select-withcolor emby-select" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
+                            <select is="emby-select" id="PreferredVideoQuality" name="PreferredVideoQuality"
+                                class="selectLayout emby-select-withcolor emby-select"
+                                style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
                                 <option value="Auto">Auto (Smart)</option>
                                 <option value="Maximum">Maximum (4K+)</option>
                                 <option value="1080p">1080p</option>
@@ -235,7 +270,9 @@
                                 <span>Start Muted</span>
                             </label>
                             <div class="fieldDescription">Start trailer video playback muted. (Known issue: In the
-                                Android/IOS app, backdrop trailers are always muted.)</div>
+                                Android/IOS app, backdrop trailers are always muted.)<br>
+                                <b style="color:#ffcc00">Warning:</b> Disabling this may cause autoplay to fail on
+                                certain browsers due to strict autoplay policies.</div>
                         </div>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
@@ -322,7 +359,9 @@
                         <h2 class="sectionTitle">Content Sorting</h2>
                         <div class="selectContainer">
                             <label class="selectLabel" for="SortBy">Sort By</label>
-                            <select is="emby-select" id="SortBy" name="SortBy" class="selectLayout emby-select-withcolor emby-select" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
+                            <select is="emby-select" id="SortBy" name="SortBy"
+                                class="selectLayout emby-select-withcolor emby-select"
+                                style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
                                 <option value="Random">Random</option>
                                 <option value="Original">Original (Custom List Order)</option>
                                 <option value="PremiereDate">Premiere Date</option>
@@ -336,14 +375,17 @@
                         </div>
                         <div class="selectContainer">
                             <label class="selectLabel" for="SortOrder">Sort Order</label>
-                            <select is="emby-select" id="SortOrder" name="SortOrder" class="selectLayout emby-select-withcolor emby-select" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
+                            <select is="emby-select" id="SortOrder" name="SortOrder"
+                                class="selectLayout emby-select-withcolor emby-select"
+                                style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
                                 <option value="Ascending">Ascending</option>
                                 <option value="Descending">Descending</option>
                             </select>
                             <div class="fieldDescription">Sort items in Ascending or Descending order.</div>
                         </div>
                         <div class="fieldDescription" style="margin-bottom: 2em; color: #ffcc00;">
-                            <b>Note:</b> Sorting settings apply to both Server content and Custom IDs. 'Original' preserves Custom List order.
+                            <b>Note:</b> Sorting settings apply to both Server content and Custom IDs. 'Original'
+                            preserves Custom List order.
                         </div>
 
                         <h2 class="sectionTitle">Content Limits</h2>
@@ -371,6 +413,15 @@
                             <input is="emby-input" type="number" id="PreloadCount" name="PreloadCount" />
                             <div class="fieldDescription">Number of slides to preload.</div>
                         </div>
+                        <div class="checkboxContainer checkboxContainer-withDescription">
+                            <label>
+                                <input is="emby-checkbox" type="checkbox" id="ShowPaginationDots"
+                                    name="ShowPaginationDots" />
+                                <span>Show Pagination Dots</span>
+                            </label>
+                            <div class="fieldDescription">Show or hide the pagination dots/counter navigation at the
+                                bottom of the slideshow.</div>
+                        </div>
                         <div class="inputContainer">
                             <label class="inputLabel inputLabelUnfocused" for="MaxPaginationDots">Max Pagination
                                 Dots</label>
@@ -391,7 +442,8 @@
                                     name="IncludeWatchedContent" />
                                 <span>Include Watched Content</span>
                             </label>
-                            <div class="fieldDescription">If enabled, watched content will be included in the random selection results.</div>
+                            <div class="fieldDescription">If enabled, watched content will be included in the random
+                                selection results.</div>
                         </div>
                     </div>
 
@@ -443,7 +495,7 @@
                     ApiClient.getPluginConfiguration(MediaBarEnhancedConfigurationPage.pluginId).then(function (config) {
 
                         var keys = [
-                            'IsEnabled', 'ShuffleInterval', 'RetryInterval', 'MinSwipeDistance',
+                            'ShuffleInterval', 'RetryInterval', 'MinSwipeDistance',
                             'LoadingCheckInterval', 'MaxPlotLength', 'MaxMovies', 'MaxTvShows',
                             'MaxItems', 'PreloadCount', 'FadeTransitionDuration', 'MaxPaginationDots',
                             'SlideAnimationEnabled', 'EnableVideoBackdrop', 'UseSponsorBlock',
@@ -453,9 +505,15 @@
                             'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
                             'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
                             'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
-                            'IncludeWatchedContent'
+                            'IncludeWatchedContent', 'ShowPaginationDots'
                         ];
 
+                        // Manual mapping for MediaBarIsEnabled -> IsEnabled, to avoid conflicts with other plugins
+                        var mediaBarEnabledCheckbox = page.querySelector('#MediaBarIsEnabled');
+                        if (mediaBarEnabledCheckbox) {
+                            mediaBarEnabledCheckbox.checked = config.IsEnabled;
+                        }
+
                         keys.forEach(function (key) {
                             var el = page.querySelector('#' + key);
                             if (el) {
@@ -489,16 +547,16 @@
                             seasonalCheckbox.addEventListener('change', updateSeasonalVisibility);
                             updateSeasonalVisibility();
                         }
-                        
+
                         // Add Season Button
                         var addSeasonBtn = page.querySelector('#addSeasonBtn');
                         if (addSeasonBtn) {
                             // Remove existing listeners to avoid duplicates if re-attached
-                             var newBtn = addSeasonBtn.cloneNode(true);
-                             addSeasonBtn.parentNode.replaceChild(newBtn, addSeasonBtn);
-                             newBtn.addEventListener('click', function() {
-                                 MediaBarEnhancedConfigurationPage.addSeasonalSection(page);
-                             });
+                            var newBtn = addSeasonBtn.cloneNode(true);
+                            addSeasonBtn.parentNode.replaceChild(newBtn, addSeasonBtn);
+                            newBtn.addEventListener('click', function () {
+                                MediaBarEnhancedConfigurationPage.addSeasonalSection(page);
+                            });
                         }
 
                         // Handle Prefer Local Trailers visibility
@@ -533,8 +591,15 @@
                     if (seasonalInput) seasonalInput.value = sectionsJson;
 
                     var config = {};
+
+                    // Manual mapping for MediaBarIsEnabled -> IsEnabled, to avoid conflicts with other plugins
+                    var mediaBarEnabledCheckbox = page.querySelector('#MediaBarIsEnabled');
+                    if (mediaBarEnabledCheckbox) {
+                        config.IsEnabled = mediaBarEnabledCheckbox.checked;
+                    }
+
                     var keys = [
-                        'IsEnabled', 'ShuffleInterval', 'RetryInterval', 'MinSwipeDistance',
+                        'ShuffleInterval', 'RetryInterval', 'MinSwipeDistance',
                         'LoadingCheckInterval', 'MaxPlotLength', 'MaxMovies', 'MaxTvShows',
                         'MaxItems', 'PreloadCount', 'FadeTransitionDuration', 'MaxPaginationDots',
                         'SlideAnimationEnabled', 'EnableVideoBackdrop', 'UseSponsorBlock',
@@ -544,7 +609,7 @@
                         'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
                         'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
                         'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
-                        'IncludeWatchedContent'
+                        'IncludeWatchedContent', 'ShowPaginationDots'
                     ];
 
                     keys.forEach(function (key) {
@@ -563,16 +628,16 @@
                     });
                 },
 
-                renderSeasonalSections: function(page, sections) {
+                renderSeasonalSections: function (page, sections) {
                     var container = page.querySelector('#seasonalSectionsList');
                     if (!container) return;
                     container.innerHTML = '';
-                    sections.forEach(function(section, index) {
+                    sections.forEach(function (section, index) {
                         MediaBarEnhancedConfigurationPage.createSectionElement(container, section, index + 1);
                     });
                 },
 
-                addSeasonalSection: function(page) {
+                addSeasonalSection: function (page) {
                     var container = page.querySelector('#seasonalSectionsList');
                     if (!container) return;
                     var index = container.children.length + 1;
@@ -584,25 +649,25 @@
                     }, index);
                 },
 
-                createSectionElement: function(container, data, index) {
+                createSectionElement: function (container, data, index) {
                     var div = document.createElement('div');
                     div.className = 'seasonal-section';
                     div.style.cssText = 'background: rgba(0,0,0,0.2); padding: 1em; margin-bottom: 1em; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1);';
-                    
+
                     var days = [];
-                    for(var i=1; i<=31; i++) days.push(i);
+                    for (var i = 1; i <= 31; i++) days.push(i);
                     var months = [
-                        {v:1, n:'Jan'}, {v:2, n:'Feb'}, {v:3, n:'Mar'}, {v:4, n:'Apr'}, 
-                        {v:5, n:'May'}, {v:6, n:'Jun'}, {v:7, n:'Jul'}, {v:8, n:'Aug'}, 
-                        {v:9, n:'Sep'}, {v:10, n:'Oct'}, {v:11, n:'Nov'}, {v:12, n:'Dec'}
+                        { v: 1, n: 'Jan' }, { v: 2, n: 'Feb' }, { v: 3, n: 'Mar' }, { v: 4, n: 'Apr' },
+                        { v: 5, n: 'May' }, { v: 6, n: 'Jun' }, { v: 7, n: 'Jul' }, { v: 8, n: 'Aug' },
+                        { v: 9, n: 'Sep' }, { v: 10, n: 'Oct' }, { v: 11, n: 'Nov' }, { v: 12, n: 'Dec' }
                     ];
 
                     function mkSelect(val, opts, cls) {
                         var h = '<select class="emby-select emby-select-withcolor ' + cls + '" style="width: auto; display: inline-block; margin-right: 5px; -webkit-appearance: menulist; appearance: menulist;">';
-                        opts.forEach(function(o) {
+                        opts.forEach(function (o) {
                             var v = o.v || o;
                             var n = o.n || o;
-                            h += '<option value="'+v+'" ' + (v == val ? 'selected' : '') + '>' + n + '</option>';
+                            h += '<option value="' + v + '" ' + (v == val ? 'selected' : '') + '>' + n + '</option>';
                         });
                         h += '</select>';
                         return h;
@@ -612,24 +677,28 @@
 
                     div.innerHTML =
                         '<div class="inputContainer" style="margin-bottom: 0.5em;">' +
-                        '    <label class="inputLabel" style="font-size: 1.2em; font-weight: bold; margin-bottom:0.5em; display:block;">' + labelText + '</label>' +
-                        '    <div style="display: flex; align-items: center;">' +
-                        '        <div style="flex-grow:1;">' +
-                        '            <input is="emby-input" type="text" class="emby-input section-name" value="' + (data.Name || '') + '" />' +
+                        '    <div style="display: flex; align-items: center; justify-content: space-between;">' +
+                        '        <label class="inputLabel section-title" style="font-size: 1.2em; font-weight: bold; margin-bottom:0.5em; display:block;">' + labelText + '</label>' +
+                        '        <div style="display: flex; gap: 0.5em;">' +
+                        '            <button type="button" is="paper-icon-button-light" class="btn-move-up" title="Move Up"><i class="material-icons">arrow_upward</i></button>' +
+                        '            <button type="button" is="paper-icon-button-light" class="btn-move-down" title="Move Down"><i class="material-icons">arrow_downward</i></button>' +
+                        '            <button type="button" is="paper-icon-button-light" class="btn-remove" title="Remove" style="color: #a94442;"><i class="material-icons">delete</i></button>' +
                         '        </div>' +
-                        '        <button type="button" class="raised emby-button remove-section" style="background: #a94442; min-width: unset; margin-left: 1em;">Remove</button>' +
                         '    </div>' +
-                        '    <div class="fieldDescription">Name of the season</div>' +
+                        '    <div class="inputContainer">' +
+                        '        <input is="emby-input" type="text" class="emby-input section-name" style="width: 60%;" value="' + (data.Name || '') + '" />' +
+                        '        <div class="fieldDescription">Name of the season</div>' +
+                        '    </div>' +
                         '</div>' +
                         '<div class="inputContainer" style="margin-bottom: 1em;">' +
                         '    <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Active Period</label>' +
                         '    <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em;">' +
                         '        <span>From:</span>' +
-                                 mkSelect(data.StartDay, days, 'start-day') +
-                                 mkSelect(data.StartMonth, months, 'start-month') +
+                        mkSelect(data.StartDay, days, 'start-day') +
+                        mkSelect(data.StartMonth, months, 'start-month') +
                         '        <span style="margin-left: 1em;">To:</span>' +
-                                 mkSelect(data.EndDay, days, 'end-day') +
-                                 mkSelect(data.EndMonth, months, 'end-month') +
+                        mkSelect(data.EndDay, days, 'end-day') +
+                        mkSelect(data.EndMonth, months, 'end-month') +
                         '    </div>' +
                         '    <div class="fieldDescription">Date range (inclusive) when this content is active.</div>' +
                         '</div>' +
@@ -639,17 +708,42 @@
                         '    <div class="fieldDescription">Comma-separated or Newline separated list of Movie/Series/Collection IDs to show during this season.<br>Same options available as for the default media IDs.</div>' +
                         '</div>';
 
-                    div.querySelector('.remove-section').addEventListener('click', function() {
+                    div.querySelector('.btn-remove').addEventListener('click', function () {
                         div.remove();
+                        MediaBarEnhancedConfigurationPage.updateSectionTitles(container);
+                    });
+
+                    div.querySelector('.btn-move-up').addEventListener('click', function () {
+                        if (div.previousElementSibling) {
+                            container.insertBefore(div, div.previousElementSibling);
+                            MediaBarEnhancedConfigurationPage.updateSectionTitles(container);
+                        }
+                    });
+
+                    div.querySelector('.btn-move-down').addEventListener('click', function () {
+                        if (div.nextElementSibling) {
+                            container.insertBefore(div.nextElementSibling, div);
+                            MediaBarEnhancedConfigurationPage.updateSectionTitles(container);
+                        }
                     });
 
                     container.appendChild(div);
                 },
 
-                getSeasonalSectionsFromUI: function(page) {
+                updateSectionTitles: function (container) {
+                    var sections = container.querySelectorAll('.seasonal-section');
+                    sections.forEach(function (section, index) {
+                        var title = section.querySelector('.section-title');
+                        if (title) {
+                            title.innerText = 'Season list #' + (index + 1);
+                        }
+                    });
+                },
+
+                getSeasonalSectionsFromUI: function (page) {
                     var sections = [];
                     var els = page.querySelectorAll('.seasonal-section');
-                    els.forEach(function(el) {
+                    els.forEach(function (el) {
                         sections.push({
                             Name: el.querySelector('.section-name').value,
                             StartDay: parseInt(el.querySelector('.start-day').value),

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

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

Jellyfin.Plugin.MediaBarEnhanced/ScriptInjector.cs

@@ -60,6 +60,11 @@ namespace Jellyfin.Plugin.MediaBarEnhanced
                 var content = File.ReadAllText(indexPath);
                 var injectedJS = false;
                 var injectedCSS = false;
+                var modified = false;
+
+                // Cleanup legacy tags first to avoid duplicates or conflicts
+                content = RemoveLegacyTags(content, ref modified);
+
 
                 if (!content.Contains(ScriptTag))
                 {
@@ -81,19 +86,26 @@ namespace Jellyfin.Plugin.MediaBarEnhanced
                      }
                 }
 
-                if (injectedJS && injectedCSS)
+                if (injectedJS || injectedCSS || modified)
                 {
                     File.WriteAllText(indexPath, content);
-                    _logger.LogInformation("MediaBarEnhanced script injected into index.html.");
-                } else if (injectedJS)
-                {
-                    File.WriteAllText(indexPath, content);
-                    _logger.LogInformation("MediaBarEnhanced JS script injected into index.html. But CSS was already present or could not be injected.");
-                }
-                else if (injectedCSS)
-                {
-                    File.WriteAllText(indexPath, content);
-                    _logger.LogInformation("MediaBarEnhanced CSS injected into index.html. But JS script was already present or could not be injected.");
+
+                    if (injectedJS && injectedCSS)
+                    {
+                        _logger.LogInformation("MediaBarEnhanced script injected into index.html.");
+                    }
+                    else if (injectedJS)
+                    {
+                        _logger.LogInformation("MediaBarEnhanced JS script injected into index.html. But CSS was already present or could not be injected.");
+                    }
+                    else if (injectedCSS)
+                    {
+                        _logger.LogInformation("MediaBarEnhanced CSS injected into index.html. But JS script was already present or could not be injected.");
+                    }
+                    else
+                    {
+                       _logger.LogInformation("MediaBarEnhanced script and CSS already present. Legacy tags removed if found.");
+                    }
                 }
                 else
                 {
@@ -148,6 +160,9 @@ namespace Jellyfin.Plugin.MediaBarEnhanced
                     modified = true;
                 }
 
+                // Remove legacy tags
+                content = RemoveLegacyTags(content, ref modified);
+
                 if (modified)
                 {
                     File.WriteAllText(indexPath, content);
@@ -242,5 +257,33 @@ namespace Jellyfin.Plugin.MediaBarEnhanced
                 _logger.LogWarning(ex, "Error attempting to unregister file transformation. It might not have been registered.");
             }
         }
+        /// <summary>
+        /// Removes legacy script and css tags from the content.
+        /// </summary>
+        /// <param name="content">The file content.</param>
+        /// <param name="modified">Ref bool to track if changes were made.</param>
+        /// <returns>The modified content.</returns>
+        private string RemoveLegacyTags(string content, ref bool modified)
+        {
+            // Legacy tags (used in versions prior to 1.6.3.0 where paths started with / instead of ../)
+            const string LegacyScriptTag = "<script src=\"/MediaBarEnhanced/Resources/mediaBarEnhanced.js\" defer></script>";
+            const string LegacyCssTag = "<link rel=\"stylesheet\" href=\"/MediaBarEnhanced/Resources/mediaBarEnhanced.css\" />";
+
+            if (content.Contains(LegacyScriptTag))
+            {
+                content = content.Replace(LegacyScriptTag + Environment.NewLine, "").Replace(LegacyScriptTag, "");
+                modified = true;
+                _logger.LogInformation("Legacy MediaBarEnhanced script tag removed.");
+            }
+
+            if (content.Contains(LegacyCssTag))
+            {
+                content = content.Replace(LegacyCssTag + Environment.NewLine, "").Replace(LegacyCssTag, "");
+                modified = true;
+                _logger.LogInformation("Legacy MediaBarEnhanced CSS tag removed.");
+            }
+
+            return content;
+        }
     }
 }

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css

@@ -768,7 +768,22 @@
   .button-container {
     top: calc(50% + 25vh);
     left: 50%;
-    transform: translateX(-50%) scale(0.95);
+    transform: translateX(-50%);
+    width: max-content;
+    max-width: 98vw;
+    flex-wrap: nowrap;
+    justify-content: center;
+    gap: 15px;
+  }
+
+  .button-container button {
+    margin: 0 !important;
+    min-width: 0 !important;
+  }
+
+  .button-container .detail-button,
+  .button-container .favorite-button {
+    flex-shrink: 0;
   }
 
   .logo {
@@ -805,30 +820,6 @@
     .trailer-button {
       padding: 8px 14px;
     }
-
-    .misc-info {
-      flex-wrap: wrap;
-      justify-content: center;
-      gap: 0px 10px;
-    }
-
-    .runTime {
-      width: 100%;
-      justify-content: center;
-      margin-top: 0.5vh;
-    }
-
-    .misc-info .separator-icon:last-of-type {
-      display: none;
-    }
-
-    .genre {
-      top: calc(50% + 16vh);
-    }
-
-    .button-container {
-      top: calc(50% + 27vh);
-    }
   }
 }
 
@@ -1000,3 +991,19 @@
 .layout-tv .backdrop-container{
   top: -5%;
 }
+
+@media screen and (min-width: 960px) and (-webkit-device-pixel-ratio: 1) {
+  .layout-tv .backdrop.animate {
+    animation: none !important;
+  }
+  
+  .layout-tv .logo.animate {
+    animation: none !important;
+  }
+  
+  .layout-tv .slide-counter,
+  .layout-tv .dots-container {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}

manifest.json

@@ -9,15 +9,47 @@
     "imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
     "versions": [
       {
-        "version": "1.6.4.0",
-        "changelog": "- fix slide transition when using local/backdrop videos",
+        "version": "1.7.1.4",
+        "changelog": "- feat: add option to disable pagination dots/counter\n- fix button issue on mobile when using ElegantFin Theme",
         "targetAbi": "10.11.0.0",
-        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.4.0/Jellyfin.Plugin.MediaBarEnhanced.zip",
-        "checksum": "ef764cb3c5ed2281b01974b8625231da",
-        "timestamp": "2026-02-15T22:39:47Z"
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.7.1.3/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "688650f91e0f798c6258b3c98544742b",
+        "timestamp": "2026-03-08T15:20:13Z"
       },
       {
-        "version": "1.6.3.0",
+        "version": "1.7.0.14",
+        "changelog": "- Switched to YouTube no-cookie host and referrer policy for iframe security\n- fix playback issues on iOS/MacOS \n- Disable animations and backdrop filters for TV layout\n- removed list.txt functionality to clean up, use the web ui instead\n- Enhance logging with contextual messages, in order to be able to clearly assign logs to this plugin",
+        "targetAbi": "10.11.0.0",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.7.0.14/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "07875c74aab766657be3b8033be6d53f",
+        "timestamp": "2026-03-06T03:13:48Z"
+      },
+      {
+        "version": "1.6.6.4",
+        "changelog": "- feat: add static backdrop also for video backdrops\n- fix: renaming issue of settings (avoiding conflict with other plugins)",
+        "targetAbi": "10.11.0.0",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.6.4/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "2c55cf9687e44b04a0824997e2980dc9",
+        "timestamp": "2026-02-19T17:21:40Z"
+      },
+      {
+        "version": "1.6.5.2",
+        "changelog": "- refactored seasonal UI settings",
+        "targetAbi": "10.11.0.0",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.5.2/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "552cb3376c77ede5a0664ced56bf7d1e",
+        "timestamp": "2026-02-16T23:57:57Z"
+      },
+      {
+        "version": "1.6.4.1",
+        "changelog": "- fix slide transition when using local/backdrop videos",
+        "targetAbi": "10.11.0.0",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.4.1/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "a9c5a863427de84639eca082483936da",
+        "timestamp": "2026-02-15T22:56:17Z"
+      },
+      {
+        "version": "1.6.3.1",
         "changelog": "- fix path issue on subpath installations",
         "targetAbi": "10.11.0.0",
         "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.3.0/Jellyfin.Plugin.MediaBarEnhanced.zip",

without_list_txt/configPage.html

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