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

Refactor animation delays in seasonal effects for improved performance and consistency [skip ci]

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-28 01:29:49 +01:00
parent 494e475f42
commit d5df90a6ae
8 changed files with 96 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Jellyfin.Plugin.Seasonals/Web/autumn.js
View File

@@ -91,6 +91,8 @@ function initLeaves(count) {
// set random horizontal position, animation delay and size(uncomment lines to enable) // set random horizontal position, animation delay and size(uncomment lines to enable)
const randomLeft = Math.random() * 100; // position (0% to 100%) const randomLeft = Math.random() * 100; // position (0% to 100%)
const randomAnimationDelay = Math.random() * 12; // delay for fall (0s to 12s) const randomAnimationDelay = Math.random() * 12; // delay for fall (0s to 12s)
// Display directly symbols on full screen (below) or let it build up (above)
// const randomAnimationDelay = -(Math.random() * 16); // delay for fall (-16s to 0s)
const randomAnimationDelay2 = -(Math.random() * 4); // delay for shake+rotate (-4s to 0s) const randomAnimationDelay2 = -(Math.random() * 4); // delay for shake+rotate (-4s to 0s)
// apply styles // apply styles

163
Jellyfin.Plugin.Seasonals/Web/christmas.css
View File

@@ -1,112 +1,53 @@
.christmas-container { .christmas-container {
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;
} }
.christmas { .christmas {
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: christmas-fall, christmas-shake; animation-name: christmas-fall, christmas-shake;
animation-duration: 10s, 3s; animation-duration: 10s, 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 christmas-fall { @keyframes christmas-fall {
0% { 0% {
translate: 0 -10vh; translate: 0 -10vh;
} }
100% { 100% {
translate: 0 110vh; translate: 0 110vh;
} }
} }
@keyframes christmas-shake { @keyframes christmas-shake {
0%, 0%,
100% { 100% {
transform: translateX(0); transform: translateX(0);
} }
50% { 50% {
transform: translateX(80px); transform: translateX(80px);
} }
}
.christmas:nth-of-type(0) {
left: 0%;
animation-delay: 0s, 0s;
}
.christmas:nth-of-type(1) {
left: 10%;
animation-delay: 1s, 1s;
}
.christmas:nth-of-type(2) {
left: 20%;
animation-delay: 6s, 0.5s;
}
.christmas:nth-of-type(3) {
left: 30%;
animation-delay: 4s, 2s;
}
.christmas:nth-of-type(4) {
left: 40%;
animation-delay: 2s, 2s;
}
.christmas:nth-of-type(5) {
left: 50%;
animation-delay: 8s, 3s;
}
.christmas:nth-of-type(6) {
left: 60%;
animation-delay: 6s, 2s;
}
.christmas:nth-of-type(7) {
left: 70%;
animation-delay: 2.5s, 1s;
}
.christmas:nth-of-type(8) {
left: 80%;
animation-delay: 1s, 0s;
}
.christmas:nth-of-type(9) {
left: 90%;
animation-delay: 3s, 1.5s;
}
.christmas:nth-of-type(10) {
left: 25%;
animation-delay: 2s, 0s;
}
.christmas:nth-of-type(11) {
left: 65%;
} }

62
Jellyfin.Plugin.Seasonals/Web/christmas.js
View File

@@ -1,10 +1,9 @@
const config = window.SeasonalsPluginConfig?.Christmas || {}; const config = window.SeasonalsPluginConfig?.Christmas || {};
const christmas = config.EnableChristmas !== undefined ? config.EnableChristmas : true; // enable/disable christmas const christmas = config.EnableChristmas !== undefined ? config.EnableChristmas : true; // enable/disable christmas
const randomChristmas = config.EnableRandomChristmas !== undefined ? config.EnableRandomChristmas : true; // enable random christmas
const randomChristmasMobile = config.EnableRandomChristmasMobile !== undefined ? config.EnableRandomChristmasMobile : false; // enable random christmas on mobile
const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different durations const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different durations
const christmasCount = config.SymbolCount !== undefined ? config.SymbolCount : 25; // count of symbol const christmasCount = config.SymbolCount !== undefined ? config.SymbolCount : 25; // count of symbol
const christmasCountMobile = config.SymbolCountMobile !== undefined ? config.SymbolCountMobile : 10; // count of symbol on mobile
// Array of christmas characters // Array of christmas characters
const christmasSymbols = ['❆', '🎁', '❄️', '🎁', '🎅', '🎊', '🎁', '🎉']; const christmasSymbols = ['❆', '🎁', '❄️', '🎁', '🎅', '🎊', '🎁', '🎉'];
@@ -45,11 +44,16 @@ observer.observe(document.body, {
attributes: true attributes: true
}); });
function addRandomChristmas(count) { function initChristmas(count) {
const christmasContainer = document.querySelector('.christmas-container'); // get the christmas container let christmasContainer = document.querySelector('.christmas-container'); // get the christmas container
if (!christmasContainer) return; // exit if christmas container is not found if (!christmasContainer) {
christmasContainer = document.createElement("div");
christmasContainer.className = "christmas-container";
christmasContainer.setAttribute("aria-hidden", "true");
document.body.appendChild(christmasContainer);
}
console.log('Adding random christmas'); console.log('Adding christmas');
for (let i = 0; i < count; i++) { for (let i = 0; i < count; i++) {
// create a new christmas element // create a new christmas element
@@ -61,8 +65,8 @@ function addRandomChristmas(count) {
// set random horizontal position, animation delay and size(uncomment lines to enable) // set random horizontal position, animation delay and size(uncomment lines to enable)
const randomLeft = Math.random() * 100; // position (0% to 100%) const randomLeft = Math.random() * 100; // position (0% to 100%)
const randomAnimationDelay = Math.random() * 12 + 8; // delay (8s to 12s) const randomAnimationDelay = -(Math.random() * 16); // delay (-16s to 0s)
const randomAnimationDelay2 = Math.random() * 5 + 3; // delay (0s to 5s) const randomAnimationDelay2 = -(Math.random() * 5); // delay (-5s to 0s)
// apply styles // apply styles
christmasDiv.style.left = `${randomLeft}%`; christmasDiv.style.left = `${randomLeft}%`;
@@ -78,46 +82,18 @@ function addRandomChristmas(count) {
// add the christmas to the container // add the christmas to the container
christmasContainer.appendChild(christmasDiv); christmasContainer.appendChild(christmasDiv);
} }
console.log('Random christmas added'); console.log('Christmas added');
} }
// initialize standard christmas // initialize christmas
function initChristmas() {
const christmasContainer = document.querySelector('.christmas-container') || document.createElement("div");
if (!document.querySelector('.christmas-container')) {
christmasContainer.className = "christmas-container";
christmasContainer.setAttribute("aria-hidden", "true");
document.body.appendChild(christmasContainer);
}
// create the 12 standard christmas
for (let i = 0; i < 12; i++) {
const christmasDiv = document.createElement('div');
christmasDiv.className = 'christmas';
christmasDiv.textContent = christmasSymbols[Math.floor(Math.random() * christmasSymbols.length)];
// set random animation duration
if (enableDiffrentDuration) {
const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
christmasDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
}
christmasContainer.appendChild(christmasDiv);
}
}
// initialize christmas and add random christmas symbols
function initializeChristmas() { function initializeChristmas() {
if (!christmas) return; // exit if christmas is disabled if (!christmas) return; // exit if christmas is disabled
initChristmas();
toggleChristmas();
const screenWidth = window.innerWidth; // get the screen width to detect mobile devices const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
if (randomChristmas && (screenWidth > 768 || randomChristmasMobile)) { // add random christmas only on larger screens, unless enabled for mobile devices const count = !isMobile ? christmasCount : christmasCountMobile;
addRandomChristmas(christmasCount);
} initChristmas(count);
toggleChristmas();
} }
initializeChristmas(); initializeChristmas();

2
Jellyfin.Plugin.Seasonals/Web/halloween.js
View File

@@ -72,6 +72,8 @@ function initHalloween(count) {
const randomLeft = Math.random() * 100; // position (0% to 100%) const randomLeft = Math.random() * 100; // position (0% to 100%)
const randomAnimationDelay = Math.random() * 10; // delay (0s to 10s) const randomAnimationDelay = Math.random() * 10; // delay (0s to 10s)
// Display directly symbols on full screen (below) or let it build up (above)
// const randomAnimationDelay = -(Math.random() * 10); // delay (-10s to 0s)
const randomAnimationDelay2 = -(Math.random() * 3); // delay (-3s to 0s) const randomAnimationDelay2 = -(Math.random() * 3); // delay (-3s to 0s)
// apply styles // apply styles

60
Jellyfin.Plugin.Seasonals/Web/hearts.css
View File

@@ -49,63 +49,3 @@
transform: translateX(80px) transform: translateX(80px)
} }
} }
.heart:nth-of-type(0) {
left: 1%;
animation-delay: 0s, 0s
}
.heart:nth-of-type(1) {
left: 10%;
animation-delay: 1s, 1s
}
.heart:nth-of-type(2) {
left: 20%;
animation-delay: 6s, .5s
}
.heart:nth-of-type(3) {
left: 30%;
animation-delay: 4s, 2s
}
.heart:nth-of-type(4) {
left: 40%;
animation-delay: 2s, 2s
}
.heart:nth-of-type(5) {
left: 50%;
animation-delay: 8s, 3s
}
.heart:nth-of-type(6) {
left: 60%;
animation-delay: 6s, 2s
}
.heart:nth-of-type(7) {
left: 70%;
animation-delay: 2.5s, 1s
}
.heart:nth-of-type(8) {
left: 80%;
animation-delay: 1s, 0s
}
.heart:nth-of-type(9) {
left: 90%;
animation-delay: 3s, 1.5s
}
.heart:nth-of-type(10) {
left: 25%;
animation-delay: 2s, 0s
}
.heart:nth-of-type(11) {
left: 65%;
animation-delay: 4s, 2.5s
}

