Update app.js

app.js

@@ -1,348 +1,667 @@
 // ==UserScript==
-// @name         Spotify Dynamic UI/UX Animations
+// @name         Spotify Enhanced UI/UX with Audio Visualizer
 // @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
+// @version      2.1
+// @description  Transforms Spotify web player with dynamic animations, stylish UI enhancements, and a mesmerizing audio visualizer
+// @author       UI/UX Designer
 // @match        https://open.spotify.com/*
-// @icon         https://open.spotify.com/favicon.ico
+// @icon         https://www.spotify.com/favicon.ico
 // @grant        GM_addStyle
-// @grant        GM_setValue
 // @grant        GM_getValue
+// @grant        GM_setValue
 // @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
+// @updateURL    https://github.com/user/spotify-enhanced/raw/main/script.user.js
+// @downloadURL  https://github.com/user/spotify-enhanced/raw/main/script.user.js
 // ==/UserScript==
 
 (function() {
     'use strict';
 
-    // Check if we're on Spotify web player
-    if (!window.location.hostname.includes('spotify.com')) {
-        return;
+    // Wait for DOM to be fully loaded
+    if (document.readyState !== 'complete') {
+        window.addEventListener('load', initEnhancedSpotify);
+    } else {
+        initEnhancedSpotify();
     }
 
-    // Custom CSS animations and transitions optimized for Violentmonkey
-    GM_addStyle(`
-        /* Global smooth transitions */
-        :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);
-        }
+    function initEnhancedSpotify() {
+        // Create style element for custom CSS
+        const style = document.createElement('style');
+        style.textContent = `
+            /* Global UI Enhancements */
+            :root {
+                --primary-gradient: linear-gradient(45deg, #1DB954, #1ED760, #00ffcc);
+                --secondary-gradient: linear-gradient(45deg, #8A2BE2, #9370DB, #BA55D3);
+                --glow-color: rgba(0, 255, 204, 0.7);
+                --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);
+            }
 
-        /* Enhanced buttons with hover effects */
-        button, .Button-sc-1dqy6sn-0, .ButtonInner-sc-1dqy6sn-1 {
-            transition: var(--transition-normal) !important;
-            transform: scale(1) !important;
-            box-shadow: var(--shadow-normal) !important;
-            will-change: transform, box-shadow;
-        }
+            /* Enhanced buttons */
+            button, .Button-sc-1dqy6sn-0, .ButtonInner-sc-1dqy6sn-1 {
+                transition: var(--transition-normal) !important;
+                transform: scale(1) !important;
+                background: var(--primary-gradient) !important;
+                background-size: 200% 200% !important;
+                animation: gradientBG 3s ease infinite !important;
+                box-shadow: 0 4px 15px rgba(0, 255, 204, 0.3) !important;
+                border: none !important;
+            }
 
-        button:hover, .Button-sc-1dqy6sn-0:hover, .ButtonInner-sc-1dqy6sn-1:hover {
-            transform: scale(1.05) !important;
-            box-shadow: var(--shadow-hover) !important;
-            filter: brightness(1.1) !important;
-        }
+            button:hover, .Button-sc-1dqy6sn-0:hover, .ButtonInner-sc-1dqy6sn-1:hover {
+                transform: scale(1.08) !important;
+                box-shadow: 0 6px 25px rgba(0, 255, 204, 0.5) !important;
+                filter: brightness(1.1) !important;
+            }
 
-        /* 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, .main-card-card {
+                transition: var(--transition-normal) !important;
+                transform: translateY(0) !important;
+                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
+                border-radius: 12px !important;
+                overflow: hidden !important;
+            }
 
-        /* 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: var(--shadow-normal) !important;
-            will-change: transform, box-shadow;
-        }
+            .Card-sc-1uyc430-0:hover, .main-card-card:hover {
+                transform: translateY(-8px) !important;
+                box-shadow: 0 12px 30px rgba(0, 255, 204, 0.4) !important;
+                z-index: 100 !important;
+            }
 
-        .Card-sc-1uyc430-0:hover, .main-card-card:hover, .main-shelf-shelf:hover {
-            transform: translateY(-5px) !important;
-            box-shadow: var(--shadow-hover) !important;
-            z-index: 100 !important;
-        }
+            /* Album art effects */
+            .cover-art-image {
+                transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
+                            box-shadow 0.4s ease !important;
+                transform-origin: center !important;
+            }
 
-        /* Album art hover effects */
-        .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 {
+                transform: scale(1.15) rotate(3deg) !important;
+                box-shadow: 0 0 30px rgba(0, 255, 204, 0.6) !important;
+                z-index: 1000 !important;
+            }
 
-        .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), var(--shadow-glow) !important;
-            z-index: 1000 !important;
-        }
+            /* Now playing bar enhancements */
+            .now-playing-bar {
+                transition: var(--transition-slow) !important;
+                background: rgba(0, 0, 0, 0.8) !important;
+                backdrop-filter: blur(10px) !important;
+                border-top: 1px solid rgba(0, 255, 204, 0.3) !important;
+            }
 
-        /* Progress bar enhancements */
-        .progress-bar__slider, .playback-progressbar-slider {
-            transition: all 0.2s ease !important;
-            will-change: transform, box-shadow;
-        }
+            .now-playing-bar:hover {
+                transform: translateY(-5px) !important;
+                box-shadow: 0 -10px 30px rgba(0, 255, 204, 0.3) !important;
+            }
 
-        .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;
-        }
+            /* Visualizer container */
+            #visualizer-container {
+                position: fixed;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                height: 80px;
+                background: rgba(0, 0, 0, 0.7);
+                backdrop-filter: blur(5px);
+                z-index: 9999;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding: 0 20px;
+                border-top: 1px solid rgba(0, 255, 204, 0.3);
+                opacity: 0.9;
+                transition: opacity 0.3s ease;
+            }
 
-        /* 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;
-        }
+            #visualizer-container:hover {
+                opacity: 1;
+            }
 
-        .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;
-        }
+            /* Visualizer canvas */
+            #audio-visualizer {
+                width: 100%;
+                height: 60px;
+                display: block;
+            }
 
