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

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

@@ -1,10 +1,9 @@
const config = window.SeasonalsPluginConfig?.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 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
const christmasSymbols = ['❆', '🎁', '❄️', '🎁', '🎅', '🎊', '🎁', '🎉'];
@@ -45,11 +44,16 @@ observer.observe(document.body, {
attributes: true
});
function addRandomChristmas(count) {
const christmasContainer = document.querySelector('.christmas-container'); // get the christmas container
if (!christmasContainer) return; // exit if christmas container is not found
function initChristmas(count) {
let christmasContainer = document.querySelector('.christmas-container'); // get the christmas container
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++) {
// create a new christmas element
@@ -61,8 +65,8 @@ function addRandomChristmas(count) {
// set random horizontal position, animation delay and size(uncomment lines to enable)
const randomLeft = Math.random() * 100; // position (0% to 100%)
const randomAnimationDelay = Math.random() * 12 + 8; // delay (8s to 12s)
const randomAnimationDelay2 = Math.random() * 5 + 3; // delay (0s to 5s)
const randomAnimationDelay = -(Math.random() * 16); // delay (-16s to 0s)
const randomAnimationDelay2 = -(Math.random() * 5); // delay (-5s to 0s)
// apply styles
christmasDiv.style.left = `${randomLeft}%`;
@@ -78,46 +82,18 @@ function addRandomChristmas(count) {
// add the christmas to the container
christmasContainer.appendChild(christmasDiv);
}
console.log('Random christmas added');
console.log('Christmas added');
}
// initialize standard 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
// initialize christmas
function initializeChristmas() {
if (!christmas) return; // exit if christmas is disabled
initChristmas();
toggleChristmas();
const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
if (randomChristmas && (screenWidth > 768 || randomChristmasMobile)) { // add random christmas only on larger screens, unless enabled for mobile devices
addRandomChristmas(christmasCount);
}
const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
const count = !isMobile ? christmasCount : christmasCountMobile;
initChristmas(count);
toggleChristmas();
}
initializeChristmas();