feat: update seasonal effects settings and enhance z-index for better visibility

Jellyfin.Plugin.Seasonals/Configuration/configPage.html

@@ -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: 800px; 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">
+                    <details>
-                        <div class="collapseContent">
+                        <summary>Advanced Configuration</summary>
-                            <h3>Autumn</h3>
+                        <p>Configure specific settings for each seasonal theme below.</p>
-                            <div class="checkboxContainer">
+                        <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">
+                            <div class="checkboxContainer checkboxContainer-withDescription">
-                                <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">
                                 <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: 800px; margin: 1em 0;">
 
-                            <h3>Snowflakes</h3>
+                        <details>
-                            <div class="checkboxContainer">
+                            <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">
+                            <div class="checkboxContainer checkboxContainer-withDescription">
-                                <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">
                                 <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: 800px; margin: 1em 0;">
 
-                            <h3>Snowfall</h3>
+                        <details>
-                            <div class="checkboxContainer">
+                            <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: 800px; margin: 1em 0;">
 
-                            <h3>Snowstorm</h3>
+                        <details>
-                            <div class="checkboxContainer">
+                            <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: 800px; margin: 1em 0;">
 
-                            <h3>Fireworks</h3>
+                        <details>
-                            <div class="checkboxContainer">
+                            <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: 800px; margin: 1em 0;">
 
-                            <h3>Halloween</h3>
+                        <details>
-                            <div class="checkboxContainer">
+                            <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">
+                            <div class="checkboxContainer checkboxContainer-withDescription">
-                                <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">
                                 <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: 800px; margin: 1em 0;">
 
-                            <h3>Hearts</h3>
+                        <details>
-                            <div class="checkboxContainer">
+                            <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">
+                            <div class="checkboxContainer checkboxContainer-withDescription">
-                                <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">
                                 <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;">
 
-                            <h3>Christmas</h3>
+                        <details>
-                            <div class="checkboxContainer">
+                            <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">
+                            <div class="checkboxContainer checkboxContainer-withDescription">
-                                <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">
                                 <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;">
 
-                            <h3>Santa</h3>
+                        <details>
-                            <div class="checkboxContainer">
+                            <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: 800px; margin: 1em 0;">
 
-                            <h3>Easter</h3>
+                        <details>
-                            <div class="checkboxContainer">
+                            <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">
+                            <div class="checkboxContainer checkboxContainer-withDescription">
-                                <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">
                                 <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>

Jellyfin.Plugin.Seasonals/Jellyfin.Plugin.Seasonals.csproj

@@ -12,13 +12,14 @@
     <!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
     <Title>Jellyfin Seasonals Plugin</Title>
     <Authors>CodeDevMLH</Authors>
-    <Version>1.1.0.0</Version>
+    <Version>1.2.0.0</Version>
     <RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-seasonals</RepositoryUrl>
   </PropertyGroup>
 
   <ItemGroup>
     <PackageReference Include="Jellyfin.Controller" Version="$(JellyfinVersion)" />
     <PackageReference Include="Jellyfin.Model" Version="$(JellyfinVersion)" />
+    <PackageReference Include="Newtonsoft.Json" Version="13.0.4" />
   </ItemGroup>
 
   <ItemGroup>

Jellyfin.Plugin.Seasonals/Plugin.cs

@@ -1,12 +1,17 @@
 using System;
 using System.Collections.Generic;
 using System.Globalization;
+using System.Linq;
+using System.Reflection;
+using System.Runtime.Loader;
 using Jellyfin.Plugin.Seasonals.Configuration;
 using MediaBrowser.Common.Configuration;
 using MediaBrowser.Common.Plugins;
 using MediaBrowser.Model.Plugins;
 using MediaBrowser.Model.Serialization;
 using Microsoft.Extensions.Logging;
+using Newtonsoft.Json;
+using Newtonsoft.Json.Linq;
 
 namespace Jellyfin.Plugin.Seasonals;
 
