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

Refactor carnival.js: reorganize confettiColors definition and clean up observer setup

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-24 19:19:03 +01:00
parent 3e5da3dda2
commit ff2df0196a
1 changed files with 10 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,6 +7,12 @@ const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? c
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
const confettiColors = [
'#fce18a', '#ff726d', '#b48def', '#f4306d',
'#36c5f0', '#2ccc5d', '#e9b31d', '#9b59b6',
'#3498db', '#e74c3c', '#1abc9c', '#f1c40f'
];
let msgPrinted = false;
// function to check and control the carnival animation
@@ -37,20 +43,12 @@ function toggleCarnival() {
// observe changes in the DOM
const observer = new MutationObserver(toggleCarnival);
// start observation
observer.observe(document.body, {
childList: true, // observe adding/removing of child elements
subtree: true, // observe all levels of the DOM tree
attributes: true // observe changes to attributes (e.g. class changes)
childList: true,
subtree: true,
attributes: true
});
const confettiColors = [
'#fce18a', '#ff726d', '#b48def', '#f4306d',
'#36c5f0', '#2ccc5d', '#e9b31d', '#9b59b6',
'#3498db', '#e74c3c', '#1abc9c', '#f1c40f'
];
function createConfettiPiece(container, isInitial = false) {
const wrapper = document.createElement('div');
wrapper.classList.add('carnival-wrapper');
@@ -85,7 +83,6 @@ function createConfettiPiece(container, isInitial = false) {
// Random position
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() * 3 + 4; // 4-7px
@@ -99,7 +96,6 @@ function createConfettiPiece(container, isInitial = false) {
confetti.style.height = `${size}px`;
}
// Animation settings
// MARK: CONFETTI FALLING SPEED (in seconds)
const duration = Math.random() * 5 + 5;
@@ -119,14 +115,12 @@ function createConfettiPiece(container, isInitial = false) {
swayWrapper.style.animationDuration = `${swayDuration}s`;
swayWrapper.style.animationDelay = `-${Math.random() * 5}s`;
// Random sway amplitude (using CSS variable for dynamic keyframe)
// 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 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));
@@ -184,7 +178,7 @@ function initCarnivalObjects() {
// initialize carnival
function initializeCarnival() {
if (!carnival) return; // exit if carnival is disabled
if (!carnival) return;
initCarnivalObjects();
toggleCarnival();