CodeDevMLH/Jellyfin-Seasonals-Plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

Add new seasonal themes: implement Frost, Film Noir, Oscar, Mario Day, Star Wars, Oktoberfest, Friday the 13th, Eid, Sports, Olympia, Space, Underwater, and Birthday options in configuration

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-24 23:39:49 +01:00
parent 9b8a563e43
commit be4313d776
1 changed files with 37 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
Jellyfin.Plugin.Seasonals/Web/test-site.html
View File

@@ -154,6 +154,7 @@
border-radius: 8px; border-radius: 8px;
aspect-ratio: 2/3; aspect-ratio: 2/3;
position: relative; position: relative;
z-index: 6;
overflow: hidden; overflow: hidden;
} }
@@ -175,7 +176,7 @@
background: rgba(0, 164, 220, 0.15); background: rgba(0, 164, 220, 0.15);
border-top: 1px solid rgba(0, 164, 220, 0.3); border-top: 1px solid rgba(0, 164, 220, 0.3);
padding: 0.5em 1.5em; padding: 0.5em 1.5em;
z-index: 199; z-index: -1;
font-size: 0.8em; font-size: 0.8em;
color: #aaa; color: #aaa;
text-align: center; text-align: center;
@@ -190,7 +191,7 @@
<body> <body>
<!-- Mock Header --> <!-- Mock Header -->
<div class="skinHeader"> <div class="skinHeader skinHeader-withBackground">
<div class="skinHeader-content"> <div class="skinHeader-content">
<span>Jellyfin</span> <span>Jellyfin</span>
</div> </div>
@@ -239,6 +240,7 @@
<option value="snowstorm">Snowstorm</option> <option value="snowstorm">Snowstorm</option>
<option value="fireworks">Fireworks</option> <option value="fireworks">Fireworks</option>
<option value="halloween">Halloween</option> <option value="halloween">Halloween</option>
<option value="legacyhalloween">Legacy Halloween</option>
<option value="hearts">Hearts</option> <option value="hearts">Hearts</option>
<option value="christmas">Christmas</option> <option value="christmas">Christmas</option>
<option value="santa">Santa</option> <option value="santa">Santa</option>
@@ -255,6 +257,19 @@
<option value="pride">Pride</option> <option value="pride">Pride</option>
<option value="rain">Rain</option> <option value="rain">Rain</option>
<option value="storm">Storm (Epilepsy Warning!)</option> <option value="storm">Storm (Epilepsy Warning!)</option>
<option value="frost">Frost / Ice</option>
<option value="filmnoir">Film-Noir</option>
<option value="oscar">Oscar Awards</option>
<option value="marioday">Mario Day</option>
<option value="starwars">Star Wars Day</option>
<option value="oktoberfest">Oktoberfest</option>
<option value="friday13">Friday the 13th</option>
<option value="eid">Eid al-Fitr</option>
<option value="sports">Sports / Football</option>
<option value="olympia">Olympia / Games</option>
<option value="space">Space / Sci-Fi</option>
<option value="underwater">Underwater</option>
<option value="birthday">Birthday</option>
<option value="custom">⚙ Custom (Local Files)</option> <option value="custom">⚙ Custom (Local Files)</option>
</select> </select>
@@ -331,6 +346,7 @@
snowstorm: { css: 'snowstorm.css', js: 'snowstorm.js', container: 'snowstorm-container' }, snowstorm: { css: 'snowstorm.css', js: 'snowstorm.js', container: 'snowstorm-container' },
fireworks: { css: 'fireworks.css', js: 'fireworks.js', container: 'fireworks' }, fireworks: { css: 'fireworks.css', js: 'fireworks.js', container: 'fireworks' },
halloween: { css: 'halloween.css', js: 'halloween.js', container: 'halloween-container' }, halloween: { css: 'halloween.css', js: 'halloween.js', container: 'halloween-container' },
legacyhalloween: { css: 'legacyhalloween.css', js: 'legacyhalloween.js', container: 'legacyhalloween-container' },
hearts: { css: 'hearts.css', js: 'hearts.js', container: 'hearts-container' }, hearts: { css: 'hearts.css', js: 'hearts.js', container: 'hearts-container' },
christmas: { css: 'christmas.css', js: 'christmas.js', container: 'christmas-container' }, christmas: { css: 'christmas.css', js: 'christmas.js', container: 'christmas-container' },
santa: { css: 'santa.css', js: 'santa.js', container: 'santa-container' }, santa: { css: 'santa.css', js: 'santa.js', container: 'santa-container' },
@@ -347,6 +363,19 @@
pride: { css: 'pride.css', js: 'pride.js', container: 'pride-container' }, pride: { css: 'pride.css', js: 'pride.js', container: 'pride-container' },
rain: { css: 'rain.css', js: 'rain.js', container: 'rain-container' }, rain: { css: 'rain.css', js: 'rain.js', container: 'rain-container' },
storm: { css: 'storm.css', js: 'storm.js', container: 'storm-container' }, storm: { css: 'storm.css', js: 'storm.js', container: 'storm-container' },
frost: { css: 'frost.css', js: 'frost.js', container: 'frost-container' },
filmnoir: { css: 'filmnoir.css', js: 'filmnoir.js', container: 'filmnoir-container' },
oscar: { css: 'oscar.css', js: 'oscar.js', container: 'oscar-container' },
marioday: { css: 'marioday.css', js: 'marioday.js', container: 'marioday-container' },
starwars: { css: 'starwars.css', js: 'starwars.js', container: 'starwars-container' },
oktoberfest: { css: 'oktoberfest.css', js: 'oktoberfest.js', container: 'oktoberfest-container' },
friday13: { css: 'friday13.css', js: 'friday13.js', container: 'friday13-container' },
eid: { css: 'eid.css', js: 'eid.js', container: 'eid-container' },
sports: { css: 'sports.css', js: 'sports.js', container: 'sports-container' },
olympia: { css: 'olympia.css', js: 'olympia.js', container: 'olympia-container' },
space: { css: 'space.css', js: 'space.js', container: 'space-container' },
underwater: { css: 'underwater.css', js: 'underwater.js', container: 'underwater-container' },
birthday: { css: 'birthday.css', js: 'birthday.js', container: 'birthday-container' }
}; };
const select = document.getElementById('theme-select'); const select = document.getElementById('theme-select');
@@ -370,13 +399,16 @@
// Remove any theme-created containers on body // Remove any theme-created containers on body
const knownContainers = [ const knownContainers = [
'.snowfall-container', '.snowflakes', '.snowstorm-container', '.snowfall-container', '.snowflakes', '.snowstorm-container',
'.fireworks', '.halloween-container', '.hearts-container', '.fireworks', '.halloween-container', '.legacyhalloween-container', '.hearts-container',
'.christmas-container', '.santa-container', '.autumn-container',
'.christmas-container', '.santa-container', '.autumn-container', '.christmas-container', '.santa-container', '.autumn-container',
'.easter-container', '.resurrection-container', '.spring-container', '.easter-container', '.resurrection-container', '.spring-container',
'.summer-container', '.carnival-container', '.cherryblossom-container', '.summer-container', '.carnival-container', '.cherryblossom-container',
'.earthday-container', '.eurovision-container', '.piday-container', '.earthday-container', '.eurovision-container', '.piday-container',
'.pride-container', '.rain-container', '.storm-container' '.pride-container', '.rain-container', '.storm-container',
'.frost-container', '.filmnoir-container', '.oscar-container',
'.marioday-container', '.starwars-container', '.oktoberfest-container',
'.friday13-container', '.eid-container', '.sports-container',
'.olympia-container', '.space-container', '.underwater-container', '.birthday-container'
]; ];
knownContainers.forEach(sel => { knownContainers.forEach(sel => {
document.querySelectorAll(sel).forEach(el => { document.querySelectorAll(sel).forEach(el => {