|
|
|
|
@@ -1,4 +1,4 @@
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
@@ -19,15 +19,15 @@
|
|
|
|
|
<hr style="max-width: 800px; margin: 1em 0;">
|
|
|
|
|
|
|
|
|
|
<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;">
|
|
|
|
|
<h3>General Settings</h3>
|
|
|
|
|
</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;">
|
|
|
|
|
<h3>Auto Selection</h3>
|
|
|
|
|
</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;">
|
|
|
|
|
<h3>Advanced Settings</h3>
|
|
|
|
|
</button>
|
|
|
|
|
@@ -35,24 +35,25 @@
|
|
|
|
|
|
|
|
|
|
<form id="SeasonalsConfigForm">
|
|
|
|
|
<!-- BASIC Tab -->
|
|
|
|
|
<div id="seasonals-basic" class="tab-content">
|
|
|
|
|
<div id="seasonals-basic" class="seasonals-tab-content">
|
|
|
|
|
<h2 class="sectionTitle">Main Plugin Settings</h2>
|
|
|
|
|
<div class="checkboxContainer checkboxContainer-withDescription">
|
|
|
|
|
<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>
|
|
|
|
|
</label>
|
|
|
|
|
<div class="fieldDescription">Enable or disable the entire plugin functionality.</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkboxContainer checkboxContainer-withDescription">
|
|
|
|
|
<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>
|
|
|
|
|
</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>
|
|
|
|
|
<div class="selectContainer">
|
|
|
|
|
<label class="selectLabel" for="SelectedSeason">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;">
|
|
|
|
|
<label class="selectLabel" for="SeasonalsSelectedSeason">Standard Season</label>
|
|
|
|
|
<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="snowflakes">Snowflakes</option>
|
|
|
|
|
<option value="snowfall">Snowfall</option>
|
|
|
|
|
@@ -78,7 +79,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkboxContainer checkboxContainer-withDescription">
|
|
|
|
|
<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>
|
|
|
|
|
</label>
|
|
|
|
|
<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 +87,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 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;">
|
|
|
|
|
<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>
|
|
|
|
|
@@ -103,10 +104,11 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Advanced Tab -->
|
|
|
|
|
<div id="seasonals-advanced" class="tab-content" style="display: none;">
|
|
|
|
|
<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>
|
|
|
|
|
<details>
|
|
|
|
|
<div id="seasonals-advanced" class="seasonals-tab-content" style="display: none;">
|
|
|
|
|
<h2 class="sectionTitle">Configure specific settings for each seasonal theme</h2>
|
|
|
|
|
<!-- <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>
|
|
|
|
|
<details>
|
|
|
|
|
<summary>Autumn</summary>
|
|
|
|
|
<div class="checkboxContainer checkboxContainer-withDescription">
|
|
|
|
|
<label class="emby-checkbox-label">
|
|
|
|
|
@@ -622,7 +624,7 @@
|
|
|
|
|
.date-range-group {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 800px) {
|
|
|
|
|
.seasonal-rule-content {
|
|
|
|
|
@@ -631,22 +633,22 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Styles for the Tabs */
|
|
|
|
|
.jellyfin-tab-button.active {
|
|
|
|
|
.seasonals-tab-button.active {
|
|
|
|
|
color: #fff !important;
|
|
|
|
|
border-bottom: 2px solid #00a4dc !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Disabled options in selects */
|
|
|
|
|
/* Disabled options in selects
|
|
|
|
|
select option:disabled {
|
|
|
|
|
color: #a3a3a3 !important;
|
|
|
|
|
}
|
|
|
|
|
} */
|
|
|
|
|
</style>
|
|
|
|
|
<script>
|
|
|
|
|
function showTab(tabId, btn) {
|
|
|
|
|
document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
|
|
|
|
|
function showSeasonalsTab(tabId, btn) {
|
|
|
|
|
document.querySelectorAll('.seasonals-tab-content').forEach(el => el.style.display = 'none');
|
|
|
|
|
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.style.color = '#ccc';
|
|
|
|
|
b.style.borderBottom = '2px solid transparent';
|
|
|
|
|
@@ -672,7 +674,7 @@
|
|
|
|
|
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 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 class="seasonal-rule-header">
|
|
|
|
|
@@ -686,44 +688,44 @@
|
|
|
|
|
<div class="seasonal-rule-content">
|
|
|
|
|
<div class="inputContainer" style="margin:0;">
|
|
|
|
|
<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 class="date-range-group">
|
|
|
|
|
<div class="inputContainer" style="margin:0;">
|
|
|
|
|
<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 class="inputContainer" style="margin:0;">
|
|
|
|
|
<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 class="date-range-group">
|
|
|
|
|
<div class="inputContainer" style="margin:0;">
|
|
|
|
|
<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 class="inputContainer" style="margin:0;">
|
|
|
|
|
<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 class="selectContainer" style="margin:0;">
|
|
|
|
|
<label class="selectLabel">Theme</label>
|
|
|
|
|
<select is="emby-select" class="rule-theme" style="width: 100%;">
|
|
|
|
|
<option value="none" ${theme === 'none' ? 'selected' : ''}>None</option>
|
|
|
|
|
<option value="snowflakes" ${theme === 'snowflakes' ? 'selected' : ''}>Snowflakes</option>
|
|
|
|
|
<option value="snowfall" ${theme === 'snowfall' ? 'selected' : ''}>Snowfall</option>
|
|
|
|
|
<option value="snowstorm" ${theme === 'snowstorm' ? 'selected' : ''}>Snowstorm</option>
|
|
|
|
|
<option value="fireworks" ${theme === 'fireworks' ? 'selected' : ''}>Fireworks</option>
|
|
|
|
|
<option value="halloween" ${theme === 'halloween' ? 'selected' : ''}>Halloween</option>
|
|
|
|
|
<option value="hearts" ${theme === 'hearts' ? 'selected' : ''}>Hearts</option>
|
|
|
|
|
<option value="christmas" ${theme === 'christmas' ? 'selected' : ''}>Christmas</option>
|
|
|
|
|
<option value="santa" ${theme === 'santa' ? 'selected' : ''}>Santa</option>
|
|
|
|
|
<option value="autumn" ${theme === 'autumn' ? 'selected' : ''}>Autumn</option>
|
|
|
|
|
<option value="easter" ${theme === 'easter' ? 'selected' : ''}>Easter</option>
|
|
|
|
|
<option value="none">None</option>
|
|
|
|
|
<option value="snowflakes">Snowflakes</option>
|
|
|
|
|
<option value="snowfall">Snowfall</option>
|
|
|
|
|
<option value="snowstorm">Snowstorm</option>
|
|
|
|
|
<option value="fireworks">Fireworks</option>
|
|
|
|
|
<option value="halloween">Halloween</option>
|
|
|
|
|
<option value="hearts">Hearts</option>
|
|
|
|
|
<option value="christmas">Christmas</option>
|
|
|
|
|
<option value="santa">Santa</option>
|
|
|
|
|
<option value="autumn">Autumn</option>
|
|
|
|
|
<option value="easter">Easter</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -731,6 +733,14 @@
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
div.querySelector('.btn-remove').addEventListener('click', function() {
|
|
|
|
|
div.remove();
|
|
|
|
|
@@ -775,10 +785,10 @@
|
|
|
|
|
.addEventListener('pageshow', function() {
|
|
|
|
|
Dashboard.showLoadingMsg();
|
|
|
|
|
ApiClient.getPluginConfiguration(SeasonalsConfigPage.pluginUniqueId).then(function (config) {
|
|
|
|
|
document.querySelector('#IsEnabled').checked = config.IsEnabled;
|
|
|
|
|
document.querySelector('#SelectedSeason').value = config.SelectedSeason;
|
|
|
|
|
document.querySelector('#AutomateSeasonSelection').checked = config.AutomateSeasonSelection;
|
|
|
|
|
document.querySelector('#EnableClientSideToggle').checked = config.EnableClientSideToggle !== undefined ? config.EnableClientSideToggle : true;
|
|
|
|
|
document.querySelector('#SeasonalsIsEnabled').checked = config.IsEnabled;
|
|
|
|
|
document.querySelector('#SeasonalsSelectedSeason').value = config.SelectedSeason;
|
|
|
|
|
document.querySelector('#SeasonalsAutomateSeasonSelection').checked = config.AutomateSeasonSelection;
|
|
|
|
|
document.querySelector('#SeasonalsEnableClientSideToggle').checked = config.EnableClientSideToggle !== undefined ? config.EnableClientSideToggle : true;
|
|
|
|
|
|
|
|
|
|
// Load Rules
|
|
|
|
|
try {
|
|
|
|
|
@@ -888,10 +898,10 @@
|
|
|
|
|
.addEventListener('submit', function(e) {
|
|
|
|
|
Dashboard.showLoadingMsg();
|
|
|
|
|
ApiClient.getPluginConfiguration(SeasonalsConfigPage.pluginUniqueId).then(function (config) {
|
|
|
|
|
config.IsEnabled = document.querySelector('#IsEnabled').checked;
|
|
|
|
|
config.SelectedSeason = document.querySelector('#SelectedSeason').value;
|
|
|
|
|
config.AutomateSeasonSelection = document.querySelector('#AutomateSeasonSelection').checked;
|
|
|
|
|
config.EnableClientSideToggle = document.querySelector('#EnableClientSideToggle').checked;
|
|
|
|
|
config.IsEnabled = document.querySelector('#SeasonalsIsEnabled').checked;
|
|
|
|
|
config.SelectedSeason = document.querySelector('#SeasonalsSelectedSeason').value;
|
|
|
|
|
config.AutomateSeasonSelection = document.querySelector('#SeasonalsAutomateSeasonSelection').checked;
|
|
|
|
|
config.EnableClientSideToggle = document.querySelector('#SeasonalsEnableClientSideToggle').checked;
|
|
|
|
|
|
|
|
|
|
// Save Rules
|
|
|
|
|
config.SeasonalRules = JSON.stringify(SeasonalsConfigPage.getRulesFromUI());
|
|
|
|
|
@@ -989,8 +999,8 @@
|
|
|
|
|
|
|
|
|
|
ApiClient.updatePluginConfiguration(SeasonalsConfigPage.pluginUniqueId, config).then(function (result) {
|
|
|
|
|
Dashboard.processPluginConfigurationUpdateResult(result);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
return false;
|
|
|
|
|
|
