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

Refactor code structure for improved readability and maintainability

Browse Source
This commit is contained in:
CodeDevMLH
2026-03-10 01:02:52 +01:00
parent c1d06f3bb8
commit f33c5be75f
4 changed files with 3137 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
Jellyfin.Plugin.MediaBarEnhanced/Api/OverlayImageController.cs
View File

@@ -20,17 +20,13 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
public OverlayImageController(IApplicationPaths applicationPaths)
{
_applicationPaths = applicationPaths;
// We use the plugin's data folder to store the image
_imageDirectory = MediaBarEnhancedPlugin.Instance?.DataFolderPath ?? Path.Combine(applicationPaths.DataPath, "plugins", "MediaBarEnhanced");
// We no longer define the exact path here, just the directory
// The filename is determined per request
_imageDirectory = Path.Combine(applicationPaths.DataPath, "plugins", "configurations", "MediaBarEnhancedAssets");
}
/// <summary>
/// Uploads a new custom overlay image.
/// </summary>
// [Microsoft.AspNetCore.Authorization.Authorize]
[HttpPost("OverlayImage")]
[Consumes("multipart/form-data")]
public async Task<IActionResult> UploadImage([FromForm] IFormFile file, [FromQuery] string? filename = null)
@@ -40,10 +36,12 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
return BadRequest("No file uploaded.");
}
string targetFileName = string.IsNullOrWhiteSpace(filename)
? "custom_overlay_image.dat"
: $"custom_overlay_image_{filename}.dat";
string targetPath = Path.Combine(_imageDirectory, targetFileName);
// Extract original extension or fallback to .jpg
string extension = Path.GetExtension(file.FileName);
if (string.IsNullOrWhiteSpace(extension)) extension = ".jpg";
// Delete any existing file with this prefix before saving the new one (as extensions might differ)
string prefix = string.IsNullOrWhiteSpace(filename) ? "custom_overlay_image_global" : $"custom_overlay_image_{filename}";
try
{
@@ -52,6 +50,16 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
Directory.CreateDirectory(_imageDirectory);
}
// Remove existing
var existingFiles = Directory.GetFiles(_imageDirectory, $"{prefix}.*");
foreach(var extFile in existingFiles)
{
System.IO.File.Delete(extFile);
}
string targetFileName = $"{prefix}{extension}";
string targetPath = Path.Combine(_imageDirectory, targetFileName);
// Delete is not strictly necessary and can cause locking issues if someone is currently reading it.
// FileMode.Create will truncate the file if it exists, effectively overwriting it.
// We use FileShare.None to ensure we have exclusive write access, but handle potential IOExceptions gracefully.
@@ -74,18 +82,20 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
/// <summary>
/// Retrieves the custom overlay image.
/// </summary>
// [Microsoft.AspNetCore.Authorization.Authorize]
[HttpGet("OverlayImage")]
public IActionResult GetImage([FromQuery] string? filename = null)
{
string targetFileName = string.IsNullOrWhiteSpace(filename)
? "custom_overlay_image.dat"
: $"custom_overlay_image_{filename}.dat";
string targetPath = Path.Combine(_imageDirectory, targetFileName);
if (!System.IO.File.Exists(targetPath))
{
string prefix = string.IsNullOrWhiteSpace(filename) ? "custom_overlay_image_global" : $"custom_overlay_image_{filename}";
if (!Directory.Exists(_imageDirectory))
return NotFound();
}
var existingFiles = Directory.GetFiles(_imageDirectory, $"{prefix}.*");
if (existingFiles.Length == 0)
return NotFound();
string targetPath = existingFiles[0];
// Read the file and return as a generic octet stream.
// We use FileShare.ReadWrite so that if someone is currently overwriting the file (uploading), we don't block them,
@@ -99,25 +109,27 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
/// <summary>
/// Deletes a custom overlay image.
/// </summary>
// [Microsoft.AspNetCore.Authorization.Authorize]
[HttpDelete("OverlayImage")]
public IActionResult DeleteImage([FromQuery] string? filename = null)
{
string targetFileName = string.IsNullOrWhiteSpace(filename)
? "custom_overlay_image.dat"
: $"custom_overlay_image_{filename}.dat";
string targetPath = Path.Combine(_imageDirectory, targetFileName);
if (System.IO.File.Exists(targetPath))
string prefix = string.IsNullOrWhiteSpace(filename) ? "custom_overlay_image_global" : $"custom_overlay_image_{filename}";
if (Directory.Exists(_imageDirectory))
{
try
var existingFiles = Directory.GetFiles(_imageDirectory, $"{prefix}.*");
foreach(var file in existingFiles)
{
System.IO.File.Delete(targetPath);
return Ok();
}
catch (Exception ex)
{
return StatusCode(500, $"Error deleting file: {ex.Message}");
try
{
System.IO.File.Delete(file);
}
catch (Exception ex)
{
return StatusCode(500, $"Error deleting file: {ex.Message}");
}
}
return Ok();
}
return NotFound();
@@ -126,6 +138,7 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
/// <summary>
/// Renames a custom overlay image (used when a seasonal section is renamed).
/// </summary>
// [Microsoft.AspNetCore.Authorization.Authorize]
[HttpPut("OverlayImage/Rename")]
public IActionResult RenameImage([FromQuery] string oldName, [FromQuery] string newName)
{
@@ -134,22 +147,23 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
return BadRequest("Both oldName and newName must be provided.");
}
string oldPath = Path.Combine(_imageDirectory, $"custom_overlay_image_{oldName}.dat");
string newPath = Path.Combine(_imageDirectory, $"custom_overlay_image_{newName}.dat");
if (!Directory.Exists(_imageDirectory))
return Ok();
if (!System.IO.File.Exists(oldPath))
{
// If it doesn't exist, there is nothing to rename, but we still consider it a success
// since the end state (file with oldName is gone, file with newName doesn't exist yet) is acceptable.
var oldFiles = Directory.GetFiles(_imageDirectory, $"custom_overlay_image_{oldName}.*");
if (oldFiles.Length == 0)
return Ok();
}
try
{
string oldPath = oldFiles[0];
string extension = Path.GetExtension(oldPath);
string newPath = Path.Combine(_imageDirectory, $"custom_overlay_image_{newName}{extension}");
// If a file with the new name already exists, delete it first to avoid conflicts
if (System.IO.File.Exists(newPath))
{
System.IO.File.Delete(newPath);
var existingNewFiles = Directory.GetFiles(_imageDirectory, $"custom_overlay_image_{newName}.*");
foreach(var existing in existingNewFiles) {
System.IO.File.Delete(existing);
}
System.IO.File.Move(oldPath, newPath);

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

@@ -259,8 +259,8 @@
<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: #a94442;">delete</i>
<button type="button" id="clearOverlayImageBtn" is="paper-icon-button-light" style="display: none; position: absolute; top: 10px; right: 10px; z-index: 3; color: #a94442;" title="Clear Image">
<i class="material-icons">delete</i>
</button>
</div>
<div class="fieldDescription">Uploading an image will securely save it to the server and automatically update the URL field above.</div>
@@ -273,6 +273,7 @@
<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="None">None (Plain White)</option>
<option value="Shadowed">Classic Shadowed</option>
<option value="Frosted">Frosted Glass Pill</option>
<option value="Cinematic">Cinematic Golden Glow</option>
@@ -285,6 +286,9 @@
<option value="Glitch">Cyberpunk Glitch</option>
<option value="RetroPop">Retro Pop 3D</option>
<option value="Shimmer">Glowing Shimmer</option>
<option value="Wave">Liquid Wave</option>
<option value="VHS">VHS Tracking</option>
<option value="Matrix">Digital Matrix</option>
</select>
<div class="fieldDescription">Choose the visual styling animation for your custom text.</div>
</div>
@@ -300,6 +304,9 @@
<option value="Polaroid">Polaroid Frame</option>
<option value="Vintage">Vintage Sepia</option>
<option value="Grayscale">Grayscale</option>
<option value="Hologram">Hologram</option>
<option value="CRT">CRT Monitor</option>
<option value="Floating">Floating Float</option>
</select>
<div class="fieldDescription">Choose a visual effect to apply to your overlay image.</div>
</div>
@@ -728,12 +735,26 @@
previewImg.style.display = 'block';
clearBtn.style.display = 'block';
if(icon) icon.style.display = 'none';
if(text) text.style.display = 'none';
if(text) {
text.textContent = 'Drag and drop a new image here, or click to select';
text.style.display = 'block';
text.style.position = 'absolute';
text.style.bottom = '10px';
text.style.zIndex = '3';
text.style.backgroundColor = 'rgba(0,0,0,0.6)';
text.style.padding = '4px 8px';
text.style.borderRadius = '4px';
}
} else {
previewImg.style.display = 'none';
clearBtn.style.display = 'none';
if(icon) icon.style.display = 'block';
if(text) text.style.display = 'block';
if(text) {
text.textContent = 'Drag and drop an image here, or click to select';
text.style.display = 'block';
text.style.position = 'static';
text.style.backgroundColor = 'transparent';
}
}
}
@@ -981,7 +1002,7 @@
' <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" is="paper-icon-button-light" class="seasonal-clear-btn" title="Clear Image" style="color: #a94442;"><i class="material-icons">delete</i></button>' +
' <button type="button" is="paper-icon-button-light" class="seasonal-clear-btn" title="Clear Image" style="display: none; position: absolute; top: 5px; right: 5px; z-index: 3; color: #a94442;"><i class="material-icons">delete</i></button>' +
' </div>' +
' </div>' +
'</div>';
@@ -1055,13 +1076,29 @@
previewImg.style.display = 'block';
clearBtn.style.display = 'block';
if(icon) icon.style.display = 'none';
if(text) text.style.display = 'none';
if(text) {
text.textContent = 'Drag and drop a new image here...';
text.style.display = 'block';
text.style.position = 'absolute';
text.style.bottom = '5px';
text.style.zIndex = '3';
text.style.backgroundColor = 'rgba(0,0,0,0.6)';
text.style.padding = '2px 6px';
text.style.borderRadius = '4px';
text.style.fontSize = '0.7em';
}
} else {
previewImg.src = '';
previewImg.style.display = 'none';
clearBtn.style.display = 'none';
if(icon) icon.style.display = 'block';
if(text) text.style.display = 'block';
if(text) {
text.textContent = 'Upload seasonal image';
text.style.display = 'block';
text.style.position = 'static';
text.style.backgroundColor = 'transparent';
text.style.fontSize = '0.85em';
}
}
}

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