-        /* Text animations */
-        .Type__TypeElement-sc-goli3j-0, .main-type-type {
-            transition: opacity 0.3s ease, transform 0.3s ease !important;
-            will-change: opacity, transform;
-        }
+            /* Visualizer control buttons */
+            .visualizer-controls {
+                position: absolute;
+                bottom: 5px;
+                right: 10px;
+                display: flex;
+                gap: 8px;
+                z-index: 10000;
+            }
 
-        .Type__TypeElement-sc-goli3j-0:hover, .main-type-type:hover {
-            opacity: 1 !important;
-            transform: translateY(0) !important;
-        }
+            .visualizer-btn {
+                width: 28px;
+                height: 28px;
+                border-radius: 50%;
+                background: rgba(255, 255, 255, 0.1);
+                border: 1px solid rgba(0, 255, 204, 0.5);
+                color: white;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                cursor: pointer;
+                font-size: 12px;
+                transition: all 0.2s ease;
+            }
 
-        /* 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;
-        }
+            .visualizer-btn:hover {
+                background: rgba(0, 255, 204, 0.3);
+                transform: scale(1.1);
+            }
 
-        .now-playing-bar:hover, .playback-bar:hover {
-            transform: translateY(-3px) !important;
-            box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2) !important;
-        }
+            /* Progress bar enhancements */
+            .progress-bar {
+                height: 4px !important;
+                background: rgba(255, 255, 255, 0.2) !important;
+                border-radius: 2px !important;
+                overflow: hidden !important;
+                position: relative !important;
+            }
 
