Compare commits

...

3 Commits

Author SHA1 Message Date
CodeDevMLH
c493212f65 Update manifest.json for release v1.7.2.2 [skip ci] 2026-03-09 22:29:30 +00:00
CodeDevMLH
d497f22416 Bump version to 1.7.2.2 in project file and manifest
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 46s
2026-03-09 23:27:59 +01:00
CodeDevMLH
f65475673d Add custom overlay image style and priority options; enhance overlay handling 2026-03-09 23:27:28 +01:00
6 changed files with 193 additions and 53 deletions

View File

@@ -54,5 +54,7 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
public string CustomOverlayText { get; set; } = "";
public string CustomOverlayImageUrl { get; set; } = "";
public string CustomOverlayStyle { get; set; } = "Shadowed";
public string CustomOverlayImageStyle { get; set; } = "None";
public string CustomOverlayPriority { get; set; } = "Image";
}
}

View File

@@ -30,14 +30,14 @@
style="background: none; border: none; color: #ccc; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid transparent;">
<h3>Custom Content</h3>
</button>
<button class="jellyfin-tab-button" onclick="showTab('media-bar-enhanced-advanced', this)"
style="background: none; border: none; color: #ccc; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid transparent;">
<h3>Advanced Settings</h3>
</button>
<button class="jellyfin-tab-button" onclick="showTab('media-bar-enhanced-overlay', this)"
style="background: none; border: none; color: #ccc; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid transparent;">
<h3>Custom Overlay</h3>
</button>
<button class="jellyfin-tab-button" onclick="showTab('media-bar-enhanced-advanced', this)"
style="background: none; border: none; color: #ccc; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid transparent;">
<h3>Advanced Settings</h3>
</button>
</div>
<form id="mediaBarEnhancedConfigForm">
@@ -236,10 +236,14 @@
<option value="Frosted">Frosted Glass Pill</option>
<option value="Cinematic">Cinematic Golden Glow</option>
<option value="Pulse">Animated Pulse</option>
<option value="Neon">Neon Cyberpunk</option>
<option value="SteadyNeon">Steady Neon</option>
<option value="Neon">Neon Cyberpunk (Glitching)</option>
<option value="Typewriter">Typewriter Pop</option>
<option value="Bubble">Floating Bubble</option>
<option value="SlideIn">Cinematic Slide-In</option>
<option value="Glitch">Cyberpunk Glitch</option>
<option value="RetroPop">Retro Pop 3D</option>
<option value="Shimmer">Glowing Shimmer</option>
</select>
<div class="fieldDescription">Choose the visual styling animation for your custom text.</div>
</div>
@@ -254,7 +258,33 @@
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="CustomOverlayImageUrl">Global Overlay Image URL</label>
<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 above.</div>
<div class="fieldDescription">Absolute URL to an image to display on the overlay.</div>
</div>
<div class="selectContainer">
<label class="selectLabel" for="CustomOverlayImageStyle">Image Style</label>
<select is="emby-select" id="CustomOverlayImageStyle" name="CustomOverlayImageStyle"
class="selectLayout emby-select-withcolor emby-select"
style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
<option value="None">None (Default)</option>
<option value="RoundedShadow">Rounded & Shadow</option>
<option value="GlowingBorder">Neon Glow</option>
<option value="Polaroid">Polaroid Frame</option>
<option value="Vintage">Vintage Sepia</option>
<option value="Grayscale">Grayscale</option>
</select>
<div class="fieldDescription">Choose a visual effect to apply to your overlay image.</div>
</div>
<div class="selectContainer" style="margin-top: 1em;">
<label class="selectLabel" for="CustomOverlayPriority">Priority (If Both Are Set)</label>
<select is="emby-select" id="CustomOverlayPriority" name="CustomOverlayPriority"
class="selectLayout emby-select-withcolor emby-select"
style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
<option value="Image">Show Image</option>
<option value="Text">Show Text</option>
</select>
<div class="fieldDescription">What should be displayed if you have both an Image and Text configured?</div>
</div>
<!-- Image Upload Dropzone -->
@@ -600,7 +630,7 @@
'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating',
'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile',
'EnableCustomOverlay', 'CustomOverlayText', 'CustomOverlayImageUrl',
'CustomOverlayStyle'
'CustomOverlayStyle', 'CustomOverlayImageStyle', 'CustomOverlayPriority'
];
// Manual mapping for MediaBarIsEnabled -> IsEnabled, to avoid conflicts with other plugins
@@ -688,13 +718,19 @@
var clearBtn = page.querySelector('#clearOverlayImageBtn');
function updatePreview() {
var icon = dropzone.querySelector('i');
var text = dropzone.querySelector('span');
if (urlInput.value && urlInput.value.trim() !== '') {
previewImg.src = urlInput.value;
previewImg.style.display = 'block';
clearBtn.style.display = 'block';
if(icon) icon.style.display = 'none';
if(text) text.style.display = 'none';
} else {
previewImg.style.display = 'none';
clearBtn.style.display = 'none';
if(icon) icon.style.display = 'block';
if(text) text.style.display = 'block';
}
}
@@ -824,7 +860,7 @@
'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating',
'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile',
'EnableCustomOverlay', 'CustomOverlayText', 'CustomOverlayImageUrl',
'CustomOverlayStyle'
'CustomOverlayStyle', 'CustomOverlayImageStyle', 'CustomOverlayPriority'
];
keys.forEach(function (key) {
@@ -924,23 +960,27 @@
' <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 class="inputContainer" style="margin-top: 1em; margin-bottom: 0;">' +
' <div class="seasonal-dropzone" style="border: 2px dashed rgba(255,255,255,0.2); border-radius: 8px; padding: 1.5em; text-align: center; cursor: pointer; background: rgba(0,0,0,0.2); transition: all 0.2s ease; position: relative; min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center;">' +
' <i class="material-icons" style="font-size: 32px; color: rgba(255,255,255,0.4); margin-bottom: 8px;">cloud_upload</i>' +
' <span style="font-size: 0.9em; color: rgba(255,255,255,0.7);">Drag and drop a seasonal image here, or click</span>' +
' <input type="file" class="seasonal-file-input" accept="image/png, image/jpeg, image/gif, image/webp" style="display: none;">' +
' <img class="seasonal-preview-img" style="display: none; max-width: 100%; max-height: 120px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 4px; z-index: 2;" />' +
' <button type="button" class="seasonal-clear-btn" is="paper-icon-button-light" style="display: none; position: absolute; top: 10px; right: 10px; z-index: 3; background: rgba(0,0,0,0.6); border-radius: 50%; padding: 5px;" title="Clear Image">' +
' <i class="material-icons" style="color: #a94442;">delete</i>' +
' </button>' +
'<h3 class="inputLabel" style="margin-top: 1.5em; margin-bottom: 0.5em;">Custom Overrides</h3>' +
'<div style="display: flex; flex-wrap: wrap; gap: 1em; align-items: stretch;">' +
' <div style="flex: 1; min-width: 250px; display: flex; flex-direction: column; gap: 0.5em;">' +
' <div class="inputContainer" style="margin: 0;">' +
' <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>' +
' <div class="inputContainer" style="margin: 0;">' +
' <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">Override the global text or image URL.</div>' +
' </div>' +
' </div>' +
' <div class="inputContainer" style="flex: 1; min-width: 250px; margin: 0;">' +
' <div class="seasonal-dropzone" style="border: 2px dashed rgba(255,255,255,0.2); border-radius: 8px; padding: 1em; text-align: center; cursor: pointer; background: rgba(0,0,0,0.2); transition: all 0.2s ease; position: relative; min-height: 80px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;">' +
' <i class="material-icons" style="font-size: 24px; color: rgba(255,255,255,0.4); margin-bottom: 4px;">cloud_upload</i>' +
' <span style="font-size: 0.85em; color: rgba(255,255,255,0.7);">Upload seasonal image</span>' +
' <input type="file" class="seasonal-file-input" accept="image/png, image/jpeg, image/gif, image/webp" style="display: none;">' +
' <img class="seasonal-preview-img" style="display: none; max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 4px; z-index: 2; object-fit: contain;" />' +
' <button type="button" class="seasonal-clear-btn" is="paper-icon-button-light" style="display: none; position: absolute; top: 5px; right: 5px; z-index: 3; background: rgba(0,0,0,0.6); border-radius: 50%; padding: 4px;" title="Clear Image">' +
' <i class="material-icons" style="color: #a94442; font-size: 18px;">delete</i>' +
' </button>' +
' </div>' +
' </div>' +
'</div>';
@@ -1005,15 +1045,21 @@
});
function updatePreview() {
var icon = dropzone.querySelector('i');
var text = dropzone.querySelector('span');
var val = urlInput.value.trim();
if (val) {
previewImg.src = val;
previewImg.style.display = 'block';
clearBtn.style.display = 'block';
if(icon) icon.style.display = 'none';
if(text) text.style.display = 'none';
} else {
previewImg.src = '';
previewImg.style.display = 'none';
clearBtn.style.display = 'none';
if(icon) icon.style.display = 'block';
if(text) text.style.display = 'block';
}
}