60
Jellyfin.Plugin.Seasonals/Web/hearts.js
View File

@@ -1,10 +1,9 @@
const config = window.SeasonalsPluginConfig?.Hearts || {}; const config = window.SeasonalsPluginConfig?.Hearts || {};
const hearts = config.EnableHearts !== undefined ? config.EnableHearts : true; // enable/disable hearts const hearts = config.EnableHearts !== undefined ? config.EnableHearts : true; // enable/disable hearts
const randomSymbols = config.EnableRandomSymbols !== undefined ? config.EnableRandomSymbols : true; // enable random symbols
const randomSymbolsMobile = config.EnableRandomSymbolsMobile !== undefined ? config.EnableRandomSymbolsMobile : false; // enable random symbols on mobile
const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different durations const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different durations
const heartsCount = config.SymbolCount !== undefined ? config.SymbolCount : 25; // count of symbol const heartsCount = config.SymbolCount !== undefined ? config.SymbolCount : 25; // count of symbol
const heartsCountMobile = config.SymbolCountMobile !== undefined ? config.SymbolCountMobile : 10; // count of symbol on mobile
// Array of hearts characters // Array of hearts characters
const heartSymbols = ['❤️', '💕', '💞', '💓', '💗', '💖']; const heartSymbols = ['❤️', '💕', '💞', '💓', '💗', '💖'];
@@ -46,11 +45,16 @@ observer.observe(document.body, {
}); });
function addRandomSymbols(count) { function initHearts(count) {
const heartsContainer = document.querySelector('.hearts-container'); // get the hearts container let heartsContainer = document.querySelector('.hearts-container'); // get the hearts container
if (!heartsContainer) return; // exit if hearts container is not found if (!heartsContainer) {
heartsContainer = document.createElement("div");
heartsContainer.className = "hearts-container";
heartsContainer.setAttribute("aria-hidden", "true");
document.body.appendChild(heartsContainer);
}
console.log('Adding random heart symbols'); console.log('Adding heart symbols');
for (let i = 0; i < count; i++) { for (let i = 0; i < count; i++) {
// create a new hearts elements // create a new hearts elements
@@ -63,8 +67,8 @@ function addRandomSymbols(count) {
// set random horizontal position, animation delay and size(uncomment lines to enable) // set random horizontal position, animation delay and size(uncomment lines to enable)
const randomLeft = Math.random() * 100; // position (0% to 100%) const randomLeft = Math.random() * 100; // position (0% to 100%)
const randomAnimationDelay = Math.random() * 14; // delay (0s to 14s) const randomAnimationDelay = -(Math.random() * 16); // delay (-16s to 0s)
const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s) const randomAnimationDelay2 = -(Math.random() * 5); // delay (-5s to 0s)
// apply styles // apply styles
heartsDiv.style.left = `${randomLeft}%`; heartsDiv.style.left = `${randomLeft}%`;
@@ -80,46 +84,18 @@ function addRandomSymbols(count) {
// add the hearts to the container // add the hearts to the container
heartsContainer.appendChild(heartsDiv); heartsContainer.appendChild(heartsDiv);
} }
console.log('Random hearts symbols added'); console.log('Heart symbols added');
} }
// create hearts objects
function createHearts() {
const container = document.querySelector('.hearts-container') || document.createElement("div");
if (!document.querySelector('.hearts-container')) {
container.className = "hearts-container";
container.setAttribute("aria-hidden", "true");
document.body.appendChild(container);
}
for (let i = 0; i < 12; i++) {
const heartsDiv = document.createElement("div");
heartsDiv.className = "heart";
heartsDiv.textContent = heartSymbols[i % heartSymbols.length];
// set random animation duration
if (enableDiffrentDuration) {
const randomAnimationDuration = Math.random() * 16 + 12; // delay (12s to 16s)
const randomAnimationDuration2 = Math.random() * 7 + 3; // delay (3s to 7s)
heartsDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
}
container.appendChild(heartsDiv);
}
}
// initialize hearts // initialize hearts
function initializeHearts() { function initializeHearts() {
if (!hearts) return; // exit if hearts is disabled if (!hearts) return; // exit if hearts is disabled
createHearts();
toggleHearts();
const screenWidth = window.innerWidth; // get the screen width to detect mobile devices const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
if (randomSymbols && (screenWidth > 768 || randomSymbolsMobile)) { // add random heartss only on larger screens, unless enabled for mobile devices const count = !isMobile ? heartsCount : heartsCountMobile;
addRandomSymbols(heartsCount);
} initHearts(count);
toggleHearts();
} }
initializeHearts(); initializeHearts();

