Update manifest.json for release v1.8.1.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

@@ -4,6 +4,7 @@ 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
 {
@@ -20,17 +21,13 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
         public OverlayImageController(IApplicationPaths applicationPaths)
         {
             _applicationPaths = applicationPaths;
-            
+            _imageDirectory = Path.Combine(applicationPaths.PluginConfigurationsPath, "Jellyfin.Plugin.MediaBarEnhanced", "Assets");
-            // We use the plugin's data folder to store the image
-            _imageDirectory = MediaBarEnhancedPlugin.Instance?.DataFolderPath ?? Path.Combine(applicationPaths.DataPath, "plugins", "MediaBarEnhanced");
-            
-            // We no longer define the exact path here, just the directory
-            // The filename is determined per request
         }
 
         /// <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)
@@ -40,10 +37,12 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
                 return BadRequest("No file uploaded.");
             }
 
-            string targetFileName = string.IsNullOrWhiteSpace(filename) 
+            // Extract original extension or fallback to .jpg
-                ? "custom_overlay_image.dat" 
+            string extension = Path.GetExtension(file.FileName);
-                : $"custom_overlay_image_{filename}.dat";
+            if (string.IsNullOrWhiteSpace(extension)) extension = ".jpg";
-            string targetPath = Path.Combine(_imageDirectory, targetFileName);
+            
+            // 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
             {
@@ -52,9 +51,16 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
                     Directory.CreateDirectory(_imageDirectory);
                 }
 
-                // Delete is not strictly necessary and can cause locking issues if someone is currently reading it.
+                // Remove existing
-                // FileMode.Create will truncate the file if it exists, effectively overwriting it.
+                var existingFiles = Directory.GetFiles(_imageDirectory, $"{prefix}.*");
-                // We use FileShare.None to ensure we have exclusive write access, but handle potential IOExceptions gracefully.
+                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);
@@ -77,48 +83,56 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
         [HttpGet("OverlayImage")]
         public IActionResult GetImage([FromQuery] string? filename = null)
         {
-            string targetFileName = string.IsNullOrWhiteSpace(filename) 
+            string prefix = string.IsNullOrWhiteSpace(filename) ? "custom_overlay_image_global" : $"custom_overlay_image_{filename}";
-                ? "custom_overlay_image.dat" 
-                : $"custom_overlay_image_{filename}.dat";
-            string targetPath = Path.Combine(_imageDirectory, targetFileName);
             
-            if (!System.IO.File.Exists(targetPath))
+            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);
-            // Read the file and return as a generic octet stream. 
-            // We use FileShare.ReadWrite so that if someone is currently overwriting the file (uploading), we don't block them,
-            // and we also don't get blocked by other readers.
-            var stream = new FileStream(targetPath, FileMode.Open, FileAccess.Read, FileShare.ReadWrite);
-            
-            // "image/*" works reliably as browsers will sniff the exact image mime type (jpeg, png, webp).
-            return File(stream, "image/*");
         }
 
         /// <summary>
         /// Deletes a custom overlay image.
         /// </summary>
+        [Authorize(Policy = "RequiresElevation")]
         [HttpDelete("OverlayImage")]
         public IActionResult DeleteImage([FromQuery] string? filename = null)
         {
-            string targetFileName = string.IsNullOrWhiteSpace(filename) 
+            string prefix = string.IsNullOrWhiteSpace(filename) ? "custom_overlay_image_global" : $"custom_overlay_image_{filename}";
-                ? "custom_overlay_image.dat" 
-                : $"custom_overlay_image_{filename}.dat";
-            string targetPath = Path.Combine(_imageDirectory, targetFileName);
             
-            if (System.IO.File.Exists(targetPath))
+            if (Directory.Exists(_imageDirectory))
+            {
+                var existingFiles = Directory.GetFiles(_imageDirectory, $"{prefix}.*");
+                foreach(var file in existingFiles)
                 {
                     try
                     {
-                    System.IO.File.Delete(targetPath);
+                        System.IO.File.Delete(file);
-                    return Ok();
                     }
                     catch (Exception ex)
                     {
                         return StatusCode(500, $"Error deleting file: {ex.Message}");
                     }
                 }
+                return Ok();
+            }
 
             return NotFound();
         }
@@ -134,22 +148,23 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
                 return BadRequest("Both oldName and newName must be provided.");
             }
 
