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

Enhance image upload handling and update UI elements for clarity

Browse Source
This commit is contained in:
CodeDevMLH
2026-03-10 01:27:46 +01:00
parent 0cd64d4eea
commit dd07c452ca
2 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>
@@ -985,7 +985,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, '&quot;') : '') + '" placeholder="Seasonal Custom Overlay Text (e.g. Oscars Time!)" />' +
@@ -996,13 +996,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 +1077,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 +1093,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';