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

Jellyfin.Plugin.MediaBarEnhanced/Api/MediaBarEnhancedController.cs

@@ -44,18 +44,6 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
 
             var stream = assembly.GetManifestResourceStream(resourceName);
 
-            // if (stream == null)
-            // {   
-            //     // Try fallback/debug matching
-            //     var allNames = assembly.GetManifestResourceNames();
-            //     var match = Array.Find(allNames, n => n.EndsWith(resourcePath, StringComparison.OrdinalIgnoreCase));
-
-            //     if (match != null)
-            //     {
-            //         stream = assembly.GetManifestResourceStream(match);
-            //     }
-            // }
-
             if (stream == null)
             {
                 return NotFound($"Resource not found: {resourceName}");

Jellyfin.Plugin.MediaBarEnhanced/Api/OverlayImageController.cs

@@ -0,0 +1,182 @@
+using System;
+using System.IO;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+using MediaBrowser.Common.Configuration;
+using Microsoft.AspNetCore.Authorization;
+
+namespace Jellyfin.Plugin.MediaBarEnhanced.Api
+{
+    /// <summary>
+    /// Controller for handling custom overlay image uploads and retrieval.
+    /// </summary>
+    [ApiController]
+    [Route("MediaBarEnhanced")]
+    public class OverlayImageController : ControllerBase
+    {
+        private readonly IApplicationPaths _applicationPaths;
+        private readonly string _imageDirectory;
+
+        public OverlayImageController(IApplicationPaths applicationPaths)
+        {
+            _applicationPaths = applicationPaths;
+            _imageDirectory = Path.Combine(applicationPaths.PluginConfigurationsPath, "Jellyfin.Plugin.MediaBarEnhanced", "Assets");
+        }
+
+        /// <summary>
+        /// Uploads a new custom overlay image.
+        /// </summary>
+        [Authorize(Policy = "RequiresElevation")]
+        [HttpPost("OverlayImage")]
+        [Consumes("multipart/form-data")]
+        public async Task<IActionResult> UploadImage([FromForm] IFormFile file, [FromQuery] string? filename = null)
+        {
+            if (file == null || file.Length == 0)
+            {
+                return BadRequest("No file uploaded.");
+            }
+
+            // Extract original extension or fallback to .jpg
+            string extension = Path.GetExtension(file.FileName);
+            if (string.IsNullOrWhiteSpace(extension)) extension = ".jpg";
+            
+            // Delete any existing file with this prefix before saving the new one
+            string prefix = string.IsNullOrWhiteSpace(filename) ? "custom_overlay_image_global" : $"custom_overlay_image_{filename}";
+
+            try
+            {
+                if (!Directory.Exists(_imageDirectory))
+                {
+                    Directory.CreateDirectory(_imageDirectory);
+                }
+
+                // Remove existing
+                var existingFiles = Directory.GetFiles(_imageDirectory, $"{prefix}.*");
+                foreach(var extFile in existingFiles)
+                {
+                    System.IO.File.Delete(extFile);
+                }
+
+                string targetFileName = $"{prefix}{extension}";
+                string targetPath = Path.Combine(_imageDirectory, targetFileName);
+
+                using (var stream = new FileStream(targetPath, FileMode.Create, FileAccess.Write, FileShare.None))
+                {
+                    await file.CopyToAsync(stream).ConfigureAwait(false);
+                }
+
+                // Return the GET URL that the frontend can use
+                var qs = string.IsNullOrWhiteSpace(filename) ? "" : $"?filename={Uri.EscapeDataString(filename)}&";
+                var getUrl = $"/MediaBarEnhanced/OverlayImage{qs}{(qs == "" ? "?" : "")}t={DateTimeOffset.UtcNow.ToUnixTimeMilliseconds()}";
+                return Ok(new { url = getUrl });
+            }
+            catch (Exception ex)
+            {
+                return StatusCode(500, $"Internal server error: {ex.Message}");
+            }
+        }
+
+        /// <summary>
+        /// Retrieves the custom overlay image.
+        /// </summary>
+        [HttpGet("OverlayImage")]
+        public IActionResult GetImage([FromQuery] string? filename = null)
+        {
+            string prefix = string.IsNullOrWhiteSpace(filename) ? "custom_overlay_image_global" : $"custom_overlay_image_{filename}";
+            
+            if (!Directory.Exists(_imageDirectory))
+                return NotFound();
+
+            var existingFiles = Directory.GetFiles(_imageDirectory, $"{prefix}.*");
+            if (existingFiles.Length == 0)
+                return NotFound();
+
+            string targetPath = existingFiles[0];
+
+            // Read the file and return with appropriate MIME type
+            var stream = new FileStream(targetPath, FileMode.Open, FileAccess.Read, FileShare.ReadWrite | FileShare.Delete);
+            
+            string mimeType = "application/octet-stream";
+            string ext = Path.GetExtension(targetPath).ToLowerInvariant();
+            switch (ext) {
+                case ".jpg": case ".jpeg": mimeType = "image/jpeg"; break;
+                case ".png": mimeType = "image/png"; break;
+                case ".gif": mimeType = "image/gif"; break;
+                case ".webp": mimeType = "image/webp"; break;
+            }
+            return File(stream, mimeType);
+        }
+
+        /// <summary>
+        /// Deletes a custom overlay image.
+        /// </summary>
+        [Authorize(Policy = "RequiresElevation")]
+        [HttpDelete("OverlayImage")]
+        public IActionResult DeleteImage([FromQuery] string? filename = null)
+        {
+            string prefix = string.IsNullOrWhiteSpace(filename) ? "custom_overlay_image_global" : $"custom_overlay_image_{filename}";
+            
+            if (Directory.Exists(_imageDirectory))
+            {
+                var existingFiles = Directory.GetFiles(_imageDirectory, $"{prefix}.*");
+                foreach(var file in existingFiles)
+                {
+                    try
+                    {
+                        System.IO.File.Delete(file);
+                    }
+                    catch (Exception ex)
+                    {
+                        return StatusCode(500, $"Error deleting file: {ex.Message}");
+                    }
+                }
+                return Ok();
+            }
+
+            return NotFound();
+        }
+
+        /// <summary>
+        /// Renames a custom overlay image (used when a seasonal section is renamed).
+        /// </summary>
+        [HttpPut("OverlayImage/Rename")]
+        public IActionResult RenameImage([FromQuery] string oldName, [FromQuery] string newName)
+        {
+            if (string.IsNullOrWhiteSpace(oldName) || string.IsNullOrWhiteSpace(newName))
+            {
+                return BadRequest("Both oldName and newName must be provided.");
+            }
+
+            if (!Directory.Exists(_imageDirectory))
+                return Ok();
+
+            var oldFiles = Directory.GetFiles(_imageDirectory, $"custom_overlay_image_{oldName}.*");
+            if (oldFiles.Length == 0)
+                return Ok(); 
+
+            try
+            {
+                string oldPath = oldFiles[0];
+                string extension = Path.GetExtension(oldPath);
+                string newPath = Path.Combine(_imageDirectory, $"custom_overlay_image_{newName}{extension}");
+
+                // If a file with the new name already exists, delete it first to avoid conflicts
+                var existingNewFiles = Directory.GetFiles(_imageDirectory, $"custom_overlay_image_{newName}.*");
+                foreach(var existing in existingNewFiles) {
+                    System.IO.File.Delete(existing);
+                }
+                
+                System.IO.File.Move(oldPath, newPath);
+                
+                var qs = $"?filename={Uri.EscapeDataString(newName)}&";
+                var getUrl = $"/MediaBarEnhanced/OverlayImage{qs}t={DateTimeOffset.UtcNow.ToUnixTimeMilliseconds()}";
+                return Ok(new { url = getUrl });
+            }
+            catch (Exception ex)
+            {
+                return StatusCode(500, $"Error renaming file: {ex.Message}");
+            }
+        }
+    }
+}

Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs

@@ -49,5 +49,18 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
         public bool IncludeWatchedContent { get; set; } = false;
         public string SortBy { get; set; } = "Random";
         public string SortOrder { get; set; } = "Ascending";
+        public int BackdropVideoDelay { get; set; } = 0;
+        public bool ConstrainPlotWidth { get; set; } = false;
+        
+        public bool EnableCustomOverlay { get; set; } = false;
+        public string CustomOverlayText { get; set; } = "";
+        public string CustomOverlayImageUrl { get; set; } = "";
+        public string CustomOverlayStyle { get; set; } = "Shadowed";
+        public string CustomOverlayImageStyle { get; set; } = "None";
+        public string CustomOverlayPriority { get; set; } = "Image";
+        
+        public int CustomOverlayPositionX { get; set; } = 0;
+        public int CustomOverlayPositionY { get; set; } = 0;
+        public int CustomOverlayScale { get; set; } = 100;
     }
 }

Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html