-            string oldPath = Path.Combine(_imageDirectory, $"custom_overlay_image_{oldName}.dat");
+            if (!Directory.Exists(_imageDirectory))
-            string newPath = Path.Combine(_imageDirectory, $"custom_overlay_image_{newName}.dat");
+                return Ok();
-
+
-            if (!System.IO.File.Exists(oldPath))
+            var oldFiles = Directory.GetFiles(_imageDirectory, $"custom_overlay_image_{oldName}.*");
-            {
+            if (oldFiles.Length == 0)
-                // If it doesn't exist, there is nothing to rename, but we still consider it a success 
-                // since the end state (file with oldName is gone, file with newName doesn't exist yet) is acceptable.
                 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
-                if (System.IO.File.Exists(newPath))
+                var existingNewFiles = Directory.GetFiles(_imageDirectory, $"custom_overlay_image_{newName}.*");
-                {
+                foreach(var existing in existingNewFiles) {
-                    System.IO.File.Delete(newPath);
+                    System.IO.File.Delete(existing);
                 }
                 
                 System.IO.File.Move(oldPath, newPath);

Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs

@@ -56,5 +56,9 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
         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

@@ -227,11 +227,53 @@
                             <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>
@@ -244,23 +286,15 @@
                                 <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="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!"). Leave blank to use an image instead.</div>
-                        </div>
-
-                        <h3 class="inputLabel" style="margin-top: 2em;">Global Overlay Image</h3>
-                        <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>
-
                         <div class="selectContainer">
                             <label class="selectLabel" for="CustomOverlayImageStyle">Image Style</label>
                             <select is="emby-select" id="CustomOverlayImageStyle" name="CustomOverlayImageStyle"
@@ -272,35 +306,33 @@
                                 <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>
 
-                        <div class="selectContainer" style="margin-top: 1em;">
+                        <h3 class="sectionTitle" style="margin-top:2em; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5em;">Layout Tweaks</h3>
-                            <label class="selectLabel" for="CustomOverlayPriority">Priority (If Both Are Set)</label>
+                        <div style="display: flex; gap: 1em; flex-wrap: wrap;">
-                            <select is="emby-select" id="CustomOverlayPriority" name="CustomOverlayPriority"
+                            <div class="inputContainer" style="flex: 1; min-width: 150px;">
-                                class="selectLayout emby-select-withcolor emby-select"
+                                <label class="inputLabel inputLabelUnfocused" for="CustomOverlayPositionX">X Offset (% vw)</label>
-                                style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
+                                <input is="emby-input" type="number" id="CustomOverlayPositionX" name="CustomOverlayPositionX" min="-50" max="50" step="1" />
-                                <option value="Image">Show Image</option>
+                                <div class="fieldDescription">Horizontal nudge (negative = left, positive = right). Default is 0.</div>
-                                <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" style="flex: 1; min-width: 150px;">
-                        <!-- Image Upload Dropzone -->
+                                <label class="inputLabel inputLabelUnfocused" for="CustomOverlayPositionY">Y Offset (% vh)</label>
-                        <div class="inputContainer" style="margin-top: 1em;">
+                                <input is="emby-input" type="number" id="CustomOverlayPositionY" name="CustomOverlayPositionY" min="-50" max="50" step="1" />
-                            <label class="inputLabel">Or Upload Local Image</label>
+                                <div class="fieldDescription">Vertical nudge (negative = up, positive = down). Default is 0.</div>
-                            <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;">
+                            </div>
-                                <i class="material-icons" style="font-size: 40px; color: rgba(255,255,255,0.4); margin-bottom: 10px;">cloud_upload</i>
+                            <div class="inputContainer" style="flex: 1; min-width: 150px;">
-                                <span style="font-size: 1.1em; color: rgba(255,255,255,0.7);">Drag and drop an image here, or click to select</span>
+                                <label class="inputLabel inputLabelUnfocused" for="CustomOverlayScale">Scale (%)</label>
-                                <input type="file" id="overlayImageInput" accept="image/png, image/jpeg, image/gif, image/webp" style="display: none;">
+                                <input is="emby-input" type="number" id="CustomOverlayScale" name="CustomOverlayScale" min="50" max="200" step="1" />
-                                <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;" />
+                                <div class="fieldDescription">Overlay zoom level. Default is 100%.</div>
-                                <!-- A semi-transparent overlay to clear the image -->
-                                <button type="button" id="clearOverlayImageBtn" is="paper-icon-button-light" style="display: none; position: absolute; top: 10px; right: 10px; z-index: 3; background: rgba(0,0,0,0.6); border-radius: 50%; padding: 5px;" title="Clear Image">
-                                    <i class="material-icons" style="color: #a94442;">delete</i>
-                                </button>
                             </div>
-                            <div class="fieldDescription">Uploading an image will securely save it to the server and automatically update the URL field above.</div>
                         </div>
                     </div>
 
@@ -630,7 +662,8 @@
                             'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating',
                             'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile',
                             'EnableCustomOverlay', 'CustomOverlayText', 'CustomOverlayImageUrl',
-                            'CustomOverlayStyle', 'CustomOverlayImageStyle', 'CustomOverlayPriority'
+                            'CustomOverlayStyle', 'CustomOverlayImageStyle', 'CustomOverlayPriority',
+                            'CustomOverlayPositionX', 'CustomOverlayPositionY', 'CustomOverlayScale'
                         ];
 
                         // Manual mapping for MediaBarIsEnabled -> IsEnabled, to avoid conflicts with other plugins
