UI hiding

index.html

@@ -144,7 +144,22 @@
         <div id="fullscreen-cover-overlay" style="display: none">
             <div class="fullscreen-cover-content">
                 <canvas id="visualizer-canvas"></canvas>
-                <button id="close-fullscreen-cover-btn" title="Close">&times;</button>
+                <button id="toggle-ui-btn" class="fullscreen-ui-toggle" title="Toggle UI">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    >
+                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                        <line x1="9" y1="3" x2="9" y2="21"></line>
+                    </svg>
+                </button>
                 <button id="toggle-fullscreen-lyrics-btn" class="fullscreen-lyrics-toggle" title="Toggle Lyrics">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
@@ -163,6 +178,7 @@
                         <line x1="8" y1="22" x2="16" y2="22" />
                     </svg>
                 </button>
+                <button id="close-fullscreen-cover-btn" title="Close">&times;</button>
                 <div class="fullscreen-main-view">
                     <img
                         id="fullscreen-cover-image"

js/ui.js

@@ -1009,8 +1009,14 @@ export class UIRenderer {
             if (this.visualizer) {
                 this.visualizer.start();
             }
+
+            // Add visualizer-active class for enhanced drop shadow
+            overlay.classList.add('visualizer-active');
         };
 
+        // Setup UI toggle button
+        this.setupUIToggleButton(overlay);
+
         if (localStorage.getItem('epilepsy-warning-dismissed') === 'true') {
             startVisualizer();
         } else {
@@ -1039,6 +1045,7 @@ export class UIRenderer {
     closeFullscreenCover() {
         const overlay = document.getElementById('fullscreen-cover-overlay');
         overlay.style.display = 'none';
+        overlay.classList.remove('visualizer-active', 'ui-hidden');
 
         const playerBar = document.querySelector('.now-playing-bar');
         if (playerBar) playerBar.style.removeProperty('display');
@@ -1051,6 +1058,78 @@ export class UIRenderer {
         if (this.visualizer) {
             this.visualizer.stop();
         }
+
+        // Clear UI toggle button timers
+        if (this.uiToggleMouseTimer) {
+            clearTimeout(this.uiToggleMouseTimer);
+            this.uiToggleMouseTimer = null;
+        }
+    }
+
+    setupUIToggleButton(overlay) {
+        const toggleBtn = document.getElementById('toggle-ui-btn');
+        if (!toggleBtn) return;
+
+        let isUIHidden = false;
+
+        // Show button
+        const showButton = () => {
+            toggleBtn.classList.add('visible');
+        };
+
+        // Hide button
+        const hideButton = () => {
+            toggleBtn.classList.remove('visible');
+        };
+
+        // Mouse move handler
+        const handleMouseMove = (e) => {
+            const rect = overlay.getBoundingClientRect();
+            // Check if mouse is near the top-right corner (within 150px from right, 100px from top)
+            const isNearTopRight = e.clientY < 100 && e.clientX > rect.width - 150;
+
+            if (isUIHidden) {
+                // When UI is hidden, only show button when mouse is near top-right
+                if (isNearTopRight) {
+                    showButton();
+                } else {
+                    hideButton();
+                }
+            }
+            // When UI is visible, button stays visible (no auto-hide)
+        };
+
+        // Toggle UI visibility
+        const toggleUI = () => {
+            isUIHidden = !isUIHidden;
+            overlay.classList.toggle('ui-hidden', isUIHidden);
+            toggleBtn.classList.toggle('active', isUIHidden);
+            toggleBtn.title = isUIHidden ? 'Show UI' : 'Hide UI';
+
+            if (isUIHidden) {
+                // When UI is hidden, immediately hide the button
+                // It will reappear when mouse nears top-right
+                hideButton();
+            } else {
+                // When UI is shown, keep button visible
+                showButton();
+            }
+        };
+
+        // Add event listeners
+        toggleBtn.addEventListener('click', toggleUI);
+        overlay.addEventListener('mousemove', handleMouseMove);
+        overlay.addEventListener('mouseleave', () => {
+            if (isUIHidden) {
+                hideButton();
+            }
+        });
+
+        // Store cleanup function
+        this.uiToggleCleanup = () => {
+            toggleBtn.removeEventListener('click', toggleUI);
+            overlay.removeEventListener('mousemove', handleMouseMove);
+        };
     }
 
     setupFullscreenControls(audioPlayer) {

public/editors-picks.json

@@ -43,17 +43,6 @@
         "audioQuality": "LOSSLESS",
         "mediaMetadata": { "tags": ["LOSSLESS"] }
     },
-    {
-        "type": "album",
-        "id": 487053581,
-        "title": "USB A (Deluxe)",
-        "artist": { "id": 46882510, "name": "PRODYSGROUP" },
-        "releaseDate": "2025-08-9",
-        "cover": "6409de67-1a4e-421b-9820-cc67a21792ec",
-        "explicit": true,
-        "audioQuality": "LOSSLESS",
-        "mediaMetadata": { "tags": ["LOSSLESS"] }
-    },
     {
         "type": "album",
         "id": 4527433,

styles.css

@@ -3496,13 +3496,89 @@ input:checked + .slider::before {
     padding: 1rem;
 }
 
-#close-fullscreen-cover-btn {
+/* UI Toggle Button for Visualizer Mode - Rightmost position */
+#toggle-ui-btn {
     position: absolute;
     top: 1rem;
     right: 1rem;
     background-color: var(--background);
     border: none;
     color: var(--foreground);
+    width: 48px;
+    height: 48px;
+    border-radius: var(--radius-full);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+        opacity 0.3s ease,
+        transform 0.2s ease,
+        right 0.3s ease;
+    z-index: 10;
+    opacity: 0.5;
+    pointer-events: auto;
+}
+
+#toggle-ui-btn:hover {
+    opacity: 0.8;
+    transform: scale(1.05);
+}
+
+#toggle-ui-btn.active {
+    color: var(--primary);
+    opacity: 0.8;
+}
+
+/* When UI is hidden, toggle button is hidden by default */
+#fullscreen-cover-overlay.ui-hidden #toggle-ui-btn {
+    opacity: 0;
+    pointer-events: none;
+}
+
+/* When UI is hidden and mouse is near, show the toggle button */
+#fullscreen-cover-overlay.ui-hidden #toggle-ui-btn.visible {
+    opacity: 0.5;
+    pointer-events: auto;
+}
+
+/* Lyrics Toggle - Middle position */
+.fullscreen-lyrics-toggle {
+    position: absolute;
+    top: 1rem;
+    right: 4.5rem;
+    background: rgb(0, 0, 0, 0.5);
+    border: none;
+    color: white;
+    padding: 0.75rem;
+    border-radius: var(--radius-full);
+    cursor: pointer;
+    z-index: 1001;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+        all 0.2s ease,
+        right 0.3s ease;
+}
+
+.fullscreen-lyrics-toggle:hover {
+    background: rgb(0, 0, 0, 0.7);
+    transform: scale(1.1);
+}
+
+.fullscreen-lyrics-toggle.active {
+    background: var(--primary);
+}
+
+/* Close Button - Leftmost position */
+#close-fullscreen-cover-btn {
+    position: absolute;
+    top: 1rem;
+    right: 8rem;
+    background-color: var(--background);
+    border: none;
+    color: var(--foreground);
     font-size: 2rem;
     width: 48px;
     height: 48px;
