From 89ce903e8a181a9bbacfd2014d738023c612ac40 Mon Sep 17 00:00:00 2001
From: CodeDevMLH <145071728+CodeDevMLH@users.noreply.github.com>
Date: Sat, 28 Feb 2026 01:16:01 +0100
Subject: [PATCH] Refactor seasonal scripts to enhance mobile detection using
 matchMedia for responsive behavior

---
 Jellyfin.Plugin.Seasonals/Web/carnival.js      | 4 ++--
 Jellyfin.Plugin.Seasonals/Web/cherryblossom.js | 4 ++--
 Jellyfin.Plugin.Seasonals/Web/oktoberfest.js   | 4 ++--
 Jellyfin.Plugin.Seasonals/Web/rain.js          | 2 +-
 Jellyfin.Plugin.Seasonals/Web/snowfall.js      | 4 ++--
 Jellyfin.Plugin.Seasonals/Web/snowstorm.js     | 4 ++--
 Jellyfin.Plugin.Seasonals/Web/storm.js         | 2 +-
 7 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/Jellyfin.Plugin.Seasonals/Web/carnival.js b/Jellyfin.Plugin.Seasonals/Web/carnival.js
index c4eed40..b431b5a 100644
--- a/Jellyfin.Plugin.Seasonals/Web/carnival.js
+++ b/Jellyfin.Plugin.Seasonals/Web/carnival.js
@@ -167,8 +167,8 @@ function initCarnivalObjects(count) {
 function initializeCarnival() {
   if (!carnival) return;
 
-    const screenWidth = window.innerWidth;
-    const count = screenWidth > 768 ? carnivalCount : carnivalCountMobile;
+    const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
+    const count = !isMobile ? carnivalCount : carnivalCountMobile;
 
     initCarnivalObjects(count);
     toggleCarnival();
diff --git a/Jellyfin.Plugin.Seasonals/Web/cherryblossom.js b/Jellyfin.Plugin.Seasonals/Web/cherryblossom.js
index db08e7a..9be5568 100644
--- a/Jellyfin.Plugin.Seasonals/Web/cherryblossom.js
+++ b/Jellyfin.Plugin.Seasonals/Web/cherryblossom.js
@@ -84,8 +84,8 @@ function initObjects(count) {
 function initializeCherryBlossom() {
     if (!cherryBlossom) return;
 
-    const screenWidth = window.innerWidth;
-    const count = screenWidth > 768 ? petalCount : petalCountMobile;
+    const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
+    const count = !isMobile ? petalCount : petalCountMobile;
 
     initObjects(count);
     toggleCherryBlossom();
diff --git a/Jellyfin.Plugin.Seasonals/Web/oktoberfest.js b/Jellyfin.Plugin.Seasonals/Web/oktoberfest.js
index abc34e3..96e818f 100644
--- a/Jellyfin.Plugin.Seasonals/Web/oktoberfest.js
+++ b/Jellyfin.Plugin.Seasonals/Web/oktoberfest.js
@@ -67,8 +67,8 @@ function initializeOktoberfest() {
         document.body.appendChild(container);
     }
     
-    const screenWidth = window.innerWidth;
-    const count = screenWidth > 768 ? symbolCount : symbolCountMobile;
+    const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
+    const count = !isMobile ? symbolCount : symbolCountMobile;
 
     createOktoberfest(container, count);
 }
diff --git a/Jellyfin.Plugin.Seasonals/Web/rain.js b/Jellyfin.Plugin.Seasonals/Web/rain.js
index 544486d..3d285fb 100644
--- a/Jellyfin.Plugin.Seasonals/Web/rain.js
+++ b/Jellyfin.Plugin.Seasonals/Web/rain.js
@@ -1,7 +1,7 @@
 const config = window.SeasonalsPluginConfig?.Rain || {};
 
 const enabled = config.EnableRain !== undefined ? config.EnableRain : true; // enable/disable rain
-const isMobile = window.innerWidth <= 768;
+const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
 const elementCount = isMobile ? (config.RaindropCountMobile || 150) : (config.RaindropCount || 300); // count of raindrops
 const rainSpeed = config.RainSpeed !== undefined ? config.RainSpeed : 1.0; // speed of rain
 
diff --git a/Jellyfin.Plugin.Seasonals/Web/snowfall.js b/Jellyfin.Plugin.Seasonals/Web/snowfall.js
index a903c9c..a275981 100644
--- a/Jellyfin.Plugin.Seasonals/Web/snowfall.js
+++ b/Jellyfin.Plugin.Seasonals/Web/snowfall.js
@@ -181,8 +181,8 @@ function initializeSnowfall() {
   }
   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
+    const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches; // check if mobile device
+    if (isMobile) { // lower count of snowflakes on mobile devices
       console.log('Mobile device detected. Reducing snowflakes count.');
       snowflakesCount = snowflakesCountMobile;
     }
diff --git a/Jellyfin.Plugin.Seasonals/Web/snowstorm.js b/Jellyfin.Plugin.Seasonals/Web/snowstorm.js
index 64b2f97..35050bb 100644
--- a/Jellyfin.Plugin.Seasonals/Web/snowstorm.js
+++ b/Jellyfin.Plugin.Seasonals/Web/snowstorm.js
@@ -184,8 +184,8 @@ function initializeSnowstorm() {
   }
   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
+    const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
+    if (isMobile) { // lower count of snowflakes on mobile devices
       console.log('Mobile device detected. Reducing snowflakes count.');
       snowflakesCount = snowflakesCountMobile;
     }
diff --git a/Jellyfin.Plugin.Seasonals/Web/storm.js b/Jellyfin.Plugin.Seasonals/Web/storm.js
index 7432672..a4959ff 100644
--- a/Jellyfin.Plugin.Seasonals/Web/storm.js
+++ b/Jellyfin.Plugin.Seasonals/Web/storm.js
@@ -1,7 +1,7 @@
 const config = window.SeasonalsPluginConfig?.Storm || {};
 
 const enabled = config.EnableStorm !== undefined ? config.EnableStorm : true; // enable/disable storm
-const isMobile = window.innerWidth <= 768;
+const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
 const elementCount = isMobile ? (config.RaindropCountMobile || 150) : (config.RaindropCount || 300); // count of raindrops
 const enableLightning = config.EnableLightning !== undefined ? config.EnableLightning : true; // enable/disable lightning
 const rainSpeed = config.RainSpeed !== undefined ? config.RainSpeed : 1.0; // speed of rain