init

Jellyfin.Plugin.Seasonals/Web/autumn.css

@@ -0,0 +1,155 @@
+.autumn-container {
+  display: block;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.leaf {
+  position: fixed;
+  top: -10%;
+  font-size: 1em;
+  color: #fff;
+  font-family: Arial, sans-serif;
+  text-shadow: 0 0 5px #000;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: default;
+  -webkit-animation-name: leaf-fall, leaf-shake;
+  -webkit-animation-duration: 7s, 4s;
+  -webkit-animation-timing-function: linear, ease-in-out;
+  -webkit-animation-iteration-count: infinite, infinite;
+  -webkit-user-select: none;
+  animation-name: leaf-fall, leaf-shake;
+  animation-duration: 7s, 4s;
+  animation-timing-function: linear, ease-in-out;
+  animation-iteration-count: infinite, infinite;
+}
+
+/* Class to disable rotation */
+.no-rotation {
+  --rotate-start: 0deg !important;
+  --rotate-end: 0deg !important;
+}
+
+@-webkit-keyframes leaf-fall {
+  0% {
+    top: -10%;
+  }
+
+  100% {
+    top: 100%;
+  }
+}
+
+@keyframes leaf-fall {
+  0% {
+    top: -10%;
+  }
+
+  100% {
+    top: 100%;
+  }
+}
+
+@-webkit-keyframes leaf-shake {
+  0%, 100% {
+    -webkit-transform: translateX(0) rotate(var(--rotate-start, -20deg));
+  }
+  50% {
+    -webkit-transform: translateX(80px) rotate(var(--rotate-end, 20deg));
+  }
+}
+
+@keyframes leaf-shake {
+  0%, 100% {
+    transform: translateX(0) rotate(var(--rotate-start, -20deg));
+  }
+  50% {
+    transform: translateX(80px) rotate(var(--rotate-end, 20deg));
+  }
+}
+
+.leaf:nth-of-type(0) {
+  left: 0%;
+  animation-delay: 0s, 0s;
+  --rotate-start: -25deg;
+  --rotate-end: 22deg;
+}
+
+.leaf:nth-of-type(1) {
+  left: 10%;
+  animation-delay: 1s, 0.5s;
+  --rotate-start: -32deg;
+  --rotate-end: 35deg;
+}
+
+.leaf:nth-of-type(2) {
+  left: 20%;
+  animation-delay: 6s, 1s;
+  --rotate-start: -28deg;
+  --rotate-end: 28deg;
+}
+
+.leaf:nth-of-type(3) {
+  left: 30%;
+  animation-delay: 4s, 1.5s;
+  --rotate-start: -38deg;
+  --rotate-end: 32deg;
+}
+
+.leaf:nth-of-type(4) {
+  left: 40%;
+  animation-delay: 2s, 0.8s;
+  --rotate-start: -22deg;
+  --rotate-end: 38deg;
+}
+
+.leaf:nth-of-type(5) {
+  left: 50%;
+  animation-delay: 8s, 2s;
+  --rotate-start: -35deg;
+  --rotate-end: 25deg;
+}
+
+.leaf:nth-of-type(6) {
+  left: 60%;
+  animation-delay: 6s, 1.2s;
+  --rotate-start: -40deg;
+  --rotate-end: 40deg;
+}
+
+.leaf:nth-of-type(7) {
+  left: 70%;
+  animation-delay: 2.5s, 0.3s;
+  --rotate-start: -30deg;
+  --rotate-end: 30deg;
+}
+
+.leaf:nth-of-type(8) {
+  left: 80%;
+  animation-delay: 1s, 1.8s;
+  --rotate-start: -26deg;
+  --rotate-end: 36deg;
+}
+
+.leaf:nth-of-type(9) {
+  left: 90%;
+  animation-delay: 3s, 0.7s;
+  --rotate-start: -34deg;
+  --rotate-end: 24deg;
+}
+
+.leaf:nth-of-type(10) {
+  left: 25%;
+  animation-delay: 2s, 2.3s;
+  --rotate-start: -29deg;
+  --rotate-end: 33deg;
+}
+
+.leaf:nth-of-type(11) {
+  left: 65%;
+  animation-delay: 4s, 1.4s;
+  --rotate-start: -37deg;
+  --rotate-end: 27deg;
+}

Jellyfin.Plugin.Seasonals/Web/autumn.js

@@ -0,0 +1,175 @@
+const leaves = true; // enable/disable leaves
+const randomLeaves = true; // enable random leaves
+const randomLeavesMobile = false; // enable random leaves on mobile devices
+const enableDiffrentDuration = true; // enable different duration for the random leaves
+const enableRotation = false; // enable/disable leaf rotation
+const leafCount = 25; // count of random extra leaves
+
+
+let msgPrinted = false; // flag to prevent multiple console messages
+
+// function to check and control the leaves
+function toggleAutumn() {
+  const autumnContainer = document.querySelector('.autumn-container');
+  if (!autumnContainer) 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 leaves if video/trailer player is active or dashboard is visible
+  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+    autumnContainer.style.display = 'none'; // hide leaves
+    if (!msgPrinted) {
+      console.log('Autumn hidden');
+      msgPrinted = true;
+    }
+  } else {
+    autumnContainer.style.display = 'block'; // show leaves
+    if (msgPrinted) {
+      console.log('Autumn visible');
+      msgPrinted = false;
+    }
+  }
+}
+
+// observe changes in the DOM
+const observer = new MutationObserver(toggleAutumn);
+
+// 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)
+});
+
+
+const images = [
+  "Seasonals/Resources/autumn_images/acorn1.png",
+  "Seasonals/Resources/autumn_images/acorn2.png",
+  "Seasonals/Resources/autumn_images/leaf1.png",
+  "Seasonals/Resources/autumn_images/leaf2.png",
+  "Seasonals/Resources/autumn_images/leaf3.png",
+  "Seasonals/Resources/autumn_images/leaf4.png",
+  "Seasonals/Resources/autumn_images/leaf5.png",
+  "Seasonals/Resources/autumn_images/leaf6.png",
+  "Seasonals/Resources/autumn_images/leaf7.png",
+  "Seasonals/Resources/autumn_images/leaf8.png",
+  "Seasonals/Resources/autumn_images/leaf9.png",
+  "Seasonals/Resources/autumn_images/leaf10.png",
+  "Seasonals/Resources/autumn_images/leaf11.png",
+  "Seasonals/Resources/autumn_images/leaf12.png",
+  "Seasonals/Resources/autumn_images/leaf13.png",
+  "Seasonals/Resources/autumn_images/leaf14.png",
+  "Seasonals/Resources/autumn_images/leaf15.png",
+];
+
+function addRandomLeaves(count) {
+  const autumnContainer = document.querySelector('.autumn-container'); // get the leave container
+  if (!autumnContainer) return; // exit if leave container is not found
+
+  console.log('Adding random leaves');
+
+  // Array of leave characters
+  for (let i = 0; i < count; i++) {
+    // create a new leave element
+    const leaveDiv = document.createElement('div');
+    leaveDiv.className = enableRotation ? "leaf" : "leaf no-rotation";
+
+    // pick a random leaf symbol
+    const imageSrc = images[Math.floor(Math.random() * images.length)];
+    const img = document.createElement("img");
+    img.src = imageSrc;
+
+    leaveDiv.appendChild(img);
+
+
+    // set random horizontal position, animation delay and size(uncomment lines to enable) 
+    const randomLeft = Math.random() * 100; // position (0% to 100%)
+    const randomAnimationDelay = Math.random() * 12; // delay for fall (0s to 12s)
+    const randomAnimationDelay2 = Math.random() * 4; // delay for shake+rotate (0s to 4s)
+
+    // apply styles
+    leaveDiv.style.left = `${randomLeft}%`;
+    leaveDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
+
+    // set random animation duration
+    if (enableDiffrentDuration) {
+      const randomAnimationDuration = Math.random() * 10 + 6; // fall duration (6s to 16s)
+      const randomAnimationDuration2 = Math.random() * 3 + 2; // shake+rotate duration (2s to 5s)
+      leaveDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
+    }
+
+    // set random rotation angles (only if rotation is enabled)
+    if (enableRotation) {
+      const randomRotateStart = -(Math.random() * 40 + 20); // -20deg to -60deg
+      const randomRotateEnd = Math.random() * 40 + 20; // 20deg to 60deg
+      leaveDiv.style.setProperty('--rotate-start', `${randomRotateStart}deg`);
+      leaveDiv.style.setProperty('--rotate-end', `${randomRotateEnd}deg`);
+    } else {
+      // No rotation - set to 0 degrees
+      leaveDiv.style.setProperty('--rotate-start', '0deg');
+      leaveDiv.style.setProperty('--rotate-end', '0deg');
+    }
+
+    // add the leave to the container
+    autumnContainer.appendChild(leaveDiv);
+  }
+  console.log('Random leaves added');
+}
+
+// initialize standard leaves
+function initLeaves() {
+  const container = document.querySelector('.autumn-container') || document.createElement("div");
+
+  if (!document.querySelector('.autumn-container')) {
+    container.className = "autumn-container";
+    container.setAttribute("aria-hidden", "true");
+    document.body.appendChild(container);
+  }
+
+  for (let i = 0; i < 12; i++) {
+    const leafDiv = document.createElement("div");
+    leafDiv.className = enableRotation ? "leaf" : "leaf no-rotation";
+
+    const img = document.createElement("img");
+    img.src = images[Math.floor(Math.random() * images.length)];
+
+    // set random animation duration
+    if (enableDiffrentDuration) {
+      const randomAnimationDuration = Math.random() * 10 + 6; // fall duration (6s to 16s)
+      const randomAnimationDuration2 = Math.random() * 3 + 2; // shake+rotate duration (2s to 5s)
+      leafDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
+    }
+
+    // set random rotation angles for standard leaves too (only if rotation is enabled)
+    if (enableRotation) {
+      const randomRotateStart = -(Math.random() * 40 + 20); // -20deg to -60deg
+      const randomRotateEnd = Math.random() * 40 + 20; // 20deg to 60deg
+      leafDiv.style.setProperty('--rotate-start', `${randomRotateStart}deg`);
+      leafDiv.style.setProperty('--rotate-end', `${randomRotateEnd}deg`);
+    } else {
+      // No rotation - set to 0 degrees
+      leafDiv.style.setProperty('--rotate-start', '0deg');
+      leafDiv.style.setProperty('--rotate-end', '0deg');
+    }
+
+    leafDiv.appendChild(img);
+    container.appendChild(leafDiv);
+  }
+}
+
+// initialize leaves and add random leaves
+function initializeLeaves() {
+  if (!leaves) return; // exit if leaves are disabled
+  initLeaves();
+  toggleAutumn();
+
+  const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
+  if (randomLeaves && (screenWidth > 768 || randomLeavesMobile)) { // add random leaves only on larger screens, unless enabled for mobile devices
+    addRandomLeaves(leafCount);
+  }
+}
+
+initializeLeaves();