@@ -3522,6 +3598,36 @@ input:checked + .slider::before {
     opacity: 0.8;
 }
 
+/* UI Hidden State for Visualizer Mode */
+#fullscreen-cover-overlay.ui-hidden .fullscreen-main-view,
+#fullscreen-cover-overlay.ui-hidden .fullscreen-controls,
+#fullscreen-cover-overlay.ui-hidden #fullscreen-next-track {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.5s ease;
+}
+
+/* When UI is hidden, only toggle button stays visible at right edge */
+#fullscreen-cover-overlay.ui-hidden #toggle-ui-btn {
+    right: 1rem;
+    opacity: 0.5;
+    pointer-events: auto;
+}
+
+#fullscreen-cover-overlay.ui-hidden .fullscreen-lyrics-toggle,
+#fullscreen-cover-overlay.ui-hidden #close-fullscreen-cover-btn {
+    opacity: 0;
+    pointer-events: none;
+}
+
+#fullscreen-cover-overlay:not(.ui-hidden) .fullscreen-main-view,
+#fullscreen-cover-overlay:not(.ui-hidden) .fullscreen-controls,
+#fullscreen-cover-overlay:not(.ui-hidden) #fullscreen-next-track {
+    opacity: 1;
+    pointer-events: auto;
+    transition: opacity 0.5s ease;
+}
+
 #fullscreen-cover-image {
     max-width: 55vw;
     max-height: 45vh;
@@ -3532,6 +3638,14 @@ input:checked + .slider::before {
     z-index: 1;
 }
 
+/* Enhanced drop shadow for album cover in visualizer mode */
+#fullscreen-cover-overlay.visualizer-active #fullscreen-cover-image {
+    box-shadow:
+        0 25px 60px rgb(0, 0, 0, 0.6),
+        0 10px 30px rgb(0, 0, 0, 0.4),
+        0 0 100px rgb(0, 0, 0, 0.3);
+}
+
 .fullscreen-track-info {
     text-align: center;
     z-index: 1;
@@ -4961,34 +5075,6 @@ img[src=''] {
         margin-right 0.3s ease;
 }
 
-.fullscreen-lyrics-toggle {
-    position: absolute;
-    top: 1rem;
-    right: 4.5rem;
-    background: rgb(0, 0, 0, 0.5);
-    border: none;
-    color: white;
-    padding: 0.75rem;
-    border-radius: var(--radius-full);
-    cursor: pointer;
-    z-index: 1001;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition:
-        all 0.2s ease,
-        right 0.3s ease;
-}
-
-.fullscreen-lyrics-toggle:hover {
-    background: rgb(0, 0, 0, 0.7);
-    transform: scale(1.1);
-}
-
-.fullscreen-lyrics-toggle.active {
-    background: var(--primary);
-}
-
 /* Modals */
 .modal {
     position: fixed;