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

Enhance configuration layout and improve seasonal section handling

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-13 03:01:17 +01:00
parent 3385196611
commit 3a4c663c0e
1 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -202,7 +202,7 @@
</div> </div>
<div class="selectContainer"> <div class="selectContainer">
<label class="selectLabel" for="PreferredVideoQuality">Preferred YouTube Quality</label> <label class="selectLabel" for="PreferredVideoQuality">Preferred YouTube Quality</label>
<select is="emby-select" id="PreferredVideoQuality" name="PreferredVideoQuality" class="selectLayout emby-select-withcolor emby-select"> <select is="emby-select" id="PreferredVideoQuality" name="PreferredVideoQuality" class="selectLayout emby-select-withcolor emby-select" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
<option value="Auto">Auto (Smart)</option> <option value="Auto">Auto (Smart)</option>
<option value="Maximum">Maximum (4K+)</option> <option value="Maximum">Maximum (4K+)</option>
<option value="1080p">1080p</option> <option value="1080p">1080p</option>
@@ -304,7 +304,7 @@
<h2 class="sectionTitle">Content Sorting</h2> <h2 class="sectionTitle">Content Sorting</h2>
<div class="selectContainer"> <div class="selectContainer">
<label class="selectLabel" for="SortBy">Sort By</label> <label class="selectLabel" for="SortBy">Sort By</label>
<select is="emby-select" id="SortBy" name="SortBy" class="selectLayout emby-select-withcolor emby-select"> <select is="emby-select" id="SortBy" name="SortBy" class="selectLayout emby-select-withcolor emby-select" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
<option value="Random">Random</option> <option value="Random">Random</option>
<option value="Original">Original (Custom List Order)</option> <option value="Original">Original (Custom List Order)</option>
<option value="PremiereDate">Premiere Date</option> <option value="PremiereDate">Premiere Date</option>
@@ -318,7 +318,7 @@
</div> </div>
<div class="selectContainer"> <div class="selectContainer">
<label class="selectLabel" for="SortOrder">Sort Order</label> <label class="selectLabel" for="SortOrder">Sort Order</label>
<select is="emby-select" id="SortOrder" name="SortOrder" class="selectLayout emby-select-withcolor emby-select"> <select is="emby-select" id="SortOrder" name="SortOrder" class="selectLayout emby-select-withcolor emby-select" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
<option value="Ascending">Ascending</option> <option value="Ascending">Ascending</option>
<option value="Descending">Descending</option> <option value="Descending">Descending</option>
</select> </select>
@@ -534,23 +534,24 @@
var container = page.querySelector('#seasonalSectionsList'); var container = page.querySelector('#seasonalSectionsList');
if (!container) return; if (!container) return;
container.innerHTML = ''; container.innerHTML = '';
sections.forEach(function(section) { sections.forEach(function(section, index) {
MediaBarEnhancedConfigurationPage.createSectionElement(container, section); MediaBarEnhancedConfigurationPage.createSectionElement(container, section, index + 1);
}); });
}, },
addSeasonalSection: function(page) { addSeasonalSection: function(page) {
var container = page.querySelector('#seasonalSectionsList'); var container = page.querySelector('#seasonalSectionsList');
if (!container) return; if (!container) return;
var index = container.children.length + 1;
MediaBarEnhancedConfigurationPage.createSectionElement(container, { MediaBarEnhancedConfigurationPage.createSectionElement(container, {
Name: 'New Season', Name: 'New Season',
StartDay: 1, StartMonth: 1, StartDay: 1, StartMonth: 1,
EndDay: 1, EndMonth: 1, EndDay: 1, EndMonth: 1,
MediaIds: '' MediaIds: ''
}); }, index);
}, },
createSectionElement: function(container, data) { createSectionElement: function(container, data, index) {
var div = document.createElement('div'); var div = document.createElement('div');
div.className = 'seasonal-section'; div.className = 'seasonal-section';
div.style.cssText = 'background: rgba(0,0,0,0.2); padding: 1em; margin-bottom: 1em; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1);'; div.style.cssText = 'background: rgba(0,0,0,0.2); padding: 1em; margin-bottom: 1em; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1);';
@@ -574,19 +575,22 @@
return h; return h;
} }
div.innerHTML = '<div style="margin-bottom: 0.5em;">' + var labelText = 'Season list #' + (index || 1);
' <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Season Name</label>' +
div.innerHTML =
'<div class="inputContainer" style="margin-bottom: 0.5em;">' +
' <label class="inputLabel" style="margin-bottom:0.5em; display:block;">' + labelText + '</label>' +
' <div style="display: flex; align-items: center;">' + ' <div style="display: flex; align-items: center;">' +
' <div style="flex-grow:1;">' + ' <div style="flex-grow:1;">' +
' <input is="emby-input" type="text" class="emby-input section-name" value="' + (data.Name || '') + '" />' + ' <input is="emby-input" type="text" class="emby-input section-name" value="' + (data.Name || '') + '" />' +
' </div>' + ' </div>' +
' <button type="button" class="raised emby-button remove-section" style="background: #a94442; min-width: unset; margin-left: 1em;">Remove</button>' + ' <button type="button" class="raised emby-button remove-section" style="background: #a94442; min-width: unset; margin-left: 1em;">Remove</button>' +
' </div>' + ' </div>' +
' <div class="fieldDescription">Name of the season (e.g. Christmas).</div>' + ' <div class="fieldDescription">Name of the season</div>' +
'</div>' + '</div>' +
'<div style="margin-bottom: 1em;">' + '<div class="inputContainer" style="margin-bottom: 1em;">' +
' <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Active Period</label>' + ' <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Active Period</label>' +
' <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em;">' + ' <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em; padding-left: 0.2em;">' +
' <span>From:</span>' + ' <span>From:</span>' +
mkSelect(data.StartDay, days, 'start-day') + mkSelect(data.StartDay, days, 'start-day') +
mkSelect(data.StartMonth, months, 'start-month') + mkSelect(data.StartMonth, months, 'start-month') +
@@ -596,7 +600,7 @@
' </div>' + ' </div>' +
' <div class="fieldDescription">Date range (inclusive) when this content is active.</div>' + ' <div class="fieldDescription">Date range (inclusive) when this content is active.</div>' +
'</div>' + '</div>' +
'<div>' + '<div class="inputContainer">' +
' <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Media IDs</label>' + ' <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Media IDs</label>' +
' <textarea is="emby-textarea" class="emby-textarea section-ids" style="width: 100%; height: 80px; font-family: monospace;">' + (data.MediaIds || '') + '</textarea>' + ' <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 list of Movie/Series/Collection IDs to show during this season.</div>' + ' <div class="fieldDescription">Comma-separated list of Movie/Series/Collection IDs to show during this season.</div>' +