From 5e437d4019bf5a7de320a945356b5d62925d383e Mon Sep 17 00:00:00 2001 From: edidealt Date: Mon, 2 Mar 2026 20:14:25 +0000 Subject: [PATCH 1/2] fullscreen mode settings --- index.html | 42 +++++++++++++++++++++++++++++------------- js/app.js | 46 ++++++++++++++++++++++++++++++++++++++++++---- js/settings.js | 10 ++++++++++ js/storage.js | 16 ++++++++++++++++ 4 files changed, 97 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index ff6f4c5..89f45cc 100644 --- a/index.html +++ b/index.html @@ -3915,6 +3915,35 @@ + +
+
+ Now Playing View Mode + Choose what shows when you click the album art +
+ +
+ +
+
+ Fullscreen Cover Click Action + Choose what happens when you click the cover in fullscreen mode +
+ +
@@ -4788,19 +4817,6 @@
-
-
- Now Playing View Mode - Choose what shows when you click the album art -
- -
- -
Compact Artists { }); document.getElementById('fullscreen-cover-image')?.addEventListener('click', () => { - if (window.location.hash === '#fullscreen') { - window.history.back(); - } else { - ui.closeFullscreenCover(); + const action = fullscreenCoverClickSettings.getAction(); + const overlay = document.getElementById('fullscreen-cover-overlay'); + const playerInstance = window.monochromePlayer; + + switch (action) { + case 'exit': + if (window.location.hash === '#fullscreen') { + window.history.back(); + } else { + ui.closeFullscreenCover(); + } + break; + case 'hide-ui': + if (overlay) { + overlay.classList.toggle('ui-hidden'); + const toggleBtn = document.getElementById('toggle-ui-btn'); + if (toggleBtn) { + const isUIHidden = overlay.classList.contains('ui-hidden'); + toggleBtn.classList.toggle('active', isUIHidden); + toggleBtn.classList.toggle('visible', true); + toggleBtn.title = isUIHidden ? 'Show UI' : 'Hide UI'; + } + } + 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(); + } } }); diff --git a/js/settings.js b/js/settings.js index 4c09228..adc9e41 100644 --- a/js/settings.js +++ b/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) { diff --git a/js/storage.js b/js/storage.js index 124623b..618f40f 100644 --- a/js/storage.js +++ b/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', From ebccec5903bfbf6bae9e8b2bc0e13e2fe4b0c8bf Mon Sep 17 00:00:00 2001 From: edidealt Date: Mon, 2 Mar 2026 20:35:45 +0000 Subject: [PATCH 2/2] FULLY hide show ui button --- js/app.js | 30 +++++++++++++++++++++++------- js/ui.js | 11 ++++++++++- styles.css | 7 +++---- 3 files changed, 36 insertions(+), 12 deletions(-) diff --git a/js/app.js b/js/app.js index 9657d86..c39befb 100644 --- a/js/app.js +++ b/js/app.js @@ -533,13 +533,29 @@ document.addEventListener('DOMContentLoaded', async () => { break; case 'hide-ui': if (overlay) { - overlay.classList.toggle('ui-hidden'); - const toggleBtn = document.getElementById('toggle-ui-btn'); - if (toggleBtn) { - const isUIHidden = overlay.classList.contains('ui-hidden'); - toggleBtn.classList.toggle('active', isUIHidden); - toggleBtn.classList.toggle('visible', true); - toggleBtn.title = isUIHidden ? 'Show UI' : 'Hide UI'; + 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; diff --git a/js/ui.js b/js/ui.js index f6f8934..504f0e1 100644 --- a/js/ui.js +++ b/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(); diff --git a/styles.css b/styles.css index 64f9cfd..4f2fa45 100644 --- a/styles.css +++ b/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.5; - pointer-events: auto; + opacity: 0; + pointer-events: none; } #fullscreen-cover-overlay.ui-hidden .fullscreen-lyrics-toggle,