fix canvas hide and show

This commit is contained in:
MLH
2025-01-24 00:16:11 +01:00
parent 821e3d1636
commit 8376b0e140
4 changed files with 104 additions and 8 deletions

View File

@@ -6,6 +6,7 @@ const snowFallSpeed = 3; // speed of snowfall (recommended values: 0-5)
let msgPrinted = false; // flag to prevent multiple console messages
let canvas, ctx; // canvas and context for drawing snowflakes
let animationFrameId; // ID of the animation frame
// function to check and control the snowfall
function toggleSnowfall() {
@@ -20,12 +21,21 @@ function toggleSnowfall() {
// hide snowfall if video/trailer player is active or dashboard is visible
if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
snowfallContainer.style.display = 'none'; // hide snowfall
removeCanvas();
if (!msgPrinted) {
console.log('Snowfall hidden');
msgPrinted = true;
}
} else {
snowfallContainer.style.display = 'block'; // show snowfall
if (!animationFrameId) {
initializeCanvas();
snowflakes = createSnowflakes(snowfallContainer);
animateSnowfall();
} else {
console.warn('could not initialize snowfall: animation frame is already running');
}
if (msgPrinted) {
console.log('Snowfall visible');
msgPrinted = false;
@@ -60,7 +70,21 @@ function initializeCanvas() {
window.addEventListener('resize', () => resizeCanvas(container));
}
function removeCanvas() {
const canvas = document.getElementById('snowfallCanvas');
if (canvas) {
canvas.remove();
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
animationFrameId = null;
console.log('Animation frame canceled');
}
console.log('Canvas removed');
}
}
function resizeCanvas(container) {
if (!canvas) return;
const rect = container.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;
@@ -114,7 +138,7 @@ function updateSnowflakes() {
function animateSnowfall() {
drawSnowflakes();
updateSnowflakes();
requestAnimationFrame(animateSnowfall);
animationFrameId = requestAnimationFrame(animateSnowfall);
}
// initialize snowfall