Jellyfin.Plugin.Seasonals/Web/santa.js

@@ -60,6 +60,7 @@ observer.observe(document.body, {
     attributes: true    // observe changes to attributes (e.g. class changes)
 });
 
+let resizeObserver; // Observer for resize events
 
 function initializeCanvas() {
     if (document.getElementById('snowfallCanvas')) {
@@ -78,8 +79,12 @@ function initializeCanvas() {
     container.appendChild(canvas);
     ctx = canvas.getContext('2d');
 
+    // Initial resize
     resizeCanvas(container);
-    window.addEventListener('resize', () => resizeCanvas(container));
+
+    // Initialize ResizeObserver
+    resizeObserver = new ResizeObserver(() => resizeCanvas(container));
+    resizeObserver.observe(container);
 }
 
 function removeCanvas() {
@@ -96,15 +101,37 @@ function removeCanvas() {
             animationFrameIdSanta = null;
             console.log('Santa animation frame canceled');
         }
+
+        // Disconnect ResizeObserver
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+            resizeObserver = null;
+        }
+
         console.log('Canvas removed');
     }
 }
 
 function resizeCanvas(container) {
     if (!canvas) return;
+
+    const oldWidth = canvas.width;
+    const oldHeight = canvas.height;
+
     const rect = container.getBoundingClientRect();
     canvas.width = rect.width;
     canvas.height = rect.height;
+
+    // Scale snowflakes positions if dimensions changed (to avoid clustering)
+    if (oldWidth > 0 && oldHeight > 0 && snowflakes.length > 0) {
+        const scaleX = canvas.width / oldWidth;
+        const scaleY = canvas.height / oldHeight;
+
+        snowflakes.forEach(flake => {
+            flake.x *= scaleX;
+            flake.y *= scaleY;
+        });
+    }
 }
 
 function createSnowflakes(container) {
@@ -210,7 +237,7 @@ function reloadSantaGif() {
 
 function animateSanta() {
     const santa = document.querySelector('.santa');
-    
+
     function startAnimation() {
         const santaHeight = santa.offsetHeight;
         if (santaHeight === 0) {

Jellyfin.Plugin.Seasonals/Web/snowfall.js

@@ -55,6 +55,7 @@ observer.observe(document.body, {
   attributes: true    // observe changes to attributes (e.g. class changes)
 });
 
+let resizeObserver; // Observer for resize events
 
 function initializeCanvas() {
   if (document.getElementById('snowfallCanvas')) {
@@ -73,8 +74,12 @@ function initializeCanvas() {
   container.appendChild(canvas);
   ctx = canvas.getContext('2d');
 
+  // Initial resize
   resizeCanvas(container);
-  window.addEventListener('resize', () => resizeCanvas(container));
+
+  // Initialize ResizeObserver
+  resizeObserver = new ResizeObserver(() => resizeCanvas(container));
+  resizeObserver.observe(container);
 }
 
 function removeCanvas() {
@@ -86,15 +91,37 @@ function removeCanvas() {
       animationFrameId = null;
       console.log('Animation frame canceled');
     }
+
+    // Disconnect ResizeObserver
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+
     console.log('Canvas removed');
   }
 }
 
 function resizeCanvas(container) {
   if (!canvas) return;
+
+  const oldWidth = canvas.width;
+  const oldHeight = canvas.height;
+
   const rect = container.getBoundingClientRect();
   canvas.width = rect.width;
   canvas.height = rect.height;
+
+  // Scale snowflakes positions if dimensions changed (to avoid clustering)
+  if (oldWidth > 0 && oldHeight > 0 && snowflakes.length > 0) {
+    const scaleX = canvas.width / oldWidth;
+    const scaleY = canvas.height / oldHeight;
+
+    snowflakes.forEach(flake => {
+      flake.x *= scaleX;
+      flake.y *= scaleY;
+    });
+  }
 }
 
 function createSnowflakes(container) {

Jellyfin.Plugin.Seasonals/Web/snowstorm.js

@@ -57,6 +57,7 @@ observer.observe(document.body, {
   attributes: true    // observe changes to attributes (e.g. class changes)
 });
 
+let resizeObserver; // Observer for resize events
 
 function initializeCanvas() {
   if (document.getElementById('snowfallCanvas')) {
@@ -75,8 +76,12 @@ function initializeCanvas() {
   container.appendChild(canvas);
   ctx = canvas.getContext('2d');
 
+  // Initial resize
   resizeCanvas(container);
-  window.addEventListener('resize', () => resizeCanvas(container));
+
+  // Initialize ResizeObserver
+  resizeObserver = new ResizeObserver(() => resizeCanvas(container));
+  resizeObserver.observe(container);
 }
 
 function removeCanvas() {
@@ -88,15 +93,37 @@ function removeCanvas() {
       animationFrameId = null;
       console.log('Animation frame canceled');
     }
+
+    // Disconnect ResizeObserver
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+
     console.log('Canvas removed');
   }
 }
 
 function resizeCanvas(container) {
   if (!canvas) return;
+
+  const oldWidth = canvas.width;
+  const oldHeight = canvas.height;
+
   const rect = container.getBoundingClientRect();
   canvas.width = rect.width;
   canvas.height = rect.height;
+
+  // Scale snowflakes positions if dimensions changed (to avoid clustering)
+  if (oldWidth > 0 && oldHeight > 0 && snowflakes.length > 0) {
+    const scaleX = canvas.width / oldWidth;
+    const scaleY = canvas.height / oldHeight;
+
+    snowflakes.forEach(flake => {
+      flake.x *= scaleX;
+      flake.y *= scaleY;
+    });
+  }
 }
 
 function createSnowflakes(container) {

manifest.json

@@ -8,6 +8,14 @@
     "category": "General",
     "imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/raw/branch/main/logo.png",
     "versions": [
+      {
+        "version": "1.5.1.0",
+        "changelog": "- fix: snowfall effect sometimes not scaling on window resize, which leads to clustering and rain effect of snowflakes",
+        "targetAbi": "10.11.0.0",
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/releases/download/v1.5.1.0/Jellyfin.Plugin.Seasonals.zip",
+        "checksum": "",
+        "timestamp": ""
+      },
       {
         "version": "1.5.0.0",
         "changelog": "- Refactor script injection logic",