Update app.js

app.js

@@ -1,130 +1,150 @@
 // ==UserScript==
 // @name         Spotify Dynamic UI/UX Animations
-// @namespace    http://tampermonkey.net/
-// @version      1.2
-// @description  Enhances Spotify web player with stylish dynamic animations for a premium UI/UX experience
-// @author       UI/UX Enthusiast
+// @namespace    https://violentmonkey.github.io/
+// @version      1.1
+// @description  Enhances Spotify web player with stylish dynamic animations and smooth transitions for a premium UI/UX experience
+// @author       UI/UX Enhancement Team
 // @match        https://open.spotify.com/*
-// @icon         https://www.spotify.com/favicon.ico
+// @icon         https://open.spotify.com/favicon.ico
 // @grant        GM_addStyle
+// @grant        GM_setValue
+// @grant        GM_getValue
 // @run-at       document-start
+// @updateURL    https://github.com/user/spotify-ui-enhancer/raw/main/spotify-dynamic-ui.user.js
+// @downloadURL  https://github.com/user/spotify-ui-enhancer/raw/main/spotify-dynamic-ui.user.js
 // ==/UserScript==
 
 (function() {
     'use strict';
 
-    // Custom CSS animations and transitions
+    // Check if we're on Spotify web player
+    if (!window.location.hostname.includes('spotify.com')) {
+        return;
+    }
+
+    // Custom CSS animations and transitions optimized for Violentmonkey
     GM_addStyle(`
         /* Global smooth transitions */
-        * {
-            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
+        :root {
+            --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            --transition-normal: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+            --transition-slow: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+            --shadow-normal: 0 4px 12px rgba(0, 0, 0, 0.15);
+            --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.25);
+            --shadow-glow: 0 0 15px rgba(0, 255, 150, 0.3);
         }
 
         /* Enhanced buttons with hover effects */
-        .Button-sc-1dqy6sn-0, .ButtonInner-sc-1dqy6sn-1 {
+        button, .Button-sc-1dqy6sn-0, .ButtonInner-sc-1dqy6sn-1 {
+            transition: var(--transition-normal) !important;
             transform: scale(1) !important;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
-            transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease !important;
+            box-shadow: var(--shadow-normal) !important;
+            will-change: transform, box-shadow;
         }
 
-        .Button-sc-1dqy6sn-0:hover, .ButtonInner-sc-1dqy6sn-1:hover {
+        button:hover, .Button-sc-1dqy6sn-0:hover, .ButtonInner-sc-1dqy6sn-1:hover {
             transform: scale(1.05) !important;
-            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
+            box-shadow: var(--shadow-hover) !important;
             filter: brightness(1.1) !important;
         }
 
-        /* Floating action buttons */
+        /* Floating play button pulse animation */
         .Button-sc-1dqy6sn-0.Lsg1a0PdZMXQ3vQZlE0_M {
             animation: pulse 2s infinite !important;
+            position: relative !important;
+            z-index: 10 !important;
         }
 
-        /* Card hover effects */
-        .Card-sc-1uyc430-0 {
+        /* Card hover effects with lift animation */
+        .Card-sc-1uyc430-0, .main-card-card, .main-shelf-shelf {
+            transition: var(--transition-normal) !important;
             transform: translateY(0) !important;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
-            transition: transform 0.3s ease, box-shadow 0.3s ease !important;
+            box-shadow: var(--shadow-normal) !important;
+            will-change: transform, box-shadow;
         }
 
-        .Card-sc-1uyc430-0:hover {
+        .Card-sc-1uyc430-0:hover, .main-card-card:hover, .main-shelf-shelf:hover {
             transform: translateY(-5px) !important;
-            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
+            box-shadow: var(--shadow-hover) !important;
             z-index: 100 !important;
         }
 
-        /* Now playing bar animations */
-        .now-playing-bar {
-            transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
-        }
-
-        .now-playing-bar:hover {
-            transform: translateY(-3px) !important;
-            box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2) !important;
-        }
-
         /* Album art hover effects */
-        .cover-art-image {
+        .cover-art-image, .main-image-image {
             transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                         box-shadow 0.4s ease !important;
             transform-origin: center !important;
+            will-change: transform, box-shadow;
         }
 
-        .cover-art-image:hover {
+        .cover-art-image:hover, .main-image-image:hover {
             transform: scale(1.1) rotate(2deg) !important;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), var(--shadow-glow) !important;
             z-index: 1000 !important;
         }
 
+        /* Progress bar enhancements */
+        .progress-bar__slider, .playback-progressbar-slider {
+            transition: all 0.2s ease !important;
+            will-change: transform, box-shadow;
+        }
+
+        .progress-bar__slider:hover, .playback-progressbar-slider:hover {
+            transform: scale(1.3) !important;
+            box-shadow: 0 0 0 3px rgba(0, 255, 150, 0.7) !important;
+        }
+
+        /* Volume control slider */
+        .volume-bar__slider, .playback-volumebar-slider {
+            transition: transform 0.2s ease, box-shadow 0.2s ease !important;
+            will-change: transform, box-shadow;
+        }
+
+        .volume-bar__slider:hover, .playback-volumebar-slider:hover {
+            transform: scale(1.2) !important;
+            box-shadow: 0 0 8px rgba(0, 255, 150, 0.7) !important;
+        }
+
         /* Text animations */
-        .Type__TypeElement-sc-goli3j-0 {
-            opacity: 0.9 !important;
-            transform: translateY(5px) !important;
+        .Type__TypeElement-sc-goli3j-0, .main-type-type {
             transition: opacity 0.3s ease, transform 0.3s ease !important;
+            will-change: opacity, transform;
         }
 
-        .Type__TypeElement-sc-goli3j-0:hover {
+        .Type__TypeElement-sc-goli3j-0:hover, .main-type-type:hover {
             opacity: 1 !important;
             transform: translateY(0) !important;
         }
 
-        /* Progress bar enhancements */
-        .progress-bar__slider {
-            width: 16px !important;
-            height: 16px !important;
-            transition: all 0.2s ease !important;
+        /* Now playing bar animations */
+        .now-playing-bar, .playback-bar {
+            transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), 
+                        box-shadow 0.3s ease !important;
+            will-change: transform, box-shadow;
         }
 
-        .progress-bar__slider:hover {
-            transform: scale(1.3) !important;
-            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8) !important;
+        .now-playing-bar:hover, .playback-bar:hover {
+            transform: translateY(-3px) !important;
+            box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2) !important;
         }
 
         /* Menu animations */
-        .menu-container {
+        .menu-container, .main-contextMenu-menu {
             opacity: 0 !important;
             transform: translateY(10px) !important;
             transition: opacity 0.2s ease, transform 0.2s ease !important;
         }
 
-        .menu-container.show {
+        .menu-container.show, .main-contextMenu-menu.show {
             opacity: 1 !important;
             transform: translateY(0) !important;
         }
 
-        /* Volume control slider */
-        .volume-bar__slider {
-            transition: transform 0.2s ease, box-shadow 0.2s ease !important;
-        }
-
-        .volume-bar__slider:hover {
-            transform: scale(1.2) !important;
-            box-shadow: 0 0 8px rgba(255, 255, 255, 0.7) !important;
-        }
-
         /* Keyframes for animations */
         @keyframes pulse {
-            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
-            70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
-            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
+            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 255, 150, 0.4); }
+            70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(0, 255, 150, 0); }
+            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 255, 150, 0); }
         }
 
         @keyframes fadeInUp {
@@ -144,53 +164,72 @@
         }
 
         /* Loading animations */
-        .loading-shimmer {
+        .loading-shimmer, .main-loading-loading {
             background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 100%);
             background-size: 1000px 100%;
             animation: shimmer 2s infinite linear !important;
         }
 
-        /* Enhanced sidebar transitions */
-        .sidebar {
+        /* Sidebar transitions */
+        .sidebar, .main-buddyFeed-buddyFeed {
             transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
         }
 
-        .sidebar:hover {
+        .sidebar:hover, .main-buddyFeed-buddyFeed:hover {
             transform: translateX(5px) !important;
         }
+
+        /* Enhanced input fields */
+        input, textarea, .main-inputInput {
+            transition: box-shadow 0.3s ease, transform 0.2s ease !important;
+        }
+
+        input:focus, textarea:focus, .main-inputInput:focus {
+            box-shadow: 0 0 0 3px rgba(0, 255, 150, 0.5) !important;
+            transform: scale(1.01) !important;
+        }
+
+        /* Performance optimization */
+        * {
+            will-change: auto !important;
+        }
     `);
 
     // JavaScript animations and interactions
     function enhanceAnimations() {
-        // Enhanced hover effects for cards
-        document.querySelectorAll('.Card-sc-1uyc430-0').forEach(card => {
+        // Enhanced hover effects for cards with proper cleanup
+        document.querySelectorAll('.Card-sc-1uyc430-0, .main-card-card, .main-shelf-shelf').forEach(card => {
             card.addEventListener('mouseenter', () => {
                 card.style.zIndex = '100';
-            });
+                card.style.transition = 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)';
+            }, { passive: true });
+            
             card.addEventListener('mouseleave', () => {
                 card.style.zIndex = '1';
-            });
+            }, { passive: true });
         });
 
         // Dynamic album art effects
