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

Jellyfin.Plugin.MediaBarEnhanced/Api/OverlayImageController.cs

@@ -0,0 +1,89 @@
+using System;
+using System.IO;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+using MediaBrowser.Common.Configuration;
+
+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;
+        private readonly string _imagePath;
+
+        public OverlayImageController(IApplicationPaths applicationPaths)
+        {
+            _applicationPaths = applicationPaths;
+            
+            // We use the plugin's data folder to store the image
+            _imageDirectory = MediaBarEnhancedPlugin.Instance?.DataFolderPath ?? Path.Combine(applicationPaths.DataPath, "plugins", "MediaBarEnhanced");
+            
+            // We'll just overwrite this single file each time
+            _imagePath = Path.Combine(_imageDirectory, "custom_overlay_image.dat");
+        }
+
+        /// <summary>
+        /// Uploads a new custom overlay image.
+        /// </summary>
+        [HttpPost("OverlayImage")]
+        [Consumes("multipart/form-data")]
+        public async Task<IActionResult> UploadImage([FromForm] IFormFile file)
+        {
+            if (file == null || file.Length == 0)
+            {
+                return BadRequest("No file uploaded.");
+            }
+
+            try
+            {
+                if (!Directory.Exists(_imageDirectory))
+                {
+                    Directory.CreateDirectory(_imageDirectory);
+                }
+
+                // Delete is not strictly necessary and can cause locking issues if someone is currently reading it.
+                // FileMode.Create will truncate the file if it exists, effectively overwriting it.
+                // We use FileShare.None to ensure we have exclusive write access, but handle potential IOExceptions gracefully.
+                using (var stream = new FileStream(_imagePath, FileMode.Create, FileAccess.Write, FileShare.None))
+                {
+                    await file.CopyToAsync(stream).ConfigureAwait(false);
+                }
+
+                // Return the GET URL that the frontend can use
+                var getUrl = "/MediaBarEnhanced/OverlayImage?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()
+        {
+            if (!System.IO.File.Exists(_imagePath))
+            {
+                return NotFound();
+            }
+
+            // 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(_imagePath, 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/*");
+        }
+    }
+}

Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs

@@ -53,5 +53,6 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
         public bool EnableCustomOverlay { get; set; } = false;
         public string CustomOverlayText { get; set; } = "";
         public string CustomOverlayImageUrl { get; set; } = "";
+        public string CustomOverlayStyle { get; set; } = "Shadowed";
     }
 }

Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html

@@ -34,6 +34,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>Advanced Settings</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>
                 </div>
 
                 <form id="mediaBarEnhancedConfigForm">
@@ -210,10 +214,10 @@
                         <input type="hidden" id="SeasonalSections" name="SeasonalSections" value="[]" />
                     </div>
 
-                    <!-- ADVANCED TAB -->
-                    <div id="media-bar-enhanced-advanced" class="tab-content" style="display:none;">
+                    <!-- 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.</p>
+                        <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>
@@ -223,18 +227,51 @@
                             <div class="fieldDescription">If enabled, the text or image below will hover over the slideshow globally.</div>
                         </div>
 
+                        <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="Shadowed">Classic Shadowed</option>
+                                <option value="Frosted">Frosted Glass Pill</option>
+                                <option value="Cinematic">Cinematic Golden Glow</option>
+                                <option value="Pulse">Animated Pulse</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. If provided, this overrides the text.</div>
+                            <div class="fieldDescription">Absolute URL to an image to display on the overlay. If provided, this overrides the text above.</div>
                         </div>
 
-                        <hr style="max-width: 800px; margin: 1em 0;">
+                        <!-- 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" 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: white;">close</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>
 
+                    <!-- ADVANCED TAB -->
+                    <div id="media-bar-enhanced-advanced" class="tab-content" style="display:none;">
                         <h2 class="sectionTitle">Features</h2>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label>
@@ -558,7 +595,8 @@
                             'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
                             'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating',
                             'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile',
-                            'EnableCustomOverlay', 'CustomOverlayText', 'CustomOverlayImageUrl'
+                            'EnableCustomOverlay', 'CustomOverlayText', 'CustomOverlayImageUrl',
+                            'CustomOverlayStyle'
                         ];
 
                         // Manual mapping for MediaBarIsEnabled -> IsEnabled, to avoid conflicts with other plugins
@@ -638,6 +676,108 @@
                             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() {
+                            if (urlInput.value && urlInput.value.trim() !== '') {
+                                previewImg.src = urlInput.value;
+                                previewImg.style.display = 'block';
+                                clearBtn.style.display = 'block';
+                            } else {
+                                previewImg.style.display = 'none';
+                                clearBtn.style.display = 'none';
+                            }
+                        }
+
+                        // Initial check
+                        updatePreview();
+
+                        // Listen to manual URL input changes
+                        urlInput.addEventListener('input', updatePreview);
+
+                        clearBtn.addEventListener('click', function(e) {
+                            e.stopPropagation(); // prevent triggering file dialog
+                            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();
                     });
                 },
@@ -670,7 +810,8 @@
                         'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
                         'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating',
                         'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile',
-                        'EnableCustomOverlay', 'CustomOverlayText', 'CustomOverlayImageUrl'
+                        'EnableCustomOverlay', 'CustomOverlayText', 'CustomOverlayImageUrl',
+                        'CustomOverlayStyle'
                     ];
 
                     keys.forEach(function (key) {

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.14</Version>
+    <Version>1.7.2.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

@@ -1103,3 +1103,53 @@
     }
   }
 }
+
+/* Custom Overlay Styles */
+.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: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  padding: 8px 24px;
+  border-radius: 50px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  text-shadow: none; /* override default */
+}
+
+.custom-overlay-style-Cinematic {
+  background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  text-shadow: none; /* override default */
+  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 4s linear infinite;
+  background-size: 200% auto;
+}
+
+@keyframes shineCinematic {
+  to {
+    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);
+  }
+}

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js

@@ -61,6 +61,7 @@ const CONFIG = {
   enableCustomOverlay: false,
   customOverlayText: "",
   customOverlayImageUrl: "",
+  customOverlayStyle: "Shadowed",
   enableCustomMediaIds: true,
   enableSeasonalContent: false,
   customMediaIds: "",
@@ -3851,7 +3852,7 @@ const slidesInit = async () => {
       overlayContainer.appendChild(img);
     } else if (activeOverlayText) {
       const p = document.createElement("p");
-      p.className = "custom-overlay-text";
+      p.className = `custom-overlay-text custom-overlay-style-${CONFIG.customOverlayStyle || 'Shadowed'}`;
       p.textContent = activeOverlayText;
       overlayContainer.appendChild(p);
     }

manifest.json

@@ -9,12 +9,12 @@
     "imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
     "versions": [
       {
-        "version": "1.7.1.14",
-        "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.7.2.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.1.14/Jellyfin.Plugin.MediaBarEnhanced.zip",
-        "checksum": "d4a115b5e3fd192572e21be8e95c55a7",
-        "timestamp": "2026-03-09T01:29:55Z"
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.7.2.0/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "6cb9c718f1ce097a31153a515f096040",
+        "timestamp": "2026-03-09T03:12:08Z"
       },
       {
         "version": "1.7.0.14",