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 @@
Choose a visual effect to apply to your overlay image.
-
+ Layout Tweaks
+
@@ -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);
}
};