CodeDevMLH/Jellyfin-Seasonals-Plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

Enhance configuration page: add section titles and improve input handling for seasonal themes

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-16 17:29:41 +01:00
parent 0e1b91d93c
commit 353bda10df
1 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
Jellyfin.Plugin.Seasonals/Configuration/configPage.html
View File

@@ -36,6 +36,7 @@
<form id="SeasonalsConfigForm"> <form id="SeasonalsConfigForm">
<!-- BASIC Tab --> <!-- BASIC Tab -->
<div id="seasonals-basic" class="seasonals-tab-content"> <div id="seasonals-basic" class="seasonals-tab-content">
<h2 class="sectionTitle">Main Plugin Settings</h2>
<div class="checkboxContainer checkboxContainer-withDescription"> <div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label"> <label class="emby-checkbox-label">
<input id="SeasonalsIsEnabled" name="SeasonalsIsEnabled" type="checkbox" is="emby-checkbox" /> <input id="SeasonalsIsEnabled" name="SeasonalsIsEnabled" type="checkbox" is="emby-checkbox" />
@@ -104,9 +105,10 @@
<!-- Advanced Tab --> <!-- Advanced Tab -->
<div id="seasonals-advanced" class="seasonals-tab-content" style="display: none;"> <div id="seasonals-advanced" class="seasonals-tab-content" style="display: none;">
<p>Configure specific settings for each seasonal theme below.</p> <h2 class="sectionTitle">Configure specific settings for each seasonal theme</h2>
<p>All symbol count settings add this number in addition to the standard 12 symbols (if additional symbols is enabled).</p> <!-- <p>Configure specific settings for each seasonal theme below.</p> -->
<details> <p>All symbol count settings add this number in addition to the standard 12 symbols (if additional symbols is enabled).</p>
<details>
<summary>Autumn</summary> <summary>Autumn</summary>
<div class="checkboxContainer checkboxContainer-withDescription"> <div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label"> <label class="emby-checkbox-label">
@@ -636,10 +638,10 @@
border-bottom: 2px solid #00a4dc !important; border-bottom: 2px solid #00a4dc !important;
} }
/* Disabled options in selects */ /* Disabled options in selects
select option:disabled { select option:disabled {
color: #a3a3a3 !important; color: #a3a3a3 !important;
} } */
</style> </style>
<script> <script>
function showSeasonalsTab(tabId, btn) { function showSeasonalsTab(tabId, btn) {
@@ -672,7 +674,7 @@
var startMonth = data ? (data.StartMonth !== undefined ? data.StartMonth : (data.startMonth !== undefined ? data.startMonth : 1)) : 1; var startMonth = data ? (data.StartMonth !== undefined ? data.StartMonth : (data.startMonth !== undefined ? data.startMonth : 1)) : 1;
var endDay = data ? (data.EndDay !== undefined ? data.EndDay : (data.endDay !== undefined ? data.endDay : 1)) : 1; var endDay = data ? (data.EndDay !== undefined ? data.EndDay : (data.endDay !== undefined ? data.endDay : 1)) : 1;
var endMonth = data ? (data.EndMonth !== undefined ? data.EndMonth : (data.endMonth !== undefined ? data.endMonth : 1)) : 1; var endMonth = data ? (data.EndMonth !== undefined ? data.EndMonth : (data.endMonth !== undefined ? data.endMonth : 1)) : 1;
var theme = data ? (data.Theme || data.theme || 'snowflakes') : 'snowflakes'; var theme = data ? (data.Theme || data.theme || 'none') : 'none';
div.innerHTML = ` div.innerHTML = `
<div class="seasonal-rule-header"> <div class="seasonal-rule-header">
@@ -686,44 +688,44 @@
<div class="seasonal-rule-content"> <div class="seasonal-rule-content">
<div class="inputContainer" style="margin:0;"> <div class="inputContainer" style="margin:0;">
<label class="inputLabel">Name</label> <label class="inputLabel">Name</label>
<input is="emby-input" class="rule-name" value="${name}" onchange="this.closest('.seasonal-rule').querySelector('.rule-title').innerText = this.value" /> <input is="emby-input" class="rule-name" onchange="this.closest('.seasonal-rule').querySelector('.rule-title').innerText = this.value" />
</div> </div>
<div class="date-range-group"> <div class="date-range-group">
<div class="inputContainer" style="margin:0;"> <div class="inputContainer" style="margin:0;">
<label class="inputLabel">Start Day</label> <label class="inputLabel">Start Day</label>
<input is="emby-input" type="number" class="rule-start-day" value="${startDay}" min="1" max="31" /> <input is="emby-input" type="number" class="rule-start-day" min="1" max="31" />
</div> </div>
<div class="inputContainer" style="margin:0;"> <div class="inputContainer" style="margin:0;">
<label class="inputLabel">Month</label> <label class="inputLabel">Month</label>
<input is="emby-input" type="number" class="rule-start-month" value="${startMonth}" min="1" max="12" /> <input is="emby-input" type="number" class="rule-start-month" min="1" max="12" />
</div> </div>
</div> </div>
<div class="date-range-group"> <div class="date-range-group">
<div class="inputContainer" style="margin:0;"> <div class="inputContainer" style="margin:0;">
<label class="inputLabel">End Day</label> <label class="inputLabel">End Day</label>
<input is="emby-input" type="number" class="rule-end-day" value="${endDay}" min="1" max="31" /> <input is="emby-input" type="number" class="rule-end-day" min="1" max="31" />
</div> </div>
<div class="inputContainer" style="margin:0;"> <div class="inputContainer" style="margin:0;">
<label class="inputLabel">Month</label> <label class="inputLabel">Month</label>
<input is="emby-input" type="number" class="rule-end-month" value="${endMonth}" min="1" max="12" /> <input is="emby-input" type="number" class="rule-end-month" min="1" max="12" />
</div> </div>
</div> </div>
<div class="selectContainer" style="margin:0;"> <div class="selectContainer" style="margin:0;">
<label class="selectLabel">Theme</label> <label class="selectLabel">Theme</label>
<select is="emby-select" class="rule-theme" style="width: 100%;"> <select is="emby-select" class="rule-theme" style="width: 100%;">
<option value="none" ${theme === 'none' ? 'selected' : ''}>None</option> <option value="none">None</option>
<option value="snowflakes" ${theme === 'snowflakes' ? 'selected' : ''}>Snowflakes</option> <option value="snowflakes">Snowflakes</option>
<option value="snowfall" ${theme === 'snowfall' ? 'selected' : ''}>Snowfall</option> <option value="snowfall">Snowfall</option>
<option value="snowstorm" ${theme === 'snowstorm' ? 'selected' : ''}>Snowstorm</option> <option value="snowstorm">Snowstorm</option>
<option value="fireworks" ${theme === 'fireworks' ? 'selected' : ''}>Fireworks</option> <option value="fireworks">Fireworks</option>
<option value="halloween" ${theme === 'halloween' ? 'selected' : ''}>Halloween</option> <option value="halloween">Halloween</option>
<option value="hearts" ${theme === 'hearts' ? 'selected' : ''}>Hearts</option> <option value="hearts">Hearts</option>
<option value="christmas" ${theme === 'christmas' ? 'selected' : ''}>Christmas</option> <option value="christmas">Christmas</option>
<option value="santa" ${theme === 'santa' ? 'selected' : ''}>Santa</option> <option value="santa">Santa</option>
<option value="autumn" ${theme === 'autumn' ? 'selected' : ''}>Autumn</option> <option value="autumn">Autumn</option>
<option value="easter" ${theme === 'easter' ? 'selected' : ''}>Easter</option> <option value="easter">Easter</option>
</select> </select>
</div> </div>
</div> </div>
@@ -731,6 +733,14 @@
container.appendChild(div); container.appendChild(div);
// Set values programmatically to ensure they are correctly populated
div.querySelector('.rule-name').value = name;
div.querySelector('.rule-start-day').value = startDay;
div.querySelector('.rule-start-month').value = startMonth;
div.querySelector('.rule-end-day').value = endDay;
div.querySelector('.rule-end-month').value = endMonth;
div.querySelector('.rule-theme').value = theme;
// Bind events // Bind events
div.querySelector('.btn-remove').addEventListener('click', function() { div.querySelector('.btn-remove').addEventListener('click', function() {
div.remove(); div.remove();