@@ -723,14 +756,28 @@
                             if (urlInput.value && urlInput.value.trim() !== '') {
                                 previewImg.src = urlInput.value;
                                 previewImg.style.display = 'block';
-                                clearBtn.style.display = 'block';
+                                clearBtn.style.display = 'inline-flex';
                                 if(icon) icon.style.display = 'none';
-                                if(text) text.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.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';
+                                }
                             }
                         }
 
@@ -860,7 +907,8 @@
                         'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating',
                         'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile',
                         'EnableCustomOverlay', 'CustomOverlayText', 'CustomOverlayImageUrl',
-                        'CustomOverlayStyle', 'CustomOverlayImageStyle', 'CustomOverlayPriority'
+                        'CustomOverlayStyle', 'CustomOverlayImageStyle', 'CustomOverlayPriority',
+                        'CustomOverlayPositionX', 'CustomOverlayPositionY', 'CustomOverlayScale'
                     ];
 
                     keys.forEach(function (key) {
@@ -895,7 +943,7 @@
                     MediaBarEnhancedConfigurationPage.createSectionElement(container, {
                         Name: 'New Season',
                         StartDay: 1, StartMonth: 1,
-                        EndDay: 1, EndMonth: 1,
+                        EndDay: 31, EndMonth: 1,
                         MediaIds: '',
                         OverlayText: '',
                         OverlayImageUrl: ''
@@ -960,26 +1008,25 @@
                         '    <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 Overrides</h3>' +
+                        '<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: stretch;">' +
+                        '<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 text or image URL.</div>' +
+                        '            <div class="fieldDescription">Override the global image URL.</div>' +
                         '        </div>' +
                         '    </div>' +
-                        '    <div class="inputContainer" style="flex: 1; min-width: 250px; margin: 0;">' +
+                        '    <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: 80px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;">' +
+                        '        <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" class="seasonal-clear-btn" is="paper-icon-button-light" style="display: none; position: absolute; top: 5px; right: 5px; z-index: 3; background: rgba(0,0,0,0.6); border-radius: 50%; padding: 4px;" title="Clear Image">' +
+                        '            <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>' +
-                        '                <i class="material-icons" style="color: #a94442; font-size: 18px;">delete</i>' +
-                        '            </button>' +
                         '        </div>' +
                         '    </div>' +
                         '</div>';
@@ -1051,15 +1098,31 @@
                         if (val) {
                             previewImg.src = val;
                             previewImg.style.display = 'block';
-                            clearBtn.style.display = 'block';
+                            clearBtn.style.display = 'inline-flex';
                             if(icon) icon.style.display = 'none';
-                            if(text) text.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.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';
+                            }
                         }
                     }
 

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.2.2</Version>
+    <Version>1.8.1.0</Version>
     <RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced</RepositoryUrl>
   </PropertyGroup>
 

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css

@@ -749,6 +749,14 @@
     left: 50%;
     transform: translateX(-50%) scale(0.8);
     background-color: #ffffff00;
+    width: max-content;
+    max-width: 90vw;
+    flex-wrap: nowrap;
+    overflow: hidden;
+  }
+
+  .dot {
+    flex-shrink: 0;
   }
 
   .dot.active {
@@ -1031,19 +1039,38 @@
     -webkit-backdrop-filter: none;
   }
 }
