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

Add custom overlay feature with configuration options for text and image

Browse Source
This commit is contained in:
CodeDevMLH
2026-03-09 02:28:46 +01:00
parent 1df2b341e5
commit 4d1d442746
4 changed files with 204 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -49,5 +49,9 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
public bool IncludeWatchedContent { get; set; } = false;
public string SortBy { get; set; } = "Random";
public string SortOrder { get; set; } = "Ascending";
public bool EnableCustomOverlay { get; set; } = false;
public string CustomOverlayText { get; set; } = "";
public string CustomOverlayImageUrl { get; set; } = "";
}
}

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

@@ -212,6 +212,29 @@
<!-- ADVANCED TAB -->
<div id="media-bar-enhanced-advanced" class="tab-content" style="display:none;">
<h2 class="sectionTitle">Custom Slideshow Overlay</h2>
<p>Inject a custom text or floating image over the slideshow. This can be overridden by specific Seasonal Sections.</p>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="EnableCustomOverlay" name="EnableCustomOverlay" />
<span>Enable Custom Overlay</span>
</label>
<div class="fieldDescription">If enabled, the text or image below will hover over the slideshow globally.</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="CustomOverlayText" name="CustomOverlayText" />
<div class="fieldDescription">Text to display on the overlay (e.g. "Movie Night!"). Leave blank to use an image instead.</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="CustomOverlayImageUrl" name="CustomOverlayImageUrl" />
<div class="fieldDescription">Absolute URL to an image to display on the overlay. If provided, this overrides the text.</div>
</div>
<hr style="max-width: 800px; margin: 1em 0;">
<h2 class="sectionTitle">Features</h2>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
@@ -534,7 +557,8 @@
'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating',
'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile'
'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile',
'EnableCustomOverlay', 'CustomOverlayText', 'CustomOverlayImageUrl'
];
// Manual mapping for MediaBarIsEnabled -> IsEnabled, to avoid conflicts with other plugins
@@ -645,7 +669,8 @@
'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating',
'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile'
'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile',
'EnableCustomOverlay', 'CustomOverlayText', 'CustomOverlayImageUrl'
];
keys.forEach(function (key) {
@@ -681,7 +706,9 @@
Name: 'New Season',
StartDay: 1, StartMonth: 1,
EndDay: 1, EndMonth: 1,
MediaIds: ''
MediaIds: '',
OverlayText: '',
OverlayImageUrl: ''
}, index);
},
@@ -742,6 +769,14 @@
' <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Media IDs</label>' +
' <textarea is="emby-textarea" class="emby-textarea section-ids" style="width: 100%; height: 80px; font-family: monospace;">' + (data.MediaIds || '') + '</textarea>' +
' <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>' +
'<div class="inputContainer" style="margin-top: 1em;">' +
' <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!)" />' +
' <div class="fieldDescription">Optional: Override the global custom overlay text during this season.</div>' +
'</div>' +
'<div class="inputContainer">' +
' <input is="emby-input" type="text" class="emby-input section-overlay-image" style="width: 100%;" value="' + (data.OverlayImageUrl ? data.OverlayImageUrl.replace(/"/g, '&quot;') : '') + '" placeholder="Seasonal Custom Overlay Image URL" />' +
' <div class="fieldDescription">Optional: Override the global custom overlay image during this season. Overrides the text if provided.</div>' +
'</div>';
div.querySelector('.btn-remove').addEventListener('click', function () {
@@ -786,7 +821,9 @@
StartMonth: parseInt(el.querySelector('.start-month').value),
EndDay: parseInt(el.querySelector('.end-day').value),
EndMonth: parseInt(el.querySelector('.end-month').value),
MediaIds: el.querySelector('.section-ids').value
MediaIds: el.querySelector('.section-ids').value,
OverlayText: el.querySelector('.section-overlay-text').value,
OverlayImageUrl: el.querySelector('.section-overlay-image').value
});
});
return sections;

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