@@ -30,6 +30,10 @@
                         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('media-bar-enhanced-overlay', 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 Overlay</h3>
+                    </button>
                     <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>
@@ -210,6 +214,128 @@
                         <input type="hidden" id="SeasonalSections" name="SeasonalSections" value="[]" />
                     </div>
 
+                    <!-- CUSTOM OVERLAY TAB -->
+                    <div id="media-bar-enhanced-overlay" class="tab-content" style="display:none;">
+                        <h2 class="sectionTitle">Custom Slideshow Overlay</h2>
+                        <p>Inject a custom text or floating image over the slideshow. This can be overridden by specific Seasonal Sections in the Custom Filters tab.</p>
+                        
+                        <div class="checkboxContainer checkboxContainer-withDescription">
+                            <label>
+                                <input is="emby-checkbox" type="checkbox" id="EnableCustomOverlay" name="EnableCustomOverlay" />
+                                <span>Enable Custom Overlay</span>
+                            </label>
+                            <div class="fieldDescription">If enabled, the text or image below will hover over the slideshow globally.</div>
+                        </div>
+                        
+                        <div class="selectContainer" style="margin-top: 1em;">
+                            <label class="selectLabel" for="CustomOverlayPriority">Priority (If Both Are Set)</label>
+                            <select is="emby-select" id="CustomOverlayPriority" name="CustomOverlayPriority"
+                                class="selectLayout emby-select-withcolor emby-select"
+                                style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
+                                <option value="Image">Show Image</option>
+                                <option value="Text">Show Text</option>
+                            </select>
+                            <div class="fieldDescription">What should be displayed if you have both an Image and Text configured?</div>
+                        </div>
+                        
+                        <div class="inputContainer">
+                            <label class="inputLabel inputLabelUnfocused" for="CustomOverlayText">Global Overlay Text</label>
+                            <input is="emby-input" type="text" id="CustomOverlayText" name="CustomOverlayText" />
+                            <div class="fieldDescription">Text to display on the overlay (e.g. "Movie Night!").</div>
+                        </div>
+
+                        <div class="inputContainer">
+                            <label class="inputLabel inputLabelUnfocused" for="CustomOverlayImageUrl">Global Overlay Image URL</label>
+                            <input is="emby-input" type="text" id="CustomOverlayImageUrl" name="CustomOverlayImageUrl" />
+                            <div class="fieldDescription">Absolute URL to an image to display on the overlay.</div>
+                        </div>
+
+                        <!-- Image Upload Dropzone -->
+                        <div class="inputContainer" style="margin-top: 1em;">
+                            <label class="inputLabel">Or Upload Local Image</label>
+                            <div id="overlayImageDropzone" style="border: 2px dashed rgba(255,255,255,0.2); border-radius: 8px; padding: 2em; text-align: center; cursor: pointer; background: rgba(0,0,0,0.2); transition: all 0.2s ease; position: relative; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
+                                <i class="material-icons" style="font-size: 40px; color: rgba(255,255,255,0.4); margin-bottom: 10px;">cloud_upload</i>
+                                <span style="font-size: 1.1em; color: rgba(255,255,255,0.7);">Drag and drop an image here, or click to select</span>
+                                <input type="file" id="overlayImageInput" accept="image/png, image/jpeg, image/gif, image/webp" style="display: none;">
+                                <img id="overlayImagePreview" style="display: none; max-width: 100%; max-height: 150px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 4px; z-index: 2;" />
+                                <!-- A semi-transparent overlay to clear the image -->
+                                <button type="button" id="clearOverlayImageBtn" class="clear-btn" is="paper-icon-button-light" style="display: none; position: absolute; top: 10px; right: 10px; z-index: 3; color: #a94442;" title="Clear Image">
+                                    <i class="material-icons">delete</i>
+                                </button>
+                            </div>
+                            <div class="fieldDescription">Uploading an image will save it to your server and automatically update the URL field above.</div>
+                        </div>
+                        
+                        <h2 class="sectionTitle" style="margin-top: 1.2em;">Styles</h2>
+
+                        <div class="selectContainer">
+                            <label class="selectLabel" for="CustomOverlayStyle">Overlay Style</label>
+                            <select is="emby-select" id="CustomOverlayStyle" name="CustomOverlayStyle"
+                                class="selectLayout emby-select-withcolor emby-select"
+                                style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
+                                <option value="None">None (Plain White)</option>
+                                <option value="Shadowed">Classic Shadowed</option>
+                                <option value="Frosted">Frosted Glass Pill</option>
+                                <option value="Cinematic">Cinematic Golden Glow</option>
+                                <option value="Pulse">Animated Pulse</option>
+                                <option value="SteadyNeon">Steady Neon</option>
+                                <option value="Neon">Neon Cyberpunk (Glitching)</option>
+                                <option value="Typewriter">Typewriter Pop</option>
+                                <option value="Bubble">Floating Bubble</option>
+                                <option value="SlideIn">Cinematic Slide-In</option>
+                                <option value="Glitch">Cyberpunk Glitch</option>
+                                <option value="RetroPop">Retro Pop 3D</option>
+                                <option value="Shimmer">Glowing Shimmer</option>
+                                <option value="Wave">Liquid Wave</option>
+                                <option value="VHS">VHS Tracking</option>
+                                <option value="Matrix">Digital Matrix</option>
+                                <option value="Ghost">Ghostly Apparition</option>
+                                <option value="PulseGlow">Breathing Pulse Glow</option>
+                            </select>
+                            <div class="fieldDescription">Choose the visual styling animation for your custom text.</div>
+                        </div>
+
+                        <div class="selectContainer">
+                            <label class="selectLabel" for="CustomOverlayImageStyle">Image Style</label>
+                            <select is="emby-select" id="CustomOverlayImageStyle" name="CustomOverlayImageStyle"
+                                class="selectLayout emby-select-withcolor emby-select"
+                                style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
+                                <option value="None">None (Default)</option>
+                                <option value="RoundedShadow">Rounded & Shadow</option>
+                                <option value="GlowingBorder">Neon Glow</option>
+                                <option value="Polaroid">Polaroid Frame</option>
+                                <option value="Vintage">Vintage Sepia</option>
+                                <option value="Grayscale">Grayscale</option>
+                                <option value="Hologram">Hologram</option>
+                                <option value="CRT">CRT Monitor</option>
+                                <option value="Floating">Floating Float</option>
+                                <option value="VHSTracking">VHS Tracking Glitch</option>
+                                <option value="ColorCycle">Rainbow Color Cycle</option>
+                                <option value="Mirror">Mirror Reflection</option>
+                            </select>
+                            <div class="fieldDescription">Choose a visual effect to apply to your overlay image.</div>
+                        </div>
+
+                        <h3 class="sectionTitle" style="margin-top:2em; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5em;">Layout Tweaks</h3>
+                        <div style="display: flex; gap: 1em; flex-wrap: wrap;">
+                            <div class="inputContainer" style="flex: 1; min-width: 150px;">
+                                <label class="inputLabel inputLabelUnfocused" for="CustomOverlayPositionX">X Offset (% vw)</label>
+                                <input is="emby-input" type="number" id="CustomOverlayPositionX" name="CustomOverlayPositionX" min="-50" max="50" step="1" />
+                                <div class="fieldDescription">Horizontal nudge (negative = left, positive = right). Default is 0.</div>
+                            </div>
+                            <div class="inputContainer" style="flex: 1; min-width: 150px;">
+                                <label class="inputLabel inputLabelUnfocused" for="CustomOverlayPositionY">Y Offset (% vh)</label>
+                                <input is="emby-input" type="number" id="CustomOverlayPositionY" name="CustomOverlayPositionY" min="-50" max="50" step="1" />
+                                <div class="fieldDescription">Vertical nudge (negative = up, positive = down). Default is 0.</div>
+                            </div>
+                            <div class="inputContainer" style="flex: 1; min-width: 150px;">
+                                <label class="inputLabel inputLabelUnfocused" for="CustomOverlayScale">Scale (%)</label>
+                                <input is="emby-input" type="number" id="CustomOverlayScale" name="CustomOverlayScale" min="50" max="200" step="1" />
+                                <div class="fieldDescription">Overlay zoom level. Default is 100%.</div>
+                            </div>
+                        </div>
+                    </div>
+
                     <!-- ADVANCED TAB -->
                     <div id="media-bar-enhanced-advanced" class="tab-content" style="display:none;">
                         <h2 class="sectionTitle">Features</h2>
@@ -292,6 +418,13 @@
                                 on
                                 mobile devices. (looks bad on desktops)</div>
                         </div>
+                        <div class="checkboxContainer checkboxContainer-withDescription">
+                            <label>
+                                <input is="emby-checkbox" type="checkbox" id="ConstrainPlotWidth" name="ConstrainPlotWidth" />
+                                <span>Constrain Plot Width</span>
+                            </label>
+                            <div class="fieldDescription">Align the description text left to match the logo width, preventing it from crossing the entire screen. (Increases the text limit to 3 lines instead of 2).</div>
+                        </div>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
                                 <input is="emby-checkbox" type="checkbox" id="EnableLoadingScreen"
@@ -337,6 +470,11 @@
                             <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="BackdropVideoDelay">Backdrop Video Delay (ms)</label>
+                            <input is="emby-input" type="number" id="BackdropVideoDelay" name="BackdropVideoDelay" />
+                            <div class="fieldDescription">Time in milliseconds to wait before playing backdrops/theme videos (leaves static backdrop visible longer).</div>
+                        </div>
 
                         <div class="inputContainer">
                             <label class="inputLabel inputLabelUnfocused" for="RetryInterval">Retry Interval
@@ -468,10 +606,10 @@
                                 enable counter style directly.</div>
                         </div>
                         <div class="inputContainer">
-                            <label class="inputLabel inputLabelUnfocused" for="MaxPlotLength">Max Plot
-                                Length</label>
+                            <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 class="fieldDescription">Maximum characters for the plot summary. Limited to max 2 lines
+                                (or 3 if 'Constrain Plot Width' is enabled).</div>
                         </div>
                     </div>
 
@@ -534,7 +672,11 @@
                             'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
                             'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
                             'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating',
-                            'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile'
+                            'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile',
+                            'EnableCustomOverlay', 'CustomOverlayText', 'CustomOverlayImageUrl',
+                            'CustomOverlayStyle', 'CustomOverlayImageStyle', 'CustomOverlayPriority',
+                            'CustomOverlayPositionX', 'CustomOverlayPositionY', 'CustomOverlayScale',
+                            'BackdropVideoDelay', 'ConstrainPlotWidth'
                         ];
 
                         // Manual mapping for MediaBarIsEnabled -> IsEnabled, to avoid conflicts with other plugins
