CodeDevMLH/Jellyfin-Seasonals-Plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity
Files
c66ccf970eee7767d5b5e06a8131f9f2e88774e4
Jellyfin-Seasonals-Plugin/Jellyfin.Plugin.Seasonals/Configuration/configPage.html

2171 lines
166 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Seasonals Configuration</title>
</head>
<body>
<div id="SeasonalsConfigPage" data-role="page" class="page type-interior pluginConfigurationPage" data-require="emby-input,emby-button,emby-select,emby-checkbox">
<div data-role="content">
<div class="content-primary">
<div class="sectionTitleContainer">
<h2 class="sectionTitle">Seasonals Configuration</h2>
<a is="emby-linkbutton" class="raised raised-mini emby-button" style="margin-left: 2em;"
target="_blank" href="https://github.com/CodeDevMLH/Jellyfin-Seasonals">
<i class="md-icon button-icon button-icon-left secondaryText"></i>
<span>${Help}</span>
</a>
</div>
<hr style="max-width: 800px; margin: 1em 0;">
<div style="margin-bottom: 1.5em;">
<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="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="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>
</div>
<form id="SeasonalsConfigForm">
<!-- BASIC Tab -->
<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="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="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="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>
<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 (flying santa & snowfall)</option>
<option value="autumn">Autumn (falling leaves)</option>
<option value="easter">Easter</option>
<option value="summer">Summer (Bubbles)</option>
<option value="spring">Spring</option>
<option value="carnival">Carnival (Confetti)</option>
<option value="cherryblossom">Cherry Blossom</option>
<option value="resurrection">Resurrection by Bioflash257</option>
<option value="championships" disabled>European/World Championships (not implemented yet. Please commit ideas/implementation in a issue or PR)</option>
<option value="patrick" disabled>St. Patrick's Day (not implemented yet. Please commit ideas/implementation in a issue or PR)</option>
<option value="thanksgiving" disabled>Thanksgiving (not implemented yet. Please commit ideas/implementation in a issue or PR)</option>
<option value="earthday">Earth Day (Growing Vines)</option>
<option value="eurovision">Eurovision (Dancing Notes)</option>
<option value="oscar">Oscar Awards (Glamour & Flashes)</option>
<option value="piday">Pi-Day (Matrix Rain)</option>
<option value="pride">Pride (Rainbow Border)</option>
<option value="rain">Rain (Pure Rain)</option>
<option value="storm">Storm (Heavy Rain & Lightning (Epilepsy Warning!))</option>
<option value="frost">Frost / Ice</option>
<option value="filmnoir">Film-Noir (Classic B&W Cinema)</option>
<option value="marioday">Mario Day (March 10)</option>
<option value="starwars">Star Wars Day (May 4th)</option>
<option value="oktoberfest">Oktoberfest</option>
<option value="friday13">Friday the 13th</option>
<option value="eid">Eid al-Fitr</option>
<option value="legacyhalloween">Legacy Halloween</option>
</select>
<div class="fieldDescription">The season to display if automation is disabled or no "Auto Selection" rule matches the current date.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<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>
</div>
</div>
<!-- Auto Selection Tab -->
<div id="seasonals-auto-selection" class="seasonals-tab-content" style="display: none;">
<h2>Auto Selection Rules</h2>
<div style="background-color: rgba(255, 255, 255, 0.05); border-left: 4px solid #00a4dc; border-radius: 4px; padding: 1em 1.5em; margin: 1.5em 0; display: flex; align-items: center; gap: 1em;">
<i class="material-icons" style="color: #00a4dc; font-size: 24px;">info</i>
<div>Define rules to automatically select a season based on the date. Rules are evaluated from top to bottom. The first matching rule wins.</div>
</div>
<div id="seasonalRulesList">
<!-- Rules will be injected here via JS -->
</div>
<button is="emby-button" type="button" class="raised emby-button" onclick="SeasonalsConfigPage.addRule();"
style="margin-top: 1em; display: inline-flex; align-items: center; gap: 0.4em;">
<i class="material-icons" style="font-size: 24px;">add</i>
<span>Add Rule</span>
</button>
</div>
<!-- Advanced Tab -->
<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">
<input id="EnableAutumn" name="EnableAutumn" type="checkbox" is="emby-checkbox" />
<span>Enable Autumn Seasonal</span>
</label>
<div class="fieldDescription">Enable the autumn theme effects in general (e.g. for automation).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomLeaves" name="EnableRandomLeaves" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Leaves</span>
</label>
<div class="fieldDescription">Displays additional leaves randomly distributed across the screen</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomLeavesMobile" name="EnableRandomLeavesMobile" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Leaves on Mobile</span>
</label>
<div class="fieldDescription">Displays additional leaves randomly distributed across the screen on mobile devices. Warning: High values may affect performance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="AutumnLeafCount">Leaf Count</label>
<input is="emby-input" type="number" id="AutumnLeafCount" name="AutumnLeafCount" />
<div class="fieldDescription">Number of additional leaves displayed on screen (if enabled)</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableDifferentDurationAutumn" name="EnableDifferentDurationAutumn" type="checkbox" is="emby-checkbox" />
<span>Enable Different Duration</span>
</label>
<div class="fieldDescription">Randomize the falling speed of each leaf.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRotation" name="EnableRotation" type="checkbox" is="emby-checkbox" />
<span>Enable Rotation</span>
</label>
<div class="fieldDescription">Rotate leaves as they fall. Notice: May affect performance</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Snowflakes</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableSnowflakes" name="EnableSnowflakes" type="checkbox" is="emby-checkbox" />
<span>Enable Snowflakes Seasonal</span>
</label>
<div class="fieldDescription">Enable the snowflakes theme in general (e.g. for automation).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomSnowflakes" name="EnableRandomSnowflakes" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Snowflakes</span>
</label>
<div class="fieldDescription">Displays additional snowflakes randomly distributed across the screen.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomSnowflakesMobile" name="EnableRandomSnowflakesMobile" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Snowflakes on Mobile</span>
</label>
<div class="fieldDescription">Displays additional snowflakes randomly distributed across the screen on mobile devices. Warning: High values may affect performance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SnowflakesCount">Snowflake Count</label>
<input is="emby-input" type="number" id="SnowflakesCount" name="SnowflakesCount" />
<div class="fieldDescription">Number of additional snowflakes displayed (if enabled).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableColoredSnowflakes" name="EnableColoredSnowflakes" type="checkbox" is="emby-checkbox" />
<span>Enable Colored Snowflakes</span>
</label>
<div class="fieldDescription">Display snowflakes in different colors/shapes.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableDifferentDurationSnowflakes" name="EnableDifferentDurationSnowflakes" type="checkbox" is="emby-checkbox" />
<span>Enable Different Duration</span>
</label>
<div class="fieldDescription">Randomize the falling speed of snowflakes.</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Snowfall</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableSnowfall" name="EnableSnowfall" type="checkbox" is="emby-checkbox" />
<span>Enable Snowfall Seasonal</span>
</label>
<div class="fieldDescription">Enable the snowfall effect in general (e.g. for automation).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SnowfallCount">Snowflake Count</label>
<input is="emby-input" type="number" id="SnowfallCount" name="SnowfallCount" />
<div class="fieldDescription">Total number of snowflakes for the snowfall effect (recommended values: 300 - 600).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SnowfallCountMobile">Snowflake Count (Mobile)</label>
<input is="emby-input" type="number" id="SnowfallCountMobile" name="SnowfallCountMobile" />
<div class="fieldDescription">Total number of snowflakes on mobile devices. Warning: High values may affect performance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SnowfallSpeed">Speed</label>
<input is="emby-input" type="number" id="SnowfallSpeed" name="SnowfallSpeed" step="0.1" />
<div class="fieldDescription">The speed of the snowfall animation (recommended values: 0 - 5).</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Snowstorm</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableSnowstorm" name="EnableSnowstorm" type="checkbox" is="emby-checkbox" />
<span>Enable Snowstorm Seasonal</span>
</label>
<div class="fieldDescription">Enable the snowstorm effect in general (e.g. for automation).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SnowstormCount">Snowflake Count</label>
<input is="emby-input" type="number" id="SnowstormCount" name="SnowstormCount" />
<div class="fieldDescription">Total number of snowflakes in the storm (recommended values: 300 - 600).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SnowstormCountMobile">Snowflake Count (Mobile)</label>
<input is="emby-input" type="number" id="SnowstormCountMobile" name="SnowstormCountMobile" />
<div class="fieldDescription">Total number of snowflakes on mobile devices. Warning: High values may affect performance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SnowstormSpeed">Speed</label>
<input is="emby-input" type="number" id="SnowstormSpeed" name="SnowstormSpeed" step="0.1" />
<div class="fieldDescription">The speed of the snowstorm (falling).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SnowstormHorizontalWind">Horizontal Wind</label>
<input is="emby-input" type="number" id="SnowstormHorizontalWind" name="SnowstormHorizontalWind" step="0.1" />
<div class="fieldDescription">Strength of the horizontal wind effect (recommended values: 3 - 6).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SnowstormVerticalVariation">Vertical Variation</label>
<input is="emby-input" type="number" id="SnowstormVerticalVariation" name="SnowstormVerticalVariation" step="0.1" />
<div class="fieldDescription">Amount of vertical movement variation (recommended values: 1 - 3).</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Fireworks</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableFireworks" name="EnableFireworks" type="checkbox" is="emby-checkbox" />
<span>Enable Fireworks Seasonal</span>
</label>
<div class="fieldDescription">Enable the fireworks effect in general (e.g. for automation).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="FireworksParticles">Particle Count</label>
<input is="emby-input" type="number" id="FireworksParticles" name="FireworksParticles" />
<div class="fieldDescription">Number of particles per firework explosion. Warning: High values may affect performance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="FireworksInterval">Launch Interval (ms)</label>
<input is="emby-input" type="number" id="FireworksInterval" name="FireworksInterval" />
<div class="fieldDescription">Time in milliseconds between firework launches.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="ScrollFireworks" name="ScrollFireworks" type="checkbox" is="emby-checkbox" />
<span>Scroll Fireworks</span>
</label>
<div class="fieldDescription">Allow fireworks to scroll with the page.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="MinFireworks">Min Fireworks</label>
<input is="emby-input" type="number" id="MinFireworks" name="MinFireworks" />
<div class="fieldDescription">Minimum number of concurrent fireworks.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="MaxFireworks">Max Fireworks</label>
<input is="emby-input" type="number" id="MaxFireworks" name="MaxFireworks" />
<div class="fieldDescription">Maximum number of concurrent fireworks.</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Halloween</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableHalloween" name="EnableHalloween" type="checkbox" is="emby-checkbox" />
<span>Enable Halloween Seasonal</span>
</label>
<div class="fieldDescription">Enable the Halloween theme in general (e.g. for automation).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomHalloween" name="EnableRandomHalloween" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Symbols</span>
</label>
<div class="fieldDescription">Displays additional Halloween symbols randomly distributed across the screen.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomHalloweenMobile" name="EnableRandomHalloweenMobile" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Symbols on Mobile</span>
</label>
<div class="fieldDescription">Displays additional Halloween symbols randomly distributed across the screen on mobile devices. Warning: High values may affect performance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="HalloweenCount">Symbol Count</label>
<input is="emby-input" type="number" id="HalloweenCount" name="HalloweenCount" />
<div class="fieldDescription">Number of additional Halloween symbols (pumpkins, ghosts, etc.) on screen (if enabled).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableDifferentDurationHalloween" name="EnableDifferentDurationHalloween" type="checkbox" is="emby-checkbox" />
<span>Enable Different Duration</span>
</label>
<div class="fieldDescription">Randomize the movement speed.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableSpiders" name="EnableSpiders" type="checkbox" is="emby-checkbox" />
<span>Enable Spiders</span>
</label>
<div class="fieldDescription">Show dropping spiders that retract on hover.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableMice" name="EnableMice" type="checkbox" is="emby-checkbox" />
<span>Enable Mice</span>
</label>
<div class="fieldDescription">Show scurrying mice at the bottom.</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Legacy Halloween</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableLegacyHalloween" name="EnableLegacyHalloween" type="checkbox" is="emby-checkbox" />
<span>Enable Legacy Halloween Seasonal</span>
</label>
<div class="fieldDescription">Enable the classic Halloween theme (only floating symbols, no fog/spiders).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="LegacyHalloweenCount">Symbol Count</label>
<input is="emby-input" type="number" id="LegacyHalloweenCount" name="LegacyHalloweenCount" />
<div class="fieldDescription">Number of floating symbols.</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Hearts</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableHearts" name="EnableHearts" type="checkbox" is="emby-checkbox" />
<span>Enable Hearts Seasonal</span>
</label>
<div class="fieldDescription">Enable the Hearts theme in general (e.g. for automation).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomHearts" name="EnableRandomHearts" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Symbols</span>
</label>
<div class="fieldDescription">Displays additional hearts randomly distributed across the screen.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomHeartsMobile" name="EnableRandomHeartsMobile" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Symbols on Mobile</span>
</label>
<div class="fieldDescription">Displays additional hearts randomly distributed across the screen. on mobile devices. Warning: High values may affect performance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="HeartsCount">Symbol Count</label>
<input is="emby-input" type="number" id="HeartsCount" name="HeartsCount" />
<div class="fieldDescription">Number of additional floating hearts.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableDifferentDurationHearts" name="EnableDifferentDurationHearts" type="checkbox" is="emby-checkbox" />
<span>Enable Different Duration</span>
</label>
<div class="fieldDescription">Randomize the floating speed.</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Christmas</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableChristmas" name="EnableChristmas" type="checkbox" is="emby-checkbox" />
<span>Enable Christmas Seasonal</span>
</label>
<div class="fieldDescription">Enable the Christmas theme in general (e.g. for automation).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomChristmas" name="EnableRandomChristmas" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Christmas</span>
</label>
<div class="fieldDescription">Displays additional Christmas-themed icons randomly distributed across the screen.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomChristmasMobile" name="EnableRandomChristmasMobile" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Christmas on Mobile</span>
</label>
<div class="fieldDescription">Displays additional Christmas-themed icons randomly distributed across the screen on mobile devices. Warning: High values may affect performance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="ChristmasCount">Symbol Count</label>
<input is="emby-input" type="number" id="ChristmasCount" name="ChristmasCount" />
<div class="fieldDescription">Number of additional Christmas symbols.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableDifferentDurationChristmas" name="EnableDifferentDurationChristmas" type="checkbox" is="emby-checkbox" />
<span>Enable Different Duration</span>
</label>
<div class="fieldDescription">Randomize the movement speed.</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Santa</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableSanta" name="EnableSanta" type="checkbox" is="emby-checkbox" />
<span>Enable Santa Seasonal</span>
</label>
<div class="fieldDescription">Enable the Santa theme in general (e.g. for automation).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SantaSnowflakes">Snowflakes Count</label>
<input is="emby-input" type="number" id="SantaSnowflakes" name="SantaSnowflakes" />
<div class="fieldDescription">Number of snowflakes accompanying Santa (recommended values: 300-600).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SantaSnowflakesMobile">Snowflakes Count (Mobile)</label>
<input is="emby-input" type="number" id="SantaSnowflakesMobile" name="SantaSnowflakesMobile" />
<div class="fieldDescription">Number of snowflakes accompanying Santa on mobile devices. Warning: High values may affect performance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SantaSpeed">Santa Speed (seconds)</label>
<input is="emby-input" type="number" id="SantaSpeed" name="SantaSpeed" step="0.1" />
<div class="fieldDescription">Time in seconds for Santa to cross the screen (recommended values: 5 - 15).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SantaSpeedMobile">Santa Speed Mobile (seconds)</label>
<input is="emby-input" type="number" id="SantaSpeedMobile" name="SantaSpeedMobile" step="0.1" />
<div class="fieldDescription">Time in seconds for Santa to cross the screen on mobile (recommended values: 3 - 12).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SantaSnowFallSpeed">Snowfall Speed</label>
<input is="emby-input" type="number" id="SantaSnowFallSpeed" name="SantaSnowFallSpeed" step="0.1" />
<div class="fieldDescription">Speed of the falling snow (recommended values: 0-5).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="MaxSantaRestTime">Max Santa Rest Time (seconds)</label>
<input is="emby-input" type="number" id="MaxSantaRestTime" name="MaxSantaRestTime" step="0.1" />
<div class="fieldDescription">Maximum time Santa waits before appearing again.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="MinSantaRestTime">Min Santa Rest Time (seconds)</label>
<input is="emby-input" type="number" id="MinSantaRestTime" name="MinSantaRestTime" step="0.1" />
<div class="fieldDescription">Minimum time Santa waits before appearing again.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="MaxPresentFallSpeed">Max Present Fall Speed (seconds)</label>
<input is="emby-input" type="number" id="MaxPresentFallSpeed" name="MaxPresentFallSpeed" step="0.1" />
<div class="fieldDescription">Maximum speed of falling presents.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="MinPresentFallSpeed">Min Present Fall Speed (seconds)</label>
<input is="emby-input" type="number" id="MinPresentFallSpeed" name="MinPresentFallSpeed" step="0.1" />
<div class="fieldDescription">Minimum speed of falling presents.</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Easter</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableEaster" name="EnableEaster" type="checkbox" is="emby-checkbox" />
<span>Enable Easter Seasonal</span>
</label>
<div class="fieldDescription">Enable the Easter theme in general (e.g. for automation).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomEaster" name="EnableRandomEaster" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Easter Eggs</span>
</label>
<div class="fieldDescription">Displays additional easter eggs randomly distributed across the screen.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomEasterMobile" name="EnableRandomEasterMobile" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Easter Eggs on Mobile</span>
</label>
<div class="fieldDescription">Displays additional easter eggs randomly distributed across the screen on mobile devices. Warning: High values may affect performance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="EasterEggCount">Egg Count</label>
<input is="emby-input" type="number" id="EasterEggCount" name="EasterEggCount" />
<div class="fieldDescription">Number of additional Easter eggs (if enabled).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableDifferentDurationEaster" name="EnableDifferentDurationEaster" type="checkbox" is="emby-checkbox" />
<span>Enable Different Duration</span>
</label>
<div class="fieldDescription">Randomize the movement speed.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EasterBunny" name="EasterBunny" type="checkbox" is="emby-checkbox" />
<span>Enable Bunny</span>
</label>
<div class="fieldDescription">Show the Easter Bunny hopping across the screen.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="BunnyDuration">Bunny Duration (ms)</label>
<input is="emby-input" type="number" id="BunnyDuration" name="BunnyDuration" />
<div class="fieldDescription">Time in milliseconds for one hop cycle.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="HopHeight">Hop Height (px)</label>
<input is="emby-input" type="number" id="HopHeight" name="HopHeight" />
<div class="fieldDescription">Height of the bunny's hop in pixels.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="MinBunnyRestTime">Min Bunny Rest Time (ms)</label>
<input is="emby-input" type="number" id="MinBunnyRestTime" name="MinBunnyRestTime" />
<div class="fieldDescription">Minimum time the bunny waits before appearing again.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="MaxBunnyRestTime">Max Bunny Rest Time (ms)</label>
<input is="emby-input" type="number" id="MaxBunnyRestTime" name="MaxBunnyRestTime" />
<div class="fieldDescription">Maximum time the bunny waits before appearing again.</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Resurrection</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableResurrection" name="EnableResurrection" type="checkbox" is="emby-checkbox" />
<span>Enable Resurrection Seasonal</span>
</label>
<div class="fieldDescription">Enable the Resurrection theme in general (e.g. for automation).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomResurrection" name="EnableRandomResurrection" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Symbols</span>
</label>
<div class="fieldDescription">Displays additional symbols randomly distributed across the screen.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomResurrectionMobile" name="EnableRandomResurrectionMobile" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Symbols on Mobile</span>
</label>
<div class="fieldDescription">Displays additional symbols randomly distributed across the screen on mobile devices. Warning: High values may affect performance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="ResurrectionSymbolCount">Symbol Count</label>
<input is="emby-input" type="number" id="ResurrectionSymbolCount" name="ResurrectionSymbolCount" />
<div class="fieldDescription">Number of additional symbols (if enabled).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableDifferentDurationResurrection" name="EnableDifferentDurationResurrection" type="checkbox" is="emby-checkbox" />
<span>Enable Different Duration</span>
</label>
<div class="fieldDescription">Randomize the movement speed.</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Spring</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableSpring" name="EnableSpring" type="checkbox" is="emby-checkbox" />
<span class="checkboxLabel">Enable Spring</span>
</label>
<div class="fieldDescription">Enables the Spring theme (grass, pollen).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomSpring" name="EnableRandomSpring" type="checkbox" is="emby-checkbox" />
<span>Enable Animation Assets</span>
</label>
<div class="fieldDescription">Enables animated spring assets (birds, butterflies, bees, etc.).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomSpringMobile" name="EnableRandomSpringMobile" type="checkbox" is="emby-checkbox" />
<span>Enable Animation Assets on Mobile</span>
</label>
<div class="fieldDescription">Displays animated assets on mobile devices. Warning: High values may affect performance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SpringPollenCount">Pollen Count</label>
<input is="emby-input" type="number" id="SpringPollenCount" name="SpringPollenCount" />
<div class="fieldDescription">Number of pollen particles (if enabled).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SpringSunbeamCount">Sunbeam Count</label>
<input is="emby-input" type="number" id="SpringSunbeamCount" name="SpringSunbeamCount" />
<div class="fieldDescription">Number of sunbeams (if enabled).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableSpringSunbeams" name="EnableSpringSunbeams" type="checkbox" is="emby-checkbox" />
<span>Enable Sunbeams</span>
</label>
<div class="fieldDescription">Display sunbeams at the top of the screen.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SpringBirdCount">Bird Count</label>
<input is="emby-input" type="number" id="SpringBirdCount" name="SpringBirdCount" />
<div class="fieldDescription">Number of birds flying across the screen.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SpringButterflyCount">Butterfly Count</label>
<input is="emby-input" type="number" id="SpringButterflyCount" name="SpringButterflyCount" />
<div class="fieldDescription">Number of butterflies.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SpringBeeCount">Bee Count</label>
<input is="emby-input" type="number" id="SpringBeeCount" name="SpringBeeCount" />
<div class="fieldDescription">Number of bees.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SpringLadybugCount">Ladybug Count</label>
<input is="emby-input" type="number" id="SpringLadybugCount" name="SpringLadybugCount" />
<div class="fieldDescription">Number of ladybugs walking along the bottom.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableDifferentDurationSpring" name="EnableDifferentDurationSpring" type="checkbox" is="emby-checkbox" />
<span>Enable Different Duration</span>
</label>
<div class="fieldDescription">Randomize the animations duration.</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Summer</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableSummer" name="EnableSummer" type="checkbox" is="emby-checkbox" />
<span>Enable Summer Seasonal</span>
</label>
<div class="fieldDescription">Enable the Summer theme in general (e.g. for automation).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomSummer" name="EnableRandomSummer" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Bubbles and Dust</span>
</label>
<div class="fieldDescription">Displays additional bubbles and dust particles rising across the screen.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomSummerMobile" name="EnableRandomSummerMobile" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Bubbles and Dust on Mobile</span>
</label>
<div class="fieldDescription">Displays additional bubbles and dust particles rising across the screen on mobile devices. Warning: High values may affect performance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SummerBubbleCount">Bubbles Count</label>
<input is="emby-input" type="number" id="SummerBubbleCount" name="SummerBubbleCount" />
<div class="fieldDescription">Number of bubbles (if enabled).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SummerDustCount">Dust Count</label>
<input is="emby-input" type="number" id="SummerDustCount" name="SummerDustCount" />
<div class="fieldDescription">Number of dust particles (if enabled).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableDifferentDurationSummer" name="EnableDifferentDurationSummer" type="checkbox" is="emby-checkbox" />
<span>Enable Different Rising Speed</span>
</label>
<div class="fieldDescription">Randomize the rising speed of bubbles.</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Carnival</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableCarnival" name="EnableCarnival" type="checkbox" is="emby-checkbox" />
<span>Enable Carnival Seasonal</span>
</label>
<div class="fieldDescription">Enable the Carnival theme in general (e.g. for automation).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomCarnival" name="EnableRandomCarnival" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Confetti</span>
</label>
<div class="fieldDescription">Displays additional confetti falling and fluttering across the screen.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomCarnivalMobile" name="EnableRandomCarnivalMobile" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Confetti on Mobile</span>
</label>
<div class="fieldDescription">Displays additional confetti falling and fluttering across the screen on mobile devices. Warning: High values may affect performance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="CarnivalObjectCount">Confetti Count</label>
<input is="emby-input" type="number" id="CarnivalObjectCount" name="CarnivalObjectCount" />
<div class="fieldDescription">Number of additional confetti pieces (if enabled).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableDifferentDurationCarnival" name="EnableDifferentDurationCarnival" type="checkbox" is="emby-checkbox" />
<span>Enable Different Falling Speed</span>
</label>
<div class="fieldDescription">Randomize the falling speed of confetti.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableCarnivalSway" name="EnableCarnivalSway" type="checkbox" is="emby-checkbox" />
<span>Enable Sway</span>
</label>
<div class="fieldDescription">Enable sway animation for carnival confetti.</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Cherry Blossom</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableCherryBlossom" name="EnableCherryBlossom" type="checkbox" is="emby-checkbox" />
<span>Enable Cherry Blossom Seasonal</span>
</label>
<div class="fieldDescription">Enable the Cherry Blossom theme in general (e.g. for automation).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomCherryBlossom" name="EnableRandomCherryBlossom" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Cherry Blossoms</span>
</label>
<div class="fieldDescription">Displays additional cherry blossoms falling and fluttering across the screen.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomCherryBlossomMobile" name="EnableRandomCherryBlossomMobile" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Cherry Blossoms on Mobile</span>
</label>
<div class="fieldDescription">Displays additional cherry blossoms falling and fluttering across the screen on mobile devices. Warning: High values may affect performance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="CherryBlossomPetalCount">Petal Count</label>
<input is="emby-input" type="number" id="CherryBlossomPetalCount" name="CherryBlossomPetalCount" />
<div class="fieldDescription">Number of additional cherry blossoms (if enabled).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableDifferentDurationCherryBlossom" name="EnableDifferentDurationCherryBlossom" type="checkbox" is="emby-checkbox" />
<span>Enable Different Falling Speed</span>
</label>
<div class="fieldDescription">Randomize the falling speed of cherry blossoms.</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Earth Day</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableEarthDay" name="EnableEarthDay" type="checkbox" is="emby-checkbox" />
<span>Enable Earth Day Seasonal</span>
</label>
<div class="fieldDescription">Enable the Earth Day theme in general (e.g. for automation).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="EarthDayVineCount">Vine Count</label>
<input is="emby-input" type="number" id="EarthDayVineCount" name="EarthDayVineCount" />
<div class="fieldDescription">Number of animated vines (if enabled).</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Legacy Halloween</summary>
<div class="inputContainer">
<label class="inputLabel" for="LegacyHalloweenSymbolCount">Symbol Count</label>
<input is="emby-input" type="number" id="LegacyHalloweenSymbolCount" name="LegacyHalloweenSymbolCount" />
<div class="fieldDescription">Number of additional halloween symbols displayed (if enabled).</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Sports</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableSports" name="EnableSports" type="checkbox" is="emby-checkbox" />
<span>Enable Sports Seasonal</span>
</label>
<div class="fieldDescription">Enable the sports theme effects in general (e.g. for automation).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomSymbolsSports" name="EnableRandomSymbolsSports" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Sports Symbols</span>
</label>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomSymbolsMobileSports" name="EnableRandomSymbolsMobileSports" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Sports Symbols on Mobile</span>
</label>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SportsSymbolCount">Symbol Count</label>
<input is="emby-input" type="number" id="SportsSymbolCount" name="SportsSymbolCount" />
<div class="fieldDescription">Number of additional symbols displayed (if enabled).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableDifferentDurationSports" name="EnableDifferentDurationSports" type="checkbox" is="emby-checkbox" />
<span>Enable Different Duration</span>
</label>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Olympia</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableOlympia" name="EnableOlympia" type="checkbox" is="emby-checkbox" />
<span>Enable Olympia Seasonal</span>
</label>
<div class="fieldDescription">Enable the olympia theme effects in general (e.g. for automation).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomSymbolsOlympia" name="EnableRandomSymbolsOlympia" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Olympia Symbols</span>
</label>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomSymbolsMobileOlympia" name="EnableRandomSymbolsMobileOlympia" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Olympia Symbols on Mobile</span>
</label>
</div>
<div class="inputContainer">
<label class="inputLabel" for="OlympiaSymbolCount">Symbol Count</label>
<input is="emby-input" type="number" id="OlympiaSymbolCount" name="OlympiaSymbolCount" />
<div class="fieldDescription">Number of additional symbols displayed (if enabled).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableDifferentDurationOlympia" name="EnableDifferentDurationOlympia" type="checkbox" is="emby-checkbox" />
<span>Enable Different Duration</span>
</label>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Space</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableSpace" name="EnableSpace" type="checkbox" is="emby-checkbox" />
<span>Enable Space Seasonal</span>
</label>
<div class="fieldDescription">Enable the space theme effects in general (e.g. for automation).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomSymbolsSpace" name="EnableRandomSymbolsSpace" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Space Symbols</span>
</label>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomSymbolsMobileSpace" name="EnableRandomSymbolsMobileSpace" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Space Symbols on Mobile</span>
</label>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SpaceSymbolCount">Symbol Count</label>
<input is="emby-input" type="number" id="SpaceSymbolCount" name="SpaceSymbolCount" />
<div class="fieldDescription">Number of additional symbols displayed (if enabled).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableDifferentDurationSpace" name="EnableDifferentDurationSpace" type="checkbox" is="emby-checkbox" />
<span>Enable Different Duration</span>
</label>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Underwater</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableUnderwater" name="EnableUnderwater" type="checkbox" is="emby-checkbox" />
<span>Enable Underwater Seasonal</span>
</label>
<div class="fieldDescription">Enable the underwater theme effects in general (e.g. for automation).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomSymbolsUnderwater" name="EnableRandomSymbolsUnderwater" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Underwater Symbols</span>
</label>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomSymbolsMobileUnderwater" name="EnableRandomSymbolsMobileUnderwater" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Underwater Symbols on Mobile</span>
</label>
</div>
<div class="inputContainer">
<label class="inputLabel" for="UnderwaterSymbolCount">Symbol Count</label>
<input is="emby-input" type="number" id="UnderwaterSymbolCount" name="UnderwaterSymbolCount" />
<div class="fieldDescription">Number of additional symbols displayed (if enabled).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableDifferentDurationUnderwater" name="EnableDifferentDurationUnderwater" type="checkbox" is="emby-checkbox" />
<span>Enable Different Duration</span>
</label>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Birthday</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableBirthday" name="EnableBirthday" type="checkbox" is="emby-checkbox" />
<span>Enable Birthday Seasonal</span>
</label>
<div class="fieldDescription">Enable the birthday theme effects in general (e.g. for automation).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomSymbolsBirthday" name="EnableRandomSymbolsBirthday" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Birthday Symbols</span>
</label>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomSymbolsMobileBirthday" name="EnableRandomSymbolsMobileBirthday" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Birthday Symbols on Mobile</span>
</label>
</div>
<div class="inputContainer">
<label class="inputLabel" for="BirthdaySymbolCount">Symbol Count</label>
<input is="emby-input" type="number" id="BirthdaySymbolCount" name="BirthdaySymbolCount" />
<div class="fieldDescription">Number of additional symbols displayed (if enabled).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableDifferentDurationBirthday" name="EnableDifferentDurationBirthday" type="checkbox" is="emby-checkbox" />
<span>Enable Different Duration</span>
</label>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Eurovision / Musik</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableEurovision" name="EnableEurovision" type="checkbox" is="emby-checkbox" />
<span>Enable Eurovision Seasonal</span>
</label>
<div class="fieldDescription">Enable the Eurovision/Music theme in general (e.g. for automation).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomEurovision" name="EnableRandomEurovision" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Music Notes</span>
</label>
<div class="fieldDescription">Displays dancing music notes.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomEurovisionMobile" name="EnableRandomEurovisionMobile" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Music Notes on Mobile</span>
</label>
<div class="fieldDescription">Displays dancing music notes on mobile devices. Warning: High values may affect performance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="EurovisionSymbolCount">Symbol Count</label>
<input is="emby-input" type="number" id="EurovisionSymbolCount" name="EurovisionSymbolCount" />
<div class="fieldDescription">Number of additional dancing music notes (if enabled).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableDifferentDurationEurovision" name="EnableDifferentDurationEurovision" type="checkbox" is="emby-checkbox" />
<span>Enable Different Falling Speed</span>
</label>
<div class="fieldDescription">Randomize the movement speed of music notes.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableColorfulNotes" name="EnableColorfulNotes" type="checkbox" is="emby-checkbox" />
<span>Colorful Notes Mode</span>
</label>
<div class="fieldDescription">If checked, notes will pick colors from the array below. If unchecked, notes will be white.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="EurovisionColors">Color Array (Comma-separated)</label>
<input is="emby-input" type="text" id="EurovisionColors" name="EurovisionColors" />
<div class="fieldDescription">Example: #FFB6C1,#87CEFA,#98FB98 (Hex or CSS colors separated by commas).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="EurovisionGlowSize">Note Glow/Shadow Size (px)</label>
<input is="emby-input" type="number" id="EurovisionGlowSize" name="EurovisionGlowSize" />
<div class="fieldDescription">Set the text-shadow size of the notes. Set this to 0 to remove the shadow/glow completely.</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Pi-Day</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnablePiDay" name="EnablePiDay" type="checkbox" is="emby-checkbox" />
<span>Enable Pi-Day Seasonal</span>
</label>
<div class="fieldDescription">Enable the Pi-Day theme in general (e.g. for automation).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomPiDay" name="EnableRandomPiDay" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Pi Symbols</span>
</label>
<div class="fieldDescription">Displays additional digital rain elements.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomPiDayMobile" name="EnableRandomPiDayMobile" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Pi Symbols on Mobile</span>
</label>
<div class="fieldDescription">Displays additional digital rain elements on mobile devices. Warning: High values may affect performance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="PiDaySymbolCount">Symbol Count</label>
<input is="emby-input" type="number" id="PiDaySymbolCount" name="PiDaySymbolCount" />
<div class="fieldDescription">Number of additional digital rain columns (if enabled).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableDifferentDurationPiDay" name="EnableDifferentDurationPiDay" type="checkbox" is="emby-checkbox" />
<span>Enable Different Falling Speed</span>
</label>
<div class="fieldDescription">Randomize the digital rain falling speed.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnablePiDayBackground" name="EnablePiDayBackground" type="checkbox" is="emby-checkbox" />
<span>Background Mode (Behind UI)</span>
</label>
<div class="fieldDescription">Displays the Pi-Day animation behind library tiles and content.</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Pride</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnablePride" name="EnablePride" type="checkbox" is="emby-checkbox" />
<span>Enable Pride Seasonal</span>
</label>
<div class="fieldDescription">Enable the Pride theme in general (e.g. for automation).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="PrideHeartCount">Heart Count</label>
<input is="emby-input" type="number" id="PrideHeartCount" name="PrideHeartCount" />
<div class="fieldDescription">Number of rising rainbow hearts.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="PrideHeartSize">Heart Size (rem)</label>
<input is="emby-input" type="number" id="PrideHeartSize" name="PrideHeartSize" step="0.1" />
<div class="fieldDescription">Base size of the Pride hearts (default 2).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="PrideConfettiCount">Confetti Count</label>
<input is="emby-input" type="number" id="PrideConfettiCount" name="PrideConfettiCount" />
<div class="fieldDescription">Number of falling rainbow confetti pieces.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="PrideColorHeader" name="PrideColorHeader" type="checkbox" is="emby-checkbox" />
<span>Rainbow Header</span>
</label>
<div class="fieldDescription">Color the top navigation bar with a rainbow gradient.</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Rain (Pure)</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRain" name="EnableRain" type="checkbox" is="emby-checkbox" />
<span>Enable Rain Seasonal</span>
</label>
<div class="fieldDescription">Enable the pure Rain theme.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="RaindropCount">Raindrop Count</label>
<input is="emby-input" type="number" id="RaindropCount" name="RaindropCount" />
<div class="fieldDescription">Total number of raindrops.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="RaindropCountMobile">Raindrop Count (Mobile)</label>
<input is="emby-input" type="number" id="RaindropCountMobile" name="RaindropCountMobile" />
<div class="fieldDescription">Total number of raindrops on mobile devices.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="RainSpeed">Rain Speed</label>
<input is="emby-input" type="number" id="RainSpeed" name="RainSpeed" step="0.1" />
<div class="fieldDescription">The speed of the falling rain.</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Storm</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableStorm" name="EnableStorm" type="checkbox" is="emby-checkbox" />
<span>Enable Storm Seasonal</span>
</label>
<div class="fieldDescription">Enable the Storm theme in general (e.g. for automation).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="StormRaindropCount">Raindrop Count</label>
<input is="emby-input" type="number" id="StormRaindropCount" name="StormRaindropCount" />
<div class="fieldDescription">Total number of raindrops in the storm.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="StormRaindropCountMobile">Raindrop Count (Mobile)</label>
<input is="emby-input" type="number" id="StormRaindropCountMobile" name="StormRaindropCountMobile" />
<div class="fieldDescription">Total number of raindrops on mobile devices. Warning: High values may affect performance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="StormRainSpeed">Rain Speed</label>
<input is="emby-input" type="number" id="StormRainSpeed" name="StormRainSpeed" step="0.1" />
<div class="fieldDescription">The speed of the falling rain.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="StormEnableLightning" name="StormEnableLightning" type="checkbox" is="emby-checkbox" />
<span>Enable Lightning Flashes</span>
</label>
<div class="fieldDescription">Periodically flash the screen white to simulate lightning.</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Frost / Ice</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableFrost" name="EnableFrost" type="checkbox" is="emby-checkbox" />
<span>Enable Frost Seasonal</span>
</label>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Film-Noir</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableFilmNoir" name="EnableFilmNoir" type="checkbox" is="emby-checkbox" />
<span>Enable Film-Noir Seasonal</span>
</label>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Oscar Awards</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableOscar" name="EnableOscar" type="checkbox" is="emby-checkbox" />
<span>Enable Oscar Awards Seasonal</span>
</label>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Mario Day</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableMarioDay" name="EnableMarioDay" type="checkbox" is="emby-checkbox" />
<span>Enable Mario Day Seasonal</span>
</label>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Star Wars Day</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableStarWars" name="EnableStarWars" type="checkbox" is="emby-checkbox" />
<span>Enable Star Wars Seasonal</span>
</label>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Oktoberfest</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableOktoberfest" name="EnableOktoberfest" type="checkbox" is="emby-checkbox" />
<span>Enable Oktoberfest Seasonal</span>
</label>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Friday the 13th</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableFriday13" name="EnableFriday13" type="checkbox" is="emby-checkbox" />
<span>Enable Friday the 13th Seasonal</span>
</label>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Zuckerfest (Eid)</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableEid" name="EnableEid" type="checkbox" is="emby-checkbox" />
<span>Enable Eid al-Fitr Seasonal</span>
</label>
</div>
</details>
</div>
<div style="background-color: rgba(255, 255, 255, 0.05); border-left: 4px solid #00a4dc; border-radius: 4px; padding: 1em 1.5em; margin: 1.5em 0; display: flex; align-items: center; gap: 1em;">
<i class="material-icons" style="color: #00a4dc; font-size: 24px;">info</i>
<div>
All changes require a page refresh (ctrl + r or F5) after saving for changes to take effect. <br/>
If old settings persist, please force clear browser cache.
</div>
</div>
<div>
<button is="emby-button" type="submit" class="raised button-submit block emby-button">
<span>${Save}</span>
</button>
<button is="emby-button" type="button" class="raised button-cancel block btnCancel" onclick="history.back();">
<span>${ButtonCancel}</span>
</button>
</div>
</form>
</div>
</div>
<style>
/* Styles for the Seasonal Rules List (Auto Selection Tab) */
.seasonal-rule {
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
display: flex;
flex-direction: column;
gap: 10px;
border: 1px solid rgba(255,255,255,0.05);
}
.seasonal-rule-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.seasonal-rule-content {
display: grid;
grid-template-columns: 2fr 1.3fr 1.3fr 2fr;
gap: 15px;
align-items: end;
}
.rule-actions {
display: flex;
gap: 5px;
}
.date-range-group {
display: flex;
gap: 10px;
align-items: flex-end;
justify-content: space-between;
}
.date-range-group > .inputContainer,
.date-range-group > .selectContainer {
flex: 1;
}
@media (max-width: 800px) {
.seasonal-rule-content {
grid-template-columns: 1fr;
}
}
/* Styles for the Tabs */
.seasonals-tab-button.active {
color: #fff !important;
border-bottom: 2px solid #00a4dc !important;
}
/* Disabled options in selects */
select option:disabled {
color: #a3a3a3 !important;
}
</style>
<script>
function showSeasonalsTab(tabId, btn) {
document.querySelectorAll('.seasonals-tab-content').forEach(el => el.style.display = 'none');
document.getElementById(tabId).style.display = 'block';
document.querySelectorAll('.seasonals-tab-button').forEach(b => {
b.classList.remove('active');
b.style.color = '#ccc';
b.style.borderBottom = '2px solid transparent';
});
if (btn) {
btn.classList.add('active');
btn.style.color = '#fff';
btn.style.borderBottom = '2px solid #00a4dc';
}
}
var SeasonalsConfigPage = {
pluginUniqueId: 'ef1e863f-cbb0-4e47-9f23-f0cbb1826ad4',
addRule: function(data = null) {
var container = document.querySelector('#seasonalRulesList');
var div = document.createElement('div');
div.className = 'seasonal-rule';
var name = data ? (data.Name || data.name || 'New Rule') : 'New Rule';
var startDay = data ? (data.StartDay !== undefined ? data.StartDay : (data.startDay !== undefined ? data.startDay : 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 endMonth = data ? (data.EndMonth !== undefined ? data.EndMonth : (data.endMonth !== undefined ? data.endMonth : 1)) : 1;
var theme = data ? (data.Theme || data.theme || 'none') : 'none';
var days = [];
for (var i = 1; i <= 31; i++) days.push(i);
var months = [
{ v: 1, n: 'Jan' }, { v: 2, n: 'Feb' }, { v: 3, n: 'Mar' }, { v: 4, n: 'Apr' },
{ v: 5, n: 'May' }, { v: 6, n: 'Jun' }, { v: 7, n: 'Jul' }, { v: 8, n: 'Aug' },
{ v: 9, n: 'Sep' }, { v: 10, n: 'Oct' }, { v: 11, n: 'Nov' }, { v: 12, n: 'Dec' }
];
// Build select HTML via string concatenation to avoid Jellyfin's ${} localization processing
function mkSelect(val, opts, cls) {
var h = '<select class="emby-select emby-select-withcolor ' + cls + '" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">';
opts.forEach(function(o) {
var v = o.v || o;
var n = o.n || o;
h += '<option value="' + v + '" ' + (v == val ? 'selected' : '') + '>' + n + '</option>';
});
h += '</select>';
return h;
}
div.innerHTML =
'<div class="seasonal-rule-header">' +
' <div style="font-weight: bold; font-size: 1.1em;" class="rule-title"></div>' +
' <div class="rule-actions">' +
' <button type="button" is="paper-icon-button-light" class="btn-move-up" title="Move Up"><i class="material-icons">arrow_upward</i></button>' +
' <button type="button" is="paper-icon-button-light" class="btn-move-down" title="Move Down"><i class="material-icons">arrow_downward</i></button>' +
' <button type="button" is="paper-icon-button-light" class="btn-remove" title="Remove"><i class="material-icons">delete</i></button>' +
' </div>' +
'</div>' +
'<div class="seasonal-rule-content">' +
' <div class="inputContainer" style="margin:0;">' +
' <label class="inputLabel">Name</label>' +
' <input is="emby-input" class="rule-name" onchange="SeasonalsConfigPage.updateRuleTitles();" />' +
' </div>' +
' <div class="date-range-group">' +
' <div class="selectContainer" style="margin:0; flex: 1;">' +
' <label class="selectLabel">Start Day</label>' +
mkSelect(startDay, days, 'rule-start-day') +
' </div>' +
' <div class="selectContainer" style="margin:0; flex: 1;">' +
' <label class="selectLabel">Month</label>' +
mkSelect(startMonth, months, 'rule-start-month') +
' </div>' +
' </div>' +
' <div class="date-range-group">' +
' <div class="selectContainer" style="margin:0; flex: 1;">' +
' <label class="selectLabel">End Day</label>' +
mkSelect(endDay, days, 'rule-end-day') +
' </div>' +
' <div class="selectContainer" style="margin:0; flex: 1;">' +
' <label class="selectLabel">Month</label>' +
mkSelect(endMonth, months, 'rule-end-month') +
' </div>' +
' </div>' +
' <div class="selectContainer" style="margin:0;">' +
' <label class="selectLabel">Theme</label>' +
' <select class="emby-select emby-select-withcolor rule-theme" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">' +
' <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 (flying santa & snowfall)</option>' +
' <option value="autumn">Autumn (falling leaves)</option>' +
' <option value="easter">Easter</option>' +
' <option value="summer">Summer (Bubbles)</option>' +
' <option value="spring">Spring</option>' +
' <option value="carnival">Carnival (Confetti)</option>' +
' <option value="cherryblossom">Cherry Blossom</option>' +
' <option value="earthday">Earth Day</option>' +
' <option value="eurovision">Eurovision</option>' +
' <option value="piday">Pi-Day</option>' +
' <option value="pride">Pride</option>' +
' <option value="rain">Rain</option>' +
' <option value="storm">Storm (Epilepsy Warning!)</option>' +
' <option value="resurrection">Resurrection by Bioflash257</option>' +
' <option value="frost">Frost / Ice</option>' +
' <option value="filmnoir">Film-Noir</option>' +
' <option value="oscar">Oscar Awards</option>' +
' <option value="marioday">Mario Day</option>' +
' <option value="starwars">Star Wars Day</option>' +
' <option value="oktoberfest">Oktoberfest</option>' +
' <option value="friday13">Friday the 13th</option>' +
' <option value="eid">Eid al-Fitr</option>' +
' <option value="legacyhalloween">Legacy Halloween</option>' +
' </select>' +
' </div>' +
'</div>';
container.appendChild(div);
// Set values programmatically
div.querySelector('.rule-name').value = name;
div.querySelector('.rule-theme').value = theme;
// Bind events
div.querySelector('.btn-remove').addEventListener('click', function() {
div.remove();
SeasonalsConfigPage.updateRuleTitles();
});
div.querySelector('.btn-move-up').addEventListener('click', function() {
if (div.previousElementSibling) {
container.insertBefore(div, div.previousElementSibling);
SeasonalsConfigPage.updateRuleTitles();
}
});
div.querySelector('.btn-move-down').addEventListener('click', function() {
if (div.nextElementSibling) {
container.insertBefore(div.nextElementSibling, div);
SeasonalsConfigPage.updateRuleTitles();
}
});
this.updateRuleTitles();
},
updateRuleTitles: function() {
var rules = document.querySelectorAll('.seasonal-rule');
rules.forEach((rule, index) => {
var name = rule.querySelector('.rule-name').value;
rule.querySelector('.rule-title').innerText = '#' + (index + 1) + ' ' + name;
});
},
renderRules: function(rules) {
var container = document.querySelector('#seasonalRulesList');
container.innerHTML = '';
if (Array.isArray(rules)) {
rules.forEach(rule => this.addRule(rule));
}
},
getRulesFromUI: function() {
var rules = [];
document.querySelectorAll('.seasonal-rule').forEach(div => {
rules.push({
Name: div.querySelector('.rule-name').value,
StartDay: parseInt(div.querySelector('.rule-start-day').value),
StartMonth: parseInt(div.querySelector('.rule-start-month').value),
EndDay: parseInt(div.querySelector('.rule-end-day').value),
EndMonth: parseInt(div.querySelector('.rule-end-month').value),
Theme: div.querySelector('.rule-theme').value
});
});
return rules;
}
};
document.querySelector('#SeasonalsConfigPage')
.addEventListener('pageshow', function() {
Dashboard.showLoadingMsg();
ApiClient.getPluginConfiguration(SeasonalsConfigPage.pluginUniqueId).then(function (config) {
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 {
var rules = JSON.parse(config.SeasonalRules || "[]");
SeasonalsConfigPage.renderRules(rules);
} catch (e) {
console.error("Failed to parse SeasonalRules", e);
}
// Advanced Config
// Autumn
document.querySelector('#EnableAutumn').checked = config.Autumn.EnableAutumn;
document.querySelector('#AutumnLeafCount').value = config.Autumn.LeafCount;
document.querySelector('#EnableRandomLeaves').checked = config.Autumn.EnableRandomLeaves;
document.querySelector('#EnableRandomLeavesMobile').checked = config.Autumn.EnableRandomLeavesMobile;
document.querySelector('#EnableDifferentDurationAutumn').checked = config.Autumn.EnableDifferentDuration;
document.querySelector('#EnableRotation').checked = config.Autumn.EnableRotation;
// Snowflakes
document.querySelector('#SnowflakesCount').value = config.Snowflakes.SnowflakeCount;
document.querySelector('#EnableSnowflakes').checked = config.Snowflakes.EnableSnowflakes;
document.querySelector('#EnableRandomSnowflakes').checked = config.Snowflakes.EnableRandomSnowflakes;
document.querySelector('#EnableRandomSnowflakesMobile').checked = config.Snowflakes.EnableRandomSnowflakesMobile;
document.querySelector('#EnableColoredSnowflakes').checked = config.Snowflakes.EnableColoredSnowflakes;
document.querySelector('#EnableDifferentDurationSnowflakes').checked = config.Snowflakes.EnableDifferentDuration;
// Snowfall
document.querySelector('#EnableSnowfall').checked = config.Snowfall.EnableSnowfall;
document.querySelector('#SnowfallCount').value = config.Snowfall.SnowflakesCount;
document.querySelector('#SnowfallCountMobile').value = config.Snowfall.SnowflakesCountMobile;
document.querySelector('#SnowfallSpeed').value = config.Snowfall.Speed;
// Snowstorm
document.querySelector('#EnableSnowstorm').checked = config.Snowstorm.EnableSnowstorm;
document.querySelector('#SnowstormCount').value = config.Snowstorm.SnowflakesCount;
document.querySelector('#SnowstormCountMobile').value = config.Snowstorm.SnowflakesCountMobile;
document.querySelector('#SnowstormSpeed').value = config.Snowstorm.Speed;
document.querySelector('#SnowstormHorizontalWind').value = config.Snowstorm.HorizontalWind;
document.querySelector('#SnowstormVerticalVariation').value = config.Snowstorm.VerticalVariation;
// Fireworks
document.querySelector('#EnableFireworks').checked = config.Fireworks.EnableFireworks;
document.querySelector('#FireworksParticles').value = config.Fireworks.ParticleCount;
document.querySelector('#FireworksInterval').value = config.Fireworks.LaunchInterval;
document.querySelector('#ScrollFireworks').checked = config.Fireworks.ScrollFireworks;
document.querySelector('#MinFireworks').value = config.Fireworks.MinFireworks;
document.querySelector('#MaxFireworks').value = config.Fireworks.MaxFireworks;
// Eid
document.querySelector('#EidSymbolCount').value = config.Eid.SymbolCount || 25;
// Legacy Halloween
document.querySelector('#LegacyHalloweenSymbolCount').value = config.LegacyHalloween.SymbolCount || 25;
// Sports
document.querySelector('#EnableSports').checked = config.Sports.EnableSports || false;
document.querySelector('#EnableRandomSymbolsSports').checked = config.Sports.EnableRandomSymbols || false;
document.querySelector('#EnableRandomSymbolsMobileSports').checked = config.Sports.EnableRandomSymbolsMobile || false;
document.querySelector('#EnableDifferentDurationSports').checked = config.Sports.EnableDifferentDuration || false;
document.querySelector('#SportsSymbolCount').value = config.Sports.SymbolCount || 25;
// Olympia
document.querySelector('#EnableOlympia').checked = config.Olympia.EnableOlympia || false;
document.querySelector('#EnableRandomSymbolsOlympia').checked = config.Olympia.EnableRandomSymbols || false;
document.querySelector('#EnableRandomSymbolsMobileOlympia').checked = config.Olympia.EnableRandomSymbolsMobile || false;
document.querySelector('#EnableDifferentDurationOlympia').checked = config.Olympia.EnableDifferentDuration || false;
document.querySelector('#OlympiaSymbolCount').value = config.Olympia.SymbolCount || 25;
// Space
document.querySelector('#EnableSpace').checked = config.Space.EnableSpace || false;
document.querySelector('#EnableRandomSymbolsSpace').checked = config.Space.EnableRandomSymbols || false;
document.querySelector('#EnableRandomSymbolsMobileSpace').checked = config.Space.EnableRandomSymbolsMobile || false;
document.querySelector('#EnableDifferentDurationSpace').checked = config.Space.EnableDifferentDuration || false;
document.querySelector('#SpaceSymbolCount').value = config.Space.SymbolCount || 25;
// Underwater
document.querySelector('#EnableUnderwater').checked = config.Underwater.EnableUnderwater || false;
document.querySelector('#EnableRandomSymbolsUnderwater').checked = config.Underwater.EnableRandomSymbols || false;
document.querySelector('#EnableRandomSymbolsMobileUnderwater').checked = config.Underwater.EnableRandomSymbolsMobile || false;
document.querySelector('#EnableDifferentDurationUnderwater').checked = config.Underwater.EnableDifferentDuration || false;
document.querySelector('#UnderwaterSymbolCount').value = config.Underwater.SymbolCount || 15;
// Birthday
document.querySelector('#EnableBirthday').checked = config.Birthday.EnableBirthday || false;
document.querySelector('#EnableRandomSymbolsBirthday').checked = config.Birthday.EnableRandomSymbols || false;
document.querySelector('#EnableRandomSymbolsMobileBirthday').checked = config.Birthday.EnableRandomSymbolsMobile || false;
document.querySelector('#EnableDifferentDurationBirthday').checked = config.Birthday.EnableDifferentDuration || false;
document.querySelector('#BirthdaySymbolCount').value = config.Birthday.SymbolCount || 25;
// Halloween
document.querySelector('#EnableHalloween').checked = config.Halloween.EnableHalloween;
document.querySelector('#HalloweenCount').value = config.Halloween.SymbolCount;
document.querySelector('#EnableRandomHalloween').checked = config.Halloween.EnableRandomSymbols;
document.querySelector('#EnableRandomHalloweenMobile').checked = config.Halloween.EnableRandomSymbolsMobile;
document.querySelector('#EnableDifferentDurationHalloween').checked = config.Halloween.EnableDifferentDuration;
document.querySelector('#EnableSpiders').checked = config.Halloween.EnableSpiders !== undefined ? config.Halloween.EnableSpiders : true;
document.querySelector('#EnableMice').checked = config.Halloween.EnableMice !== undefined ? config.Halloween.EnableMice : true;
// Hearts
document.querySelector('#EnableHearts').checked = config.Hearts.EnableHearts;
document.querySelector('#HeartsCount').value = config.Hearts.SymbolCount;
document.querySelector('#EnableRandomHearts').checked = config.Hearts.EnableRandomSymbols;
document.querySelector('#EnableRandomHeartsMobile').checked = config.Hearts.EnableRandomSymbolsMobile;
document.querySelector('#EnableDifferentDurationHearts').checked = config.Hearts.EnableDifferentDuration;
// Christmas
document.querySelector('#EnableChristmas').checked = config.Christmas.EnableChristmas;
document.querySelector('#ChristmasCount').value = config.Christmas.SymbolCount;
document.querySelector('#EnableRandomChristmas').checked = config.Christmas.EnableRandomChristmas;
document.querySelector('#EnableRandomChristmasMobile').checked = config.Christmas.EnableRandomChristmasMobile;
document.querySelector('#EnableDifferentDurationChristmas').checked = config.Christmas.EnableDifferentDuration;
// Santa
document.querySelector('#EnableSanta').checked = config.Santa.EnableSanta;
document.querySelector('#SantaSnowflakes').value = config.Santa.SnowflakesCount;
document.querySelector('#SantaSnowflakesMobile').value = config.Santa.SnowflakesCountMobile;
document.querySelector('#SantaSpeed').value = config.Santa.SantaSpeed;
document.querySelector('#SantaSpeedMobile').value = config.Santa.SantaSpeedMobile;
document.querySelector('#SantaSnowFallSpeed').value = config.Santa.SnowFallSpeed;
document.querySelector('#MaxSantaRestTime').value = config.Santa.MaxSantaRestTime;
document.querySelector('#MinSantaRestTime').value = config.Santa.MinSantaRestTime;
document.querySelector('#MaxPresentFallSpeed').value = config.Santa.MaxPresentFallSpeed;
document.querySelector('#MinPresentFallSpeed').value = config.Santa.MinPresentFallSpeed;
// Easter
document.querySelector('#EnableEaster').checked = config.Easter.EnableEaster;
document.querySelector('#EasterEggCount').value = config.Easter.EggCount;
document.querySelector('#EnableRandomEaster').checked = config.Easter.EnableRandomEaster;
document.querySelector('#EnableRandomEasterMobile').checked = config.Easter.EnableRandomEasterMobile;
document.querySelector('#EnableDifferentDurationEaster').checked = config.Easter.EnableDifferentDuration;
document.querySelector('#EasterBunny').checked = config.Easter.EnableBunny;
document.querySelector('#BunnyDuration').value = config.Easter.BunnyDuration;
document.querySelector('#HopHeight').value = config.Easter.HopHeight;
document.querySelector('#MinBunnyRestTime').value = config.Easter.MinBunnyRestTime;
document.querySelector('#MaxBunnyRestTime').value = config.Easter.MaxBunnyRestTime;
// Resurrection
document.querySelector('#EnableResurrection').checked = config.Resurrection.EnableResurrection;
document.querySelector('#ResurrectionSymbolCount').value = config.Resurrection.SymbolCount;
document.querySelector('#EnableRandomResurrection').checked = config.Resurrection.EnableRandomSymbols;
document.querySelector('#EnableRandomResurrectionMobile').checked = config.Resurrection.EnableRandomSymbolsMobile;
document.querySelector('#EnableDifferentDurationResurrection').checked = config.Resurrection.EnableDifferentDuration;
// Spring
document.querySelector('#EnableSpring').checked = config.Spring.EnableSpring;
document.querySelector('#EnableSpringSunbeams').checked = config.Spring.EnableSpringSunbeams !== undefined ? config.Spring.EnableSpringSunbeams : true;
document.querySelector('#SpringPollenCount').value = config.Spring.PollenCount;
document.querySelector('#SpringSunbeamCount').value = config.Spring.SunbeamCount;
document.querySelector('#SpringBirdCount').value = config.Spring.BirdCount !== undefined ? config.Spring.BirdCount : 3;
document.querySelector('#SpringButterflyCount').value = config.Spring.ButterflyCount !== undefined ? config.Spring.ButterflyCount : 2;
document.querySelector('#SpringBeeCount').value = config.Spring.BeeCount !== undefined ? config.Spring.BeeCount : 1;
document.querySelector('#SpringLadybugCount').value = config.Spring.LadybugCount !== undefined ? config.Spring.LadybugCount : 1;
document.querySelector('#EnableRandomSpring').checked = config.Spring.EnableRandomSpring;
document.querySelector('#EnableRandomSpringMobile').checked = config.Spring.EnableRandomSpringMobile;
document.querySelector('#EnableDifferentDurationSpring').checked = config.Spring.EnableDifferentDuration;
// Summer
document.querySelector('#EnableSummer').checked = config.Summer.EnableSummer;
document.querySelector('#SummerBubbleCount').value = config.Summer.BubbleCount;
document.querySelector('#SummerDustCount').value = config.Summer.DustCount;
document.querySelector('#EnableRandomSummer').checked = config.Summer.EnableRandomSummer;
document.querySelector('#EnableRandomSummerMobile').checked = config.Summer.EnableRandomSummerMobile;
document.querySelector('#EnableDifferentDurationSummer').checked = config.Summer.EnableDifferentDuration;
// Carnival
document.querySelector('#EnableCarnival').checked = config.Carnival.EnableCarnival;
document.querySelector('#EnableCarnivalSway').checked = config.Carnival.EnableCarnivalSway !== undefined ? config.Carnival.EnableCarnivalSway : true;
document.querySelector('#CarnivalObjectCount').value = config.Carnival.ObjectCount;
document.querySelector('#EnableRandomCarnival').checked = config.Carnival.EnableRandomCarnival;
document.querySelector('#EnableRandomCarnivalMobile').checked = config.Carnival.EnableRandomCarnivalMobile;
document.querySelector('#EnableDifferentDurationCarnival').checked = config.Carnival.EnableDifferentDuration;
// Cherry Blossom
document.querySelector('#EnableCherryBlossom').checked = config.CherryBlossom.EnableCherryBlossom;
document.querySelector('#CherryBlossomPetalCount').value = config.CherryBlossom.PetalCount;
document.querySelector('#EnableRandomCherryBlossom').checked = config.CherryBlossom.EnableRandomCherryBlossom;
document.querySelector('#EnableRandomCherryBlossomMobile').checked = config.CherryBlossom.EnableRandomCherryBlossomMobile;
document.querySelector('#EnableDifferentDurationCherryBlossom').checked = config.CherryBlossom.EnableDifferentDuration;
// Earth Day
document.querySelector('#EnableEarthDay').checked = config.EarthDay.EnableEarthDay;
document.querySelector('#EarthDayVineCount').value = config.EarthDay.VineCount;
// Eurovision
document.querySelector('#EnableEurovision').checked = config.Eurovision.EnableEurovision;
document.querySelector('#EurovisionSymbolCount').value = config.Eurovision.SymbolCount;
document.querySelector('#EnableRandomEurovision').checked = config.Eurovision.EnableRandomEurovision;
document.querySelector('#EnableRandomEurovisionMobile').checked = config.Eurovision.EnableRandomEurovisionMobile;
document.querySelector('#EnableDifferentDurationEurovision').checked = config.Eurovision.EnableDifferentDuration;
document.querySelector('#EnableColorfulNotes').checked = config.Eurovision.EnableColorfulNotes;
document.querySelector('#EurovisionColors').value = config.Eurovision.EurovisionColors;
document.querySelector('#EurovisionGlowSize').value = config.Eurovision.EurovisionGlowSize;
// Pi-Day
document.querySelector('#EnablePiDay').checked = config.PiDay.EnablePiDay;
document.querySelector('#PiDaySymbolCount').value = config.PiDay.SymbolCount;
document.querySelector('#EnableRandomPiDay').checked = config.PiDay.EnableRandomPiDay;
document.querySelector('#EnableRandomPiDayMobile').checked = config.PiDay.EnableRandomPiDayMobile;
document.querySelector('#EnableDifferentDurationPiDay').checked = config.PiDay.EnableDifferentDuration;
document.querySelector('#EnablePiDayBackground').checked = config.PiDay.EnablePiDayBackground !== undefined ? config.PiDay.EnablePiDayBackground : false;
// Pride
document.querySelector('#EnablePride').checked = config.Pride.EnablePride;
document.querySelector('#PrideHeartCount').value = config.Pride.HeartCount;
document.querySelector('#PrideHeartSize').value = config.Pride.HeartSize;
document.querySelector('#PrideColorHeader').checked = config.Pride.ColorHeader;
// Legacy Halloween
document.querySelector('#EnableLegacyHalloween').checked = config.LegacyHalloween.EnableLegacyHalloween !== undefined ? config.LegacyHalloween.EnableLegacyHalloween : true;
document.querySelector('#LegacyHalloweenCount').value = config.LegacyHalloween.SymbolCount !== undefined ? config.LegacyHalloween.SymbolCount : 25;
// Rain
document.querySelector('#EnableRain').checked = config.Rain.EnableRain;
document.querySelector('#RaindropCount').value = config.Rain.RaindropCount;
document.querySelector('#RaindropCountMobile').value = config.Rain.RaindropCountMobile;
document.querySelector('#RainSpeed').value = config.Rain.RainSpeed;
// Storm
document.querySelector('#EnableStorm').checked = config.Storm.EnableStorm;
document.querySelector('#StormRaindropCount').value = config.Storm.RaindropCount;
document.querySelector('#StormRaindropCountMobile').value = config.Storm.RaindropCountMobile;
document.querySelector('#StormRainSpeed').value = config.Storm.RainSpeed;
document.querySelector('#StormEnableLightning').checked = config.Storm.EnableLightning;
Dashboard.hideLoadingMsg();
});
});
document.querySelector('#SeasonalsConfigForm')
.addEventListener('submit', function(e) {
Dashboard.showLoadingMsg();
ApiClient.getPluginConfiguration(SeasonalsConfigPage.pluginUniqueId).then(function (config) {
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());
// Advanced Config
// Autumn
config.Autumn.EnableAutumn = document.querySelector('#EnableAutumn').checked;
config.Autumn.LeafCount = parseInt(document.querySelector('#AutumnLeafCount').value);
config.Autumn.EnableRandomLeaves = document.querySelector('#EnableRandomLeaves').checked;
config.Autumn.EnableRandomLeavesMobile = document.querySelector('#EnableRandomLeavesMobile').checked;
config.Autumn.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationAutumn').checked;
config.Autumn.EnableRotation = document.querySelector('#EnableRotation').checked;
// Friday13
if (!config.Friday13) config.Friday13 = {};
config.Friday13.EnableFriday13 = document.querySelector('#EnableFriday13').checked;
config.Friday13.SymbolCount = parseInt(document.querySelector('#Friday13SymbolCount').value);
config.Friday13.EnableRandomSymbols = document.querySelector('#EnableRandomFriday13').checked;
config.Friday13.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomFriday13Mobile').checked;
config.Friday13.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationFriday13').checked;
// Eid
if (!config.Eid) config.Eid = {};
config.Eid.EnableEid = document.querySelector('#EnableEid').checked;
config.Eid.EnableRandomSymbols = document.querySelector('#EnableRandomEid').checked;
config.Eid.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomEidMobile').checked;
config.Eid.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationEid').checked;
config.Eid.SymbolCount = parseInt(document.querySelector('#EidSymbolCount').value);
// Legacy Halloween
if (!config.LegacyHalloween) config.LegacyHalloween = {};
config.LegacyHalloween.SymbolCount = parseInt(document.querySelector('#LegacyHalloweenSymbolCount').value);
// Sports
if (!config.Sports) config.Sports = {};
config.Sports.EnableSports = document.querySelector('#EnableSports').checked;
config.Sports.EnableRandomSymbols = document.querySelector('#EnableRandomSymbolsSports').checked;
config.Sports.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileSports').checked;
config.Sports.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationSports').checked;
config.Sports.SymbolCount = parseInt(document.querySelector('#SportsSymbolCount').value);
// Olympia
if (!config.Olympia) config.Olympia = {};
config.Olympia.EnableOlympia = document.querySelector('#EnableOlympia').checked;
config.Olympia.EnableRandomSymbols = document.querySelector('#EnableRandomSymbolsOlympia').checked;
config.Olympia.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileOlympia').checked;
config.Olympia.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationOlympia').checked;
config.Olympia.SymbolCount = parseInt(document.querySelector('#OlympiaSymbolCount').value);
// Space
if (!config.Space) config.Space = {};
config.Space.EnableSpace = document.querySelector('#EnableSpace').checked;
config.Space.EnableRandomSymbols = document.querySelector('#EnableRandomSymbolsSpace').checked;
config.Space.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileSpace').checked;
config.Space.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationSpace').checked;
config.Space.SymbolCount = parseInt(document.querySelector('#SpaceSymbolCount').value);
// Underwater
if (!config.Underwater) config.Underwater = {};
config.Underwater.EnableUnderwater = document.querySelector('#EnableUnderwater').checked;
config.Underwater.EnableRandomSymbols = document.querySelector('#EnableRandomSymbolsUnderwater').checked;
config.Underwater.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileUnderwater').checked;
config.Underwater.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationUnderwater').checked;
config.Underwater.SymbolCount = parseInt(document.querySelector('#UnderwaterSymbolCount').value);
// Birthday
if (!config.Birthday) config.Birthday = {};
config.Birthday.EnableBirthday = document.querySelector('#EnableBirthday').checked;
config.Birthday.EnableRandomSymbols = document.querySelector('#EnableRandomSymbolsBirthday').checked;
config.Birthday.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileBirthday').checked;
config.Birthday.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationBirthday').checked;
config.Birthday.SymbolCount = parseInt(document.querySelector('#BirthdaySymbolCount').value);
// Snowflakes
config.Snowflakes.SnowflakeCount = parseInt(document.querySelector('#SnowflakesCount').value);
config.Snowflakes.EnableSnowflakes = document.querySelector('#EnableSnowflakes').checked;
config.Snowflakes.EnableRandomSnowflakes = document.querySelector('#EnableRandomSnowflakes').checked;
config.Snowflakes.EnableRandomSnowflakesMobile = document.querySelector('#EnableRandomSnowflakesMobile').checked;
config.Snowflakes.EnableColoredSnowflakes = document.querySelector('#EnableColoredSnowflakes').checked;
config.Snowflakes.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationSnowflakes').checked;
// Snowfall
config.Snowfall.EnableSnowfall = document.querySelector('#EnableSnowfall').checked;
config.Snowfall.SnowflakesCount = parseInt(document.querySelector('#SnowfallCount').value);
config.Snowfall.SnowflakesCountMobile = parseInt(document.querySelector('#SnowfallCountMobile').value);
config.Snowfall.Speed = parseFloat(document.querySelector('#SnowfallSpeed').value);
// Snowstorm
config.Snowstorm.EnableSnowstorm = document.querySelector('#EnableSnowstorm').checked;
config.Snowstorm.SnowflakesCount = parseInt(document.querySelector('#SnowstormCount').value);
config.Snowstorm.SnowflakesCountMobile = parseInt(document.querySelector('#SnowstormCountMobile').value);
config.Snowstorm.Speed = parseFloat(document.querySelector('#SnowstormSpeed').value);
config.Snowstorm.HorizontalWind = parseFloat(document.querySelector('#SnowstormHorizontalWind').value);
config.Snowstorm.VerticalVariation = parseFloat(document.querySelector('#SnowstormVerticalVariation').value);
// Fireworks
config.Fireworks.EnableFireworks = document.querySelector('#EnableFireworks').checked;
config.Fireworks.ParticleCount = parseInt(document.querySelector('#FireworksParticles').value);
config.Fireworks.LaunchInterval = parseInt(document.querySelector('#FireworksInterval').value);
config.Fireworks.ScrollFireworks = document.querySelector('#ScrollFireworks').checked;
config.Fireworks.MinFireworks = parseInt(document.querySelector('#MinFireworks').value);
config.Fireworks.MaxFireworks = parseInt(document.querySelector('#MaxFireworks').value);
// Halloween
config.Halloween.EnableHalloween = document.querySelector('#EnableHalloween').checked;
config.Halloween.SymbolCount = parseInt(document.querySelector('#HalloweenCount').value);
config.Halloween.EnableRandomSymbols = document.querySelector('#EnableRandomHalloween').checked;
config.Halloween.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomHalloweenMobile').checked;
config.Halloween.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationHalloween').checked;
config.Halloween.EnableSpiders = document.querySelector('#EnableSpiders').checked;
config.Halloween.EnableMice = document.querySelector('#EnableMice').checked;
// Hearts
config.Hearts.EnableHearts = document.querySelector('#EnableHearts').checked;
config.Hearts.SymbolCount = parseInt(document.querySelector('#HeartsCount').value);
config.Hearts.EnableRandomSymbols = document.querySelector('#EnableRandomHearts').checked;
config.Hearts.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomHeartsMobile').checked;
config.Hearts.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationHearts').checked;
// Christmas
config.Christmas.EnableChristmas = document.querySelector('#EnableChristmas').checked;
config.Christmas.SymbolCount = parseInt(document.querySelector('#ChristmasCount').value);
config.Christmas.EnableRandomChristmas = document.querySelector('#EnableRandomChristmas').checked;
config.Christmas.EnableRandomChristmasMobile = document.querySelector('#EnableRandomChristmasMobile').checked;
config.Christmas.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationChristmas').checked;
// Santa
config.Santa.EnableSanta = document.querySelector('#EnableSanta').checked;
config.Santa.SnowflakesCount = parseInt(document.querySelector('#SantaSnowflakes').value);
config.Santa.SnowflakesCountMobile = parseInt(document.querySelector('#SantaSnowflakesMobile').value);
config.Santa.SantaSpeed = parseFloat(document.querySelector('#SantaSpeed').value);
config.Santa.SantaSpeedMobile = parseFloat(document.querySelector('#SantaSpeedMobile').value);
config.Santa.SnowFallSpeed = parseFloat(document.querySelector('#SantaSnowFallSpeed').value);
config.Santa.MaxSantaRestTime = parseFloat(document.querySelector('#MaxSantaRestTime').value);
config.Santa.MinSantaRestTime = parseFloat(document.querySelector('#MinSantaRestTime').value);
config.Santa.MaxPresentFallSpeed = parseFloat(document.querySelector('#MaxPresentFallSpeed').value);
config.Santa.MinPresentFallSpeed = parseFloat(document.querySelector('#MinPresentFallSpeed').value);
// Easter
config.Easter.EnableEaster = document.querySelector('#EnableEaster').checked;
config.Easter.EggCount = parseInt(document.querySelector('#EasterEggCount').value);
config.Easter.EnableRandomEaster = document.querySelector('#EnableRandomEaster').checked;
config.Easter.EnableRandomEasterMobile = document.querySelector('#EnableRandomEasterMobile').checked;
config.Easter.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationEaster').checked;
config.Easter.EnableBunny = document.querySelector('#EasterBunny').checked;
config.Easter.BunnyDuration = parseInt(document.querySelector('#BunnyDuration').value);
config.Easter.HopHeight = parseInt(document.querySelector('#HopHeight').value);
config.Easter.MinBunnyRestTime = parseInt(document.querySelector('#MinBunnyRestTime').value);
config.Easter.MaxBunnyRestTime = parseInt(document.querySelector('#MaxBunnyRestTime').value);
// Resurrection
config.Resurrection.EnableResurrection = document.querySelector('#EnableResurrection').checked;
config.Resurrection.SymbolCount = parseInt(document.querySelector('#ResurrectionSymbolCount').value);
config.Resurrection.EnableRandomSymbols = document.querySelector('#EnableRandomResurrection').checked;
config.Resurrection.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomResurrectionMobile').checked;
config.Resurrection.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationResurrection').checked;
// Legacy Halloween
config.LegacyHalloween.EnableLegacyHalloween = document.querySelector('#EnableLegacyHalloween').checked;
config.LegacyHalloween.SymbolCount = parseInt(document.querySelector('#LegacyHalloweenCount').value);
// Spring
config.Spring.EnableSpring = document.querySelector('#EnableSpring').checked;
config.Spring.EnableSpringSunbeams = document.querySelector('#EnableSpringSunbeams').checked;
config.Spring.PollenCount = parseInt(document.querySelector('#SpringPollenCount').value);
config.Spring.SunbeamCount = parseInt(document.querySelector('#SpringSunbeamCount').value);
config.Spring.BirdCount = parseInt(document.querySelector('#SpringBirdCount').value);
config.Spring.ButterflyCount = parseInt(document.querySelector('#SpringButterflyCount').value);
config.Spring.BeeCount = parseInt(document.querySelector('#SpringBeeCount').value);
config.Spring.LadybugCount = parseInt(document.querySelector('#SpringLadybugCount').value);
config.Spring.EnableRandomSpring = document.querySelector('#EnableRandomSpring').checked;
config.Spring.EnableRandomSpringMobile = document.querySelector('#EnableRandomSpringMobile').checked;
config.Spring.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationSpring').checked;
// Summer
config.Summer.EnableSummer = document.querySelector('#EnableSummer').checked;
config.Summer.BubbleCount = parseInt(document.querySelector('#SummerBubbleCount').value);
config.Summer.DustCount = parseInt(document.querySelector('#SummerDustCount').value);
config.Summer.EnableRandomSummer = document.querySelector('#EnableRandomSummer').checked;
config.Summer.EnableRandomSummerMobile = document.querySelector('#EnableRandomSummerMobile').checked;
config.Summer.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationSummer').checked;
// Carnival
config.Carnival.EnableCarnival = document.querySelector('#EnableCarnival').checked;
config.Carnival.EnableCarnivalSway = document.querySelector('#EnableCarnivalSway').checked;
config.Carnival.ObjectCount = parseInt(document.querySelector('#CarnivalObjectCount').value);
config.Carnival.EnableRandomCarnival = document.querySelector('#EnableRandomCarnival').checked;
config.Carnival.EnableRandomCarnivalMobile = document.querySelector('#EnableRandomCarnivalMobile').checked;
config.Carnival.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationCarnival').checked;
// Cherry Blossom
config.CherryBlossom.EnableCherryBlossom = document.querySelector('#EnableCherryBlossom').checked;
config.CherryBlossom.PetalCount = parseInt(document.querySelector('#CherryBlossomPetalCount').value);
config.CherryBlossom.EnableRandomCherryBlossom = document.querySelector('#EnableRandomCherryBlossom').checked;
config.CherryBlossom.EnableRandomCherryBlossomMobile = document.querySelector('#EnableRandomCherryBlossomMobile').checked;
config.CherryBlossom.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationCherryBlossom').checked;
// Earth Day
config.EarthDay.EnableEarthDay = document.querySelector('#EnableEarthDay').checked;
config.EarthDay.VineCount = parseInt(document.querySelector('#EarthDayVineCount').value);
// Eurovision
config.Eurovision.EnableEurovision = document.querySelector('#EnableEurovision').checked;
config.Eurovision.SymbolCount = parseInt(document.querySelector('#EurovisionSymbolCount').value);
config.Eurovision.EnableRandomEurovision = document.querySelector('#EnableRandomEurovision').checked;
config.Eurovision.EnableRandomEurovisionMobile = document.querySelector('#EnableRandomEurovisionMobile').checked;
config.Eurovision.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationEurovision').checked;
config.Eurovision.EnableColorfulNotes = document.querySelector('#EnableColorfulNotes').checked;
config.Eurovision.EurovisionColors = document.querySelector('#EurovisionColors').value;
config.Eurovision.EurovisionGlowSize = parseInt(document.querySelector('#EurovisionGlowSize').value);
// Pi-Day
config.PiDay.EnablePiDay = document.querySelector('#EnablePiDay').checked;
config.PiDay.SymbolCount = parseInt(document.querySelector('#PiDaySymbolCount').value);
config.PiDay.EnableRandomPiDay = document.querySelector('#EnableRandomPiDay').checked;
config.PiDay.EnableRandomPiDayMobile = document.querySelector('#EnableRandomPiDayMobile').checked;
config.PiDay.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationPiDay').checked;
config.PiDay.EnablePiDayBackground = document.querySelector('#EnablePiDayBackground').checked;
// Pride
config.Pride.EnablePride = document.querySelector('#EnablePride').checked;
config.Pride.HeartCount = parseInt(document.querySelector('#PrideHeartCount').value);
config.Pride.HeartSize = parseFloat(document.querySelector('#PrideHeartSize').value);
config.Pride.ColorHeader = document.querySelector('#PrideColorHeader').checked;
// Rain
config.Rain.EnableRain = document.querySelector('#EnableRain').checked;
config.Rain.RaindropCount = parseInt(document.querySelector('#RaindropCount').value);
config.Rain.RaindropCountMobile = parseInt(document.querySelector('#RaindropCountMobile').value);
config.Rain.RainSpeed = parseFloat(document.querySelector('#RainSpeed').value);
// Storm
config.Storm.EnableStorm = document.querySelector('#EnableStorm').checked;
config.Storm.RaindropCount = parseInt(document.querySelector('#StormRaindropCount').value);
config.Storm.RaindropCountMobile = parseInt(document.querySelector('#StormRaindropCountMobile').value);
config.Storm.RainSpeed = parseFloat(document.querySelector('#StormRainSpeed').value);
config.Storm.EnableLightning = document.querySelector('#StormEnableLightning').checked;
// New Themes
config.Frost.EnableFrost = document.querySelector('#EnableFrost').checked;
config.FilmNoir.EnableFilmNoir = document.querySelector('#EnableFilmNoir').checked;
config.Oscar.EnableOscar = document.querySelector('#EnableOscar').checked;
config.MarioDay.EnableMarioDay = document.querySelector('#EnableMarioDay').checked;
config.StarWars.EnableStarWars = document.querySelector('#EnableStarWars').checked;
config.Oktoberfest.EnableOktoberfest = document.querySelector('#EnableOktoberfest').checked;
config.Friday13.EnableFriday13 = document.querySelector('#EnableFriday13').checked;
config.Eid.EnableEid = document.querySelector('#EnableEid').checked;
config.Santa.MinSantaRestTime = parseFloat(document.querySelector('#MinSantaRestTime').value);
config.Santa.MaxPresentFallSpeed = parseFloat(document.querySelector('#MaxPresentFallSpeed').value);
config.Santa.MinPresentFallSpeed = parseFloat(document.querySelector('#MinPresentFallSpeed').value);
// Easter
config.Easter.EnableEaster = document.querySelector('#EnableEaster').checked;
config.Easter.EggCount = parseInt(document.querySelector('#EasterEggCount').value);
config.Easter.EnableRandomEaster = document.querySelector('#EnableRandomEaster').checked;
config.Easter.EnableRandomEasterMobile = document.querySelector('#EnableRandomEasterMobile').checked;
config.Easter.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationEaster').checked;
config.Easter.EnableBunny = document.querySelector('#EasterBunny').checked;
config.Easter.BunnyDuration = parseInt(document.querySelector('#BunnyDuration').value);
config.Easter.HopHeight = parseInt(document.querySelector('#HopHeight').value);
config.Easter.MinBunnyRestTime = parseInt(document.querySelector('#MinBunnyRestTime').value);
config.Easter.MaxBunnyRestTime = parseInt(document.querySelector('#MaxBunnyRestTime').value);
// Resurrection
config.Resurrection.EnableResurrection = document.querySelector('#EnableResurrection').checked;
config.Resurrection.SymbolCount = parseInt(document.querySelector('#ResurrectionSymbolCount').value);
config.Resurrection.EnableRandomSymbols = document.querySelector('#EnableRandomResurrection').checked;
config.Resurrection.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomResurrectionMobile').checked;
config.Resurrection.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationResurrection').checked;
// Spring
config.Spring.EnableSpring = document.querySelector('#EnableSpring').checked;
config.Spring.EnableSpringSunbeams = document.querySelector('#EnableSpringSunbeams').checked;
config.Spring.PollenCount = parseInt(document.querySelector('#SpringPollenCount').value);
config.Spring.SunbeamCount = parseInt(document.querySelector('#SpringSunbeamCount').value);
config.Spring.BirdCount = parseInt(document.querySelector('#SpringBirdCount').value);
config.Spring.ButterflyCount = parseInt(document.querySelector('#SpringButterflyCount').value);
config.Spring.BeeCount = parseInt(document.querySelector('#SpringBeeCount').value);
config.Spring.LadybugCount = parseInt(document.querySelector('#SpringLadybugCount').value);
config.Spring.EnableRandomSpring = document.querySelector('#EnableRandomSpring').checked;
config.Spring.EnableRandomSpringMobile = document.querySelector('#EnableRandomSpringMobile').checked;
config.Spring.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationSpring').checked;
// Summer
config.Summer.EnableSummer = document.querySelector('#EnableSummer').checked;
config.Summer.BubbleCount = parseInt(document.querySelector('#SummerBubbleCount').value);
config.Summer.DustCount = parseInt(document.querySelector('#SummerDustCount').value);
config.Summer.EnableRandomSummer = document.querySelector('#EnableRandomSummer').checked;
config.Summer.EnableRandomSummerMobile = document.querySelector('#EnableRandomSummerMobile').checked;
config.Summer.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationSummer').checked;
// Carnival
config.Carnival.EnableCarnival = document.querySelector('#EnableCarnival').checked;
config.Carnival.EnableCarnivalSway = document.querySelector('#EnableCarnivalSway').checked;
config.Carnival.ObjectCount = parseInt(document.querySelector('#CarnivalObjectCount').value);
config.Carnival.EnableRandomCarnival = document.querySelector('#EnableRandomCarnival').checked;
config.Carnival.EnableRandomCarnivalMobile = document.querySelector('#EnableRandomCarnivalMobile').checked;
config.Carnival.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationCarnival').checked;
// Cherry Blossom
config.CherryBlossom.EnableCherryBlossom = document.querySelector('#EnableCherryBlossom').checked;
config.CherryBlossom.PetalCount = parseInt(document.querySelector('#CherryBlossomPetalCount').value);
config.CherryBlossom.EnableRandomCherryBlossom = document.querySelector('#EnableRandomCherryBlossom').checked;
config.CherryBlossom.EnableRandomCherryBlossomMobile = document.querySelector('#EnableRandomCherryBlossomMobile').checked;
config.CherryBlossom.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationCherryBlossom').checked;
// Earth Day
config.EarthDay.EnableEarthDay = document.querySelector('#EnableEarthDay').checked;
config.EarthDay.VineCount = parseInt(document.querySelector('#EarthDayVineCount').value);
// Eurovision
config.Eurovision.EnableEurovision = document.querySelector('#EnableEurovision').checked;
config.Eurovision.SymbolCount = parseInt(document.querySelector('#EurovisionSymbolCount').value);
config.Eurovision.EnableRandomEurovision = document.querySelector('#EnableRandomEurovision').checked;
config.Eurovision.EnableRandomEurovisionMobile = document.querySelector('#EnableRandomEurovisionMobile').checked;
config.Eurovision.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationEurovision').checked;
config.Eurovision.EnableColorfulNotes = document.querySelector('#EnableColorfulNotes').checked;
config.Eurovision.EurovisionColors = document.querySelector('#EurovisionColors').value;
config.Eurovision.EurovisionGlowSize = parseInt(document.querySelector('#EurovisionGlowSize').value);
// Pi-Day
config.PiDay.EnablePiDay = document.querySelector('#EnablePiDay').checked;
config.PiDay.SymbolCount = parseInt(document.querySelector('#PiDaySymbolCount').value);
config.PiDay.EnableRandomPiDay = document.querySelector('#EnableRandomPiDay').checked;
config.PiDay.EnableRandomPiDayMobile = document.querySelector('#EnableRandomPiDayMobile').checked;
config.PiDay.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationPiDay').checked;
// Pride
config.Pride.EnablePride = document.querySelector('#EnablePride').checked;
config.Pride.HeartCount = parseInt(document.querySelector('#PrideHeartCount').value);
config.Pride.HeartSize = parseFloat(document.querySelector('#PrideHeartSize').value);
config.Pride.ColorHeader = document.querySelector('#PrideColorHeader').checked;
// Rain
config.Rain.EnableRain = document.querySelector('#EnableRain').checked;
config.Rain.RaindropCount = parseInt(document.querySelector('#RaindropCount').value);
config.Rain.RaindropCountMobile = parseInt(document.querySelector('#RaindropCountMobile').value);
config.Rain.RainSpeed = parseFloat(document.querySelector('#RainSpeed').value);
// Storm
config.Storm.EnableStorm = document.querySelector('#EnableStorm').checked;
config.Storm.RaindropCount = parseInt(document.querySelector('#StormRaindropCount').value);
config.Storm.RaindropCountMobile = parseInt(document.querySelector('#StormRaindropCountMobile').value);
config.Storm.RainSpeed = parseFloat(document.querySelector('#StormRainSpeed').value);
config.Storm.EnableLightning = document.querySelector('#StormEnableLightning').checked;
ApiClient.updatePluginConfiguration(SeasonalsConfigPage.pluginUniqueId, config).then(function (result) {
Dashboard.processPluginConfigurationUpdateResult(result);
});
});
e.preventDefault();
return false;
});
</script>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink