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

Enhanced JavaScript files for autumn, christmas, easter, fireworks, halloween, hearts, santa, snowfall, snowflakes, and snowstorm to support configuration options via window.SeasonalsPluginConfig.

Added automatic theme selection based on date in README.md.

Jellyfin.Plugin.Seasonals/Api/SeasonalsController.cs

@@ -21,12 +21,7 @@ public class SeasonalsController : ControllerBase
     [Produces("application/json")]
     public ActionResult<object> GetConfig()
     {
-        var config = Plugin.Instance?.Configuration;
-        return new
-        {
-            selectedSeason = config?.SelectedSeason ?? "none",
-            automateSeasonSelection = config?.AutomateSeasonSelection ?? true
-        };
+        return Plugin.Instance?.Configuration ?? new object();
     }
 
     /// <summary>

Jellyfin.Plugin.Seasonals/Configuration/PluginConfiguration.cs

@@ -14,6 +14,17 @@ public class PluginConfiguration : BasePluginConfiguration
     {
         SelectedSeason = "none";
         AutomateSeasonSelection = true;
+        
+        Autumn = new AutumnOptions();
+        Snowflakes = new SnowflakesOptions();
+        Snowfall = new SnowfallOptions();
+        Snowstorm = new SnowstormOptions();
+        Fireworks = new FireworksOptions();
+        Halloween = new HalloweenOptions();
+        Hearts = new HeartsOptions();
+        Christmas = new ChristmasOptions();
+        Santa = new SantaOptions();
+        Easter = new EasterOptions();
     }
 
     /// <summary>
@@ -25,4 +36,118 @@ public class PluginConfiguration : BasePluginConfiguration
     /// Gets or sets a value indicating whether to automate season selection.
     /// </summary>
     public bool AutomateSeasonSelection { get; set; }
+
+    public AutumnOptions Autumn { get; set; }
+    public SnowflakesOptions Snowflakes { get; set; }
+    public SnowfallOptions Snowfall { get; set; }
+    public SnowstormOptions Snowstorm { get; set; }
+    public FireworksOptions Fireworks { get; set; }
+    public HalloweenOptions Halloween { get; set; }
+    public HeartsOptions Hearts { get; set; }
+    public ChristmasOptions Christmas { get; set; }
+    public SantaOptions Santa { get; set; }
+    public EasterOptions Easter { get; set; }
+}
+
+public class AutumnOptions
+{
+    public int LeafCount { get; set; } = 25;
+    public bool EnableAutumn { get; set; } = true;
+    public bool EnableRandomLeaves { get; set; } = true;
+    public bool EnableRandomLeavesMobile { get; set; } = false;
+    public bool EnableDifferentDuration { get; set; } = true;
+    public bool EnableRotation { get; set; } = false;
+}
+
+public class SnowflakesOptions
+{
+    public int SnowflakeCount { get; set; } = 25;
+    public bool EnableSnowflakes { get; set; } = true;
+    public bool EnableRandomSnowflakes { get; set; } = true;
+    public bool EnableRandomSnowflakesMobile { get; set; } = false;
+    public bool EnableColoredSnowflakes { get; set; } = true;
+    public bool EnableDifferentDuration { get; set; } = true;
+}
+
+public class SnowfallOptions
+{
+    public int SnowflakesCount { get; set; } = 500;
+    public int SnowflakesCountMobile { get; set; } = 250;
+    public double Speed { get; set; } = 3;
+    public bool EnableSnowfall { get; set; } = true;
+}
+
+public class SnowstormOptions
+{
+    public int SnowflakesCount { get; set; } = 500;
+    public int SnowflakesCountMobile { get; set; } = 250;
+    public double Speed { get; set; } = 6;
+    public bool EnableSnowstorm { get; set; } = true;
+    public double HorizontalWind { get; set; } = 4;
+    public double VerticalVariation { get; set; } = 2;
+}
+
+public class FireworksOptions
+{
+    public int ParticleCount { get; set; } = 50;
+    public int LaunchInterval { get; set; } = 3200;
+    public bool EnableFireworks { get; set; } = true;
+    public bool ScrollFireworks { get; set; } = true;
+    public int MinFireworks { get; set; } = 3;
+    public int MaxFireworks { get; set; } = 6;
+}
+
+public class HalloweenOptions
+{
+    public int SymbolCount { get; set; } = 25;
+    public bool EnableHalloween { get; set; } = true;
+    public bool EnableRandomSymbols { get; set; } = true;
+    public bool EnableRandomSymbolsMobile { get; set; } = false;
+    public bool EnableDifferentDuration { get; set; } = true;
+}
+
+public class HeartsOptions
+{
+    public int SymbolCount { get; set; } = 25;
+    public bool EnableHearts { get; set; } = true;
+    public bool EnableRandomSymbols { get; set; } = true;
+    public bool EnableRandomSymbolsMobile { get; set; } = false;
+    public bool EnableDifferentDuration { get; set; } = true;
+}
+
+public class ChristmasOptions
+{
+    public int SymbolCount { get; set; } = 25;
+    public bool EnableChristmas { get; set; } = true;
+    public bool EnableRandomChristmas { get; set; } = true;
+    public bool EnableRandomChristmasMobile { get; set; } = false;
+    public bool EnableDifferentDuration { get; set; } = true;
+}
+
+public class SantaOptions
+{
+    public int SnowflakesCount { get; set; } = 500;
+    public int SnowflakesCountMobile { get; set; } = 250;
+    public double SantaSpeed { get; set; } = 10;
+    public double SantaSpeedMobile { get; set; } = 8;
+    public bool EnableSanta { get; set; } = true;
+    public double SnowFallSpeed { get; set; } = 3;
+    public double MaxSantaRestTime { get; set; } = 8;
+    public double MinSantaRestTime { get; set; } = 3;
+    public double MaxPresentFallSpeed { get; set; } = 5;
+    public double MinPresentFallSpeed { get; set; } = 2;
+}
+
+public class EasterOptions
+{
+    public int EggCount { get; set; } = 20;
+    public bool EnableEaster { get; set; } = true;
+    public bool EnableRandomEaster { get; set; } = true;
+    public bool EnableRandomEasterMobile { get; set; } = false;
+    public bool EnableDifferentDuration { get; set; } = true;
+    public bool EnableBunny { get; set; } = true;
+    public int BunnyDuration { get; set; } = 12000;
+    public int HopHeight { get; set; } = 12;
+    public int MinBunnyRestTime { get; set; } = 2000;
+    public int MaxBunnyRestTime { get; set; } = 5000;
 }

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,11 +43,457 @@
                         </select>
                         <div class="fieldDescription">The season to display if automation is disabled.</div>
                     </div>
