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

2442 lines
189 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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="matrix">Matrix</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="eidalfitr">Eid al-Fitr (Sugar Feast)</option>
<option value="spooky">Spooky</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>All symbol count settings add this number in addition to the standard 12 symbols (if additional symbols is enabled).</p> -->
<p>All symbol count settings add this number in addition to the standard 12 symbols (if additional symbols is enabled).</p>
<details>
<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 (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>Spooky</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableSpooky" name="EnableSpooky" type="checkbox" is="emby-checkbox" />
<span>Enable Spooky Seasonal</span>
</label>
<div class="fieldDescription">Enable the Spooky Halloween theme (floating, swaying symbols).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SpookyCount">Symbol Count</label>
<input is="emby-input" type="number" id="SpookyCount" name="SpookyCount" />
<div class="fieldDescription">Number of floating symbols.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SpookySize">Symbol Size</label>
<input is="emby-input" type="number" id="SpookySize" name="SpookySize" />
<div class="fieldDescription">Size of the floating symbols in pixels (default 30).</div>
</div>
<div class="checkboxContainer">
<label class="emby-checkbox-label">
<input id="EnableSpookySway" name="EnableSpookySway" type="checkbox" is="emby-checkbox" />
<span>Enable Swaying Motion</span>
</label>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SpookyGlowSize">Glow Size</label>
<input is="emby-input" type="number" id="SpookyGlowSize" name="SpookyGlowSize" />
<div class="fieldDescription">Size of the glow effect in pixels (0 to disable, default 5).</div>
</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 (fishes, bubbles, seaweed).</div>
</div>
<div class="checkboxContainer">
<label class="emby-checkbox-label">
<input id="EnableUnderwaterLightRays" name="EnableUnderwaterLightRays" type="checkbox" is="emby-checkbox" />
<span>Enable Light Rays (God Rays)</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 sea creatures.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomUnderwater" name="EnableRandomUnderwater" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Symbols</span>
</label>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomUnderwaterMobile" name="EnableRandomUnderwaterMobile" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Symbols on Mobile</span>
</label>
</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>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>
<div class="inputContainer">
<label class="inputLabel" for="TurfColor">Turf Color</label>
<input is="emby-input" type="color" id="TurfColor" name="TurfColor" value="#228b22" />
<div class="fieldDescription">Color for the grass/turf overlay at the bottom.</div>
</div>
<div class="inputContainer">
<label class="inputLabel">Enabled Sports Balls</label>
<div class="fieldDescription" style="margin-bottom: 8px;">Select which sports balls should be featured.</div>
<div style="display: flex; flex-wrap: wrap; gap: 15px;">
<label class="emby-checkbox-label">
<input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="badminton" />
<span>Badminton</span>
</label>
<label class="emby-checkbox-label">
<input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="baseball" />
<span>Baseball</span>
</label>
<label class="emby-checkbox-label">
<input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="basketball" />
<span>Basketball</span>
</label>
<label class="emby-checkbox-label">
<input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="billiard" />
<span>Billiard</span>
</label>
<label class="emby-checkbox-label">
<input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="bowling" />
<span>Bowling</span>
</label>
<label class="emby-checkbox-label">
<input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="football" />
<span>Football/Soccer</span>
</label>
<label class="emby-checkbox-label">
<input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="golf" />
<span>Golf</span>
</label>
<label class="emby-checkbox-label">
<input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="rugby" />
<span>Rugby</span>
</label>
<label class="emby-checkbox-label">
<input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="table_tennis" />
<span>Table Tennis</span>
</label>
<label class="emby-checkbox-label">
<input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="tennis" />
<span>Tennis</span>
</label>
<label class="emby-checkbox-label">
<input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="volleyball" />
<span>Volleyball</span>
</label>
<label class="emby-checkbox-label">
<input type="checkbox" is="emby-checkbox" class="sport-ball-cb" value="waterball" />
<span>Waterpolo</span>
</label>
</div>
</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="EnableUnderwaterLightRays" name="EnableUnderwaterLightRays" type="checkbox" is="emby-checkbox" />
<span>Enable Light Rays</span>
</label>
<div class="fieldDescription">Enable god rays from the top.</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="UnderwaterSeaweedCount">Seaweed Count</label>
<input is="emby-input" type="number" id="UnderwaterSeaweedCount" name="UnderwaterSeaweedCount" />
<div class="fieldDescription">Amount of dynamic seaweed (GIFs + Emojis) at the bottom.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="UnderwaterFishCount">Fish Count</label>
<input is="emby-input" type="number" id="UnderwaterFishCount" name="UnderwaterFishCount" />
<div class="fieldDescription">Number of swimming fish.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="UnderwaterSeahorseCount">Seahorse Count</label>
<input is="emby-input" type="number" id="UnderwaterSeahorseCount" name="UnderwaterSeahorseCount" />
</div>
<div class="inputContainer">
<label class="inputLabel" for="UnderwaterJellyfishCount">Jellyfish Count</label>
<input is="emby-input" type="number" id="UnderwaterJellyfishCount" name="UnderwaterJellyfishCount" />
</div>
<div class="inputContainer">
<label class="inputLabel" for="UnderwaterTurtleCount">Turtle Count</label>
<input is="emby-input" type="number" id="UnderwaterTurtleCount" name="UnderwaterTurtleCount" />
</div>
<div class="inputContainer">
<label class="inputLabel" for="UnderwaterCrabCount">Crab Count</label>
<input is="emby-input" type="number" id="UnderwaterCrabCount" name="UnderwaterCrabCount" />
</div>
<div class="inputContainer">
<label class="inputLabel" for="UnderwaterStarfishCount">Starfish Count</label>
<input is="emby-input" type="number" id="UnderwaterStarfishCount" name="UnderwaterStarfishCount" />
</div>
<div class="inputContainer">
<label class="inputLabel" for="UnderwaterShellCount">Shell Count</label>
<input is="emby-input" type="number" id="UnderwaterShellCount" name="UnderwaterShellCount" />
</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="EnableGarland" name="EnableGarland" type="checkbox" is="emby-checkbox" />
<span>Enable Garland</span>
</label>
<div class="fieldDescription">Enable dropping confetti / popping a garland at the top.</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>Matrix</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableMatrix" name="EnableMatrix" type="checkbox" is="emby-checkbox" />
<span>Enable Matrix Seasonal</span>
</label>
<div class="fieldDescription">Enable the Matrix theme in general (e.g. for automation).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableRandomMatrix" name="EnableRandomMatrix" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Matrix 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="EnableRandomMatrixMobile" name="EnableRandomMatrixMobile" type="checkbox" is="emby-checkbox" />
<span>Enable Additional Random Matrix 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="MatrixSymbolCount">Symbol Count</label>
<input is="emby-input" type="number" id="MatrixSymbolCount" name="MatrixSymbolCount" />
<div class="fieldDescription">Number of additional digital rain columns (if enabled).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="MatrixChars">Raining Characters</label>
<input is="emby-input" type="text" id="MatrixChars" name="MatrixChars" />
<div class="fieldDescription">Characters to use for the rain effect (default is 0-9).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableDifferentDurationMatrix" name="EnableDifferentDurationMatrix" 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="EnableMatrixBackground" name="EnableMatrixBackground" type="checkbox" is="emby-checkbox" />
<span>Background Mode (Behind UI)</span>
</label>
<div class="fieldDescription">Displays the Matrix 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><p>⚠️ Epilepsy warning ⚠️</p></div>
<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>Eid al-Fitr (Sugar Feast)</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="matrix">Matrix</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="eidalfitr">Eid al-Fitr</option>' +
' <option value="spooky">Spooky</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;
// Spooky Theme
document.querySelector('#SpookyCount').value = config.Spooky.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('#UnderwaterSeaweedCount').value = config.Underwater.SeaweedCount !== undefined ? config.Underwater.SeaweedCount : 30;
document.querySelector('#UnderwaterFishCount').value = config.Underwater.FishCount !== undefined ? config.Underwater.FishCount : 15;
document.querySelector('#UnderwaterSeahorseCount').value = config.Underwater.SeahorseCount !== undefined ? config.Underwater.SeahorseCount : 3;
document.querySelector('#UnderwaterJellyfishCount').value = config.Underwater.JellyfishCount !== undefined ? config.Underwater.JellyfishCount : 3;
document.querySelector('#UnderwaterTurtleCount').value = config.Underwater.TurtleCount !== undefined ? config.Underwater.TurtleCount : 1;
document.querySelector('#UnderwaterCrabCount').value = config.Underwater.CrabCount !== undefined ? config.Underwater.CrabCount : 2;
document.querySelector('#UnderwaterStarfishCount').value = config.Underwater.StarfishCount !== undefined ? config.Underwater.StarfishCount : 2;
document.querySelector('#UnderwaterShellCount').value = config.Underwater.ShellCount !== undefined ? config.Underwater.ShellCount : 2;
// Birthday
document.querySelector('#EnableBirthday').checked = config.Birthday.EnableBirthday || false;
document.querySelector('#EnableGarland').checked = config.Birthday.EnableGarland !== 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;
// Sports
if (!config.Sports) config.Sports = { EnableSports: true, SymbolCount: 25, EnableRandomSymbols: true, EnableRandomSymbolsMobile: false, EnableDifferentDuration: true };
document.querySelector('#EnableSports').checked = config.Sports.EnableSports !== false;
document.querySelector('#EnableRandomSymbolsSports').checked = config.Sports.EnableRandomSymbols !== false;
document.querySelector('#EnableRandomSymbolsMobileSports').checked = config.Sports.EnableRandomSymbolsMobile === true;
document.querySelector('#EnableDifferentDurationSports').checked = config.Sports.EnableDifferentDuration !== false;
document.querySelector('#SportsSymbolCount').value = config.Sports.SymbolCount || 25;
document.querySelector('#TurfColor').value = config.Sports.TurfColor || '#228b22';
// Load Checkboxes
const savedBallsString = config.Sports.SportsBalls || 'football,basketball,tennis,volleyball';
const savedBalls = savedBallsString.split(',');
document.querySelectorAll('.sport-ball-cb').forEach(cb => {
// Support for both new category string and legacy filename strings
cb.checked = savedBalls.some(b => b === cb.value || b.startsWith(cb.value + '_'));
});
// Olympia
if (!config.Olympia) config.Olympia = { EnableOlympia: true, SymbolCount: 25, EnableRandomSymbols: true, EnableRandomSymbolsMobile: false, EnableDifferentDuration: true };
document.querySelector('#EnableOlympia').checked = config.Olympia.EnableOlympia !== false;
document.querySelector('#EnableRandomSymbolsOlympia').checked = config.Olympia.EnableRandomSymbols !== false;
document.querySelector('#EnableRandomSymbolsMobileOlympia').checked = config.Olympia.EnableRandomSymbolsMobile === true;
document.querySelector('#EnableDifferentDurationOlympia').checked = config.Olympia.EnableDifferentDuration !== false;
document.querySelector('#OlympiaSymbolCount').value = config.Olympia.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;
// Matrix
document.querySelector('#EnableMatrix').checked = config.Matrix.EnableMatrix;
document.querySelector('#MatrixSymbolCount').value = config.Matrix.SymbolCount;
document.querySelector('#MatrixChars').value = config.Matrix.MatrixChars !== undefined ? config.Matrix.MatrixChars : '0123456789';
document.querySelector('#EnableRandomMatrix').checked = config.Matrix.EnableRandomMatrix;
document.querySelector('#EnableRandomMatrixMobile').checked = config.Matrix.EnableRandomMatrixMobile;
document.querySelector('#EnableDifferentDurationMatrix').checked = config.Matrix.EnableDifferentDuration;
document.querySelector('#EnableMatrixBackground').checked = config.Matrix.EnableMatrixBackground !== undefined ? config.Matrix.EnableMatrixBackground : 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;
// Spooky Theme
document.querySelector('#EnableSpooky').checked = config.Spooky.EnableSpooky !== undefined ? config.Spooky.EnableSpooky : true;
document.querySelector('#SpookyCount').value = config.Spooky.SymbolCount !== undefined ? config.Spooky.SymbolCount : 25;
document.querySelector('#SpookySize').value = config.Spooky.SpookySize !== undefined ? config.Spooky.SpookySize : 30;
document.querySelector('#EnableSpookySway').checked = config.Spooky.EnableSpookySway !== undefined ? config.Spooky.EnableSpookySway : true;
document.querySelector('#SpookyGlowSize').value = config.Spooky.SpookyGlowSize !== undefined ? config.Spooky.SpookyGlowSize : 5;
// 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;
// Underwater
config.Underwater = config.Underwater || {};
document.querySelector('#EnableUnderwater').checked = config.Underwater.EnableUnderwater !== false;
document.querySelector('#EnableUnderwaterLightRays').checked = config.Underwater.EnableLightRays !== false;
document.querySelector('#UnderwaterSymbolCount').value = config.Underwater.SymbolCount || 15;
document.querySelector('#EnableRandomSymbolsUnderwater').checked = config.Underwater.EnableRandomSymbols !== false;
document.querySelector('#EnableRandomSymbolsMobileUnderwater').checked = config.Underwater.EnableRandomSymbolsMobile === true;
document.querySelector('#EnableDifferentDurationUnderwater').checked = config.Underwater.EnableDifferentDuration !== false;
// Birthday
config.Birthday = config.Birthday || {};
document.querySelector('#EnableBirthday').checked = config.Birthday.EnableBirthday !== false;
document.querySelector('#EnableGarland').checked = config.Birthday.EnableGarland !== false;
document.querySelector('#BirthdaySymbolCount').value = config.Birthday.SymbolCount || 25;
document.querySelector('#EnableRandomSymbolsBirthday').checked = config.Birthday.EnableRandomSymbols !== false;
document.querySelector('#EnableRandomSymbolsMobileBirthday').checked = config.Birthday.EnableRandomSymbolsMobile === true;
document.querySelector('#EnableDifferentDurationBirthday').checked = config.Birthday.EnableDifferentDuration !== false;
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);
config.Sports.TurfColor = document.querySelector('#TurfColor').value;
// Save Checkboxes
const selectedBalls = Array.from(document.querySelectorAll('.sport-ball-cb'))
.filter(cb => cb.checked)
.map(cb => cb.value);
config.Sports.SportsBalls = selectedBalls.join(',');
// 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.EnableUnderwaterLightRays = document.querySelector('#EnableUnderwaterLightRays').checked;
config.Underwater.EnableRandomSymbols = document.querySelector('#EnableRandomSymbolsUnderwater').checked;
config.Underwater.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileUnderwater').checked;
config.Underwater.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationUnderwater').checked;
config.Underwater.SeaweedCount = parseInt(document.querySelector('#UnderwaterSeaweedCount').value);
config.Underwater.FishCount = parseInt(document.querySelector('#UnderwaterFishCount').value);
config.Underwater.SeahorseCount = parseInt(document.querySelector('#UnderwaterSeahorseCount').value);
config.Underwater.JellyfishCount = parseInt(document.querySelector('#UnderwaterJellyfishCount').value);
config.Underwater.TurtleCount = parseInt(document.querySelector('#UnderwaterTurtleCount').value);
config.Underwater.CrabCount = parseInt(document.querySelector('#UnderwaterCrabCount').value);
config.Underwater.StarfishCount = parseInt(document.querySelector('#UnderwaterStarfishCount').value);
config.Underwater.ShellCount = parseInt(document.querySelector('#UnderwaterShellCount').value);
// Birthday
if (!config.Birthday) config.Birthday = {};
config.Birthday.EnableBirthday = document.querySelector('#EnableBirthday').checked;
config.Birthday.EnableGarland = document.querySelector('#EnableGarland').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;
// Spooky Theme
config.Spooky.EnableSpooky = document.querySelector('#EnableSpooky').checked;
config.Spooky.SymbolCount = parseInt(document.querySelector('#SpookyCount').value);
config.Spooky.SpookySize = parseInt(document.querySelector('#SpookySize').value);
config.Spooky.EnableSpookySway = document.querySelector('#EnableSpookySway').checked;
config.Spooky.SpookyGlowSize = parseInt(document.querySelector('#SpookyGlowSize').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);
// Matrix
config.Matrix.EnableMatrix = document.querySelector('#EnableMatrix').checked;
config.Matrix.SymbolCount = parseInt(document.querySelector('#MatrixSymbolCount').value);
config.Matrix.MatrixChars = document.querySelector('#MatrixChars').value;
config.Matrix.EnableRandomMatrix = document.querySelector('#EnableRandomMatrix').checked;
config.Matrix.EnableRandomMatrixMobile = document.querySelector('#EnableRandomMatrixMobile').checked;
config.Matrix.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationMatrix').checked;
config.Matrix.EnableMatrixBackground = document.querySelector('#EnableMatrixBackground').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;
// Underwater
config.Underwater.EnableUnderwater = document.querySelector('#EnableUnderwater').checked;
config.Underwater.EnableLightRays = document.querySelector('#EnableUnderwaterLightRays').checked;
config.Underwater.SymbolCount = parseInt(document.querySelector('#UnderwaterSymbolCount').value);
config.Underwater.EnableRandomSymbols = document.querySelector('#EnableRandomUnderwater').checked;
config.Underwater.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomUnderwaterMobile').checked;
config.Underwater.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationUnderwater').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);
// Birthday
config.Birthday.EnableBirthday = document.querySelector('#EnableBirthday').checked;
config.Birthday.EnableGarland = document.querySelector('#EnableGarland').checked;
config.Birthday.SymbolCount = parseInt(document.querySelector('#BirthdaySymbolCount').value);
config.Birthday.EnableRandomSymbols = document.querySelector('#EnableRandomSymbolsBirthday').checked;
config.Birthday.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileBirthday').checked;
config.Birthday.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationBirthday').checked;
// Sports
config.Sports.EnableSports = document.querySelector('#EnableSports').checked;
config.Sports.SymbolCount = parseInt(document.querySelector('#SportsSymbolCount').value);
config.Sports.EnableRandomSymbols = document.querySelector('#EnableRandomSymbolsSports').checked;
config.Sports.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileSports').checked;
config.Sports.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationSports').checked;
// Olympia
config.Olympia.EnableOlympia = document.querySelector('#EnableOlympia').checked;
config.Olympia.SymbolCount = parseInt(document.querySelector('#OlympiaSymbolCount').value);
config.Olympia.EnableRandomSymbols = document.querySelector('#EnableRandomSymbolsOlympia').checked;
config.Olympia.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomSymbolsMobileOlympia').checked;
config.Olympia.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationOlympia').checked;
// 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