Jellyfin.Plugin.Seasonals/Web/christmas.css

@@ -0,0 +1,132 @@
+.christmas-container {
+  display: block;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.christmas {
+  position: fixed;
+  top: -10%;
+  font-size: 1em;
+  color: #fff;
+  font-family: Arial, sans-serif;
+  text-shadow: 0 0 5px #000;
+  user-select: none;
+  cursor: default;
+  -webkit-user-select: none;
+  -webkit-animation-name: christmas-fall, christmas-shake;
+  -webkit-animation-duration: 10s, 3s;
+  -webkit-animation-timing-function: linear, ease-in-out;
+  -webkit-animation-iteration-count: infinite, infinite;
+  animation-name: christmas-fall, christmas-shake;
+  animation-duration: 10s, 3s;
+  animation-timing-function: linear, ease-in-out;
+  animation-iteration-count: infinite, infinite;
+}
+
+@-webkit-keyframes christmas-fall {
+  0% {
+    top: -10%;
+  }
+
+  100% {
+    top: 100%;
+  }
+}
+
+@-webkit-keyframes christmas-shake {
+
+  0%,
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  50% {
+    -webkit-transform: translateX(80px);
+    transform: translateX(80px);
+  }
+}
+
+@keyframes christmas-fall {
+  0% {
+    top: -10%;
+  }
+
+  100% {
+    top: 100%;
+  }
+}
+
+@keyframes christmas-shake {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  50% {
+    transform: translateX(80px);
+  }
+}
+
+.christmas:nth-of-type(0) {
+  left: 0%;
+  animation-delay: 0s, 0s;
+}
+
+.christmas:nth-of-type(1) {
+  left: 10%;
+  animation-delay: 1s, 1s;
+}
+
+.christmas:nth-of-type(2) {
+  left: 20%;
+  animation-delay: 6s, 0.5s;
+}
+
+.christmas:nth-of-type(3) {
+  left: 30%;
+  animation-delay: 4s, 2s;
+}
+
+.christmas:nth-of-type(4) {
+  left: 40%;
+  animation-delay: 2s, 2s;
+}
+
+.christmas:nth-of-type(5) {
+  left: 50%;
+  animation-delay: 8s, 3s;
+}
+
+.christmas:nth-of-type(6) {
+  left: 60%;
+  animation-delay: 6s, 2s;
+}
+
+.christmas:nth-of-type(7) {
+  left: 70%;
+  animation-delay: 2.5s, 1s;
+}
+
+.christmas:nth-of-type(8) {
+  left: 80%;
+  animation-delay: 1s, 0s;
+}
+
+.christmas:nth-of-type(9) {
+  left: 90%;
+  animation-delay: 3s, 1.5s;
+}
+
+.christmas:nth-of-type(10) {
+  left: 25%;
+  animation-delay: 2s, 0s;
+}
+
+.christmas:nth-of-type(11) {
+  left: 65%;
+  animation-delay: 4s, 2.5s;
+}

Jellyfin.Plugin.Seasonals/Web/christmas.js

@@ -0,0 +1,124 @@
+const christmas = true; // enable/disable christmas
+const randomChristmas = true; // enable random Christmas
+const randomChristmasMobile = false; // enable random Christmas on mobile devices
+const enableDiffrentDuration = true; // enable different duration for the random Christmas symbols
+const christmasCount = 25; // count of random extra christmas
+
+
+let msgPrinted = false; // flag to prevent multiple console messages
+
+// function to check and control the christmas
+function toggleChristmas() {
+  const christmasContainer = document.querySelector('.christmas-container');
+  if (!christmasContainer) 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 christmas if video/trailer player is active or dashboard is visible
+  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+    christmasContainer.style.display = 'none'; // hide christmas
+    if (!msgPrinted) {
+      console.log('Christmas hidden');
+      msgPrinted = true;
+    }
+  } else {
+    christmasContainer.style.display = 'block'; // show christmas
+    if (msgPrinted) {
+      console.log('Christmas visible');
+      msgPrinted = false;
+    }
+  }
+}
+
+// observe changes in the DOM
+const observer = new MutationObserver(toggleChristmas);
+
+// 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)
+});
+
+// Array of christmas characters
+const christmasSymbols = ['❆', '🎁', '❄️', '🎁', '🎅', '🎊', '🎁', '🎉'];
+
+function addRandomChristmas(count) {
+  const christmasContainer = document.querySelector('.christmas-container'); // get the christmas container
+  if (!christmasContainer) return; // exit if christmas container is not found
+
+  console.log('Adding random christmas');
+
+  for (let i = 0; i < count; i++) {
+    // create a new christmas element
+    const christmasDiv = document.createElement('div');
+    christmasDiv.classList.add('christmas');
+
+    // pick a random christmas symbol
+    christmasDiv.textContent = christmasSymbols[Math.floor(Math.random() * christmasSymbols.length)];
+
+    // set random horizontal position, animation delay and size(uncomment lines to enable) 
+    const randomLeft = Math.random() * 100; // position (0% to 100%)
+    const randomAnimationDelay = Math.random() * 12 + 8; // delay (8s to 12s)
+    const randomAnimationDelay2 = Math.random() * 5 + 3; // delay (0s to 5s)
+
+    // apply styles
+    christmasDiv.style.left = `${randomLeft}%`;
+    christmasDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
+
+    // set random animation duration
+    if (enableDiffrentDuration) {
+      const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
+      const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
+      christmasDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
+    }
+
+    // add the christmas to the container
+    christmasContainer.appendChild(christmasDiv);
+  }
+  console.log('Random christmas added');
+}
+
+// initialize standard christmas
+function initChristmas() {
+  const christmasContainer = document.querySelector('.christmas-container') || document.createElement("div");
+
+  if (!document.querySelector('.christmas-container')) {
+    christmasContainer.className = "christmas-container";
+    christmasContainer.setAttribute("aria-hidden", "true");
+    document.body.appendChild(christmasContainer);
+  }
+
+  // create the 12 standard christmas
+  for (let i = 0; i < 12; i++) {
+    const christmasDiv = document.createElement('div');
+    christmasDiv.className = 'christmas';
+    christmasDiv.textContent = christmasSymbols[Math.floor(Math.random() * christmasSymbols.length)];
+
+    // set random animation duration
+    if (enableDiffrentDuration) {
+      const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
+      const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
+      christmasDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
+    }
+
+    christmasContainer.appendChild(christmasDiv);
+  }
+}
+
+// initialize christmas and add random christmas symbols
+function initializeChristmas() {
+  if (!christmas) return; // exit if christmas is disabled
+  initChristmas();
+  toggleChristmas();
+
+  const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
+  if (randomChristmas && (screenWidth > 768 || randomChristmasMobile)) { // add random christmas only on larger screens, unless enabled for mobile devices
+    addRandomChristmas(christmasCount);
+  }
+}
+
+initializeChristmas();

Jellyfin.Plugin.Seasonals/Web/easter.css

