From 4e8a37540fa36833efd536fab85b28c3330887d4 Mon Sep 17 00:00:00 2001 From: CodeDevMLH <145071728+CodeDevMLH@users.noreply.github.com> Date: Sat, 21 Feb 2026 04:31:15 +0100 Subject: [PATCH] Refactor spring and carnival animations, enhance configuration options, and improve asset management --- Jellyfin.Plugin.Seasonals/Web/carnival.css | 26 +- Jellyfin.Plugin.Seasonals/Web/carnival.js | 47 +++- Jellyfin.Plugin.Seasonals/Web/seasonals.js | 11 + Jellyfin.Plugin.Seasonals/Web/spring.css | 143 +++++++++- Jellyfin.Plugin.Seasonals/Web/spring.js | 305 ++++++++++++++++++--- Jellyfin.Plugin.Seasonals/Web/summer.js | 18 +- 6 files changed, 460 insertions(+), 90 deletions(-) diff --git a/Jellyfin.Plugin.Seasonals/Web/carnival.css b/Jellyfin.Plugin.Seasonals/Web/carnival.css index bb96bd6..7abc34f 100644 --- a/Jellyfin.Plugin.Seasonals/Web/carnival.css +++ b/Jellyfin.Plugin.Seasonals/Web/carnival.css @@ -18,7 +18,8 @@ will-change: top; animation-name: carnival-fall; animation-timing-function: linear; - animation-iteration-count: infinite; + animation-iteration-count: 1; + animation-fill-mode: forwards; } .carnival-sway-wrapper { @@ -35,9 +36,8 @@ background-color: #f0f; will-change: transform; animation-name: carnival-flutter; - animation-timing-function: ease-in-out; + animation-timing-function: linear; animation-iteration-count: infinite; - animation-duration: 2s; } .carnival-confetti.circle { @@ -52,15 +52,8 @@ } .carnival-confetti.triangle { - width: 0; - height: 0; - background-color: transparent !important; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 10px solid; width: 10px; height: 10px; - background-color: inherit; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } @@ -84,18 +77,9 @@ @keyframes carnival-flutter { 0% { - transform: rotate3d(1, 1, 1, 0deg); - } - 25% { - transform: rotate3d(1, 0.5, 0, 90deg); - } - 50% { - transform: rotate3d(0.5, 1, 0.5, 180deg); - } - 75% { - transform: rotate3d(0, 0.5, 1, 270deg); + transform: rotate3d(var(--rx, 1), var(--ry, 1), var(--rz, 0), 0deg); } 100% { - transform: rotate3d(1, 1, 1, 360deg); + transform: rotate3d(var(--rx, 1), var(--ry, 1), var(--rz, 0), var(--rot-dir, 360deg)); } } diff --git a/Jellyfin.Plugin.Seasonals/Web/carnival.js b/Jellyfin.Plugin.Seasonals/Web/carnival.js index fba1f12..e07cdaf 100644 --- a/Jellyfin.Plugin.Seasonals/Web/carnival.js +++ b/Jellyfin.Plugin.Seasonals/Web/carnival.js @@ -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); } } diff --git a/Jellyfin.Plugin.Seasonals/Web/seasonals.js b/Jellyfin.Plugin.Seasonals/Web/seasonals.js index 77485d0..aa480ba 100644 --- a/Jellyfin.Plugin.Seasonals/Web/seasonals.js +++ b/Jellyfin.Plugin.Seasonals/Web/seasonals.js @@ -73,6 +73,11 @@ const ThemeConfigs = { js: '../Seasonals/Resources/carnival.js', containerClass: 'carnival-container' }, + cherryblossom: { + css: '../Seasonals/Resources/cherryblossom.css', + js: '../Seasonals/Resources/cherryblossom.js', + containerClass: 'cherryblossom-container' + }, none: { containerClass: 'none' }, @@ -246,6 +251,12 @@ const SeasonalsManager = { if (response.ok) { this.config = await response.json(); window.SeasonalsPluginConfig = this.config; + + if (this.config.IsEnabled === false) { + console.log('Seasonals: Plugin is disabled globally.'); + return; + } + console.log('Seasonals: Seasonals Config loaded:', this.config); } } catch (error) { diff --git a/Jellyfin.Plugin.Seasonals/Web/spring.css b/Jellyfin.Plugin.Seasonals/Web/spring.css index d8fee62..05750d6 100644 --- a/Jellyfin.Plugin.Seasonals/Web/spring.css +++ b/Jellyfin.Plugin.Seasonals/Web/spring.css @@ -5,7 +5,7 @@ top: 0; left: 0; width: 100%; - height: 100%; + height: 100vh; pointer-events: none; z-index: 1000; } @@ -34,21 +34,16 @@ z-index: 5; transform-origin: top center; pointer-events: none; - - animation-name: spring-beam-pulse; - animation-timing-function: ease-in-out; - animation-iteration-count: infinite; + opacity: 0; } /* Grass */ .spring-grass-container { - position: fixed; + position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; - z-index: 1002; - overflow: hidden; pointer-events: none; } @@ -66,6 +61,73 @@ animation-iteration-count: infinite; } +/* Birds */ +.spring-bird { + position: static !important; + display: block; + z-index: 1001; + /* MARK: BIRD SIZE */ + width: 80px; + height: auto; + will-change: transform; + animation-timing-function: linear; + animation-iteration-count: infinite; +} + +/* Butterflies */ +.spring-butterfly { + position: static !important; + display: block; + z-index: 1001; + /* MARK: BUTTERFLY SIZE */ + width: 40px; + height: auto; + will-change: transform; + animation-timing-function: linear; + animation-iteration-count: infinite; +} + +/* Bee */ +.spring-bee { + position: static !important; + display: block; + z-index: 1001; + /* MARK: BEE SIZE */ + width: 30px; + height: auto; + will-change: transform; +} + +/* Ladybug */ +.spring-ladybug-gif { + position: static !important; + display: block; + /* MARK: LADYBUG SIZE */ + width: 30px; + height: auto; + will-change: transform; + animation-timing-function: linear; + animation-iteration-count: infinite; + --bug-rotation: -55deg; +} + +.spring-ladybug-wrapper { + z-index: 1002; +} + +/* Generic Wrappers */ +.spring-anim-wrapper { + position: fixed; + z-index: 1001; + will-change: transform; + top: 0; left: 0; +} + +.spring-mirror-wrapper { + width: 100%; height: 100%; + will-change: transform; + transform-origin: center; +} @keyframes spring-float { @@ -77,9 +139,9 @@ } @keyframes spring-beam-pulse { - 0% { opacity: 0.3; transform: rotate(45deg) scaleX(1); } - 50% { opacity: 0.6; transform: rotate(45deg) scaleX(1.1); } - 100% { opacity: 0.3; transform: rotate(45deg) scaleX(1); } + 0% { opacity: 0; transform: rotate(var(--beam-rotation, 45deg)) scaleX(0.8); } + 50% { opacity: 0.6; transform: rotate(var(--beam-rotation, 45deg)) scaleX(1.2); } + 100% { opacity: 0; transform: rotate(var(--beam-rotation, 45deg)) scaleX(0.8); } } @keyframes spring-grass-sway { @@ -88,4 +150,63 @@ 100% { transform: rotate(0deg); } } +/* Wrapper animations (Flight across screen) */ +@keyframes spring-fly-right-wrapper { + 0% { transform: translateX(-10vw); } + 100% { transform: translateX(110vw); } +} +@keyframes spring-fly-left-wrapper { + 0% { transform: translateX(110vw); } + 100% { transform: translateX(-10vw); } +} + +/* Vertical Drift for Sloped Flight */ +@keyframes spring-vertical-drift { + 0% { top: var(--start-y, 10%); } + 100% { top: var(--end-y, 10%); } +} + +/* Inner animations (Bobbing/Fluttering) */ +@keyframes spring-bob { + 0% { transform: translateY(0); } + 50% { transform: translateY(-20px); } + 100% { transform: translateY(0); } +} + +@keyframes spring-flutter { + 0% { transform: translateY(0) rotate(0deg); } + 25% { transform: translateY(-5px) rotate(5deg); } + 50% { transform: translateY(0) rotate(0deg); } + 75% { transform: translateY(5px) rotate(-5deg); } + 100% { transform: translateY(0) rotate(0deg); } +} + +/* Bee Buzz - Reduced Intensity */ +@keyframes spring-buzz { + 0% { transform: translate(0, 0); } + 25% { transform: translate(2px, -2px); } + 50% { transform: translate(0, 2px); } + 75% { transform: translate(-2px, -2px); } + 100% { transform: translate(0, 0); } +} + +/* Ladybug Walk (Wrapper handles X) */ +@keyframes spring-walk-right { + 0% { transform: translateX(-10vw); } + 100% { transform: translateX(110vw); } +} + +@keyframes spring-walk-left { + 0% { transform: translateX(110vw); } + 100% { transform: translateX(-10vw); } +} + +/* Ladybug Crawl (Inner Wobble) */ +@keyframes spring-crawl { + 0% { transform: translateY(0) rotate(var(--bug-rotation, 0deg)); } + 25% { transform: translateY(-3px) rotate(calc(var(--bug-rotation, 0deg) + 8deg)); } + 50% { transform: translateY(0) rotate(var(--bug-rotation, 0deg)); } + 75% { transform: translateY(-3px) rotate(calc(var(--bug-rotation, 0deg) - 8deg)); } + 100% { transform: translateY(0) rotate(var(--bug-rotation, 0deg)); } +} diff --git a/Jellyfin.Plugin.Seasonals/Web/spring.js b/Jellyfin.Plugin.Seasonals/Web/spring.js index 219b16e..f6502d8 100644 --- a/Jellyfin.Plugin.Seasonals/Web/spring.js +++ b/Jellyfin.Plugin.Seasonals/Web/spring.js @@ -1,13 +1,28 @@ const config = window.SeasonalsPluginConfig?.Spring || {}; -const spring = config.EnableSpring !== undefined ? config.EnableSpring : true; -const pollenCount = config.PollenCount || 15; -const sunbeamCount = config.SunbeamCount || 5; +const spring = config.EnableSpring !== undefined ? config.EnableSpring : true; // Enable/disable spring +const pollenCount = config.PollenCount || 30; // Number of pollen particles +const sunbeamCount = config.SunbeamCount || 5; // Number of sunbeams +const enableSunbeams = config.EnableSpringSunbeams !== undefined ? config.EnableSpringSunbeams : true; // Enable/disable sunbeams +const birdCount = config.BirdCount !== undefined ? config.BirdCount : 3; // Number of birds +const butterflyCount = config.ButterflyCount !== undefined ? config.ButterflyCount : 4; // Number of butterflies +const beeCount = config.BeeCount !== undefined ? config.BeeCount : 1; // Number of bees +const ladybugCount = config.LadybugCount !== undefined ? config.LadybugCount : 1; // Number of ladybugs +const randomSpring = config.EnableRandomSpring !== undefined ? config.EnableRandomSpring : true; // Enable random spring objects -const randomSpring = config.EnableRandomSpring !== undefined ? config.EnableRandomSpring : true; -const randomSpringMobile = config.EnableRandomSpringMobile !== undefined ? config.EnableRandomSpringMobile : false; -const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; -const enableSunbeams = config.EnableSpringSunbeams !== undefined ? config.EnableSpringSunbeams : true; +const birdImages = [ + '../Seasonals/Resources/spring_assets/Bird_1.gif', + '../Seasonals/Resources/spring_assets/Bird_2.gif', + '../Seasonals/Resources/spring_assets/Bird_3.gif' +]; + +const butterflyImages = [ + '../Seasonals/Resources/spring_assets/Butterfly_1.gif', + '../Seasonals/Resources/spring_assets/Butterfly_2.gif' +]; + +const beeImage = '../Seasonals/Resources/spring_assets/Bee.gif'; +const ladybugImage = '../Seasonals/Resources/spring_assets/ladybug.gif'; let msgPrinted = false; @@ -43,11 +58,13 @@ function createPollen(container) { const pollen = document.createElement('div'); pollen.classList.add('spring-pollen'); + // MARK: POLLEN START VERTICAL POSITION (in %) const startY = Math.random() * 60 + 20; pollen.style.top = `${startY}%`; pollen.style.left = `${Math.random() * 100}%`; - const size = Math.random() * 3 + 1; + // MARK: POLLEN SIZE + const size = Math.random() * 3 + 1; // 1-4px pollen.style.width = `${size}px`; pollen.style.height = `${size}px`; @@ -58,27 +75,40 @@ function createPollen(container) { container.appendChild(pollen); } -function createSunbeam(container) { +function spawnSunbeamGroup(container, count) { if (!enableSunbeams) return; - const beam = document.createElement('div'); - beam.classList.add('spring-sunbeam'); - - const left = Math.random() * 100; // Spread across full width - beam.style.left = `${left}%`; - - // Thinner beams as requested - const width = Math.random() * 20 + 10; // 10-30px wide - beam.style.width = `${width}px`; - - const rotate = Math.random() * 20 - 10 + 45; - beam.style.transform = `rotate(${rotate}deg)`; - - const duration = Math.random() * 10 + 10; - beam.style.animationDuration = `${duration}s`; - beam.style.animationDelay = `-${Math.random() * 10}s`; - - container.appendChild(beam); + const rotate = Math.random() * 30 - 15 + 45; + let beamsActive = count; + + for (let i = 0; i < count; i++) { + const beam = document.createElement('div'); + beam.classList.add('spring-sunbeam'); + + const left = Math.random() * 100; + beam.style.left = `${left}%`; + + // MARK: SUNBEAM WIDTH (in px) + const width = Math.random() * 5 + 15; // 5-20px wide + beam.style.width = `${width}px`; + + beam.style.setProperty('--beam-rotation', `${rotate}deg`); + + const duration = Math.random() * 7 + 8; // 8-15s + beam.style.animation = `spring-beam-pulse ${duration}s ease-in-out forwards`; + + beam.style.animationDelay = `${Math.random() * 3}s`; + + beam.addEventListener('animationend', () => { + beam.remove(); + beamsActive--; + if (beamsActive === 0) { + spawnSunbeamGroup(container, count); + } + }); + + container.appendChild(beam); + } } function createGrass(container) { @@ -89,15 +119,14 @@ function createGrass(container) { container.appendChild(grassContainer); } - // Clear existing grass if any (for resize) grassContainer.innerHTML = ''; - // More grass: 1 blade every 3px (was 15px) const bladeCount = window.innerWidth / 3; for (let i = 0; i < bladeCount; i++) { const blade = document.createElement('div'); blade.classList.add('spring-grass'); + // MARK: GRASS HEIGHT const height = Math.random() * 40 + 20; // 20-60px height blade.style.height = `${height}px`; blade.style.left = `${i * 3 + Math.random() * 2}px`; @@ -109,6 +138,11 @@ function createGrass(container) { const hue = 100 + Math.random() * 40; blade.style.backgroundColor = `hsl(${hue}, 60%, 40%)`; + // Random z-index to interleave with Ladybug (1002) + // Values: 1001 (behind) or 1003 (front) + const z = Math.random() > 0.5 ? 1001 : 1003; + blade.style.zIndex = z; + grassContainer.appendChild(blade); } } @@ -125,25 +159,219 @@ function initSpringObjects() { createGrass(container); if (enableSunbeams) { - // Initial sunbeams - for (let i = 0; i < sunbeamCount; i++) { - createSunbeam(container); - } + spawnSunbeamGroup(container, sunbeamCount); } } function initializeSpring() { - if (!spring) return; + if (!spring) { + console.warn('Spring is disabled.'); + return; + } + initSpringObjects(); toggleSpring(); - const screenWidth = window.innerWidth; - if (randomSpring && (screenWidth > 768 || randomSpringMobile)) { - addRandomSpringObjects(); + const container = document.querySelector('.spring-container'); + if (container) { + if (randomSpring) { + // Add Pollen + for (let i = 0; i < pollenCount; i++) { + createPollen(container); + } + + // Add Birds + for (let i = 0; i < birdCount; i++) { + setTimeout(() => createBird(container), Math.random() * 1000); // 0-1s desync + } + // Add Butterflies + for (let i = 0; i < butterflyCount; i++) { + setTimeout(() => createButterfly(container), Math.random() * 1000); // 0-1s desync + } + // Add Bees + for (let i = 0; i < beeCount; i++) { + setTimeout(() => createBee(container), Math.random() * 1000); // 0-1s desync + } + // Add Ladybugs + for (let i = 0; i < ladybugCount; i++) { + setTimeout(() => createLadybugGif(container), Math.random() * 1000); // 0-1s desync + } + } } } -// Debounce helper +function createBird(container) { + const wrapper = document.createElement('div'); + wrapper.classList.add('spring-anim-wrapper'); + wrapper.classList.add('spring-bird-wrapper'); + + const mirror = document.createElement('div'); + mirror.classList.add('spring-mirror-wrapper'); + + const bird = document.createElement('img'); + bird.classList.add('spring-bird'); + + const randomSrc = birdImages[Math.floor(Math.random() * birdImages.length)]; + bird.src = randomSrc; + + const direction = Math.random() > 0.5 ? 'right' : 'left'; + // MARK: BIRD SPEED (10-15s) + const duration = Math.random() * 5 + 10; + + // MARK: BIRD HEIGHT RANGE (in %) + const startY = Math.random() * 55 + 5; // Start 5-60% + const endY = Math.random() * 55 + 5; // End 5-60% + wrapper.style.setProperty('--start-y', `${startY}%`); + wrapper.style.setProperty('--end-y', `${endY}%`); + + if (direction === 'right') { + wrapper.style.animation = `spring-fly-right-wrapper ${duration}s linear forwards, spring-vertical-drift ${duration}s linear forwards`; + mirror.style.transform = 'scaleX(-1)'; + } else { + wrapper.style.animation = `spring-fly-left-wrapper ${duration}s linear forwards, spring-vertical-drift ${duration}s linear forwards`; + mirror.style.transform = 'scaleX(1)'; + } + + wrapper.addEventListener('animationend', (e) => { + if (e.animationName.includes('fly-')) { + wrapper.remove(); + createBird(container); + } + }); + + bird.style.animation = `spring-bob 2s ease-in-out infinite`; + + wrapper.style.top = `${startY}%`; + + mirror.appendChild(bird); + wrapper.appendChild(mirror); + container.appendChild(wrapper); +} + +function createButterfly(container) { + const wrapper = document.createElement('div'); + wrapper.classList.add('spring-anim-wrapper'); + wrapper.classList.add('spring-butterfly-wrapper'); + + const mirror = document.createElement('div'); + mirror.classList.add('spring-mirror-wrapper'); + + const butterfly = document.createElement('img'); + butterfly.classList.add('spring-butterfly'); + + const randomSrc = butterflyImages[Math.floor(Math.random() * butterflyImages.length)]; + butterfly.src = randomSrc; + + const duration = Math.random() * 15 + 25; + const direction = Math.random() > 0.5 ? 'right' : 'left'; + + if (direction === 'right') { + wrapper.style.animation = `spring-fly-right-wrapper ${duration}s linear forwards`; + mirror.style.transform = 'scaleX(1)'; + } else { + wrapper.style.animation = `spring-fly-left-wrapper ${duration}s linear forwards`; + mirror.style.transform = 'scaleX(-1)'; + } + + wrapper.addEventListener('animationend', (e) => { + if (e.animationName.includes('fly-')) { + wrapper.remove(); + createButterfly(container); + } + }); + + // MARK: BUTTERFLY FLUTTER RHYTHM + butterfly.style.animation = `spring-flutter 3s ease-in-out infinite`; + butterfly.style.animationDelay = `-${Math.random() * 3}s`; + + // MARK: BUTTERFLY HEIGHT (in %) + const top = Math.random() * 35 + 50; // 50-85% + wrapper.style.top = `${top}%`; + + mirror.appendChild(butterfly); + wrapper.appendChild(mirror); + container.appendChild(wrapper); +} + +function createBee(container) { + const wrapper = document.createElement('div'); + wrapper.classList.add('spring-anim-wrapper'); + wrapper.classList.add('spring-bee-wrapper'); + + const mirror = document.createElement('div'); + mirror.classList.add('spring-mirror-wrapper'); + + const bee = document.createElement('img'); + bee.classList.add('spring-bee'); + bee.src = beeImage; + + const duration = Math.random() * 10 + 15; + const direction = Math.random() > 0.5 ? 'right' : 'left'; + + if (direction === 'right') { + wrapper.style.animation = `spring-fly-right-wrapper ${duration}s linear forwards`; + mirror.style.transform = 'scaleX(1)'; + } else { + wrapper.style.animation = `spring-fly-left-wrapper ${duration}s linear forwards`; + mirror.style.transform = 'scaleX(-1)'; + } + + wrapper.addEventListener('animationend', (e) => { + if (e.animationName.includes('fly-')) { + wrapper.remove(); + createBee(container); + } + }); + + // MARK: BEE HEIGHT (in %) + const top = Math.random() * 60 + 20; // 20-80% + wrapper.style.top = `${top}%`; + + mirror.appendChild(bee); + wrapper.appendChild(mirror); + container.appendChild(wrapper); +} + +function createLadybugGif(container) { + const wrapper = document.createElement('div'); + wrapper.classList.add('spring-anim-wrapper'); + wrapper.classList.add('spring-ladybug-wrapper'); + + const mirror = document.createElement('div'); + mirror.classList.add('spring-mirror-wrapper'); + + const bug = document.createElement('img'); + bug.classList.add('spring-ladybug-gif'); + bug.src = ladybugImage; + + const direction = Math.random() > 0.5 ? 'right' : 'left'; + const duration = Math.random() * 20 + 30; + + if (direction === 'right') { + wrapper.style.animation = `spring-walk-right ${duration}s linear forwards`; + mirror.style.transform = 'scaleX(1)'; + } else { + wrapper.style.animation = `spring-walk-left ${duration}s linear forwards`; + mirror.style.transform = 'scaleX(-1)'; + } + + wrapper.addEventListener('animationend', (e) => { + if (e.animationName.includes('walk-')) { + wrapper.remove(); + createLadybugGif(container); + } + }); + + bug.style.animation = `spring-crawl 2s ease-in-out infinite`; + + wrapper.style.top = 'auto'; + wrapper.style.bottom = '5px'; + + mirror.appendChild(bug); + wrapper.appendChild(mirror); + container.appendChild(wrapper); +} + function debounce(func, wait) { let timeout; return function executedFunction(...args) { @@ -156,7 +384,6 @@ function debounce(func, wait) { }; } -// Resize handler for grass const handleResize = debounce(() => { const container = document.querySelector('.spring-container'); if (container) { diff --git a/Jellyfin.Plugin.Seasonals/Web/summer.js b/Jellyfin.Plugin.Seasonals/Web/summer.js index 32f9786..6ce5dd9 100644 --- a/Jellyfin.Plugin.Seasonals/Web/summer.js +++ b/Jellyfin.Plugin.Seasonals/Web/summer.js @@ -1,11 +1,11 @@ const config = window.SeasonalsPluginConfig?.Summer || {}; -const summer = config.EnableSummer !== undefined ? config.EnableSummer : true; // enable/disable summer -const bubbleCount = config.BubbleCount || 20; -const dustCount = config.DustCount || 50; -const randomSummer = config.EnableRandomSummer !== undefined ? config.EnableRandomSummer : true; // enable random objects -const randomSummerMobile = config.EnableRandomSummerMobile !== undefined ? config.EnableRandomSummerMobile : false; // enable random objects on mobile -const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different animation duration +const summer = config.EnableSummer !== undefined ? config.EnableSummer : true; // Enable/disable summer theme +const bubbleCount = config.BubbleCount || 30; // Number of bubbles +const dustCount = config.DustCount || 50; // Number of dust particles +const randomSummer = config.EnableRandomSummer !== undefined ? config.EnableRandomSummer : true; // Enable random generating objects +const randomSummerMobile = config.EnableRandomSummerMobile !== undefined ? config.EnableRandomSummerMobile : false; // Enable random generating objects on mobile +const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // Randomize animation duration of bubbles and dust let msgPrinted = false; @@ -51,10 +51,12 @@ function createBubble(container, isDust = false) { // Random size if (!isDust) { + // MARK: BUBBLE SIZE const size = Math.random() * 20 + 10; // 10-30px bubbles bubble.style.width = `${size}px`; bubble.style.height = `${size}px`; } else { + // MARK: DUST SIZE const size = Math.random() * 3 + 1; // 1-4px dust bubble.style.width = `${size}px`; bubble.style.height = `${size}px`; @@ -81,7 +83,7 @@ function addRandomSummerObjects() { createBubble(container, false); } - // Add some dust particles (more of them, they are subtle) + // Add some dust particles for (let i = 0; i < dustCount; i++) { createBubble(container, true); } @@ -110,10 +112,12 @@ function initSummerObjects() { bubble.style.left = `${randomLeft}%`; if (!isDust) { + // MARK: BUBBLE SIZE const size = Math.random() * 20 + 10; bubble.style.width = `${size}px`; bubble.style.height = `${size}px`; } else { + // MARK: DUST SIZE const size = Math.random() * 3 + 1; bubble.style.width = `${size}px`; bubble.style.height = `${size}px`;