Bump version to 1.7.2.8 in project files and manifest.json

Jellyfin.Plugin.MediaBarEnhanced/Api/OverlayImageController.cs

@@ -20,8 +20,7 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
         public OverlayImageController(IApplicationPaths applicationPaths)
         {
             _applicationPaths = applicationPaths;
-            
+            _imageDirectory = Path.Combine(applicationPaths.PluginConfigurationsPath, "Jellyfin.Plugin.MediaBarEnhanced", "Assets");
-            _imageDirectory = Path.Combine(applicationPaths.PluginConfigurationsPath, "MediaBarEnhancedAssets");
         }
 
         /// <summary>

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

@@ -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,11 +309,31 @@
                                 <option value="Hologram">Hologram</option>
                                 <option value="CRT">CRT Monitor</option>
                                 <option value="Floating">Floating Float</option>
+                                <option value="VHSTracking">VHS Tracking Glitch</option>
+                                <option value="ColorCycle">Rainbow Color Cycle</option>
+                                <option value="Mirror">Mirror Reflection</option>
                             </select>
                             <div class="fieldDescription">Choose a visual effect to apply to your overlay image.</div>
                         </div>
 
-
+                        <h3 class="sectionTitle" style="margin-top:2em; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5em;">Layout Tweaks</h3>
+                        <div style="display: flex; gap: 1em; flex-wrap: wrap;">
+                            <div class="inputContainer" style="flex: 1; min-width: 150px;">
+                                <label class="inputLabel inputLabelUnfocused" for="CustomOverlayPositionX">X Offset (% vw)</label>
+                                <input is="emby-input" type="number" id="CustomOverlayPositionX" name="CustomOverlayPositionX" min="-50" max="50" step="1" />
+                                <div class="fieldDescription">Horizontal nudge (negative = left, positive = right). Default is 0.</div>
+                            </div>
+                            <div class="inputContainer" style="flex: 1; min-width: 150px;">
+                                <label class="inputLabel inputLabelUnfocused" for="CustomOverlayPositionY">Y Offset (% vh)</label>
+                                <input is="emby-input" type="number" id="CustomOverlayPositionY" name="CustomOverlayPositionY" min="-50" max="50" step="1" />
+                                <div class="fieldDescription">Vertical nudge (negative = up, positive = down). Default is 0.</div>
+                            </div>
+                            <div class="inputContainer" style="flex: 1; min-width: 150px;">
+                                <label class="inputLabel inputLabelUnfocused" for="CustomOverlayScale">Scale (%)</label>
+                                <input is="emby-input" type="number" id="CustomOverlayScale" name="CustomOverlayScale" min="50" max="200" step="1" />
+                                <div class="fieldDescription">Overlay zoom level. Default is 100%.</div>
+                            </div>
+                        </div>
                     </div>
 
                     <!-- ADVANCED TAB -->
@@ -640,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
@@ -884,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) {

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

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css

@@ -1035,8 +1035,9 @@
 /* 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;
@@ -1082,9 +1083,9 @@
 
 @media only screen and (max-width: 767px) and (orientation: portrait) {
   .custom-overlay-container {
-    top: 8%;    /* oder 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;
@@ -1244,9 +1245,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 +1324,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 +1349,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 +1428,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));
+}
+

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js

@@ -64,6 +64,9 @@ const CONFIG = {
   customOverlayStyle: "Shadowed",
   customOverlayImageStyle: "None",
   customOverlayPriority: "Image",
+  customOverlayPositionX: 0,
+  customOverlayPositionY: 0,
+  customOverlayScale: 100,
   enableCustomMediaIds: true,
   enableSeasonalContent: false,
   customMediaIds: "",
@@ -3867,6 +3870,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,12 @@
     "imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
     "versions": [
       {
-        "version": "1.7.2.5",
+        "version": "1.7.2.8",
         "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.5/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.7.2.7/Jellyfin.Plugin.MediaBarEnhanced.zip",
-        "checksum": "d464b8ce83fe85018623c3de17ec5c1c",
+        "checksum": "8d9939d696b3528ddfc4378b91881007",
-        "timestamp": "2026-03-10T19:47:06Z"
+        "timestamp": "2026-03-10T22:49:35Z"
       },
       {
         "version": "1.7.0.14",