diff --git a/Jellyfin.Plugin.Seasonals/Web/santa.js b/Jellyfin.Plugin.Seasonals/Web/santa.js index 0ce7e86..ad97a2d 100644 --- a/Jellyfin.Plugin.Seasonals/Web/santa.js +++ b/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) { diff --git a/Jellyfin.Plugin.Seasonals/Web/snowfall.js b/Jellyfin.Plugin.Seasonals/Web/snowfall.js index bea3409..45bd131 100644 --- a/Jellyfin.Plugin.Seasonals/Web/snowfall.js +++ b/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) { diff --git a/Jellyfin.Plugin.Seasonals/Web/snowstorm.js b/Jellyfin.Plugin.Seasonals/Web/snowstorm.js index b493c0d..f3e4eae 100644 --- a/Jellyfin.Plugin.Seasonals/Web/snowstorm.js +++ b/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) { diff --git a/manifest.json b/manifest.json index 7503c6b..0b90d18 100644 --- a/manifest.json +++ b/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",