Bump version to 1.7.0.0

.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/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,11 @@
                 <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>
@@ -101,7 +101,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">
@@ -146,7 +146,7 @@
                                     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
+                                    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>
@@ -164,6 +164,12 @@
                                 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 +181,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>
@@ -235,7 +241,7 @@
                                 <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>
@@ -443,7 +449,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',
@@ -456,6 +462,12 @@
                             'IncludeWatchedContent'
                         ];
 
+                        // 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) {
@@ -533,8 +545,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',
@@ -612,14 +631,18 @@
 
                     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>' +
@@ -639,13 +662,38 @@
                         '    <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);
                 },
 
+                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');

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.1</Version>
+    <Version>1.7.0.0</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.js

@@ -63,6 +63,7 @@ const CONFIG = {
   sortOrder: "Ascending",
   applyLimitsToCustomIds: false,
   seasonalSections: "[]",
+  isEnabled: true,
 };
 
 // State management
@@ -743,6 +744,7 @@ const SlideUtils = {
           height: '100%',
           width: '100%',
           videoId: videoId,
+          host: 'https://www.youtube-nocookie.com',
           playerVars: {
             autoplay: 1,
             controls: 1,
@@ -750,8 +752,15 @@ const SlideUtils = {
             rel: 0,
             playsinline: 1,
             origin: window.location.origin,
-            widget_referrer: window.location.href,
             enablejsapi: 1
+          },
+          events: {
+            'onReady': (event) => {
+              const iframe = event.target.getIframe();
+              if (iframe) {
+                iframe.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
+              }
+            }
           }
         });
       });
@@ -1638,6 +1647,7 @@ const SlideCreator = {
       "data-item-id": itemId,
     });
 
+    let videoBackdrop;
     let backdrop;
     let isVideo = false;
     let trailerUrl = null;
