Compare commits
16 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
99b8ef316c | ||
|
|
6880ccc9eb | ||
|
|
f77c3fbf71 | ||
|
|
81b28952cc | ||
|
|
911c96216a | ||
|
|
b3b6296798 | ||
|
|
bca2d577b9 | ||
|
|
11b6316338 | ||
|
|
bbc6da9d41 | ||
|
|
c313cbf37d | ||
|
|
79405c6e95 | ||
|
|
a542e38dc3 | ||
|
|
a27566632c | ||
|
|
779e20bfb2 | ||
|
|
0624624190 | ||
|
|
dd07c452ca |
@@ -20,7 +20,7 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
|
||||
public OverlayImageController(IApplicationPaths applicationPaths)
|
||||
{
|
||||
_applicationPaths = applicationPaths;
|
||||
_imageDirectory = Path.Combine(applicationPaths.DataPath, "plugins", "configurations", "MediaBarEnhancedAssets");
|
||||
_imageDirectory = Path.Combine(applicationPaths.PluginConfigurationsPath, "Jellyfin.Plugin.MediaBarEnhanced", "Assets");
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
@@ -97,13 +97,19 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Api
|
||||
|
||||
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,
|
||||
// and we also don't get blocked by other readers.
|
||||
var stream = new FileStream(targetPath, FileMode.Open, FileAccess.Read, FileShare.ReadWrite);
|
||||
// Read the file and return with appropriate MIME type
|
||||
// We use FileShare.ReadWrite | FileShare.Delete so that if someone is currently overwriting the file (uploading), we don't block them.
|
||||
var stream = new FileStream(targetPath, FileMode.Open, FileAccess.Read, FileShare.ReadWrite | FileShare.Delete);
|
||||
|
||||
// "image/*" works reliably as browsers will sniff the exact image mime type (jpeg, png, webp).
|
||||
return File(stream, "image/*");
|
||||
string mimeType = "application/octet-stream";
|
||||
string ext = Path.GetExtension(targetPath).ToLowerInvariant();
|
||||
switch (ext) {
|
||||
case ".jpg": case ".jpeg": mimeType = "image/jpeg"; break;
|
||||
case ".png": mimeType = "image/png"; break;
|
||||
case ".gif": mimeType = "image/gif"; break;
|
||||
case ".webp": mimeType = "image/webp"; break;
|
||||
}
|
||||
return File(stream, mimeType);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -266,7 +266,7 @@
|
||||
<div class="fieldDescription">Uploading an image will securely save it to the server and automatically update the URL field above.</div>
|
||||
</div>
|
||||
|
||||
<h3 class="inputLabel" style="margin-top: 2em;">Styles</h3>
|
||||
<h2 class="sectionTitle" style="margin-top: 1.2em;">Styles</h2>
|
||||
|
||||
<div class="selectContainer">
|
||||
<label class="selectLabel" for="CustomOverlayStyle">Overlay Style</label>
|
||||
@@ -289,6 +289,8 @@
|
||||
<option value="Wave">Liquid Wave</option>
|
||||
<option value="VHS">VHS Tracking</option>
|
||||
<option value="Matrix">Digital Matrix</option>
|
||||
<option value="Ghost">Ghostly Apparition</option>
|
||||
<option value="PulseGlow">Breathing Pulse Glow</option>
|
||||
</select>
|
||||
<div class="fieldDescription">Choose the visual styling animation for your custom text.</div>
|
||||
</div>
|
||||
@@ -307,11 +309,31 @@
|
||||
<option value="Hologram">Hologram</option>
|
||||
<option value="CRT">CRT Monitor</option>
|
||||
<option value="Floating">Floating Float</option>
|
||||
<option value="VHSTracking">VHS Tracking Glitch</option>
|
||||
<option value="ColorCycle">Rainbow Color Cycle</option>
|
||||
<option value="Mirror">Mirror Reflection</option>
|
||||
</select>
|
||||
<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 -->
|
||||
@@ -640,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
|
||||
@@ -884,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) {
|
||||
@@ -985,7 +1009,7 @@
|
||||
' <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>' +
|
||||
'<h3 class="inputLabel" style="margin-top: 1.5em; margin-bottom: 0.5em;">Custom Overlay Overrides</h3>' +
|
||||
'<div style="display: flex; flex-wrap: wrap; gap: 1em; align-items: stretch;">' +
|
||||
'<div style="display: flex; flex-wrap: wrap; gap: 1em; align-items: flex-start;">' +
|
||||
' <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, '"') : '') + '" placeholder="Seasonal Custom Overlay Text (e.g. Oscars Time!)" />' +
|
||||
@@ -996,13 +1020,13 @@
|
||||
' <div class="fieldDescription">Override the global 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;">' +
|
||||
' <div class="inputContainer" style="flex: 1; min-width: 250px; margin: 0; padding-bottom: 5px;">' +
|
||||
' <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; display: flex; flex-direction: column; align-items: center; justify-content: center;">' +
|
||||
' <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" 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>' +
|
||||
' <button type="button" is="paper-icon-button-light" class="seasonal-clear-btn" title="Clear Image" style="display: none; position: absolute; top: 0px; right: 0px; z-index: 3; color: #a94442;"><i class="material-icons">delete</i></button>' +
|
||||
' </div>' +
|
||||
' </div>' +
|
||||
'</div>';
|
||||
@@ -1077,7 +1101,7 @@
|
||||
clearBtn.style.display = 'block';
|
||||
if(icon) icon.style.display = 'none';
|
||||
if(text) {
|
||||
text.textContent = 'Drag and drop a new image here...';
|
||||
text.textContent = 'Drag and drop a new image here, or click to select';
|
||||
text.style.display = 'block';
|
||||
text.style.position = 'absolute';
|
||||
text.style.bottom = '5px';
|
||||
@@ -1093,7 +1117,7 @@
|
||||
clearBtn.style.display = 'none';
|
||||
if(icon) icon.style.display = 'block';
|
||||
if(text) {
|
||||
text.textContent = 'Upload seasonal image';
|
||||
text.textContent = 'Upload seasonal overlay image';
|
||||
text.style.display = 'block';
|
||||
text.style.position = 'static';
|
||||
text.style.backgroundColor = 'transparent';
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
|
||||
<Title>Jellyfin Media Bar Enhanced Plugin</Title>
|
||||
<Authors>CodeDevMLH</Authors>
|
||||
<Version>1.7.2.3</Version>
|
||||
<Version>1.7.2.8</Version>
|
||||
<RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced</RepositoryUrl>
|
||||
</PropertyGroup>
|
||||
|
||||
|
||||
@@ -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: 8%; /* oder 5vh? */
|
||||
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;
|
||||
@@ -1244,9 +1245,8 @@
|
||||
bottom: -10px;
|
||||
left: -50vw;
|
||||
right: -50px;
|
||||
background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 70%, transparent 100%);
|
||||
background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.6) 40%, transparent 100%);
|
||||
z-index: -1;
|
||||
border-left: 5px solid #00a4dc;
|
||||
}
|
||||
|
||||
@keyframes slideInCinematic {
|
||||
@@ -1324,6 +1324,7 @@
|
||||
@keyframes liquidWave {
|
||||
0%, 100% { transform: translateY(0) skewY(0); }
|
||||
25% { transform: translateY(-3px) skewY(1deg); }
|
||||
50% { transform: translateY(0) skewY(0); }
|
||||
75% { transform: translateY(3px) skewY(-1deg); }
|
||||
}
|
||||
|
||||
@@ -1348,6 +1349,27 @@
|
||||
to { text-shadow: 0 0 10px #0f0, 0 0 20px #0f0; }
|
||||
}
|
||||
|
||||
.custom-overlay-style-Ghost {
|
||||
color: rgba(255,255,255,0.8);
|
||||
filter: blur(0px);
|
||||
animation: ghostApparition 6s infinite alternate;
|
||||
}
|
||||
@keyframes ghostApparition {
|
||||
0% { filter: blur(0px); opacity: 1; transform: scale(1); }
|
||||
50% { filter: blur(3px); opacity: 0.6; transform: scale(1.02); }
|
||||
100% { filter: blur(8px); opacity: 0; transform: scale(1.05); }
|
||||
}
|
||||
|
||||
.custom-overlay-style-PulseGlow {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(255,255,255,0.8);
|
||||
animation: pulseGlowAura 3s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes pulseGlowAura {
|
||||
0% { text-shadow: 0 0 5px rgba(255,255,255,0.5), 0 0 10px #00a4dc; transform: scale(1); }
|
||||
100% { text-shadow: 0 0 15px rgba(255,255,255,1), 0 0 30px #00a4dc, 0 0 40px #00a4dc; transform: scale(1.05); }
|
||||
}
|
||||
|
||||
/* Custom Overlay Image Styles */
|
||||
.custom-overlay-img-RoundedShadow {
|
||||
border-radius: 12px;
|
||||
@@ -1406,3 +1428,29 @@
|
||||
50% { transform: translateY(-15px); }
|
||||
}
|
||||
|
||||
.custom-overlay-img-VHSTracking {
|
||||
filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5));
|
||||
animation: imgVhsTracking 2s infinite;
|
||||
}
|
||||
@keyframes imgVhsTracking {
|
||||
0% { transform: translateX(0); clip-path: inset(0 0 0 0); filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5)) hue-rotate(0deg); }
|
||||
5% { transform: translateX(-5px); clip-path: inset(10% 0 80% 0); filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5)) hue-rotate(90deg); }
|
||||
10% { transform: translateX(5px); clip-path: inset(40% 0 40% 0); filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5)) hue-rotate(-90deg); }
|
||||
15% { transform: translateX(0); clip-path: inset(0 0 0 0); filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5)) hue-rotate(0deg); }
|
||||
100% { transform: translateX(0); clip-path: inset(0 0 0 0); }
|
||||
}
|
||||
|
||||
.custom-overlay-img-ColorCycle {
|
||||
filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5));
|
||||
animation: imgColorCycle 10s linear infinite;
|
||||
}
|
||||
@keyframes imgColorCycle {
|
||||
from { filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5)) hue-rotate(0deg); }
|
||||
to { filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5)) hue-rotate(360deg); }
|
||||
}
|
||||
|
||||
.custom-overlay-img-Mirror {
|
||||
filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5));
|
||||
-webkit-box-reflect: below 2px linear-gradient(transparent, rgba(255,255,255,0.3));
|
||||
}
|
||||
|
||||
|
||||
@@ -64,6 +64,9 @@ const CONFIG = {
|
||||
customOverlayStyle: "Shadowed",
|
||||
customOverlayImageStyle: "None",
|
||||
customOverlayPriority: "Image",
|
||||
customOverlayPositionX: 0,
|
||||
customOverlayPositionY: 0,
|
||||
customOverlayScale: 100,
|
||||
enableCustomMediaIds: true,
|
||||
enableSeasonalContent: false,
|
||||
customMediaIds: "",
|
||||
@@ -3867,6 +3870,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);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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.3",
|
||||
"version": "1.7.2.8",
|
||||
"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.3/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||
"checksum": "21ed7324f18cf979f56a424940c25939",
|
||||
"timestamp": "2026-03-10T00:06:06Z"
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.7.2.8/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||
"checksum": "b2ddf7bd8f42d5bcddff03259115d086",
|
||||
"timestamp": "2026-03-10T23:05:13Z"
|
||||
},
|
||||
{
|
||||
"version": "1.7.0.14",
|
||||
|
||||
Reference in New Issue
Block a user