close modals on navigation

This commit is contained in:
Eduard Prigoana 2026-02-18 03:50:00 +00:00
parent 03a7dcda52
commit 64ff09910b
4 changed files with 52 additions and 19 deletions

View file

@ -3097,14 +3097,14 @@
<div class="settings-group"> <div class="settings-group">
<div class="setting-item"> <div class="setting-item">
<div class="info"> <div class="info">
<span class="label">Close Queue on Navigation</span> <span class="label">Close Modals on Navigation</span>
<span class="description" <span class="description"
>Close the queue panel when navigating back or to a new page (useful for >Close open modals and panels (like lyrics, queue) when navigating back or
mobile)</span to a new page</span
> >
</div> </div>
<label class="toggle-switch"> <label class="toggle-switch">
<input type="checkbox" id="queue-close-on-navigation-toggle" /> <input type="checkbox" id="close-modals-on-navigation-toggle" />
<span class="slider"></span> <span class="slider"></span>
</label> </label>
</div> </div>

View file

@ -7,7 +7,7 @@ import {
downloadQualitySettings, downloadQualitySettings,
sidebarSettings, sidebarSettings,
pwaUpdateSettings, pwaUpdateSettings,
queueBehaviorSettings, modalSettings,
} from './storage.js'; } from './storage.js';
import { UIRenderer } from './ui.js'; import { UIRenderer } from './ui.js';
import { Player } from './player.js'; import { Player } from './player.js';
@ -2117,9 +2117,10 @@ document.addEventListener('DOMContentLoaded', async () => {
return; return;
} }
// Close side panel (queue/lyrics) on navigation if setting is enabled // Close side panel (queue/lyrics) and modals on navigation if setting is enabled
if (queueBehaviorSettings.shouldCloseOnNavigation()) { if (modalSettings.shouldCloseOnNavigation()) {
sidePanelManager.close(); sidePanelManager.close();
modalSettings.closeAllModals();
} }
await router(); await router();

View file

@ -32,7 +32,7 @@ import {
contentBlockingSettings, contentBlockingSettings,
musicProviderSettings, musicProviderSettings,
analyticsSettings, analyticsSettings,
queueBehaviorSettings, modalSettings,
} from './storage.js'; } from './storage.js';
import { audioContextManager, EQ_PRESETS } from './audio-context.js'; import { audioContextManager, EQ_PRESETS } from './audio-context.js';
import { getButterchurnPresets } from './visualizers/butterchurn.js'; import { getButterchurnPresets } from './visualizers/butterchurn.js';
@ -1910,12 +1910,12 @@ export function initializeSettings(scrobbler, player, api, ui) {
}); });
} }
// Queue Close on Navigation Toggle // Close Modals on Navigation Toggle
const queueCloseOnNavigationToggle = document.getElementById('queue-close-on-navigation-toggle'); const closeModalsOnNavigationToggle = document.getElementById('close-modals-on-navigation-toggle');
if (queueCloseOnNavigationToggle) { if (closeModalsOnNavigationToggle) {
queueCloseOnNavigationToggle.checked = queueBehaviorSettings.shouldCloseOnNavigation(); closeModalsOnNavigationToggle.checked = modalSettings.shouldCloseOnNavigation();
queueCloseOnNavigationToggle.addEventListener('change', (e) => { closeModalsOnNavigationToggle.addEventListener('change', (e) => {
queueBehaviorSettings.setCloseOnNavigation(e.target.checked); modalSettings.setCloseOnNavigation(e.target.checked);
}); });
} }

View file

@ -2208,16 +2208,15 @@ export const musicProviderSettings = {
}, },
}; };
export const queueBehaviorSettings = { export const modalSettings = {
STORAGE_KEY: 'queue-close-on-navigation', STORAGE_KEY: 'close-modals-on-navigation',
shouldCloseOnNavigation() { shouldCloseOnNavigation() {
try { try {
// Default to true on mobile, false on desktop // Default to false to preserve existing behavior
const saved = localStorage.getItem(this.STORAGE_KEY); const saved = localStorage.getItem(this.STORAGE_KEY);
if (saved === null) { if (saved === null) {
// Auto-detect: default to true for mobile/touch devices return false;
return window.matchMedia('(pointer: coarse)').matches;
} }
return saved === 'true'; return saved === 'true';
} catch { } catch {
@ -2228,6 +2227,39 @@ export const queueBehaviorSettings = {
setCloseOnNavigation(enabled) { setCloseOnNavigation(enabled) {
localStorage.setItem(this.STORAGE_KEY, enabled ? 'true' : 'false'); localStorage.setItem(this.STORAGE_KEY, enabled ? 'true' : 'false');
}, },
closeAllModals() {
// Close all modal overlays
document.querySelectorAll('.modal-overlay').forEach((modal) => {
modal.remove();
});
// Close all modals with active class
document.querySelectorAll('.modal.active').forEach((modal) => {
modal.classList.remove('active');
});
// Close specific modals by ID
const modalIds = [
'playlist-modal',
'folder-modal',
'playlist-select-modal',
'shortcuts-modal',
'missing-tracks-modal',
'sleep-timer-modal',
'discography-download-modal',
'custom-db-modal',
'tracker-modal',
'epilepsy-warning-modal',
];
modalIds.forEach((id) => {
const modal = document.getElementById(id);
if (modal) {
modal.classList.remove('active');
}
});
},
}; };
export const contentBlockingSettings = { export const contentBlockingSettings = {