From cbf5d7362998f4f483bac03822afcaa23f0b1387 Mon Sep 17 00:00:00 2001
From: CodeDevMLH <145071728+CodeDevMLH@users.noreply.github.com>
Date: Sat, 28 Feb 2026 01:15:03 +0100
Subject: [PATCH] Refactor autumn.js and autumn.css to streamline leaf
 initialization and enhance configuration handling

---
 Jellyfin.Plugin.Seasonals/Web/autumn.css | 196 +++++++----------------
 Jellyfin.Plugin.Seasonals/Web/autumn.js  |  72 ++-------
 2 files changed, 74 insertions(+), 194 deletions(-)

diff --git a/Jellyfin.Plugin.Seasonals/Web/autumn.css b/Jellyfin.Plugin.Seasonals/Web/autumn.css
index 9fc46a7..222c726 100644
--- a/Jellyfin.Plugin.Seasonals/Web/autumn.css
+++ b/Jellyfin.Plugin.Seasonals/Web/autumn.css
@@ -1,139 +1,57 @@
-.autumn-container {
-  display: block;
-  position: fixed;
-  overflow: hidden;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 10;
-  contain: layout paint;
-}
-
-.leaf {
-  position: fixed;
-  z-index: 15;
-  top: 0;
-  will-change: transform;
-  translate: 0 -10vh;
-  font-size: 1em;
-  color: #fff;
-  font-family: Arial, sans-serif;
-  text-shadow: 0 0 5px #000;
-  user-select: none;
  cursor: default;
  animation-name: leaf-fall, leaf-shake;
-  animation-duration: 7s, 4s;
-  animation-timing-function: linear, ease-in-out;
-  animation-iteration-count: infinite, infinite;
-}
-
-/* Class to disable rotation */
-.no-rotation {
-  --rotate-start: 0deg !important;
-  --rotate-end: 0deg !important;
-}
-
-
-@keyframes leaf-fall {
-  0% {
-    translate: 0 -10vh;
-  }
-
-  100% {
-    translate: 0 100vh;
-  }
-}
-
-
-@keyframes leaf-shake {
-  0%, 100% {
-    transform: translateX(0) rotate(var(--rotate-start, -20deg));
-  }
-  50% {
-    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;
-  --rotate-end: 27deg;
-}
\ No newline at end of file
+.autumn-container {
+  display: block;
+  position: fixed;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+  contain: layout paint;
+}
+
+.leaf {
+  position: fixed;
+  z-index: 15;
+  top: 0;
+  will-change: transform;
+  translate: 0 -10vh;
+  font-size: 1em;
+  color: #fff;
+  font-family: Arial, sans-serif;
+  text-shadow: 0 0 5px #000;
+  user-select: none;
+  cursor: default;
+  animation-name: leaf-fall, leaf-shake;
+  animation-duration: 7s, 4s;
+  animation-timing-function: linear, ease-in-out;
+  animation-iteration-count: infinite, infinite;
+}
+
+/* Class to disable rotation */
+.no-rotation {
+  --rotate-start: 0deg !important;
+  --rotate-end: 0deg !important;
+}
+
+
+@keyframes leaf-fall {
+  0% {
+    translate: 0 -10vh;
+  }
+
+  100% {
+    translate: 0 100vh;
+  }
+}
+
+
+@keyframes leaf-shake {
+  0%, 100% {
+    transform: translateX(0) rotate(var(--rotate-start, -20deg));
+  }
+  50% {
+    transform: translateX(80px) rotate(var(--rotate-end, 20deg));
+  }
+}
diff --git a/Jellyfin.Plugin.Seasonals/Web/autumn.js b/Jellyfin.Plugin.Seasonals/Web/autumn.js
index 77233a5..d04a920 100644
--- a/Jellyfin.Plugin.Seasonals/Web/autumn.js
+++ b/Jellyfin.Plugin.Seasonals/Web/autumn.js
@@ -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();
\ No newline at end of file