@@ -614,6 +756,137 @@
                             updatePreferLocalVisibility();
                         }
 
+                        // Overlay Image Upload Logic
+                        var dropzone = page.querySelector('#overlayImageDropzone');
+                        var fileInput = page.querySelector('#overlayImageInput');
+                        var urlInput = page.querySelector('#CustomOverlayImageUrl');
+                        var previewImg = page.querySelector('#overlayImagePreview');
+                        var clearBtn = page.querySelector('#clearOverlayImageBtn');
+
+                        function updatePreview() {
+                            var icon = dropzone.querySelector('i');
+                            var text = dropzone.querySelector('span');
+                            if (urlInput.value && urlInput.value.trim() !== '') {
+                                previewImg.src = urlInput.value;
+                                previewImg.style.display = 'block';
+                                clearBtn.style.display = 'inline-flex';
+                                if(icon) icon.style.display = 'none';
+                                if(text) {
+                                    text.textContent = 'Drag and drop a new image here, or click to select';
+                                    text.style.display = 'block';
+                                    text.style.position = 'absolute';
+                                    text.style.bottom = '10px';
+                                    text.style.zIndex = '3';
+                                    text.style.backgroundColor = 'rgba(0,0,0,0.6)';
+                                    text.style.padding = '4px 8px';
+                                    text.style.borderRadius = '4px';
+                                }
+                            } else {
+                                previewImg.style.display = 'none';
+                                clearBtn.style.display = 'none';
+                                if(icon) icon.style.display = 'block';
+                                if(text) {
+                                    text.textContent = 'Drag and drop an image here, or click to select';
+                                    text.style.display = 'block';
+                                    text.style.position = 'static';
+                                    text.style.backgroundColor = 'transparent';
+                                }
+                            }
+                        }
+
+                        // Initial check
+                        updatePreview();
+
+                        // Listen to manual URL input changes
+                        urlInput.addEventListener('input', updatePreview);
+
+                        clearBtn.addEventListener('click', function(e) {
+                            e.stopPropagation(); // prevent triggering file dialog
+                            
+                            // Call DELETE API to remove global image
+                            fetch(ApiClient.serverAddress() + '/MediaBarEnhanced/OverlayImage', {
+                                method: 'DELETE',
+                                headers: {
+                                    'Authorization': 'MediaBrowser Client="' + ApiClient.appName() + '", Device="' + ApiClient.deviceName() + '", DeviceId="' + ApiClient.deviceId() + '", Version="' + ApiClient.appVersion() + '", Token="' + ApiClient.accessToken() + '"'
+                                }
+                            }).catch(console.error);
+
+                            urlInput.value = '';
+                            fileInput.value = '';
+                            updatePreview();
+                        });
+
+                        dropzone.addEventListener('click', function() {
+                            fileInput.click();
+                        });
+
+                        dropzone.addEventListener('dragover', function(e) {
+                            e.preventDefault();
+                            dropzone.style.borderColor = '#00a4dc';
+                            dropzone.style.background = 'rgba(0, 164, 220, 0.2)';
+                        });
+
+                        dropzone.addEventListener('dragleave', function(e) {
+                            e.preventDefault();
+                            dropzone.style.borderColor = 'rgba(255,255,255,0.2)';
+                            dropzone.style.background = 'rgba(0,0,0,0.2)';
+                        });
+
+                        dropzone.addEventListener('drop', function(e) {
+                            e.preventDefault();
+                            dropzone.style.borderColor = 'rgba(255,255,255,0.2)';
+                            dropzone.style.background = 'rgba(0,0,0,0.2)';
+                            
+                            if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+                                fileInput.files = e.dataTransfer.files;
+                                uploadImage(e.dataTransfer.files[0]);
+                            }
+                        });
+
+                        fileInput.addEventListener('change', function() {
+                            if (this.files && this.files.length > 0) {
+                                uploadImage(this.files[0]);
+                            }
+                        });
+
+                        function uploadImage(file) {
+                            // Validate it's an image
+                            if (!file.type.match('image.*')) {
+                                Dashboard.alert('Please select a valid image file.');
+                                return;
+                            }
+
+                            Dashboard.showLoadingMsg();
+                            
+                            var formData = new FormData();
+                            formData.append('file', file);
+
+                            // The Endpoint we created in C#
+                            fetch(ApiClient.serverAddress() + '/MediaBarEnhanced/OverlayImage', {
+                                method: 'POST',
+                                body: formData,
+                                headers: {
+                                    'Authorization': 'MediaBrowser Client="' + ApiClient.appName() + '", Device="' + ApiClient.deviceName() + '", DeviceId="' + ApiClient.deviceId() + '", Version="' + ApiClient.appVersion() + '", Token="' + ApiClient.accessToken() + '"'
+                                }
+                            })
+                            .then(response => {
+                                if (response.ok) return response.json();
+                                throw new Error('Network response was not ok.');
+                            })
+                            .then(data => {
+                                // Update URL input
+                                urlInput.value = ApiClient.serverAddress() + data.url;
+                                updatePreview();
+                                Dashboard.hideLoadingMsg();
+                            })
+                            .catch(error => {
+                                console.error('Upload error:', error);
+                                Dashboard.alert('Image upload failed. Please verify API controller is active.');
+                                Dashboard.hideLoadingMsg();
+                            });
+                        }
+
+
                         Dashboard.hideLoadingMsg();
                     });
                 },
@@ -645,7 +918,11 @@
                         'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
                         'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
                         'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating',
