Merge branch 'main' of github.com:monochrome-music/monochrome

index.html

@@ -3916,6 +3916,35 @@
                                         <span class="slider"></span>
                                     </label>
                                 </div>
+
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Now Playing View Mode</span>
+                                        <span class="description">Choose what shows when you click the album art</span>
+                                    </div>
+                                    <select id="now-playing-mode">
+                                        <option value="album">Go to Album</option>
+                                        <option value="cover">Fullscreen Mode</option>
+                                        <option value="lyrics">Lyrics Panel</option>
+                                    </select>
+                                </div>
+
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Fullscreen Cover Click Action</span>
+                                        <span class="description"
+                                            >Choose what happens when you click the cover in fullscreen mode</span
+                                        >
+                                    </div>
+                                    <select id="fullscreen-cover-click-action">
+                                        <option value="exit">Exit fullscreen mode</option>
+                                        <option value="hide-ui">Hide UI</option>
+                                        <option value="pause-resume">Pause/resume track</option>
+                                        <option value="next">Skip song</option>
+                                        <option value="previous">Previous song</option>
+                                        <option value="nothing">Do nothing</option>
+                                    </select>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -4789,19 +4818,6 @@
                             </div>
 
                             <div class="settings-group">
-                                <div class="setting-item">
-                                    <div class="info">
-                                        <span class="label">Now Playing View Mode</span>
-                                        <span class="description">Choose what shows when you click the album art</span>
-                                    </div>
-                                    <select id="now-playing-mode">
-                                        <option value="album">Go to Album</option>
-                                        <option value="cover">Fullscreen Mode</option>
-                                        <option value="lyrics">Lyrics Panel</option>
-                                    </select>
-                                </div>
-
-                                <div class="setting-item">
                                     <div class="info">
                                         <span class="label">Compact Artists</span>
                                         <span class="description"

js/app.js

@@ -4,6 +4,7 @@ import {
     apiSettings,
     themeManager,
     nowPlayingSettings,
+    fullscreenCoverClickSettings,
     downloadQualitySettings,
     sidebarSettings,
     pwaUpdateSettings,
@@ -518,10 +519,63 @@ document.addEventListener('DOMContentLoaded', async () => {
     });
 
     document.getElementById('fullscreen-cover-image')?.addEventListener('click', () => {
-        if (window.location.hash === '#fullscreen') {
+        const action = fullscreenCoverClickSettings.getAction();
-            window.history.back();
+        const overlay = document.getElementById('fullscreen-cover-overlay');
-        } else {
+        const playerInstance = window.monochromePlayer;
-            ui.closeFullscreenCover();
+
+        switch (action) {
+            case 'exit':
+                if (window.location.hash === '#fullscreen') {
+                    window.history.back();
+                } else {
+                    ui.closeFullscreenCover();
+                }
+                break;
+            case 'hide-ui':
+                if (overlay) {
+                    const isCurrentlyHidden = overlay.classList.contains('ui-hidden');
+                    if (isCurrentlyHidden) {
+                        overlay.classList.remove('ui-hidden');
+                        const toggleBtn = document.getElementById('toggle-ui-btn');
+                        if (toggleBtn) {
+                            toggleBtn.classList.remove('active');
+                            toggleBtn.classList.add('visible');
+                            toggleBtn.title = 'Hide UI';
+                        }
+                    } else {
+                        overlay.classList.add('ui-hidden');
+                        const toggleBtn = document.getElementById('toggle-ui-btn');
+                        if (toggleBtn) {
+                            toggleBtn.classList.add('active');
+                            toggleBtn.classList.remove('visible');
+                            toggleBtn.title = 'Show UI';
+                        }
+                    }
+                    if (ui && typeof ui.setupUIToggleButton === 'function') {
+                        if (ui.uiToggleCleanup) {
+                            ui.uiToggleCleanup();
+                        }
+                        ui.setupUIToggleButton(overlay);
+                    }
+                }
+                break;
+            case 'pause-resume':
+                if (playerInstance) playerInstance.handlePlayPause();
+                break;
+            case 'next':
+                if (playerInstance) playerInstance.playNext();
+                break;
+            case 'previous':
+                if (playerInstance) playerInstance.playPrev();
+                break;
+            case 'nothing':
+                break;
+            default:
+                if (window.location.hash === '#fullscreen') {
+                    window.history.back();
+                } else {
+                    ui.closeFullscreenCover();
+                }
         }
     });
 

js/settings.js

@@ -3,6 +3,7 @@ import {
     themeManager,
     lastFMStorage,
     nowPlayingSettings,
+    fullscreenCoverClickSettings,
     lyricsSettings,
     backgroundSettings,
     dynamicColorSettings,
@@ -1986,6 +1987,15 @@ export function initializeSettings(scrobbler, player, api, ui) {
         });
     }
 
+    // Fullscreen Cover Click Action
+    const fullscreenCoverClickAction = document.getElementById('fullscreen-cover-click-action');
+    if (fullscreenCoverClickAction) {
+        fullscreenCoverClickAction.value = fullscreenCoverClickSettings.getAction();
+        fullscreenCoverClickAction.addEventListener('change', (e) => {
+            fullscreenCoverClickSettings.setAction(e.target.value);
+        });
+    }
+
     // Close Modals on Navigation Toggle
     const closeModalsOnNavigationToggle = document.getElementById('close-modals-on-navigation-toggle');
     if (closeModalsOnNavigationToggle) {

js/storage.js

@@ -421,6 +421,22 @@ export const nowPlayingSettings = {
     },
 };
 
+export const fullscreenCoverClickSettings = {
+    STORAGE_KEY: 'fullscreen-cover-click-action',
+
+    getAction() {
+        try {
+            return localStorage.getItem(this.STORAGE_KEY) || 'exit';
+        } catch {
+            return 'exit';
+        }
+    },
+
+    setAction(action) {
+        localStorage.setItem(this.STORAGE_KEY, action);
+    },
+};
+
 export const lyricsSettings = {
     DOWNLOAD_WITH_TRACKS: 'lyrics-download-with-tracks',
 

js/ui.js

@@ -1070,7 +1070,9 @@ export class UIRenderer {
         const toggleBtn = document.getElementById('toggle-ui-btn');
         if (!toggleBtn) return;
 
-        let isUIHidden = false;
+        let isUIHidden = overlay.classList.contains('ui-hidden');
+        toggleBtn.classList.toggle('active', isUIHidden);
+        toggleBtn.title = isUIHidden ? 'Show UI' : 'Hide UI';
 
         // Show button
         const showButton = () => {
@@ -1082,6 +1084,13 @@ export class UIRenderer {
             toggleBtn.classList.remove('visible');
         };
 
+        // Initial state: hide button if UI is hidden
+        if (isUIHidden) {
+            hideButton();
+        } else {
+            showButton();
+        }
+
         // Mouse move handler
         const handleMouseMove = (e) => {
             const rect = overlay.getBoundingClientRect();

styles.css

@@ -3607,11 +3607,10 @@ input:checked + .slider::before {
     transition: opacity 0.5s ease;
 }
 
-/* When UI is hidden, only toggle button stays visible at right edge */
+/* When UI is hidden, only toggle button stays visible at right edge (when .visible class is added) */
 #fullscreen-cover-overlay.ui-hidden #toggle-ui-btn {
-    right: 1rem;
+    opacity: 0;
-    opacity: 0.5;
+    pointer-events: none;
-    pointer-events: auto;
 }
 
 #fullscreen-cover-overlay.ui-hidden .fullscreen-lyrics-toggle,