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

Refactor Easter animation and grass generation; streamline code and improve performance

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-24 18:21:51 +01:00
parent 5c10583601
commit 589a360729
2 changed files with 266 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
Jellyfin.Plugin.Seasonals/Web/easter.css
View File

@@ -1,161 +1,64 @@
.easter-container { .easter-container {
display: block; display: block;
position: fixed; position: fixed;
overflow: hidden; top: 0;
top: 0; left: 0;
left: 0; width: 100%;
width: 100%; height: 100%;
height: 100%; pointer-events: none;
pointer-events: none; z-index: 10000;
z-index: 10; contain: strict;
contain: layout paint; 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 { .hopping-rabbit {
position: fixed; position: absolute;
z-index: 15; bottom: -15px;
bottom: 10px; left: 0;
width: 70px; width: 160px;
overflow: hidden; height: auto;
pointer-events: none; z-index: 1002;
will-change: transform;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.hopping-rabbit { .hopping-rabbit {
width: 60px; 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;
} }

396
Jellyfin.Plugin.Seasonals/Web/easter.js
View File

@@ -1,66 +1,19 @@
const config = window.SeasonalsPluginConfig?.Easter || {}; const config = window.SeasonalsPluginConfig?.Easter || {};
const easter = config.EnableEaster !== undefined ? config.EnableEaster : true; // enable/disable easter const easter = config.EnableEaster !== undefined ? config.EnableEaster : true;
const randomEaster = config.EnableRandomEaster !== undefined ? config.EnableRandomEaster : true; // enable random easter const enableBunny = config.EnableBunny !== undefined ? config.EnableBunny : true;
const randomEasterMobile = config.EnableRandomEasterMobile !== undefined ? config.EnableRandomEasterMobile : false; // enable random easter on mobile devices (Warning: High values may affect performance) /* MARK: BUNNY LOCOMOTION CONFIGURATION */
const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different duration for the random easter const jumpDistanceVw = 5; // Distance in vw the bunny covers per jump
const easterEggCount = config.EggCount || 20; // count of random extra easter 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 minBunnyRestTime = config.MinBunnyRestTime || 2000;
const bunnyDuration = config.BunnyDuration || 12000; // duration of the bunny animation in ms const maxBunnyRestTime = config.MaxBunnyRestTime || 5000;
const hopHeight = config.HopHeight || 12; // height of the bunny hops in px const eggCount = config.EggCount || 15;
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 rabbit = "../Seasonals/Resources/easter_images/Osterhase.gif";
let msgPrinted = false; // flag to prevent multiple console messages const easterEggImages = [
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 = [
"../Seasonals/Resources/easter_images/egg_1.png", "../Seasonals/Resources/easter_images/egg_1.png",
"../Seasonals/Resources/easter_images/egg_2.png", "../Seasonals/Resources/easter_images/egg_2.png",
"../Seasonals/Resources/easter_images/egg_3.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_10.png",
"../Seasonals/Resources/easter_images/egg_11.png", "../Seasonals/Resources/easter_images/egg_11.png",
"../Seasonals/Resources/easter_images/egg_12.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) { function createEasterGrassAndEggs(container) {
const easterContainer = document.querySelector('.easter-container'); // get the leave container let grassContainer = container.querySelector('.easter-grass-container');
if (!easterContainer) return; // exit if leave container is not found if (!grassContainer) {
grassContainer = document.createElement('div');
console.log('Adding random easter eggs'); grassContainer.className = 'easter-grass-container';
container.appendChild(grassContainer);
// Array of leave characters }
for (let i = 0; i < count; i++) {
// create a new leave element grassContainer.innerHTML = '';
const eggDiv = document.createElement('div');
eggDiv.className = "easter"; let pathsBg = '';
let pathsFg = '';
// pick a random easter symbol const w = window.innerWidth;
const imageSrc = images[Math.floor(Math.random() * images.length)]; const hSVG = 80; // Grass 80px high
const img = document.createElement("img");
img.src = imageSrc; // Generate Grass
const bladeCount = w / 5;
eggDiv.appendChild(img); for (let i = 0; i < bladeCount; i++) {
const height = Math.random() * 40 + 20;
// set random horizontal position, animation delay and size(uncomment lines to enable) const x = i * 5 + Math.random() * 3;
const randomLeft = Math.random() * 100; // position (0% to 100%) const hue = 80 + Math.random() * 40; // slightly more yellow-green for spring/easter
const randomAnimationDelay = Math.random() * 12; // delay (0s to 12s) const color = `hsl(${hue}, 60%, 40%)`;
const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s) const line = `<line x1="${x}" y1="${hSVG}" x2="${x}" y2="${hSVG - height}" stroke="${color}" stroke-width="2" />`;
if (Math.random() > 0.33) pathsBg += line; else pathsFg += line;
// apply styles }
eggDiv.style.left = `${randomLeft}%`;
eggDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`; for (let i = 0; i < 200; i++) {
const x = Math.random() * w;
// set random animation duration const h = 20 + Math.random() * 50;
if (enableDiffrentDuration) { const cY = hSVG - h;
const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s) const bend = x + (Math.random() * 40 - 20);
const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s) const color = Math.random() > 0.5 ? '#4caf50' : '#8bc34a';
eggDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`; const width = 1 + Math.random() * 2;
} const path = `<path d="M ${x} ${hSVG} Q ${bend} ${cY+20} ${bend} ${cY}" stroke="${color}" stroke-width="${width}" fill="none"/>`;
if (Math.random() > 0.33) pathsBg += path; else pathsFg += path;
}
// add the leave to the container
easterContainer.appendChild(eggDiv); // 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 += `<path d="M ${x} ${hSVG} Q ${x - 5 + Math.random() * 10} ${y+15} ${x} ${y}" stroke="#006400" stroke-width="1.5" fill="none"/>`;
const r = 2 + Math.random() * 1.5;
path += `<circle cx="${x-r}" cy="${y-r}" r="${r}" fill="${col}"/>`;
path += `<circle cx="${x+r}" cy="${y-r}" r="${r}" fill="${col}"/>`;
path += `<circle cx="${x-r}" cy="${y+r}" r="${r}" fill="${col}"/>`;
path += `<circle cx="${x+r}" cy="${y+r}" r="${r}" fill="${col}"/>`;
path += `<circle cx="${x}" cy="${y}" r="${r*0.7}" fill="#FFF8DC"/>`;
if (Math.random() > 0.33) pathsBg += path; else pathsFg += path;
}
grassContainer.innerHTML = `
<div class="easter-meadow-layer" style="z-index: 1001;">
<svg class="easter-meadow" viewBox="0 0 ${w} ${hSVG}" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<g class="easter-sway">
${pathsBg}
</g>
</svg>
</div>
<div class="easter-meadow-layer" style="z-index: 1003;">
<svg class="easter-meadow" viewBox="0 0 ${w} ${hSVG}" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<g class="easter-sway" style="animation-delay: -2s;">
${pathsFg}
</g>
</svg>
</div>
`;
// 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() { let rabbitTimeout;
if (!bunny) return; // Nur ausführen, wenn Easter aktiviert ist let isAnimating = false;
const easterContainer = document.querySelector('.easter-container'); function addHoppingRabbit(container) {
if (!easterContainer) return; if (!enableBunny) return;
// Hase erstellen
const rabbitImg = document.createElement("img"); const rabbitImg = document.createElement("img");
rabbitImg.id = "rabbit"; rabbitImg.id = "rabbit";
rabbitImg.src = rabbit; // Bildpfad aus der bestehenden Definition rabbitImg.src = rabbit;
rabbitImg.alt = "Hoppelnder Osterhase"; rabbitImg.alt = "Hopping Easter Bunny";
rabbitImg.className = "hopping-rabbit";
rabbitImg.style.bottom = "-15px";
rabbitImg.style.position = "absolute";
// CSS-Klassen hinzufügen container.appendChild(rabbitImg);
rabbitImg.classList.add("hopping-rabbit");
easterContainer.appendChild(rabbitImg);
rabbitImg.style.bottom = (hopHeight / 2 + 6) + "px";
animateRabbit(rabbitImg); animateRabbit(rabbitImg);
} }
function animateRabbit(rabbitElement) { function animateRabbit(rabbit) {
const rabbit = rabbitElement || document.querySelector('#rabbit'); if (!rabbit || isAnimating) return;
if (!rabbit) 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; let startTime = null;
function animationStep(timestamp) { 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) { if (!startTime) {
startTime = timestamp; startTime = timestamp;
// FORCE GIF RESTART:
// random start position and direction // The GIF must restart exactly when the jump loop starts.
const startFromLeft = Math.random() >= 0.5; // Re-assigning the src without a cache-busting timestamp resets it to frame 0
rabbit.startX = startFromLeft ? -10 : 110; // while still allowing the browser to serve the cached file immediately.
rabbit.endX = startFromLeft ? 110 : -10; const currSrc = rabbit.src.split('?')[0];
rabbit.direction = startFromLeft ? 1 : -1; rabbit.src = '';
rabbit.src = currSrc;
// mirror the rabbit image if it starts from the right
rabbit.style.transform = startFromLeft ? '' : 'scaleX(-1)';
} }
const progress = timestamp - startTime;
// calculate the horizontal position (linear interpolation) const elapsed = timestamp - startTime;
const x = rabbit.startX + (progress / bunnyDuration) * (rabbit.endX - rabbit.startX);
// 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) // Determine if we are currently jumping or pausing
const y = Math.sin((progress / 500) * Math.PI) * hopHeight; // 500ms for one hop let currentLoopDistance = 0;
if (timeInCurrentLoop < jumpDurationMs) {
// set the new position // We are in the jumping phase
rabbit.style.transform = `translate(${x}vw, ${y}px) scaleX(${rabbit.direction})`; currentLoopDistance = (timeInCurrentLoop / jumpDurationMs) * jumpDistanceVw;
if (progress < bunnyDuration) {
animationFrameId = requestAnimationFrame(animationStep);
} else { } else {
// let the bunny rest for a while before hiding easter eggs again // We are in the paused phase
const pauseDuration = Math.random() * (maxBunnyRestTime - minBunnyRestTime) + minBunnyRestTime; currentLoopDistance = jumpDistanceVw;
setTimeout(() => {
startTime = null;
animationFrameId = requestAnimationFrame(animationStep);
}, pauseDuration);
} }
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"); const container = document.querySelector('.easter-container') || document.createElement("div");
if (!document.querySelector('.easter-container')) { if (!document.querySelector('.easter-container')) {
@@ -196,48 +259,17 @@ function initEaster() {
document.body.appendChild(container); document.body.appendChild(container);
} }
// shuffle the easter images createEasterGrassAndEggs(container);
let currentIndex = images.length; addHoppingRabbit(container);
let randomIndex;
while (currentIndex != 0) { // Add resize listener to regenerate meadow
randomIndex = Math.floor(Math.random() * currentIndex); window.addEventListener('resize', () => {
currentIndex--; if(document.querySelector('.easter-container')) {
[images[currentIndex], images[randomIndex]] = [images[randomIndex], images[currentIndex]]; createEasterGrassAndEggs(container);
}
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`;
} }
});
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(); 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(); initializeEaster();