@@ -1031,3 +1031,75 @@
-webkit-backdrop-filter: none;
}
}
/* Floating Custom Overlay Styling */
.custom-overlay-container {
position: absolute;
top: 8vh;
left: 4vw;
z-index: 15;
display: flex;
align-items: center;
justify-content: flex-start;
pointer-events: none; /* Let clicks pass through to the slider */
animation: fadeInOverlay 1.5s ease-in-out forwards;
}
.custom-overlay-text {
font-family: "Archivo Narrow", sans-serif;
color: #fff;
font-size: 2.5rem;
font-weight: 700;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8), -1px -1px 4px rgba(0, 0, 0, 0.5);
margin: 0;
letter-spacing: 1px;
}
.custom-overlay-image {
max-width: 300px;
max-height: 120px;
object-fit: contain;
filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5));
}
@keyframes fadeInOverlay {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Make it smaller on mobile portrait */
@media only screen and (max-width: 767px) and (orientation: portrait) {
.custom-overlay-container {
top: 5vh;
left: 50%;
transform: translateX(-50%);
width: 90%;
justify-content: center;
text-align: center;
}
.custom-overlay-text {
font-size: 1.8rem;
}
.custom-overlay-image {
max-width: 200px;
max-height: 80px;
}
@keyframes fadeInOverlay {
from {
opacity: 0;
transform: translate(-50%, -10px);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
}

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

@@ -58,6 +58,9 @@ const CONFIG = {
enableKeyboardControls: true,
alwaysShowArrows: false,
hideArrowsOnMobile: true,
enableCustomOverlay: false,
customOverlayText: "",
customOverlayImageUrl: "",
enableCustomMediaIds: true,
enableSeasonalContent: false,
customMediaIds: "",
@@ -3777,6 +3780,88 @@ const slidesInit = async () => {
return;
}
const renderCustomOverlay = () => {
let activeOverlayText = CONFIG.customOverlayText;
let activeOverlayImage = CONFIG.customOverlayImageUrl;
let isSeasonOverride = false;
if (CONFIG.enableSeasonalContent && CONFIG.seasonalSections) {
try {
const sections = JSON.parse(CONFIG.seasonalSections || "[]");
const now = new Date();
const currentMonth = now.getMonth() + 1;
const currentDay = now.getDate();
for (const section of sections) {
const startMonth = parseInt(section.StartMonth);
const startDay = parseInt(section.StartDay);
const endMonth = parseInt(section.EndMonth);
const endDay = parseInt(section.EndDay);
let isActive = false;
if (startMonth === endMonth) {
if (currentMonth === startMonth && currentDay >= startDay && currentDay <= endDay) {
isActive = true;
}
} else if (startMonth < endMonth) {
if (currentMonth > startMonth && currentMonth < endMonth) {
isActive = true;
} else if (currentMonth === startMonth && currentDay >= startDay) {
isActive = true;
} else if (currentMonth === endMonth && currentDay <= endDay) {
isActive = true;
}
} else { // Wraps around year
if (currentMonth > startMonth || currentMonth < endMonth) {
isActive = true;
} else if (currentMonth === startMonth && currentDay >= startDay) {
isActive = true;
} else if (currentMonth === endMonth && currentDay <= endDay) {
isActive = true;
}
}
if (isActive) {
if (section.OverlayText || section.OverlayImageUrl) {
isSeasonOverride = true;
if (section.OverlayText) activeOverlayText = section.OverlayText;
if (section.OverlayImageUrl) activeOverlayImage = section.OverlayImageUrl;
}
break;
}
}
} catch (e) {
console.error("🎬 Media Bar:", "Error parsing seasonal sections for overlay:", e);
}
}
if (!CONFIG.enableCustomOverlay && !isSeasonOverride) {
return;
}
if (!activeOverlayText && !activeOverlayImage) return;
const overlayContainer = document.createElement("div");
overlayContainer.className = "custom-overlay-container";
if (activeOverlayImage) {
const img = document.createElement("img");
img.className = "custom-overlay-image";
img.src = activeOverlayImage;
overlayContainer.appendChild(img);
} else if (activeOverlayText) {
const p = document.createElement("p");
p.className = "custom-overlay-text";
p.textContent = activeOverlayText;
overlayContainer.appendChild(p);
}
const slidesContainer = document.getElementById("slides-container");
if (slidesContainer) {
slidesContainer.appendChild(overlayContainer);
}
};
if (CONFIG.enableClientSideSettings) {
MediaBarEnhancedSettingsManager.init();
const isClientSideEnabled = MediaBarEnhancedSettingsManager.getSetting('enabled', true);
@@ -3875,6 +3960,8 @@ const slidesInit = async () => {
initArrowNavigation();
renderCustomOverlay();
await SlideshowManager.loadSlideshowData();
SlideshowManager.initTouchEvents();