-        /* Menu animations */
-        .menu-container, .main-contextMenu-menu {
-            opacity: 0 !important;
-            transform: translateY(10px) !important;
-            transition: opacity 0.2s ease, transform 0.2s ease !important;
-        }
+            .progress-bar__slider {
+                width: 14px !important;
+                height: 14px !important;
+                background: var(--primary-gradient) !important;
+                border: 2px solid white !important;
+                box-shadow: 0 0 10px var(--glow-color) !important;
+                transition: all 0.2s ease !important;
+            }
 
-        .menu-container.show, .main-contextMenu-menu.show {
-            opacity: 1 !important;
-            transform: translateY(0) !important;
-        }
+            .progress-bar__slider:hover {
+                transform: scale(1.5) !important;
+                box-shadow: 0 0 20px var(--glow-color) !important;
+            }
 
-        /* Keyframes for animations */
-        @keyframes pulse {
-            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); }
-        }
+            /* Volume slider */
+            .volume-bar {
+                height: 4px !important;
+                background: rgba(255, 255, 255, 0.2) !important;
+                border-radius: 2px !important;
+            }
 
-        @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY(20px);
+            .volume-bar__slider {
+                width: 12px !important;
+                height: 12px !important;
+                background: var(--primary-gradient) !important;
+                box-shadow: 0 0 8px var(--glow-color) !important;
             }
-            to {
-                opacity: 1;
-                transform: translateY(0);
+
+            /* Text animations */
+            .Type__TypeElement-sc-goli3j-0 {
+                transition: opacity 0.3s ease, transform 0.3s ease !important;
             }
-        }
 
-        @keyframes shimmer {
-            0% { background-position: -1000px 0; }
-            100% { background-position: 1000px 0; }
-        }
+            .Type__TypeElement-sc-goli3j-0:hover {
+                opacity: 1 !important;
+                transform: translateY(-2px) !important;
+            }
 
-        /* Loading animations */
-        .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;
-        }
+            /* Gradient text */
+            .glow-text {
+                background: var(--primary-gradient);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                text-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
+            }
 
-        /* Sidebar transitions */
-        .sidebar, .main-buddyFeed-buddyFeed {
-            transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
-        }
+            /* Keyframes */
+            @keyframes gradientBG {
+                0% { background-position: 0% 50% }
+                50% { background-position: 100% 50% }
+                100% { background-position: 0% 50% }
+            }
 
-        .sidebar:hover, .main-buddyFeed-buddyFeed:hover {
-            transform: translateX(5px) !important;
-        }
+            @keyframes pulse {
+                0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 255, 204, 0.4); }
+                70% { transform: scale(1.02); box-shadow: 0 0 0 12px rgba(0, 255, 204, 0); }
+                100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 255, 204, 0); }
+            }
 
-        /* Enhanced input fields */
-        input, textarea, .main-inputInput {
-            transition: box-shadow 0.3s ease, transform 0.2s ease !important;
-        }
+            @keyframes fadeIn {
+                from { opacity: 0; transform: translateY(10px); }
+                to { opacity: 1; transform: translateY(0); }
+            }
 
-        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;
-        }
+            /* Visualizer presets */
+            .visualizer-preset-selector {
+                position: absolute;
+                bottom: 5px;
+                left: 10px;
+                background: rgba(0, 0, 0, 0.7);
+                border: 1px solid rgba(0, 255, 204, 0.3);
+                border-radius: 20px;
+                padding: 2px;
+                display: flex;
+                gap: 2px;
+            }
 
-        /* Performance optimization */
-        * {
-            will-change: auto !important;
-        }
-    `);
-
-    // JavaScript animations and interactions
-    function enhanceAnimations() {
-        // 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 });
-        });
+            .preset-btn {
+                width: 20px;
+                height: 20px;
+                border-radius: 50%;
+                cursor: pointer;
+                transition: all 0.2s ease;
+                border: 2px solid transparent;
+            }
 
-        // Dynamic album art effects
-        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 });
-        });
+            .preset-btn.active {
+                border-color: white;
+                transform: scale(1.1);
+            }
+        `;
+        document.head.appendChild(style);
+
+        // Create visualizer container
+        createVisualizerContainer();
+
+        // Add UI enhancements
+        enhanceUIElements();
 