@@ -28,7 +33,10 @@ public class Plugin : BasePlugin<PluginConfiguration>, IHasWebPages
     {
         Instance = this;
         _scriptInjector = new ScriptInjector(applicationPaths, loggerFactory.CreateLogger<ScriptInjector>());
-        _scriptInjector.Inject();
+        if (!_scriptInjector.Inject())
+        {
+            TryRegisterFallback(loggerFactory.CreateLogger("FileTransformationFallback"));
+        }
     }
 
     /// <inheritdoc />
@@ -42,16 +50,99 @@ public class Plugin : BasePlugin<PluginConfiguration>, IHasWebPages
     /// </summary>
     public static Plugin? Instance { get; private set; }
 
+    /// <summary>
+    /// Callback method for FileTransformation plugin.
+    /// </summary>
+    /// <param name="payload">The payload containing the file contents.</param>
+    /// <returns>The modified file contents.</returns>
+    public static string TransformIndexHtml(JObject payload)
+    {
+        // CRITICAL: Always return original content if something fails or is null
+        string? originalContents = payload?["contents"]?.ToString();
+        
+        if (string.IsNullOrEmpty(originalContents))
+        {
+            return originalContents ?? string.Empty;
+        }
+
+        try
+        {
+            var html = originalContents;
+            const string inject = "<script src=\"/Seasonals/Resources/seasonals.js\"></script>\n<body";
+            
+            if (!html.Contains("seasonals.js", StringComparison.Ordinal))
+            {
+                return html.Replace("<body", inject, StringComparison.OrdinalIgnoreCase);
+            }
+            
+            return html;
+        }
+        catch
+        {
+            // On error, return original content to avoid breaking the UI
+            return originalContents;
+        }
+    }
+
+    private void TryRegisterFallback(ILogger logger)
+    {
+        try
+        {
+            // Find the FileTransformation assembly across all load contexts
+            var assembly = AssemblyLoadContext.All
+                .SelectMany(x => x.Assemblies)
+                .FirstOrDefault(x => x.FullName?.Contains(".FileTransformation") ?? false);
+
+            if (assembly == null)
+            {
+                logger.LogWarning("FileTransformation plugin not found. Fallback injection skipped.");
+                return;
+            }
+
+            var type = assembly.GetType("Jellyfin.Plugin.FileTransformation.PluginInterface");
+            if (type == null)
+            {
+                logger.LogWarning("Jellyfin.Plugin.FileTransformation.PluginInterface not found.");
+                return;
+            }
+
+            var method = type.GetMethod("RegisterTransformation");
+            if (method == null)
+            {
+                logger.LogWarning("RegisterTransformation method not found.");
+                return;
+            }
+
+            // Create JObject payload directly using Newtonsoft.Json
+            var payload = new JObject
+            {
+                { "id", Id.ToString() },
+                { "fileNamePattern", "index.html" },
+                { "callbackAssembly", this.GetType().Assembly.FullName },
+                { "callbackClass", this.GetType().FullName },
+                { "callbackMethod", nameof(TransformIndexHtml) }
+            };
+
+            // Invoke RegisterTransformation with the JObject payload
+            method.Invoke(null, new object[] { payload });
+            logger.LogInformation("Successfully registered fallback transformation via FileTransformation plugin.");
+        }
+        catch (Exception ex)
+        {
+            logger.LogError(ex, "Error attempting to register fallback transformation.");
+        }
+    }
+
     /// <inheritdoc />
     public IEnumerable<PluginPageInfo> GetPages()
     {
-        return
+        return new[]
-        [
+        {
             new PluginPageInfo
             {
                 Name = Name,
                 EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Configuration.configPage.html", GetType().Namespace)
             }
-        ];
+        };
     }
 }

Jellyfin.Plugin.Seasonals/ScriptInjector.cs

