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 {
display: block;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
contain: layout paint;
}
.snowflake {
position: fixed;
z-index: 15;
top: 0;
will-change: transform;
translate: 0 -10vh;
font-size: 1em;
color: #fff;
font-family: Arial, sans-serif;
text-shadow: 0 0 5px #000;
user-select: none;
cursor: default;
animation-name: snowflakes-fall, snowflakes-shake;
animation-duration: 12s, 3s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
}
@keyframes snowflakes-fall {
0% {
translate: 0 -10vh;
}
100% {
translate: 0 110vh;
}
}
@keyframes snowflakes-shake {
0%,
100% {
transform: translateX(0);
}
50% {
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) {
.snowflakes {
display: block;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
contain: layout paint;
}
.snowflake {
position: fixed;
z-index: 15;
top: 0;
will-change: transform;
translate: 0 -10vh;
font-size: 1em;
color: #fff;
font-family: Arial, sans-serif;
text-shadow: 0 0 5px #000;
user-select: none;
cursor: default;
animation-name: snowflakes-fall, snowflakes-shake;
animation-duration: 12s, 3s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
}
@keyframes snowflakes-fall {
0% {
translate: 0 -10vh;
}
100% {
translate: 0 110vh;
}
}
@keyframes snowflakes-shake {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(80px);
}
}

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 snowflakeCount = config.SnowflakeCount !== undefined ? config.SnowflakeCount : 25; // count of 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
const snowflakeCountMobile = config.SnowflakeCountMobile !== undefined ? config.SnowflakeCountMobile : 10; // count of snowflakes on mobile
const enableColoredSnowflakes = config.EnableColoredSnowflakes !== undefined ? config.EnableColoredSnowflakes : true; // enable/disable colored snowflakes
const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different durations
@@ -46,11 +45,16 @@ observer.observe(document.body, {
attributes: true
});
function addRandomSnowflakes(count) {
const snowflakeContainer = document.querySelector('.snowflakes'); // get the snowflake container
if (!snowflakeContainer) return; // exit if snowflake container is not found
function initSnowflakes(count) {
let snowflakeContainer = document.querySelector('.snowflakes'); // get the snowflake container
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++) {
// create a new snowflake element
@@ -83,49 +87,18 @@ function addRandomSnowflakes(count) {
// add the snowflake to the container
snowflakeContainer.appendChild(snowflake);
}
console.log('Random snowflakes added');
console.log('Snowflakes added');
}
// initialize standard 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
// initialize snowflakes
function initializeSnowflakes() {
if (!snowflakes) return; // exit if snowflakes are disabled
initSnowflakes();
toggleSnowflakes();
const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
if (randomSnowflakes && (screenWidth > 768 || randomSnowflakesMobile)) { // add random snowflakes only on larger screens, unless enabled for mobile devices
addRandomSnowflakes(snowflakeCount);
}
const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
const count = !isMobile ? snowflakeCount : snowflakeCountMobile;
initSnowflakes(count);
toggleSnowflakes();
}
initializeSnowflakes();