-        // 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 });
+        // Setup audio analysis
+        setupAudioAnalysis();
+
+        console.log('✨ Spotify Enhanced UI/UX with Audio Visualizer loaded successfully!');
+    }
+
+    function createVisualizerContainer() {
+        const container = document.createElement('div');
+        container.id = 'visualizer-container';
+        container.innerHTML = `
+            <canvas id="audio-visualizer"></canvas>
+            <div class="visualizer-controls">
+                <div class="visualizer-btn" id="visualizer-toggle">❚❚</div>
+                <div class="visualizer-btn" id="visualizer-fullscreen">⛶</div>
+            </div>
+            <div class="visualizer-preset-selector">
+                <div class="preset-btn active" style="background: #1DB954;" data-preset="bars"></div>
+                <div class="preset-btn" style="background: #8A2BE2;" data-preset="wave"></div>
+                <div class="preset-btn" style="background: #FF4500;" data-preset="particles"></div>
+                <div class="preset-btn" style="background: #1E90FF;" data-preset="circular"></div>
+            </div>
+        `;
+        document.body.appendChild(container);
+
+        // Setup event listeners
+        document.getElementById('visualizer-toggle').addEventListener('click', toggleVisualizer);
+        document.getElementById('visualizer-fullscreen').addEventListener('click', toggleFullscreenVisualizer);
+        
+        document.querySelectorAll('.preset-btn').forEach(btn => {
+            btn.addEventListener('click', function() {
+                document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active'));
+                this.classList.add('active');
+                setCurrentPreset(this.dataset.preset);
+            });
         });
+    }
 