@@ -1031,7 +1031,8 @@
-webkit-backdrop-filter: none;
}
}
/* Floating Custom Overlay Styling */
/* Custom Overlay Styling */
.custom-overlay-container {
position: absolute;
top: 8vh;
@@ -1040,10 +1041,27 @@
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;
pointer-events: none;
animation: overlayFadeInGlobal 1.5s ease-in-out forwards;
/* animation: fadeInOverlay 1.5s ease-in-out forwards; */
}
@keyframes overlayFadeInGlobal {
from { opacity: 0; }
to { opacity: 1; }
}
/* @keyframes fadeInOverlay {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} */
.custom-overlay-text {
font-family: "Archivo Narrow", sans-serif;
color: #fff;
@@ -1061,21 +1079,10 @@
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;
top: 8%; /* oder 5vh? */
left: 50%;
transform: translateX(-50%);
width: 90%;
@@ -1084,15 +1091,10 @@
}
.custom-overlay-text {
font-size: 1.8rem;
}
.custom-overlay-image {
max-width: 200px;
max-height: 80px;
font-size: 1.5rem; /* 1.5 - 1.8 */
}
@keyframes fadeInOverlay {
/* @keyframes fadeInOverlay {
from {
opacity: 0;
transform: translate(-50%, -10px);
@@ -1101,10 +1103,20 @@
opacity: 1;
transform: translate(-50%, 0);
}
} */
.custom-overlay-image {
max-width: 150px; /* oder 200px? */
max-height: 60px; /* oder 80px? */
}
}
/* Custom Overlay Styles */
/* Custom Overlay Text Styles */
.custom-overlay-style-None {
color: #fff;
text-shadow: none;
}
.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);
@@ -1129,7 +1141,7 @@
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: none; /* override default */
text-shadow: none;
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 6s linear infinite;
background-size: 200% auto;
@@ -1155,8 +1167,6 @@
}
}
/* Text Overlay Styles */
.custom-overlay-style-Neon {
color: #fff;
text-shadow:
@@ -1250,39 +1260,6 @@
}
}
/* 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:
@@ -1338,3 +1315,94 @@
}
}
.custom-overlay-style-Wave {
color: #fff;
text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
display: inline-block;
animation: liquidWave 3s ease-in-out infinite;
}
@keyframes liquidWave {
0%, 100% { transform: translateY(0) skewY(0); }
25% { transform: translateY(-3px) skewY(1deg); }
75% { transform: translateY(3px) skewY(-1deg); }
}
.custom-overlay-style-VHS {
color: #fff;
text-shadow: 3px 0 0 #f00, -3px 0 0 #0ff;
animation: vhsTracking 2s steps(2, start) infinite;
}
@keyframes vhsTracking {
0%, 100% { text-shadow: 3px 0 0 #f00, -3px 0 0 #0ff; }
50% { text-shadow: 2px 1px 0 #f00, -2px -1px 0 #0ff; }
}
.custom-overlay-style-Matrix {
color: #0f0;
font-family: monospace;
text-shadow: 0 0 5px #0f0, 0 0 10px #0f0;
letter-spacing: 2px;
animation: matrixGlow 2s infinite alternate;
}
@keyframes matrixGlow {
to { text-shadow: 0 0 10px #0f0, 0 0 20px #0f0; }
}
/* Custom Overlay Image 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));
}
.custom-overlay-img-Hologram {
filter: drop-shadow(0 0 10px #0ff) sepia(0.8) hue-rotate(180deg) saturate(3);
opacity: 0.8;
animation: hologramFlicker 3s infinite;
}
@keyframes hologramFlicker {
0% { opacity: 0.8; transform: skewX(0); }
5% { opacity: 0.5; transform: skewX(2deg); }
10% { opacity: 0.9; transform: skewX(-2deg); }
15% { opacity: 0.8; transform: skewX(0); }
100% { opacity: 0.8; }
}
.custom-overlay-img-CRT {
filter: contrast(1.5) brightness(1.2) drop-shadow(3px 0 0 rgba(255,0,0,0.5)) drop-shadow(-3px 0 0 rgba(0,0,255,0.5));
}
.custom-overlay-img-Floating {
filter: drop-shadow(0 15px 20px rgba(0,0,0,0.6));
animation: floatImg 4s ease-in-out infinite;
}
@keyframes floatImg {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}