4
Jellyfin.Plugin.Seasonals/Web/resurrection.js
View File

@@ -82,7 +82,7 @@ function addSymbols(count) {
for (let i = 0; i < count; i++) { for (let i = 0; i < count; i++) {
const imageSrc = images[Math.floor(Math.random() * images.length)]; const imageSrc = images[Math.floor(Math.random() * images.length)];
const left = Math.random() * 100; const left = Math.random() * 100;
const delay = Math.random() * 12; const delay = -(Math.random() * 12);
container.appendChild(createSymbol(imageSrc, left, delay)); container.appendChild(createSymbol(imageSrc, left, delay));
} }
} }
@@ -99,7 +99,7 @@ function initResurrection(count) {
// Place one of each of the 8 provided resurrection images first. // Place one of each of the 8 provided resurrection images first.
images.forEach((imageSrc, index) => { images.forEach((imageSrc, index) => {
const left = (index + 1) * (100 / (images.length + 1)); const left = (index + 1) * (100 / (images.length + 1));
const delay = Math.random() * 8; const delay = -(Math.random() * 8);
container.appendChild(createSymbol(imageSrc, left, delay)); container.appendChild(createSymbol(imageSrc, left, delay));
}); });

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

@@ -70,7 +70,7 @@ function initSnowflakes(count) {
// set random horizontal position, animation delay and size(uncomment lines to enable) // set random horizontal position, animation delay and size(uncomment lines to enable)
const randomLeft = Math.random() * 100; // position (0% to 100%) const randomLeft = Math.random() * 100; // position (0% to 100%)
const randomAnimationDelay = Math.random() * 8; // delay (0s to 8s) const randomAnimationDelay = -(Math.random() * 14); // delay (-14s to 0s)
const randomAnimationDelay2 = -(Math.random() * 5); // delay (-5s to 0s) const randomAnimationDelay2 = -(Math.random() * 5); // delay (-5s to 0s)
// apply styles // apply styles