-                        'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile'
+                        'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile',
+                        'EnableCustomOverlay', 'CustomOverlayText', 'CustomOverlayImageUrl',
+                        'CustomOverlayStyle', 'CustomOverlayImageStyle', 'CustomOverlayPriority',
+                        'CustomOverlayPositionX', 'CustomOverlayPositionY', 'CustomOverlayScale',
+                        'BackdropVideoDelay', 'ConstrainPlotWidth'
                     ];
 
                     keys.forEach(function (key) {
@@ -680,8 +957,10 @@
                     MediaBarEnhancedConfigurationPage.createSectionElement(container, {
                         Name: 'New Season',
                         StartDay: 1, StartMonth: 1,
-                        EndDay: 1, EndMonth: 1,
-                        MediaIds: ''
+                        EndDay: 31, EndMonth: 1,
+                        MediaIds: '',
+                        OverlayText: '',
+                        OverlayImageUrl: ''
                     }, index);
                 },
 
@@ -742,6 +1021,28 @@
                         '    <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Media IDs</label>' +
                         '    <textarea is="emby-textarea" class="emby-textarea section-ids" style="width: 100%; height: 80px; font-family: monospace;">' + (data.MediaIds || '') + '</textarea>' +
                         '    <div class="fieldDescription">Comma-separated or Newline separated list of Movie/Series/Collection IDs to show during this season.<br>Same options available as for the default media IDs.</div>' +
+                        '</div>' + 
+                        '<h3 class="inputLabel" style="margin-top: 1.5em; margin-bottom: 0.5em;">Custom Overlay Overrides</h3>' +
+                        '<div style="display: flex; flex-wrap: wrap; gap: 1em; align-items: flex-start;">' +
+                        '    <div style="flex: 1; min-width: 250px; display: flex; flex-direction: column; gap: 0.5em;">' +
+                        '        <div class="inputContainer" style="margin: 0;">' +
+                        '            <input is="emby-input" type="text" class="emby-input section-overlay-text" style="width: 100%;" value="' + (data.OverlayText ? data.OverlayText.replace(/"/g, '&quot;') : '') + '" placeholder="Seasonal Custom Overlay Text (e.g. Oscars Time!)" />' +
+                        '            <div class="fieldDescription">Override the global text.</div>' +
+                        '        </div>' + 
+                        '        <div class="inputContainer" style="margin: 0;">' +
+                        '            <input is="emby-input" type="text" class="emby-input section-overlay-image" style="width: 100%;" value="' + (data.OverlayImageUrl ? data.OverlayImageUrl.replace(/"/g, '&quot;') : '') + '" placeholder="Seasonal Custom Overlay Image URL" />' +
+                        '            <div class="fieldDescription">Override the global image URL.</div>' +
+                        '        </div>' +
+                        '    </div>' +
+                        '    <div class="inputContainer" style="flex: 1; min-width: 250px; margin: 0; padding-bottom: 5px;">' +
+                        '        <div class="seasonal-dropzone" style="border: 2px dashed rgba(255,255,255,0.2); border-radius: 8px; padding: 1em; text-align: center; cursor: pointer; background: rgba(0,0,0,0.2); transition: all 0.2s ease; position: relative; min-height: 98px; display: flex; flex-direction: column; align-items: center; justify-content: center;">' +
+                        '            <i class="material-icons" style="font-size: 24px; color: rgba(255,255,255,0.4); margin-bottom: 4px;">cloud_upload</i>' +
+                        '            <span style="font-size: 0.85em; color: rgba(255,255,255,0.7);">Upload seasonal image</span>' +
+                        '            <input type="file" class="seasonal-file-input" accept="image/png, image/jpeg, image/gif, image/webp" style="display: none;">' +
+                        '            <img class="seasonal-preview-img" style="display: none; max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 4px; z-index: 2; object-fit: contain;" />' +
+                        '            <button type="button" is="paper-icon-button-light" class="seasonal-clear-btn remove-img" title="Clear Image" style="background: transparent; border: none; padding: 0; cursor: pointer; display: none; position: absolute; top: 10px; right: 10px; z-index: 3; color: #a94442;"><i class="material-icons">delete</i></button>' +
+                        '        </div>' +
+                        '    </div>' +
                         '</div>';
 
                     div.querySelector('.btn-remove').addEventListener('click', function () {
@@ -763,6 +1064,185 @@
                         }
                     });
 
+                    // --- Seasonal Drag and Drop Logic ---
+                    var sectionNameInput = div.querySelector('.section-name');
+                    var urlInput = div.querySelector('.section-overlay-image');
+                    var dropzone = div.querySelector('.seasonal-dropzone');
+                    var fileInput = div.querySelector('.seasonal-file-input');
+                    var previewImg = div.querySelector('.seasonal-preview-img');
+                    var clearBtn = div.querySelector('.seasonal-clear-btn');
+                    var currentSectionName = sectionNameInput.value.trim();
+
+                    // Track Name Changes to rename server file
+                    sectionNameInput.addEventListener('focus', function() {
+                        currentSectionName = this.value.trim();
+                    });
+
+                    sectionNameInput.addEventListener('blur', function() {
+                        var newName = this.value.trim();
+                        if (newName && currentSectionName && newName !== currentSectionName) {
+                            // If they have an image attached, rename it
+                            if (urlInput.value && urlInput.value.indexOf('OverlayImage') !== -1) {
+                                fetch(ApiClient.serverAddress() + '/MediaBarEnhanced/OverlayImage/Rename?oldName=' + encodeURIComponent(currentSectionName) + '&newName=' + encodeURIComponent(newName), {
+                                    method: 'PUT',
+                                    headers: {
+                                        'Authorization': 'MediaBrowser Client="' + ApiClient.appName() + '", Device="' + ApiClient.deviceName() + '", DeviceId="' + ApiClient.deviceId() + '", Version="' + ApiClient.appVersion() + '", Token="' + ApiClient.accessToken() + '"'
+                                    }
+                                })
+                                .then(response => {
+                                    if(response.ok) return response.json();
+                                    throw new Error('Rename failed');
+                                })
+                                .then(data => {
+                                    urlInput.value = ApiClient.serverAddress() + data.url;
+                                    currentSectionName = newName;
+                                }).catch(console.error);
+                            } else {
+                                currentSectionName = newName;
+                            }
+                        } else {
+                            currentSectionName = newName;
+                        }
+                    });
+
+                    function updatePreview() {
+                        var icon = dropzone.querySelector('i');
+                        var text = dropzone.querySelector('span');
+                        var val = urlInput.value.trim();
+                        if (val) {
+                            previewImg.src = val;
+                            previewImg.style.display = 'block';
+                            clearBtn.style.display = 'inline-flex';
+                            if(icon) icon.style.display = 'none';
+                            if(text) {
+                                text.textContent = 'Drag and drop a new image here, or click to select';
+                                text.style.display = 'block';
+                                text.style.position = 'absolute';
+                                text.style.bottom = '5px';
+                                text.style.zIndex = '3';
+                                text.style.backgroundColor = 'rgba(0,0,0,0.6)';
+                                text.style.padding = '2px 6px';
+                                text.style.borderRadius = '4px';
+                                text.style.fontSize = '0.7em';
+                            }
+                        } else {
+                            previewImg.src = '';
+                            previewImg.style.display = 'none';
+                            clearBtn.style.display = 'none';
+                            if(icon) icon.style.display = 'block';
+                            if(text) {
+                                text.textContent = 'Upload seasonal overlay image';
+                                text.style.display = 'block';
+                                text.style.position = 'static';
+                                text.style.backgroundColor = 'transparent';
+                                text.style.fontSize = '0.85em';
+                            }
+                        }
+                    }
+
+                    // Initial state
+                    updatePreview();
+                    urlInput.addEventListener('input', updatePreview);
+
+                    clearBtn.addEventListener('click', function(e) {
+                        e.stopPropagation();
+                        var name = sectionNameInput.value.trim();
+                        if (name) {
+                            fetch(ApiClient.serverAddress() + '/MediaBarEnhanced/OverlayImage?filename=' + encodeURIComponent(name), {
+                                method: 'DELETE',
+                                headers: {
+                                    'Authorization': 'MediaBrowser Client="' + ApiClient.appName() + '", Device="' + ApiClient.deviceName() + '", DeviceId="' + ApiClient.deviceId() + '", Version="' + ApiClient.appVersion() + '", Token="' + ApiClient.accessToken() + '"'
+                                }
+                            }).catch(console.error);
+                        }
+                        urlInput.value = '';
+                        fileInput.value = '';
+                        updatePreview();
+                    });
+
+                    div.querySelector('.btn-remove').addEventListener('click', function () {
+                        // Cleanup image if deleted
+                        var name = sectionNameInput.value.trim();
+                        if (name) {
+                            fetch(ApiClient.serverAddress() + '/MediaBarEnhanced/OverlayImage?filename=' + encodeURIComponent(name), {
+                                method: 'DELETE',
+                                headers: {
+                                    'Authorization': 'MediaBrowser Client="' + ApiClient.appName() + '", Device="' + ApiClient.deviceName() + '", DeviceId="' + ApiClient.deviceId() + '", Version="' + ApiClient.appVersion() + '", Token="' + ApiClient.accessToken() + '"'
+                                }
+                            }).catch(console.error);
+                        }
+                        div.remove();
+                        MediaBarEnhancedConfigurationPage.updateSectionTitles(container);
+                    });
+
+                    dropzone.addEventListener('click', function() { fileInput.click(); });
+                    
+                    dropzone.addEventListener('dragover', function(e) {
+                        e.preventDefault();
+                        dropzone.style.borderColor = '#00a4dc';
+                        dropzone.style.background = 'rgba(0, 164, 220, 0.2)';
+                    });
+
+                    dropzone.addEventListener('dragleave', function(e) {
+                        e.preventDefault();
+                        dropzone.style.borderColor = 'rgba(255,255,255,0.2)';
+                        dropzone.style.background = 'rgba(0,0,0,0.2)';
+                    });
+
+                    dropzone.addEventListener('drop', function(e) {
+                        e.preventDefault();
+                        dropzone.style.borderColor = 'rgba(255,255,255,0.2)';
+                        dropzone.style.background = 'rgba(0,0,0,0.2)';
+                        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+                            fileInput.files = e.dataTransfer.files;
+                            uploadSeasonalImage(e.dataTransfer.files[0]);
+                        }
+                    });
+
+                    fileInput.addEventListener('change', function() {
+                        if (this.files && this.files.length > 0) uploadSeasonalImage(this.files[0]);
+                    });
+
+                    function uploadSeasonalImage(file) {
+                        if (!file.type.match('image.*')) {
+                            Dashboard.alert('Please select a valid image file.');
+                            return;
+                        }
+
+                        var name = sectionNameInput.value.trim();
+                        if (!name) {
+                            Dashboard.alert('Please enter a Name for this season before uploading an image (used for file saving).');
+                            return;
+                        }
+
+                        Dashboard.showLoadingMsg();
+                        var formData = new FormData();
+                        formData.append('file', file);
+
+                        var qs = '?filename=' + encodeURIComponent(name);
+                        fetch(ApiClient.serverAddress() + '/MediaBarEnhanced/OverlayImage' + qs, {
+                            method: 'POST',
+                            body: formData,
+                            headers: {
+                                'Authorization': 'MediaBrowser Client="' + ApiClient.appName() + '", Device="' + ApiClient.deviceName() + '", DeviceId="' + ApiClient.deviceId() + '", Version="' + ApiClient.appVersion() + '", Token="' + ApiClient.accessToken() + '"'
+                            }
+                        })
+                        .then(response => {
+                            if (response.ok) return response.json();
+                            throw new Error('Upload failed');
+                        })
+                        .then(data => {
+                            urlInput.value = ApiClient.serverAddress() + data.url;
+                            updatePreview();
+                            Dashboard.hideLoadingMsg();
+                        })
+                        .catch(error => {
+                            console.error('Upload error:', error);
+                            Dashboard.alert('Image upload failed.');
+                            Dashboard.hideLoadingMsg();
+                        });
+                    }
+
                     container.appendChild(div);
                 },
 
@@ -786,7 +1266,9 @@
                             StartMonth: parseInt(el.querySelector('.start-month').value),
                             EndDay: parseInt(el.querySelector('.end-day').value),
                             EndMonth: parseInt(el.querySelector('.end-month').value),
-                            MediaIds: el.querySelector('.section-ids').value
+                            MediaIds: el.querySelector('.section-ids').value,
+                            OverlayText: el.querySelector('.section-overlay-text').value,
+                            OverlayImageUrl: el.querySelector('.section-overlay-image').value
                         });
                     });
                     return sections;

Jellyfin.Plugin.MediaBarEnhanced/Helpers/TransformationPatches.cs