View File

@@ -12,7 +12,7 @@
<!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
<Title>Jellyfin Media Bar Enhanced Plugin</Title>
<Authors>CodeDevMLH</Authors>
<Version>1.7.2.1</Version>
<Version>1.7.2.2</Version>
<RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced</RepositoryUrl>
</PropertyGroup>

View File

@@ -1112,31 +1112,32 @@
.custom-overlay-style-Frosted {
color: #fff;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 8px 24px;
background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0));
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
padding: 10px 30px;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
text-shadow: none; /* override default */
border: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-right: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.custom-overlay-style-Cinematic {
background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c, #fcf6ba, #bf953f);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: none; /* override default */
filter: drop-shadow(0px 2px 8px rgba(255, 215, 0, 0.4)) drop-shadow(2px 2px 4px rgba(0,0,0,0.8));
animation: shineCinematic 4s linear infinite;
animation: shineCinematic 6s linear infinite;
background-size: 200% auto;
}
@keyframes shineCinematic {
to {
background-position: 200% center;
}
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
.custom-overlay-style-Pulse {
@@ -1248,3 +1249,92 @@
opacity: 1;
}
}
/* Image Overlay Styles */
.custom-overlay-img-RoundedShadow {
border-radius: 12px;
filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.6));
}
.custom-overlay-img-GlowingBorder {
border-radius: 8px;
box-shadow: 0 0 10px #00a4dc, 0 0 20px #00a4dc, 0 0 30px #00a4dc, inset 0 0 10px #00a4dc;
animation: pulseGlowImg 2s infinite alternate;
}
@keyframes pulseGlowImg {
from { box-shadow: 0 0 10px #00a4dc, 0 0 20px #00a4dc, 0 0 30px #00a4dc; }
to { box-shadow: 0 0 15px #00a4dc, 0 0 30px #00a4dc, 0 0 45px #00a4dc; }
}
.custom-overlay-img-Polaroid {
background: white;
padding: 10px 10px 25px 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.4), 0 12px 24px rgba(0,0,0,0.3);
transform: rotate(-3deg);
border-radius: 2px;
}
.custom-overlay-img-Vintage {
filter: sepia(0.6) contrast(1.2) brightness(0.9) saturate(1.2) drop-shadow(2px 4px 8px rgba(0,0,0,0.6));
}
.custom-overlay-img-Grayscale {
filter: grayscale(100%) contrast(1.1) drop-shadow(2px 4px 8px rgba(0,0,0,0.6));
}
/* More Text Overlay Styles */
.custom-overlay-style-SteadyNeon {
color: #fff;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #ff00de,
0 0 40px #ff00de,
0 0 80px #ff00de;
}
.custom-overlay-style-Glitch {
color: #fff;
position: relative;
text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
animation: glitchText 3s infinite;
}
@keyframes glitchText {
0% { text-shadow: 2px 2px 8px rgba(0,0,0,0.8); transform: translate(0); }
20% { text-shadow: 2px 2px 8px rgba(0,0,0,0.8); transform: translate(0); }
21% { text-shadow: -2px 0 0 #ff00c1, 2px 0 0 #00fff9; transform: translate(-2px, 1px); }
23% { text-shadow: 2px 0 0 #ff00c1, -2px 0 0 #00fff9; transform: translate(2px, -1px); }
25% { text-shadow: 2px 2px 8px rgba(0,0,0,0.8); transform: translate(0); }
100% { text-shadow: 2px 2px 8px rgba(0,0,0,0.8); transform: translate(0); }
}
.custom-overlay-style-RetroPop {
color: #f7f7f7;
text-shadow:
2px 2px 0px #ff0055,
4px 4px 0px #00a4dc,
6px 6px 0px #ffcc00,
8px 8px 10px rgba(0,0,0,0.6);
font-weight: 900;
letter-spacing: 2px;
}
.custom-overlay-style-Shimmer {
color: rgba(255,255,255,0.7);
background: linear-gradient(to right, #222 20%, #fff 40%, #fff 60%, #222 80%);
background-size: 200% auto;
color: #000;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmerText 3s linear infinite;
text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}
@keyframes shimmerText {
to {
background-position: 200% center;
}
}

View File

@@ -62,6 +62,8 @@ const CONFIG = {
customOverlayText: "",
customOverlayImageUrl: "",
customOverlayStyle: "Shadowed",
customOverlayImageStyle: "None",
customOverlayPriority: "Image",
enableCustomMediaIds: true,
enableSeasonalContent: false,
customMediaIds: "",
@@ -3825,14 +3827,9 @@ const slidesInit = async () => {
if (isActive) {
if (section.OverlayText || section.OverlayImageUrl) {
isSeasonOverride = true;
// If the season has an image, clear text, and vice versa.
if (section.OverlayImageUrl) {
activeOverlayImage = section.OverlayImageUrl;
activeOverlayText = null;
} else if (section.OverlayText) {
activeOverlayText = section.OverlayText;
activeOverlayImage = null;
}
// Season fully overrides global overlay, even if empty
activeOverlayImage = section.OverlayImageUrl || null;
activeOverlayText = section.OverlayText || null;
}
break;
}
@@ -3851,12 +3848,17 @@ const slidesInit = async () => {
const overlayContainer = document.createElement("div");
overlayContainer.className = "custom-overlay-container";
if (activeOverlayImage) {
const overlayPriority = CONFIG.customOverlayPriority || "Image";
const showImage = activeOverlayImage && (overlayPriority === "Image" || !activeOverlayText);
const showText = activeOverlayText && (!showImage);
if (showImage) {
const img = document.createElement("img");
img.className = "custom-overlay-image";
const imgStyle = CONFIG.customOverlayImageStyle || "None";
img.className = `custom-overlay-image custom-overlay-img-${imgStyle}`;
img.src = activeOverlayImage;
overlayContainer.appendChild(img);
} else if (activeOverlayText) {
} else if (showText) {
const p = document.createElement("p");
p.className = `custom-overlay-text custom-overlay-style-${CONFIG.customOverlayStyle || 'Shadowed'}`;
p.textContent = activeOverlayText;

View File

@@ -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.1",
"version": "1.7.2.2",
"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.1/Jellyfin.Plugin.MediaBarEnhanced.zip",
"checksum": "c491aabf59a0a4b1d123a2647e53f76a",
"timestamp": "2026-03-09T14:26:42Z"
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.7.2.2/Jellyfin.Plugin.MediaBarEnhanced.zip",
"checksum": "b01dfaf5202e6a2ecaa5078e3597140a",
"timestamp": "2026-03-09T22:29:30Z"
},
{
"version": "1.7.0.14",