@@ -0,0 +1,152 @@
+.easter-container {
+    display: block;
+    pointer-events: none;
+    z-index: 0;
+    overflow: hidden;
+}
+
+.hopping-rabbit {
+    position: fixed;
+    bottom: 10px;
+    width: 70px;
+    overflow: hidden;
+    pointer-events: none;
+}
+
+
+@media (max-width: 768px) {
+    .hopping-rabbit {
+        width: 60px;
+    }
+}
+
+
+.easter {
+    position: fixed;
+    top: -10%;
+    font-size: 1em;
+    color: #fff;
+    font-family: Arial, sans-serif;
+    text-shadow: 0 0 5px #000;
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: default;
+    -webkit-animation-name: easter-fall, easter-shake;
+    -webkit-animation-timing-function: linear, ease-in-out;
+    -webkit-animation-iteration-count: infinite, infinite;
+    animation-name: easter-fall, easter-shake;
+    animation-timing-function: linear, ease-in-out;
+    animation-iteration-count: infinite, infinite;
+}
+
+.easter img {
+    height: auto;
+    width: 20px;
+}
+
+@-webkit-keyframes easter-fall {
+    0% {
+        top: -10%;
+    }
+
+    100% {
+        top: 100%;
+    }
+}
+
+@-webkit-keyframes easter-shake {
+
+    0%,
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+
+    50% {
+        -webkit-transform: translateX(80px);
+        transform: translateX(80px);
+    }
+}
+
+@keyframes easter-fall {
+    0% {
+        top: -10%;
+    }
+
+    100% {
+        top: 100%;
+    }
+}
+
+@keyframes easter-shake {
+
+    0%,
+    100% {
+        transform: translateX(0);
+    }
+
+    50% {
+        transform: translateX(80px);
+    }
+}
+
+
+.easter:nth-of-type(0) {
+    left: 0%;
+    animation-delay: 0s, 0s;
+}
+
+.easter:nth-of-type(1) {
+    left: 10%;
+    animation-delay: 1s, 1s;
+}
+
+.easter:nth-of-type(2) {
+    left: 20%;
+    animation-delay: 6s, 0.5s;
+}
+
+.easter:nth-of-type(3) {
+    left: 30%;
+    animation-delay: 4s, 2s;
+}
+
+.easter:nth-of-type(4) {
+    left: 40%;
+    animation-delay: 2s, 2s;
+}
+
+.easter:nth-of-type(5) {
+    left: 50%;
+    animation-delay: 8s, 3s;
+}
+
+.easter:nth-of-type(6) {
+    left: 60%;
+    animation-delay: 6s, 2s;
+}
+
+.easter:nth-of-type(7) {
+    left: 70%;
+    animation-delay: 2.5s, 1s;
+}
+
+.easter:nth-of-type(8) {
+    left: 80%;
+    animation-delay: 1s, 0s;
+}
+
+.easter:nth-of-type(9) {
+    left: 90%;
+    animation-delay: 3s, 1.5s;
+}
+
+.easter:nth-of-type(10) {
+    left: 25%;
+    animation-delay: 2s, 0s;
+}
+
+.easter:nth-of-type(11) {
+    left: 65%;
+    animation-delay: 4s, 2.5s;
+}

Jellyfin.Plugin.Seasonals/Web/easter.js

@@ -0,0 +1,241 @@
+const easter = true; // enable/disable easter
+const randomEaster = true; // enable random easter
+const randomEasterMobile = false; // enable random easter on mobile devices
+const enableDiffrentDuration = true; // enable different duration for the random easter
+const easterEggCount = 20; // count of random extra easter
+
+const bunny = true; // enable/disable hopping bunny
+const bunnyDuration = 12000; // duration of the bunny animation in ms
+const hopHeight = 12; // height of the bunny hops in px
+const minBunnyRestTime = 2000; // minimum time the bunny rests in ms
+const maxBunnyRestTime = 5000; // maximum time the bunny rests in ms
+
+
+let msgPrinted = false; // flag to prevent multiple console messages
+let animationFrameId;
+
+// function to check and control the easter
+function toggleEaster() {
+    const easterContainer = document.querySelector('.easter-container');
+    if (!easterContainer) 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 easter if video/trailer player is active or dashboard is visible
+    if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+        easterContainer.style.display = 'none'; // hide easter
+        if (animationFrameId) {
+            cancelAnimationFrame(animationFrameId);
+            animationFrameId = null;
+        }
+        if (!msgPrinted) {
+            console.log('Easter hidden');
+            msgPrinted = true;
+        }
+    } else {
+        easterContainer.style.display = 'block'; // show easter
+        if (!animationFrameId) {
+            animateRabbit(); // start animation
+        }
+        if (msgPrinted) {
+            console.log('Easter visible');
+            msgPrinted = false;
+        }
+    }
+}
+
+// observe changes in the DOM
+const observer = new MutationObserver(toggleEaster);
+
+// 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)
+});
+
+
+const images = [
+    "Seasonals/Resources/easter_images/egg_1.png",
+    "Seasonals/Resources/easter_images/egg_2.png",
+    "Seasonals/Resources/easter_images/egg_3.png",
+    "Seasonals/Resources/easter_images/egg_4.png",
+    "Seasonals/Resources/easter_images/egg_5.png",
+    "Seasonals/Resources/easter_images/egg_6.png",
+    "Seasonals/Resources/easter_images/egg_7.png",
+    "Seasonals/Resources/easter_images/egg_8.png",
+    "Seasonals/Resources/easter_images/egg_9.png",
+    "Seasonals/Resources/easter_images/egg_10.png",
+    "Seasonals/Resources/easter_images/egg_11.png",
+    "Seasonals/Resources/easter_images/egg_12.png",
+];
+const  rabbit = "Seasonals/Resources/easter_images/easter-bunny.png";
+
+function addRandomEaster(count) {
+    const easterContainer = document.querySelector('.easter-container'); // get the leave container
+    if (!easterContainer) return; // exit if leave container is not found
+
+    console.log('Adding random easter eggs');
+
+    // Array of leave characters
+    for (let i = 0; i < count; i++) {
+        // create a new leave element
+        const eggDiv = document.createElement('div');
+        eggDiv.className = "easter";
+
+        // pick a random easter symbol
+        const imageSrc = images[Math.floor(Math.random() * images.length)];
+        const img = document.createElement("img");
+        img.src = imageSrc;
+
+        eggDiv.appendChild(img);
+
+        // set random horizontal position, animation delay and size(uncomment lines to enable) 
+        const randomLeft = Math.random() * 100; // position (0% to 100%)
+        const randomAnimationDelay = Math.random() * 12; // delay (0s to 12s)
+        const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
+
+        // apply styles
+        eggDiv.style.left = `${randomLeft}%`;
+        eggDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
+
+        // set random animation duration
+        if (enableDiffrentDuration) {
+            const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
+            const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
+            eggDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
+        }
+
+
+        // add the leave to the container
+        easterContainer.appendChild(eggDiv);
+    }
+    console.log('Random easter added');
+}
+
+function addHoppingRabbit() {
+    if (!bunny) return; // Nur ausführen, wenn Easter aktiviert ist
+
+    const easterContainer = document.querySelector('.easter-container');
+    if (!easterContainer) return;
+
+    // Hase erstellen
+    const rabbitImg = document.createElement("img");
+    rabbitImg.id = "rabbit";
+    rabbitImg.src = rabbit; // Bildpfad aus der bestehenden Definition
+    rabbitImg.alt = "Hoppelnder Osterhase";
+
+    // CSS-Klassen hinzufügen
+    rabbitImg.classList.add("hopping-rabbit");
+
+    easterContainer.appendChild(rabbitImg);
+
+    rabbitImg.style.bottom = (hopHeight / 2 + 6) + "px";
+
+    animateRabbit(rabbitImg);
+}
+
+function animateRabbit(rabbitElement) {
+    const rabbit = rabbitElement || document.querySelector('#rabbit');
+    if (!rabbit) return;
+
+    let startTime = null;
+
+    function animationStep(timestamp) {
+        if (!startTime) {
+            startTime = timestamp;
+
+            // random start position and direction
+            const startFromLeft = Math.random() >= 0.5;
+            rabbit.startX = startFromLeft ? -10 : 110;
+            rabbit.endX = startFromLeft ? 110 : -10;
+            rabbit.direction = startFromLeft ? 1 : -1;
+
+            // mirror the rabbit image if it starts from the right
+            rabbit.style.transform = startFromLeft ? '' : 'scaleX(-1)';
+        }
+        const progress = timestamp - startTime;
+
+        // calculate the horizontal position (linear interpolation)
+        const x = rabbit.startX + (progress / bunnyDuration) * (rabbit.endX - rabbit.startX);
+
+        // calculate the vertical position (sinus curve)
+        const y = Math.sin((progress / 500) * Math.PI) * hopHeight; // 500ms for one hop
+
+        // set the new position
+        rabbit.style.transform = `translate(${x}vw, ${y}px) scaleX(${rabbit.direction})`;
+
+        if (progress < bunnyDuration) {
+            animationFrameId = requestAnimationFrame(animationStep);
+        } else {
+            // let the bunny rest for a while before hiding easter eggs again
+            const pauseDuration = Math.random() * (maxBunnyRestTime - minBunnyRestTime) + minBunnyRestTime;
+            setTimeout(() => {
+                startTime = null;
+                animationFrameId = requestAnimationFrame(animationStep);
+            }, pauseDuration);
+        }
+    }
+
+    animationFrameId = requestAnimationFrame(animationStep);
+}
+
+
+// initialize standard easter
+function initEaster() {
+    const container = document.querySelector('.easter-container') || document.createElement("div");
+
+    if (!document.querySelector('.easter-container')) {
+        container.className = "easter-container";
+        container.setAttribute("aria-hidden", "true");
+        document.body.appendChild(container);
+    }
+
+    // shuffle the easter images
+    let currentIndex = images.length;
+    let randomIndex;
+    while (currentIndex != 0) {
+        randomIndex = Math.floor(Math.random() * currentIndex);
+        currentIndex--;
+        [images[currentIndex], images[randomIndex]] = [images[randomIndex], images[currentIndex]];
+    }
+
+    for (let i = 0; i < 12; i++) {
+        const eggDiv = document.createElement("div");
+        eggDiv.className = "easter";
+
+        const img = document.createElement("img");
+        img.src = images[i];
+
+        // set random animation duration
+        if (enableDiffrentDuration) {
+            const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
+            const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
+            eggDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
+        }
+
+        eggDiv.appendChild(img);
+        container.appendChild(eggDiv);
+    }
+
+    addHoppingRabbit();
+}
+
+
+// initialize easter and add random easter after the DOM is loaded
+function initializeEaster() {
+    if (!easter) return; // exit if easter are disabled
+    initEaster();
+    toggleEaster();
+
+    const screenWidth = window.innerWidth;
+    if (randomEaster && (screenWidth > 768 || randomEasterMobile)) { // add random easter only on larger screens, unless enabled for mobile devices
+        addRandomEaster(easterEggCount);
+    }
+}
+
+
+initializeEaster();