-        // Animation for new elements added to DOM
-        const observer = new MutationObserver((mutations) => {
+    function setupAudioAnalysis() {
+        // Get the audio element (Spotify uses audio elements dynamically)
+        const observer = new MutationObserver(mutations => {
             mutations.forEach(mutation => {
                 if (mutation.addedNodes.length) {
-                    applyEnterAnimations(mutation.addedNodes);
+                    const audioElements = document.querySelectorAll('audio');
+                    if (audioElements.length > 0) {
+                        initializeVisualizer(audioElements[0]);
+                        observer.disconnect();
+                    }
                 }
             });
         });
 
-        // Observe the entire document body for changes
         observer.observe(document.body, {
             childList: true,
             subtree: true
         });
 
-        // Cleanup function
-        window.addEventListener('beforeunload', () => {
-            observer.disconnect();
-        }, { passive: true });
+        // Fallback: check periodically if audio element appears
+        let audioCheckInterval = setInterval(() => {
+            const audioElements = document.querySelectorAll('audio');
+            if (audioElements.length > 0) {
+                initializeVisualizer(audioElements[0]);
+                clearInterval(audioCheckInterval);
+                observer.disconnect();
+            }
+        }, 1000);
     }
 
-    function animateProgressBar(percent) {
-        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 initializeVisualizer(audioElement) {
+        const canvas = document.getElementById('audio-visualizer');
+        const ctx = canvas.getContext('2d');
+        const container = document.getElementById('visualizer-container');
+        
+        // Set canvas dimensions
+        function resizeCanvas() {
+            canvas.width = container.clientWidth - 40;
+            canvas.height = container.clientHeight - 20;
+        }
+        
+        resizeCanvas();
+        window.addEventListener('resize', resizeCanvas);
+
+        // Create audio context and analyzer
+        let audioContext, analyzer, source;
+        
+        try {
+            audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            analyzer = audioContext.createAnalyser();
+            analyzer.fftSize = 256;
+            analyzer.smoothingTimeConstant = 0.8;
+            
+            // Create source from audio element
+            source = audioContext.createMediaElementSource(audioElement);
+            source.connect(analyzer);
+            analyzer.connect(audioContext.destination);
+            
+            // Create buffer for frequency data
+            const bufferLength = analyzer.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            
+            // Visualizer settings
+            let currentPreset = 'bars';
+            let isPlaying = true;
+            let fullscreenMode = false;
+            
+            function setCurrentPreset(preset) {
+                currentPreset = preset;
+            }
+            
+            function toggleVisualizer() {
+                isPlaying = !isPlaying;
+                document.getElementById('visualizer-toggle').textContent = isPlaying ? '❚❚' : '▶️';
+            }
+            
+            function toggleFullscreenVisualizer() {
+                fullscreenMode = !fullscreenMode;
+                document.getElementById('visualizer-fullscreen').textContent = fullscreenMode ? '❐' : '⛶';
+                container.style.height = fullscreenMode ? '300px' : '80px';
+                container.style.opacity = fullscreenMode ? '0.95' : '0.9';
+                resizeCanvas();
             }
-        });
-    }
 
-    function applyEnterAnimations(nodes) {
-        Array.from(nodes).forEach(node => {
-            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');
+            // Animation function
+            function animate() {
+                if (!isPlaying) {
+                    requestAnimationFrame(animate);
+                    return;
+                }
+
+                requestAnimationFrame(animate);
+                
+                analyzer.getByteFrequencyData(dataArray);
+                
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
                 
-                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);
+                // Draw based on current preset
+                switch(currentPreset) {
+                    case 'bars':
+                        drawBars(ctx, dataArray, canvas.width, canvas.height);
+                        break;
+                    case 'wave':
+                        drawWave(ctx, dataArray, canvas.width, canvas.height);
+                        break;
+                    case 'particles':
+                        drawParticles(ctx, dataArray, canvas.width, canvas.height);
+                        break;
+                    case 'circular':
+                        drawCircular(ctx, dataArray, canvas.width, canvas.height);
+                        break;
                 }
             }
-        });
+            
+            animate();
+            
+        } catch (error) {
+            console.error('Error initializing audio visualizer:', error);
+            // Fallback visualizer if audio analysis fails
+            createFallbackVisualizer(ctx, canvas.width, canvas.height);
+        }
     }
 