@@ -18,7 +18,7 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Helpers
             try 
             {
                 // Safety Check: If plugin is disabled, do nothing
-                if (!MediaBarEnhancedPlugin.Instance.Configuration.IsEnabled)
+                if (MediaBarEnhancedPlugin.Instance?.Configuration?.IsEnabled != true)
                 {
                     return originalContents;
                 }

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

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

Jellyfin.Plugin.MediaBarEnhanced/MediaBarEnhancedPlugin.cs

@@ -17,7 +17,6 @@ namespace Jellyfin.Plugin.MediaBarEnhanced
     {
         private readonly ScriptInjector _scriptInjector;
         private readonly ILoggerFactory _loggerFactory;
-        public IServiceProvider ServiceProvider { get; }
 
         /// <summary>
         /// Initializes a new instance of the <see cref="MediaBarEnhancedPlugin"/> class.

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css

@@ -354,13 +354,13 @@
   width: 100%;
   height: 100%;
   mask-image: linear-gradient(to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
+      rgba(255, 255, 255, 0) 2%,
+      rgba(0, 0, 0, 0.5) 6%,
       #000000 8%);
   -webkit-mask-image: linear-gradient(to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%);
+    rgba(255, 255, 255, 0) 2%,
+    rgba(0, 0, 0, 0.5) 6%,
+    #000000 8%);
 }
 
 .backdrop-container.full-width-video {
@@ -384,13 +384,13 @@
   border-radius: 5px;
   z-index: 3;
   mask-image: linear-gradient(to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%);
+    rgba(255, 255, 255, 0) 2%,
+    rgba(0, 0, 0, 0.5) 6%,
+    #000000 8%);
   -webkit-mask-image: linear-gradient(to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%);
+    rgba(255, 255, 255, 0) 2%,
+    rgba(0, 0, 0, 0.5) 6%,
+    #000000 8%);
 }
 
 .backdrop-overlay {
@@ -403,13 +403,13 @@
   border-radius: 5px;
   z-index: 4;
   mask-image: linear-gradient(to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 4%,
-      #000000 6%);
+    rgba(255, 255, 255, 0) 2%,
+    rgba(0, 0, 0, 0.5) 4%,
+    #000000 6%);
   -webkit-mask-image: linear-gradient(to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 4%,
-      #000000 6%);
+    rgba(255, 255, 255, 0) 2%,
+    rgba(0, 0, 0, 0.5) 4%,
+    #000000 6%);
 }
 
 .gradient-overlay {
@@ -424,13 +424,13 @@
       rgba(29, 29, 29, 0) 100%);
   z-index: 4;
   mask-image: linear-gradient(to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 4%,
-      #000000 6%);
+    rgba(255, 255, 255, 0) 2%,
+    rgba(0, 0, 0, 0.5) 4%,
+    #000000 6%);
   -webkit-mask-image: linear-gradient(to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 4%,
-      #000000 6%);
+    rgba(255, 255, 255, 0) 2%,
+    rgba(0, 0, 0, 0.5) 4%,
+    #000000 6%);
 }
 
 .gradient-overlay.full-width-video {
@@ -489,6 +489,15 @@
   overflow: hidden;
 }
 
+.plot-container.constrained-plot {
+  width: 40%;
+}
+
+.plot-container.constrained-plot .plot {
+  line-clamp: 3;
+  -webkit-line-clamp: 3;
+}
+
 .genre {
   display: flex;
   gap: 5px;
@@ -525,6 +534,8 @@
   font-family: "Archivo Narrow", sans-serif;
   font-size: 18px;
   white-space: nowrap;
+  background-color: rgb(255, 255, 255);
+  color: rgb(0, 0, 0);
   cursor: pointer;
   transition: all 0.3s ease;
   font-weight: 700;
@@ -535,6 +546,7 @@
 
 .detail-button {
   font-size: 18px;
+  background-color: rgb(255, 255, 255);
   color: rgb(0, 0, 0);
   border-radius: 50%;
   height: 50px;
@@ -547,6 +559,7 @@
 
 .favorite-button {
   font-size: 18px;
+  background-color: rgb(255, 255, 255);
   color: red;
   border-radius: 50%;
   height: 50px;
@@ -662,7 +675,7 @@
   display: flex;
   align-items: center;
   border-radius: 5px;
-  background: rgb(255 255 255 / 0.8);
+  background: rgba(255, 255, 255, 0.8);
   color: #000;
   border: none;
   font-weight: 600;
@@ -712,13 +725,13 @@
     object-position: center 20%;
     z-index: 3;
     mask-image: linear-gradient(to top,
-        #fff0 2%,
-        rgb(0 0 0 / 0.5) 6%,
-        #000000 8%);
+      rgba(255, 255, 255, 0) 2%,
+      rgba(0, 0, 0, 0.5) 6%,
+      #000000 8%);
     -webkit-mask-image: linear-gradient(to top,
-        #fff0 2%,
-        rgb(0 0 0 / 0.5) 6%,
-        #000000 8%);
+      rgba(255, 255, 255, 0) 2%,
+      rgba(0, 0, 0, 0.5) 6%,
+      #000000 8%);
   }
 
   .gradient-overlay {
@@ -727,17 +740,17 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgb(0 0 0 / 0.25);
+    background: rgba(0, 0, 0, 0.25);
     z-index: 4;
     pointer-events: none;
     mask-image: linear-gradient(to top,
-        #fff0 2%,
-        rgb(0 0 0 / 0.5) 6%,
-        #000000 8%);
+      rgba(255, 255, 255, 0) 2%,
+      rgba(0, 0, 0, 0.5) 6%,
+      #000000 8%);
     -webkit-mask-image: linear-gradient(to top,
-        #fff0 2%,
-        rgb(0 0 0 / 0.5) 6%,
-        #000000 8%);
+      rgba(255, 255, 255, 0) 2%,
+      rgba(0, 0, 0, 0.5) 6%,
+      #000000 8%);
   }
 
   .dots-container {
@@ -745,6 +758,15 @@
     left: 50%;
     transform: translateX(-50%) scale(0.8);
     background-color: #ffffff00;
+    width: max-content;
+    max-width: 90vw;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    padding: 10px 0;
+  }
+
+  .dot {
+    flex-shrink: 0;
   }
 
   .dot.active {
@@ -1008,7 +1030,7 @@
   margin: 0;
 }
 
-.layout-tv .backdrop-container{
+.layout-tv .backdrop-container {
   top: -5%;
 }
 
@@ -1027,3 +1049,426 @@
     -webkit-backdrop-filter: none;
   }
 }
+
+/* Custom Overlay Styling */
+.custom-overlay-container {
+  position: absolute;
+  top: calc(8vh + var(--overlay-y, 0vh));
+  left: calc(4vw + var(--overlay-x, 0vw));
+  transform: scale(var(--overlay-scale, 1));
+  z-index: 15;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  pointer-events: none;
+  animation: overlayFadeInGlobal 1.5s ease-in-out forwards;
+  /* animation: fadeInOverlay 1.5s ease-in-out forwards; */
+}
+
+@keyframes overlayFadeInGlobal {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* @keyframes fadeInOverlay {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+} */
+
+.custom-overlay-text {
+  font-family: "Archivo Narrow", sans-serif;
+  color: #fff;
+  font-size: 2.5rem;
+  font-weight: 700;
+  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8), -1px -1px 4px rgba(0, 0, 0, 0.5);
+  margin: 0;
+  letter-spacing: 1px;
+}
+
+.custom-overlay-image {
+  max-width: 300px;
+  max-height: 120px;
+  object-fit: contain;
+  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5));
+}
+
+
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+  .custom-overlay-container {
+    top: calc(15vh + var(--overlay-y, 0vh));
+    left: calc(50% + var(--overlay-x, 0vw));
+    transform: translateX(-50%) scale(var(--overlay-scale, 1));
+    width: 90%;
+    justify-content: center;
+    text-align: center;
+  }
+  
+  .custom-overlay-text {
+    font-size: 1.5rem;  /* 1.5 - 1.8 */
+  }
+
+  /* @keyframes fadeInOverlay {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -10px);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, 0);
+    }
+  } */
+  
+  .custom-overlay-image {
+    max-width: 150px; /* oder 200px? */
+    max-height: 60px; /* oder 80px? */
+  }
+}
+
+/* Custom Overlay Text Styles */
+.custom-overlay-style-None {
+  color: #fff;
+  text-shadow: none;
+}
+
+.custom-overlay-style-Shadowed {
+  color: #fff;
+  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9), -1px -1px 4px rgba(0, 0, 0, 0.8);
+}
+
+.custom-overlay-style-Frosted {
+  color: #fff;
+  background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0));
+  backdrop-filter: blur(20px) saturate(1.5);
+  -webkit-backdrop-filter: blur(20px) saturate(1.5);
+  padding: 10px 30px;
+  border-radius: 50px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+}
+
+.custom-overlay-style-Cinematic {
+  background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c, #fcf6ba, #bf953f);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  text-shadow: none;
+  filter: drop-shadow(0px 2px 8px rgba(255, 215, 0, 0.4)) drop-shadow(2px 2px 4px rgba(0,0,0,0.8));
+  animation: shineCinematic 6s linear infinite;
+  background-size: 200% auto;
+}
+
+@keyframes shineCinematic {
+  0% { background-position: 0% center; }
+  100% { background-position: 200% center; }
+}
+
+.custom-overlay-style-Pulse {
+  color: #fff;
+  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9), -1px -1px 4px rgba(0, 0, 0, 0.8);
+  animation: pulseOverlayText 3s ease-in-out infinite alternate;
+}
+
+@keyframes pulseOverlayText {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(1.05);
+  }
+}
+
+.custom-overlay-style-Neon {
+  color: #fff;
+  text-shadow: 
+    0 0 5px #fff,
+    0 0 10px #fff,
+    0 0 20px #ff00de,
+    0 0 40px #ff00de,
+    0 0 80px #ff00de,
+    0 0 90px #ff00de,
+    0 0 100px #ff00de,
+    0 0 150px #ff00de;
+  animation: flickerNeon 1.5s infinite alternate;
+}
+
+@keyframes flickerNeon {
+  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
+    text-shadow: 
+      0 0 5px #fff,
+      0 0 10px #fff,
+      0 0 20px #ff00de,
+      0 0 40px #ff00de,
+      0 0 80px #ff00de,
+      0 0 90px #ff00de,
+      0 0 100px #ff00de,
+      0 0 150px #ff00de;
+  }
+  20%, 24%, 55% {
+    text-shadow: none;
+  }
+}
+
+.custom-overlay-style-Typewriter {
+  font-family: 'Courier New', Courier, monospace;
+  background-color: #222;
+  color: #00ff00;
+  padding: 10px 20px;
+  border: 2px solid #00ff00;
+  border-radius: 4px;
+  box-shadow: 4px 4px 0px #00ff00;
+  text-transform: uppercase;
+}
+
+.custom-overlay-style-Bubble {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  padding: 12px 30px;
+  border-radius: 100px;
+  border: 2px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(255,255,255,0.2);
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
+  animation: floatBubble 4s ease-in-out infinite;
+}
+
+@keyframes floatBubble {
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-15px); }
+  100% { transform: translateY(0px); }
+}
+
+.custom-overlay-style-SlideIn {
+  color: #fff;
+  text-transform: uppercase;
+  letter-spacing: 5px;
+  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
+  position: relative;
+  animation: slideInCinematic 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
+}
+
+.custom-overlay-style-SlideIn::before {
+  content: '';
+  position: absolute;
+  top: -10px;
+  bottom: -10px;
+  left: -50vw;
+  right: -50px;
+  background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.6) 40%, transparent 100%);
+  z-index: -1;
+}
+
+@keyframes slideInCinematic {
+  from {
+    transform: translateX(-100vw);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.custom-overlay-style-SteadyNeon {
+  color: #fff;
+  text-shadow: 
+    0 0 5px #fff,
+    0 0 10px #fff,
+    0 0 20px #ff00de,
+    0 0 40px #ff00de,
+    0 0 80px #ff00de;
+}
+
+.custom-overlay-style-Glitch {
+  color: #fff;
+  position: relative;
+  text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
+  animation: glitchText 3s infinite;
+}
+
+@keyframes glitchText {
+  0% { text-shadow: 2px 2px 8px rgba(0,0,0,0.8); transform: translate(0); }
+  20% { text-shadow: 2px 2px 8px rgba(0,0,0,0.8); transform: translate(0); }
+  21% { text-shadow: -2px 0 0 #ff00c1, 2px 0 0 #00fff9; transform: translate(-2px, 1px); }
+  23% { text-shadow: 2px 0 0 #ff00c1, -2px 0 0 #00fff9; transform: translate(2px, -1px); }
+  25% { text-shadow: 2px 2px 8px rgba(0,0,0,0.8); transform: translate(0); }
+  100% { text-shadow: 2px 2px 8px rgba(0,0,0,0.8); transform: translate(0); }
+}
+
+.custom-overlay-style-RetroPop {
+  color: #f7f7f7;
+  text-shadow: 
+    2px 2px 0px #ff0055, 
+    4px 4px 0px #00a4dc, 
+    6px 6px 0px #ffcc00, 
+    8px 8px 10px rgba(0,0,0,0.6);
+  font-weight: 900;
+  letter-spacing: 2px;
+}
+
+.custom-overlay-style-Shimmer {
+  color: rgba(255,255,255,0.7);
+  background: linear-gradient(to right, #222 20%, #fff 40%, #fff 60%, #222 80%);
+  background-size: 200% auto;
+  color: #000;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shimmerText 3s linear infinite;
+  text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
+}
+
+@keyframes shimmerText {
+  to {
+    background-position: 200% center;
+  }
+}
+
+.custom-overlay-style-Wave {
+  color: #fff;
+  text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
+  display: inline-block;
+  animation: liquidWave 3s ease-in-out infinite;
+}
+@keyframes liquidWave {
+  0%, 100% { transform: translateY(0) skewY(0); }
+  25% { transform: translateY(-3px) skewY(1deg); }
+  50% { transform: translateY(0) skewY(0); }
+  75% { transform: translateY(3px) skewY(-1deg); }
+}
+
+.custom-overlay-style-VHS {
+  color: #fff;
+  text-shadow: 3px 0 0 #f00, -3px 0 0 #0ff;
+  animation: vhsTracking 2s steps(2, start) infinite;
+}
+@keyframes vhsTracking {
+  0%, 100% { text-shadow: 3px 0 0 #f00, -3px 0 0 #0ff; }
+  50% { text-shadow: 2px 1px 0 #f00, -2px -1px 0 #0ff; }
+}
+
+.custom-overlay-style-Matrix {
+  color: #0f0;
+  font-family: monospace;
+  text-shadow: 0 0 5px #0f0, 0 0 10px #0f0;
+  letter-spacing: 2px;
+  animation: matrixGlow 2s infinite alternate;
+}
+@keyframes matrixGlow {
+  to { text-shadow: 0 0 10px #0f0, 0 0 20px #0f0; }
+}
+
+.custom-overlay-style-Ghost {
+  color: rgba(255,255,255,0.8);
+  filter: blur(0px);
+  animation: ghostApparition 6s infinite alternate;
+}
+@keyframes ghostApparition {
+  0% { filter: blur(0px); opacity: 1; transform: scale(1); }
+  50% { filter: blur(3px); opacity: 0.6; transform: scale(1.02); }
+  100% { filter: blur(8px); opacity: 0; transform: scale(1.05); }
+}
+
+.custom-overlay-style-PulseGlow {
+  color: #fff;
+  text-shadow: 0 0 10px rgba(255,255,255,0.8);
+  animation: pulseGlowAura 3s ease-in-out infinite alternate;
+}
+@keyframes pulseGlowAura {
+  0% { text-shadow: 0 0 5px rgba(255,255,255,0.5), 0 0 10px #00a4dc; transform: scale(1); }
+  100% { text-shadow: 0 0 15px rgba(255,255,255,1), 0 0 30px #00a4dc, 0 0 40px #00a4dc; transform: scale(1.05); }
+}
+
+/* Custom Overlay Image Styles */
+.custom-overlay-img-RoundedShadow {
+  border-radius: 12px;
+  filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.6));
+}
+
+.custom-overlay-img-GlowingBorder {
+  border-radius: 8px;
+  box-shadow: 0 0 10px #00a4dc, 0 0 20px #00a4dc, 0 0 30px #00a4dc, inset 0 0 10px #00a4dc;
+  animation: pulseGlowImg 2s infinite alternate;
+}
+@keyframes pulseGlowImg {
+  from { box-shadow: 0 0 10px #00a4dc, 0 0 20px #00a4dc, 0 0 30px #00a4dc; }
+  to { box-shadow: 0 0 15px #00a4dc, 0 0 30px #00a4dc, 0 0 45px #00a4dc; }
+}
+
+.custom-overlay-img-Polaroid {
+  background: white;
+  padding: 10px 10px 25px 10px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.4), 0 12px 24px rgba(0,0,0,0.3);
+  transform: rotate(-3deg);
+  border-radius: 2px;
+}
+
+.custom-overlay-img-Vintage {
+  filter: sepia(0.6) contrast(1.2) brightness(0.9) saturate(1.2) drop-shadow(2px 4px 8px rgba(0,0,0,0.6));
+}
+
+.custom-overlay-img-Grayscale {
+  filter: grayscale(100%) contrast(1.1) drop-shadow(2px 4px 8px rgba(0,0,0,0.6));
+}
+
+.custom-overlay-img-Hologram {
+  filter: drop-shadow(0 0 10px #0ff) sepia(0.8) hue-rotate(180deg) saturate(3);
+  opacity: 0.8;
+  animation: hologramFlicker 3s infinite;
+}
+@keyframes hologramFlicker {
+  0% { opacity: 0.8; transform: skewX(0); }
+  5% { opacity: 0.5; transform: skewX(2deg); }
+  10% { opacity: 0.9; transform: skewX(-2deg); }
+  15% { opacity: 0.8; transform: skewX(0); }
+  100% { opacity: 0.8; }
+}
+
+.custom-overlay-img-CRT {
+  filter: contrast(1.5) brightness(1.2) drop-shadow(3px 0 0 rgba(255,0,0,0.5)) drop-shadow(-3px 0 0 rgba(0,0,255,0.5));
+}
+
+.custom-overlay-img-Floating {
+  filter: drop-shadow(0 15px 20px rgba(0,0,0,0.6));
+  animation: floatImg 4s ease-in-out infinite;
+}
+@keyframes floatImg {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-15px); }
+}
+
+.custom-overlay-img-VHSTracking {
+  filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5));
+  animation: imgVhsTracking 2s infinite;
+}
+@keyframes imgVhsTracking {
+  0% { transform: translateX(0); clip-path: inset(0 0 0 0); filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5)) hue-rotate(0deg); }
+  5% { transform: translateX(-5px); clip-path: inset(10% 0 80% 0); filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5)) hue-rotate(90deg); }
+  10% { transform: translateX(5px); clip-path: inset(40% 0 40% 0); filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5)) hue-rotate(-90deg); }
+  15% { transform: translateX(0); clip-path: inset(0 0 0 0); filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5)) hue-rotate(0deg); }
+  100% { transform: translateX(0); clip-path: inset(0 0 0 0); }
+}
+
+.custom-overlay-img-ColorCycle {
+  filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5));
+  animation: imgColorCycle 10s linear infinite;
+}
+@keyframes imgColorCycle {
+  from { filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5)) hue-rotate(0deg); }
+  to { filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5)) hue-rotate(360deg); }
+}
+
+.custom-overlay-img-Mirror {
+  filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5));
+  -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(255,255,255,0.3));
+}
+

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js

