Update manifest.json for release v1.6.13.4 [skip ci]

Jellyfin.Plugin.Seasonals/Api/SeasonalsController.cs

@@ -62,6 +62,7 @@ public class SeasonalsController : ControllerBase
         if (path.EndsWith(".png", StringComparison.OrdinalIgnoreCase)) return "image/png";
         if (path.EndsWith(".jpg", StringComparison.OrdinalIgnoreCase)) return "image/jpeg";
         if (path.EndsWith(".gif", StringComparison.OrdinalIgnoreCase)) return "image/gif";
+        if (path.EndsWith(".svg", StringComparison.OrdinalIgnoreCase)) return "image/svg+xml";
         return "application/octet-stream";
     }
 }

Jellyfin.Plugin.Seasonals/Configuration/configPage.html

@@ -18,7 +18,7 @@
                     <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>
+                        <span>${Help}</span>
                     </a>
                 </div>
                 <hr style="max-width: 800px; margin: 1em 0;">
@@ -40,7 +40,7 @@
                     </div>
                     <div class="selectContainer">
                         <label class="selectLabel" for="SelectedSeason">Selected Season</label>
-                        <select is="emby-select" id="SelectedSeason" name="SelectedSeason" class="emby-select">
+                        <select id="SelectedSeason" name="SelectedSeason" class="emby-select" style="width: 100%; padding: 0.5em; background-color: #333; border: 1px solid #444; color: #fff; border-radius: 4px;">
                             <option value="none">None</option>
                             <option value="snowflakes">Snowflakes</option>
                             <option value="snowfall">Snowfall</option>
@@ -52,14 +52,14 @@
                             <option value="santa">Santa</option>
                             <option value="autumn">Autumn</option>
                             <option value="easter">Easter</option>
-                            <option value="summer" disabled>Summer (not implemented yet, no idea for a theme. Please commit ideas in a issue)</option>
+                            <option value="summer" disabled>Summer (not implemented yet. Please commit ideas in a issue or PR)</option>
-                            <option value="spring" disabled>Spring (not implemented yet, no idea for a theme. Please commit ideas in a issue)</option>
+                            <option value="spring" disabled>Spring (not implemented yet. Please commit ideas in a issue or PR)</option>
-                            <option value="oktoberfest" disabled>Oktoberfest (not implemented yet, no idea for a theme. Please commit ideas in a issue)</option>
+                            <option value="oktoberfest" disabled>Oktoberfest (not implemented yet. Please commit ideas in a issue or PR)</option>
-                            <option value="carnival" disabled>Carnival (not implemented yet, no idea for a theme. Please commit ideas in a issue)</option>
+                            <option value="carnival" disabled>Carnival (not implemented yet. Please commit ideas in a issue or PR)</option>
-                            <option value="championships" disabled>European/World Championships (not implemented yet, no idea for a theme. Please commit ideas in a issue)</option>
+                            <option value="championships" disabled>European/World Championships (not implemented yet. Please commit ideas in a issue or PR)</option>
-                            <option value="patrick" disabled>St. Patrick's Day (not implemented yet, no idea for a theme. Please commit ideas in a issue)</option>
+                            <option value="patrick" disabled>St. Patrick's Day (not implemented yet. Please commit ideas in a issue or PR)</option>
-                            <option value="thanksgiving" disabled>Thanksgiving (not implemented yet, no idea for a theme. Please commit ideas in a issue)</option>
+                            <option value="thanksgiving" disabled>Thanksgiving (not implemented yet. Please commit ideas in a issue or PR)</option>
-                            <option value="pride" disabled>Pride (not implemented yet, no idea for a theme. Please commit ideas in a issue)</option>
+                            <option value="pride" disabled>Pride (not implemented yet. Please commit ideas in a issue or PR)</option>
                         </select>
                         <div class="fieldDescription">The season to display if automation is disabled.</div>
                     </div>
@@ -69,8 +69,7 @@
                                 is="emby-checkbox" />
                             <span>Allow Client-Side Toggle</span>
                         </label>
-                        <div class="fieldDescription">If enabled, users will see a settings icon in the header to toggle
+                        <div class="fieldDescription">If enabled, users will see a seasonals icon in the header to toggle seasonals for their browser (device-specific).</div>
-                            animations for their browser.</div>
                     </div>
                     <br>
 

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

@@ -12,7 +12,7 @@
     <!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
     <Title>Jellyfin Seasonals Plugin</Title>
     <Authors>CodeDevMLH</Authors>
-    <Version>1.6.5.0</Version>
+    <Version>1.6.13.4</Version>
     <RepositoryUrl>https://github.com/CodeDevMLH/Jellyfin-Seasonals</RepositoryUrl>
   </PropertyGroup>
 

Jellyfin.Plugin.Seasonals/Web/seasonals.js

@@ -1,7 +1,8 @@
-// theme-configs.js
+/*
+ * Seasonals Plugin (Client Side Manager Logic)
+ */
 
