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

Remove petal and ladybug functionality from spring animation

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-20 00:55:54 +01:00
parent 45c9a199c2
commit 78872e7f96
2 changed files with 26 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
Jellyfin.Plugin.Seasonals/Web/spring.css
View File

@@ -10,39 +10,6 @@
z-index: 1000;
}
/* Petals */
.spring-petal {
position: fixed;
top: -20px;
z-index: 1005;
width: 15px;
height: 10px;
background-color: #ffc0cb;
border-radius: 15px 0px 15px 0px;
will-change: transform, top;
animation-name: spring-fall, spring-sway;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
animation-duration: 10s, 3s;
}
.spring-petal.lighter {
background-color: #ffd1dc;
opacity: 0.8;
}
.spring-petal.darker {
background-color: #ffb7c5;
opacity: 0.9;
}
.spring-petal.type2 {
width: 12px;
height: 12px;
border-radius: 10px 0px 10px 5px;
}
/* Pollen */
.spring-pollen {
position: fixed;
@@ -99,54 +66,7 @@
animation-iteration-count: infinite;
}
/* Ladybugs */
.spring-ladybug {
position: absolute;
width: 6px;
height: 4px;
background-color: #e74c3c; /* Red */
border-radius: 3px 3px 0 0;
z-index: 1003;
will-change: left, transform;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.spring-ladybug.right {
animation-name: spring-bug-crawl-right;
transform: scaleX(1);
}
.spring-ladybug.left {
animation-name: spring-bug-crawl-left;
transform: scaleX(-1);
}
.spring-ladybug::before {
content: '';
position: absolute;
right: -2px;
top: 1px;
width: 2px;
height: 2px;
background-color: #000;
border-radius: 50%;
}
@keyframes spring-fall {
0% { top: -10%; }
100% { top: 100%; }
}
@keyframes spring-sway {
0%, 100% {
transform: translateX(0) rotate(0deg);
}
50% {
transform: translateX(30px) rotate(45deg);
}
}
@keyframes spring-float {
0% { transform: translateX(0) translateY(0); }
@@ -168,12 +88,4 @@
100% { transform: rotate(0deg); }
}
@keyframes spring-bug-crawl-right {
0% { left: -5%; }
100% { left: 105%; }
}
@keyframes spring-bug-crawl-left {
0% { left: 105%; }
100% { left: -5%; }
}

128
Jellyfin.Plugin.Seasonals/Web/spring.js
View File

@@ -1,15 +1,12 @@
const config = window.SeasonalsPluginConfig?.Spring || {};
const spring = config.EnableSpring !== undefined ? config.EnableSpring : true;
const petalCount = config.PetalCount || 25;
const pollenCount = config.PollenCount || 15;
const ladybugCountConfig = config.LadybugCount || 5;
const sunbeamCount = config.SunbeamCount || 5;
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 enablePetals = config.EnableSpringPetals !== undefined ? config.EnableSpringPetals : true;
const enableSunbeams = config.EnableSpringSunbeams !== undefined ? config.EnableSpringSunbeams : true;
let msgPrinted = false;
@@ -41,35 +38,6 @@ function toggleSpring() {
const observer = new MutationObserver(toggleSpring);
observer.observe(document.body, { childList: true, subtree: true, attributes: true });
function createPetal(container) {
if (!enablePetals) return;
const petal = document.createElement('div');
petal.classList.add('spring-petal');
const type = Math.random() > 0.5 ? 'type1' : 'type2';
petal.classList.add(type);
const color = Math.random() > 0.7 ? 'darker' : 'lighter';
petal.classList.add(color);
const randomLeft = Math.random() * 100;
petal.style.left = `${randomLeft}%`;
const size = Math.random() * 0.5 + 0.5;
petal.style.transform = `scale(${size})`;
const duration = Math.random() * 5 + 8;
const delay = Math.random() * 10;
const swayDuration = Math.random() * 2 + 2;
if (enableDifferentDuration) {
petal.style.animationDuration = `${duration}s, ${swayDuration}s`;
}
petal.style.animationDelay = `${delay}s, ${Math.random() * 3}s`;
container.appendChild(petal);
}
function createPollen(container) {
const pollen = document.createElement('div');
@@ -121,6 +89,9 @@ 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++) {
@@ -140,52 +111,6 @@ function createGrass(container) {
grassContainer.appendChild(blade);
}
// Add Ladybugs
const bugs = ladybugCountConfig;
for (let i = 0; i < bugs; i++) {
createLadybug(grassContainer);
}
}
function createLadybug(container) {
const bug = document.createElement('div');
bug.classList.add('spring-ladybug');
const direction = Math.random() > 0.5 ? 'right' : 'left';
bug.classList.add(direction);
// Position lower (bottom of grass), but ensure visibility
const bottomOffset = direction === 'right' ? Math.random() * 5 + 6 : Math.random() * 5 + 2;
bug.style.bottom = `${bottomOffset}px`;
// Start position depends on direction
if (direction === 'right') {
bug.style.left = '-5%'; // Start off-screen left
} else {
bug.style.left = '105%'; // Start off-screen right
}
const duration = Math.random() * 20 + 20; // Slow crawl
bug.style.animationDuration = `${duration}s`;
bug.style.animationDelay = `-${Math.random() * 20}s`;
container.appendChild(bug);
}
function addRandomSpringObjects() {
const container = document.querySelector('.spring-container');
if (!container) return;
if (enablePetals) {
for (let i = 0; i < petalCount; i++) {
createPetal(container);
}
}
for (let i = 0; i < pollenCount; i++) {
createPollen(container);
}
}
function initSpringObjects() {
@@ -199,30 +124,6 @@ function initSpringObjects() {
createGrass(container);
if (enablePetals) {
for (let i = 0; i < 15; i++) {
const petal = document.createElement('div');
petal.classList.add('spring-petal');
const type = Math.random() > 0.5 ? 'type1' : 'type2';
petal.classList.add(type);
const color = Math.random() > 0.7 ? 'darker' : 'lighter';
petal.classList.add(color);
const randomLeft = Math.random() * 100;
petal.style.left = `${randomLeft}%`;
const size = Math.random() * 0.5 + 0.5;
petal.style.transform = `scale(${size})`;
const duration = Math.random() * 5 + 8;
const swayDuration = Math.random() * 2 + 2;
if (enableDifferentDuration) {
petal.style.animationDuration = `${duration}s, ${swayDuration}s`;
}
petal.style.animationDelay = `-${Math.random() * 10}s, -${Math.random() * 3}s`;
container.appendChild(petal);
}
}
if (enableSunbeams) {
// Initial sunbeams
for (let i = 0; i < sunbeamCount; i++) {
@@ -242,4 +143,27 @@ function initializeSpring() {
}
}
// Debounce helper
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
// Resize handler for grass
const handleResize = debounce(() => {
const container = document.querySelector('.spring-container');
if (container) {
createGrass(container);
}
}, 250);
window.addEventListener('resize', handleResize);
initializeSpring();