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

2310 lines
171 KiB
HTML
Raw Permalink 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="autumn">Autumn (Falling Leaves)</option>
<option value="birthday">Birthday (Balloons & Confetti)</option>
<option value="carnival">Carnival (Confetti)</option>
<option value="cherryblossom">Cherry Blossom</option>
<option value="christmas">Christmas</option>
<option value="earthday">Earth Day</option>
<option value="easter">Easter</option>
<option value="eid">Eid al-Fitr (Sugar Feast)</option>
<option value="eurovision">Eurovision</option>
<option value="filmnoir">Film-Noir (Classic B&W Cinema Filter)</option>
<option value="fireworks">Fireworks</option>
<option value="friday13">Friday the 13th</option>
<option value="frost">Frost / Ice</option>
<option value="halloween">Halloween</option>
<option value="hearts">Hearts</option>
<option value="marioday">Mario Day</option>
<option value="matrix">Matrix</option>
<option value="oktoberfest">Oktoberfest</option>
<option value="olympia">Olympia</option>
<option value="oscar">Oscar Awards</option>
<option value="pride">Pride</option>
<option value="rain">Rain</option>
<option value="resurrection">Resurrection by Bioflash257</option>
<option value="santa">Santa (Flying Santa & Snowfall)</option>
<option value="snowfall">Snowfall</option>
<option value="snowflakes">Snowflakes</option>
<option value="snowstorm">Snowstorm</option>
<option value="space">Space</option>
<option value="spooky">Spooky</option>
<option value="sports">Sports</option>
<option value="spring">Spring</option>
<option value="starwars">Star Wars Day</option>
<option value="storm">Storm (⚠️Epilepsy Warning⚠️)</option>
<option value="summer">Summer (Bubbles)</option>
<option value="underwater">Underwater</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="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="inputContainer">
<label class="inputLabel" for="AutumnLeafCountMobile">Leaf Count (Mobile)</label>
<input is="emby-input" type="number" id="AutumnLeafCountMobile" name="AutumnLeafCountMobile" />
<div class="fieldDescription">Amount of leaves on mobile. Minimum 0. Warning: High values may affect performance.</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="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="inputContainer">
<label class="inputLabel" for="SnowflakeCountMobile">Snowflake Count (Mobile)</label>
<input is="emby-input" type="number" id="SnowflakeCountMobile" name="SnowflakeCountMobile" />
<div class="fieldDescription">Amount of snowflakes on mobile. Minimum 0. Warning: High values may affect performance.</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="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="inputContainer">
<label class="inputLabel" for="HalloweenCountMobile">Symbol Count (Mobile)</label>
<input is="emby-input" type="number" id="HalloweenCountMobile" name="HalloweenCountMobile" />
<div class="fieldDescription">Amount of symbols on mobile. Minimum 0. Warning: High values may affect performance.</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="SpookyCountMobile">Symbol Count (Mobile)</label>
<input is="emby-input" type="number" id="SpookyCountMobile" name="SpookyCountMobile" />
<div class="fieldDescription">Amount of symbols on mobile. Minimum 0. Warning: High values may affect performance.</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="EnableDifferentDurationSpooky" name="EnableDifferentDurationSpooky" type="checkbox" is="emby-checkbox" />
<span>Enable Different Symbol Durations</span>
</label>
</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="UnderwaterSymbolCountMobile">Symbol Count (Mobile)</label>
<input is="emby-input" type="number" id="UnderwaterSymbolCountMobile" name="UnderwaterSymbolCountMobile" />
<div class="fieldDescription">Amount of sea creatures on mobile. Minimum 0. Warning: High values may affect performance.</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="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="inputContainer">
<label class="inputLabel" for="HeartsCountMobile">Symbol Count (Mobile)</label>
<input is="emby-input" type="number" id="HeartsCountMobile" name="HeartsCountMobile" />
<div class="fieldDescription">Amount of hearts on mobile. Minimum 0. Warning: High values may affect performance.</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="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="inputContainer">
<label class="inputLabel" for="ChristmasCountMobile">Symbol Count (Mobile)</label>
<input is="emby-input" type="number" id="ChristmasCountMobile" name="ChristmasCountMobile" />
<div class="fieldDescription">Amount of symbols on mobile. Minimum 0. Warning: High values may affect performance.</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="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="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="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="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="inputContainer">
<label class="inputLabel" for="ResurrectionSymbolCountMobile">Symbol Count (Mobile)</label>
<input is="emby-input" type="number" id="ResurrectionSymbolCountMobile" name="ResurrectionSymbolCountMobile" />
<div class="fieldDescription">Amount of symbols on mobile. Minimum 0. Warning: High values may affect performance.</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="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="inputContainer">
<label class="inputLabel" for="SpringSymbolCountMobile">Symbol Count (Mobile)</label>
<input is="emby-input" type="number" id="SpringSymbolCountMobile" name="SpringSymbolCountMobile" />
<div class="fieldDescription">Amount of mixed symbols on mobile. Warning: High values may affect performance.</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="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="inputContainer">
<label class="inputLabel" for="SummerSymbolCountMobile">Symbol Count (Mobile)</label>
<input is="emby-input" type="number" id="SummerSymbolCountMobile" name="SummerSymbolCountMobile" />
<div class="fieldDescription">Amount of mixed symbols on mobile. Warning: High values may affect performance.</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="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="inputContainer">
<label class="inputLabel" for="CarnivalObjectCountMobile">Confetti Count (Mobile)</label>
<input is="emby-input" type="number" id="CarnivalObjectCountMobile" name="CarnivalObjectCountMobile" />
<div class="fieldDescription">Amount of confetti on mobile. Minimum 0. Warning: High values may affect performance.</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="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="inputContainer">
<label class="inputLabel" for="CherryBlossomPetalCountMobile">Petal Count (Mobile)</label>
<input is="emby-input" type="number" id="CherryBlossomPetalCountMobile" name="CherryBlossomPetalCountMobile" />
<div class="fieldDescription">Amount of petals on mobile. Minimum 0. Warning: High values may affect performance.</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>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="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="inputContainer">
<label class="inputLabel" for="SportsSymbolCountMobile">Symbol Count (Mobile)</label>
<input is="emby-input" type="number" id="SportsSymbolCountMobile" name="SportsSymbolCountMobile" />
<div class="fieldDescription">Amount of symbols on mobile. Minimum 0. Warning: High values may affect performance.</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="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableTrophy" name="EnableTrophy" type="checkbox" is="emby-checkbox" />
<span>Enable Trophy</span>
</label>
<div class="fieldDescription">Enable the flying trophy animation.</div>
</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="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="inputContainer">
<label class="inputLabel" for="OlympiaSymbolCountMobile">Symbol Count (Mobile)</label>
<input is="emby-input" type="number" id="OlympiaSymbolCountMobile" name="OlympiaSymbolCountMobile" />
<div class="fieldDescription">Amount of symbols on mobile. Minimum 0. Warning: High values may affect performance.</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="inputContainer">
<label class="inputLabel" for="PlanetCount">Planet Count</label>
<input is="emby-input" type="number" id="PlanetCount" name="PlanetCount" />
<div class="fieldDescription">Number of planets displayed (if enabled).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="AstronautCount">Astronaut Count</label>
<input is="emby-input" type="number" id="AstronautCount" name="AstronautCount" />
<div class="fieldDescription">Number of astronauts displayed (if enabled).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SatelliteCount">Satellite Count</label>
<input is="emby-input" type="number" id="SatelliteCount" name="SatelliteCount" />
<div class="fieldDescription">Number of satellites displayed (if enabled).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="IssCount">ISS Count</label>
<input is="emby-input" type="number" id="IssCount" name="IssCount" />
<div class="fieldDescription">Number of ISS symbols displayed (if enabled).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="RocketCount">Rocket Count</label>
<input is="emby-input" type="number" id="RocketCount" name="RocketCount" />
<div class="fieldDescription">Number of rockets displayed (if enabled).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SpaceSymbolCountMobile">Symbol Count (Replaces individual counts) (Mobile)</label>
<input is="emby-input" type="number" id="SpaceSymbolCountMobile" name="SpaceSymbolCountMobile" />
<div class="fieldDescription">Amount of combined symbols on mobile. Minimum 0. Warning: High values may affect performance.</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="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="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="inputContainer">
<label class="inputLabel" for="BirthdaySymbolCountMobile">Symbol Count (Mobile)</label>
<input is="emby-input" type="number" id="BirthdaySymbolCountMobile" name="BirthdaySymbolCountMobile" />
<div class="fieldDescription">Amount of symbols on mobile. Minimum 0. Warning: High values may affect performance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="BirthdayConfettiCount">Confetti Count</label>
<input is="emby-input" type="number" id="BirthdayConfettiCount" name="BirthdayConfettiCount" />
<div class="fieldDescription">Number of confetti pieces created when a balloon bursts.</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="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="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>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="LetMarioJump" name="LetMarioJump" type="checkbox" is="emby-checkbox" />
<span>Let Mario Jump</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>
<div class="inputContainer">
<label class="inputLabel" for="OktoberfestCount">Symbol Count</label>
<input is="emby-input" type="number" id="OktoberfestCount" name="OktoberfestCount" />
</div>
<div class="inputContainer">
<label class="inputLabel" for="OktoberfestCountMobile">Symbol Count (Mobile)</label>
<input is="emby-input" type="number" id="OktoberfestCountMobile" name="OktoberfestCountMobile" />
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableDifferentDurationOktoberfest" name="EnableDifferentDurationOktoberfest" type="checkbox" is="emby-checkbox" />
<span>Enable Different Duration</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>
<div class="inputContainer">
<label class="inputLabel" for="EidLanternCount">Lantern Count</label>
<input is="emby-input" type="number" id="EidLanternCount" name="EidLanternCount" />
<div class="fieldDescription">Amount of lanterns. Minimum 0. Warning: High values may affect performance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="EidLanternCountMobile">Lantern Count (Mobile)</label>
<input is="emby-input" type="number" id="EidLanternCountMobile" name="EidLanternCountMobile" />
<div class="fieldDescription">Amount of lanterns on mobile. Minimum 0. Warning: High values may affect performance.</div>
</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="autumn">Autumn (Falling Leaves)</option>' +
' <option value="birthday">Birthday (Balloons & Confetti)</option>' +
' <option value="carnival">Carnival (Confetti)</option>' +
' <option value="cherryblossom">Cherry Blossom</option>' +
' <option value="christmas">Christmas</option>' +
' <option value="earthday">Earth Day</option>' +
' <option value="easter">Easter</option>' +
' <option value="eidalfitr">Eid al-Fitr (Sugar Feast)</option>' +
' <option value="eurovision">Eurovision</option>' +
' <option value="filmnoir">Film-Noir (Classic B&W Cinema Filter)</option>' +
' <option value="fireworks">Fireworks</option>' +
' <option value="friday13">Friday the 13th</option>' +
' <option value="frost">Frost / Ice</option>' +
' <option value="halloween">Halloween</option>' +
' <option value="hearts">Hearts</option>' +
' <option value="marioday">Mario Day</option>' +
' <option value="matrix">Matrix</option>' +
' <option value="oktoberfest">Oktoberfest</option>' +
' <option value="olympia">Olympia</option>' +
' <option value="oscar">Oscar Awards</option>' +
' <option value="pride">Pride</option>' +
' <option value="rain">Rain</option>' +
' <option value="resurrection">Resurrection by Bioflash257</option>' +
' <option value="santa">Santa (Flying Santa & Snowfall)</option>' +
' <option value="snowfall">Snowfall</option>' +
' <option value="snowflakes">Snowflakes</option>' +
' <option value="snowstorm">Snowstorm</option>' +
' <option value="space">Space</option>' +
' <option value="spooky">Spooky</option>' +
' <option value="sports">Sports</option>' +
' <option value="spring">Spring</option>' +
' <option value="starwars">Star Wars Day</option>' +
' <option value="storm">Storm (Epilepsy Warning!)</option>' +
' <option value="summer">Summer (Bubbles)</option>' +
' <option value="underwater">Underwater</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;
if (!config.Autumn) config.Autumn = {};
if (!config.Birthday) config.Birthday = {};
if (!config.Carnival) config.Carnival = {};
if (!config.CherryBlossom) config.CherryBlossom = {};
if (!config.Christmas) config.Christmas = {};
if (!config.EarthDay) config.EarthDay = {};
if (!config.Easter) config.Easter = {};
if (!config.Eid) config.Eid = {};
if (!config.Eurovision) config.Eurovision = {};
if (!config.FilmNoir) config.FilmNoir = {};
if (!config.Fireworks) config.Fireworks = {};
if (!config.Friday13) config.Friday13 = {};
if (!config.Frost) config.Frost = {};
if (!config.Halloween) config.Halloween = {};
if (!config.Hearts) config.Hearts = {};
if (!config.MarioDay) config.MarioDay = {};
if (!config.Matrix) config.Matrix = {};
if (!config.Oktoberfest) config.Oktoberfest = {};
if (!config.Olympia) config.Olympia = {};
if (!config.Oscar) config.Oscar = {};
if (!config.Pride) config.Pride = {};
if (!config.Rain) config.Rain = {};
if (!config.Resurrection) config.Resurrection = {};
if (!config.Santa) config.Santa = {};
if (!config.Snowfall) config.Snowfall = {};
if (!config.Snowflakes) config.Snowflakes = {};
if (!config.Snowstorm) config.Snowstorm = {};
if (!config.Space) config.Space = {};
if (!config.Spooky) config.Spooky = {};
if (!config.Sports) config.Sports = {};
if (!config.Spring) config.Spring = {};
if (!config.StarWars) config.StarWars = {};
if (!config.Storm) config.Storm = {};
if (!config.Summer) config.Summer = {};
if (!config.Underwater) config.Underwater = {};
// 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('#AutumnLeafCountMobile').value = config.Autumn.LeafCountMobile;
document.querySelector('#EnableDifferentDurationAutumn').checked = config.Autumn.EnableDifferentDuration;
document.querySelector('#EnableRotation').checked = config.Autumn.EnableRotation;
// Birthday
document.querySelector('#EnableBirthday').checked = config.Birthday.EnableBirthday !== false;
document.querySelector('#EnableDifferentDurationBirthday').checked = config.Birthday.EnableDifferentDuration !== false;
document.querySelector('#BirthdaySymbolCount').value = config.Birthday.SymbolCount || 25;
document.querySelector('#BirthdaySymbolCountMobile').value = config.Birthday.SymbolCountMobile || 10;
document.querySelector('#BirthdayConfettiCount').value = config.Birthday.ConfettiCount || 60;
config.Birthday = config.Birthday || {};
// 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('#CarnivalObjectCountMobile').value = config.Carnival.ObjectCountMobile;
document.querySelector('#EnableDifferentDurationCarnival').checked = config.Carnival.EnableDifferentDuration;
// CherryBlossom
document.querySelector('#EnableCherryBlossom').checked = config.CherryBlossom.EnableCherryBlossom;
document.querySelector('#CherryBlossomPetalCount').value = config.CherryBlossom.PetalCount;
document.querySelector('#CherryBlossomPetalCountMobile').value = config.CherryBlossom.PetalCountMobile;
document.querySelector('#EnableDifferentDurationCherryBlossom').checked = config.CherryBlossom.EnableDifferentDuration;
// Christmas
document.querySelector('#EnableChristmas').checked = config.Christmas.EnableChristmas;
document.querySelector('#ChristmasCount').value = config.Christmas.SymbolCount;
document.querySelector('#ChristmasCountMobile').value = config.Christmas.SymbolCountMobile;
document.querySelector('#EnableDifferentDurationChristmas').checked = config.Christmas.EnableDifferentDuration;
// EarthDay
document.querySelector('#EnableEarthDay').checked = config.EarthDay.EnableEarthDay;
document.querySelector('#EarthDayVineCount').value = config.EarthDay.VineCount;
// Easter
document.querySelector('#EnableEaster').checked = config.Easter.EnableEaster;
document.querySelector('#EasterEggCount').value = config.Easter.EggCount;
document.querySelector('#EasterBunny').checked = config.Easter.EnableBunny;
document.querySelector('#MinBunnyRestTime').value = config.Easter.MinBunnyRestTime;
document.querySelector('#MaxBunnyRestTime').value = config.Easter.MaxBunnyRestTime;
// Eurovision
document.querySelector('#EnableEurovision').checked = config.Eurovision.EnableEurovision;
document.querySelector('#EurovisionSymbolCount').value = config.Eurovision.SymbolCount;
document.querySelector('#EurovisionSymbolCountMobile').value = config.Eurovision.SymbolCountMobile;
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;
// 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;
// Halloween
document.querySelector('#EnableHalloween').checked = config.Halloween.EnableHalloween;
document.querySelector('#HalloweenCount').value = config.Halloween.SymbolCount;
document.querySelector('#HalloweenCountMobile').value = config.Halloween.SymbolCountMobile;
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('#HeartsCountMobile').value = config.Hearts.SymbolCountMobile;
document.querySelector('#EnableDifferentDurationHearts').checked = config.Hearts.EnableDifferentDuration;
// Matrix
document.querySelector('#EnableMatrix').checked = config.Matrix.EnableMatrix;
document.querySelector('#MatrixSymbolCount').value = config.Matrix.SymbolCount;
document.querySelector('#MatrixSymbolCountMobile').value = config.Matrix.SymbolCountMobile;
document.querySelector('#MatrixChars').value = config.Matrix.MatrixChars !== undefined ? config.Matrix.MatrixChars : '0123456789';
document.querySelector('#EnableDifferentDurationMatrix').checked = config.Matrix.EnableDifferentDuration;
document.querySelector('#EnableMatrixBackground').checked = config.Matrix.EnableMatrixBackground !== undefined ? config.Matrix.EnableMatrixBackground : false;
// 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('#EnableDifferentDurationOlympia').checked = config.Olympia.EnableDifferentDuration !== false;
document.querySelector('#OlympiaSymbolCount').value = config.Olympia.SymbolCount || 25;
document.querySelector('#OlympiaSymbolCountMobile').value = config.Olympia.SymbolCountMobile || 10;
// 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;
// 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;
// Resurrection
document.querySelector('#EnableResurrection').checked = config.Resurrection.EnableResurrection;
document.querySelector('#ResurrectionSymbolCount').value = config.Resurrection.SymbolCount;
document.querySelector('#ResurrectionSymbolCountMobile').value = config.Resurrection.SymbolCountMobile;
document.querySelector('#EnableDifferentDurationResurrection').checked = config.Resurrection.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;
// 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;
// Snowflakes
document.querySelector('#SnowflakesCount').value = config.Snowflakes.SnowflakeCount;
document.querySelector('#SnowflakeCountMobile').value = config.Snowflakes.SnowflakeCountMobile;
document.querySelector('#EnableSnowflakes').checked = config.Snowflakes.EnableSnowflakes;
document.querySelector('#EnableColoredSnowflakes').checked = config.Snowflakes.EnableColoredSnowflakes;
document.querySelector('#EnableDifferentDurationSnowflakes').checked = config.Snowflakes.EnableDifferentDuration;
// 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;
// Space
document.querySelector('#EnableSpace').checked = config.Space.EnableSpace || false;
document.querySelector('#EnableDifferentDurationSpace').checked = config.Space.EnableDifferentDuration || false;
document.querySelector('#PlanetCount').value = config.Space.PlanetCount !== undefined ? config.Space.PlanetCount : 12;
document.querySelector('#AstronautCount').value = config.Space.AstronautCount !== undefined ? config.Space.AstronautCount : 5;
document.querySelector('#SatelliteCount').value = config.Space.SatelliteCount !== undefined ? config.Space.SatelliteCount : 2;
document.querySelector('#IssCount').value = config.Space.IssCount !== undefined ? config.Space.IssCount : 1;
document.querySelector('#RocketCount').value = config.Space.RocketCount !== undefined ? config.Space.RocketCount : 1;
document.querySelector('#SpaceSymbolCountMobile').value = config.Space.SymbolCountMobile !== undefined ? config.Space.SymbolCountMobile : 2;
// Spooky
document.querySelector('#SpookyCount').value = config.Spooky.SymbolCount !== undefined ? config.Spooky.SymbolCount : 25;
document.querySelector('#SpookyCountMobile').value = config.Spooky.SymbolCountMobile !== undefined ? config.Spooky.SymbolCountMobile : 10;
document.querySelector('#EnableSpooky').checked = config.Spooky.EnableSpooky !== undefined ? config.Spooky.EnableSpooky : true;
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;
document.querySelector('#EnableDifferentDurationSpooky').checked = config.Spooky.EnableDifferentDuration !== false;
// Sports
if (!config.Sports) config.Sports = { EnableSports: true, SymbolCount: 25, EnableRandomSymbols: true, EnableRandomSymbolsMobile: false, EnableDifferentDuration: true };
// Load Checkboxes
const savedBallsString = config.Sports.SportsBalls || 'football,basketball,tennis,volleyball';
const savedBalls = savedBallsString.split(',');
document.querySelector('#EnableSports').checked = config.Sports.EnableSports !== false;
document.querySelector('#EnableDifferentDurationSports').checked = config.Sports.EnableDifferentDuration !== false;
document.querySelector('#SportsSymbolCount').value = config.Sports.SymbolCount || 25;
document.querySelector('#SportsSymbolCountMobile').value = config.Sports.SymbolCountMobile || 10;
document.querySelector('#TurfColor').value = config.Sports.TurfColor || '#228b22';
document.querySelector('#EnableTrophy').checked = config.Sports.EnableTrophy !== false;
document.querySelectorAll('.sport-ball-cb').forEach(cb => {
// 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('#SpringSymbolCountMobile').value = config.Spring.SymbolCountMobile !== undefined ? config.Spring.SymbolCountMobile : 5;
// 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;
// Summer
document.querySelector('#EnableSummer').checked = config.Summer.EnableSummer;
document.querySelector('#SummerBubbleCount').value = config.Summer.BubbleCount;
document.querySelector('#SummerDustCount').value = config.Summer.DustCount;
document.querySelector('#SummerSymbolCountMobile').value = config.Summer.SymbolCountMobile;
document.querySelector('#EnableDifferentDurationSummer').checked = config.Summer.EnableDifferentDuration;
// Support for both new category string and legacy filename strings
cb.checked = savedBalls.some(b => b === cb.value || b.startsWith(cb.value + '_'));
});
// Underwater
document.querySelector('#EnableUnderwater').checked = config.Underwater.EnableUnderwater !== 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;
config.Underwater = config.Underwater || {};
document.querySelector('#EnableUnderwaterLightRays').checked = config.Underwater.EnableLightRays !== false;
document.querySelector('#UnderwaterSymbolCount').value = config.Underwater.SymbolCount || 15;
document.querySelector('#UnderwaterSymbolCountMobile').value = config.Underwater.SymbolCountMobile || 5;
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.LeafCountMobile = parseInt(document.querySelector('#AutumnLeafCountMobile').value);
config.Autumn.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationAutumn').checked;
config.Autumn.EnableRotation = document.querySelector('#EnableRotation').checked;
// Sports
if (!config.Sports) config.Sports = {};
config.Sports.EnableSports = document.querySelector('#EnableSports').checked;
config.Sports.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationSports').checked;
config.Sports.SymbolCount = parseInt(document.querySelector('#SportsSymbolCount').value);
config.Sports.SymbolCountMobile = parseInt(document.querySelector('#SportsSymbolCountMobile').value);
config.Sports.TurfColor = document.querySelector('#TurfColor').value;
config.Sports.EnableTrophy = document.querySelector('#EnableTrophy').checked;
// 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.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationOlympia').checked;
config.Olympia.SymbolCount = parseInt(document.querySelector('#OlympiaSymbolCount').value);
config.Olympia.SymbolCountMobile = parseInt(document.querySelector('#OlympiaSymbolCountMobile').value);
// Space
if (!config.Space) config.Space = {};
config.Space.EnableSpace = document.querySelector('#EnableSpace').checked;
config.Space.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationSpace').checked;
config.Space.PlanetCount = parseInt(document.querySelector('#PlanetCount').value);
config.Space.AstronautCount = parseInt(document.querySelector('#AstronautCount').value);
config.Space.SatelliteCount = parseInt(document.querySelector('#SatelliteCount').value);
config.Space.IssCount = parseInt(document.querySelector('#IssCount').value);
config.Space.RocketCount = parseInt(document.querySelector('#RocketCount').value);
config.Space.SymbolCountMobile = parseInt(document.querySelector('#SpaceSymbolCountMobile').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.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationBirthday').checked;
config.Birthday.SymbolCount = parseInt(document.querySelector('#BirthdaySymbolCount').value);
config.Birthday.SymbolCountMobile = parseInt(document.querySelector('#BirthdaySymbolCountMobile').value);
config.Birthday.ConfettiCount = parseInt(document.querySelector('#BirthdayConfettiCount').value);
// Snowflakes
config.Snowflakes.SnowflakeCount = parseInt(document.querySelector('#SnowflakesCount').value);
config.Snowflakes.SnowflakeCountMobile = parseInt(document.querySelector('#SnowflakeCountMobile').value);
config.Snowflakes.EnableSnowflakes = document.querySelector('#EnableSnowflakes').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.SymbolCountMobile = parseInt(document.querySelector('#HalloweenCountMobile').value);
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.SymbolCountMobile = parseInt(document.querySelector('#HeartsCountMobile').value);
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.SymbolCountMobile = parseInt(document.querySelector('#ChristmasCountMobile').value);
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.EnableBunny = document.querySelector('#EasterBunny').checked;
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.SymbolCountMobile = parseInt(document.querySelector('#ResurrectionSymbolCountMobile').value);
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.SymbolCountMobile = parseInt(document.querySelector('#SpookyCountMobile').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.SymbolCountMobile = parseInt(document.querySelector('#SpringSymbolCountMobile').value);
// 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.SymbolCountMobile = parseInt(document.querySelector('#SummerSymbolCountMobile').value);
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.ObjectCountMobile = parseInt(document.querySelector('#CarnivalObjectCountMobile').value);
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.PetalCountMobile = parseInt(document.querySelector('#CherryBlossomPetalCountMobile').value);
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.SymbolCountMobile = parseInt(document.querySelector('#EurovisionSymbolCountMobile').value);
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.SymbolCountMobile = parseInt(document.querySelector('#MatrixSymbolCountMobile').value);
config.Matrix.MatrixChars = document.querySelector('#MatrixChars').value;
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.SymbolCountMobile = parseInt(document.querySelector('#UnderwaterSymbolCountMobile').value);
config.Underwater.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationUnderwater').checked;
// Simple Themes (just on/off toggles)
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.MarioDay.LetMarioJump = document.querySelector('#LetMarioJump').checked;
config.StarWars.EnableStarWars = document.querySelector('#EnableStarWars').checked;
config.Oktoberfest.EnableOktoberfest = document.querySelector('#EnableOktoberfest').checked;
config.Friday13.EnableFriday13 = document.querySelector('#EnableFriday13').checked;
if (!config.Eid) config.Eid = {};
config.Eid.EnableEid = document.querySelector('#EnableEid').checked;
config.Eid.LanternCount = parseInt(document.querySelector('#EidLanternCount').value);
config.Eid.LanternCountMobile = parseInt(document.querySelector('#EidLanternCountMobile').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.EnableBunny = document.querySelector('#EasterBunny').checked;
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.SymbolCountMobile = parseInt(document.querySelector('#ResurrectionSymbolCountMobile').value);
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.SymbolCountMobile = parseInt(document.querySelector('#SpringSymbolCountMobile').value);
// 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.SymbolCountMobile = parseInt(document.querySelector('#SummerSymbolCountMobile').value);
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.ObjectCountMobile = parseInt(document.querySelector('#CarnivalObjectCountMobile').value);
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.PetalCountMobile = parseInt(document.querySelector('#CherryBlossomPetalCountMobile').value);
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.SymbolCountMobile = parseInt(document.querySelector('#EurovisionSymbolCountMobile').value);
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.SymbolCount = parseInt(document.querySelector('#BirthdaySymbolCount').value);
config.Birthday.SymbolCountMobile = parseInt(document.querySelector('#BirthdaySymbolCountMobile').value);
config.Birthday.ConfettiCount = parseInt(document.querySelector('#BirthdayConfettiCount').value);
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.SymbolCountMobile = parseInt(document.querySelector('#SportsSymbolCountMobile').value);
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.SymbolCountMobile = parseInt(document.querySelector('#OlympiaSymbolCountMobile').value);
config.Olympia.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationOlympia').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