Fix Android back gesture UX for fullscreen player and app exit
This commit is contained in:
parent
b320efa9b0
commit
08ca581c79
2 changed files with 41 additions and 4 deletions
44
js/app.js
44
js/app.js
|
|
@ -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);
|
||||
};
|
||||
|
|
|
|||
1
js/ui.js
1
js/ui.js
|
|
@ -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');
|
||||
|
|
|
|||
Loading…
Reference in a new issue