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) {
+ 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();
+ }
}
});
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',
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,