-    // Initialize animations when DOM is ready
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', enhanceAnimations, { passive: true });
-    } else {
-        enhanceAnimations();
+    function drawBars(ctx, dataArray, width, height) {
+        const barWidth = (width / dataArray.length) * 2.5;
+        let x = 0;
+        
+        for (let i = 0; i < dataArray.length; i++) {
+            const barHeight = (dataArray[i] / 255) * height * 1.2;
+            
+            // Gradient for bars
+            const gradient = ctx.createLinearGradient(0, height, 0, height - barHeight);
+            gradient.addColorStop(0, 'rgba(0, 255, 204, 0.3)');
+            gradient.addColorStop(1, 'rgba(0, 255, 204, 0.8)');
+            
+            ctx.fillStyle = gradient;
+            ctx.fillRect(x, height - barHeight, barWidth, barHeight);
+            
+            // Glow effect
+            ctx.shadowColor = 'rgba(0, 255, 204, 0.7)';
+            ctx.shadowBlur = 15;
+            
+            x += barWidth + 1;
+        }
+        
+        ctx.shadowBlur = 0;
     }
 
-    // Periodic animation refresh for dynamic content
-    const animationInterval = setInterval(() => {
-        if (document.body) {
-            enhanceAnimations();
+    function drawWave(ctx, dataArray, width, height) {
+        ctx.beginPath();
+        ctx.moveTo(0, height / 2);
+        
+        for (let i = 0; i < dataArray.length; i++) {
+            const x = (i / dataArray.length) * width;
+            const y = height / 2 + ((dataArray[i] - 128) / 128) * (height / 3);
+            
+            if (i === 0) {
+                ctx.moveTo(x, y);
+            } else {
+                ctx.lineTo(x, y);
+            }
         }
-    }, 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);
+        
+        // Gradient stroke
+        const gradient = ctx.createLinearGradient(0, 0, width, 0);
+        gradient.addColorStop(0, '#1DB954');
+        gradient.addColorStop(0.5, '#00ffcc');
+        gradient.addColorStop(1, '#1ED760');
+        
+        ctx.strokeStyle = gradient;
+        ctx.lineWidth = 3;
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        ctx.stroke();
+        
+        // Fill under wave
+        ctx.lineTo(width, height);
+        ctx.lineTo(0, height);
+        ctx.closePath();
+        
+        const fillGradient = ctx.createLinearGradient(0, 0, 0, height);
+        fillGradient.addColorStop(0, 'rgba(0, 255, 204, 0.3)');
+        fillGradient.addColorStop(1, 'rgba(0, 255, 204, 0.1)');
+        
+        ctx.fillStyle = fillGradient;
+        ctx.fill();
+    }
+
+    function drawParticles(ctx, dataArray, width, height) {
+        const centerX = width / 2;
+        const centerY = height / 2;
+        const radius = Math.min(width, height) * 0.4;
+        
+        for (let i = 0; i < dataArray.length; i += 4) {
+            const angle = (i / dataArray.length) * Math.PI * 2;
+            const distance = (dataArray[i] / 255) * radius;
+            const x = centerX + Math.cos(angle) * distance;
+            const y = centerY + Math.sin(angle) * distance;
+            const size = (dataArray[i] / 255) * 8 + 2;
+            
+            // Particle color based on frequency
+            const hue = (i / dataArray.length) * 360;
+            ctx.fillStyle = `hsla(${hue}, 80%, 60%, ${dataArray[i] / 255})`;
+            
+            ctx.beginPath();
+            ctx.arc(x, y, size, 0, Math.PI * 2);
+            ctx.fill();
+        }
+        
+        // Center glow
+        const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius * 0.3);
+        gradient.addColorStop(0, 'rgba(0, 255, 204, 0.8)');
+        gradient.addColorStop(1, 'rgba(0, 255, 204, 0)');
+        
+        ctx.fillStyle = gradient;
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, radius * 0.3, 0, Math.PI * 2);
+        ctx.fill();
+    }
+
+    function drawCircular(ctx, dataArray, width, height) {
+        const centerX = width / 2;
+        const centerY = height / 2;
+        const maxRadius = Math.min(width, height) * 0.4;
+        
+        ctx.save();
+        
+        // Draw multiple rings
+        for (let ring = 0; ring < 3; ring++) {
+            const ringRadius = maxRadius * (1 - ring * 0.3);
+            
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, ringRadius, 0, Math.PI * 2);
+            
+            const gradient = ctx.createLinearGradient(0, 0, width, 0);
+            gradient.addColorStop(0, '#1DB954');
+            gradient.addColorStop(0.5, '#00ffcc');
+            gradient.addColorStop(1, '#1ED760');
+            
+            ctx.strokeStyle = gradient;
+            ctx.lineWidth = 3 + ring;
+            ctx.stroke();
+        }
+        
+        // Draw frequency bars around circle
+        const barCount = 64;
+        const barWidth = (Math.PI * 2) / barCount;
+        
+        for (let i = 0; i < barCount; i++) {
+            const angle = (i / barCount) * Math.PI * 2;
+            const barHeight = (dataArray[i % dataArray.length] / 255) * maxRadius * 0.3;
+            
+            ctx.save();
+            ctx.translate(centerX, centerY);
+            ctx.rotate(angle);
+            
+            const gradient = ctx.createLinearGradient(0, 0, 0, -barHeight);
+            gradient.addColorStop(0, 'rgba(0, 255, 204, 0.3)');
+            gradient.addColorStop(1, 'rgba(0, 255, 204, 0.8)');
             
-            const indicator = document.createElement('div');
-            indicator.className = 'vm-spotify-indicator';
-            indicator.textContent = '✨ Enhanced UI Active';
-            document.body.appendChild(indicator);
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, -barHeight, 3, barHeight);
             