@@ -13,7 +13,7 @@ public class ScriptInjector
 {
     private readonly IApplicationPaths _appPaths;
     private readonly ILogger<ScriptInjector> _logger;
-    private const string ScriptTag = "<script src=\"Seasonals/Resources/seasonals.js\"></script>";
+    private const string ScriptTag = "<script src=\"/Seasonals/Resources/seasonals.js\"></script>";
     private const string Marker = "</body>";
 
     /// <summary>
@@ -30,7 +30,8 @@ public class ScriptInjector
     /// <summary>
     /// Injects the script tag into index.html if it's not already present.
     /// </summary>
-    public void Inject()
+    /// <returns>True if injection was successful or already present, false otherwise.</returns>
+    public bool Inject()
     {
         try
         {
@@ -38,21 +39,21 @@ public class ScriptInjector
             if (string.IsNullOrEmpty(webPath))
             {
                 _logger.LogWarning("Could not find Jellyfin web path. Script injection skipped.");
-                return;
+                return false;
             }
 
             var indexPath = Path.Combine(webPath, "index.html");
             if (!File.Exists(indexPath))
             {
                 _logger.LogWarning("index.html not found at {Path}. Script injection skipped.", indexPath);
-                return;
+                return false;
             }
 
             var content = File.ReadAllText(indexPath);
             if (content.Contains(ScriptTag, StringComparison.Ordinal))
             {
                 _logger.LogInformation("Seasonals script already injected.");
-                return;
+                return true;
             }
 
             // Insert before the closing body tag
@@ -60,15 +61,22 @@ public class ScriptInjector
             if (string.Equals(newContent, content, StringComparison.Ordinal))
             {
                 _logger.LogWarning("Could not find closing body tag in index.html. Script injection skipped.");
-                return;
+                return false;
             }
 
             File.WriteAllText(indexPath, newContent);
             _logger.LogInformation("Successfully injected Seasonals script into index.html.");
+            return true;
+        }
+        catch (UnauthorizedAccessException)
+        {
+            _logger.LogWarning("Permission denied when attempting to inject script into index.html. Automatic injection failed. Please ensure the Jellyfin web directory is writable by the process, or manually add the script tag: {ScriptTag}", ScriptTag);
+            return false;
         }
         catch (Exception ex)
         {
             _logger.LogError(ex, "Error injecting Seasonals script.");
+            return false;
         }
     }
 
@@ -104,6 +112,10 @@ public class ScriptInjector
             File.WriteAllText(indexPath, newContent);
             _logger.LogInformation("Successfully removed Seasonals script from index.html.");
         }
+        catch (UnauthorizedAccessException)
+        {
+            _logger.LogWarning("Permission denied when attempting to remove script from index.html.");
+        }
         catch (Exception ex)
         {
             _logger.LogError(ex, "Error removing Seasonals script.");

Jellyfin.Plugin.Seasonals/Web/autumn.css

@@ -1,7 +1,7 @@
 .autumn-container {
   display: block;
   pointer-events: none;
-  z-index: 0;
+  z-index: 10;
   overflow: hidden;
 }
 

Jellyfin.Plugin.Seasonals/Web/christmas.css

@@ -1,7 +1,7 @@
 .christmas-container {
   display: block;
   pointer-events: none;
-  z-index: 0;
+  z-index: 10;
   overflow: hidden;
 }
 

Jellyfin.Plugin.Seasonals/Web/easter.css

@@ -1,7 +1,7 @@
 .easter-container {
     display: block;
     pointer-events: none;
-    z-index: 0;
+    z-index: 10;
     overflow: hidden;
 }
 

Jellyfin.Plugin.Seasonals/Web/halloween.css

@@ -1,7 +1,7 @@
 .halloween-container {
     display: block;
     pointer-events: none;
-    z-index: 0;
+    z-index: 10;
     overflow: hidden;
 }
 

Jellyfin.Plugin.Seasonals/Web/hearts.css

@@ -1,7 +1,7 @@
 .hearts-container {
     display: block;
     pointer-events: none;
-    z-index: 0;
+    z-index: 10;
     overflow: hidden;
 }
 

Jellyfin.Plugin.Seasonals/Web/santa.css

@@ -5,6 +5,7 @@
     background: transparent;
     overflow: hidden;
     pointer-events: none;
+    z-index: 10;
 }
 
 #snowfallCanvas {

