diff --git a/Jellyfin.Plugin.Seasonals/Web/carnival.js b/Jellyfin.Plugin.Seasonals/Web/carnival.js index e07cdaf..7398a1a 100644 --- a/Jellyfin.Plugin.Seasonals/Web/carnival.js +++ b/Jellyfin.Plugin.Seasonals/Web/carnival.js @@ -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();