+                    <br>
+
+                    <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 checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableDifferentDurationAutumn" name="EnableDifferentDurationAutumn" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Different Duration</span>
+                                </label>
+                                <div class="fieldDescription">Randomize the falling speed of each leaf.</div>
+                            </div>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableRotation" name="EnableRotation" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Rotation</span>
+                                </label>
+                                <div class="fieldDescription">Rotate leaves as they fall. Notice: May affect performance</div>
+                            </div>
+                        </details>
+                        <hr style="max-width: 800px; margin: 1em 0;">
+
+                        <details>
+                            <summary>Snowflakes</summary>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableSnowflakes" name="EnableSnowflakes" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Snowflakes</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 checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableColoredSnowflakes" name="EnableColoredSnowflakes" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Colored Snowflakes</span>
+                                </label>
+                                <div class="fieldDescription">Display snowflakes in different colors/shapes.</div>
+                            </div>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableDifferentDurationSnowflakes" name="EnableDifferentDurationSnowflakes" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Different Duration</span>
+                                </label>
+                                <div class="fieldDescription">Randomize the falling speed of snowflakes.</div>
+                            </div>
+                        </details>
+                        <hr style="max-width: 800px; margin: 1em 0;">
+
+                        <details>
+                            <summary>Snowfall</summary>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableSnowfall" name="EnableSnowfall" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Snowfall</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">Total number of snowflakes on mobile devices. Warning: High values may affect performance.</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="SnowfallSpeed">Speed</label>
+                                <input is="emby-input" type="number" id="SnowfallSpeed" name="SnowfallSpeed" step="0.1" />
+                                <div class="fieldDescription">The speed of the snowfall animation (recommended values: 0 - 5).</div>
+                            </div>
+                        </details>
+                        <hr style="max-width: 800px; margin: 1em 0;">
+
+                        <details>
+                            <summary>Snowstorm</summary>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableSnowstorm" name="EnableSnowstorm" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Snowstorm</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">Total number of snowflakes on mobile devices. Warning: High values may affect performance.</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="SnowstormSpeed">Speed</label>
+                                <input is="emby-input" type="number" id="SnowstormSpeed" name="SnowstormSpeed" step="0.1" />
+                                <div class="fieldDescription">The speed of the snowstorm (falling).</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="SnowstormHorizontalWind">Horizontal Wind</label>
+                                <input is="emby-input" type="number" id="SnowstormHorizontalWind" name="SnowstormHorizontalWind" step="0.1" />
+                                <div class="fieldDescription">Strength of the horizontal wind effect (recommended values: 3 - 6).</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="SnowstormVerticalVariation">Vertical Variation</label>
+                                <input is="emby-input" type="number" id="SnowstormVerticalVariation" name="SnowstormVerticalVariation" step="0.1" />
+                                <div class="fieldDescription">Amount of vertical movement variation (recommended values: 1 - 3).</div>
+                            </div>
+                        </details>
+                        <hr style="max-width: 800px; margin: 1em 0;">
+
+                        <details>
+                            <summary>Fireworks</summary>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableFireworks" name="EnableFireworks" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Fireworks</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">Number of particles per firework explosion. Warning: High values may affect performance.</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="FireworksInterval">Launch Interval (ms)</label>
+                                <input is="emby-input" type="number" id="FireworksInterval" name="FireworksInterval" />
+                                <div class="fieldDescription">Time in milliseconds between firework launches.</div>
+                            </div>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="ScrollFireworks" name="ScrollFireworks" type="checkbox" is="emby-checkbox" />
+                                    <span>Scroll Fireworks</span>
+                                </label>
+                                <div class="fieldDescription">Allow fireworks to scroll with the page.</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="MinFireworks">Min Fireworks</label>
+                                <input is="emby-input" type="number" id="MinFireworks" name="MinFireworks" />
+                                <div class="fieldDescription">Minimum number of concurrent fireworks.</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="MaxFireworks">Max Fireworks</label>
+                                <input is="emby-input" type="number" id="MaxFireworks" name="MaxFireworks" />
+                                <div class="fieldDescription">Maximum number of concurrent fireworks.</div>
+                            </div>
+                        </details>
+                        <hr style="max-width: 800px; margin: 1em 0;">
+
+                        <details>
+                            <summary>Halloween</summary>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableHalloween" name="EnableHalloween" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Halloween</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 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: 800px; margin: 1em 0;">
+
+                        <details>
+                            <summary>Hearts</summary>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableHearts" name="EnableHearts" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Hearts</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 checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableDifferentDurationHearts" name="EnableDifferentDurationHearts" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Different Duration</span>
+                                </label>
+                                <div class="fieldDescription">Randomize the floating speed.</div>
+                            </div>
+                        </details>
+                        <hr style="max-width: 800px; margin: 1em 0;">
+
+                        <details>
+                            <summary>Christmas</summary>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableChristmas" name="EnableChristmas" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Christmas</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 checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableDifferentDurationChristmas" name="EnableDifferentDurationChristmas" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Different Duration</span>
+                                </label>
+                                <div class="fieldDescription">Randomize the movement speed.</div>
+                            </div>
+                        </details>
+                        <hr style="max-width: 800px; margin: 1em 0;">
+
+                        <details>
+                            <summary>Santa</summary>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableSanta" name="EnableSanta" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Santa</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">Number of snowflakes accompanying Santa on mobile devices. Warning: High values may affect performance.</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="SantaSpeed">Santa Speed (seconds)</label>
+                                <input is="emby-input" type="number" id="SantaSpeed" name="SantaSpeed" step="0.1" />
+                                <div class="fieldDescription">Time in seconds for Santa to cross the screen (recommended values: 5 - 15).</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="SantaSpeedMobile">Santa Speed Mobile (seconds)</label>
+                                <input is="emby-input" type="number" id="SantaSpeedMobile" name="SantaSpeedMobile" step="0.1" />
+                                <div class="fieldDescription">Time in seconds for Santa to cross the screen on mobile (recommended values: 3 - 12).</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="SantaSnowFallSpeed">Snowfall Speed</label>
+                                <input is="emby-input" type="number" id="SantaSnowFallSpeed" name="SantaSnowFallSpeed" step="0.1" />
+                                <div class="fieldDescription">Speed of the falling snow (recommended values: 0-5).</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="MaxSantaRestTime">Max Santa Rest Time (seconds)</label>
+                                <input is="emby-input" type="number" id="MaxSantaRestTime" name="MaxSantaRestTime" step="0.1" />
+                                <div class="fieldDescription">Maximum time Santa waits before appearing again.</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="MinSantaRestTime">Min Santa Rest Time (seconds)</label>
+                                <input is="emby-input" type="number" id="MinSantaRestTime" name="MinSantaRestTime" step="0.1" />
+                                <div class="fieldDescription">Minimum time Santa waits before appearing again.</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="MaxPresentFallSpeed">Max Present Fall Speed (seconds)</label>
+                                <input is="emby-input" type="number" id="MaxPresentFallSpeed" name="MaxPresentFallSpeed" step="0.1" />
+                                <div class="fieldDescription">Maximum speed of falling presents.</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="MinPresentFallSpeed">Min Present Fall Speed (seconds)</label>
+                                <input is="emby-input" type="number" id="MinPresentFallSpeed" name="MinPresentFallSpeed" step="0.1" />
+                                <div class="fieldDescription">Minimum speed of falling presents.</div>
+                            </div>
+                        </details>
+                        <hr style="max-width: 800px; margin: 1em 0;">
+
+                        <details>
+                            <summary>Easter</summary>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableEaster" name="EnableEaster" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Easter</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 checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EnableDifferentDurationEaster" name="EnableDifferentDurationEaster" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Different Duration</span>
+                                </label>
+                                <div class="fieldDescription">Randomize the movement speed.</div>
+                            </div>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label class="emby-checkbox-label">
+                                    <input id="EasterBunny" name="EasterBunny" type="checkbox" is="emby-checkbox" />
+                                    <span>Enable Bunny</span>
+                                </label>
+                                <div class="fieldDescription">Show the Easter Bunny hopping across the screen.</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="BunnyDuration">Bunny Duration (ms)</label>
+                                <input is="emby-input" type="number" id="BunnyDuration" name="BunnyDuration" />
+                                <div class="fieldDescription">Time in milliseconds for one hop cycle.</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="HopHeight">Hop Height (px)</label>
+                                <input is="emby-input" type="number" id="HopHeight" name="HopHeight" />
+                                <div class="fieldDescription">Height of the bunny's hop in pixels.</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="MinBunnyRestTime">Min Bunny Rest Time (ms)</label>
+                                <input is="emby-input" type="number" id="MinBunnyRestTime" name="MinBunnyRestTime" />
+                                <div class="fieldDescription">Minimum time the bunny waits before appearing again.</div>
+                            </div>
+                            <div class="inputContainer">
+                                <label class="inputLabel" for="MaxBunnyRestTime">Max Bunny Rest Time (ms)</label>
+                                <input is="emby-input" type="number" id="MaxBunnyRestTime" name="MaxBunnyRestTime" />
+                                <div class="fieldDescription">Maximum time the bunny waits before appearing again.</div>
+                            </div>
+                        </details>
+                    </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>
+
                     <div>
                         <button is="emby-button" type="submit" class="raised button-submit block emby-button">