@@ -1721,11 +1731,19 @@ const SlideCreator = {
         // Create container for YouTube API
         const videoClass = CONFIG.fullWidthVideo ? "video-backdrop-full" : "video-backdrop-default";
 
-        backdrop = SlideUtils.createElement("div", {
-          className: `backdrop video-backdrop ${videoClass}`,
-          id: `youtube-player-${itemId}`
+        // Create a wrapper for opacity transition
+        videoBackdrop = SlideUtils.createElement("div", {
+            className: `backdrop video-backdrop ${videoClass}`,
+            style: "opacity: 0; transition: opacity 1.2s ease-in-out;" // Start interrupted/transparent
         });
 
+        const ytPlayerDiv = SlideUtils.createElement("div", {
+          id: `youtube-player-${itemId}`,
+          style: "width: 100%; height: 100%;"
+        });
+        
+        videoBackdrop.appendChild(ytPlayerDiv);
+
         // Initialize YouTube Player
         SlideUtils.loadYouTubeIframeAPI().then(() => {
           // Fetch SponsorBlock data
@@ -1741,7 +1759,6 @@ const SlideCreator = {
               loop: 0,
               playsinline: 1,
               origin: window.location.origin,
-              widget_referrer: window.location.href,
               enablejsapi: 1
             };
 
@@ -1774,13 +1791,22 @@ const SlideCreator = {
               height: '100%',
               width: '100%',
               videoId: videoId,
+              host: 'https://www.youtube-nocookie.com',
               playerVars: playerVars,
               events: {
                 'onReady': (event) => {
+                  const iframe = event.target.getIframe();
+                  if (iframe) {
+                    iframe.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
+                  }
+
                   // Store start/end time and videoId for later use
                   event.target._startTime = playerVars.start || 0;
                   event.target._endTime = playerVars.end || undefined;
                   event.target._videoId = videoId;
+                  
+                  // Store reference to wrapper for fading
+                  event.target._wrapperDiv = videoBackdrop;
 
                   if (STATE.slideshow.isMuted) {
                     event.target.mute();
@@ -1830,6 +1856,13 @@ const SlideCreator = {
                   }
                 },
                 'onStateChange': (event) => {
+                  // Fade in when playing
+                  if (event.data === YT.PlayerState.PLAYING) {
+                      if (event.target._wrapperDiv) {
+                          event.target._wrapperDiv.style.opacity = "1";
+                      }
+                  }
+                  
                   if (event.data === YT.PlayerState.ENDED) {
                     const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
                     if (slide && slide.classList.contains('active')) {
@@ -1853,22 +1886,23 @@ const SlideCreator = {
       } else if (!isYoutube) {
         isVideo = true;
 
+        const videoSrc = (typeof trailerUrl === 'object' ? trailerUrl.url : trailerUrl);
         const videoAttributes = {
           className: "backdrop video-backdrop",
-          src: (typeof trailerUrl === 'object' ? trailerUrl.url : trailerUrl),
-          preload: "auto",
+          preload: "none",
           disablePictureInPicture: true,
-          style: "object-fit: cover; object-position: center center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none;"
+          "data-src": videoSrc,
+          style: "object-fit: cover; object-position: center center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease-in-out;"
         };
 
         videoAttributes.muted = "";
 
-        backdrop = SlideUtils.createElement("video", videoAttributes);
-        backdrop.volume = 0.4;
+        videoBackdrop = SlideUtils.createElement("video", videoAttributes);
+        videoBackdrop.volume = 0.4;
 
-        STATE.slideshow.videoPlayers[itemId] = backdrop;
+        STATE.slideshow.videoPlayers[itemId] = videoBackdrop;
 
-        backdrop.addEventListener('play', (event) => {
+        videoBackdrop.addEventListener('play', (event) => {
           const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
           if (!slide || !slide.classList.contains('active')) {
             console.log(`Local video ${itemId} started playing but slide is not active, pausing.`);
@@ -1876,19 +1910,23 @@ const SlideCreator = {
             event.target.currentTime = 0;
             return;
           }
+          
+          // Fade in
+          event.target.style.opacity = "1";
+          
           if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
             STATE.slideshow.slideInterval.stop();
           }
         });
 
-        backdrop.addEventListener('ended', (event) => {
+        videoBackdrop.addEventListener('ended', (event) => {
             const slide = event.target.closest('.slide');
             if (slide && slide.classList.contains('active')) {
               SlideshowManager.nextSlide();
             }
         });
 
-        backdrop.addEventListener('error', (event) => {
+        videoBackdrop.addEventListener('error', (event) => {
           console.warn(`Local video error for item ${itemId}`);
           const slide = event.target.closest('.slide');
           if (slide && slide.classList.contains('active')) {
@@ -1898,13 +1936,18 @@ const SlideCreator = {
       }
     }
 
-    if (!isVideo) {
-      backdrop = SlideUtils.createElement("img", {
-        className: "backdrop high-quality",
-        src: this.buildImageUrl(item, "Backdrop", 0, serverAddress, 60),
-        alt: LocalizationUtils.getLocalizedString('Backdrop', 'Backdrop'),
-        loading: "eager",
-      });
+    // Always create a static backdrop image (to show while video loads or if no video)
+    backdrop = SlideUtils.createElement("img", {
+      className: "backdrop high-quality",
+      src: this.buildImageUrl(item, "Backdrop", 0, serverAddress, 60),
+      alt: LocalizationUtils.getLocalizedString('Backdrop', 'Backdrop'),
+      loading: "eager",
+    });
+
+    // If video, static backdrop should be strictly a background (no animation)
+    if (isVideo) {
+        backdrop.style.animation = "none";
+        backdrop.style.transition = "none";
     }
 
     const backdropOverlay = SlideUtils.createElement("div", {
@@ -1914,8 +1957,14 @@ const SlideCreator = {
     const backdropContainer = SlideUtils.createElement("div", {
       className: "backdrop-container" + (isVideo && CONFIG.fullWidthVideo ? " full-width-video" : ""),
     });
+    
     backdropContainer.append(backdrop, backdropOverlay);
 
+    // If video exists, append on top of static backdrop
+    if (isVideo && videoBackdrop) {
+        backdropContainer.appendChild(videoBackdrop);
+    }
+
     const logo = SlideUtils.createElement("img", {
       className: "logo high-quality",
       src: this.buildImageUrl(item, "Logo", undefined, serverAddress, 40),
@@ -2356,25 +2405,33 @@ const SlideshowManager = {
       currentSlide.classList.add("active");
 
       // Manage Video Playback: Stop others, Play current
-      // 1. Stop all other YouTube players and local video elements
-      if (STATE.slideshow.videoPlayers) {
-        Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
-          if (id !== currentItemId) {
-            const p = STATE.slideshow.videoPlayers[id];
-            if (!p) return;
-            // YouTube player
-            if (typeof p.pauseVideo === 'function') {
-              p.pauseVideo();
+      // 1. Stop all other YouTube players and local video elements, release connections
+      setTimeout(() => {
+        if (STATE.slideshow.videoPlayers) {
+          Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
+            if (id !== currentItemId) {
+              const p = STATE.slideshow.videoPlayers[id];
+              if (!p) return;
+              // YouTube player
+              if (typeof p.pauseVideo === 'function') {
+                p.pauseVideo();
+              }
+              // HTML5 <video> element (local trailers), release HTTP connection
+              if (p instanceof HTMLVideoElement) {
+                p.pause();
+                p.muted = true;
+                p.currentTime = 0;
+                // Save src to data-src and release the HTTP streaming connection
+                if (p.src && !p.getAttribute('data-src')) {
+                  p.setAttribute('data-src', p.src);
+                }
+                p.removeAttribute('src');
+                p.load();
+              }
             }
-            // HTML5 <video> element (local trailers)
-            if (p instanceof HTMLVideoElement) {
-              p.pause();
-              p.muted = true;
-              p.currentTime = 0;
-            }
-          }
-        });
-      }
+          });
+        }
+      }, CONFIG.fadeTransitionDuration);
 
       // 2. Pause all other HTML5 videos e.g. local trailers
       document.querySelectorAll('video').forEach(video => {
@@ -2407,6 +2464,12 @@ const SlideshowManager = {
 
       if (videoBackdrop) {
         if (videoBackdrop.tagName === 'VIDEO') {
+          // Restore src from data-src if it was deactivated to release connections
+          const lazySrc = videoBackdrop.getAttribute('data-src');
+          if (lazySrc && !videoBackdrop.src) {
+            videoBackdrop.src = lazySrc;
+          }
+
           videoBackdrop.currentTime = 0;
 
           videoBackdrop.muted = STATE.slideshow.isMuted;
@@ -2605,7 +2668,7 @@ const SlideshowManager = {
    */
   pruneSlideCache() {
     const currentIndex = STATE.slideshow.currentSlideIndex;
-    const keepRange = 5;
+    const keepRange = CONFIG.preloadCount + 1;
     let prunedAny = false;
 
     Object.keys(STATE.slideshow.createdSlides).forEach((itemId) => {
@@ -2623,7 +2686,17 @@ const SlideshowManager = {
         if (STATE.slideshow.videoPlayers[itemId]) {
           const player = STATE.slideshow.videoPlayers[itemId];
           if (typeof player.destroy === 'function') {
+            // YouTube player
             player.destroy();
+          } else if (player instanceof HTMLVideoElement) {
+            // HTML5 video, release HTTP streaming connection
+            player.pause();
+            // Save src to data-src and release the HTTP streaming connection
+            if (player.src && !player.getAttribute('data-src')) {
+              player.setAttribute('data-src', player.src);
+            }
+            player.removeAttribute('src');
+            player.load();
           }
           delete STATE.slideshow.videoPlayers[itemId];
         }
@@ -2802,7 +2875,7 @@ const SlideshowManager = {
       });
     }
 
-    // 2. Stop and mute all HTML5 videos
+    // 2. Stop and mute all HTML5 videos, release connections
     const container = document.getElementById("slides-container");
     if (container) {
       container.querySelectorAll('video').forEach(video => {
@@ -2810,6 +2883,12 @@ const SlideshowManager = {
           video.pause();
           video.muted = true;
           video.currentTime = 0;
+          // Save src and release HTTP streaming connection
+          if (video.src && !video.getAttribute('data-src')) {
+            video.setAttribute('data-src', video.src);
+          }
+          video.removeAttribute('src');
+          video.load();
         } catch (e) {
           console.warn("Error stopping HTML5 video:", e);
         }
@@ -2842,9 +2921,14 @@ const SlideshowManager = {
       return;
     }
 
-    // HTML5 video: just resume, don't reset currentTime
+    // HTML5 video: restore src if needed, then resume
     const html5Video = currentSlide.querySelector('video.video-backdrop');
     if (html5Video) {
+      // Restore src from data-src if it was cleared to release connections
+      const lazySrc = html5Video.getAttribute('data-src');
+      if (lazySrc && !html5Video.src) {
+        html5Video.src = lazySrc;
+      }
       html5Video.muted = STATE.slideshow.isMuted;
       if (!STATE.slideshow.isMuted) html5Video.volume = 0.4;
       html5Video.play().catch(e => console.warn("Error resuming HTML5 video:", e));
@@ -3650,8 +3734,8 @@ const slidesInit = async () => {
   
   if (CONFIG.enableClientSideSettings) {
       MediaBarEnhancedSettingsManager.init();
-      const isEnabled = MediaBarEnhancedSettingsManager.getSetting('enabled', true);
-      if (!isEnabled) {
+      const isClientSideEnabled = MediaBarEnhancedSettingsManager.getSetting('enabled', true);
+      if (!isClientSideEnabled) {
           console.log("MediaBarEnhanced: Disabled by client-side setting.");
           const homeSections = document.querySelector('.homeSectionsContainer');
           if (homeSections) {

manifest.json

@@ -8,6 +8,30 @@
     "category": "General",
     "imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
     "versions": [
+      {
+        "version": "1.7.0.0",
+        "changelog": "- Add YouTube no-cookie host and referrer policy for iframe security to fix playback issues on iOS/MacOS",
+        "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": "",
+        "timestamp": ""
+      },
+      {
+        "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",