Jellyfin.Plugin.Seasonals/Web/fireworks.css

@@ -0,0 +1,63 @@
+.fireworks {
+  position: fixed;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.rocket-trail {
+  position: absolute;
+  left: var(--trailX);
+  top: var(--trailStartY);
+  width: 4px;
+
+  /* activate the following for rocket trail */
+  height: 60px;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+  filter: blur(2px);
+
+  /* activate the following for rocket trail as a point */
+  /*height: 4px;*/
+  /*background: white;*/
+  /*border-radius: 50%;
+  box-shadow: 0 0 8px 2px white;*/
+
+  animation: rocket-trail-animation 1s linear forwards;
+}
+
+@keyframes rocket-trail-animation {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(calc(var(--trailEndY) - var(--trailStartY)));
+    opacity: 0;
+  }
+}
+
+/* Animation for the particles */
+@keyframes fireworkParticle {
+  0% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(var(--x), var(--y));
+  }
+}
+
+.firework {
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  background: white;
+  border-radius: 50%;
+  animation: fireworkParticle 1.5s ease-out forwards;
+  filter: blur(1px);
+}

Jellyfin.Plugin.Seasonals/Web/fireworks.js

@@ -0,0 +1,161 @@
+const fireworks = true; // enable/disable fireworks
+const scrollFireworks = true; // enable fireworks to scroll with page content
+const particlesPerFirework = 50; // count of particles per firework
+const minFireworks = 3; // minimum number of simultaneous fireworks
+const maxFireworks = 6; // maximum number of simultaneous fireworks
+const intervalOfFireworks = 3200; // interval for the fireworks in milliseconds
+
+// array of color palettes for the fireworks
+const colorPalettes = [
+  ['#ff0000', '#ff7300', '#ff4500'], // red's
+  ['#0040ff', '#5a9bff', '#b0d9ff'], // blue's
+  ['#47ff00', '#8eff47', '#00ff7f'], // green's
+  ['#ffd700', '#c0c0c0', '#ff6347'], // gold, silver, red
+  ['#ff00ff', '#ff99ff', '#800080'], // magenta's
+  ['#ffef00', '#ffff99', '#ffd700'], // yellow's
+  ['#ff4500', '#ff6347', '#ff7f50'], // orange's
+  ['#e3e3e3', '#c0c0c0', '#7d7c7c'], // silver's
+];
+
+let msgPrinted = false; // flag to prevent multiple console messages
+let spacing = 0; // spacing between fireworks
+
+// function to check and control fireworks
+function toggleFirework() {
+  const fireworksContainer = document.querySelector('.fireworks');
+  if (!fireworksContainer) 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 fireworks if video/trailer player is active or dashboard is visible
+  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+    fireworksContainer.style.display = 'none'; // hide fireworks
+    if (!msgPrinted) {
+      console.log('Fireworks hidden');
+      clearInterval(fireworksInterval);
+      msgPrinted = true;
+    }
+  } else {
+    fireworksContainer.style.display = 'block'; // show fireworks
+    if (msgPrinted) {
+      console.log('Fireworks visible');
+      startFireworks();
+      msgPrinted = false;
+    }
+  }
+}
+
+// observe changes in the DOM
+const observer = new MutationObserver(toggleFirework);
+
+// 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 to create a rocket trail
+function createRocketTrail(x, startY, endY) {
+  const fireworkContainer = document.querySelector('.fireworks');
+  const rocketTrail = document.createElement('div');
+  rocketTrail.classList.add('rocket-trail');
+  fireworkContainer.appendChild(rocketTrail);
+
+  // Set position and animation
+  rocketTrail.style.setProperty('--trailX', `${x}px`);
+  rocketTrail.style.setProperty('--trailStartY', `${startY}px`);
+  rocketTrail.style.setProperty('--trailEndY', `${endY}px`);
+
+  // Remove the element after the animation
+  setTimeout(() => {
+    fireworkContainer.removeChild(rocketTrail);
+  }, 2000); // Duration of the animation
+}
+
+// Function for particle explosion
+function createExplosion(x, y) {
+  const fireworkContainer = document.querySelector('.fireworks');
+
+  // Choose a random color palette
+  const chosenPalette = colorPalettes[Math.floor(Math.random() * colorPalettes.length)];
+
+  for (let i = 0; i < particlesPerFirework; i++) {
+    const particle = document.createElement('div');
+    particle.classList.add('firework');
+
+    const angle = Math.random() * 2 * Math.PI; // Random direction
+    const distance = Math.random() * 180 + 100; // Random distance
+    const xOffset = Math.cos(angle) * distance;
+    const yOffset = Math.sin(angle) * distance;
+
+    particle.style.left = `${x}px`;
+    particle.style.top = `${y}px`;
+    particle.style.setProperty('--x', `${xOffset}px`);
+    particle.style.setProperty('--y', `${yOffset}px`);
+    particle.style.background = chosenPalette[Math.floor(Math.random() * chosenPalette.length)];
+
+    fireworkContainer.appendChild(particle);
+
+    // Remove particle after the animation
+    setTimeout(() => particle.remove(), 3000);
+  }
+}
+
+// Function for the firework with trail
+function launchFirework() {
+  // Random horizontal position
+  const x = Math.random() * window.innerWidth; // Any value across the entire width
+
+  // Trail starts at the bottom and ends at a random height around the middle
+  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
+  } else {
+    startY = window.innerHeight; // Bottom edge of the window
+    endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2; // Area around the middle
+  }
+
+  // Create trail
+  createRocketTrail(x, startY, endY);
+
+  // Create explosion
+  setTimeout(() => {
+    createExplosion(x, endY); // Explosion at the end height
+  }, 1000); // or 1200
+}
+
+// Start the firework routine
+function startFireworks() {
+  const fireworkContainer = document.querySelector('.fireworks') || document.createElement("div");
+
+  if (!document.querySelector('.fireworks')) {
+    fireworkContainer.className = "fireworks";
+    fireworkContainer.setAttribute("aria-hidden", "true");
+    document.body.appendChild(fireworkContainer);
+  }
+  
+  fireworksInterval = setInterval(() => {
+    const randomCount = Math.floor(Math.random() * maxFireworks) + minFireworks;
+    for (let i = 0; i < randomCount; i++) {
+      setTimeout(() => {
+        launchFirework();
+      }, i * 200); // 200ms delay between fireworks
+    }
+  }, intervalOfFireworks); // Interval between fireworks
+}
+
+// Initialize fireworks and add random fireworks
+function initializeFireworks() {
+  if (!fireworks) return; // exit if fireworks are disabled
+  startFireworks();
+  toggleFirework();
+}
+
+initializeFireworks();

Jellyfin.Plugin.Seasonals/Web/halloween.css

@@ -0,0 +1,146 @@
+.halloween-container {
+    display: block;
+    pointer-events: none;
+    z-index: 0;
+    overflow: hidden;
+}
+
+.halloween {
+    position: fixed;
+    bottom: -10%;
+    z-index: 0;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: default;
+    -webkit-animation-name: halloween-fall, halloween-shake;
+    -webkit-animation-duration: 10s, 3s;
+    -webkit-animation-timing-function: linear, ease-in-out;
+    -webkit-animation-iteration-count: infinite, infinite;
+    -webkit-animation-play-state: running, running;
+    animation-name: halloween-fall, halloween-shake;
+    animation-duration: 10s, 3s;
+    animation-timing-function: linear, ease-in-out;
+    animation-iteration-count: infinite, infinite;
+    animation-play-state: running, running
+}
+
+@-webkit-keyframes halloween-fall {
+    0% {
+        bottom: -10%
+    }
+
+    100% {
+        bottom: 100%
+    }
+}
+
+@-webkit-keyframes halloween-shake {
+
+    0%,
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0)
+    }
+
+    50% {
+        -webkit-transform: translateX(80px);
+        transform: translateX(80px)
+    }
+}
+
+@keyframes halloween-fall {
+    0% {
+        bottom: -10%
+    }
+
+    100% {
+        bottom: 100%
+    }
+}
+
+@keyframes halloween-shake {
+
+    0%,
+    100% {
+        transform: translateX(0)
+    }
+
+    50% {
+        transform: translateX(80px)
+    }
+}
+
+.halloween:nth-of-type(0) {
+    left: 1%;
+    -webkit-animation-delay: 0s, 0s;
+    animation-delay: 0s, 0s
+}
+
+.halloween:nth-of-type(1) {
+    left: 10%;
+    -webkit-animation-delay: 1s, 1s;
+    animation-delay: 1s, 1s
+}
+
+.halloween:nth-of-type(2) {
+    left: 20%;
+    -webkit-animation-delay: 6s, .5s;
+    animation-delay: 6s, .5s
+}
+
+.halloween:nth-of-type(3) {
+    left: 30%;
+    -webkit-animation-delay: 4s, 2s;
+    animation-delay: 4s, 2s
+}
+
+.halloween:nth-of-type(4) {
+    left: 40%;
+    -webkit-animation-delay: 2s, 2s;
+    animation-delay: 2s, 2s
+}
+
+.halloween:nth-of-type(5) {
+    left: 50%;
+    -webkit-animation-delay: 8s, 3s;
+    animation-delay: 8s, 3s
+}
+
+.halloween:nth-of-type(6) {
+    left: 60%;
+    -webkit-animation-delay: 6s, 2s;
+    animation-delay: 6s, 2s
+}
+
+.halloween:nth-of-type(7) {
+    left: 70%;
+    -webkit-animation-delay: 2.5s, 1s;
+    animation-delay: 2.5s, 1s
+}
+
+.halloween:nth-of-type(8) {
+    left: 80%;
+    -webkit-animation-delay: 1s, 0s;
+    animation-delay: 1s, 0s
+}
+
+.halloween:nth-of-type(9) {
+    left: 90%;
+    -webkit-animation-delay: 3s, 1.5s;
+    animation-delay: 3s, 1.5s
+}
+
+.halloween:nth-of-type(10) {
+    left: 25%;
+    -webkit-animation-delay: 2s, 0s;
+    animation-delay: 2s, 0s
+}
+
+.halloween:nth-of-type(11) {
+    left: 65%;
+    -webkit-animation-delay: 4s, 2.5s;
+    animation-delay: 4s, 2.5s
+}

