Add custom overlay image upload feature with style options
This commit is contained in:
CodeDevMLH
@@ -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";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user