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:
@@ -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') {
|
||||
|
||||
Reference in New Issue
Block a user