-        document.querySelectorAll('.cover-art-image').forEach(cover => {
+        document.querySelectorAll('.cover-art-image, .main-image-image').forEach(cover => {
             cover.addEventListener('mouseenter', () => {
                 cover.style.zIndex = '1000';
-            });
+                cover.style.transition = 'transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease';
+            }, { passive: true });
+            
             cover.addEventListener('mouseleave', () => {
                 cover.style.zIndex = '1';
-            });
+            }, { passive: true });
         });
 
-        // Enhanced progress bar
-        const progressBar = document.querySelector('.progress-bar');
-        if (progressBar) {
-            progressBar.addEventListener('click', (e) => {
-                const rect = progressBar.getBoundingClientRect();
+        // Enhanced progress bar interaction
+        const progressBars = document.querySelectorAll('.progress-bar, .playback-progressbar');
+        progressBars.forEach(bar => {
+            bar.addEventListener('click', (e) => {
+                const rect = bar.getBoundingClientRect();
                 const percent = (e.clientX - rect.left) / rect.width;
                 animateProgressBar(percent);
-            });
-        }
+            }, { passive: true });
+        });
 
         // Animation for new elements added to DOM
         const observer = new MutationObserver((mutations) => {
@@ -201,45 +240,109 @@
             });
         });
 