Jellyfin.Plugin.Seasonals/Web/santa.js

@@ -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

Jellyfin.Plugin.Seasonals/Web/seasonals.js

@@ -162,6 +162,7 @@ async function initializeTheme() {
             automateThemeSelection = config.automateSeasonSelection;
             defaultTheme = config.selectedSeason;
             window.SeasonalsPluginConfig = config;
+            console.log('Seasonals Config loaded:', config);
         } else {
             console.error('Failed to fetch Seasonals config');
         }
@@ -170,7 +171,7 @@ async function initializeTheme() {
     }
 
     let currentTheme;
-    if (!automateThemeSelection) {
+    if (automateThemeSelection === false) {
         currentTheme = defaultTheme;
     } else {
         currentTheme = determineCurrentTheme();
@@ -178,7 +179,7 @@ async function initializeTheme() {
 
     console.log(`Selected theme: ${currentTheme}`);
 
-    if (currentTheme === 'none') {
+    if (!currentTheme || currentTheme === 'none') {
         console.log('No theme selected.');
         removeSelf();
         return;
@@ -200,8 +201,9 @@ async function initializeTheme() {
     removeSelf();
 }
 
-
+// Ensure DOM is ready before initializing
-//document.addEventListener('DOMContentLoaded', initializeTheme);
+if (document.readyState === 'loading') {
-document.addEventListener('DOMContentLoaded', () => {
+    document.addEventListener('DOMContentLoaded', initializeTheme);
+} else {
     initializeTheme();
-});
+}

Jellyfin.Plugin.Seasonals/Web/snowfall.css

@@ -5,6 +5,7 @@
     background: transparent;
     overflow: hidden;
     pointer-events: none;
+    z-index: 10;
 }
 
 #snowfallCanvas {

Jellyfin.Plugin.Seasonals/Web/snowflakes.css

@@ -1,7 +1,7 @@
 .snowflakes {
   display: block;
   pointer-events: none;
-  z-index: 0;
+  z-index: 10;
   overflow: hidden;
 }
 

Jellyfin.Plugin.Seasonals/Web/snowstorm.css

@@ -4,4 +4,5 @@
     border-radius: 50%;
     pointer-events: none;
     opacity: 0.7;
+    z-index: 10;
 }

README.md

@@ -14,13 +14,17 @@ This plugin is based on my manual mod (see the [legacy branch](https://github.co
   - [Features](#features)
   - [Overview](#overview)
   - [Installation](#installation)
-  - [Usage](#usage)
+  - [Configuration](#configuration)
   - [Automatic Theme Selection](#automatic-theme-selection)
+  - [Theme Settings](#theme-settings)
   - [Build Process](#build-process)
+  - [Troubleshooting](#troubleshooting)
+    - [Effects Not Showing](#effects-not-showing)
+    - [Docker Permission Issues](#docker-permission-issues)
   - [Contributing](#contributing)
   - [Legacy Manual Installation](#legacy-manual-installation)
     - [Installation](#installation-1)
-    - [Usage](#usage-1)
+    - [Usage](#usage)
     - [Additional Directory: Separate Single Seasonals](#additional-directory-separate-single-seasonals)
 
 ---
@@ -83,14 +87,14 @@ To install this plugin, you will first need to add the repository in Jellyfin.
 9.  **Restart your Jellyfin server.**
 10. **You may need to refresh your browser page** (F5 or Ctrl+R) to see the changes. 
 
-## Usage
+## Configuration
 
 After installation and restart:
 
 1.  Go to **Dashboard** > **Plugins** > **Seasonals**.
 2.  **Enable Seasonals**: Toggle the plugin on or off.
 3.  **Automatic Selection**:
-    *   If enabled, the plugin selects the theme based on the current date (e.g., Snow in Winter, Hearts in February).
+    *   If enabled, the plugin selects the theme based on the current date (e.g., Snow in Winter, Hearts in February). See the table below for details.
     *   If disabled, you can manually select a theme from the dropdown list.
 4.  **Save** your settings.
 5.  **Reload your browser page** (F5 or Ctrl+R) to see the changes.
@@ -112,6 +116,9 @@ If automatic selection is enabled, the following themes are applied based on the
 
 > **Note:** Holiday themes (like `santa` or `fireworks`) override monthly seasonal themes (like `snowflakes`).
 
+## Theme Settings
+Each theme contains additional settings to customize its behavior. Expand the advanced configuration section to configure each theme, adjust parameters like particle count, animation speed etc.
+
 ## Build Process
 
 If you want to build the plugin yourself:
@@ -124,6 +131,58 @@ If you want to build the plugin yourself:
     ```
 4.  The compiled DLL and resources will be in bin/Publish.
 
+## Troubleshooting
+
+### Effects Not Showing
+1. **Verify plugin installation**:
+   - Check that the plugin appears in the jellyfin admin panel
+   - Ensure that the plugin is enabled and active
+
+2. **Clear browser cache**:
+   - Force refresh browser (Ctrl+F5)
+   - Clear jellyfin web client cache (--> mostly you have to clear the whole browser cache)
+
+### Docker Permission Issues
+If you encounter the message `Access was denied when attempting to inject script into index.html. Automatic direct injection failed. Automatic direct insertion failed. The system will now attempt to use the File Transformation plugin.` in the log or similar permission errors in Docker:
+
+**Option 1: Use File Transformation Plugin (Recommended)**
+
+Seasonals now automatically detects and uses the [File Transformation](https://github.com/IAmParadox27/jellyfin-plugin-file-transformation) plugin (v2.5.0.0+) if it's installed. This eliminates permission issues by transforming content at runtime without modifying files on disk.
+
+**Installation Steps:**
+1. Install the File Transformation plugin from the Jellyfin plugin catalog
+2. Restart Jellyfin
+3. Seasonals will automatically detect and use it (no configuration needed)
+4. Check logs to confirm: Look for "Successfully registered transformation with File Transformation plugin"
+
+**Benefits:**
+- No file permission issues in Docker environments
+- Works with read-only web directories
+- Survives Jellyfin updates without re-injection
+- No manual file modifications required
+
+**Option 2: Fix File Permissions**
+```bash
+# Find the actual index.html location
+docker exec -it jellyfin find / -name index.html
+
+# Fix ownership (replace 'jellyfin' with your container name and adjust user:group if needed)
+docker exec -it --user root jellyfin chown jellyfin:jellyfin /jellyfin/jellyfin-web/index.html
+
+# Restart container
+docker restart jellyfin
+```
+
+**Option 3: Manual Volume Mapping**
+```bash
+# Extract index.html from container
+docker cp jellyfin:/jellyfin/jellyfin-web/index.html /path/to/jellyfin/config/index.html
+
+# Add to docker-compose.yml volumes section:
+volumes:
+  - /path/to/jellyfin/config/index.html:/jellyfin/jellyfin-web/index.html
+```
+
 ## Contributing
 
 Feel free to contribute to this project by creating pull requests or reporting issues.

bin/Publish/Jellyfin.Plugin.Seasonals.deps.json

@@ -6,10 +6,11 @@
   "compilationOptions": {},
   "targets": {
     ".NETCoreApp,Version=v9.0": {
-      "Jellyfin.Plugin.Seasonals/1.1.0.0": {
+      "Jellyfin.Plugin.Seasonals/1.2.0.0": {
         "dependencies": {
           "Jellyfin.Controller": "10.11.0",
-          "Jellyfin.Model": "10.11.0"
+          "Jellyfin.Model": "10.11.0",
+          "Newtonsoft.Json": "13.0.4"
         },
         "runtime": {
           "Jellyfin.Plugin.Seasonals.dll": {}
@@ -326,6 +327,14 @@
           }
         }
       },
+      "Newtonsoft.Json/13.0.4": {
+        "runtime": {
+          "lib/net6.0/Newtonsoft.Json.dll": {
+            "assemblyVersion": "13.0.0.0",
+            "fileVersion": "13.0.4.30916"
+          }
+        }
+      },
       "Polly/8.6.4": {
         "dependencies": {
           "Polly.Core": "8.6.4"
@@ -363,7 +372,7 @@
     }
   },
   "libraries": {
-    "Jellyfin.Plugin.Seasonals/1.1.0.0": {
+    "Jellyfin.Plugin.Seasonals/1.2.0.0": {
       "type": "project",
       "serviceable": false,
       "sha512": ""
@@ -578,6 +587,13 @@
       "path": "nebml/1.1.0.5",
       "hashPath": "nebml.1.1.0.5.nupkg.sha512"
     },
+    "Newtonsoft.Json/13.0.4": {
+      "type": "package",
+      "serviceable": true,
+      "sha512": "sha512-pdgNNMai3zv51W5aq268sujXUyx7SNdE2bj1wZcWjAQrKMFZV260lbqYop1d2GM67JI1huLRwxo9ZqnfF/lC6A==",
+      "path": "newtonsoft.json/13.0.4",
+      "hashPath": "newtonsoft.json.13.0.4.nupkg.sha512"
+    },
     "Polly/8.6.4": {
       "type": "package",
       "serviceable": true,

build.yaml

@@ -1,7 +1,7 @@
 ---
 name: "Seasonals"
 guid: "ef1e863f-cbb0-4e47-9f23-f0cbb1826ad4"
-version: "1.1.0.0"
+version: "1.2.0.0"
 targetAbi: "10.11.0.0"
 framework: "net9.0"
 overview: "Seasonal effects for Jellyfin"

manifest.json

@@ -8,13 +8,29 @@
     "category": "General",
     "imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/raw/branch/main/logo.png",
     "versions": [
+      {
+        "version": "1.3.0.0",
+        "changelog": "Advanced settings added: Users can now customize the intensity and speed of seasonal effects through the settings panel.",
+        "targetAbi": "10.11.0.0",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/releases/download/v1.3.0.0/Jellyfin.Plugin.Seasonals.zip",
+        "checksum": "3c469c92a5c10a08a4d1cb8e6f387df3",
+        "timestamp": "2025-12-17T21:23:20Z"
+      },
+      {
+        "version": "1.2.0.0",
+        "changelog": "Advanced settings added: Users can now customize the intensity and speed of seasonal effects through the settings panel.",
+        "targetAbi": "10.11.0.0",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/releases/download/v1.2.0.0/Jellyfin.Plugin.Seasonals.zip",
+        "checksum": "5e18022c914c06072035dc0b4429e0fe",
+        "timestamp": "2025-12-17T20:59:37Z"
+      },
       {
         "version": "1.1.0.0",
-        "changelog": "Added Advanced Configuration UI for customizing individual seasonal effects.",
+        "changelog": "Bug fixing: Fix path, fix injection issue, added File Transformator as fallback if direct injection is blocked due to permissions.",
         "targetAbi": "10.11.0.0",
         "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/releases/download/v1.1.0.0/Jellyfin.Plugin.Seasonals.zip",
-        "checksum": "efc26cf0d09b313c52c089fc43df12ab",
+        "checksum": "be2e93364396b6e0e02368d5a7db53bc",
-        "timestamp": "2025-12-16T00:22:10Z"
+        "timestamp": "2025-12-17T15:32:08Z"
       },
       {
         "version": "1.0.0.0",