CodeDevMLH/jellyfin-plugin-media-bar-enhanced
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 24 Wiki Activity

Add custom overlay positioning and scaling options in configuration

Browse Source
This commit is contained in:
CodeDevMLH
2026-03-10 23:43:20 +01:00
parent bca2d577b9
commit b3b6296798
4 changed files with 40 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs
View File

@@ -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;
}
}

25
Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html
View File

@@ -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) {

11
Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css
View File

@@ -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;

8
Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
View File

@@ -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);
}
};