+        // Observe the entire document body for changes
         observer.observe(document.body, {
             childList: true,
             subtree: true
         });
+
+        // Cleanup function
+        window.addEventListener('beforeunload', () => {
+            observer.disconnect();
+        }, { passive: true });
     }
 
     function animateProgressBar(percent) {
-        const slider = document.querySelector('.progress-bar__slider');
-        if (slider) {
-            slider.style.transform = 'scale(1.5)';
-            setTimeout(() => {
-                slider.style.transform = 'scale(1)';
-            }, 300);
-        }
+        const sliders = document.querySelectorAll('.progress-bar__slider, .playback-progressbar-slider');
+        sliders.forEach(slider => {
+            if (slider) {
+                slider.style.transform = 'scale(1.5)';
+                setTimeout(() => {
+                    slider.style.transform = 'scale(1)';
+                }, 300);
+            }
+        });
     }
 
     function applyEnterAnimations(nodes) {
         Array.from(nodes).forEach(node => {
-            if (node.nodeType === 1 && node.classList.contains('Card-sc-1uyc430-0')) {
-                node.style.animation = 'fadeInUp 0.4s ease forwards';
-                node.style.opacity = '0';
-                node.style.transform = 'translateY(20px)';
-                setTimeout(() => {
-                    node.style.opacity = '1';
-                    node.style.transform = 'translateY(0)';
-                }, 10);
+            if (node.nodeType === 1) {
+                // Check for card-like elements
+                const isCard = node.classList.contains('Card-sc-1uyc430-0') || 
+                              node.classList.contains('main-card-card') || 
+                              node.classList.contains('main-shelf-shelf');
+                
+                if (isCard) {
+                    node.style.animation = 'fadeInUp 0.4s ease forwards';
+                    node.style.opacity = '0';
+                    node.style.transform = 'translateY(20px)';
+                    setTimeout(() => {
+                        node.style.opacity = '1';
+                        node.style.transform = 'translateY(0)';
+                    }, 10);
+                }
             }
         });
     }
 
     // Initialize animations when DOM is ready
     if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', enhanceAnimations);
+        document.addEventListener('DOMContentLoaded', enhanceAnimations, { passive: true });
     } else {
         enhanceAnimations();
     }
 
     // Periodic animation refresh for dynamic content
-    setInterval(enhanceAnimations, 2000);
-
-    console.log('Spotify Dynamic UI/UX Animations loaded successfully!');
+    const animationInterval = setInterval(() => {
+        if (document.body) {
+            enhanceAnimations();
+        }
+    }, 2000);
+
+    // Cleanup on page unload
+    window.addEventListener('beforeunload', () => {
+        clearInterval(animationInterval);
+    }, { passive: true });
+
+    console.log('✅ Spotify Dynamic UI/UX Animations loaded successfully via Violentmonkey!');
+    
+    // Optional: Add a small indicator that the script is active
+    setTimeout(() => {
+        if (document.querySelector('.now-playing-bar') || document.querySelector('.playback-bar')) {
+            const style = document.createElement('style');
+            style.textContent = `
+                .vm-spotify-indicator {
+                    position: fixed;
+                    bottom: 20px;
+                    right: 20px;
+                    background: rgba(0, 255, 150, 0.8);
+                    color: black;
+                    padding: 4px 8px;
+                    border-radius: 12px;
+                    font-size: 12px;
+                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                    z-index: 9999;
+                    animation: fadeIn 0.3s ease forwards;
+                }
+                @keyframes fadeIn {
+                    from { opacity: 0; transform: scale(0.8); }
+                    to { opacity: 1; transform: scale(1); }
+                }
+            `;
+            document.head.appendChild(style);
+            
+            const indicator = document.createElement('div');
+            indicator.className = 'vm-spotify-indicator';
+            indicator.textContent = '✨ Enhanced UI Active';
+            document.body.appendChild(indicator);
+            
+            setTimeout(() => {
+                indicator.style.animation = 'fadeOut 0.3s ease forwards';
+                setTimeout(() => {
+                    indicator.remove();
+                    document.head.removeChild(style);
+                }, 300);
+            }, 3000);
+        }
+    }, 1000);
 })();