Jellyfin.Plugin.Seasonals/Web/halloween.js

@@ -0,0 +1,137 @@
+const halloween = true; // enable/disable halloween
+const randomSymbols = true; // enable more random symbols
+const randomSymbolsMobile = false; // enable random symbols on mobile devices
+const enableDiffrentDuration = true; // enable different duration for the random halloween symbols
+const halloweenCount = 25; // count of random extra symbols
+
+let msgPrinted = false; // flag to prevent multiple console messages
+
+// function to check and control the halloween
+function toggleHalloween() {
+  const halloweenContainer = document.querySelector('.halloween-container');
+  if (!halloweenContainer) 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 halloween if video/trailer player is active or dashboard is visible
+  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+    halloweenContainer.style.display = 'none'; // hide halloween
+    if (!msgPrinted) {
+      console.log('Halloween hidden');
+      msgPrinted = true;
+    }
+  } else {
+    halloweenContainer.style.display = 'block'; // show halloween
+    if (msgPrinted) {
+      console.log('Halloween visible');
+      msgPrinted = false;
+    }
+  }
+}
+
+// observe changes in the DOM
+const observer = new MutationObserver(toggleHalloween);
+
+// 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)
+});
+
+
+const images = [
+  "Seasonals/Resources/halloween_images/ghost_20x20.png",
+  "Seasonals/Resources/halloween_images/bat_20x20.png",
+  "Seasonals/Resources/halloween_images/pumpkin_20x20.png",
+];
+
+function addRandomSymbols(count) {
+  const halloweenContainer = document.querySelector('.halloween-container'); // get the halloween container
+  if (!halloweenContainer) return; // exit if halloween container is not found
+
+  console.log('Adding random halloween symbols');
+
+
+  for (let i = 0; i < count; i++) {
+    // create a new halloween elements
+    const halloweenDiv = document.createElement("div");
+    halloweenDiv.className = "halloween";
+
+    // pick a random halloween symbol
+    const imageSrc = images[Math.floor(Math.random() * images.length)];
+    const img = document.createElement("img");
+    img.src = imageSrc;
+
+    halloweenDiv.appendChild(img);
+
+
+    // set random horizontal position, animation delay and size(uncomment lines to enable) 
+    const randomLeft = Math.random() * 100; // position (0% to 100%)
+    const randomAnimationDelay = Math.random() * 10; // delay (0s to 10s)
+    const randomAnimationDelay2 = Math.random() * 3; // delay (0s to 3s)
+
+    // apply styles
+    halloweenDiv.style.left = `${randomLeft}%`;
+    halloweenDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
+
+    // set random animation duration
+    if (enableDiffrentDuration) {
+      const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
+      const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
+      halloweenDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
+    }
+
+    // add the halloween to the container
+    halloweenContainer.appendChild(halloweenDiv);
+  }
+  console.log('Random halloween symbols added');
+}
+
+// create halloween objects
+function createHalloween() {
+  const container = document.querySelector('.halloween-container') || document.createElement("div");
+
+  if (!document.querySelector('.halloween-container')) {
+    container.className = "halloween-container";
+    container.setAttribute("aria-hidden", "true");
+    document.body.appendChild(container);
+  }
+
+  for (let i = 0; i < 4; i++) {
+    images.forEach(imageSrc => {
+      const halloweenDiv = document.createElement("div");
+      halloweenDiv.className = "halloween";
+
+      const img = document.createElement("img");
+      img.src = imageSrc;
+
+      // set random animation duration
+      if (enableDiffrentDuration) {
+        const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
+        const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
+        halloweenDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
+      }
+
+      halloweenDiv.appendChild(img);
+      container.appendChild(halloweenDiv);
+    });
+  }
+}
+
+// initialize halloween
+function initializeHalloween() {
+  if (!halloween) return; // exit if halloween is disabled
+  createHalloween();
+  toggleHalloween();
+
+  const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
+  if (randomSymbols && (screenWidth > 768 || randomSymbolsMobile)) { // add random halloweens only on larger screens, unless enabled for mobile devices
+    addRandomSymbols(halloweenCount);
+  }
+}
+
+initializeHalloween();

Jellyfin.Plugin.Seasonals/Web/hearts.css

@@ -0,0 +1,144 @@
+.hearts-container {
+    display: block;
+    pointer-events: none;
+    z-index: 0;
+    overflow: hidden;
+}
+
+.heart {
+    position: fixed;
+    bottom: -10%;
+    z-index: 0;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: default;
+    -webkit-animation-name: heart-fall, heart-shake;
+    -webkit-animation-duration: 14s, 5s;
+    -webkit-animation-timing-function: linear, ease-in-out;
+    -webkit-animation-iteration-count: infinite, infinite;
+    animation-name: heart-fall, heart-shake;
+    animation-duration: 14s, 5s;
+    animation-timing-function: linear, ease-in-out;
+    animation-iteration-count: infinite, infinite;
+}
+
+@-webkit-keyframes heart-fall {
+    0% {
+        bottom: -10%
+    }
+
+    100% {
+        bottom: 100%
+    }
+}
+
+@-webkit-keyframes heart-shake {
+
+    0%,
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0)
+    }
+
+    50% {
+        -webkit-transform: translateX(80px);
+        transform: translateX(80px)
+    }
+}
+
+@keyframes heart-fall {
+    0% {
+        bottom: -10%
+    }
+
+    100% {
+        bottom: 100%
+    }
+}
+
+@keyframes heart-shake {
+
+    0%,
+    100% {
+        transform: translateX(0)
+    }
+
+    50% {
+        transform: translateX(80px)
+    }
+}
+
+.heart:nth-of-type(0) {
+    left: 1%;
+    -webkit-animation-delay: 0s, 0s;
+    animation-delay: 0s, 0s
+}
+
+.heart:nth-of-type(1) {
+    left: 10%;
+    -webkit-animation-delay: 1s, 1s;
+    animation-delay: 1s, 1s
+}
+
+.heart:nth-of-type(2) {
+    left: 20%;
+    -webkit-animation-delay: 6s, .5s;
+    animation-delay: 6s, .5s
+}
+
+.heart:nth-of-type(3) {
+    left: 30%;
+    -webkit-animation-delay: 4s, 2s;
+    animation-delay: 4s, 2s
+}
+
+.heart:nth-of-type(4) {
+    left: 40%;
+    -webkit-animation-delay: 2s, 2s;
+    animation-delay: 2s, 2s
+}
+
+.heart:nth-of-type(5) {
+    left: 50%;
+    -webkit-animation-delay: 8s, 3s;
+    animation-delay: 8s, 3s
+}
+
+.heart:nth-of-type(6) {
+    left: 60%;
+    -webkit-animation-delay: 6s, 2s;
+    animation-delay: 6s, 2s
+}
+
+.heart:nth-of-type(7) {
+    left: 70%;
+    -webkit-animation-delay: 2.5s, 1s;
+    animation-delay: 2.5s, 1s
+}
+
+.heart:nth-of-type(8) {
+    left: 80%;
+    -webkit-animation-delay: 1s, 0s;
+    animation-delay: 1s, 0s
+}
+
+.heart:nth-of-type(9) {
+    left: 90%;
+    -webkit-animation-delay: 3s, 1.5s;
+    animation-delay: 3s, 1.5s
+}
+
+.heart:nth-of-type(10) {
+    left: 25%;
+    -webkit-animation-delay: 2s, 0s;
+    animation-delay: 2s, 0s
+}
+
+.heart:nth-of-type(11) {
+    left: 65%;
+    -webkit-animation-delay: 4s, 2.5s;
+    animation-delay: 4s, 2.5s
+}

Jellyfin.Plugin.Seasonals/Web/hearts.js

