feat: enhance configuration page with seasonal options and improve user guidance
This commit is contained in:
CodeDevMLH
@@ -8,6 +8,16 @@
|
||||
<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</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: 600px; margin: 1em 0;">
|
||||
<br>
|
||||
<form id="SeasonalsConfigForm">
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
@@ -33,348 +43,447 @@
|
||||
</select>
|
||||
<div class="fieldDescription">The season to display if automation is disabled.</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div is="emby-collapse" title="Advanced Configuration">
|
||||
<div class="collapseContent">
|
||||
<h3>Autumn</h3>
|
||||
<div class="checkboxContainer">
|
||||
<details>
|
||||
<summary>Advanced Configuration</summary>
|
||||
<p>Configure specific settings for each seasonal theme below.</p>
|
||||
<p>All symbol count settings add this number in addition to the standard 12 symbols (if random 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</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Enable the autumn theme effects in general.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomLeaves" name="EnableRandomLeaves" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Additional Random Leaves</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Displays leaves randomly distributed across the screen</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomLeavesMobile" name="EnableRandomLeavesMobile" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Additional Random Leaves on Mobile</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Displays leaves randomly distributed across the screen on mobile devices. Warning: High values may affect performance.</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="AutumnLeafCount">Leaf Count</label>
|
||||
<input is="emby-input" type="number" id="AutumnLeafCount" name="AutumnLeafCount" />
|
||||
<div class="fieldDescription">Number of additional leaves displayed on screen (if enabled)</div>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomLeaves" name="EnableRandomLeaves" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Random Leaves</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomLeavesMobile" name="EnableRandomLeavesMobile" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Random Leaves on Mobile (Warning: High values may affect performance)</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<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">
|
||||
<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: 600px; margin: 1em 0;">
|
||||
|
||||
<h3>Snowflakes</h3>
|
||||
<div class="checkboxContainer">
|
||||
<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</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Enable the snowflakes theme in general.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomSnowflakes" name="EnableRandomSnowflakes" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Additional Random Snowflakes</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Displays snowflakes randomly distributed across the screen.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomSnowflakesMobile" name="EnableRandomSnowflakesMobile" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Additional Random Snowflakes on Mobile</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Displays snowflakes randomly distributed across the screen on mobile devices. Warning: High values may affect performance.</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="SnowflakesCount">Snowflake Count</label>
|
||||
<input is="emby-input" type="number" id="SnowflakesCount" name="SnowflakesCount" />
|
||||
<div class="fieldDescription">Number of additional snowflakes displayed (if enabled).</div>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomSnowflakes" name="EnableRandomSnowflakes" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Random Snowflakes</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomSnowflakesMobile" name="EnableRandomSnowflakesMobile" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Random Snowflakes on Mobile (Warning: High values may affect performance)</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<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">
|
||||
<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: 600px; margin: 1em 0;">
|
||||
|
||||
<h3>Snowfall</h3>
|
||||
<div class="checkboxContainer">
|
||||
<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</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Enable the snowfall effect in general.</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">Warning: High values may affect performance</div>
|
||||
<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: 600px; margin: 1em 0;">
|
||||
|
||||
<h3>Snowstorm</h3>
|
||||
<div class="checkboxContainer">
|
||||
<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</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Enable the snowstorm effect in general.</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">Warning: High values may affect performance</div>
|
||||
<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: 600px; margin: 1em 0;">
|
||||
|
||||
<h3>Fireworks</h3>
|
||||
<div class="checkboxContainer">
|
||||
<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</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Enable the fireworks effect in general.</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">Warning: High values may affect performance</div>
|
||||
<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">
|
||||
<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: 600px; margin: 1em 0;">
|
||||
|
||||
<h3>Halloween</h3>
|
||||
<div class="checkboxContainer">
|
||||
<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</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Enable the Halloween theme in general.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomHalloween" name="EnableRandomHalloween" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Additional Random Symbols</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Displays Halloween symbols randomly distributed across the screen.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomHalloweenMobile" name="EnableRandomHalloweenMobile" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Additional Random Symbols on Mobile</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Displays Halloween symbols randomly distributed across the screen on mobile devices. Warning: High values may affect performance.</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="HalloweenCount">Symbol Count</label>
|
||||
<input is="emby-input" type="number" id="HalloweenCount" name="HalloweenCount" />
|
||||
<div class="fieldDescription">Number of additional Halloween symbols (pumpkins, ghosts, etc.) on screen (if enabled).</div>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomHalloween" name="EnableRandomHalloween" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Random Symbols</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomHalloweenMobile" name="EnableRandomHalloweenMobile" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Random Symbols on Mobile (Warning: High values may affect performance)</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<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>
|
||||
</details>
|
||||
<hr style="max-width: 600px; margin: 1em 0;">
|
||||
|
||||
<h3>Hearts</h3>
|
||||
<div class="checkboxContainer">
|
||||
<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</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Enable the Hearts theme in general.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomHearts" name="EnableRandomHearts" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Additional Random Symbols</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Displays hearts randomly distributed across the screen.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomHeartsMobile" name="EnableRandomHeartsMobile" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Additional Random Symbols on Mobile</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Displays hearts randomly distributed across the screen. on mobile devices. Warning: High values may affect performance.</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="HeartsCount">Symbol Count</label>
|
||||
<input is="emby-input" type="number" id="HeartsCount" name="HeartsCount" />
|
||||
<div class="fieldDescription">Number of additional floating hearts.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomHearts" name="EnableRandomHearts" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Random Symbols</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomHeartsMobile" name="EnableRandomHeartsMobile" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Random Symbols on Mobile (Warning: High values may affect performance)</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<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: 600px; margin: 1em 0;">
|
||||
|
||||
<h3>Christmas</h3>
|
||||
<div class="checkboxContainer">
|
||||
<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</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Enable the Christmas theme in general.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomChristmas" name="EnableRandomChristmas" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Additional Random Christmas</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Displays Christmas-themed icons randomly distributed across the screen.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomChristmasMobile" name="EnableRandomChristmasMobile" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Additional Random Christmas on Mobile</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Displays Christmas-themed icons randomly distributed across the screen on mobile devices. Warning: High values may affect performance.</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="ChristmasCount">Symbol Count</label>
|
||||
<input is="emby-input" type="number" id="ChristmasCount" name="ChristmasCount" />
|
||||
<div class="fieldDescription">Number of additional Christmas symbols.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomChristmas" name="EnableRandomChristmas" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Random Christmas</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomChristmasMobile" name="EnableRandomChristmasMobile" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Random Christmas on Mobile (Warning: High values may affect performance)</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<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: 600px; margin: 1em 0;">
|
||||
|
||||
<h3>Santa</h3>
|
||||
<div class="checkboxContainer">
|
||||
<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</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Enable the Santa theme in general.</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">Warning: High values may affect performance</div>
|
||||
<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: 600px; margin: 1em 0;">
|
||||
|
||||
<h3>Easter</h3>
|
||||
<div class="checkboxContainer">
|
||||
<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</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Enable the Easter theme in general.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomEaster" name="EnableRandomEaster" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Additional Random Easter Eggs</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Displays easter eggs randomly distributed across the screen.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomEasterMobile" name="EnableRandomEasterMobile" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Additional Random Easter Eggs on Mobile</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Displays easter eggs randomly distributed across the screen on mobile devices. Warning: High values may affect performance.</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="EasterEggCount">Egg Count</label>
|
||||
<input is="emby-input" type="number" id="EasterEggCount" name="EasterEggCount" />
|
||||
<div class="fieldDescription">Number of additional Easter eggs (if enabled).</div>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomEaster" name="EnableRandomEaster" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Random Easter</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomEasterMobile" name="EnableRandomEasterMobile" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Random Easter on Mobile (Warning: High values may affect performance)</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableDifferentDurationEaster" name="EnableDifferentDurationEaster" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Different Duration</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Randomize the movement speed.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer">
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EasterBunny" name="EasterBunny" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Bunny</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Show the Easter Bunny hopping across the screen.</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="BunnyDuration">Bunny Duration (ms)</label>
|
||||
<input is="emby-input" type="number" id="BunnyDuration" name="BunnyDuration" />
|
||||
<div class="fieldDescription">Time in milliseconds for one hop cycle.</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="HopHeight">Hop Height (px)</label>
|
||||
<input is="emby-input" type="number" id="HopHeight" name="HopHeight" />
|
||||
<div class="fieldDescription">Height of the bunny's hop in pixels.</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="MinBunnyRestTime">Min Bunny Rest Time (ms)</label>
|
||||
<input is="emby-input" type="number" id="MinBunnyRestTime" name="MinBunnyRestTime" />
|
||||
<div class="fieldDescription">Minimum time the bunny waits before appearing again.</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="MaxBunnyRestTime">Max Bunny Rest Time (ms)</label>
|
||||
<input is="emby-input" type="number" id="MaxBunnyRestTime" name="MaxBunnyRestTime" />
|
||||
<div class="fieldDescription">Maximum time the bunny waits before appearing again.</div>
|
||||
</div>
|
||||
</details>
|
||||
</details>
|
||||
|
||||
<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>
|
||||
|
||||
@@ -385,7 +494,6 @@
|
||||
<button is="emby-button" type="button" class="raised button-cancel block btnCancel" onclick="history.back();">
|
||||
<span>${ButtonCancel}</span>
|
||||
</button>
|
||||
<div class="fieldDescription" style="margin-top: 1em;">Please reload the page (F5) after saving for changes to take effect.</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,7 @@ const santaIsFlying = config.enableSanta !== undefined ? config.enableSanta : tr
|
||||
let snowflakesCount = config.snowflakesCount || 500; // count of snowflakes (recommended values: 300-600)
|
||||
const snowflakesCountMobile = config.snowflakesCountMobile || 250; // count of snowflakes on mobile devices (Warning: High values may affect performance)
|
||||
const snowFallSpeed = config.snowFallSpeed || 3; // speed of snowfall (recommended values: 0-5)
|
||||
const santaSpeed = config.santaSpeed || 10; // speed of santa in seconds (recommended values: 5000-15000)
|
||||
const santaSpeed = config.santaSpeed || 10; // speed of santa in seconds (recommended values: 5-15)
|
||||
const santaSpeedMobile = config.santaSpeedMobile || 8; // speed of santa on mobile devices in seconds
|
||||
const maxSantaRestTime = config.maxSantaRestTime || 8; // maximum time santa rests in seconds
|
||||
const minSantaRestTime = config.minSantaRestTime || 3; // minimum time santa rests in seconds
|
||||
|
||||
Reference in New Issue
Block a user