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

Jellyfin.Plugin.Seasonals/Configuration/configPage.html

@@ -36,6 +36,7 @@
                 <form id="SeasonalsConfigForm">
                     <!-- BASIC Tab -->
                     <div id="seasonals-basic" class="seasonals-tab-content">
+                        <h2 class="sectionTitle">Main Plugin Settings</h2>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label class="emby-checkbox-label">
                                 <input id="SeasonalsIsEnabled" name="SeasonalsIsEnabled" type="checkbox" is="emby-checkbox" />
@@ -87,26 +88,30 @@
 
                     <!-- Auto Selection Tab -->
                     <div id="seasonals-auto-selection" class="seasonals-tab-content" style="display: none;">
-                        <div style="background-color: rgba(255, 255, 255, 0.05); border-left: 4px solid #00a4dc; border-radius: 4px; padding: 1em 1.5em; margin-bottom: 1.5em;">
+                        <h2>Auto Selection Rules</h2>
-                            <h3>Auto Selection Rules</h3>
+
-                            <p>Define rules to automatically select a season based on the date. Rules are evaluated from top to bottom. The first matching rule wins.</p>
+                        <div style="background-color: rgba(255, 255, 255, 0.05); border-left: 4px solid #00a4dc; border-radius: 4px; padding: 1em 1.5em; margin: 1.5em 0; display: flex; align-items: center; gap: 1em;">
+                            <i class="material-icons" style="color: #00a4dc; font-size: 24px;">info</i>
+                            <div>Define rules to automatically select a season based on the date. Rules are evaluated from top to bottom. The first matching rule wins.</div>
                         </div>
                         
                         <div id="seasonalRulesList">
                             <!-- Rules will be injected here via JS -->
                         </div>
 
-                        <button is="emby-button" type="button" class="raised button-accent block" onclick="SeasonalsConfigPage.addRule();">
+                        <button is="emby-button" type="button" class="raised emby-button" onclick="SeasonalsConfigPage.addRule();"
-                            <i class="material-icons button-icon button-icon-left">add</i>
+                            style="margin-top: 1em; display: inline-flex; align-items: center; gap: 0.4em;">
+                            <i class="material-icons" style="font-size: 24px;">add</i>
                             <span>Add Rule</span>
                         </button>
                     </div>
 
                     <!-- Advanced Tab -->
                     <div id="seasonals-advanced" class="seasonals-tab-content" style="display: none;">
-                         <p>Configure specific settings for each seasonal theme below.</p>
+                        <h2 class="sectionTitle">Configure specific settings for each seasonal theme</h2>
-                         <p>All symbol count settings add this number in addition to the standard 12 symbols (if additional symbols is enabled).</p>
+                        <!-- <p>Configure specific settings for each seasonal theme below.</p> -->
-                         <details>
+                        <p>All symbol count settings add this number in addition to the standard 12 symbols (if additional symbols is enabled).</p>
+                        <details>
                             <summary>Autumn</summary>
                             <div class="checkboxContainer checkboxContainer-withDescription">
                                 <label class="emby-checkbox-label">
@@ -611,7 +616,7 @@
             }
             .seasonal-rule-content {
                 display: grid;
-                grid-template-columns: 2fr 1fr 1fr 2fr;
+                grid-template-columns: 2fr 1.3fr 1.3fr 2fr;
                 gap: 15px;
                 align-items: end;
             }
@@ -623,7 +628,13 @@
                 display: flex;
                 gap: 10px;
                 align-items: flex-end;
+                justify-content: space-between;
             }
