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

Add custom overlay image upload feature with style options

Browse Source
This commit is contained in:
CodeDevMLH
2026-03-09 03:40:13 +01:00
parent 8ff4f081f3
commit a57f3db009
5 changed files with 286 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
Jellyfin.Plugin.MediaBarEnhanced/Api/OverlayImageController.cs Normal file
View File

@@ -0,0 +1,89 @@
using System;
using System.IO;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using MediaBrowser.Common.Configuration;
namespace Jellyfin.Plugin.MediaBarEnhanced.Api
{
/// <summary>
/// Controller for handling custom overlay image uploads and retrieval.
/// </summary>
[ApiController]
[Route("MediaBarEnhanced")]
public class OverlayImageController : ControllerBase
{
private readonly IApplicationPaths _applicationPaths;
private readonly string _imageDirectory;
private readonly string _imagePath;
public OverlayImageController(IApplicationPaths applicationPaths)
{
_applicationPaths = applicationPaths;
// We use the plugin's data folder to store the image
_imageDirectory = Path.Combine(_applicationPaths.PluginConfigurationPath, "MediaBarEnhanced");
// We'll just overwrite this single file each time
_imagePath = Path.Combine(_imageDirectory, "custom_overlay_image.dat");
}
/// <summary>
/// Uploads a new custom overlay image.
/// </summary>
[HttpPost("OverlayImage")]
[Consumes("multipart/form-data")]
public async Task<IActionResult> UploadImage([FromForm] IFormFile file)
{
if (file == null || file.Length == 0)
{
return BadRequest("No file uploaded.");
}
try
{
if (!Directory.Exists(_imageDirectory))
{
Directory.CreateDirectory(_imageDirectory);
}
// Delete the old one if it exists to ensure freshness
if (System.IO.File.Exists(_imagePath))
{
System.IO.File.Delete(_imagePath);
}
using (var stream = new FileStream(_imagePath, FileMode.Create))
{
await file.CopyToAsync(stream).ConfigureAwait(false);
}
// Return the GET URL that the frontend can use
var getUrl = "/MediaBarEnhanced/OverlayImage?t=" + DateTimeOffset.UtcNow.ToUnixTimeMilliseconds();
return Ok(new { url = getUrl });
}
catch (Exception ex)
{
return StatusCode(500, $"Internal server error: {ex.Message}");
}
}
/// <summary>
/// Retrieves the custom overlay image.
/// </summary>
[HttpGet("OverlayImage")]
public IActionResult GetImage()
{
if (!System.IO.File.Exists(_imagePath))
{
return NotFound();
}
// Read the file and return as a generic octet stream, since we don't strictly track the mime type
// The browser will figure out it's an image
var stream = new FileStream(_imagePath, FileMode.Open, FileAccess.Read, FileShare.Read);
return File(stream, "image/*");
}
}
}

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

@@ -53,5 +53,6 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
public bool EnableCustomOverlay { get; set; } = false;
public string CustomOverlayText { get; set; } = "";
public string CustomOverlayImageUrl { get; set; } = "";
public string CustomOverlayStyle { get; set; } = "Shadowed";
}
}

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

