From 0db833c4dc3e3ffd0fb444d49d3bf8f713dbc508 Mon Sep 17 00:00:00 2001
From: CodeDevMLH <145071728+CodeDevMLH@users.noreply.github.com>
Date: Tue, 30 Dec 2025 02:09:18 +0100
Subject: [PATCH] fix: improve fireworks display handling for scrolling and
 container positioning

---
 Jellyfin.Plugin.Seasonals/Web/fireworks.js | 29 +++++++++++++++++-----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/Jellyfin.Plugin.Seasonals/Web/fireworks.js b/Jellyfin.Plugin.Seasonals/Web/fireworks.js
index 21423de..b24cf93 100644
--- a/Jellyfin.Plugin.Seasonals/Web/fireworks.js
+++ b/Jellyfin.Plugin.Seasonals/Web/fireworks.js
@@ -42,6 +42,11 @@ function toggleFirework() {
     }
   } else {
     fireworksContainer.style.display = 'block'; // show fireworks
+
+    if (scrollFireworks) {
+      fireworksContainer.style.height = `${document.documentElement.scrollHeight}px`;
+    }
+
     if (msgPrinted) {
       console.log('Fireworks visible');
       startFireworks();
@@ -117,8 +122,8 @@ function launchFirework() {
   let startY, endY;
   if (scrollFireworks) {
     // Y-position considers scrolling
-    startY = window.scrollY + window.innerHeight; // Bottom edge of the window plus the scroll offset
-    endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2 + window.scrollY; // Area around the middle, but also with scrolling
+    startY = window.scrollY + window.innerHeight;
+    endY = window.scrollY + (Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2);
   } else {
     startY = window.innerHeight; // Bottom edge of the window
     endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2; // Area around the middle
@@ -135,15 +140,27 @@ function launchFirework() {
 
 // Start the firework routine
 function startFireworks() {
-  const fireworkContainer = document.querySelector('.fireworks') || document.createElement("div");
+  let fireworkContainer = document.querySelector('.fireworks');
 
-  if (!document.querySelector('.fireworks')) {
+  if (!fireworkContainer) {
+    fireworkContainer = document.createElement("div");
     fireworkContainer.className = "fireworks";
     fireworkContainer.setAttribute("aria-hidden", "true");
-    fireworkContainer.style.position = scrollFireworks ? 'absolute' : 'fixed';
     document.body.appendChild(fireworkContainer);
   }
-  
+
+  fireworkContainer.style.position = scrollFireworks ? 'absolute' : 'fixed';
+
+  if (scrollFireworks) {
+    fireworkContainer.style.height = `${document.documentElement.scrollHeight}px`;
+    fireworkContainer.style.width = '100%';
+    fireworkContainer.style.top = '0';
+    fireworkContainer.style.left = '0';
+  } else {
+    fireworkContainer.style.height = '100%';
+    fireworkContainer.style.width = '100%';
+  }
+
   fireworksInterval = setInterval(() => {
     const randomCount = Math.floor(Math.random() * maxFireworks) + minFireworks;
     for (let i = 0; i < randomCount; i++) {