@@ -1,4 +1,4 @@
-/*
+/*
  * Jellyfin Slideshow by M0RPH3US v4.0.1
  * Modified by CodeDevMLH
  * 
@@ -58,6 +58,17 @@ const CONFIG = {
   enableKeyboardControls: true,
   alwaysShowArrows: false,
   hideArrowsOnMobile: true,
+  enableCustomOverlay: false,
+  customOverlayText: "",
+  customOverlayImageUrl: "",
+  customOverlayStyle: "Shadowed",
+  customOverlayImageStyle: "None",
+  customOverlayPriority: "Image",
+  customOverlayPositionX: 0,
+  customOverlayPositionY: 0,
+  customOverlayScale: 100,
+  backdropVideoDelay: 0,
+  constrainPlotWidth: false,
   enableCustomMediaIds: true,
   enableSeasonalContent: false,
   customMediaIds: "",
@@ -101,6 +112,7 @@ const STATE = {
     customTrailerUrls: {},
     ytPromise: null,
     autoplayTimeouts: [],
+    playSignals: {},
   },
 };
 
@@ -331,6 +343,15 @@ const initLoadingScreen = () => {
       });
     });
   };
+
+  // Global Failsafe, force remove loading screen after 15 seconds to prevent infinite lockouts
+  setTimeout(() => {
+    const loader = document.querySelector(".bar-loading");
+    if (loader) {
+      console.warn("🎬 Media Bar:", "Loading screen timed out! Forcing removal as a failsafe.");
+      finishLoading();
+    }
+  }, 15000);
 };
 
 /**
@@ -378,6 +399,7 @@ const resetSlideshowState = () => {
   STATE.slideshow.customTrailerUrls = {};
   STATE.slideshow.totalItems = 0;
   STATE.slideshow.isLoading = false;
+  STATE.slideshow.playSignals = {};
 };
 
 /**
@@ -749,7 +771,7 @@ const SlideUtils = {
     if (isYoutube && videoId) {
       const ytIframe = this.createElement('iframe', {
         id: 'modal-yt-player',
-        src: `https://www.youtube-nocookie.com/embed/${videoId}?enablejsapi=1&origin=${encodeURIComponent(window.location.origin)}`,
+        src: `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&controls=1&iv_load_policy=3&rel=0&playsinline=1`,
         allow: 'autoplay; encrypted-media',
         style: 'width: 100%; height: 100%; border: none;',
         referrerpolicy: 'strict-origin-when-cross-origin',
@@ -759,20 +781,6 @@ const SlideUtils = {
       contentContainer.appendChild(ytIframe);
       overlay.append(closeButton, contentContainer);
       document.body.appendChild(overlay);
-
-      this.loadYouTubeIframeAPI().then(() => {
-        new YT.Player(ytIframe, {
-          playerVars: {
-            autoplay: 1,
-            controls: 1,
-            iv_load_policy: 3,
-            rel: 0,
-            playsinline: 1,
-            origin: window.location.origin,
-            enablejsapi: 1
-          }
-        });
-      });
     } else {
       const video = this.createElement('video', {
         src: url,
@@ -780,6 +788,7 @@ const SlideUtils = {
         autoplay: true,
         className: 'video-modal-player'
       });
+      video.setAttribute('playsinline', '');
       contentContainer.appendChild(video);
       overlay.append(closeButton, contentContainer);
       document.body.appendChild(overlay);
@@ -1797,7 +1806,7 @@ const SlideCreator = {
         // Create an iframe upfront
         const ytPlayerIframe = SlideUtils.createElement("iframe", {
           id: `youtube-player-${itemId}`,
-          src: `https://www.youtube-nocookie.com/embed/${videoId}?enablejsapi=1&origin=${encodeURIComponent(window.location.origin)}`,
+          src: `https://www.youtube-nocookie.com/embed/${videoId}?enablejsapi=1&autoplay=0&controls=0&playsinline=1&mute=${STATE.slideshow.isMuted ? 1 : 0}&origin=${encodeURIComponent(window.location.origin)}`,
           style: "width: 100%; height: 100%; border: none;",
           allow: "autoplay; encrypted-media",
           referrerpolicy: "strict-origin-when-cross-origin",
@@ -1872,11 +1881,11 @@ const SlideCreator = {
                     event.target.setPlaybackQuality(quality);
                   }
 
-                  // Only play if this is the active slide
+                  // Only play if this is the active slide and the play signal has been issued (delay finished)
                   const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
                   const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
 
-                  if (slide && slide.classList.contains('active') && !document.hidden && (!isVideoPlayerOpen || isVideoPlayerOpen.classList.contains('hide'))) {
+                  if (slide && slide.classList.contains('active') && STATE.slideshow.playSignals[itemId] === true && !document.hidden && (!isVideoPlayerOpen || isVideoPlayerOpen.classList.contains('hide'))) {
                     event.target.playVideo();
                     
                     // Check if it actually started playing after a short delay (handling autoplay blocks)
@@ -1909,8 +1918,14 @@ const SlideCreator = {
                   }
                 },
                 'onStateChange': (event) => {
-                  // Fade in when playing
                   if (event.data === YT.PlayerState.PLAYING) {
+                      const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
+                      if (slide && STATE.slideshow.playSignals[itemId] === false) {
+                          event.target.pauseVideo();
+                          return;
+                      }
+                      
+                      // Fade in when legitimately playing
                       if (event.target._wrapperDiv) {
                           event.target._wrapperDiv.style.opacity = "1";
                       }
@@ -1949,6 +1964,7 @@ const SlideCreator = {
         };
 
         videoAttributes.muted = "";
+        videoAttributes.playsinline = "";
 
         videoBackdrop = SlideUtils.createElement("video", videoAttributes);
         videoBackdrop.volume = 0.4;
@@ -1964,6 +1980,11 @@ const SlideCreator = {
             return;
           }
           
+          if (STATE.slideshow.playSignals[itemId] === false) {
+            event.target.pause();
+            return;
+          }
+          
           // Fade in
           event.target.style.opacity = "1";
           
@@ -2049,7 +2070,7 @@ const SlideCreator = {
     SlideUtils.truncateText(plotElement, CONFIG.maxPlotLength);
 
     const plotContainer = SlideUtils.createElement("div", {
-      className: "plot-container",
+      className: "plot-container" + (CONFIG.constrainPlotWidth ? " constrained-plot" : ""),
     });
     plotContainer.appendChild(plotElement);
 
@@ -2366,8 +2387,17 @@ const SlideshowManager = {
 
     const totalItems = STATE.slideshow.totalItems || 0;
 
+    // dynamically lower the max dots threshold on small screens 
+    let effectiveMaxDots = CONFIG.maxPaginationDots;
+    if (window.matchMedia("(max-width: 767px) and (orientation: portrait)").matches) {
+      const availableWidth = window.innerWidth * 0.9;
+      const dotWidth = 18; // approximate width per dot
+      const fittingDots = Math.floor(availableWidth / dotWidth) - 1;
+      effectiveMaxDots = Math.min(effectiveMaxDots, fittingDots);
+    }
+
     // Switch to counter style if too many items
-    if (totalItems > CONFIG.maxPaginationDots) {
+    if (totalItems > effectiveMaxDots) {
       const counter = document.createElement("span");
       counter.className = "slide-counter";
       counter.id = "slide-counter";
@@ -2428,6 +2458,11 @@ const SlideshowManager = {
 
     STATE.slideshow.isTransitioning = true;
 
+    if (STATE.slideshow.backdropVideoTimeout) {
+      clearTimeout(STATE.slideshow.backdropVideoTimeout);
+      STATE.slideshow.backdropVideoTimeout = null;
+    }
+
     let previousVisibleSlide;
     try {
       const container = SlideUtils.getOrCreateSlidesContainer();
@@ -2459,6 +2494,7 @@ const SlideshowManager = {
 
       void currentSlide.offsetWidth;
       currentSlide.classList.add("active");
+      STATE.slideshow.playSignals[currentItemId] = false;
 
       // Manage Video Playback: Stop others, Play current
       // 1. Stop all other YouTube players and local video elements, release connections
@@ -2519,11 +2555,13 @@ const SlideshowManager = {
       }
 
       if (videoBackdrop) {
+        // preload logic
         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.load(); // Force pre-buffering
           }
 
           videoBackdrop.currentTime = 0;
@@ -2532,22 +2570,11 @@ const SlideshowManager = {
           if (!STATE.slideshow.isMuted) {
             videoBackdrop.volume = 0.4;
           }
-
-          videoBackdrop.play().catch(e => {
-            // Check if it actually started playing after a short delay (handling autoplay blocks)
-            setTimeout(() => {
-              if (videoBackdrop.paused && currentSlide.classList.contains('active')) {
-                console.warn("🎬 Media Bar:", `Autoplay blocked for ${currentItemId}, attempting muted fallback`);
-                videoBackdrop.muted = true;
-                videoBackdrop.play().catch(err => console.error("🎬 Media Bar:", "Muted fallback failed", err));
-              }
-            }, 1000);
-          });
         } else if (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
           const player = STATE.slideshow.videoPlayers[currentItemId];
-          if (player && typeof player.loadVideoById === 'function' && player._videoId) {
-            // Use loadVideoById to enforce start and end times
-            player.loadVideoById({
+          if (player && typeof player.cueVideoById === 'function' && player._videoId) {
+            // Use cueVideoById to buffer video without auto-playing it
+            player.cueVideoById({
               videoId: player._videoId,
               startSeconds: player._startTime || 0,
               endSeconds: player._endTime
@@ -2559,25 +2586,60 @@ const SlideshowManager = {
               player.unMute();
               player.setVolume(40);
             }
-
-            // Check if playback successfully started, otherwise fallback to muted
-            setTimeout(() => {
-              if (!currentSlide.classList.contains('active')) return;
-              if (player.getPlayerState &&
-                player.getPlayerState() !== YT.PlayerState.PLAYING &&
-                player.getPlayerState() !== YT.PlayerState.BUFFERING) {
-                console.log("🎬 Media Bar:", "YouTube loadVideoById didn't start playback, retrying muted...");
-                player.mute();
-                player.playVideo();
-              }
-            }, 1000);
           } else if (player && typeof player.seekTo === 'function') {
-            // Fallback if loadVideoById is not available or videoId missing
             const startTime = player._startTime || 0;
             player.seekTo(startTime);
-            player.playVideo();
           }
         }
+
+        // play logic
+        const playVideoLogic = () => {
+          if (!currentSlide.classList.contains('active')) return;
+          
+          STATE.slideshow.playSignals[currentItemId] = true;
+
+          if (videoBackdrop.tagName === 'VIDEO') {
+            videoBackdrop.play().catch(e => {
+              if (!STATE.slideshow.isMuted) {
+                // Check if it actually started playing after a short delay (handling autoplay blocks)
+                setTimeout(() => {
+                  if (videoBackdrop.paused && currentSlide.classList.contains('active')) {
+                    console.warn("🎬 Media Bar:", `Autoplay blocked for ${currentItemId}, attempting muted fallback`);
+                    videoBackdrop.muted = true;
+                    videoBackdrop.play().catch(err => console.error("🎬 Media Bar:", "Muted fallback failed", err));
+                  }
+                }, 1000);
+              } else {
+                console.error("🎬 Media Bar:", "Playback failed despite being muted", e);
+              }
+            });
+          } else if (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
+            const player = STATE.slideshow.videoPlayers[currentItemId];
+            if (player && typeof player.playVideo === 'function') {
+              player.playVideo();
+
+              if (!STATE.slideshow.isMuted) {
+                // Check if playback successfully started, otherwise fallback to muted
+                setTimeout(() => {
+                  if (!currentSlide.classList.contains('active')) return;
+                  if (player.getPlayerState &&
+                    player.getPlayerState() !== YT.PlayerState.PLAYING &&
+                    player.getPlayerState() !== YT.PlayerState.BUFFERING) {
+                    console.log("🎬 Media Bar:", "YouTube didn't start playback, retrying muted...");
+                    player.mute();
+                    player.playVideo();
+                  }
+                }, 1000);
+              }
+            }
+          }
+        };
+
+        if (CONFIG.backdropVideoDelay > 0) {
+          STATE.slideshow.backdropVideoTimeout = setTimeout(playVideoLogic, CONFIG.backdropVideoDelay);
+        } else {
+          playVideoLogic();
+        }
       }
 
       const enableAnimations = MediaBarEnhancedSettingsManager.getSetting('slideAnimations', CONFIG.slideAnimationEnabled);
@@ -3789,6 +3851,102 @@ const slidesInit = async () => {
     return;
   }
   
+  const renderCustomOverlay = () => {
+    let activeOverlayText = CONFIG.customOverlayText;
+    let activeOverlayImage = CONFIG.customOverlayImageUrl;
+    let isSeasonOverride = false;
+
+    if (CONFIG.enableSeasonalContent && CONFIG.seasonalSections) {
+      try {
+        const sections = JSON.parse(CONFIG.seasonalSections || "[]");
+        const now = new Date();
+        const currentMonth = now.getMonth() + 1;
+        const currentDay = now.getDate();
+
+        for (const section of sections) {
+          const startMonth = parseInt(section.StartMonth);
+          const startDay = parseInt(section.StartDay);
+          const endMonth = parseInt(section.EndMonth);
+          const endDay = parseInt(section.EndDay);
+
+          let isActive = false;
+          if (startMonth === endMonth) {
+            if (currentMonth === startMonth && currentDay >= startDay && currentDay <= endDay) {
+              isActive = true;
+            }
+          } else if (startMonth < endMonth) {
+            if (currentMonth > startMonth && currentMonth < endMonth) {
+              isActive = true;
+            } else if (currentMonth === startMonth && currentDay >= startDay) {
+              isActive = true;
+            } else if (currentMonth === endMonth && currentDay <= endDay) {
+              isActive = true;
+            }
+          } else { // Wraps around year
+            if (currentMonth > startMonth || currentMonth < endMonth) {
+              isActive = true;
+            } else if (currentMonth === startMonth && currentDay >= startDay) {
+              isActive = true;
+            } else if (currentMonth === endMonth && currentDay <= endDay) {
+              isActive = true;
+            }
+          }
+
+          if (isActive) {
+            if (section.OverlayText || section.OverlayImageUrl) {
+                isSeasonOverride = true;
+                // Season fully overrides global overlay, even if empty
+                activeOverlayImage = section.OverlayImageUrl || null;
+                activeOverlayText = section.OverlayText || null;
+            }
+            break;
+          }
+        }
+      } catch (e) {
+        console.error("🎬 Media Bar:", "Error parsing seasonal sections for overlay:", e);
+      }
+    }
+
+    if (!CONFIG.enableCustomOverlay && !isSeasonOverride) {
+      return; 
+    }
+
+    if (!activeOverlayText && !activeOverlayImage) return;
+
+    const overlayContainer = document.createElement("div");
+    overlayContainer.className = "custom-overlay-container";
+
+    const overlayPriority = CONFIG.customOverlayPriority || "Image";
+    const showImage = activeOverlayImage && (overlayPriority === "Image" || !activeOverlayText);
+    const showText = activeOverlayText && (!showImage);
+
+    if (showImage) {
+      const img = document.createElement("img");
+      const imgStyle = CONFIG.customOverlayImageStyle || "None";
+      img.className = `custom-overlay-image custom-overlay-img-${imgStyle}`;
+      img.src = activeOverlayImage;
+      overlayContainer.appendChild(img);
+    } else if (showText) {
+      const p = document.createElement("p");
+      p.className = `custom-overlay-text custom-overlay-style-${CONFIG.customOverlayStyle || 'Shadowed'}`;
+      p.textContent = activeOverlayText;
+      overlayContainer.appendChild(p);
+    }
+
+    const slidesContainer = document.getElementById("slides-container");
+    if (slidesContainer) {
+      const posX = CONFIG.customOverlayPositionX || 0;
+      const posY = CONFIG.customOverlayPositionY || 0;
+      const scaleValue = (CONFIG.customOverlayScale !== undefined ? CONFIG.customOverlayScale : 100) / 100;
+      
+      overlayContainer.style.setProperty('--overlay-x', `${posX}vw`);
+      overlayContainer.style.setProperty('--overlay-y', `${posY}vh`);
+      overlayContainer.style.setProperty('--overlay-scale', scaleValue);
+
+      slidesContainer.appendChild(overlayContainer);
+    }
+  };
+  
   if (CONFIG.enableClientSideSettings) {
       MediaBarEnhancedSettingsManager.init();
       const isClientSideEnabled = MediaBarEnhancedSettingsManager.getSetting('enabled', true);
@@ -3799,8 +3957,16 @@ const slidesInit = async () => {
             homeSections.style.top = '0';
             homeSections.style.marginTop = '0';
           }
-          const container = document.getElementById('slides-container');
-          if (container) container.style.display = 'none';
+          let container = document.getElementById('slides-container');
+          if (container) {
+            container.style.display = 'none';
+          } else {
+            // Create dummy container so loading screen's interval can trigger its own cleanup
+            container = document.createElement('div');
+            container.id = 'slides-container';
+            container.style.display = 'none';
+            document.body.appendChild(container);
+          }
           
           return;
       }
@@ -3887,6 +4053,8 @@ const slidesInit = async () => {
 
     initArrowNavigation();
 
+    renderCustomOverlay();
+
     await SlideshowManager.loadSlideshowData();
 
     SlideshowManager.initTouchEvents();

RELEASE_GUIDE.md

@@ -42,6 +42,10 @@ Bevor du baust, musst du die Versionsnummer in den folgenden Dateien aktualisier
 
 Führe den folgenden Befehl im Terminal (PowerShell) im Hauptverzeichnis aus. Wir nutzen hier `dotnet build` statt `publish`, um unnötige Dateien zu vermeiden.
 
+```powershell
+dotnet build Jellyfin.Plugin.MediaBarEnhanced/Jellyfin.Plugin.MediaBarEnhanced.csproj --configuration Release --output bin/Publish;
+```
+
 ```powershell
 dotnet build Jellyfin.Plugin.MediaBarEnhanced/Jellyfin.Plugin.MediaBarEnhanced.csproj --configuration Release --output bin/Publish; Compress-Archive -Path bin/Publish/* -DestinationPath bin/Publish/Jellyfin.Plugin.MediaBarEnhanced.zip -Force; $hash = (Get-FileHash -Algorithm MD5 bin/Publish/Jellyfin.Plugin.MediaBarEnhanced.zip).Hash.ToLower(); $time = (Get-Date).ToUniversalTime().ToString("yyyy-MM-ddTHH:mm:ssZ"); Write-Output "`n----------------------------------------"; Write-Output "NEUE CHECKSUMME (MD5): $hash"; Write-Output "ZEITSTEMPEL:           $time"; Write-Output "----------------------------------------`n"
 ```

manifest.json

@@ -9,12 +9,20 @@
     "imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
     "versions": [
       {
-        "version": "1.7.1.9",
-        "changelog": "- feat: add option to disable pagination dots/counter\n- feat: add exclude seasonal content from random fetching option\n- Add hide arrows on mobile option \n- fix button issue on mobile when using ElegantFin Theme",
+        "version": "1.9.0.0",
+        "changelog": "- fix pagination dot issue on mobile when showing more than 10 dots (should now dynamically adjust the max dots threshold based on screen size)\n- add option to delay trailer playback\n- add option to limit the plot width",
         "targetAbi": "10.11.0.0",
-        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.7.1.9/Jellyfin.Plugin.MediaBarEnhanced.zip",
-        "checksum": "af20c62dae53ee05dec1ac7ae6bb1149",
-        "timestamp": "2026-03-08T20:58:25Z"
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.9.0.0/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "de2c736f754788eeb881aaa4fafa692f",
+        "timestamp": "2026-03-24T01:27:06Z"
+      },
+      {
+        "version": "1.8.0.0",
+        "changelog": "- feat: add custom text/image overlay option\n- feat: add option to disable pagination dots/counter\n- feat: add exclude seasonal content from random fetching option\n- Add hide arrows on mobile option \n- fix button issue on mobile when using ElegantFin Theme",
+        "targetAbi": "10.11.0.0",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.8.0.0/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "0aac723796d41fc15987c94ac0476584",
+        "timestamp": "2026-03-11T01:38:43Z"
       },
       {
         "version": "1.7.0.14",