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

Refactor spring and carnival animations, enhance configuration options, and improve asset management

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-21 04:31:15 +01:00
parent cde5201991
commit 4e8a37540f
6 changed files with 460 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
Jellyfin.Plugin.Seasonals/Web/carnival.js
View File

@@ -1,11 +1,11 @@
const config = window.SeasonalsPluginConfig?.Carnival || {};
const carnival = config.EnableCarnival !== undefined ? config.EnableCarnival : true;
const randomCarnival = config.EnableRandomCarnival !== undefined ? config.EnableRandomCarnival : true;
const randomCarnivalMobile = config.EnableRandomCarnivalMobile !== undefined ? config.EnableRandomCarnivalMobile : false;
const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true;
const enableSway = config.EnableCarnivalSway !== undefined ? config.EnableCarnivalSway : true;
const carnivalCount = config.ObjectCount || 80;
const carnival = config.EnableCarnival !== undefined ? config.EnableCarnival : true; // Enable/disable carnival
const randomCarnival = config.EnableRandomCarnival !== undefined ? config.EnableRandomCarnival : true; // Enable random carnival objects
const randomCarnivalMobile = config.EnableRandomCarnivalMobile !== undefined ? config.EnableRandomCarnivalMobile : false; // Enable random carnival objects on mobile
const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // Randomize falling and flutter speeds
const enableSway = config.EnableCarnivalSway !== undefined ? config.EnableCarnivalSway : true; // Enable side-to-side sway animation
const carnivalCount = config.ObjectCount || 120; // Number of confetti pieces to spawn
let msgPrinted = false;
@@ -86,14 +86,21 @@ function createConfettiPiece(container, isInitial = false) {
wrapper.style.left = `${Math.random() * 100}%`;
// Random dimensions
// MARK: CONFETTI SIZE (RECTANGLES)
if (!confetti.classList.contains('circle') && !confetti.classList.contains('square') && !confetti.classList.contains('triangle')) {
const width = Math.random() * 5 + 4;
const height = Math.random() * 6 + 8;
const width = Math.random() * 3 + 4; // 4-7px
const height = Math.random() * 5 + 8; // 8-13px
confetti.style.width = `${width}px`;
confetti.style.height = `${height}px`;
} else if (confetti.classList.contains('circle') || confetti.classList.contains('square')) {
// MARK: CONFETTI SIZE (CIRCLES/SQUARES)
const size = Math.random() * 5 + 5; // 5-10px
confetti.style.width = `${size}px`;
confetti.style.height = `${size}px`;
}
// Animation settings
// MARK: CONFETTI FALLING SPEED (in seconds)
const duration = Math.random() * 5 + 5;
let delay = 0;
@@ -113,14 +120,22 @@ function createConfettiPiece(container, isInitial = false) {
swayWrapper.style.animationDelay = `-${Math.random() * 5}s`;
// Random sway amplitude (using CSS variable for dynamic keyframe)
// Sway between 30px and 100px
const swayAmount = Math.random() * 70 + 30;
// MARK: SWAY DISTANCE RANGE (in px)
const swayAmount = Math.random() * 70 + 30; // 30-100px
const direction = Math.random() > 0.5 ? 1 : -1;
swayWrapper.style.setProperty('--sway-amount', `${swayAmount * direction}px`);
}
// Flutter speed variation
// Flutter speed and random 3D rotation axis
// MARK: CONFETTI FLUTTER ROTATION SPEED
confetti.style.animationDuration = `${Math.random() * 2 + 1}s`;
confetti.style.setProperty('--rx', Math.random().toFixed(2));
confetti.style.setProperty('--ry', Math.random().toFixed(2));
confetti.style.setProperty('--rz', (Math.random() * 0.5).toFixed(2));
// Random direction for 3D rotation
const rotDir = Math.random() > 0.5 ? 1 : -1;
confetti.style.setProperty('--rot-dir', `${rotDir * 360}deg`);
if (enableSway) {
swayWrapper.appendChild(confetti);
@@ -129,6 +144,14 @@ function createConfettiPiece(container, isInitial = false) {
wrapper.appendChild(confetti);
}
// Respawn confetti when it hits the bottom
wrapper.addEventListener('animationend', (e) => {
if (e.animationName === 'carnival-fall') {
wrapper.remove();
createConfettiPiece(container, false); // respawn without initial huge delay
}
});
container.appendChild(wrapper);
}
@@ -154,7 +177,7 @@ function initCarnivalObjects() {
}
// Initial confetti
for (let i = 0; i < 30; i++) {
for (let i = 0; i < 60; i++) {
createConfettiPiece(container, true);
}
}