-                            <span>Save</span>
+                            <span>${Save}</span>
+                        </button>
+                        <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>
@@ -53,6 +509,91 @@
                     ApiClient.getPluginConfiguration(SeasonalsConfig.pluginUniqueId).then(function (config) {
                         document.querySelector('#SelectedSeason').value = config.SelectedSeason;
                         document.querySelector('#AutomateSeasonSelection').checked = config.AutomateSeasonSelection;
+                        
+                        // Advanced Config
+                        // Autumn
+                        document.querySelector('#EnableAutumn').checked = config.Autumn.EnableAutumn;
+                        document.querySelector('#AutumnLeafCount').value = config.Autumn.LeafCount;
+                        document.querySelector('#EnableRandomLeaves').checked = config.Autumn.EnableRandomLeaves;
+                        document.querySelector('#EnableRandomLeavesMobile').checked = config.Autumn.EnableRandomLeavesMobile;
+                        document.querySelector('#EnableDifferentDurationAutumn').checked = config.Autumn.EnableDifferentDuration;
+                        document.querySelector('#EnableRotation').checked = config.Autumn.EnableRotation;
+
+                        // Snowflakes
+                        document.querySelector('#SnowflakesCount').value = config.Snowflakes.SnowflakeCount;
+                        document.querySelector('#EnableSnowflakes').checked = config.Snowflakes.EnableSnowflakes;
+                        document.querySelector('#EnableRandomSnowflakes').checked = config.Snowflakes.EnableRandomSnowflakes;
+                        document.querySelector('#EnableRandomSnowflakesMobile').checked = config.Snowflakes.EnableRandomSnowflakesMobile;
+                        document.querySelector('#EnableColoredSnowflakes').checked = config.Snowflakes.EnableColoredSnowflakes;
+                        document.querySelector('#EnableDifferentDurationSnowflakes').checked = config.Snowflakes.EnableDifferentDuration;
+
+                        // Snowfall
+                        document.querySelector('#EnableSnowfall').checked = config.Snowfall.EnableSnowfall;
+                        document.querySelector('#SnowfallCount').value = config.Snowfall.SnowflakesCount;
+                        document.querySelector('#SnowfallCountMobile').value = config.Snowfall.SnowflakesCountMobile;
+                        document.querySelector('#SnowfallSpeed').value = config.Snowfall.Speed;
+
+                        // Snowstorm
+                        document.querySelector('#EnableSnowstorm').checked = config.Snowstorm.EnableSnowstorm;
+                        document.querySelector('#SnowstormCount').value = config.Snowstorm.SnowflakesCount;
+                        document.querySelector('#SnowstormCountMobile').value = config.Snowstorm.SnowflakesCountMobile;
+                        document.querySelector('#SnowstormSpeed').value = config.Snowstorm.Speed;
+                        document.querySelector('#SnowstormHorizontalWind').value = config.Snowstorm.HorizontalWind;
+                        document.querySelector('#SnowstormVerticalVariation').value = config.Snowstorm.VerticalVariation;
+
+                        // Fireworks
+                        document.querySelector('#EnableFireworks').checked = config.Fireworks.EnableFireworks;
+                        document.querySelector('#FireworksParticles').value = config.Fireworks.ParticleCount;
+                        document.querySelector('#FireworksInterval').value = config.Fireworks.LaunchInterval;
+                        document.querySelector('#ScrollFireworks').checked = config.Fireworks.ScrollFireworks;
+                        document.querySelector('#MinFireworks').value = config.Fireworks.MinFireworks;
+                        document.querySelector('#MaxFireworks').value = config.Fireworks.MaxFireworks;
+
+                        // Halloween
+                        document.querySelector('#EnableHalloween').checked = config.Halloween.EnableHalloween;
+                        document.querySelector('#HalloweenCount').value = config.Halloween.SymbolCount;
+                        document.querySelector('#EnableRandomHalloween').checked = config.Halloween.EnableRandomSymbols;
+                        document.querySelector('#EnableRandomHalloweenMobile').checked = config.Halloween.EnableRandomSymbolsMobile;
+                        document.querySelector('#EnableDifferentDurationHalloween').checked = config.Halloween.EnableDifferentDuration;
+
+                        // Hearts
+                        document.querySelector('#EnableHearts').checked = config.Hearts.EnableHearts;
+                        document.querySelector('#HeartsCount').value = config.Hearts.SymbolCount;
+                        document.querySelector('#EnableRandomHearts').checked = config.Hearts.EnableRandomSymbols;
+                        document.querySelector('#EnableRandomHeartsMobile').checked = config.Hearts.EnableRandomSymbolsMobile;
+                        document.querySelector('#EnableDifferentDurationHearts').checked = config.Hearts.EnableDifferentDuration;
+
+                        // Christmas
+                        document.querySelector('#EnableChristmas').checked = config.Christmas.EnableChristmas;
+                        document.querySelector('#ChristmasCount').value = config.Christmas.SymbolCount;
+                        document.querySelector('#EnableRandomChristmas').checked = config.Christmas.EnableRandomChristmas;
+                        document.querySelector('#EnableRandomChristmasMobile').checked = config.Christmas.EnableRandomChristmasMobile;
+                        document.querySelector('#EnableDifferentDurationChristmas').checked = config.Christmas.EnableDifferentDuration;
+
+                        // Santa
+                        document.querySelector('#EnableSanta').checked = config.Santa.EnableSanta;
+                        document.querySelector('#SantaSnowflakes').value = config.Santa.SnowflakesCount;
+                        document.querySelector('#SantaSnowflakesMobile').value = config.Santa.SnowflakesCountMobile;
+                        document.querySelector('#SantaSpeed').value = config.Santa.SantaSpeed;
+                        document.querySelector('#SantaSpeedMobile').value = config.Santa.SantaSpeedMobile;
+                        document.querySelector('#SantaSnowFallSpeed').value = config.Santa.SnowFallSpeed;
+                        document.querySelector('#MaxSantaRestTime').value = config.Santa.MaxSantaRestTime;
+                        document.querySelector('#MinSantaRestTime').value = config.Santa.MinSantaRestTime;
+                        document.querySelector('#MaxPresentFallSpeed').value = config.Santa.MaxPresentFallSpeed;
+                        document.querySelector('#MinPresentFallSpeed').value = config.Santa.MinPresentFallSpeed;
+
+                        // Easter
+                        document.querySelector('#EnableEaster').checked = config.Easter.EnableEaster;
+                        document.querySelector('#EasterEggCount').value = config.Easter.EggCount;
+                        document.querySelector('#EnableRandomEaster').checked = config.Easter.EnableRandomEaster;
+                        document.querySelector('#EnableRandomEasterMobile').checked = config.Easter.EnableRandomEasterMobile;
+                        document.querySelector('#EnableDifferentDurationEaster').checked = config.Easter.EnableDifferentDuration;
+                        document.querySelector('#EasterBunny').checked = config.Easter.EnableBunny;
+                        document.querySelector('#BunnyDuration').value = config.Easter.BunnyDuration;
+                        document.querySelector('#HopHeight').value = config.Easter.HopHeight;
+                        document.querySelector('#MinBunnyRestTime').value = config.Easter.MinBunnyRestTime;
+                        document.querySelector('#MaxBunnyRestTime').value = config.Easter.MaxBunnyRestTime;
+
                         Dashboard.hideLoadingMsg();
                     });
                 });