@@ -210,10 +210,10 @@
<input type="hidden" id="SeasonalSections" name="SeasonalSections" value="[]" />
</div>
<!-- ADVANCED TAB -->
<div id="media-bar-enhanced-advanced" class="tab-content" style="display:none;">
<!-- CUSTOM OVERLAY TAB -->
<div id="media-bar-enhanced-overlay" 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>
<p>Inject a custom text or floating image over the slideshow. This can be overridden by specific Seasonal Sections in the Custom Filters tab.</p>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
@@ -223,18 +223,51 @@
<div class="fieldDescription">If enabled, the text or image below will hover over the slideshow globally.</div>
</div>
<div class="selectContainer">
<label class="selectLabel" for="CustomOverlayStyle">Overlay Style</label>
<select is="emby-select" id="CustomOverlayStyle" name="CustomOverlayStyle"
class="selectLayout emby-select-withcolor emby-select"
style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
<option value="Shadowed">Classic Shadowed</option>
<option value="Frosted">Frosted Glass Pill</option>
<option value="Cinematic">Cinematic Golden Glow</option>
<option value="Pulse">Animated Pulse</option>
</select>
<div class="fieldDescription">Choose the visual styling animation for your custom text.</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="CustomOverlayText">Global Overlay Text</label>
<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>
<h3 class="inputLabel" style="margin-top: 2em;">Global Overlay Image</h3>
<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.</div>
<div class="fieldDescription">Absolute URL to an image to display on the overlay. If provided, this overrides the text above.</div>
</div>
<hr style="max-width: 800px; margin: 1em 0;">
<!-- Image Upload Dropzone -->
<div class="inputContainer" style="margin-top: 1em;">
<label class="inputLabel">Or Upload Local Image</label>
<div id="overlayImageDropzone" style="border: 2px dashed rgba(255,255,255,0.2); border-radius: 8px; padding: 2em; text-align: center; cursor: pointer; background: rgba(0,0,0,0.2); transition: all 0.2s ease; position: relative; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
<i class="material-icons" style="font-size: 40px; color: rgba(255,255,255,0.4); margin-bottom: 10px;">cloud_upload</i>
<span style="font-size: 1.1em; color: rgba(255,255,255,0.7);">Drag and drop an image here, or click to select</span>
<input type="file" id="overlayImageInput" accept="image/png, image/jpeg, image/gif, image/webp" style="display: none;">
<img id="overlayImagePreview" style="display: none; max-width: 100%; max-height: 150px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 4px; z-index: 2;" />
<!-- A semi-transparent overlay to clear the image -->
<button type="button" id="clearOverlayImageBtn" 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: white;">close</i>
</button>
</div>
<div class="fieldDescription">Uploading an image will securely save it to the server and automatically update the URL field above.</div>
</div>
</div>
<!-- ADVANCED TAB -->
<div id="media-bar-enhanced-advanced" class="tab-content" style="display:none;">
<h2 class="sectionTitle">Features</h2>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
@@ -558,7 +591,8 @@
'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating',
'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile',
'EnableCustomOverlay', 'CustomOverlayText', 'CustomOverlayImageUrl'
'EnableCustomOverlay', 'CustomOverlayText', 'CustomOverlayImageUrl',
'CustomOverlayStyle'
];
// Manual mapping for MediaBarIsEnabled -> IsEnabled, to avoid conflicts with other plugins
@@ -638,6 +672,108 @@
updatePreferLocalVisibility();
}
// Overlay Image Upload Logic
var dropzone = page.querySelector('#overlayImageDropzone');
var fileInput = page.querySelector('#overlayImageInput');
var urlInput = page.querySelector('#CustomOverlayImageUrl');
var previewImg = page.querySelector('#overlayImagePreview');
var clearBtn = page.querySelector('#clearOverlayImageBtn');
function updatePreview() {
if (urlInput.value && urlInput.value.trim() !== '') {
previewImg.src = urlInput.value;
previewImg.style.display = 'block';
clearBtn.style.display = 'block';
} else {
previewImg.style.display = 'none';
clearBtn.style.display = 'none';
}
}
// Initial check
updatePreview();
// Listen to manual URL input changes
urlInput.addEventListener('input', updatePreview);
clearBtn.addEventListener('click', function(e) {
e.stopPropagation(); // prevent triggering file dialog
urlInput.value = '';
fileInput.value = '';
updatePreview();
});
dropzone.addEventListener('click', function() {
fileInput.click();
});
dropzone.addEventListener('dragover', function(e) {
e.preventDefault();
dropzone.style.borderColor = '#00a4dc';
dropzone.style.background = 'rgba(0, 164, 220, 0.2)';
});
dropzone.addEventListener('dragleave', function(e) {
e.preventDefault();
dropzone.style.borderColor = 'rgba(255,255,255,0.2)';
dropzone.style.background = 'rgba(0,0,0,0.2)';
});
dropzone.addEventListener('drop', function(e) {
e.preventDefault();
dropzone.style.borderColor = 'rgba(255,255,255,0.2)';
dropzone.style.background = 'rgba(0,0,0,0.2)';
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
fileInput.files = e.dataTransfer.files;
uploadImage(e.dataTransfer.files[0]);
}
});
fileInput.addEventListener('change', function() {
if (this.files && this.files.length > 0) {
uploadImage(this.files[0]);
}
});
function uploadImage(file) {
// Validate it's an image
if (!file.type.match('image.*')) {
Dashboard.alert('Please select a valid image file.');
return;
}
Dashboard.showLoadingMsg();
var formData = new FormData();
formData.append('file', file);
// The Endpoint we created in C#
fetch(ApiClient.serverAddress() + '/MediaBarEnhanced/OverlayImage', {
method: 'POST',
body: formData,
headers: {
'Authorization': 'MediaBrowser Client="' + ApiClient.appName() + '", Device="' + ApiClient.deviceName() + '", DeviceId="' + ApiClient.deviceId() + '", Version="' + ApiClient.appVersion() + '", Token="' + ApiClient.accessToken() + '"'
}
})
.then(response => {
if (response.ok) return response.json();
throw new Error('Network response was not ok.');
})
.then(data => {
// Update URL input
urlInput.value = ApiClient.serverAddress() + data.url;
updatePreview();
Dashboard.hideLoadingMsg();
})
.catch(error => {
console.error('Upload error:', error);
Dashboard.alert('Image upload failed. Please verify API controller is active.');
Dashboard.hideLoadingMsg();
});
}
Dashboard.hideLoadingMsg();
});
},
@@ -670,7 +806,8 @@
'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating',
'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile',
'EnableCustomOverlay', 'CustomOverlayText', 'CustomOverlayImageUrl'
'EnableCustomOverlay', 'CustomOverlayText', 'CustomOverlayImageUrl',
'CustomOverlayStyle'
];
keys.forEach(function (key) {

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

@@ -1103,3 +1103,53 @@
}
}
}
/* Custom Overlay Styles */
.custom-overlay-style-Shadowed {
color: #fff;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9), -1px -1px 4px rgba(0, 0, 0, 0.8);
}
.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;
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 */
}
.custom-overlay-style-Cinematic {
background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
-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;
background-size: 200% auto;
}
@keyframes shineCinematic {
to {
background-position: 200% center;
}
}
.custom-overlay-style-Pulse {
color: #fff;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9), -1px -1px 4px rgba(0, 0, 0, 0.8);
animation: pulseOverlayText 3s ease-in-out infinite alternate;
}
@keyframes pulseOverlayText {
from {
transform: scale(1);
}
to {
transform: scale(1.05);
}
}

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

@@ -61,6 +61,7 @@ const CONFIG = {
enableCustomOverlay: false,
customOverlayText: "",
customOverlayImageUrl: "",
customOverlayStyle: "Shadowed",
enableCustomMediaIds: true,
enableSeasonalContent: false,
customMediaIds: "",
@@ -3851,7 +3852,7 @@ const slidesInit = async () => {
overlayContainer.appendChild(img);
} else if (activeOverlayText) {
const p = document.createElement("p");
p.className = "custom-overlay-text";
p.className = `custom-overlay-text custom-overlay-style-${CONFIG.customOverlayStyle || 'Shadowed'}`;
p.textContent = activeOverlayText;
overlayContainer.appendChild(p);
}