-            setTimeout(() => {
-                indicator.style.animation = 'fadeOut 0.3s ease forwards';
-                setTimeout(() => {
-                    indicator.remove();
-                    document.head.removeChild(style);
-                }, 300);
-            }, 3000);
+            ctx.restore();
         }
-    }, 1000);
+        
+        ctx.restore();
+    }
+
+    function createFallbackVisualizer(ctx, width, height) {
+        // Create animated gradient background if audio analysis fails
+        let phase = 0;
+        
+        function animateFallback() {
+            requestAnimationFrame(animateFallback);
+            
+            phase += 0.01;
+            
+            // Clear canvas
+            ctx.clearRect(0, 0, width, height);
+            
+            // Create gradient
+            const gradient = ctx.createLinearGradient(0, 0, width, height);
+            gradient.addColorStop(0, `hsl(${(phase * 60) % 360}, 80%, 50%)`);
+            gradient.addColorStop(0.5, `hsl(${(phase * 90 + 120) % 360}, 80%, 60%)`);
+            gradient.addColorStop(1, `hsl(${(phase * 120 + 240) % 360}, 80%, 50%)`);
+            
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, width, height);
+            
+            // Draw animated bars
+            const barCount = 32;
+            const barWidth = width / barCount;
+            
+            for (let i = 0; i < barCount; i++) {
+                const barHeight = Math.sin(phase + i * 0.2) * height * 0.4 + height * 0.3;
+                const alpha = (Math.sin(phase + i * 0.1) + 1) * 0.5;
+                
+                ctx.fillStyle = `rgba(255, 255, 255, ${alpha * 0.7})`;
+                ctx.fillRect(i * barWidth, height - barHeight, barWidth - 2, barHeight);
+            }
+        }
+        
+        animateFallback();
+    }
+
+    function enhanceUIElements() {
+        // Add hover effects and animations to various UI elements
+        const elementsToEnhance = [
+            '.Button-sc-1dqy6sn-0', // Buttons
+            '.Card-sc-1uyc430-0',   // Cards
+            '.main-card-card',      // Main cards
+            '.main-shelf-shelf',    // Shelves
+            '.main-trackList-row',  // Track rows
+            '.progress-bar__slider', // Progress slider
+            '.volume-bar__slider'   // Volume slider
+        ];
+
+        elementsToEnhance.forEach(selector => {
+            document.querySelectorAll(selector).forEach(element => {
+                element.style.transition = 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)';
+            });
+        });
+
+        // Add gradient text to important elements
+        document.querySelectorAll('.Type__TypeElement-sc-goli3j-0').forEach(text => {
+            if (text.textContent.length > 3 && text.textContent.length < 30) {
+                text.classList.add('glow-text');
+            }
+        });
+
+        // Add pulse animation to play button
+        const playButton = document.querySelector('.Button-sc-1dqy6sn-0.Lsg1a0PdZMXQ3vQZlE0_M');
+        if (playButton) {
+            playButton.style.animation = 'pulse 2s infinite';
+        }
+
+        // MutationObserver for dynamic content
+        const uiObserver = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                if (mutation.addedNodes.length) {
+                    // Re-apply enhancements to new elements
+                    elementsToEnhance.forEach(selector => {
+                        document.querySelectorAll(selector).forEach(element => {
+                            if (!element.style.transition) {
+                                element.style.transition = 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)';
+                            }
+                        });
+                    });
+                }
+            });
+        });
+
+        uiObserver.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+
+        // Cleanup on page unload
+        window.addEventListener('beforeunload', () => {
+            uiObserver.disconnect();
+        });
+    }
 })();