-/* Floating Custom Overlay Styling */
+
+/* Custom Overlay Styling */
 .custom-overlay-container {
   position: absolute;
-  top: 8vh;
+  top: calc(8vh + var(--overlay-y, 0vh));
-  left: 4vw;
+  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; /* Let clicks pass through to the slider */
+  pointer-events: none;
-  animation: fadeInOverlay 1.5s ease-in-out forwards;
+  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;
@@ -1061,38 +1088,22 @@
   filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5));
 }
 
-@keyframes fadeInOverlay {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
 
-/* Make it smaller on mobile portrait */
 @media only screen and (max-width: 767px) and (orientation: portrait) {
   .custom-overlay-container {
-    top: 5vh;
+    top: calc(15vh + var(--overlay-y, 0vh));
-    left: 50%;
+    left: calc(50% + var(--overlay-x, 0vw));
-    transform: translateX(-50%);
+    transform: translateX(-50%) scale(var(--overlay-scale, 1));
     width: 90%;
     justify-content: center;
     text-align: center;
   }
   
   .custom-overlay-text {
-    font-size: 1.8rem;
+    font-size: 1.5rem;  /* 1.5 - 1.8 */
   }
 
-  .custom-overlay-image {
+  /* @keyframes fadeInOverlay {
-    max-width: 200px;
-    max-height: 80px;
-  }
-
-  @keyframes fadeInOverlay {
     from {
       opacity: 0;
       transform: translate(-50%, -10px);
@@ -1101,10 +1112,20 @@
       opacity: 1;
       transform: translate(-50%, 0);
     }
+  } */
+  
+  .custom-overlay-image {
+    max-width: 150px; /* oder 200px? */
+    max-height: 60px; /* oder 80px? */
   }
 }
 
-/* Custom Overlay Styles */
+/* 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);
@@ -1129,7 +1150,7 @@
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
-  text-shadow: none; /* override default */
+  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;
@@ -1155,8 +1176,6 @@
   }
 }
 
-
-/* Text Overlay Styles */
 .custom-overlay-style-Neon {
   color: #fff;
   text-shadow: 
@@ -1234,9 +1253,8 @@
   bottom: -10px;
   left: -50vw;
   right: -50px;
-  background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 70%, transparent 100%);
+  background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.6) 40%, transparent 100%);
   z-index: -1;
-  border-left: 5px solid #00a4dc;
 }
 
 @keyframes slideInCinematic {
@@ -1250,39 +1268,6 @@
   }
 }
 
-/* Image Overlay 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));
-}
-
-/* More Text Overlay Styles */
 .custom-overlay-style-SteadyNeon {
   color: #fff;
   text-shadow: 
@@ -1338,3 +1323,142 @@
   }
 }
 
+.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
  * 
@@ -64,6 +64,9 @@ const CONFIG = {
   customOverlayStyle: "Shadowed",
   customOverlayImageStyle: "None",
   customOverlayPriority: "Image",
+  customOverlayPositionX: 0,
+  customOverlayPositionY: 0,
+  customOverlayScale: 100,
   enableCustomMediaIds: true,
   enableSeasonalContent: false,
   customMediaIds: "",
@@ -2360,8 +2363,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";
@@ -3867,6 +3879,14 @@ const slidesInit = async () => {
 
     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);
     }
   };

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.2.2",
+        "version": "1.8.1.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)",
+        "targetAbi": "10.11.0.0",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.8.1.0/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "11bb618ca99a55403216effe3b1d2416",
+        "timestamp": "2026-03-23T16:28:16Z"
+      },
+      {
+        "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.7.2.2/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.8.0.0/Jellyfin.Plugin.MediaBarEnhanced.zip",
-        "checksum": "b01dfaf5202e6a2ecaa5078e3597140a",
+        "checksum": "0aac723796d41fc15987c94ac0476584",
-        "timestamp": "2026-03-09T22:29:30Z"
+        "timestamp": "2026-03-11T01:38:43Z"
       },
       {
         "version": "1.7.0.14",