Add global overlay text and image configuration options; enhance upload functionality

Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html

@@ -226,6 +226,47 @@
                             </label>
                             <div class="fieldDescription">If enabled, the text or image below will hover over the slideshow globally.</div>
                         </div>
+                        
+                        <div class="selectContainer" style="margin-top: 1em;">
+                            <label class="selectLabel" for="CustomOverlayPriority">Priority (If Both Are Set)</label>
+                            <select is="emby-select" id="CustomOverlayPriority" name="CustomOverlayPriority"
+                                class="selectLayout emby-select-withcolor emby-select"
+                                style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
+                                <option value="Image">Show Image</option>
+                                <option value="Text">Show Text</option>
+                            </select>
+                            <div class="fieldDescription">What should be displayed if you have both an Image and Text configured?</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!").</div>
+                        </div>
+
+                        <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.</div>
+                        </div>
+
+                        <!-- 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: #a94442;">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>
+                        </div>
+                        
+                        <h3 class="inputLabel" style="margin-top: 2em;">Styles</h3>
 
                         <div class="selectContainer">
                             <label class="selectLabel" for="CustomOverlayStyle">Overlay Style</label>
@@ -248,19 +289,6 @@
                             <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.</div>
-                        </div>
-
                         <div class="selectContainer">
                             <label class="selectLabel" for="CustomOverlayImageStyle">Image Style</label>
                             <select is="emby-select" id="CustomOverlayImageStyle" name="CustomOverlayImageStyle"
@@ -276,32 +304,7 @@
                             <div class="fieldDescription">Choose a visual effect to apply to your overlay image.</div>
                         </div>
 
-                        <div class="selectContainer" style="margin-top: 1em;">
-                            <label class="selectLabel" for="CustomOverlayPriority">Priority (If Both Are Set)</label>
-                            <select is="emby-select" id="CustomOverlayPriority" name="CustomOverlayPriority"
-                                class="selectLayout emby-select-withcolor emby-select"
-                                style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
-                                <option value="Image">Show Image</option>
-                                <option value="Text">Show Text</option>
-                            </select>
-                            <div class="fieldDescription">What should be displayed if you have both an Image and Text configured?</div>
-                        </div>
 
-                        <!-- 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: #a94442;">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>
-                        </div>
                     </div>
 
                     <!-- ADVANCED TAB -->
@@ -960,15 +963,16 @@
                         '    <textarea is="emby-textarea" class="emby-textarea section-ids" style="width: 100%; height: 80px; font-family: monospace;">' + (data.MediaIds || '') + '</textarea>' +
                         '    <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 Overrides</h3>' +
+                        '<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="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!)" />' +
+                        '            <div class="fieldDescription">Override the global text.</div>' +
                         '        </div>' + 
                         '        <div class="inputContainer" style="margin: 0;">' +
                         '            <input is="emby-input" type="text" class="emby-input section-overlay-image" style="width: 100%;" value="' + (data.OverlayImageUrl ? data.OverlayImageUrl.replace(/"/g, '&quot;') : '') + '" placeholder="Seasonal Custom Overlay Image URL" />' +
-                        '            <div class="fieldDescription">Override the global text or image URL.</div>' +
+                        '            <div class="fieldDescription">Override the global image URL.</div>' +
                         '        </div>' +
                         '    </div>' +
                         '    <div class="inputContainer" style="flex: 1; min-width: 250px; margin: 0;">' +
@@ -977,9 +981,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" class="seasonal-clear-btn" is="paper-icon-button-light" style="display: none; position: absolute; top: 5px; right: 5px; z-index: 3; background: rgba(0,0,0,0.6); border-radius: 50%; padding: 4px;" title="Clear Image">' +
+                        '            <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>' +
-                        '                <i class="material-icons" style="color: #a94442; font-size: 18px;">delete</i>' +
-                        '            </button>' +
                         '        </div>' +
                         '    </div>' +
                         '</div>';