Refactor summer.js to streamline bubble and dust creation, enhance mobile handling, and remove unused randomization options

Jellyfin.Plugin.Seasonals/Web/summer.js

@@ -3,8 +3,7 @@ const config = window.SeasonalsPluginConfig?.Summer || {};
 const summer = config.EnableSummer !== undefined ? config.EnableSummer : true; // Enable/disable summer theme
 const bubbleCount = config.BubbleCount || 30; // Number of bubbles
 const dustCount = config.DustCount || 50; // Number of dust particles
-const randomSummer = config.EnableRandomSummer !== undefined ? config.EnableRandomSummer : true; // Enable random generating objects
+const symbolCountMobile = config.SymbolCountMobile !== undefined ? config.SymbolCountMobile : 2; // Devisor to reduce number of objects on mobile
-const randomSummerMobile = config.EnableRandomSummerMobile !== undefined ? config.EnableRandomSummerMobile : false; // Enable random generating objects on mobile
 const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // Randomize animation duration of bubbles and dust
 
 let msgPrinted = false;
@@ -39,34 +38,23 @@ observer.observe(document.body, {
   subtree: true,
   attributes: true
 });
-function createBubble(container, isDust = false) {
+
+function createBubble(container) {
     const bubble = document.createElement('div');
-    
+
-    if (isDust) {
+    bubble.classList.add('summer-bubble');
-        bubble.classList.add('summer-dust');
-    } else {
-        bubble.classList.add('summer-bubble');
-    }
 
     // Random horizontal position
     const randomLeft = Math.random() * 100;
     bubble.style.left = `${randomLeft}%`;
 
-    // Random size
+    // MARK: BUBBLE SIZE
-    if (!isDust) {
+    const size = Math.random() * 20 + 10; // 10-30px bubbles
-        // MARK: BUBBLE SIZE
+    bubble.style.width = `${size}px`;
-        const size = Math.random() * 20 + 10; // 10-30px bubbles
+    bubble.style.height = `${size}px`;
-        bubble.style.width = `${size}px`;
-        bubble.style.height = `${size}px`;
-    } else {
-        // MARK: DUST SIZE
-        const size = Math.random() * 3 + 1; // 1-4px dust
-        bubble.style.width = `${size}px`;
-        bubble.style.height = `${size}px`;
-    }
 
     // Animation properties
-    const duration = isDust ? (Math.random() * 20 + 10) : (Math.random() * 10 + 5); // Dust is slower
+    const duration = (Math.random() * 10 + 5);
     const delay = Math.random() * 10;
     
     if (enableDifferentDuration) {
@@ -77,19 +65,30 @@ function createBubble(container, isDust = false) {
     container.appendChild(bubble);
 }
 
-function addRandomSummerObjects() {
+function createDust(container) {
-    const container = document.querySelector('.summer-container');
+    const dust = document.createElement('div');
-    if (!container) return;
+
+    dust.classList.add('summer-dust');
+
+    // Random horizontal position
+    const randomLeft = Math.random() * 100;
+    dust.style.left = `${randomLeft}%`;
+
+    // MARK: DUST SIZE
+    const size = Math.random() * 3 + 1; // 1-4px dust
+    dust.style.width = `${size}px`;
+    dust.style.height = `${size}px`;
+
+    // Animation properties
+    const duration = (Math.random() * 20 + 10); // Dust is slower
+    const delay = Math.random() * 10;
     
-    // Add bubbles
+    if (enableDifferentDuration) {
-    for (let i = 0; i < bubbleCount; i++) {
+        dust.style.animationDuration = `${duration}s`;
-        createBubble(container, false);
-    }
-    
-    // Add some dust particles
-    for (let i = 0; i < dustCount; i++) {
-        createBubble(container, true);
     }
+    dust.style.animationDelay = `${delay}s`;
+
+    container.appendChild(dust);
 }
 
 function initSummerObjects() {
@@ -101,38 +100,18 @@ function initSummerObjects() {
         document.body.appendChild(container);
     }
     
-    // Initial bubbles/dust
+    let isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
-    for (let i = 0; i < 10; i++) {
+    let limitBubbles = isMobile ? Math.floor(bubbleCount / Math.max(1, symbolCountMobile)) : bubbleCount;
-        const bubble = document.createElement('div');
+    let limitDust = isMobile ? Math.floor(dustCount / Math.max(1, symbolCountMobile)) : dustCount;
-        const isDust = Math.random() > 0.5;
+
-        if (isDust) {
+    // Initial bubbles
-            bubble.classList.add('summer-dust');
+    for (let i = 0; i < limitBubbles; i++) {
-        } else {
+        createBubble(container);
-            bubble.classList.add('summer-bubble');
+    }
-        }
+    
-        
+    // Initial dust
-        const randomLeft = Math.random() * 100;
+    for (let i = 0; i < limitDust; i++) {
-        bubble.style.left = `${randomLeft}%`;
+        createDust(container);
-        
-        if (!isDust) {
-            // MARK: BUBBLE SIZE
-            const size = Math.random() * 20 + 10;
-            bubble.style.width = `${size}px`;
-            bubble.style.height = `${size}px`;
-        } else {
-            // MARK: DUST SIZE
-            const size = Math.random() * 3 + 1;
-            bubble.style.width = `${size}px`;
-            bubble.style.height = `${size}px`;
-        }
-        
-        const duration = isDust ? (Math.random() * 20 + 10) : (Math.random() * 10 + 5);
-        if (enableDifferentDuration) {
-           bubble.style.animationDuration = `${duration}s`;
-        }
-        
-        bubble.style.animationDelay = `-${Math.random() * 10}s`;
-        container.appendChild(bubble);
     }
 }
 
@@ -140,11 +119,6 @@ function initializeSummer() {
     if (!summer) return;
     initSummerObjects();
     toggleSummer();
-
-    const screenWidth = window.innerWidth;
-    if (randomSummer && (screenWidth > 768 || randomSummerMobile)) {
-        addRandomSummerObjects();
-    }
 }
 
 initializeSummer();