Add keyboard-shortcut help overlay

Press '?' to open a styled overlay showing all keyboard shortcuts,
Esc to close. Lists Space (play/pause), arrow keys (seek/volume),
F (fullscreen), M (mute), ? (help), Esc (close).

Files:
- frontend/app.js: toggleShortcutHelp(), wireShortcutHelp(), '?' and Esc handlers
- frontend/index.html: shortcut-overlay markup with .shortcut-grid
- frontend/styles.css: .shortcut-overlay, .shortcut-panel, .shortcut-row, kbd styles
This commit is contained in:
Jonathan Sykes
2026-06-14 14:19:42 +08:00
parent da2ad27244
commit c676786144
7 changed files with 108 additions and 2 deletions

View File

@@ -944,7 +944,24 @@ function deletePlaylist(pl) {
]);
}
// ---------- Modal ----------
// ============================================================================
// Keyboard shortcut help overlay
// ============================================================================
function toggleShortcutHelp() {
const overlay = $('shortcutHelp');
overlay.classList.toggle('hidden');
}
function wireShortcutHelp() {
$('shortcutClose').addEventListener('click', () => $('shortcutHelp').classList.add('hidden'));
$('shortcutHelp').addEventListener('click', (e) => {
if (e.target.id === 'shortcutHelp') $('shortcutHelp').classList.add('hidden');
});
}
// ============================================================================
// Modal
// ============================================================================
function showModal(title, bodyNode, actions) {
$('modalTitle').textContent = title;
const body = $('modalBody');
@@ -1087,6 +1104,8 @@ function wireUI() {
else if (e.code === 'ArrowLeft') Player.seek(Math.max(0, Player.master.currentTime - 5));
else if (e.key === 'f') els.fsBtn.click();
else if (e.key === 'm') els.muteBtn.click();
else if (e.key === '?') toggleShortcutHelp();
else if (e.key === 'Escape' && !$('shortcutHelp').classList.contains('hidden')) { $('shortcutHelp').classList.add('hidden'); }
});
$('modal').addEventListener('click', (e) => { if (e.target.id === 'modal') closeModal(); });
@@ -1098,6 +1117,7 @@ function wireUI() {
async function boot() {
wirePlayerEvents();
wireUI();
wireShortcutHelp();
try {
const loaded = await API.loadData();
if (loaded && typeof loaded === 'object') {