vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

FEAT: add desktop navigation buttons (back/forward)

Browse source
This commit is contained in:
Julien Maille 2026-01-02 23:33:28 +01:00
parent 06c649de7b
commit 0791c59f15
3 changed files with 75 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
index.html
View file

@ -143,6 +143,14 @@
<main class="main-content">
<div id="page-background"></div>
<header class="main-header">
<div class="navigation-controls desktop-only">
<button id="nav-back" class="nav-btn" title="Go Back">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
</button>
<button id="nav-forward" class="nav-btn" title="Go Forward">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
</button>
</div>
<button class="hamburger-menu" id="hamburger-btn" title="Open navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="3" y1="12" x2="21" y2="12"></line>

36
js/app.js
View file

@ -248,6 +248,14 @@ document.addEventListener('DOMContentLoaded', async () => {
ui.closeFullscreenCover();
});
document.getElementById('nav-back')?.addEventListener('click', () => {
window.history.back();
});
document.getElementById('nav-forward')?.addEventListener('click', () => {
window.history.forward();
});
document.getElementById('toggle-lyrics-btn')?.addEventListener('click', async (e) => {
e.stopPropagation();
if (!player.currentTrack) {
@ -636,6 +644,34 @@ document.addEventListener('DOMContentLoaded', async () => {
router();
window.addEventListener('hashchange', router);
// Simple Navigation History
const navStack = [window.location.hash];
let navIndex = 0;
const updateNavButtons = () => {
const backBtn = document.getElementById('nav-back');
const fwdBtn = document.getElementById('nav-forward');
if (backBtn) backBtn.disabled = navIndex <= 0;
if (fwdBtn) fwdBtn.disabled = navIndex >= navStack.length - 1;
};
window.addEventListener('hashchange', () => {
const hash = window.location.hash;
if (hash === navStack[navIndex]) return;
if (navIndex > 0 && hash === navStack[navIndex - 1]) {
navIndex--; // User went back
} else if (navIndex < navStack.length - 1 && hash === navStack[navIndex + 1]) {
navIndex++; // User went forward
} else {
navIndex++;
navStack.splice(navIndex); // Truncate forward history
navStack.push(hash);
}
updateNavButtons();
});
updateNavButtons();
audioPlayer.addEventListener('play', () => {
updateTabTitle(player);
});

31
styles.css
View file

@ -430,6 +430,37 @@ kbd {
position: relative;
}
.navigation-controls {
display: flex;
gap: 0.5rem;
align-items: center;
}
.nav-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--card);
border: none;
color: var(--foreground);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.nav-btn:hover {
background-color: var(--secondary);
transform: scale(1.05);
}
.nav-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.hamburger-menu {
display: none;
background: transparent;