From b3b62967984868865135862b9bdf688bd3175ff0 Mon Sep 17 00:00:00 2001
From: CodeDevMLH <145071728+CodeDevMLH@users.noreply.github.com>
Date: Tue, 10 Mar 2026 23:43:20 +0100
Subject: [PATCH] Add custom overlay positioning and scaling options in
 configuration

---
 .../Configuration/PluginConfiguration.cs      |  4 +++
 .../Configuration/configPage.html             | 25 ++++++++++++++++---
 .../Web/mediaBarEnhanced.css                  | 11 ++++----
 .../Web/mediaBarEnhanced.js                   |  8 ++++++
 4 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs b/Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs
index 9e30120..2cffe87 100644
--- a/Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs
+++ b/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;
     }
 }
diff --git a/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html b/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html
index 334eed0..8fa01a4 100644
--- a/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html
+++ b/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html
@@ -316,7 +316,24 @@
                             <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 -->
@@ -645,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
@@ -889,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) {
diff --git a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css
index 5555099..032becb 100644
--- a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css
+++ b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css
@@ -1035,8 +1035,9 @@
 /* Custom Overlay Styling */
 .custom-overlay-container {
   position: absolute;
-  top: 8vh;
-  left: 4vw;
+  top: calc(8vh + var(--overlay-y, 0vh));
+  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: 15vh;
-    left: 50%;
-    transform: translateX(-50%);
+    top: calc(15vh + var(--overlay-y, 0vh));
+    left: calc(50% + var(--overlay-x, 0vw));
+    transform: translateX(-50%) scale(var(--overlay-scale, 1));
     width: 90%;
     justify-content: center;
     text-align: center;
diff --git a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
index def0ed9..517037c 100644
--- a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
+++ b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
@@ -3867,6 +3867,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);
     }
   };