Fix Android back gesture UX for fullscreen player and app exit

This commit is contained in:
Julien Maille 2026-01-29 21:49:12 +01:00
parent b320efa9b0
commit 08ca581c79
2 changed files with 41 additions and 4 deletions

View file

@ -364,7 +364,11 @@ document.addEventListener('DOMContentLoaded', async () => {
} else if (mode === 'cover') {
const overlay = document.getElementById('fullscreen-cover-overlay');
if (overlay && overlay.style.display === 'flex') {
ui.closeFullscreenCover();
if (window.location.hash === '#fullscreen') {
window.history.back();
} else {
ui.closeFullscreenCover();
}
} else {
const nextTrack = player.getNextTrack();
ui.showFullscreenCover(player.currentTrack, nextTrack, lyricsManager, audioPlayer);
@ -384,11 +388,19 @@ document.addEventListener('DOMContentLoaded', async () => {
});
document.getElementById('close-fullscreen-cover-btn')?.addEventListener('click', () => {
ui.closeFullscreenCover();
if (window.location.hash === '#fullscreen') {
window.history.back();
} else {
ui.closeFullscreenCover();
}
});
document.getElementById('fullscreen-cover-image')?.addEventListener('click', () => {
ui.closeFullscreenCover();
if (window.location.hash === '#fullscreen') {
window.history.back();
} else {
ui.closeFullscreenCover();
}
});
document.getElementById('sidebar-toggle')?.addEventListener('click', () => {
@ -457,6 +469,13 @@ document.addEventListener('DOMContentLoaded', async () => {
const nextTrack = player.getNextTrack();
ui.showFullscreenCover(player.currentTrack, nextTrack, lyricsManager, audioPlayer);
}
// DEV: Auto-open fullscreen mode if ?fullscreen=1 in URL
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('fullscreen') === '1' && fullscreenOverlay && getComputedStyle(fullscreenOverlay).display === 'none') {
const nextTrack = player.getNextTrack();
ui.showFullscreenCover(player.currentTrack, nextTrack, lyricsManager, audioPlayer);
}
});
document.addEventListener('click', async (e) => {
@ -1274,7 +1293,24 @@ document.addEventListener('DOMContentLoaded', async () => {
const router = createRouter(ui);
const handleRouteChange = async () => {
const handleRouteChange = async (event) => {
const overlay = document.getElementById('fullscreen-cover-overlay');
const isFullscreenOpen = overlay && getComputedStyle(overlay).display === 'flex';
if (isFullscreenOpen && window.location.hash !== '#fullscreen') {
ui.closeFullscreenCover();
}
if (event && event.state && event.state.exitTrap) {
showNotification('Press back again to exit');
setTimeout(() => {
if (history.state && history.state.exitTrap) {
history.pushState({ app: true }, '', window.location.pathname);
}
}, 2000);
return;
}
await router();
updateTabTitle(player);
};

View file

@ -711,6 +711,7 @@ export class UIRenderer {
async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
if (!track) return;
window.history.pushState({ fullscreen: true }, '', '#fullscreen');
const overlay = document.getElementById('fullscreen-cover-overlay');
const nextTrackEl = document.getElementById('fullscreen-next-track');
const lyricsToggleBtn = document.getElementById('toggle-fullscreen-lyrics-btn');