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

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';
}
}
}