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

Refactor snowflakes.js and snowflakes.css to streamline snowflake initialization and enhance mobile responsiveness

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-28 01:22:18 +01:00
parent 4703ba48ed
commit 494e475f42
2 changed files with 70 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
Jellyfin.Plugin.Seasonals/Web/snowflakes.css
View File

@@ -1,112 +1,54 @@
.snowflakes { .snowflakes {
display: block; display: block;
position: fixed; position: fixed;
overflow: hidden; overflow: hidden;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;
z-index: 10; z-index: 10;
contain: layout paint; contain: layout paint;
} }
.snowflake { .snowflake {
position: fixed; position: fixed;
z-index: 15; z-index: 15;
top: 0; top: 0;
will-change: transform; will-change: transform;
translate: 0 -10vh; translate: 0 -10vh;
font-size: 1em; font-size: 1em;
color: #fff; color: #fff;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
text-shadow: 0 0 5px #000; text-shadow: 0 0 5px #000;
user-select: none; user-select: none;
cursor: default; cursor: default;
animation-name: snowflakes-fall, snowflakes-shake; animation-name: snowflakes-fall, snowflakes-shake;
animation-duration: 12s, 3s; animation-duration: 12s, 3s;
animation-timing-function: linear, ease-in-out; animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite; animation-iteration-count: infinite, infinite;
} }
@keyframes snowflakes-fall { @keyframes snowflakes-fall {
0% { 0% {
translate: 0 -10vh; translate: 0 -10vh;
} }
100% { 100% {
translate: 0 110vh; translate: 0 110vh;
} }
} }
@keyframes snowflakes-shake { @keyframes snowflakes-shake {
0%, 0%,
100% { 100% {
transform: translateX(0); transform: translateX(0);
} }
50% { 50% {
transform: translateX(80px); transform: translateX(80px);
} }
}
.snowflake:nth-of-type(0) {
left: 0%;
animation-delay: 0s, 0s;
}
.snowflake:nth-of-type(1) {
left: 10%;
animation-delay: 1s, 1s;
}
.snowflake:nth-of-type(2) {
left: 20%;
animation-delay: 6s, 0.5s;
}
.snowflake:nth-of-type(3) {
left: 30%;
animation-delay: 4s, 2s;
}
.snowflake:nth-of-type(4) {
left: 40%;
animation-delay: 2s, 2s;
}
.snowflake:nth-of-type(5) {
left: 50%;
animation-delay: 8s, 3s;
}
.snowflake:nth-of-type(6) {
left: 60%;
animation-delay: 6s, 2s;
}
.snowflake:nth-of-type(7) {
left: 70%;
animation-delay: 2.5s, 1s;
}
.snowflake:nth-of-type(8) {
left: 80%;
animation-delay: 1s, 0s;
}
.snowflake:nth-of-type(9) {
left: 90%;
animation-delay: 3s, 1.5s;
}
.snowflake:nth-of-type(10) {
left: 25%;
animation-delay: 2s, 0s;
}
.snowflake:nth-of-type(11) {
} }

61
Jellyfin.Plugin.Seasonals/Web/snowflakes.js
View File

@@ -2,8 +2,7 @@ const config = window.SeasonalsPluginConfig?.Snowflakes || {};
const snowflakes = config.EnableSnowflakes !== undefined ? config.EnableSnowflakes : true; // enable/disable snowflakes const snowflakes = config.EnableSnowflakes !== undefined ? config.EnableSnowflakes : true; // enable/disable snowflakes
const snowflakeCount = config.SnowflakeCount !== undefined ? config.SnowflakeCount : 25; // count of snowflakes const snowflakeCount = config.SnowflakeCount !== undefined ? config.SnowflakeCount : 25; // count of snowflakes
const randomSnowflakes = config.EnableRandomSnowflakes !== undefined ? config.EnableRandomSnowflakes : true; // enable random snowflakes const snowflakeCountMobile = config.SnowflakeCountMobile !== undefined ? config.SnowflakeCountMobile : 10; // count of snowflakes on mobile
const randomSnowflakesMobile = config.EnableRandomSnowflakesMobile !== undefined ? config.EnableRandomSnowflakesMobile : false; // enable random snowflakes on mobile
const enableColoredSnowflakes = config.EnableColoredSnowflakes !== undefined ? config.EnableColoredSnowflakes : true; // enable/disable colored snowflakes const enableColoredSnowflakes = config.EnableColoredSnowflakes !== undefined ? config.EnableColoredSnowflakes : true; // enable/disable colored snowflakes
const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different durations const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different durations
@@ -46,11 +45,16 @@ observer.observe(document.body, {
attributes: true attributes: true
}); });
function addRandomSnowflakes(count) { function initSnowflakes(count) {
const snowflakeContainer = document.querySelector('.snowflakes'); // get the snowflake container let snowflakeContainer = document.querySelector('.snowflakes'); // get the snowflake container
if (!snowflakeContainer) return; // exit if snowflake container is not found if (!snowflakeContainer) {
snowflakeContainer = document.createElement("div");
snowflakeContainer.className = "snowflakes";
snowflakeContainer.setAttribute("aria-hidden", "true");
document.body.appendChild(snowflakeContainer);
}
console.log('Adding random snowflakes'); console.log('Adding snowflakes');
for (let i = 0; i < count; i++) { for (let i = 0; i < count; i++) {
// create a new snowflake element // create a new snowflake element
@@ -83,49 +87,18 @@ function addRandomSnowflakes(count) {
// add the snowflake to the container // add the snowflake to the container
snowflakeContainer.appendChild(snowflake); snowflakeContainer.appendChild(snowflake);
} }
console.log('Random snowflakes added'); console.log('Snowflakes added');
} }
// initialize standard snowflakes // initialize snowflakes
function initSnowflakes() {
const snowflakesContainer = document.querySelector('.snowflakes') || document.createElement("div");
if (!document.querySelector('.snowflakes')) {
snowflakesContainer.className = "snowflakes";
snowflakesContainer.setAttribute("aria-hidden", "true");
document.body.appendChild(snowflakesContainer);
}
// Array of snowflake characters
const snowflakeSymbols = ['❅', '❆'];
// create the 12 standard snowflakes
for (let i = 0; i < 12; i++) {
const snowflake = document.createElement('div');
snowflake.className = 'snowflake';
snowflake.textContent = snowflakeSymbols[i % 2]; // change between ❅ and ❆
// set random animation duration
if (enableDiffrentDuration) {
const randomAnimationDuration = Math.random() * 14 + 10; // delay (10s to 14s)
const randomAnimationDuration2 = Math.random() * 5 + 3; // delay (3s to 5s)
snowflake.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
}
snowflakesContainer.appendChild(snowflake);
}
}
// initialize snowflakes and add random snowflakes
function initializeSnowflakes() { function initializeSnowflakes() {
if (!snowflakes) return; // exit if snowflakes are disabled if (!snowflakes) return; // exit if snowflakes are disabled
initSnowflakes();
toggleSnowflakes();
const screenWidth = window.innerWidth; // get the screen width to detect mobile devices const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
if (randomSnowflakes && (screenWidth > 768 || randomSnowflakesMobile)) { // add random snowflakes only on larger screens, unless enabled for mobile devices const count = !isMobile ? snowflakeCount : snowflakeCountMobile;
addRandomSnowflakes(snowflakeCount);
} initSnowflakes(count);
toggleSnowflakes();
} }
initializeSnowflakes(); initializeSnowflakes();