@@ -0,0 +1,126 @@
+const hearts = true; // enable/disable hearts
+const randomSymbols = true; // enable more random symbols
+const randomSymbolsMobile = false; // enable random symbols on mobile devices
+const enableDiffrentDuration = true; // enable different animation duration for random symbols
+const heartsCount = 25; // count of random extra symbols
+
+let msgPrinted = false; // flag to prevent multiple console messages
+
+// function to check and control the hearts
+function toggleHearts() {
+  const heartsContainer = document.querySelector('.hearts-container');
+  if (!heartsContainer) 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 hearts if video/trailer player is active or dashboard is visible
+  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+    heartsContainer.style.display = 'none'; // hide hearts
+    if (!msgPrinted) {
+      console.log('Hearts hidden');
+      msgPrinted = true;
+    }
+  } else {
+    heartsContainer.style.display = 'block'; // show hearts
+    if (msgPrinted) {
+      console.log('Hearts visible');
+      msgPrinted = false;
+    }
+  }
+}
+
+// observe changes in the DOM
+const observer = new MutationObserver(toggleHearts);
+
+// 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)
+});
+
+
+// Array of hearts characters
+const heartSymbols = ['❤️', '💕', '💞', '💓', '💗', '💖'];
+
+
+function addRandomSymbols(count) {
+  const heartsContainer = document.querySelector('.hearts-container'); // get the hearts container
+  if (!heartsContainer) return; // exit if hearts container is not found
+
+  console.log('Adding random heart symbols');
+
+  for (let i = 0; i < count; i++) {
+    // create a new hearts elements
+    const heartsDiv = document.createElement("div");
+    heartsDiv.className = "heart";
+
+    // pick a random hearts symbol
+    heartsDiv.textContent = heartSymbols[Math.floor(Math.random() * heartSymbols.length)];
+
+
+    // set random horizontal position, animation delay and size(uncomment lines to enable) 
+    const randomLeft = Math.random() * 100; // position (0% to 100%)
+    const randomAnimationDelay = Math.random() * 14; // delay (0s to 14s)
+    const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
+
+    // apply styles
+    heartsDiv.style.left = `${randomLeft}%`;
+    heartsDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
+
+    // set random animation duration
+    if (enableDiffrentDuration) {
+      const randomAnimationDuration = Math.random() * 16 + 12; // delay (12s to 16s)
+      const randomAnimationDuration2 = Math.random() * 7 + 3; // delay (3s to 7s)
+      heartsDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
+    }
+
+    // add the hearts to the container
+    heartsContainer.appendChild(heartsDiv);
+  }
+  console.log('Random hearts symbols added');
+}
+
+// create hearts objects
+function createHearts() {
+  const container = document.querySelector('.hearts-container') || document.createElement("div");
+
+  if (!document.querySelector('.hearts-container')) {
+    container.className = "hearts-container";
+    container.setAttribute("aria-hidden", "true");
+    document.body.appendChild(container);
+  }
+
+  for (let i = 0; i < 12; i++) {
+    const heartsDiv = document.createElement("div");
+    heartsDiv.className = "heart";
+    heartsDiv.textContent = heartSymbols[i % heartSymbols.length];
+
+    // set random animation duration
+    if (enableDiffrentDuration) {
+      const randomAnimationDuration = Math.random() * 16 + 12; // delay (12s to 16s)
+      const randomAnimationDuration2 = Math.random() * 7 + 3; // delay (3s to 7s)
+      heartsDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
+    }
+
+    container.appendChild(heartsDiv);
+  }
+}
+
+
+// initialize hearts
+function initializeHearts() {
+  if (!hearts) return; // exit if hearts is disabled
+  createHearts();
+  toggleHearts();
+
+  const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
+  if (randomSymbols && (screenWidth > 768 || randomSymbolsMobile)) { // add random heartss only on larger screens, unless enabled for mobile devices
+    addRandomSymbols(heartsCount);
+  }
+}
+
+initializeHearts();

Jellyfin.Plugin.Seasonals/Web/santa.css

@@ -0,0 +1,33 @@
+.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;
+}
+
+.santa {
+    position: fixed;
+    width: 220px;
+    height: auto;
+    z-index: 1000;
+    pointer-events: none;
+}
+
+.present {
+    position: fixed;
+    width: 15px;
+    height: auto;
+    z-index: 999;
+    pointer-events: none;
+}

Jellyfin.Plugin.Seasonals/Web/santa.js

@@ -0,0 +1,303 @@
+const santaIsFlying = 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)
+const santaSpeed = 10; // speed of santa in seconds (recommended values: 5000-15000)
+const santaSpeedMobile = 8; // speed of santa on mobile devices in seconds
+const maxSantaRestTime = 8; // maximum time santa rests in seconds
+const minSantaRestTime = 3; // minimum time santa rests in seconds
+const maxPresentFallSpeed = 5; // maximum speed of falling presents in seconds
+const minPresentFallSpeed = 2; // minimum speed of falling presents in seconds
+
+let msgPrinted = false; // flag to prevent multiple console messages
+let isMobile = false; // flag to detect mobile devices
+let canvas, ctx;  // canvas and context for drawing snowflakes
+let animationFrameId; // ID of the animation frame
+let animationFrameIdSanta; // ID of the animation frame for santa
+
+// 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 && !animationFrameIdSanta) {
+            initializeCanvas();
+            snowflakes = createSnowflakes(santaContainer);
+            animateAll();
+        }
+
+        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() {
+    if (document.getElementById('snowfallCanvas')) {
+        console.warn('Canvas already exists.');
+        return;
+    }
+
+    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');
+        }
+        if (animationFrameIdSanta) {
+            cancelAnimationFrame(animationFrameIdSanta);
+            animationFrameIdSanta = null;
+            console.log('Santa 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() * 0.6 + 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;
+    });
+}
+
+// credits: flaticon.com
+const presentImages = [
+    'Seasonals/Resources/santa_images/gift1.png',
+    'Seasonals/Resources/santa_images/gift2.png',
+    'Seasonals/Resources/santa_images/gift3.png',
+    'Seasonals/Resources/santa_images/gift4.png',
+    'Seasonals/Resources/santa_images/gift5.png',
+    'Seasonals/Resources/santa_images/gift6.png',
+    'Seasonals/Resources/santa_images/gift7.png',
+    'Seasonals/Resources/santa_images/gift8.png',
+];
+
+// credits: https://www.animatedimages.org/img-animated-santa-claus-image-0420-85884.htm
+const santaImage = 'Seasonals/Resources/santa_images/santa.gif';
+
+
+function createSantaElement() {
+    const santa = document.createElement('img');
+    santa.src = santaImage;
+    santa.classList.add('santa');
+    const santaContainer = document.querySelector('.santa-container');
+    santaContainer.appendChild(santa);
+}
+
+function dropPresent(santa, fromLeft) {
+    const presentSrc = presentImages[Math.floor(Math.random() * presentImages.length)];
+    const present = document.createElement('img');
+    present.src = presentSrc;
+    present.classList.add('present');
+    santa.parentElement.appendChild(present);
+
+    // Get Santa's position
+    const santaRect = santa.getBoundingClientRect();
+    present.style.left = fromLeft ? `${santaRect.left}px` : `${santaRect.left + santaRect.width - 15}px`;
+    present.style.top = `${santaRect.bottom - 50}px`;
+
+    // Start falling
+    const duration = Math.random() * (maxPresentFallSpeed - minPresentFallSpeed) + minPresentFallSpeed;
+    present.style.transition = `top ${duration}s linear`;
+    requestAnimationFrame(() => {
+        present.style.top = `${window.innerHeight}px`;
+    });
+
+    // Remove from DOM after animation
+    present.addEventListener('transitionend', () => {
+        present.remove();
+    });
+}
+
+function reloadSantaGif() {
+    const santa = document.querySelector('.santa');
+    const src = santa.src;
+    santa.src = '';
+    santa.src = src;
+}
+
+function animateSanta() {
+    const santa = document.querySelector('.santa');
+    
+    function startAnimation() {
+        const santaHeight = santa.offsetHeight;
+        if (santaHeight === 0) {
+            setTimeout(startAnimation, 100);
+            return;
+        }
+        // console.log('Santa height: ', santaHeight);
+
+        const screenWidth = window.innerWidth;
+        const screenHeight = window.innerHeight;
+        const fromLeft = Math.random() < 0.5;
+        const startX = fromLeft ? -220 : screenWidth + 220;
+        const endX = fromLeft ? screenWidth + 220 : -220;
+        const startY = Math.random() * (screenHeight / 5) + santaHeight; // Restrict to upper screen
+        const endY = Math.random() * (screenHeight / 5) + santaHeight; // Restrict to upper screen
+        const angle = Math.random() * 16 - 8; // -8 to 8 degrees
+
+        santa.style.left = `${startX}px`;
+        santa.style.top = `${startY}px`;
+        santa.style.transform = `rotate(${angle}deg) ${fromLeft ? 'scaleX(-1)' : 'scaleX(1)'}`; // Mirror if not from left
+
+        let duration;
+        if (isMobile) {
+            duration = santaSpeedMobile * 1000;
+        } else {
+            duration = santaSpeed * 1000;
+        }
+        const deltaX = endX - startX;
+        const deltaY = endY - startY;
+        const startTime = performance.now();
+
+        function move() {
+            const currentTime = performance.now();
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+
+            const currentY = startY + deltaY * progress - 50 * Math.sin(progress * Math.PI);
+            santa.style.left = `${startX + deltaX * progress}px`;
+            santa.style.top = `${currentY}px`;
+
+            if (Math.random() < 0.05) { // 5% chance to drop a present
+                dropPresent(santa, fromLeft);
+            }
+
+            if (progress < 1) {
+                animationFrameIdSanta = requestAnimationFrame(move);
+            } else {
+                const pause = Math.random() * ((maxSantaRestTime - minSantaRestTime) * 1000) + minSantaRestTime * 1000;
+                setTimeout(animateSanta, pause);
+            }
+        }
+
+        animationFrameIdSanta = requestAnimationFrame(move);
+    }
+
+    reloadSantaGif();
+
+    startAnimation();
+}
+
+
+function animateAll() {
+    drawSnowflakes();
+    updateSnowflakes();
+    animationFrameId = requestAnimationFrame(animateAll);
+}
+
+// initialize santa
+function initializeSanta() {
+    if (!santaIsFlying) {
+        console.warn('Sante 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
+            isMobile = true;
+            console.log('Mobile device detected. Reducing snowflakes count.');
+            snowflakesCount = snowflakesCountMobile;
+        }
+
+        console.log('Santa enabled.');
+        initializeCanvas();
+        snowflakes = createSnowflakes(container);
+        createSantaElement();
+        animateAll();
+        animateSanta();
+    }
+}
+
+initializeSanta();

