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

Jellyfin.Plugin.MediaBarEnhanced/Api/OverlayImageController.cs

@@ -20,7 +20,7 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
         public OverlayImageController(IApplicationPaths applicationPaths)
         {
             _applicationPaths = applicationPaths;
-            _imageDirectory = Path.Combine(applicationPaths.DataPath, "plugins", "configurations", "MediaBarEnhancedAssets");
+            _imageDirectory = Path.Combine(applicationPaths.PluginConfigurationsPath, "Jellyfin.Plugin.MediaBarEnhanced", "Assets");
         }
 
         /// <summary>
@@ -97,13 +97,19 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
 
             string targetPath = existingFiles[0];
 
-            // Read the file and return as a generic octet stream. 
+            // Read the file and return with appropriate MIME type
-            // We use FileShare.ReadWrite so that if someone is currently overwriting the file (uploading), we don't block them,
+            // We use FileShare.ReadWrite | FileShare.Delete 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 | FileShare.Delete);
-            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).
+            string mimeType = "application/octet-stream";
-            return File(stream, "image/*");
+            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>

Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html

@@ -266,7 +266,7 @@
                             <div class="fieldDescription">Uploading an image will securely save it to the server and automatically update the URL field above.</div>
                         </div>
                         
-                        <h3 class="inputLabel" style="margin-top: 2em;">Styles</h3>
+                        <h2 class="sectionTitle" style="margin-top: 1.2em;">Styles</h2>
 
                         <div class="selectContainer">
                             <label class="selectLabel" for="CustomOverlayStyle">Overlay Style</label>
@@ -289,6 +289,8 @@
                                 <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>
@@ -307,6 +309,9 @@
                                 <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>
@@ -985,7 +990,7 @@
                         '    <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: 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!)" />' +
@@ -996,13 +1001,13 @@
                         '            <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: 80px; 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: 5px; right: 5px; z-index: 3; color: #a94442;"><i class="material-icons">delete</i></button>' +
+                        '            <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>' +
                         '        </div>' +
                         '    </div>' +
                         '</div>';
@@ -1077,7 +1082,7 @@
                             clearBtn.style.display = 'block';
                             if(icon) icon.style.display = 'none';
                             if(text) {
-                                text.textContent = 'Drag and drop a new image here...';
+                                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';
@@ -1093,7 +1098,7 @@
                             clearBtn.style.display = 'none';
                             if(icon) icon.style.display = 'block';
                             if(text) {
-                                text.textContent = 'Upload seasonal image';
+                                text.textContent = 'Upload seasonal overlay image';
                                 text.style.display = 'block';
                                 text.style.position = 'static';
                                 text.style.backgroundColor = 'transparent';

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

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css

@@ -1082,7 +1082,7 @@
 
 @media only screen and (max-width: 767px) and (orientation: portrait) {
   .custom-overlay-container {
-    top: 8%;    /* oder 5vh? */
+    top: 15vh;
     left: 50%;
     transform: translateX(-50%);
     width: 90%;
@@ -1244,9 +1244,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 {
@@ -1324,6 +1323,7 @@
 @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); }
 }
 
@@ -1348,6 +1348,27 @@
   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;
@@ -1406,3 +1427,29 @@
   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));
+}
+

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.2.3",
+        "version": "1.7.2.6",
         "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.3/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.7.2.6/Jellyfin.Plugin.MediaBarEnhanced.zip",
-        "checksum": "21ed7324f18cf979f56a424940c25939",
+        "checksum": "159c4d42dca78088fb4725af1c4252cc",
-        "timestamp": "2026-03-10T00:06:06Z"
+        "timestamp": "2026-03-10T22:08:50Z"
       },
       {
         "version": "1.7.0.14",