-// theme configurations
+const ThemeConfigs = {
-const themeConfigs = {
     snowflakes: {
         css: '/Seasonals/Resources/snowflakes.css',
         js: '/Seasonals/Resources/snowflakes.js',
@@ -67,217 +68,100 @@ const themeConfigs = {
     },
 };
 
-// determine current theme based on the current month
+const SeasonalSettingsManager = {
-function determineCurrentTheme() {
+    initialized: false,
-    const date = new Date();
+    config: null,
-    const month = date.getMonth();  // 0-11
-    const day = date.getDate();     // 1-31
 
-    if ((month === 11 && day >= 28) || (month === 0 && day <= 5)) return 'fireworks'; //new year fireworks december 28 - january 5
+    init(config) {
+        if (this.initialized) return;
+        this.config = config;
 
-    if (month === 1 && day >= 10 && day <= 18) return 'hearts'; // valentine's day february 10 - 18
+        // Only inject settings if enabled on server by admin
-
+        if (this.config && this.config.EnableClientSideToggle !== false) {
-    if (month === 11 && day >= 22 && day <= 27) return 'santa'; // christmas december 22 - 27
+            this.injectSettingsIcon();
-    // if (month === 11 && day >= 22 && day <= 27) return 'christmas'; // christmas december 22 - 27
+            this.initialized = true;
-
+            console.log("Seasonals: Client-Side Settings Manager initialized.");
-    if (month === 11) return 'snowflakes'; // snowflakes december
-    if (month === 0 || month === 1) return 'snowfall'; // snow january, february
-    // if (month === 0 || month === 1) return 'snowstorm'; // snow january, february
-
-    if ((month === 2 && day >= 25) || (month === 3 && day <= 25)) return 'easter'; // easter march 25 - april 25
-
-    //NOT IMPLEMENTED YET
-    //if (month >= 2 && month <= 4) return 'spring';  // spring march, april, may
-
-    //NOT IMPLEMENTED YET
-    //if (month >= 5 && month <= 7) return 'summer';  // summer june, july, august
-
-    if ((month === 9 && day >= 24) || (month === 10 && day <= 5)) return 'halloween'; // halloween october 24 - november 5
-
-    if (month >= 8 && month <= 10) return 'autumn'; // autumn september, october, november
-
-    return 'none'; // Fallback (nothing)
-}
-
-// helper to resolve paths for local testing vs production
-function resolvePath(path) {
-    if (window.location.protocol === 'file:' || window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
-        return path.replace('/Seasonals/Resources/', './');
-    }
-    return path;
-}
-
-// load theme csss
-function loadThemeCSS(cssPath) {
-    if (!cssPath) return;
-
-    const link = document.createElement('link');
-    link.rel = 'stylesheet';
-    // link.href = resolvePath(cssPath);
-    link.href = cssPath;
-
-    link.onerror = () => {
-        console.error(`Failed to load CSS: ${cssPath}`);
-    };
-
-    document.body.appendChild(link);
-    console.log(`CSS file "${cssPath}" loaded.`);
-}
-
-// load theme js
-function loadThemeJS(jsPath) {
-    if (!jsPath) return;
-
-    const script = document.createElement('script');
-    script.src = jsPath;
-    // script.src = resolvePath(jsPath);
-    script.defer = true;
-
-    script.onerror = () => {
-        console.error(`Failed to load JS: ${jsPath}`);
-    };
-
-    document.body.appendChild(script);
-    console.log(`JS file "${jsPath}" loaded.`);
-}
-
-// update theme container class name
-function updateThemeContainer(containerClass) {
-    // Create container if it doesn't exist
-    let container = document.querySelector('.seasonals-container');
-    if (!container) {
-        container = document.createElement('div');
-        container.className = 'seasonals-container';
-        document.body.appendChild(container);
-    }
-
-    container.className = `seasonals-container ${containerClass}`;
-    console.log(`Seasonals-Container class updated to "${containerClass}".`);
-}
-
-// function removeSelf() {
-//     const script = document.currentScript;
-//     if (script) script.parentNode.removeChild(script);
-//     console.log('External script removed:', script);
-// }
-
-// initialize theme
-async function initializeTheme() {
-
-    // Check local user preference
-    const isEnabled = getSavedSetting('seasonals-enabled', 'true') === 'true';
-    if (!isEnabled) {
-        console.log('Seasonals disabled by user preference.');
-        return;
-    }
-
-    const forcedTheme = getSavedSetting('seasonals-theme', 'auto');
-
-    let automateThemeSelection = true;
-    let defaultTheme = 'none';
-
-    try {
-        const response = await fetch('/Seasonals/Config');
-        if (response.ok) {
-            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');
         }
-    } catch (error) {
+    },
-        console.error('Error fetching Seasonals config:', error);
-    }
 
-    let currentTheme;
+    getSetting(key, defaultValue) {
+        const value = localStorage.getItem(`seasonals-${key}`);
+        return value !== null ? value : defaultValue;
+    },
 
-    if (forcedTheme !== 'auto') {
+    setSetting(key, value) {
-        currentTheme = forcedTheme;
+        localStorage.setItem(`seasonals-${key}`, value);
-        console.log(`User forced theme: ${currentTheme}`);
+    },
-    } else if (automateThemeSelection === false) {
-        currentTheme = defaultTheme;
-    } else {
-        currentTheme = determineCurrentTheme();
-    }
 
-    console.log(`Selected theme: ${currentTheme}`);
+    createIcon() {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'paper-icon-button-light headerButton seasonal-settings-button';
+        button.title = 'Seasonal Settings';
+        // button.innerHTML = '<span class="material-icons">ac_unit</span>';
+        // button.innerHTML = '<img src="/Seasonals/Resources/assets/logo_SW.svg" style="width: 52px; height: 24px; vertical-align: middle;">';
+        button.innerHTML = '<img src="/Seasonals/Resources/assets/logo_SW.svg" style="width: 24px; height: 24px; vertical-align: middle;">';
+        button.style.verticalAlign = 'middle';
 
-    if (!currentTheme || currentTheme === 'none') {
+        button.addEventListener('click', (e) => {
-        console.log('No theme selected.');
+            e.stopPropagation();
-        return;
+            this.toggleSettingsPopup(button);
-    }
+        });
 
-    const theme = themeConfigs[currentTheme];
+        return button;
+    },
 
-    if (!theme) {
+    injectSettingsIcon() {
-        console.error(`Theme "${currentTheme}" not found.`);
+        const observer = new MutationObserver((mutations, obs) => {
-        return;
+            const headerRight = document.querySelector('.headerRight');
-    }
+            if (headerRight && !document.querySelector('.seasonal-settings-button')) {
-    updateThemeContainer(theme.containerClass);
+                const icon = this.createIcon();
+                headerRight.prepend(icon);
+            }
+        });
 
-    if (theme.css) loadThemeCSS(theme.css);
+        observer.observe(document.body, {
-    if (theme.js) loadThemeJS(theme.js);
+            childList: true,
+            subtree: true
+        });
+    },
 
-    console.log(`Theme "${currentTheme}" loaded.`);
+    createPopup(anchorElement) {
-}
+        const existing = document.querySelector('.seasonal-settings-popup');
+        if (existing) existing.remove();
 
+        const popup = document.createElement('div');
+        popup.className = 'seasonal-settings-popup dialog';
 
-initializeTheme();
+        Object.assign(popup.style, {
+            position: 'fixed',
+            zIndex: '10000',
+            backgroundColor: '#202020',
+            padding: '1em',
+            borderRadius: '0.3em',
+            boxShadow: '0 0 20px rgba(0,0,0,0.5)',
+            minWidth: '200px',
+            color: '#fff',
+            maxWidth: '250px'
+        });
 
+        const rect = anchorElement.getBoundingClientRect();
         
-// User UI Seasonal Settings
+        // Positioning logic
+        let rightPos = window.innerWidth - rect.right;
+        if (window.innerWidth < 450 || (window.innerWidth - rightPos) < 260) {
+            popup.style.right = '1rem';
+            popup.style.left = 'auto';
+        } else {
+            popup.style.right = `${rightPos}px`;
+            popup.style.left = 'auto';
+        }
+        popup.style.top = `${rect.bottom + 10}px`;
 
-function getSavedSetting(key, defaultValue) {
+        // Popup HTML
-    const value = localStorage.getItem(key);
+        let html = `
-    return value !== null ? value : defaultValue;
+        <h3 style="margin-top:0; margin-bottom:1em; border-bottom:1px solid #444; padding-bottom:0.5em;">Seasonal Settings</h3>
-}
         
-function setSavedSetting(key, value) {
-    localStorage.setItem(key, value);
-}
-
-function createSettingsIcon() {
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.className = 'paper-icon-button-light headerButton seasonal-settings-button';
-    button.title = 'Seasonal Settings';
-    button.innerHTML = '<span class="material-icons">ac_unit</span>';
-    button.style.verticalAlign = 'middle';
-
-    button.addEventListener('click', (e) => {
-        e.stopPropagation();
-        toggleSettingsPopup(button);
-    });
-
-    return button;
-}
-
-function createSettingsPopup(anchorElement) {
-    const existing = document.querySelector('.seasonal-settings-popup');
-    if (existing) existing.remove();
-
-    const popup = document.createElement('div');
-    popup.className = 'seasonal-settings-popup dialog';
-
-    Object.assign(popup.style, {
-        position: 'fixed',
-        zIndex: '10000',
-        backgroundColor: '#202020',
-        padding: '1em',
-        borderRadius: '0.3em',
-        boxShadow: '0 0 20px rgba(0,0,0,0.5)',
-        minWidth: '200px',
-        color: '#fff',
-        maxWidth: '250px'
-    });
-
-    const rect = anchorElement.getBoundingClientRect();
-    popup.style.top = `${rect.bottom + 10}px`;
-    popup.style.right = `${window.innerWidth - rect.right}px`;
-
-    popup.innerHTML = `     
         <div class="checkboxContainer checkboxContainer-withDescription" style="margin-bottom: 0.5em;">
             <label class="emby-checkbox-label">
                 <input id="seasonal-enable-toggle" type="checkbox" is="emby-checkbox" class="emby-checkbox" />
@@ -285,87 +169,203 @@ function createSettingsPopup(anchorElement) {
             </label>
         </div>
 
-        <div class="selectContainer">
+        <div class="selectContainer" style="margin-bottom: 0.5em;">
             <label class="selectLabel" for="seasonal-theme-select" style="margin-bottom: 0.5em; display: block; color: inherit;">Force Theme</label>
             <select id="seasonal-theme-select" class="emby-select" style="width: 100%; padding: 0.5em; background-color: #333; border: 1px solid #444; color: #fff; border-radius: 4px;">
-                <option value="auto">Auto (Date Based)</option>
+                <option value="auto">Server-Side</option>
             </select>
         </div>
+        `;
 
-        <div class="selectContainer1">
+        popup.innerHTML = html;
-            <label class="selectLabel" for="seasonal-theme-select1">Force Theme</label>
-            <select is="emby-select" id="seasonal-theme-select1" class="emby-select">
-                <option value="auto">Auto (Date Based)</option>
-            </select>
-        </div>
-    `;
 
-    // Populate Select Options
+        // Populate Select Options
-    const themeSelect = popup.querySelector('#seasonal-theme-select');
+        const themeSelect = popup.querySelector('#seasonal-theme-select');
-    Object.keys(themeConfigs).forEach(key => {
+        Object.keys(ThemeConfigs).forEach(key => {
-        if (key === 'none') return;
+            if (key === 'none') return;
-        const option = document.createElement('option');
+            const option = document.createElement('option');
-        option.value = key;
+            option.value = key;
-        // Capitalize first letter
+            option.textContent = key.charAt(0).toUpperCase() + key.slice(1);
-        option.textContent = key.charAt(0).toUpperCase() + key.slice(1);
+            themeSelect.appendChild(option);
-        themeSelect.appendChild(option);
+        });
-    });
 
-    // Set Initial Values
+        // Set Initial Values
-    const enabledCheckbox = popup.querySelector('#seasonal-enable-toggle');
+        const enabledCheckbox = popup.querySelector('#seasonal-enable-toggle');
-    enabledCheckbox.checked = getSavedSetting('seasonals-enabled', 'true') === 'true';
+        enabledCheckbox.checked = this.getSetting('enabled', 'true') === 'true';
+        themeSelect.value = this.getSetting('theme', 'auto');
 
-    themeSelect.value = getSavedSetting('seasonals-theme', 'auto');
+        // Event Listeners
+        enabledCheckbox.addEventListener('change', (e) => {
+            this.setSetting('enabled', e.target.checked);
+            location.reload();
+        });
 
-    enabledCheckbox.addEventListener('change', (e) => {
+        themeSelect.addEventListener('change', (e) => {
-        setSavedSetting('seasonals-enabled', e.target.checked);
+            this.setSetting('theme', e.target.value);
-        location.reload();
+            location.reload();
-    });
+        });
 
-    themeSelect.addEventListener('change', (e) => {
+        // Close on outside click
-        setSavedSetting('seasonals-theme', e.target.value);
+        const closeHandler = (e) => {
-        location.reload();
+            if (!popup.contains(e.target) && e.target !== anchorElement && !anchorElement.contains(e.target)) {
-    });
+                popup.remove();
+                document.removeEventListener('click', closeHandler);
+            }
+        };
+        setTimeout(() => document.addEventListener('click', closeHandler), 0);
 
-    const closeHandler = (e) => {
+        document.body.appendChild(popup);
-        if (!popup.contains(e.target) && e.target !== anchorElement && !anchorElement.contains(e.target)) {
+    },
-            popup.remove();
+
-            document.removeEventListener('click', closeHandler);
+    toggleSettingsPopup(anchorElement) {
+        const existing = document.querySelector('.seasonal-settings-popup');
+        if (existing) {
+            existing.remove();
+        } else {
+            this.createPopup(anchorElement);
         }
-    };
-    setTimeout(() => document.addEventListener('click', closeHandler), 0);
-
-    document.body.appendChild(popup);
-}
-
-function toggleSettingsPopup(anchorElement) {
-    const existing = document.querySelector('.seasonal-settings-popup');
-    if (existing) {
-        existing.remove();
-    } else {
-        createSettingsPopup(anchorElement);
     }
-}
+};
 
-function injectSettingsIcon() {
+const SeasonalsManager = {
-    const observer = new MutationObserver((mutations, obs) => {
+    config: null,
-        // Check if admin has enabled this feature
+
-        if (window.SeasonalsPluginConfig && window.SeasonalsPluginConfig.EnableClientSideToggle === false) {
+    async init() {
+        // Fetch Config
+        try {
+            const response = await fetch('/Seasonals/Config');
+            if (response.ok) {
+                this.config = await response.json();
+                window.SeasonalsPluginConfig = this.config;
+                console.log('Seasonals: Seasonals Config loaded:', this.config);
+            }
+        } catch (error) {
+            console.error('Seasonals: Error fetching Seasonals config:', error);
+        }
+
+        // Initialize Settings UI
+        SeasonalSettingsManager.init(this.config);
+
+        // User Preference Check
+        const isEnabled = SeasonalSettingsManager.getSetting('enabled', 'true') === 'true';
+        if (!isEnabled) {
+            console.log('Seasonals: Disabled by user preference.');
             return;
         }
 
-        const headerRight = document.querySelector('.headerRight');
+        // Determine Theme
-        if (headerRight && !document.querySelector('.seasonal-settings-button')) {
+        const themeName = this.selectTheme();
-            const icon = createSettingsIcon();
+        console.log(`Seasonals: Selected theme: ${themeName}`);
-            headerRight.prepend(icon);
+
-            // obs.disconnect();
+        if (!themeName || themeName === 'none') {
+            return;
         }
-    });
 
-    observer.observe(document.body, {
+        // Apply Theme
-        childList: true,
+        this.applyTheme(themeName);
-        subtree: true
+    },
-    });
-}
 
-injectSettingsIcon();
+    selectTheme() {
+        // Check local override
+        const forcedTheme = SeasonalSettingsManager.getSetting('theme', 'auto');
+        if (forcedTheme !== 'auto') {
+            console.log(`Seasonals: User forced theme: ${forcedTheme}`);
+            return forcedTheme;
+        }
+
+        const automate = this.config ? this.config.AutomateSeasonSelection : true;
+        const defaultTheme = this.config ? this.config.SelectedSeason : 'none';
+
+        if (!automate) {
+            return defaultTheme;
+        }
+
+        return this.determineCurrentThemeDate();
+    },
+
+    determineCurrentThemeDate() {
+        const date = new Date();
+        const month = date.getMonth();  // 0-11
+        const day = date.getDate();     // 1-31
+    
+        if ((month === 11 && day >= 28) || (month === 0 && day <= 5)) return 'fireworks'; //new year fireworks december 28 - january 5
+    
+        if (month === 1 && day >= 10 && day <= 18) return 'hearts'; // valentine's day february 10 - 18
+    
+        if (month === 11 && day >= 22 && day <= 27) return 'santa'; // santa december 22 - 27
+        // if (month === 11 && day >= 22 && day <= 27) return 'christmas'; // christmas december 22 - 27
+    
+        if (month === 11) return 'snowflakes'; // snowflakes december
+        if (month === 0 || month === 1) return 'snowfall'; // snow january, february
+        // if (month === 0 || month === 1) return 'snowstorm'; // snow january, february
+    
+        if ((month === 2 && day >= 25) || (month === 3 && day <= 25)) return 'easter'; // easter march 25 - april 25
+        
+        //NOT IMPLEMENTED YET
+        //if (month >= 2 && month <= 4) return 'spring';  // spring march, april, may
+
+        //NOT IMPLEMENTED YET
+        //if (month >= 5 && month <= 7) return 'summer';  // summer june, july, august
+
+        if ((month === 9 && day >= 24) || (month === 10 && day <= 5)) return 'halloween'; // halloween october 24 - november 5
+    
+        if (month >= 8 && month <= 10) return 'autumn'; // autumn september, october, november
+    
+        return 'none'; // Fallback (no theme)
+    },
+
+    applyTheme(themeName) {
+        const theme = ThemeConfigs[themeName];
+        if (!theme) {
+            console.error(`Seasonals: Theme "${themeName}" not found.`);
+            return;
+        }
+
+        this.updateThemeContainer(theme.containerClass);
+
+        if (theme.css) this.loadResource('css', theme.css);
+        if (theme.js) this.loadResource('js', theme.js);
+        
+        console.log(`Seasonals: Theme "${themeName}" applied.`);
+    },
+
+    updateThemeContainer(containerClass) {
+        let container = document.querySelector('.seasonals-container');
+        if (!container) {
+            container = document.createElement('div');
+            container.className = 'seasonals-container';
+            document.body.appendChild(container);
+        }
+        container.className = `seasonals-container ${containerClass}`;
+    },
+
+    // helper to resolve paths for local testing vs production
+    resolvePath(path) {
+        if (window.location.protocol === 'file:' || window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
+            return path.replace('/Seasonals/Resources/', './');
+        }
+        return path;
+    },
+
+    loadResource(type, path) {
+        if (!path) return;
+        
+        if (type === 'css') {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = path;
+            // link.href = resolvePath(cssPath);
+            link.onerror = () => console.error(`Seasonals: Failed to load CSS: ${path}`);
+            document.body.appendChild(link);
+        } else if (type === 'js') {
+            const script = document.createElement('script');
+            script.src = path;
+            // script.src = resolvePath(jsPath);
+            script.defer = true;
+            script.onerror = () => console.error(`Seasonals: Failed to load JS: ${path}`);
+            document.body.appendChild(script);
+        }
+    }
+};
+
+SeasonalsManager.init();

README.md

@@ -13,20 +13,17 @@ This plugin is based on my manual mod (see the [legacy branch](https://github.co
   - [Table of Contents](#table-of-contents)
   - [Features](#features)
   - [Overview](#overview)
+  - [Ideas for additional seasonals](#ideas-for-additional-seasonals)
   - [Installation](#installation)
   - [Client Compatibility](#client-compatibility)
   - [Configuration](#configuration)
   - [Automatic Theme Selection](#automatic-theme-selection)
   - [Theme Settings](#theme-settings)
-  - [Build The Plugin By Yourself](#build-the-plugin-by-yourself)
+  - [Build the plugin by yourself](#build-the-plugin-by-yourself)
   - [Troubleshooting](#troubleshooting)
     - [Effects Not Showing](#effects-not-showing)
     - [Docker Permission Issues](#docker-permission-issues)
   - [Contributing](#contributing)
-  - [Legacy Manual Installation](#legacy-manual-installation)
-    - [Installation](#installation-1)
-    - [Usage](#usage)
-    - [Additional Directory: Separate Single Seasonals](#additional-directory-separate-single-seasonals)
 
 ---
 
@@ -34,39 +31,83 @@ This plugin is based on my manual mod (see the [legacy branch](https://github.co
 
 - **Automatic Theme Selection**: Dynamically updates the theme based on the date (e.g., snowflakes in December, fireworks for new year's eve).
 - **Easy Integration**: No manual file editing required. The plugin injects everything automatically.
-- **Configuration UI**: Configure settings directly in the Jellyfin Dashboard (very basic for now, needs some work in the future).
+- **Configuration UI**: Configure settings directly in the Jellyfin Dashboard.
+    <details>
+    <summary>Have a look:</summary>
+    <img width="852" height="782" alt="Admin-Settings" src="https://github.com/user-attachments/assets/03d04ea8-7dd9-418e-88f8-9ae2937c06bb" />
+    </details>
+- **User Toggle**: Optionally allow users to enable/disable seasonal effects from their client.
+    <details>
+    <summary>Have a look:</summary>
+    <img width="467" height="263" alt="Client-Settings" src="https://github.com/user-attachments/assets/a8dfc90a-16c8-409c-9133-4139f6527b0b" />
+    </details>
 
 ## Overview
+Click on the following themes to expand them and see the theme in action:
+
+<details>
+<summary>Easter</summary>
 
-**Easter**
 ![easter](https://github.com/user-attachments/assets/63665099-5c3c-4209-be6e-dda3686b2a49)
+</details>
+
+<details>
+<summary>Autumn</summary>
 
-**Autumn**
 ![autumn](https://github.com/user-attachments/assets/df27d61c-d2d6-4776-82d7-89bf789a7462)
+</details>
+
+<details>
+<summary>Santa</summary>
 
-**Santa**
 ![Santa-10](https://github.com/user-attachments/assets/a69b0aa3-537d-4463-b6bc-166f0a316c37)
+</details>
+
+<details>
+<summary>Christmas</summary>
 
-**Christmas**
 ![christmas](https://github.com/user-attachments/assets/e70a425d-866f-4617-bbfe-3c03e3654717)
+</details>
+
+<details>
+<summary>Fireworks</summary>
 
-**Fireworks**
 ![fireworks](https://github.com/user-attachments/assets/6c8b629e-b338-4dde-910b-c832aa29d77d)
+</details>
+
+<details>
+<summary>Halloween</summary>
 
-**Halloween**
 ![halloween](https://github.com/user-attachments/assets/221a1390-847e-45a4-b8eb-dc5b45d5df5c)
+</details>
+
+<details>
+<summary>Hearts</summary>
 
-**Hearts**
 ![hearts](https://github.com/user-attachments/assets/e084cb0c-246e-4234-b6dd-d561923c6c91)
+</details>
+
+<details>
+<summary>Snowfall</summary>
 
-**Snowfall**
 ![snowfall](https://github.com/user-attachments/assets/24bfdd84-f354-4129-933c-bb29b4180517)
+</details>
+
+<details>
+<summary>Snowflakes</summary>
 
-**Snowflakes**
 ![snowflakes](https://github.com/user-attachments/assets/78f2e925-8cf6-4a0b-8a25-f05594de4efd)
+</details>
+
+<details>
+<summary>Snowstorm</summary>
 
-**Snowstorm**
 ![snowstorm](https://github.com/user-attachments/assets/6fd726d2-34d1-4f80-8ed6-2f482155059f)
+</details>
+
+
+## Ideas for additional seasonals
+If you have any (specific) ideas for additional seasonals, feel free to open an issue or create a pull request.
 
 ## Installation
 
@@ -135,7 +176,7 @@ If automatic selection is enabled, the following themes are applied based on the
 ## 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 The Plugin By Yourself
+## Build the plugin by yourself
 
 If you want to build the plugin yourself:
 
@@ -203,116 +244,3 @@ volumes:
 
 Feel free to contribute to this project by creating pull requests or reporting issues.
 
----
-
-## Legacy Manual Installation
-
-<details>
-<summary>Click to expand instructions for the old manual installation method (without plugin)</summary>
-
-### Installation
-
-> [!TIP]
-> Take a look at [CodeDevMLH/Jellyfin-Mods-Automated-Script](https://github.com/CodeDevMLH/Jellyfin-Mods-Automated-Script)
-
-1. **Add Seasonal Container to `index.html`**  
-   Edit the `index.html` file of your Jellyfin web instance. Add the following code inside the `<body>` tag:
-
-   ```html
-   <div class="seasonals-container"></div>
-   <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/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:
-
-    ```javascript
-    const automateThemeSelection = true; // Set to false to disable automatic theme selection based on current date
-    const defaultTheme = 'none';    // Default theme if automatic selection is off
-
-    const themeConfigs = {
-        snowflakes: {
-            css: 'seasonals/snowflakes.css',
-            js: 'seasonals/snowflakes.js',
-            containerClass: 'snowflakes'
-        },
-        snowfall: {
-            css: 'seasonals/snowfall.css',
-            js: 'seasonals/snowfall.js',
-            containerClass: 'snowfall-container'
-        },
-        
-        // more configs...
-
-        none: {
-            containerClass: 'none'
-        },
-    };
-    ```
-
-4. **Reload the web interface**  
-    After making these changes, restart your Jellyfin server and/or refresh the web interface (ctrl+F5, sometimes you need to clear the browsers temp files/cache (every time with firefox ;-()) to see the changes.
-
-### Theme Settings
-Each theme's JavaScript file contains additional settings to customize its behavior. Here are examples for the `autumn` and `snowflakes` themes:
-
-**Autumn Theme Settings**
-```javascript
-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 animation duration for random leaves
-const leafCount = 25; // Number of random extra leaves
-```
-
-**Snowflakes Theme Settings**
-```javascript
-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 snowflakes
-const snowflakeCount = 25; // Number of random extra snowflakes
-```
-
-### Usage
-**Automatic Theme Selection**  
-By default, the theme is automatically selected based on the date. For example:
-
-    Snowfall: January
-    Hearts: February (Valentine's Day)
-    Halloween: October
-
-Modify the determineCurrentTheme() function in seasonals.js to adjust date-based logic.
-
-**Manual Theme Selection**  
-To use a fixed theme, set automateThemeSelection to false in the theme-configs.js file and specify a defaultTheme.
-
-**Custom Themes**  
-1. Add your CSS and JavaScript files to the seasonals folder.
-   
-2. Extend the themeConfigs object with your theme details:
-    ```javascript
-    myTheme: {
-        css: 'seasonals/my-theme.css',
-        js: 'seasonals/my-theme.js',
-        containerClass: 'my-theme-container',
-    }
-    ```
-
-
-### Additional Directory: Separate Single Seasonals
-For users who prefer not to use the automatic seasonal theme selection, individual seasonals are available in the `separate single seasonals` folder. Each seasonal theme can be independently loaded and used without relying on the main automatic selection system.
-
-but this requires to the modify of the `index.html` with adding the html in `add_to_index_html`.
-
-To use a single seasonal theme, include its specific CSS and JS files in your `index.html` inside the `<body> </body>` tags provided by `add_to_index_html.html` in the sub-theme-folders as shown below:
-
-```html
-<div class="seasonalsname-container"></div>
-<script src="separate single seasonals/snowflakes.js"></script>
-<link rel="stylesheet" href="separate single seasonals/snowflakes.css">
-
-</details>

git_cheat_sheet.md

@@ -26,8 +26,11 @@ git merge main
 Setzt deine Commits neu auf die Spitze eines anderen Branches. Die Commit-IDs werden dabei neu geschrieben.
 
 ```bash
+git stash		  # (optional) Änderungen parken.
 git checkout dev
-git rebase main
+git fetch origin
+git rebase origin/main
+git stash pop	  # (optional) Änderungen zurückholen.
 ```
 
 | Details   |        |
@@ -38,6 +41,60 @@ git rebase main
 
 ---
 
+## **Git: dev zurücksetzen & „main ist Chef“**
+
+Problem
+
+Beim Arbeiten mit Git passiert oft Folgendes:
+
+- `dev` hat Commits, die nicht in `main` sind
+- diese Commits brauche ich nicht mehr
+- beim `git rebase origin/main` will Git trotzdem mergen oder Konflikte lösen
+
+⚠️ Wichtiges Missverständnis:
+
+Das sind keine lokalen Änderungen, sondern Commits, die auf `dev` existieren.
+
+`git reset --hard origin/dev` entfernt nur lokale, nicht gepushte Commits,
+aber nicht Commits, die bereits auf `origin/dev` liegen.
+
+Praktische Befehle & sichere Vorgehensweise
+
+- Prüfen — welche Commits würden entfernt werden:
+
+```bash
+git fetch origin
+git log --oneline origin/main..origin/dev
+```
+
+- Optional: Backup des aktuellen `origin/dev`, falls etwas schiefgeht:
+
+```bash
+git fetch origin
+git branch backup/dev origin/dev
+```
+
+- Sicheres Zurücksetzen von `dev` auf `main` (lokal + remote):
+
+```bash
+git checkout dev
+git fetch origin
+git reset --hard origin/main
+git push --force-with-lease origin dev
+```
+
+- Alternative (ohne lokalen Checkout): Push von `main` direkt nach `dev`:
+
+```bash
+git fetch origin
+git push --force-with-lease origin origin/main:refs/heads/dev
+```
+
+- Warnung: Diese Aktionen schreiben die Remote‑History um. Koordiniere dich mit
+	dem Team bevor du ein Force‑Push ausführst. Verwende `--force-with-lease`
+	anstelle von `--force` für etwas mehr Sicherheit.
+
+
 ## 📦 Temporäres Speichern & Spezialbefehle
 
 ### Stash (Das "Regal")

manifest.json

@@ -9,12 +9,12 @@
     "imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/raw/branch/main/logo.png",
     "versions": [
       {
-        "version": "1.6.5.0",
+        "version": "1.6.13.4",
-        "changelog": "- feat: Add client-side toggle option for seasonal settings",
+        "changelog": "- Refactor seasonals.js",
         "targetAbi": "10.11.0.0",
-        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/releases/download/v1.6.5.0/Jellyfin.Plugin.Seasonals.zip",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/releases/download/v1.6.13.4/Jellyfin.Plugin.Seasonals.zip",
-        "checksum": "4b91182f842076bb98538f6cd268f6e0",
+        "checksum": "8e46e1ba0cfc0d2501be33c03effb9e3",
-        "timestamp": "2026-02-03T19:37:36Z"
+        "timestamp": "2026-02-04T15:51:33Z"
       },
       {
         "version": "1.5.1.0",
@@ -107,6 +107,62 @@
     "category": "General",
     "imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
     "versions": [
+      {
+        "version": "1.4.0.2",
+        "changelog": "- feat: Add client-side settings feature for selected media bar settings",
+        "targetAbi": "10.11.0.0",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.4.0.2/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "6026fb8878a51f6dbe18aab1ac006df8",
+        "timestamp": "2026-02-04T15:45:39Z"
+      },
+      {
+        "version": "1.4.0.1",
+        "changelog": "- feat: Add client-side settings feature for selected media bar settings",
+        "targetAbi": "10.11.0.0",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.4.0.1/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "4068c03b1ab809906d64d4faed1c1b0e",
+        "timestamp": "2026-02-04T15:01:50Z"
+      },
+      {
+        "version": "1.4.0.0",
+        "changelog": "- feat: Add client-side settings feature for selected media bar settings",
+        "targetAbi": "10.11.0.0",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.4.0.0/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "20faa2a703dbb46591f4bd09e6ab7ec3",
+        "timestamp": "2026-02-04T12:49:45Z"
+      },
+      {
+        "version": "1.3.0.3",
+        "changelog": "- feat: Enhance custom media ID functionality with manual trailer override support",
+        "targetAbi": "10.11.0.0",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.3.0.3/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "1d9e0a8342d46f84aed3f7bd1bee32d3",
+        "timestamp": "2026-02-04T01:41:35Z"
+      },
+      {
+        "version": "1.3.0.2",
+        "changelog": "- feat: Enhance custom media ID functionality with manual trailer override support",
+        "targetAbi": "10.11.0.0",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.3.0.2/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "22e79daa5f433ca09a3db4f8e37679b4",
+        "timestamp": "2026-02-04T01:27:55Z"
+      },
+      {
+        "version": "1.3.0.1",
+        "changelog": "- feat: Enhance custom media ID functionality with manual trailer override support",
+        "targetAbi": "10.11.0.0",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.3.0.1/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "5a4f555e29c733dabd51169f6ace56eb",
+        "timestamp": "2026-02-04T01:14:19Z"
+      },
+      {
+        "version": "1.3.0.0",
+        "changelog": "- feat: Enhance custom media ID functionality with manual trailer override support",
+        "targetAbi": "10.11.0.0",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.3.0.0/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "83c26ba8f7ad6e1a7fe73c7190f532f3",
+        "timestamp": "2026-02-04T00:07:15Z"
+      },
       {
         "version": "1.2.3.7",
         "changelog": "- Fixes the issue where buttons were cut off on smaller screens such as on S24/S25.\n- Update mediaBarEnhanced.js and mediaBarEnhanced.css with version 3.0.9 from original repo",