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

Refactor autumn.js and autumn.css to streamline leaf initialization and enhance configuration handling

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-28 01:15:03 +01:00
parent 8be17dae74
commit cbf5d73629
2 changed files with 74 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
Jellyfin.Plugin.Seasonals/Web/autumn.css
View File

@@ -1,139 +1,57 @@
.autumn-container { .autumn-container {
display: block; display: block;
position: fixed; position: fixed;
overflow: hidden; 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: 10; z-index: 10;
contain: layout paint; contain: layout paint;
} }
.leaf { .leaf {
position: fixed; position: fixed;
z-index: 15; z-index: 15;
top: 0; top: 0;
will-change: transform; will-change: transform;
translate: 0 -10vh; translate: 0 -10vh;
font-size: 1em; font-size: 1em;
color: #fff; color: #fff;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
text-shadow: 0 0 5px #000; text-shadow: 0 0 5px #000;
user-select: none; user-select: none;
cursor: default; cursor: default;
animation-name: leaf-fall, leaf-shake; animation-name: leaf-fall, leaf-shake;
animation-duration: 7s, 4s; animation-duration: 7s, 4s;
animation-timing-function: linear, ease-in-out; animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite; animation-iteration-count: infinite, infinite;
} }
/* Class to disable rotation */ /* Class to disable rotation */
.no-rotation { .no-rotation {
--rotate-start: 0deg !important; --rotate-start: 0deg !important;
--rotate-end: 0deg !important; --rotate-end: 0deg !important;
} }
@keyframes leaf-fall { @keyframes leaf-fall {
0% { 0% {
translate: 0 -10vh; translate: 0 -10vh;
} }
100% { 100% {
translate: 0 100vh; translate: 0 100vh;
} }
} }
@keyframes leaf-shake { @keyframes leaf-shake {
0%, 100% { 0%, 100% {
transform: translateX(0) rotate(var(--rotate-start, -20deg)); transform: translateX(0) rotate(var(--rotate-start, -20deg));
} }
50% { 50% {
transform: translateX(80px) rotate(var(--rotate-end, 20deg)); transform: translateX(80px) rotate(var(--rotate-end, 20deg));
} }
} }
.leaf:nth-of-type(0) {
left: 0%;
animation-delay: 0s, 0s;
--rotate-start: -25deg;
--rotate-end: 22deg;
}
.leaf:nth-of-type(1) {
left: 10%;
animation-delay: 1s, 0.5s;
--rotate-start: -32deg;
--rotate-end: 35deg;
}
.leaf:nth-of-type(2) {
left: 20%;
animation-delay: 6s, 1s;
--rotate-start: -28deg;
--rotate-end: 28deg;
}
.leaf:nth-of-type(3) {
left: 30%;
animation-delay: 4s, 1.5s;
--rotate-start: -38deg;
--rotate-end: 32deg;
}
.leaf:nth-of-type(4) {
left: 40%;
animation-delay: 2s, 0.8s;
--rotate-start: -22deg;
--rotate-end: 38deg;
}
.leaf:nth-of-type(5) {
left: 50%;
animation-delay: 8s, 2s;
--rotate-start: -35deg;
--rotate-end: 25deg;
}
.leaf:nth-of-type(6) {
left: 60%;
animation-delay: 6s, 1.2s;
--rotate-start: -40deg;
--rotate-end: 40deg;
}
.leaf:nth-of-type(7) {
left: 70%;
animation-delay: 2.5s, 0.3s;
--rotate-start: -30deg;
--rotate-end: 30deg;
}
.leaf:nth-of-type(8) {
left: 80%;
animation-delay: 1s, 1.8s;
--rotate-start: -26deg;
--rotate-end: 36deg;
}
.leaf:nth-of-type(9) {
left: 90%;
animation-delay: 3s, 0.7s;
--rotate-start: -34deg;
--rotate-end: 24deg;
}
.leaf:nth-of-type(10) {
left: 25%;
animation-delay: 2s, 2.3s;
--rotate-start: -29deg;
--rotate-end: 33deg;
}
.leaf:nth-of-type(11) {
left: 65%;
animation-delay: 4s, 1.4s;
--rotate-start: -37deg;

72
Jellyfin.Plugin.Seasonals/Web/autumn.js
View File

@@ -1,11 +1,10 @@
const config = window.SeasonalsPluginConfig?.Autumn || {}; const config = window.SeasonalsPluginConfig?.Autumn || {};
const leaves = config.EnableAutumn !== undefined ? config.EnableAutumn : true; // enable/disable autumn const leaves = config.EnableAutumn !== undefined ? config.EnableAutumn : true; // enable/disable autumn
const randomLeaves = config.EnableRandomLeaves !== undefined ? config.EnableRandomLeaves : true; // enable random leaves
const randomLeavesMobile = config.EnableRandomLeavesMobile !== undefined ? config.EnableRandomLeavesMobile : false; // enable random leaves on mobile
const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different durations const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different durations
const enableRotation = config.EnableRotation !== undefined ? config.EnableRotation : false; // enable/disable rotation const enableRotation = config.EnableRotation !== undefined ? config.EnableRotation : false; // enable/disable rotation
const leafCount = config.LeafCount !== undefined ? config.LeafCount : 25; // count of random extra leaves const leafCount = config.LeafCount !== undefined ? config.LeafCount : 25; // count of random extra leaves
const leafCountMobile = config.LeafCountMobile !== undefined ? config.LeafCountMobile : 10; // count of random extra leaves on mobile
const images = [ const images = [
"../Seasonals/Resources/autumn_images/acorn1.png", "../Seasonals/Resources/autumn_images/acorn1.png",
@@ -64,11 +63,16 @@ observer.observe(document.body, {
}); });
function addRandomLeaves(count) { function initLeaves(count) {
const autumnContainer = document.querySelector('.autumn-container'); // get the leave container let autumnContainer = document.querySelector('.autumn-container'); // get the leave container
if (!autumnContainer) return; // exit if leave container is not found if (!autumnContainer) {
autumnContainer = document.createElement("div");
autumnContainer.className = "autumn-container";
autumnContainer.setAttribute("aria-hidden", "true");
document.body.appendChild(autumnContainer);
}
console.log('Adding random leaves'); console.log('Adding leaves');
// Array of leave characters // Array of leave characters
for (let i = 0; i < count; i++) { for (let i = 0; i < count; i++) {
@@ -115,60 +119,18 @@ function addRandomLeaves(count) {
// add the leave to the container // add the leave to the container
autumnContainer.appendChild(leaveDiv); autumnContainer.appendChild(leaveDiv);
} }
console.log('Random leaves added'); console.log('Leaves added');
} }
// initialize standard leaves // initialize leaves
function initLeaves() {
const container = document.querySelector('.autumn-container') || document.createElement("div");
if (!document.querySelector('.autumn-container')) {
container.className = "autumn-container";
container.setAttribute("aria-hidden", "true");
document.body.appendChild(container);
}
for (let i = 0; i < 12; i++) {
const leafDiv = document.createElement("div");
leafDiv.className = enableRotation ? "leaf" : "leaf no-rotation";
const img = document.createElement("img");
img.src = images[Math.floor(Math.random() * images.length)];
// set random animation duration
if (enableDiffrentDuration) {
const randomAnimationDuration = Math.random() * 10 + 6; // fall duration (6s to 16s)
const randomAnimationDuration2 = Math.random() * 3 + 2; // shake+rotate duration (2s to 5s)
leafDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
}
// set random rotation angles for standard leaves too (only if rotation is enabled)
if (enableRotation) {
const randomRotateStart = -(Math.random() * 40 + 20); // -20deg to -60deg
const randomRotateEnd = Math.random() * 40 + 20; // 20deg to 60deg
leafDiv.style.setProperty('--rotate-start', `${randomRotateStart}deg`);
leafDiv.style.setProperty('--rotate-end', `${randomRotateEnd}deg`);
} else {
// No rotation - set to 0 degrees
leafDiv.style.setProperty('--rotate-start', '0deg');
leafDiv.style.setProperty('--rotate-end', '0deg');
}
leafDiv.appendChild(img);
container.appendChild(leafDiv);
}
}
// initialize leaves and add random leaves
function initializeLeaves() { function initializeLeaves() {
if (!leaves) return; // exit if leaves are disabled if (!leaves) return; // exit if leaves are disabled
initLeaves();
toggleAutumn();
const screenWidth = window.innerWidth; // get the screen width to detect mobile devices const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
if (randomLeaves && (screenWidth > 768 || randomLeavesMobile)) { // add random leaves only on larger screens, unless enabled for mobile devices const count = !isMobile ? leafCount : leafCountMobile;
addRandomLeaves(leafCount);
} initLeaves(count);
toggleAutumn();
} }
initializeLeaves(); initializeLeaves();