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

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

@@ -1,11 +1,10 @@
const config = window.SeasonalsPluginConfig?.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 enableRotation = config.EnableRotation !== undefined ? config.EnableRotation : false; // enable/disable rotation
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 = [
"../Seasonals/Resources/autumn_images/acorn1.png",
@@ -64,11 +63,16 @@ observer.observe(document.body, {
});
function addRandomLeaves(count) {
const autumnContainer = document.querySelector('.autumn-container'); // get the leave container
if (!autumnContainer) return; // exit if leave container is not found
function initLeaves(count) {
let autumnContainer = document.querySelector('.autumn-container'); // get the leave container
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
for (let i = 0; i < count; i++) {
@@ -115,60 +119,18 @@ function addRandomLeaves(count) {
// add the leave to the container
autumnContainer.appendChild(leaveDiv);
}
console.log('Random leaves added');
console.log('Leaves added');
}
// initialize standard 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
// initialize leaves
function initializeLeaves() {
if (!leaves) return; // exit if leaves are disabled
initLeaves();
toggleAutumn();
const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
if (randomLeaves && (screenWidth > 768 || randomLeavesMobile)) { // add random leaves only on larger screens, unless enabled for mobile devices
addRandomLeaves(leafCount);
}
const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
const count = !isMobile ? leafCount : leafCountMobile;
initLeaves(count);
toggleAutumn();
}
initializeLeaves();