Jellyfin.Plugin.Seasonals/Web/seasonals.js

@@ -0,0 +1,206 @@
+// theme-configs.js
+
+// theme configurations
+const themeConfigs = {
+    snowflakes: {
+        css: 'Seasonals/Resources/snowflakes.css',
+        js: 'Seasonals/Resources/snowflakes.js',
+        containerClass: 'snowflakes'
+    },
+    snowfall: {
+        css: 'Seasonals/Resources/snowfall.css',
+        js: 'Seasonals/Resources/snowfall.js',
+        containerClass: 'snowfall-container'
+    },
+    snowstorm: {
+        css: 'Seasonals/Resources/snowstorm.css',
+        js: 'Seasonals/Resources/snowstorm.js',
+        containerClass: 'snowstorm-container'
+    },
+    fireworks: {
+        css: 'Seasonals/Resources/fireworks.css',
+        js: 'Seasonals/Resources/fireworks.js',
+        containerClass: 'fireworks'
+    },
+    halloween: {
+        css: 'Seasonals/Resources/halloween.css',
+        js: 'Seasonals/Resources/halloween.js',
+        containerClass: 'halloween-container'
+    },
+    hearts: {
+        css: 'Seasonals/Resources/hearts.css',
+        js: 'Seasonals/Resources/hearts.js',
+        containerClass: 'hearts-container'
+    },
+    christmas: {
+        css: 'Seasonals/Resources/christmas.css',
+        js: 'Seasonals/Resources/christmas.js',
+        containerClass: 'christmas-container'
+    },
+    santa: {
+        css: 'Seasonals/Resources/santa.css',
+        js: 'Seasonals/Resources/santa.js',
+        containerClass: 'santa-container'
+    },
+    autumn: {
+        css: 'Seasonals/Resources/autumn.css',
+        js: 'Seasonals/Resources/autumn.js',
+        containerClass: 'autumn-container'
+    },
+    easter: {
+        css: 'Seasonals/Resources/easter.css',
+        js: 'Seasonals/Resources/easter.js',
+        containerClass: 'easter-container'
+    },
+    summer: {
+        css: 'Seasonals/Resources/summer.css',
+        js: 'Seasonals/Resources/summer.js',
+        containerClass: 'summer-container'
+    },
+    spring: {
+        css: 'Seasonals/Resources/spring.css',
+        js: 'Seasonals/Resources/spring.js',
+        containerClass: 'spring-container'
+    },
+    none: {
+        containerClass: 'none'
+    },
+};
+
+// determine current theme based on the current month
+function determineCurrentTheme() {
+    const date = new Date();
+    const month = date.getMonth();  // 0-11
+    const day = date.getDate();     // 1-31
+
+    if ((month === 11 && day >= 28) || (month === 0 && day <= 5)) return 'fireworks'; //new year fireworks december 28 - january 5
+    
+    if (month === 1 && day >= 10 && day <= 18) return 'hearts'; // valentine's day february 10 - 18
+
+    if (month === 11 && day >= 22 && day <= 27) return 'santa'; // christmas december 22 - 27
+    // if (month === 11 && day >= 22 && day <= 27) return 'christmas'; // christmas december 22 - 27
+
+    if (month === 11) return 'snowflakes'; // snowflakes december
+    if (month === 0 || month === 1) return 'snowfall'; // snow january, february
+    // if (month === 0 || month === 1) return 'snowstorm'; // snow january, february
+    
+    if ((month === 2 && day >= 25) || (month === 3 && day <= 25)) return 'easter'; // easter march 25 - april 25
+    
+    //NOT IMPLEMENTED YET
+    //if (month >= 2 && month <= 4) return 'spring';  // spring march, april, may
+
+    //NOT IMPLEMENTED YET
+    //if (month >= 5 && month <= 7) return 'summer';  // summer june, july, august
+
+    if ((month === 9 && day >= 24) || (month === 10 && day <= 5)) return 'halloween'; // halloween october 24 - november 5
+
+    if (month >= 8 && month <= 10) return 'autumn'; // autumn september, october, november
+
+    return 'none'; // Fallback (nothing)
+}
+
+// load theme csss
+function loadThemeCSS(cssPath) {
+    if (!cssPath) return;
+
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = cssPath;
+
+    link.onerror = () => {
+        console.error(`Failed to load CSS: ${cssPath}`);
+    };
+
+    document.body.appendChild(link);
+    console.log(`CSS file "${cssPath}" loaded.`);
+}
+
+// load theme js
+function loadThemeJS(jsPath) {
+    if (!jsPath) return;
+
+    const script = document.createElement('script');
+    script.src = jsPath;
+
+    script.onerror = () => {
+        console.error(`Failed to load JS: ${jsPath}`);
+    };
+
+    document.body.appendChild(script);
+    console.log(`JS file "${jsPath}" loaded.`);
+}
+
+// update theme container class name
+function updateThemeContainer(containerClass) {
+    // Create container if it doesn't exist
+    let container = document.querySelector('.seasonals-container');
+    if (!container) {
+        container = document.createElement('div');
+        container.className = 'seasonals-container';
+        document.body.appendChild(container);
+    }
+    
+    container.className = `seasonals-container ${containerClass}`;
+    console.log(`Seasonals-Container class updated to "${containerClass}".`);
+}
+
+function removeSelf() {
+    const script = document.currentScript;
+    if (script) script.parentNode.removeChild(script);
+    console.log('External script removed:', script);
+}
+
+// initialize theme
+async function initializeTheme() {
+    let automateThemeSelection = true;
+    let defaultTheme = 'none';
+
+    try {
+        const response = await fetch('/Seasonals/Config');
+        if (response.ok) {
+            const config = await response.json();
+            automateThemeSelection = config.automateSeasonSelection;
+            defaultTheme = config.selectedSeason;
+        } else {
+            console.error('Failed to fetch Seasonals config');
+        }
+    } catch (error) {
+        console.error('Error fetching Seasonals config:', error);
+    }
+
+    let currentTheme;
+    if (!automateThemeSelection) {
+        currentTheme = defaultTheme;
+    } else {
+        currentTheme = determineCurrentTheme();
+    }
+
+    console.log(`Selected theme: ${currentTheme}`);
+
+    if (currentTheme === 'none') {
+        console.log('No theme selected.');
+        removeSelf();
+        return;
+    }
+
+    const theme = themeConfigs[currentTheme];
+    
+    if (!theme) {
+        console.error(`Theme "${currentTheme}" not found.`);
+        return;
+    }
+    updateThemeContainer(theme.containerClass);
+
+    if (theme.css) loadThemeCSS(theme.css);
+    if (theme.js) loadThemeJS(theme.js);
+
+    console.log(`Theme "${currentTheme}" loaded.`);
+
+    removeSelf();
+}
+
+
+//document.addEventListener('DOMContentLoaded', initializeTheme);
+document.addEventListener('DOMContentLoaded', () => {
+    initializeTheme();
+});

Jellyfin.Plugin.Seasonals/Web/snowfall.css

@@ -0,0 +1,17 @@
+.snowfall-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;
+}

Jellyfin.Plugin.Seasonals/Web/snowfall.js

