Update manifest.json for release v1.8.1.1 [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
 {
@@ -26,7 +27,7 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
         /// <summary>
         /// Uploads a new custom overlay image.
         /// </summary>
-        // [Microsoft.AspNetCore.Authorization.Authorize]
+        [Authorize(Policy = "RequiresElevation")]
         [HttpPost("OverlayImage")]
         [Consumes("multipart/form-data")]
         public async Task<IActionResult> UploadImage([FromForm] IFormFile file, [FromQuery] string? filename = null)
@@ -40,7 +41,7 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
             string extension = Path.GetExtension(file.FileName);
             if (string.IsNullOrWhiteSpace(extension)) extension = ".jpg";
             
-            // Delete any existing file with this prefix before saving the new one (as extensions might differ)
+            // 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
@@ -60,9 +61,6 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
                 string targetFileName = $"{prefix}{extension}";
                 string targetPath = Path.Combine(_imageDirectory, targetFileName);
 
-                // 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(targetPath, FileMode.Create, FileAccess.Write, FileShare.None))
                 {
                     await file.CopyToAsync(stream).ConfigureAwait(false);
@@ -82,7 +80,6 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
         /// <summary>
         /// Retrieves the custom overlay image.
         /// </summary>
-        // [Microsoft.AspNetCore.Authorization.Authorize]
         [HttpGet("OverlayImage")]
         public IActionResult GetImage([FromQuery] string? filename = null)
         {
@@ -98,7 +95,6 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
             string targetPath = existingFiles[0];
 
             // Read the file and return with appropriate MIME type
-            // We use FileShare.ReadWrite | FileShare.Delete so that if someone is currently overwriting the file (uploading), we don't block them.
             var stream = new FileStream(targetPath, FileMode.Open, FileAccess.Read, FileShare.ReadWrite | FileShare.Delete);
             
             string mimeType = "application/octet-stream";
@@ -115,7 +111,7 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
         /// <summary>
         /// Deletes a custom overlay image.
         /// </summary>
-        // [Microsoft.AspNetCore.Authorization.Authorize]
+        [Authorize(Policy = "RequiresElevation")]
         [HttpDelete("OverlayImage")]
         public IActionResult DeleteImage([FromQuery] string? filename = null)
         {
@@ -144,7 +140,6 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
         /// <summary>
         /// Renames a custom overlay image (used when a seasonal section is renamed).
         /// </summary>
-        // [Microsoft.AspNetCore.Authorization.Authorize]
         [HttpPut("OverlayImage/Rename")]
         public IActionResult RenameImage([FromQuery] string oldName, [FromQuery] string newName)
         {

Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html

@@ -259,11 +259,11 @@
                                 <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; color: #a94442;" title="Clear 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 securely save it to the server and automatically update the URL field above.</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>
@@ -756,7 +756,7 @@
                             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.textContent = 'Drag and drop a new image here, or click to select';
@@ -943,7 +943,7 @@
                     MediaBarEnhancedConfigurationPage.createSectionElement(container, {
                         Name: 'New Season',
                         StartDay: 1, StartMonth: 1,
-                        EndDay: 1, EndMonth: 1,
+                        EndDay: 31, EndMonth: 1,
                         MediaIds: '',
                         OverlayText: '',
                         OverlayImageUrl: ''
@@ -1021,12 +1021,12 @@
                         '        </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: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center;">' +
+                        '        <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" title="Clear Image" style="display: none; position: absolute; top: 0px; right: 0px; z-index: 3; color: #a94442;"><i class="material-icons">delete</i></button>' +
+                        '            <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>';
@@ -1098,7 +1098,7 @@
                         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.textContent = 'Drag and drop a new image here, or click to select';

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

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css

@@ -749,6 +749,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 {

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js

@@ -1,4 +1,4 @@
-/*
+/*
  * Jellyfin Slideshow by M0RPH3US v4.0.1
  * Modified by CodeDevMLH
  * 
@@ -2363,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";

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.8",
+        "version": "1.8.1.1",
+        "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.1/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "f39c154f60527a98a3454e0c72c81cfa",
+        "timestamp": "2026-03-23T16:42:41Z"
+      },
+      {
+        "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.8/Jellyfin.Plugin.MediaBarEnhanced.zip",
-        "checksum": "b2ddf7bd8f42d5bcddff03259115d086",
-        "timestamp": "2026-03-10T23:05:13Z"
+        "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",