@@ -63,6 +604,91 @@
                 ApiClient.getPluginConfiguration(SeasonalsConfig.pluginUniqueId).then(function (config) {
                     config.SelectedSeason = document.querySelector('#SelectedSeason').value;
                     config.AutomateSeasonSelection = document.querySelector('#AutomateSeasonSelection').checked;
+                    
+                    // Advanced Config
+                    // Autumn
+                    config.Autumn.EnableAutumn = document.querySelector('#EnableAutumn').checked;
+                    config.Autumn.LeafCount = parseInt(document.querySelector('#AutumnLeafCount').value);
+                    config.Autumn.EnableRandomLeaves = document.querySelector('#EnableRandomLeaves').checked;
+                    config.Autumn.EnableRandomLeavesMobile = document.querySelector('#EnableRandomLeavesMobile').checked;
+                    config.Autumn.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationAutumn').checked;
+                    config.Autumn.EnableRotation = document.querySelector('#EnableRotation').checked;
+
+                    // Snowflakes
+                    config.Snowflakes.SnowflakeCount = parseInt(document.querySelector('#SnowflakesCount').value);
+                    config.Snowflakes.EnableSnowflakes = document.querySelector('#EnableSnowflakes').checked;
+                    config.Snowflakes.EnableRandomSnowflakes = document.querySelector('#EnableRandomSnowflakes').checked;
+                    config.Snowflakes.EnableRandomSnowflakesMobile = document.querySelector('#EnableRandomSnowflakesMobile').checked;
+                    config.Snowflakes.EnableColoredSnowflakes = document.querySelector('#EnableColoredSnowflakes').checked;
+                    config.Snowflakes.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationSnowflakes').checked;
+
+                    // Snowfall
+                    config.Snowfall.EnableSnowfall = document.querySelector('#EnableSnowfall').checked;
+                    config.Snowfall.SnowflakesCount = parseInt(document.querySelector('#SnowfallCount').value);
+                    config.Snowfall.SnowflakesCountMobile = parseInt(document.querySelector('#SnowfallCountMobile').value);
+                    config.Snowfall.Speed = parseFloat(document.querySelector('#SnowfallSpeed').value);
+
+                    // Snowstorm
+                    config.Snowstorm.EnableSnowstorm = document.querySelector('#EnableSnowstorm').checked;
+                    config.Snowstorm.SnowflakesCount = parseInt(document.querySelector('#SnowstormCount').value);
+                    config.Snowstorm.SnowflakesCountMobile = parseInt(document.querySelector('#SnowstormCountMobile').value);
+                    config.Snowstorm.Speed = parseFloat(document.querySelector('#SnowstormSpeed').value);
+                    config.Snowstorm.HorizontalWind = parseFloat(document.querySelector('#SnowstormHorizontalWind').value);
+                    config.Snowstorm.VerticalVariation = parseFloat(document.querySelector('#SnowstormVerticalVariation').value);
+
+                    // Fireworks
+                    config.Fireworks.EnableFireworks = document.querySelector('#EnableFireworks').checked;
+                    config.Fireworks.ParticleCount = parseInt(document.querySelector('#FireworksParticles').value);
+                    config.Fireworks.LaunchInterval = parseInt(document.querySelector('#FireworksInterval').value);
+                    config.Fireworks.ScrollFireworks = document.querySelector('#ScrollFireworks').checked;
+                    config.Fireworks.MinFireworks = parseInt(document.querySelector('#MinFireworks').value);
+                    config.Fireworks.MaxFireworks = parseInt(document.querySelector('#MaxFireworks').value);
+
+                    // Halloween
+                    config.Halloween.EnableHalloween = document.querySelector('#EnableHalloween').checked;
+                    config.Halloween.SymbolCount = parseInt(document.querySelector('#HalloweenCount').value);
+                    config.Halloween.EnableRandomSymbols = document.querySelector('#EnableRandomHalloween').checked;
+                    config.Halloween.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomHalloweenMobile').checked;
+                    config.Halloween.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationHalloween').checked;
+
+                    // Hearts
+                    config.Hearts.EnableHearts = document.querySelector('#EnableHearts').checked;
+                    config.Hearts.SymbolCount = parseInt(document.querySelector('#HeartsCount').value);
+                    config.Hearts.EnableRandomSymbols = document.querySelector('#EnableRandomHearts').checked;
+                    config.Hearts.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomHeartsMobile').checked;
+                    config.Hearts.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationHearts').checked;
+
+                    // Christmas
+                    config.Christmas.EnableChristmas = document.querySelector('#EnableChristmas').checked;
+                    config.Christmas.SymbolCount = parseInt(document.querySelector('#ChristmasCount').value);
+                    config.Christmas.EnableRandomChristmas = document.querySelector('#EnableRandomChristmas').checked;
+                    config.Christmas.EnableRandomChristmasMobile = document.querySelector('#EnableRandomChristmasMobile').checked;
+                    config.Christmas.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationChristmas').checked;
+
+                    // Santa
+                    config.Santa.EnableSanta = document.querySelector('#EnableSanta').checked;
+                    config.Santa.SnowflakesCount = parseInt(document.querySelector('#SantaSnowflakes').value);
+                    config.Santa.SnowflakesCountMobile = parseInt(document.querySelector('#SantaSnowflakesMobile').value);
+                    config.Santa.SantaSpeed = parseFloat(document.querySelector('#SantaSpeed').value);
+                    config.Santa.SantaSpeedMobile = parseFloat(document.querySelector('#SantaSpeedMobile').value);
+                    config.Santa.SnowFallSpeed = parseFloat(document.querySelector('#SantaSnowFallSpeed').value);
+                    config.Santa.MaxSantaRestTime = parseFloat(document.querySelector('#MaxSantaRestTime').value);
+                    config.Santa.MinSantaRestTime = parseFloat(document.querySelector('#MinSantaRestTime').value);
+                    config.Santa.MaxPresentFallSpeed = parseFloat(document.querySelector('#MaxPresentFallSpeed').value);
+                    config.Santa.MinPresentFallSpeed = parseFloat(document.querySelector('#MinPresentFallSpeed').value);
+
+                    // Easter
+                    config.Easter.EnableEaster = document.querySelector('#EnableEaster').checked;
+                    config.Easter.EggCount = parseInt(document.querySelector('#EasterEggCount').value);
+                    config.Easter.EnableRandomEaster = document.querySelector('#EnableRandomEaster').checked;
+                    config.Easter.EnableRandomEasterMobile = document.querySelector('#EnableRandomEasterMobile').checked;
+                    config.Easter.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationEaster').checked;
+                    config.Easter.EnableBunny = document.querySelector('#EasterBunny').checked;
+                    config.Easter.BunnyDuration = parseInt(document.querySelector('#BunnyDuration').value);
+                    config.Easter.HopHeight = parseInt(document.querySelector('#HopHeight').value);
+                    config.Easter.MinBunnyRestTime = parseInt(document.querySelector('#MinBunnyRestTime').value);
+                    config.Easter.MaxBunnyRestTime = parseInt(document.querySelector('#MaxBunnyRestTime').value);
+
                     ApiClient.updatePluginConfiguration(SeasonalsConfig.pluginUniqueId, config).then(function (result) {
                         Dashboard.processPluginConfigurationUpdateResult(result);
                     });

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

@@ -12,13 +12,14 @@
     <!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
     <Title>Jellyfin Seasonals Plugin</Title>
     <Authors>CodeDevMLH</Authors>
-    <Version>1.0.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/autumn.js

@@ -1,9 +1,11 @@
-const leaves = true; // enable/disable leaves
-const randomLeaves = true; // enable random leaves
-const randomLeavesMobile = false; // enable random leaves on mobile devices
-const enableDiffrentDuration = true; // enable different duration for the random leaves
-const enableRotation = false; // enable/disable leaf rotation
-const leafCount = 25; // count of random extra leaves
+const config = window.SeasonalsPluginConfig?.autumn || {};
+
+const leaves = config.enableAutumn !== undefined ? config.enableAutumn : true; // enable/disable leaves
+const randomLeaves = config.enableRandomLeaves !== undefined ? config.enableRandomLeaves : true; // enable random leaves
+const randomLeavesMobile = config.enableRandomLeavesMobile !== undefined ? config.enableRandomLeavesMobile : false; // enable random leaves on mobile devices (Warning: High values may affect performance)
+const enableDiffrentDuration = config.enableDifferentDuration !== undefined ? config.enableDifferentDuration : true; // enable different duration for the random leaves
+const enableRotation = config.enableRotation !== undefined ? config.enableRotation : false; // enable/disable leaf rotation
+const leafCount = config.leafCount || 25; // count of random extra leaves
 
 
 let msgPrinted = false; // flag to prevent multiple console messages

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/christmas.js

@@ -1,8 +1,10 @@
-const christmas = true; // enable/disable christmas
-const randomChristmas = true; // enable random Christmas
-const randomChristmasMobile = false; // enable random Christmas on mobile devices
-const enableDiffrentDuration = true; // enable different duration for the random Christmas symbols
-const christmasCount = 25; // count of random extra christmas
+const config = window.SeasonalsPluginConfig?.christmas || {};
+
+const christmas = config.enableChristmas !== undefined ? config.enableChristmas : true; // enable/disable christmas
+const randomChristmas = config.enableRandomChristmas !== undefined ? config.enableRandomChristmas : true; // enable random Christmas
+const randomChristmasMobile = config.enableRandomChristmasMobile !== undefined ? config.enableRandomChristmasMobile : false; // enable random Christmas on mobile devices (Warning: High values may affect performance)
+const enableDiffrentDuration = config.enableDifferentDuration !== undefined ? config.enableDifferentDuration : true; // enable different duration for the random Christmas symbols
+const christmasCount = config.symbolCount || 25; // count of random extra christmas
 
 
 let msgPrinted = false; // flag to prevent multiple console messages

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/easter.js

@@ -1,14 +1,16 @@
-const easter = true; // enable/disable easter
-const randomEaster = true; // enable random easter
-const randomEasterMobile = false; // enable random easter on mobile devices
-const enableDiffrentDuration = true; // enable different duration for the random easter
-const easterEggCount = 20; // count of random extra easter
+const config = window.SeasonalsPluginConfig?.easter || {};
 
-const bunny = true; // enable/disable hopping bunny
-const bunnyDuration = 12000; // duration of the bunny animation in ms
-const hopHeight = 12; // height of the bunny hops in px
-const minBunnyRestTime = 2000; // minimum time the bunny rests in ms
-const maxBunnyRestTime = 5000; // maximum time the bunny rests in ms
+const easter = config.enableEaster !== undefined ? config.enableEaster : true; // enable/disable easter
+const randomEaster = config.enableRandomEaster !== undefined ? config.enableRandomEaster : true; // enable random easter
+const randomEasterMobile = config.enableRandomEasterMobile !== undefined ? config.enableRandomEasterMobile : false; // enable random easter on mobile devices (Warning: High values may affect performance)
+const enableDiffrentDuration = config.enableDifferentDuration !== undefined ? config.enableDifferentDuration : true; // enable different duration for the random easter
+const easterEggCount = config.eggCount || 20; // count of random extra easter
+
+const bunny = config.enableBunny !== undefined ? config.enableBunny : true; // enable/disable hopping bunny
+const bunnyDuration = config.bunnyDuration || 12000; // duration of the bunny animation in ms
+const hopHeight = config.hopHeight || 12; // height of the bunny hops in px
+const minBunnyRestTime = config.minBunnyRestTime || 2000; // minimum time the bunny rests in ms
+const maxBunnyRestTime = config.maxBunnyRestTime || 5000; // maximum time the bunny rests in ms
 
 
 let msgPrinted = false; // flag to prevent multiple console messages

Jellyfin.Plugin.Seasonals/Web/fireworks.js

@@ -1,9 +1,11 @@
-const fireworks = true; // enable/disable fireworks
-const scrollFireworks = true; // enable fireworks to scroll with page content
-const particlesPerFirework = 50; // count of particles per firework
-const minFireworks = 3; // minimum number of simultaneous fireworks
-const maxFireworks = 6; // maximum number of simultaneous fireworks
-const intervalOfFireworks = 3200; // interval for the fireworks in milliseconds
+const config = window.SeasonalsPluginConfig?.fireworks || {};
+
+const fireworks = config.enableFireworks !== undefined ? config.enableFireworks : true; // enable/disable fireworks
+const scrollFireworks = config.scrollFireworks !== undefined ? config.scrollFireworks : true; // enable fireworks to scroll with page content
+const particlesPerFirework = config.particleCount || 50; // count of particles per firework (Warning: High values may affect performance)
+const minFireworks = config.minFireworks || 3; // minimum number of simultaneous fireworks
+const maxFireworks = config.maxFireworks || 6; // maximum number of simultaneous fireworks
+const intervalOfFireworks = config.launchInterval || 3200; // interval for the fireworks in milliseconds
 
 // array of color palettes for the fireworks
 const colorPalettes = [

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/halloween.js

@@ -1,8 +1,10 @@
-const halloween = true; // enable/disable halloween
-const randomSymbols = true; // enable more random symbols
-const randomSymbolsMobile = false; // enable random symbols on mobile devices
-const enableDiffrentDuration = true; // enable different duration for the random halloween symbols
-const halloweenCount = 25; // count of random extra symbols
+const config = window.SeasonalsPluginConfig?.halloween || {};
+
+const halloween = config.enableHalloween !== undefined ? config.enableHalloween : true; // enable/disable halloween
+const randomSymbols = config.enableRandomSymbols !== undefined ? config.enableRandomSymbols : true; // enable more random symbols
+const randomSymbolsMobile = config.enableRandomSymbolsMobile !== undefined ? config.enableRandomSymbolsMobile : false; // enable random symbols on mobile devices (Warning: High values may affect performance)
+const enableDiffrentDuration = config.enableDifferentDuration !== undefined ? config.enableDifferentDuration : true; // enable different duration for the random halloween symbols
+const halloweenCount = config.symbolCount || 25; // count of random extra symbols
 
 let msgPrinted = false; // flag to prevent multiple console messages
 

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/hearts.js

@@ -1,8 +1,10 @@
-const hearts = true; // enable/disable hearts
-const randomSymbols = true; // enable more random symbols
-const randomSymbolsMobile = false; // enable random symbols on mobile devices
-const enableDiffrentDuration = true; // enable different animation duration for random symbols
-const heartsCount = 25; // count of random extra symbols
+const config = window.SeasonalsPluginConfig?.hearts || {};
+
+const hearts = config.enableHearts !== undefined ? config.enableHearts : true; // enable/disable hearts
+const randomSymbols = config.enableRandomSymbols !== undefined ? config.enableRandomSymbols : true; // enable more random symbols
+const randomSymbolsMobile = config.enableRandomSymbolsMobile !== undefined ? config.enableRandomSymbolsMobile : false; // enable random symbols on mobile devices (Warning: High values may affect performance)
+const enableDiffrentDuration = config.enableDifferentDuration !== undefined ? config.enableDifferentDuration : true; // enable different animation duration for random symbols
+const heartsCount = config.symbolCount || 25; // count of random extra symbols
 
 let msgPrinted = false; // flag to prevent multiple console messages
 

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

@@ -1,13 +1,15 @@
-const santaIsFlying = true; // enable/disable santa
-let snowflakesCount = 500; // count of snowflakes (recommended values: 300-600)
-const snowflakesCountMobile = 250; // count of snowflakes on mobile devices
-const snowFallSpeed = 3; // speed of snowfall	(recommended values: 0-5)
-const santaSpeed = 10; // speed of santa in seconds (recommended values: 5000-15000)
-const santaSpeedMobile = 8; // speed of santa on mobile devices in seconds
-const maxSantaRestTime = 8; // maximum time santa rests in seconds
-const minSantaRestTime = 3; // minimum time santa rests in seconds
-const maxPresentFallSpeed = 5; // maximum speed of falling presents in seconds
-const minPresentFallSpeed = 2; // minimum speed of falling presents in seconds
+const config = window.SeasonalsPluginConfig?.santa || {};
+
+const santaIsFlying = config.enableSanta !== undefined ? config.enableSanta : true; // enable/disable santa
+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: 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
+const maxPresentFallSpeed = config.maxPresentFallSpeed || 5; // maximum speed of falling presents in seconds
+const minPresentFallSpeed = config.minPresentFallSpeed || 2; // minimum speed of falling presents in seconds
 
 let msgPrinted = false; // flag to prevent multiple console messages
 let isMobile = false; // flag to detect mobile devices

Jellyfin.Plugin.Seasonals/Web/seasonals.js

@@ -161,6 +161,8 @@ async function initializeTheme() {
             const config = await response.json();
             automateThemeSelection = config.automateSeasonSelection;
             defaultTheme = config.selectedSeason;
+            window.SeasonalsPluginConfig = config;
+            console.log('Seasonals Config loaded:', config);
         } else {
             console.error('Failed to fetch Seasonals config');
         }
@@ -169,7 +171,7 @@ async function initializeTheme() {
     }
 
     let currentTheme;
-    if (!automateThemeSelection) {
+    if (automateThemeSelection === false) {
         currentTheme = defaultTheme;
     } else {
         currentTheme = determineCurrentTheme();
@@ -177,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;
@@ -199,8 +201,9 @@ async function initializeTheme() {
     removeSelf();
 }
 
-
-//document.addEventListener('DOMContentLoaded', initializeTheme);
-document.addEventListener('DOMContentLoaded', () => {
+// Ensure DOM is ready before initializing
+if (document.readyState === 'loading') {
+    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/snowfall.js

@@ -1,7 +1,9 @@
-const snowfall = true; // enable/disable snowfall
-let snowflakesCount = 500; // count of snowflakes (recommended values: 300-600)
-const snowflakesCountMobile = 250; // count of snowflakes on mobile devices
-const snowFallSpeed = 3; // speed of snowfall	(recommended values: 0-5)
+const config = window.SeasonalsPluginConfig?.snowfall || {};
+
+const snowfall = config.enableSnowfall !== undefined ? config.enableSnowfall : true; // enable/disable snowfall
+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.speed || 3; // speed of snowfall	(recommended values: 0-5)
 
 let msgPrinted = false; // flag to prevent multiple console messages
 

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/snowflakes.js

@@ -1,9 +1,11 @@
-const snowflakes = true; // enable/disable snowflakes
-const randomSnowflakes = true; // enable random Snowflakes
-const randomSnowflakesMobile = false; // enable random Snowflakes on mobile devices
-const enableColoredSnowflakes = true; // enable colored snowflakes on mobile devices
-const enableDiffrentDuration = true; // enable different animation duration for random symbols
-const snowflakeCount = 25; // count of random extra snowflakes
+const config = window.SeasonalsPluginConfig?.snowflakes || {};
+
+const snowflakes = config.enableSnowflakes !== undefined ? config.enableSnowflakes : true; // enable/disable snowflakes
+const randomSnowflakes = config.enableRandomSnowflakes !== undefined ? config.enableRandomSnowflakes : true; // enable random Snowflakes
+const randomSnowflakesMobile = config.enableRandomSnowflakesMobile !== undefined ? config.enableRandomSnowflakesMobile : false; // enable random Snowflakes on mobile devices (Warning: High values may affect performance)
+const enableColoredSnowflakes = config.enableColoredSnowflakes !== undefined ? config.enableColoredSnowflakes : true; // enable colored snowflakes on mobile devices
+const enableDiffrentDuration = config.enableDifferentDuration !== undefined ? config.enableDifferentDuration : true; // enable different animation duration for random symbols
+const snowflakeCount = config.snowflakeCount || 25; // count of random extra snowflakes
 
 
 let msgPrinted = false; // flag to prevent multiple console messages

Jellyfin.Plugin.Seasonals/Web/snowstorm.css

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

Jellyfin.Plugin.Seasonals/Web/snowstorm.js

@@ -1,9 +1,11 @@
-const snowstorm = true; // enable/disable snowstorm
-let snowflakesCount = 500; // count of snowflakes (recommended values: 300-600)
-const snowflakesCountMobile = 250; // count of snowflakes on mobile devices
-const snowFallSpeed = 6; // speed of snowfall	(recommended values: 4-8)
-const horizontalWind = 4; // horizontal wind speed (recommended value: 4)
-const verticalVariation = 2; // vertical variation (recommended value: 2)
+const config = window.SeasonalsPluginConfig?.snowstorm || {};
+
+const snowstorm = config.enableSnowstorm !== undefined ? config.enableSnowstorm : true; // enable/disable snowstorm
+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.speed || 6; // speed of snowfall	(recommended values: 4-8)
+const horizontalWind = config.horizontalWind || 4; // horizontal wind speed (recommended value: 4)
+const verticalVariation = config.verticalVariation || 2; // vertical variation (recommended value: 2)
 
 let msgPrinted = false; // flag to prevent multiple console messages
 

README.md

@@ -2,7 +2,9 @@
 
 Jellyfin Seasonals is a plugin that adds seasonal themes to your Jellyfin web interface. Depending on the configuration, it automatically selects a theme based on the current date or allows you to manually set a default theme.
 
-This plugin is based on my manual mod (see the `manual` branch), which builds up on the awesome work of [BobHasNoSoul-jellyfin-mods](https://github.com/BobHasNoSoul/jellyfin-mods).
+This plugin is based on my manual mod (see the [legacy branch](https://github.com/CodeDevMLH/Jellyfin-Seasonals/tree/legacy)), which builds up on the awesome work of [BobHasNoSoul-jellyfin-mods](https://github.com/BobHasNoSoul/jellyfin-mods).
+
+![logo](https://raw.githubusercontent.com/CodeDevMLH/Jellyfin-Seasonals/refs/heads/main/logo.png)
 
 ---
 
@@ -12,14 +14,18 @@ This plugin is based on my manual mod (see the `manual` branch), which builds up
   - [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)
-    - [Theme Settings](#theme-settings)
+    - [Usage](#usage)
     - [Additional Directory: Separate Single Seasonals](#additional-directory-separate-single-seasonals)
-    - [Troubleshooting](#troubleshooting)
 
 ---
 
@@ -63,34 +69,56 @@ This plugin is based on my manual mod (see the `manual` branch), which builds up
 
 ## Installation
 
+This plugin is based on Jellyfin Version `10.11.x`
+
 To install this plugin, you will first need to add the repository in Jellyfin.
 
 1.  Open your Jellyfin Dashboard.
-2.  Navigate to **Plugins** > **Repositories**.
-3.  Click the **+** sign to add a new repository.
+2.  Navigate to **Plugins** > **Manage Repositories**.
+3.  Click the **+ New Repository** button to add a new repository.
 4.  Enter a name (e.g., "Seasonals") and paste the following URL into the 'Repository URL' field:
    ```bash
-   https://raw.githubusercontent.com/CodeDevMLH/jellyfin-plugin-seasonals/main/manifest.json
+   https://raw.githubusercontent.com/CodeDevMLH/Jellyfin-Seasonals/refs/heads/main/manifest.json
    ```
-5.  Click **Save**.
-6.  Go to the **Catalog** tab at the top.
-7.  Under **General**, find the **Seasonals** plugin.
+5.  Click **Add**.
+6.  Go to the **Available** tab at the top.
+7.  Find the **Seasonals** plugin (Under **General**)
 8.  Click on it and select **Install**.
 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.
 
+## Automatic Theme Selection
+If automatic selection is enabled, the following themes are applied based on the date. Specific holiday events take precedence over general seasonal themes.:
+
+| Theme | Active Period | Description |
+| :--- | :--- | :--- |
+| **`santa`** | Dec 22 – Dec 27 | Christmas theme |
+| **`fireworks`** | Dec 28 – Jan 05 | New Year's celebration |
+| **`hearts`** | Feb 10 – Feb 18 | Valentine's Day |
+| **`easter`** | Mar 25 – Apr 25 | Easter theme |
+| **`halloween`** | Oct 24 – Nov 05 | Halloween theme |
+| **`snowflakes`** | December (Remainder) | General December winter theme |
+| **`snowfall`** | January & February | General winter theme (outside of holidays) |
+| **`autumn`** | Sep, Oct, Nov | Fall theme (when not Halloween) |
+| **`none`** | All other dates | Default appearance |
+
+> **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:
@@ -103,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.
@@ -127,7 +207,7 @@ Feel free to contribute to this project by creating pull requests or reporting i
    <script src="seasonals/seasonals.js"></script>
     ```
 2. **Deploy Files**  
-    Place the seasonals folder (including seasonals.js, CSS, and additional JavaScript files for each theme [this one](https://github.com/CodeDevMLH/Jellyfin-Seasonals/tree/main/seasonals)) inside the Jellyfin web server directory (labeld with "web").
+    Place the seasonals folder (including seasonals.js, CSS, and additional JavaScript files for each theme [this one](https://github.com/CodeDevMLH/Jellyfin-Seasonals/tree/legacy/seasonals)) inside the Jellyfin web server directory (labeld with "web").
 
 3. **Configure Themes**  
     Customize the theme-configs.js file to modify or add new themes. The default configuration is shown below:

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

@@ -6,10 +6,11 @@
   "compilationOptions": {},
   "targets": {
     ".NETCoreApp,Version=v9.0": {
-      "Jellyfin.Plugin.Seasonals/1.0.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.0.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.0.0.0"
+version: "1.2.0.0"
 targetAbi: "10.11.0.0"
 framework: "net9.0"
 overview: "Seasonal effects for Jellyfin"
@@ -12,4 +12,4 @@ owner: "CodeDevMLH"
 artifacts:
 - "Jellyfin.Plugin.Seasonals.dll"
 changelog: >
-  Initial release
+  Added Advanced Configuration UI for customizing individual seasonal effects.

manifest.json

@@ -6,13 +6,37 @@
     "overview": "Seasonal effects for Jellyfin",
     "owner": "CodeDevMLH",
     "category": "General",
-    "imageUrl": "",
+    "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": "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": "be2e93364396b6e0e02368d5a7db53bc",
+        "timestamp": "2025-12-17T15:32:08Z"
+      },
       {
         "version": "1.0.0.0",
         "changelog": "Initial release",
         "targetAbi": "10.11.0.0",
-        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/raw/branch/main/bin/Publish/Jellyfin.Plugin.Seasonals.zip",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/releases/download/v1.0.0.0/Jellyfin.Plugin.Seasonals.zip",
         "checksum": "be6d06a959b3e18e5058a6d8fb6d800c",
         "timestamp": "2025-12-15T15:33:15Z"
       }