@@ -0,0 +1,170 @@
+const snowfall = true; // enable/disable snowfall
+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 snowfall
+function toggleSnowfall() {
+  const snowfallContainer = document.querySelector('.snowfall-container');
+  if (!snowfallContainer) 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 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;
+    }
+  }
+}
+
+// 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() {
+  if (document.getElementById('snowfallCanvas')) {
+    console.warn('Canvas already exists.');
+    return;
+  }
+
+  const container = document.querySelector('.snowfall-container');
+  if (!container) {
+    console.error('Error: No element with class "snowfall-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 snowfall
+function initializeSnowfall() {
+  if (!snowfall) {
+    console.warn('Snowfall is disabled.');
+    return; // exit if snowfall is disabled
+  }
+  const container = document.querySelector('.snowfall-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();
+  }
+}
+
+initializeSnowfall();

Jellyfin.Plugin.Seasonals/Web/snowflakes.css

@@ -0,0 +1,132 @@
+.snowflakes {
+  display: block;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.snowflake {
+  position: fixed;
+  top: -10%;
+  font-size: 1em;
+  color: #fff;
+  font-family: Arial, sans-serif;
+  text-shadow: 0 0 5px #000;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: default;
+  -webkit-animation-name: heart-fall, heart-shake;
+  -webkit-animation-duration: 12s, 3s;
+  -webkit-animation-timing-function: linear, ease-in-out;
+  -webkit-animation-iteration-count: infinite, infinite;
+  animation-name: snowflakes-fall, snowflakes-shake;
+  animation-duration: 12s, 3s;
+  animation-timing-function: linear, ease-in-out;
+  animation-iteration-count: infinite, infinite;
+}
+
+@-webkit-keyframes snowflakes-fall {
+  0% {
+    top: -10%;
+  }
+
+  100% {
+    top: 100%;
+  }
+}
+
+@-webkit-keyframes snowflakes-shake {
+
+  0%,
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  50% {
+    -webkit-transform: translateX(80px);
+    transform: translateX(80px);
+  }
+}
+
+@keyframes snowflakes-fall {
+  0% {
+    top: -10%;
+  }
+
+  100% {
+    top: 100%;
+  }
+}
+
+@keyframes snowflakes-shake {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  50% {
+    transform: translateX(80px);
+  }
+}
+
+.snowflake:nth-of-type(0) {
+  left: 0%;
+  animation-delay: 0s, 0s;
+}
+
+.snowflake:nth-of-type(1) {
+  left: 10%;
+  animation-delay: 1s, 1s;
+}
+
+.snowflake:nth-of-type(2) {
+  left: 20%;
+  animation-delay: 6s, 0.5s;
+}
+
+.snowflake:nth-of-type(3) {
+  left: 30%;
+  animation-delay: 4s, 2s;
+}
+
+.snowflake:nth-of-type(4) {
+  left: 40%;
+  animation-delay: 2s, 2s;
+}
+
+.snowflake:nth-of-type(5) {
+  left: 50%;
+  animation-delay: 8s, 3s;
+}
+
+.snowflake:nth-of-type(6) {
+  left: 60%;
+  animation-delay: 6s, 2s;
+}
+
+.snowflake:nth-of-type(7) {
+  left: 70%;
+  animation-delay: 2.5s, 1s;
+}
+
+.snowflake:nth-of-type(8) {
+  left: 80%;
+  animation-delay: 1s, 0s;
+}
+
+.snowflake:nth-of-type(9) {
+  left: 90%;
+  animation-delay: 3s, 1.5s;
+}
+
+.snowflake:nth-of-type(10) {
+  left: 25%;
+  animation-delay: 2s, 0s;
+}
+
+.snowflake:nth-of-type(11) {
+  left: 65%;
+  animation-delay: 4s, 2.5s;
+}

Jellyfin.Plugin.Seasonals/Web/snowflakes.js

@@ -0,0 +1,132 @@
+const snowflakes = true; // enable/disable snowflakes
+const randomSnowflakes = true; // enable random Snowflakes
+const randomSnowflakesMobile = false; // enable random Snowflakes on mobile devices
+const enableColoredSnowflakes = true; // enable colored snowflakes on mobile devices
+const enableDiffrentDuration = true; // enable different animation duration for random symbols
+const snowflakeCount = 25; // count of random extra snowflakes
+
+
+let msgPrinted = false; // flag to prevent multiple console messages
+
+// function to check and control the snowflakes
+function toggleSnowflakes() {
+  const snowflakeContainer = document.querySelector('.snowflakes');
+  if (!snowflakeContainer) 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 snowflakes if video/trailer player is active or dashboard is visible
+  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+    snowflakeContainer.style.display = 'none'; // hide snowflakes
+    if (!msgPrinted) {
+      console.log('Snowflakes hidden');
+      msgPrinted = true;
+    }
+  } else {
+    snowflakeContainer.style.display = 'block'; // show snowflakes
+    if (msgPrinted) {
+      console.log('Snowflakes visible');
+      msgPrinted = false;
+    }
+  }
+}
+
+// observe changes in the DOM
+const observer = new MutationObserver(toggleSnowflakes);
+
+// 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 addRandomSnowflakes(count) {
+  const snowflakeContainer = document.querySelector('.snowflakes'); // get the snowflake container
+  if (!snowflakeContainer) return; // exit if snowflake container is not found
+
+  console.log('Adding random snowflakes');
+
+  const snowflakeSymbols = ['❅', '❆']; // some snowflake symbols
+  const snowflakeSymbolsMobile = ['❅', '❆', '❄']; // some snowflake symbols mobile version
+
+  for (let i = 0; i < count; i++) {
+    // create a new snowflake element
+    const snowflake = document.createElement('div');
+    snowflake.classList.add('snowflake');
+
+    // pick a random snowflake symbol
+    if (enableColoredSnowflakes) {
+      snowflake.textContent = snowflakeSymbolsMobile[Math.floor(Math.random() * snowflakeSymbolsMobile.length)];
+    } else {
+      snowflake.textContent = snowflakeSymbols[Math.floor(Math.random() * snowflakeSymbols.length)];
+    }
+
+    // set random horizontal position, animation delay and size(uncomment lines to enable) 
+    const randomLeft = Math.random() * 100; // position (0% to 100%)
+    const randomAnimationDelay = Math.random() * 8; // delay (0s to 8s)
+    const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
+
+    // apply styles
+    snowflake.style.left = `${randomLeft}%`;
+    snowflake.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
+
+    // set random animation duration
+    if (enableDiffrentDuration) {
+      const randomAnimationDuration = Math.random() * 14 + 10; // delay (10s to 14s)
+      const randomAnimationDuration2 = Math.random() * 5 + 3; // delay (3s to 5s)
+      snowflake.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
+    }
+
+    // add the snowflake to the container
+    snowflakeContainer.appendChild(snowflake);
+  }
+  console.log('Random snowflakes added');
+}
+
+// initialize standard snowflakes
+function initSnowflakes() {
+  const snowflakesContainer = document.querySelector('.snowflakes') || document.createElement("div");
+
+  if (!document.querySelector('.snowflakes')) {
+    snowflakesContainer.className = "snowflakes";
+    snowflakesContainer.setAttribute("aria-hidden", "true");
+    document.body.appendChild(snowflakesContainer);
+  }
+
+  // Array of snowflake characters
+  const snowflakeSymbols = ['❅', '❆'];
+
+  // create the 12 standard snowflakes
+  for (let i = 0; i < 12; i++) {
+    const snowflake = document.createElement('div');
+    snowflake.className = 'snowflake';
+    snowflake.textContent = snowflakeSymbols[i % 2]; // change between ❅ and ❆
+
+    // set random animation duration
+    if (enableDiffrentDuration) {
+      const randomAnimationDuration = Math.random() * 14 + 10; // delay (10s to 14s)
+      const randomAnimationDuration2 = Math.random() * 5 + 3; // delay (3s to 5s)
+      snowflake.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
+    }
+
+    snowflakesContainer.appendChild(snowflake);
+  }
+}
+
+// initialize snowflakes and add random snowflakes
+function initializeSnowflakes() {
+  if (!snowflakes) return; // exit if snowflakes are disabled
+  initSnowflakes();
+  toggleSnowflakes();
+
+  const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
+  if (randomSnowflakes && (screenWidth > 768 || randomSnowflakesMobile)) { // add random snowflakes only on larger screens, unless enabled for mobile devices
+    addRandomSnowflakes(snowflakeCount);
+  }
+}
+
+initializeSnowflakes();

Jellyfin.Plugin.Seasonals/Web/snowstorm.css

@@ -0,0 +1,7 @@
+.snowflake {
+    position: fixed;
+    background-color: rgba(255, 255, 255, 0.8);
+    border-radius: 50%;
+    pointer-events: none;
+    opacity: 0.7;
+}

Jellyfin.Plugin.Seasonals/Web/snowstorm.js

@@ -0,0 +1,173 @@
+const snowstorm = true; // enable/disable snowstorm
+let snowflakesCount = 500; // count of snowflakes (recommended values: 300-600)
+const snowflakesCountMobile = 250; // count of snowflakes on mobile devices
+const snowFallSpeed = 6; // speed of snowfall	(recommended values: 4-8)
+const horizontalWind = 4; // horizontal wind speed (recommended value: 4)
+const verticalVariation = 2; // vertical variation (recommended value: 2)
+
+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 snowstorm
+function toggleSnowstorm() {
+  const snowstormContainer = document.querySelector('.snowstorm-container');
+  if (!snowstormContainer) 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 snowstorm if video/trailer player is active or dashboard is visible
+  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+    snowstormContainer.style.display = 'none'; // hide snowstorm
+    removeCanvas();
+    if (!msgPrinted) {
+      console.log('Snowstorm hidden');
+      msgPrinted = true;
+    }
+  } else {
+    snowstormContainer.style.display = 'block'; // show snowstorm
+    if (!animationFrameId) {
+      initializeCanvas();
+      snowflakes = createSnowflakes(snowstormContainer);
+      animateSnowstorm();
+    } else {
+      console.warn('could not initialize snowfall: animation frame is already running');
+    }
+
+    if (msgPrinted) {
+      console.log('Snowstorm visible');
+      msgPrinted = false;
+    }
+  }
+}
+
+// observe changes in the DOM
+const observer = new MutationObserver(toggleSnowstorm);
+
+// 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() {
+  if (document.getElementById('snowfallCanvas')) {
+    console.warn('Canvas already exists.');
+    return;
+  }
+
+  const container = document.querySelector('.snowstorm-container');
+  if (!container) {
+    console.error('Error: No element with class "snowfall-container" found.');
+    return;
+  }
+
+  canvas = document.createElement('canvas');
+  canvas.id = 'snowstormCanvas';
+  container.appendChild(canvas);
+  ctx = canvas.getContext('2d');
+
+  resizeCanvas(container);
+  window.addEventListener('resize', () => resizeCanvas(container));
+}
+
+function removeCanvas() {
+  const canvas = document.getElementById('snowstormCanvas');
+  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,
+    fallspeed: Math.random() * snowFallSpeed + 2,
+    horizontal: Math.random() * horizontalWind * 2 - horizontalWind,
+    vertical: Math.random() * verticalVariation * 2 - verticalVariation,
+  }));
+}
+
+// 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.fallspeed + flake.vertical; // downwards movement
+    flake.x += flake.horizontal; // 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 animateSnowstorm() {
+  drawSnowflakes();
+  updateSnowflakes();
+  animationFrameId = requestAnimationFrame(animateSnowstorm);
+}
+
+// initialize snowfall
+function initializeSnowstorm() {
+  if (!snowstorm) {
+    console.warn('Snowstorm is disabled.');
+    return; // exit if snowfall is disabled
+  }
+  const container = document.querySelector('.snowstorm-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('Snowstorm enabled.');
+    initializeCanvas();
+    snowflakes = createSnowflakes(container);
+    animateSnowstorm();
+  }
+}
+
+initializeSnowstorm();