+            .date-range-group > .inputContainer,
+            .date-range-group > .selectContainer {
+                 flex: 1;
+            }
+
             @media (max-width: 800px) {
                 .seasonal-rule-content {
                     grid-template-columns: 1fr;
@@ -672,79 +683,115 @@
                     var startMonth = data ? (data.StartMonth !== undefined ? data.StartMonth : (data.startMonth !== undefined ? data.startMonth : 1)) : 1;
                     var endDay = data ? (data.EndDay !== undefined ? data.EndDay : (data.endDay !== undefined ? data.endDay : 1)) : 1;
                     var endMonth = data ? (data.EndMonth !== undefined ? data.EndMonth : (data.endMonth !== undefined ? data.endMonth : 1)) : 1;
-                    var theme = data ? (data.Theme || data.theme || 'snowflakes') : 'snowflakes';
+                    var theme = data ? (data.Theme || data.theme || 'none') : 'none';
 
-                    div.innerHTML = `
+                    var days = [];
-                         <div class="seasonal-rule-header">
+                    for (var i = 1; i <= 31; i++) days.push(i);
-                             <div style="font-weight: bold; font-size: 1.1em;" class="rule-title">${name}</div>
-                             <div class="rule-actions">
-                                 <button type="button" is="paper-icon-button-light" class="btn-move-up" title="Move Up"><i class="material-icons">arrow_upward</i></button>
-                                 <button type="button" is="paper-icon-button-light" class="btn-move-down" title="Move Down"><i class="material-icons">arrow_downward</i></button>
-                                 <button type="button" is="paper-icon-button-light" class="btn-remove" title="Remove"><i class="material-icons">delete</i></button>
-                             </div>
-                         </div>
-                         <div class="seasonal-rule-content">
-                            <div class="inputContainer" style="margin:0;">
-                                <label class="inputLabel">Name</label>
-                                <input is="emby-input" class="rule-name" value="${name}" onchange="this.closest('.seasonal-rule').querySelector('.rule-title').innerText = this.value" />
-                            </div>
-                            <div class="date-range-group">
-                                <div class="inputContainer" style="margin:0;">
-                                    <label class="inputLabel">Start Day</label>
-                                    <input is="emby-input" type="number" class="rule-start-day" value="${startDay}" min="1" max="31" />
-                                </div>
-                                <div class="inputContainer" style="margin:0;">
-                                    <label class="inputLabel">Month</label>
-                                    <input is="emby-input" type="number" class="rule-start-month" value="${startMonth}" min="1" max="12" />
-                                </div>
-                            </div>
 
-                            <div class="date-range-group">
+                    var months = [
-                                <div class="inputContainer" style="margin:0;">
+                        { v: 1, n: 'Jan' }, { v: 2, n: 'Feb' }, { v: 3, n: 'Mar' }, { v: 4, n: 'Apr' },
-                                    <label class="inputLabel">End Day</label>
+                        { v: 5, n: 'May' }, { v: 6, n: 'Jun' }, { v: 7, n: 'Jul' }, { v: 8, n: 'Aug' },
-                                    <input is="emby-input" type="number" class="rule-end-day" value="${endDay}" min="1" max="31" />
+                        { v: 9, n: 'Sep' }, { v: 10, n: 'Oct' }, { v: 11, n: 'Nov' }, { v: 12, n: 'Dec' }
-                                </div>
+                    ];
-                                <div class="inputContainer" style="margin:0;">
-                                    <label class="inputLabel">Month</label>
-                                    <input is="emby-input" type="number" class="rule-end-month" value="${endMonth}" min="1" max="12" />
-                                </div>
-                            </div>
 
-                            <div class="selectContainer" style="margin:0;">
+                    // Build select HTML via string concatenation to avoid Jellyfin's ${} localization processing
-                                <label class="selectLabel">Theme</label>
+                    function mkSelect(val, opts, cls) {
-                                <select is="emby-select" class="rule-theme" style="width: 100%;">
+                        var h = '<select class="emby-select emby-select-withcolor ' + cls + '" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">';
-                                    <option value="none" ${theme === 'none' ? 'selected' : ''}>None</option>
+                        opts.forEach(function(o) {
-                                    <option value="snowflakes" ${theme === 'snowflakes' ? 'selected' : ''}>Snowflakes</option>
+                            var v = o.v || o;
-                                    <option value="snowfall" ${theme === 'snowfall' ? 'selected' : ''}>Snowfall</option>
+                            var n = o.n || o;
-                                    <option value="snowstorm" ${theme === 'snowstorm' ? 'selected' : ''}>Snowstorm</option>
+                            h += '<option value="' + v + '" ' + (v == val ? 'selected' : '') + '>' + n + '</option>';
-                                    <option value="fireworks" ${theme === 'fireworks' ? 'selected' : ''}>Fireworks</option>
+                        });
-                                    <option value="halloween" ${theme === 'halloween' ? 'selected' : ''}>Halloween</option>
+                        h += '</select>';
-                                    <option value="hearts" ${theme === 'hearts' ? 'selected' : ''}>Hearts</option>
+                        return h;
-                                    <option value="christmas" ${theme === 'christmas' ? 'selected' : ''}>Christmas</option>
+                    }
-                                    <option value="santa" ${theme === 'santa' ? 'selected' : ''}>Santa</option>
+
-                                    <option value="autumn" ${theme === 'autumn' ? 'selected' : ''}>Autumn</option>
+                    div.innerHTML =
-                                    <option value="easter" ${theme === 'easter' ? 'selected' : ''}>Easter</option>
+                        '<div class="seasonal-rule-header">' +
-                                </select>
+                        '    <div style="font-weight: bold; font-size: 1.1em;" class="rule-title"></div>' +
-                            </div>
+                        '    <div class="rule-actions">' +
-                         </div>
+                        '        <button type="button" is="paper-icon-button-light" class="btn-move-up" title="Move Up"><i class="material-icons">arrow_upward</i></button>' +
-                    `;
+                        '        <button type="button" is="paper-icon-button-light" class="btn-move-down" title="Move Down"><i class="material-icons">arrow_downward</i></button>' +
+                        '        <button type="button" is="paper-icon-button-light" class="btn-remove" title="Remove"><i class="material-icons">delete</i></button>' +
+                        '    </div>' +
+                        '</div>' +
+                        '<div class="seasonal-rule-content">' +
+                        '    <div class="inputContainer" style="margin:0;">' +
+                        '        <label class="inputLabel">Name</label>' +
+                        '        <input is="emby-input" class="rule-name" onchange="SeasonalsConfigPage.updateRuleTitles();" />' +
+                        '    </div>' +
+                        '    <div class="date-range-group">' +
+                        '        <div class="selectContainer" style="margin:0; flex: 1;">' +
+                        '            <label class="selectLabel">Start Day</label>' +
+                                     mkSelect(startDay, days, 'rule-start-day') +
+                        '        </div>' +
+                        '        <div class="selectContainer" style="margin:0; flex: 1;">' +
+                        '            <label class="selectLabel">Month</label>' +
+                                     mkSelect(startMonth, months, 'rule-start-month') +
+                        '        </div>' +
+                        '    </div>' +
+                        '    <div class="date-range-group">' +
+                        '        <div class="selectContainer" style="margin:0; flex: 1;">' +
+                        '            <label class="selectLabel">End Day</label>' +
+                                     mkSelect(endDay, days, 'rule-end-day') +
+                        '        </div>' +
+                        '        <div class="selectContainer" style="margin:0; flex: 1;">' +
+                        '            <label class="selectLabel">Month</label>' +
+                                     mkSelect(endMonth, months, 'rule-end-month') +
+                        '        </div>' +
+                        '    </div>' +
+                        '    <div class="selectContainer" style="margin:0;">' +
+                        '        <label class="selectLabel">Theme</label>' +
+                        '        <select class="emby-select emby-select-withcolor rule-theme" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">' +
+                        '            <option value="none">None</option>' +
+                        '            <option value="snowflakes">Snowflakes</option>' +
+                        '            <option value="snowfall">Snowfall</option>' +
+                        '            <option value="snowstorm">Snowstorm</option>' +
+                        '            <option value="fireworks">Fireworks</option>' +
+                        '            <option value="halloween">Halloween</option>' +
+                        '            <option value="hearts">Hearts</option>' +
+                        '            <option value="christmas">Christmas</option>' +
+                        '            <option value="santa">Santa</option>' +
+                        '            <option value="autumn">Autumn</option>' +
+                        '            <option value="easter">Easter</option>' +
+                        '            <option value="resurrection">Resurrection</option>' +
+                        '        </select>' +
+                        '    </div>' +
+                        '</div>';
 
                     container.appendChild(div);
 
+                    // Set values programmatically
+                    div.querySelector('.rule-name').value = name;
+                    div.querySelector('.rule-theme').value = theme;
+
                     // Bind events
                     div.querySelector('.btn-remove').addEventListener('click', function() {
                         div.remove();
+                        SeasonalsConfigPage.updateRuleTitles();
                     });
                     div.querySelector('.btn-move-up').addEventListener('click', function() {
                         if (div.previousElementSibling) {
                             container.insertBefore(div, div.previousElementSibling);
+                            SeasonalsConfigPage.updateRuleTitles();
                         }
                     });
                     div.querySelector('.btn-move-down').addEventListener('click', function() {
                         if (div.nextElementSibling) {
                             container.insertBefore(div.nextElementSibling, div);
+                            SeasonalsConfigPage.updateRuleTitles();
                         }
                     });
+
+                    this.updateRuleTitles();
+                },
+
+                updateRuleTitles: function() {
+                    var rules = document.querySelectorAll('.seasonal-rule');
+                    rules.forEach((rule, index) => {
+                        var name = rule.querySelector('.rule-name').value;
+                        rule.querySelector('.rule-title').innerText = '#' + (index + 1) + ' ' + name;
+                    });
                 },
 
                 renderRules: function(rules) {

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

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

manifest.json

@@ -9,12 +9,12 @@
     "imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/raw/branch/main/logo.png",
     "versions": [
       {
-        "version": "1.7.0.3",
+        "version": "1.7.0.14",
         "changelog": "- feat: add customizable auto seasonal list via config page\n- feat: add new season theme 'resurrection' by Bioflash257",
         "targetAbi": "10.11.0.0",
-        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/releases/download/v1.7.0.3/Jellyfin.Plugin.Seasonals.zip",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/releases/download/v1.7.0.14/Jellyfin.Plugin.Seasonals.zip",
-        "checksum": "8acd06ebd80583e8d3366e4f4b9d98f9",
+        "checksum": "028df715bde488d10ef207dc38ac1b87",
-        "timestamp": "2026-02-16T15:55:26Z"
+        "timestamp": "2026-02-16T23:02:32Z"
       },
       {
         "version": "1.6.3.0",