first files

seperate single seasonals/Seasonals-Santa/santa.css

@@ -0,0 +1,17 @@
+.santa-container {
+    position: fixed;
+    width: 100%;
+    height: 100vh;
+    background: transparent;
+    overflow: hidden;
+    pointer-events: none;
+}
+
+#snowfallCanvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}

seperate single seasonals/Seasonals-Santa/santa.js

@@ -0,0 +1,163 @@
+const santa = true; // enable/disable santa
+let snowflakesCount = 500; // count of snowflakes (recommended values: 300-600)
+const snowflakesCountMobile = 250; // count of snowflakes on mobile devices
+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 santa
+function toggleSnowfall() {
+  const santaContainer = document.querySelector('.santa-container');
+  if (!santaContainer) return;
+
+  const videoPlayer = document.querySelector('.videoPlayerContainer');
+  const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+  const isDashboard = document.body.classList.contains('dashboardDocument');
+  const hasUserMenu = document.querySelector('#app-user-menu');
+
+  // hide santa if video/trailer player is active or dashboard is visible
+  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+    santaContainer.style.display = 'none'; // hide santa
+    removeCanvas();
+    if (!msgPrinted) {
+      console.log('Snowfall hidden');
+      msgPrinted = true;
+    }
+  } else {
+    santaContainer.style.display = 'block'; // show santa
+    if (!animationFrameId) {
+      initializeCanvas();
+      snowflakes = createSnowflakes(santaContainer);
+      animateSnowfall();
+    } else {
+      console.warn('could not initialize santa: animation frame is already running');
+    }
+
+    if (msgPrinted) {
+      console.log('Snowfall visible');
+      msgPrinted = false;
+    }
+  }
+}
+
+// observe changes in the DOM
+const observer = new MutationObserver(toggleSnowfall);
+
+// start observation
+observer.observe(document.body, {
+  childList: true,    // observe adding/removing of child elements
+  subtree: true,      // observe all levels of the DOM tree
+  attributes: true    // observe changes to attributes (e.g. class changes)
+});
+
+
+function initializeCanvas() {
+  const container = document.querySelector('.santa-container');
+  if (!container) {
+    console.error('Error: No element with class "santa-container" found.');
+    return;
+  }
+
+  canvas = document.createElement('canvas');
+  canvas.id = 'snowfallCanvas';
+  container.appendChild(canvas);
+  ctx = canvas.getContext('2d');
+
+  resizeCanvas(container);
+  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;
+}
+
+function createSnowflakes(container) {
+  return Array.from({ length: snowflakesCount }, () => ({
+    x: Math.random() * canvas.width,
+    y: Math.random() * canvas.height,
+    radius: Math.random() * 1.2 + 1,
+    speed: Math.random() * snowFallSpeed + 1,
+    swing: Math.random() * 2 - 1,
+  }));
+}
+
+// Initialize snowflakes
+let snowflakes = [];
+
+function drawSnowflakes() {
+  if (!ctx || !canvas) {
+    console.error('Error: Canvas or context not found.');
+    return;
+  }
+  ctx.clearRect(0, 0, canvas.width, canvas.height); // empty canvas
+
+  snowflakes.forEach(flake => {
+    ctx.beginPath();
+    ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
+    ctx.fillStyle = 'white'; // color of snowflakes
+    ctx.fill();
+  });
+}
+
+function updateSnowflakes() {
+  snowflakes.forEach(flake => {
+    flake.y += flake.speed; // downwards movement
+    flake.x += flake.swing; // sideways movement
+
+    // reset snowflake if it reaches the bottom
+    if (flake.y > canvas.height) {
+      flake.y = 0;
+      flake.x = Math.random() * canvas.width; // with new random X position
+    }
+
+    // wrap snowflakes around the screen edges
+    if (flake.x > canvas.width) flake.x = 0;
+    if (flake.x < 0) flake.x = canvas.width;
+  });
+}
+
+function animateSnowfall() {
+  drawSnowflakes();
+  updateSnowflakes();
+  animationFrameId = requestAnimationFrame(animateSnowfall);
+}
+
+// initialize santa
+document.addEventListener('DOMContentLoaded', () => {
+  if (!santa){
+    console.warn('Snowfall is disabled.');
+    return; // exit if santa is disabled
+  }
+  const container = document.querySelector('.santa-container');
+  if (container) {
+    const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
+    if (screenWidth < 768) { // lower count of snowflakes on mobile devices
+      console.log('Mobile device detected. Reducing snowflakes count.');
+      snowflakesCount = snowflakesCountMobile;
+    }
+
+    console.log('Snowfall enabled.');
+    initializeCanvas();
+    snowflakes = createSnowflakes(container);
+    animateSnowfall();
+  }
+});

seperate single seasonals/Seasonals-Santa/test-site.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Santa Display</title>
+    <link rel="stylesheet" href="santa.css">
+    
+    <style>
+        body {
+            background-color: black;
+            overflow: hidden;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="santa-container"></div>
+    <script src="santa.js"></script>
+</body>
+
+</html>