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

Refactor configuration page: update button classes, form input names, and tab handling for consistency

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-16 16:54:22 +01:00
parent 7cc70854c4
commit faec7d8941
1 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
@@ -19,15 +19,15 @@
<hr style="max-width: 800px; margin: 1em 0;"> <hr style="max-width: 800px; margin: 1em 0;">
<div style="margin-bottom: 1.5em;"> <div style="margin-bottom: 1.5em;">
<button class="jellyfin-tab-button active" onclick="showTab('seasonals-basic', this)" <button class="seasonals-tab-button active" onclick="showSeasonalsTab('seasonals-basic', this)"
style="background: none; border: none; color: #fff; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid #00a4dc;"> style="background: none; border: none; color: #fff; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid #00a4dc;">
<h3>General Settings</h3> <h3>General Settings</h3>
</button> </button>
<button class="jellyfin-tab-button" onclick="showTab('seasonals-auto-selection', this)" <button class="seasonals-tab-button" onclick="showSeasonalsTab('seasonals-auto-selection', this)"
style="background: none; border: none; color: #ccc; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid transparent;"> style="background: none; border: none; color: #ccc; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid transparent;">
<h3>Auto Selection</h3> <h3>Auto Selection</h3>
</button> </button>
<button class="jellyfin-tab-button" onclick="showTab('seasonals-advanced', this)" <button class="seasonals-tab-button" onclick="showSeasonalsTab('seasonals-advanced', this)"
style="background: none; border: none; color: #ccc; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid transparent;"> style="background: none; border: none; color: #ccc; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid transparent;">
<h3>Advanced Settings</h3> <h3>Advanced Settings</h3>
</button> </button>
@@ -35,24 +35,24 @@
<form id="SeasonalsConfigForm"> <form id="SeasonalsConfigForm">
<!-- BASIC Tab --> <!-- BASIC Tab -->
<div id="seasonals-basic" class="tab-content"> <div id="seasonals-basic" class="seasonals-tab-content">
<div class="checkboxContainer checkboxContainer-withDescription"> <div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label"> <label class="emby-checkbox-label">
<input id="IsEnabled" name="IsEnabled" type="checkbox" is="emby-checkbox" /> <input id="SeasonalsIsEnabled" name="SeasonalsIsEnabled" type="checkbox" is="emby-checkbox" />
<span>Enable Seasonals</span> <span>Enable Seasonals</span>
</label> </label>
<div class="fieldDescription">Enable or disable the entire plugin functionality.</div> <div class="fieldDescription">Enable or disable the entire plugin functionality.</div>
</div> </div>
<div class="checkboxContainer checkboxContainer-withDescription"> <div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label"> <label class="emby-checkbox-label">
<input id="AutomateSeasonSelection" name="AutomateSeasonSelection" type="checkbox" is="emby-checkbox" /> <input id="SeasonalsAutomateSeasonSelection" name="SeasonalsAutomateSeasonSelection" type="checkbox" is="emby-checkbox" />
<span>Automate Season Selection</span> <span>Automate Season Selection</span>
</label> </label>
<div class="fieldDescription">If enabled, the plugin will use the rules defined in the "Auto Selection" tab to assume the season. If no rule matches, it falls back to the "Standard Season" below.</div> <div class="fieldDescription">If enabled, the plugin will use the rules defined in the "Auto Selection" tab to assume the season. If no rule matches, it falls back to the "Standard Season" below.</div>
</div> </div>
<div class="selectContainer"> <div class="selectContainer">
<label class="selectLabel" for="SelectedSeason">Standard Season</label> <label class="selectLabel" for="SeasonalsSelectedSeason">Standard Season</label>
<select is="emby-select" id="SelectedSeason" name="SelectedSeason" class="selectLayout emby-select-withcolor emby-select" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;"> <select is="emby-select" id="SeasonalsSelectedSeason" name="SeasonalsSelectedSeason" class="selectLayout emby-select-withcolor emby-select" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
<option value="none">None</option> <option value="none">None</option>
<option value="snowflakes">Snowflakes</option> <option value="snowflakes">Snowflakes</option>
<option value="snowfall">Snowfall</option> <option value="snowfall">Snowfall</option>
@@ -78,7 +78,7 @@
</div> </div>
<div class="checkboxContainer checkboxContainer-withDescription"> <div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label"> <label class="emby-checkbox-label">
<input id="EnableClientSideToggle" name="EnableClientSideToggle" type="checkbox" is="emby-checkbox" /> <input id="SeasonalsEnableClientSideToggle" name="SeasonalsEnableClientSideToggle" type="checkbox" is="emby-checkbox" />
<span>Allow Client-Side Toggle</span> <span>Allow Client-Side Toggle</span>
</label> </label>
<div class="fieldDescription">If enabled, users will see a seasonals icon in the header to toggle seasonals for their browser (device-specific).</div> <div class="fieldDescription">If enabled, users will see a seasonals icon in the header to toggle seasonals for their browser (device-specific).</div>
@@ -86,7 +86,7 @@
</div> </div>
<!-- Auto Selection Tab --> <!-- Auto Selection Tab -->
<div id="seasonals-auto-selection" class="tab-content" style="display: none;"> <div id="seasonals-auto-selection" class="seasonals-tab-content" style="display: none;">
<div style="background-color: rgba(255, 255, 255, 0.05); border-left: 4px solid #00a4dc; border-radius: 4px; padding: 1em 1.5em; margin-bottom: 1.5em;"> <div style="background-color: rgba(255, 255, 255, 0.05); border-left: 4px solid #00a4dc; border-radius: 4px; padding: 1em 1.5em; margin-bottom: 1.5em;">
<h3>Auto Selection Rules</h3> <h3>Auto Selection Rules</h3>
<p>Define rules to automatically select a season based on the date. Rules are evaluated from top to bottom. The first matching rule wins.</p> <p>Define rules to automatically select a season based on the date. Rules are evaluated from top to bottom. The first matching rule wins.</p>
@@ -103,7 +103,7 @@
</div> </div>
<!-- Advanced Tab --> <!-- Advanced Tab -->
<div id="seasonals-advanced" class="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> <p>Configure specific settings for each seasonal theme below.</p>
<p>All symbol count settings add this number in addition to the standard 12 symbols (if additional symbols is enabled).</p> <p>All symbol count settings add this number in addition to the standard 12 symbols (if additional symbols is enabled).</p>
<details> <details>
@@ -622,7 +622,7 @@
.date-range-group { .date-range-group {
display: flex; display: flex;
gap: 10px; gap: 10px;
align-items: flex-start; align-items: flex-end;
} }
@media (max-width: 800px) { @media (max-width: 800px) {
.seasonal-rule-content { .seasonal-rule-content {
@@ -631,7 +631,7 @@
} }
/* Styles for the Tabs */ /* Styles for the Tabs */
.jellyfin-tab-button.active { .seasonals-tab-button.active {
color: #fff !important; color: #fff !important;
border-bottom: 2px solid #00a4dc !important; border-bottom: 2px solid #00a4dc !important;
} }
@@ -642,11 +642,11 @@
} }
</style> </style>
<script> <script>
function showTab(tabId, btn) { function showSeasonalsTab(tabId, btn) {
document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none'); document.querySelectorAll('.seasonals-tab-content').forEach(el => el.style.display = 'none');
document.getElementById(tabId).style.display = 'block'; document.getElementById(tabId).style.display = 'block';
document.querySelectorAll('.jellyfin-tab-button').forEach(b => { document.querySelectorAll('.seasonals-tab-button').forEach(b => {
b.classList.remove('active'); b.classList.remove('active');
b.style.color = '#ccc'; b.style.color = '#ccc';
b.style.borderBottom = '2px solid transparent'; b.style.borderBottom = '2px solid transparent';
@@ -775,10 +775,10 @@
.addEventListener('pageshow', function() { .addEventListener('pageshow', function() {
Dashboard.showLoadingMsg(); Dashboard.showLoadingMsg();
ApiClient.getPluginConfiguration(SeasonalsConfigPage.pluginUniqueId).then(function (config) { ApiClient.getPluginConfiguration(SeasonalsConfigPage.pluginUniqueId).then(function (config) {
document.querySelector('#IsEnabled').checked = config.IsEnabled; document.querySelector('#SeasonalsIsEnabled').checked = config.IsEnabled;
document.querySelector('#SelectedSeason').value = config.SelectedSeason; document.querySelector('#SeasonalsSelectedSeason').value = config.SelectedSeason;
document.querySelector('#AutomateSeasonSelection').checked = config.AutomateSeasonSelection; document.querySelector('#SeasonalsAutomateSeasonSelection').checked = config.AutomateSeasonSelection;
document.querySelector('#EnableClientSideToggle').checked = config.EnableClientSideToggle !== undefined ? config.EnableClientSideToggle : true; document.querySelector('#SeasonalsEnableClientSideToggle').checked = config.EnableClientSideToggle !== undefined ? config.EnableClientSideToggle : true;
// Load Rules // Load Rules
try { try {
@@ -888,10 +888,10 @@
.addEventListener('submit', function(e) { .addEventListener('submit', function(e) {
Dashboard.showLoadingMsg(); Dashboard.showLoadingMsg();
ApiClient.getPluginConfiguration(SeasonalsConfigPage.pluginUniqueId).then(function (config) { ApiClient.getPluginConfiguration(SeasonalsConfigPage.pluginUniqueId).then(function (config) {
config.IsEnabled = document.querySelector('#IsEnabled').checked; config.IsEnabled = document.querySelector('#SeasonalsIsEnabled').checked;
config.SelectedSeason = document.querySelector('#SelectedSeason').value; config.SelectedSeason = document.querySelector('#SeasonalsSelectedSeason').value;
config.AutomateSeasonSelection = document.querySelector('#AutomateSeasonSelection').checked; config.AutomateSeasonSelection = document.querySelector('#SeasonalsAutomateSeasonSelection').checked;
config.EnableClientSideToggle = document.querySelector('#EnableClientSideToggle').checked; config.EnableClientSideToggle = document.querySelector('#SeasonalsEnableClientSideToggle').checked;
// Save Rules // Save Rules
config.SeasonalRules = JSON.stringify(SeasonalsConfigPage.getRulesFromUI()); config.SeasonalRules = JSON.stringify(SeasonalsConfigPage.getRulesFromUI());