diff --git a/Jellyfin.Plugin.Seasonals/Web/easter.css b/Jellyfin.Plugin.Seasonals/Web/easter.css
index f29ccf7..fcb6dd7 100644
--- a/Jellyfin.Plugin.Seasonals/Web/easter.css
+++ b/Jellyfin.Plugin.Seasonals/Web/easter.css
@@ -1,161 +1,64 @@
.easter-container {
display: block;
- position: fixed;
- overflow: hidden;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- pointer-events: none;
- z-index: 10;
- contain: layout paint;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 10000;
+ contain: strict;
+ overflow: hidden;
+}
+
+.easter-grass-container {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 8vh;
+ pointer-events: none;
+ z-index: 1000;
+}
+
+.easter-meadow-layer {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.easter-meadow {
+ width: 100%;
+ height: 100%;
+ display: block;
+ overflow: visible;
+}
+
+/* sway */
+.easter-sway {
+ transform-origin: bottom center;
+ animation: easter-wind-sway 6s ease-in-out infinite alternate;
+}
+
+@keyframes easter-wind-sway {
+ 0% { transform: skewX(-3deg); }
+ 100% { transform: skewX(5deg); }
}
.hopping-rabbit {
- position: fixed;
- z-index: 15;
- bottom: 10px;
- width: 70px;
- overflow: hidden;
- pointer-events: none;
+ position: absolute;
+ bottom: -15px;
+ left: 0;
+ width: 160px;
+ height: auto;
+ z-index: 1002;
+ will-change: transform;
}
-
@media (max-width: 768px) {
.hopping-rabbit {
width: 60px;
}
-}
-
-
-.easter {
- position: fixed;
- z-index: 15;
- top: -10%;
- font-size: 1em;
- color: #fff;
- font-family: Arial, sans-serif;
- text-shadow: 0 0 5px #000;
- user-select: none;
- -webkit-user-select: none;
- cursor: default;
- -webkit-animation-name: easter-fall, easter-shake;
- -webkit-animation-timing-function: linear, ease-in-out;
- -webkit-animation-iteration-count: infinite, infinite;
- animation-name: easter-fall, easter-shake;
- animation-timing-function: linear, ease-in-out;
- animation-iteration-count: infinite, infinite;
-}
-
-.easter img {
- z-index: 15;
- height: auto;
- width: 20px;
-}
-
-@-webkit-keyframes easter-fall {
- 0% {
- top: -10%;
- }
-
- 100% {
- top: 110%;
- }
-}
-
-@-webkit-keyframes easter-shake {
-
- 0%,
- 100% {
- -webkit-transform: translateX(0);
- transform: translateX(0);
- }
-
- 50% {
- -webkit-transform: translateX(80px);
- transform: translateX(80px);
- }
-}
-
-@keyframes easter-fall {
- 0% {
- top: -10%;
- }
-
- 100% {
- top: 110%;
- }
-}
-
-@keyframes easter-shake {
-
- 0%,
- 100% {
- transform: translateX(0);
- }
-
- 50% {
- transform: translateX(80px);
- }
-}
-
-
-.easter:nth-of-type(0) {
- left: 0%;
- animation-delay: 0s, 0s;
-}
-
-.easter:nth-of-type(1) {
- left: 10%;
- animation-delay: 1s, 1s;
-}
-
-.easter:nth-of-type(2) {
- left: 20%;
- animation-delay: 6s, 0.5s;
-}
-
-.easter:nth-of-type(3) {
- left: 30%;
- animation-delay: 4s, 2s;
-}
-
-.easter:nth-of-type(4) {
- left: 40%;
- animation-delay: 2s, 2s;
-}
-
-.easter:nth-of-type(5) {
- left: 50%;
- animation-delay: 8s, 3s;
-}
-
-.easter:nth-of-type(6) {
- left: 60%;
- animation-delay: 6s, 2s;
-}
-
-.easter:nth-of-type(7) {
- left: 70%;
- animation-delay: 2.5s, 1s;
-}
-
-.easter:nth-of-type(8) {
- left: 80%;
- animation-delay: 1s, 0s;
-}
-
-.easter:nth-of-type(9) {
- left: 90%;
- animation-delay: 3s, 1.5s;
-}
-
-.easter:nth-of-type(10) {
- left: 25%;
- animation-delay: 2s, 0s;
-}
-
-.easter:nth-of-type(11) {
- left: 65%;
- animation-delay: 4s, 2.5s;
}
\ No newline at end of file
diff --git a/Jellyfin.Plugin.Seasonals/Web/easter.js b/Jellyfin.Plugin.Seasonals/Web/easter.js
index 356d62c..8562d76 100644
--- a/Jellyfin.Plugin.Seasonals/Web/easter.js
+++ b/Jellyfin.Plugin.Seasonals/Web/easter.js
@@ -1,66 +1,19 @@
const config = window.SeasonalsPluginConfig?.Easter || {};
-const easter = config.EnableEaster !== undefined ? config.EnableEaster : true; // enable/disable easter
-const randomEaster = config.EnableRandomEaster !== undefined ? config.EnableRandomEaster : true; // enable random easter
-const randomEasterMobile = config.EnableRandomEasterMobile !== undefined ? config.EnableRandomEasterMobile : false; // enable random easter on mobile devices (Warning: High values may affect performance)
-const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different duration for the random easter
-const easterEggCount = config.EggCount || 20; // count of random extra easter
+const easter = config.EnableEaster !== undefined ? config.EnableEaster : true;
+const enableBunny = config.EnableBunny !== undefined ? config.EnableBunny : true;
+/* MARK: BUNNY LOCOMOTION CONFIGURATION */
+const jumpDistanceVw = 5; // Distance in vw the bunny covers per jump
+const jumpDurationMs = 770; // Time in ms the bunny spends moving during a jump
+const pauseDurationMs = 116.6666; // Time in ms the bunny pauses between jumps
-const bunny = config.EnableBunny !== undefined ? config.EnableBunny : true; // enable/disable hopping bunny
-const bunnyDuration = config.BunnyDuration || 12000; // duration of the bunny animation in ms
-const hopHeight = config.HopHeight || 12; // height of the bunny hops in px
-const minBunnyRestTime = config.MinBunnyRestTime || 2000; // minimum time the bunny rests in ms
-const maxBunnyRestTime = config.MaxBunnyRestTime || 5000; // maximum time the bunny rests in ms
+const minBunnyRestTime = config.MinBunnyRestTime || 2000;
+const maxBunnyRestTime = config.MaxBunnyRestTime || 5000;
+const eggCount = config.EggCount || 15;
+const rabbit = "../Seasonals/Resources/easter_images/Osterhase.gif";
-let msgPrinted = false; // flag to prevent multiple console messages
-let animationFrameId;
-
-// function to check and control the easter
-function toggleEaster() {
- const easterContainer = document.querySelector('.easter-container');
- if (!easterContainer) return;
-
- const videoPlayer = document.querySelector('.videoPlayerContainer');
- const trailerPlayer = document.querySelector('.youtubePlayerContainer');
- const isDashboard = document.body.classList.contains('dashboardDocument');
- const hasUserMenu = document.querySelector('#app-user-menu');
-
- // hide easter if video/trailer player is active or dashboard is visible
- if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
- easterContainer.style.display = 'none'; // hide easter
- if (animationFrameId) {
- cancelAnimationFrame(animationFrameId);
- animationFrameId = null;
- }
- if (!msgPrinted) {
- console.log('Easter hidden');
- msgPrinted = true;
- }
- } else {
- easterContainer.style.display = 'block'; // show easter
- if (!animationFrameId) {
- animateRabbit(); // start animation
- }
- if (msgPrinted) {
- console.log('Easter visible');
- msgPrinted = false;
- }
- }
-}
-
-// observe changes in the DOM
-const observer = new MutationObserver(toggleEaster);
-
-// 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)
-});
-
-
-const images = [
+const easterEggImages = [
"../Seasonals/Resources/easter_images/egg_1.png",
"../Seasonals/Resources/easter_images/egg_2.png",
"../Seasonals/Resources/easter_images/egg_3.png",
@@ -73,121 +26,231 @@ const images = [
"../Seasonals/Resources/easter_images/egg_10.png",
"../Seasonals/Resources/easter_images/egg_11.png",
"../Seasonals/Resources/easter_images/egg_12.png",
+ "../Seasonals/Resources/easter_images/eggs.png"
];
-const rabbit = "../Seasonals/Resources/easter_images/easter-bunny.png";
-function addRandomEaster(count) {
- const easterContainer = document.querySelector('.easter-container'); // get the leave container
- if (!easterContainer) return; // exit if leave container is not found
-
- console.log('Adding random easter eggs');
-
- // Array of leave characters
- for (let i = 0; i < count; i++) {
- // create a new leave element
- const eggDiv = document.createElement('div');
- eggDiv.className = "easter";
-
- // pick a random easter symbol
- const imageSrc = images[Math.floor(Math.random() * images.length)];
- const img = document.createElement("img");
- img.src = imageSrc;
-
- eggDiv.appendChild(img);
-
- // 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; // delay (0s to 12s)
- const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
-
- // apply styles
- eggDiv.style.left = `${randomLeft}%`;
- eggDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
-
- // 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)
- eggDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
- }
-
-
- // add the leave to the container
- easterContainer.appendChild(eggDiv);
+function createEasterGrassAndEggs(container) {
+ let grassContainer = container.querySelector('.easter-grass-container');
+ if (!grassContainer) {
+ grassContainer = document.createElement('div');
+ grassContainer.className = 'easter-grass-container';
+ container.appendChild(grassContainer);
+ }
+
+ grassContainer.innerHTML = '';
+
+ let pathsBg = '';
+ let pathsFg = '';
+ const w = window.innerWidth;
+ const hSVG = 80; // Grass 80px high
+
+ // Generate Grass
+ const bladeCount = w / 5;
+ for (let i = 0; i < bladeCount; i++) {
+ const height = Math.random() * 40 + 20;
+ const x = i * 5 + Math.random() * 3;
+ const hue = 80 + Math.random() * 40; // slightly more yellow-green for spring/easter
+ const color = `hsl(${hue}, 60%, 40%)`;
+ const line = ``;
+ if (Math.random() > 0.33) pathsBg += line; else pathsFg += line;
+ }
+
+ for (let i = 0; i < 200; i++) {
+ const x = Math.random() * w;
+ const h = 20 + Math.random() * 50;
+ const cY = hSVG - h;
+ const bend = x + (Math.random() * 40 - 20);
+ const color = Math.random() > 0.5 ? '#4caf50' : '#8bc34a';
+ const width = 1 + Math.random() * 2;
+ const path = ``;
+ if (Math.random() > 0.33) pathsBg += path; else pathsFg += path;
+ }
+
+ // Generate Flowers
+ const colors = ['#FF69B4', '#FFD700', '#87CEFA', '#FF4500', '#BA55D3', '#FFA500', '#FF1493'];
+ for (let i = 0; i < 40; i++) {
+ const x = 10 + Math.random() * (w - 20);
+ const y = hSVG * 0.1 + Math.random() * (hSVG * 0.5);
+ const col = colors[Math.floor(Math.random() * colors.length)];
+
+ let path = '';
+ path += ``;
+
+ const r = 2 + Math.random() * 1.5;
+ path += ``;
+ path += ``;
+ path += ``;
+ path += ``;
+ path += ``;
+
+ if (Math.random() > 0.33) pathsBg += path; else pathsFg += path;
+ }
+
+ grassContainer.innerHTML = `
+
+
+
+
+
+
+ `;
+
+ // Add Easter Eggs
+ for (let i = 0; i < eggCount; i++) {
+ const x = 2 + Math.random() * 96;
+ const y = Math.random() * 18; // 0 to 18px off bottom
+ const imageSrc = easterEggImages[Math.floor(Math.random() * easterEggImages.length)];
+
+ const eggImg = document.createElement('img');
+ eggImg.src = imageSrc;
+ eggImg.style.position = 'absolute';
+ eggImg.style.left = `${x}vw`;
+ eggImg.style.bottom = `${y}px`;
+ eggImg.style.width = `${15 + Math.random() * 10}px`;
+ eggImg.style.height = 'auto';
+ eggImg.style.transform = `rotate(${Math.random() * 60 - 30}deg)`;
+ eggImg.style.zIndex = Math.random() > 0.5 ? '1000' : '1004'; // Between grass layers
+
+ grassContainer.appendChild(eggImg);
}
- console.log('Random easter added');
}
-function addHoppingRabbit() {
- if (!bunny) return; // Nur ausführen, wenn Easter aktiviert ist
+let rabbitTimeout;
+let isAnimating = false;
- const easterContainer = document.querySelector('.easter-container');
- if (!easterContainer) return;
+function addHoppingRabbit(container) {
+ if (!enableBunny) return;
- // Hase erstellen
const rabbitImg = document.createElement("img");
rabbitImg.id = "rabbit";
- rabbitImg.src = rabbit; // Bildpfad aus der bestehenden Definition
- rabbitImg.alt = "Hoppelnder Osterhase";
+ rabbitImg.src = rabbit;
+ rabbitImg.alt = "Hopping Easter Bunny";
+ rabbitImg.className = "hopping-rabbit";
+
+ rabbitImg.style.bottom = "-15px";
+ rabbitImg.style.position = "absolute";
- // CSS-Klassen hinzufügen
- rabbitImg.classList.add("hopping-rabbit");
-
- easterContainer.appendChild(rabbitImg);
-
- rabbitImg.style.bottom = (hopHeight / 2 + 6) + "px";
+ container.appendChild(rabbitImg);
animateRabbit(rabbitImg);
}
-function animateRabbit(rabbitElement) {
- const rabbit = rabbitElement || document.querySelector('#rabbit');
- if (!rabbit) return;
+function animateRabbit(rabbit) {
+ if (!rabbit || isAnimating) return;
+ isAnimating = true;
+
+ const startFromLeft = Math.random() >= 0.5;
+ const startX = startFromLeft ? -15 : 115;
+ let currentX = startX;
+ const endX = startFromLeft ? 115 : -15;
+ const direction = startFromLeft ? 1 : -1;
+
+ rabbit.style.transition = 'none';
+ const transformScale = startFromLeft ? 'scaleX(-1)' : '';
+ rabbit.style.transform = `translateX(${currentX}vw) ${transformScale}`;
+
+ const loopDurationMs = jumpDurationMs + pauseDurationMs;
let startTime = null;
function animationStep(timestamp) {
+ if (!document.querySelector('.easter-container') || rabbit.style.display === 'none') {
+ isAnimating = false;
+ // When hidden, we stop animating. The toggle function will re-init.
+ return;
+ }
+
if (!startTime) {
startTime = timestamp;
-
- // random start position and direction
- const startFromLeft = Math.random() >= 0.5;
- rabbit.startX = startFromLeft ? -10 : 110;
- rabbit.endX = startFromLeft ? 110 : -10;
- rabbit.direction = startFromLeft ? 1 : -1;
-
- // mirror the rabbit image if it starts from the right
- rabbit.style.transform = startFromLeft ? '' : 'scaleX(-1)';
+ // FORCE GIF RESTART:
+ // The GIF must restart exactly when the jump loop starts.
+ // Re-assigning the src without a cache-busting timestamp resets it to frame 0
+ // while still allowing the browser to serve the cached file immediately.
+ const currSrc = rabbit.src.split('?')[0];
+ rabbit.src = '';
+ rabbit.src = currSrc;
}
- const progress = timestamp - startTime;
- // calculate the horizontal position (linear interpolation)
- const x = rabbit.startX + (progress / bunnyDuration) * (rabbit.endX - rabbit.startX);
+ const elapsed = timestamp - startTime;
+
+ // Calculate how many full loops (jump+pause) have happened
+ const completedLoops = Math.floor(elapsed / loopDurationMs);
+ const timeInCurrentLoop = elapsed % loopDurationMs;
- // calculate the vertical position (sinus curve)
- const y = Math.sin((progress / 500) * Math.PI) * hopHeight; // 500ms for one hop
-
- // set the new position
- rabbit.style.transform = `translate(${x}vw, ${y}px) scaleX(${rabbit.direction})`;
-
- if (progress < bunnyDuration) {
- animationFrameId = requestAnimationFrame(animationStep);
+ // Determine if we are currently jumping or pausing
+ let currentLoopDistance = 0;
+ if (timeInCurrentLoop < jumpDurationMs) {
+ // We are in the jumping phase
+ currentLoopDistance = (timeInCurrentLoop / jumpDurationMs) * jumpDistanceVw;
} else {
- // let the bunny rest for a while before hiding easter eggs again
- const pauseDuration = Math.random() * (maxBunnyRestTime - minBunnyRestTime) + minBunnyRestTime;
- setTimeout(() => {
- startTime = null;
- animationFrameId = requestAnimationFrame(animationStep);
- }, pauseDuration);
+ // We are in the paused phase
+ currentLoopDistance = jumpDistanceVw;
}
+
+ currentX = startX + (completedLoops * jumpDistanceVw + currentLoopDistance) * direction;
+
+ // Update DOM without CSS transitions (since we control it per-frame)
+ rabbit.style.transform = `translateX(${currentX}vw) ${transformScale}`;
+
+ // Check if finished crossing
+ if ((direction === 1 && currentX >= endX) || (direction === -1 && currentX <= endX)) {
+ // Finished crossing! We can rest now.
+ // Since we explicitly reset the GIF to frame 0 at the start of every loop,
+ // we no longer have to snap the rest time to the loop duration mathematically.
+ let restTime = Math.random() * (maxBunnyRestTime - minBunnyRestTime) + minBunnyRestTime;
+
+ isAnimating = false;
+ rabbitTimeout = setTimeout(() => {
+ animateRabbit(document.querySelector('#rabbit'));
+ }, restTime);
+ return;
+ }
+
+ rabbitTimeout = requestAnimationFrame(animationStep);
}
- animationFrameId = requestAnimationFrame(animationStep);
+ // Start loop
+ rabbitTimeout = requestAnimationFrame(animationStep);
}
+// Check visibility
+function toggleEaster() {
+ const easterContainer = document.querySelector('.easter-container');
+ if (!easterContainer) return;
+
+ const videoPlayer = document.querySelector('.videoPlayerContainer');
+ const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+ const isDashboard = document.body.classList.contains('dashboardDocument');
+ const hasUserMenu = document.querySelector('#app-user-menu');
+
+ if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+ easterContainer.style.display = 'none';
+ if (rabbitTimeout) {
+ clearTimeout(rabbitTimeout);
+ isAnimating = false; // Reset to allow restarting later
+ }
+ } else {
+ easterContainer.style.display = 'block';
+ if (!isAnimating && enableBunny) {
+ animateRabbit(document.querySelector('#rabbit'));
+ }
+ }
+}
+
+const observer = new MutationObserver(toggleEaster);
+observer.observe(document.body, { childList: true, subtree: true, attributes: true });
+
+function initializeEaster() {
+ if (!easter) return;
-// initialize standard easter
-function initEaster() {
const container = document.querySelector('.easter-container') || document.createElement("div");
if (!document.querySelector('.easter-container')) {
@@ -196,48 +259,17 @@ function initEaster() {
document.body.appendChild(container);
}
- // shuffle the easter images
- let currentIndex = images.length;
- let randomIndex;
- while (currentIndex != 0) {
- randomIndex = Math.floor(Math.random() * currentIndex);
- currentIndex--;
- [images[currentIndex], images[randomIndex]] = [images[randomIndex], images[currentIndex]];
- }
-
- for (let i = 0; i < 12; i++) {
- const eggDiv = document.createElement("div");
- eggDiv.className = "easter";
-
- const img = document.createElement("img");
- img.src = images[i];
-
- // 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)
- eggDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
+ createEasterGrassAndEggs(container);
+ addHoppingRabbit(container);
+
+ // Add resize listener to regenerate meadow
+ window.addEventListener('resize', () => {
+ if(document.querySelector('.easter-container')) {
+ createEasterGrassAndEggs(container);
}
+ });
- eggDiv.appendChild(img);
- container.appendChild(eggDiv);
- }
-
- addHoppingRabbit();
-}
-
-
-// initialize easter and add random easter after the DOM is loaded
-function initializeEaster() {
- if (!easter) return; // exit if easter are disabled
- initEaster();
toggleEaster();
-
- const screenWidth = window.innerWidth;
- if (randomEaster && (screenWidth > 768 || randomEasterMobile)) { // add random easter only on larger screens, unless enabled for mobile devices
- addRandomEaster(easterEggCount);
- }
}
-
initializeEaster();
\ No newline at end of file