Martin Bauer
a3b2c0ce2f
Ctrl+h/j/k/l move the highlight in whatever list is on screen - the browse grid, search results, or an open album's track list - the same job the arrow keys already do, just reachable without leaving the home row. Ctrl+d/u add vim's own half-page jump. Shift+h/j/k/l/m are transport (previous/next, volume, mute) from anywhere, including the room page, matching the muscle memory of other vim-ish media apps; every other Shift+letter still reaches search untouched; only the shifted letter form of those five keys is intercepted. Shift+Enter opens an album's track list (the keyboard equivalent of clicking its cover, which had no key of its own until now) instead of playing it outright; Ctrl+j/k then move a visible highlight through that list, and Enter plays whichever track is highlighted. Falls back to plain ENTER's behaviour for a category tile or a podcast episode, neither of which has a track list to show. Mute (Shift+M) is new - nothing was bound to it before. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
/** The Zaubertasten sheet (F1). Mirrors lib/keyboard.ts - if a binding changes there,
|
||
* it changes here. */
|
||
|
||
const KEYS: Array<[caps: string[], label: string]> = [
|
||
[["LEER"], "Play / Pause"],
|
||
[["SHIFT+H", "SHIFT+L"], "Song zurück / vor"],
|
||
[["SHIFT+J", "SHIFT+K"], "Leiser / lauter"],
|
||
[["SHIFT+M"], "Stumm"],
|
||
[["⇧←", "⇧→"], "15 Sekunden zurück / vor"],
|
||
[["← ↑ ↓ →"], "Auswahl bewegen"],
|
||
[["CTRL+H/J/K/L"], "Auswahl bewegen (Raster oder Titelliste)"],
|
||
[["CTRL+D", "CTRL+U"], "Eine halbe Seite weiter / zurück"],
|
||
[["A-Z"], "Album oder Hörbuch suchen"],
|
||
[["?"], "Einzelne Titel suchen"],
|
||
[["TAB"], "Musik / Hörbücher / Podcasts"],
|
||
[["ENTER"], "Auswahl abspielen"],
|
||
[["⇧ENTER"], "Titelliste öffnen"],
|
||
[["A", "0-9"], "Aktuellen Titel einer Fernbedienungs-Taste zuweisen"],
|
||
[["F1"], "Diese Hilfe"],
|
||
[["ESC"], "Schließen / Suche löschen"],
|
||
];
|
||
|
||
export function HelpOverlay({ onClose }: { onClose: () => void }) {
|
||
return (
|
||
<div className="overlay" style={{ zIndex: 5 }} onClick={onClose}>
|
||
<div className="sheet" style={{ padding: "26px 30px", width: 330 }}>
|
||
<div
|
||
style={{
|
||
fontSize: 17,
|
||
fontWeight: 800,
|
||
color: "var(--ink)",
|
||
marginBottom: 14,
|
||
letterSpacing: 0.3,
|
||
}}
|
||
>
|
||
⌨️ Zaubertasten
|
||
</div>
|
||
<div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
|
||
{KEYS.map(([caps, label]) => (
|
||
<div key={label} style={{ display: "flex", alignItems: "center", gap: 10 }}>
|
||
<div style={{ display: "flex", gap: 4 }}>
|
||
{caps.map((cap) => (
|
||
<div key={cap} className="key-cap" style={{ minWidth: caps.length > 1 ? 0 : 56 }}>
|
||
{cap}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div style={{ fontSize: 14, fontWeight: 700, color: "oklch(35% 0.03 210)" }}>
|
||
{label}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div
|
||
style={{
|
||
marginTop: 16,
|
||
fontSize: 12,
|
||
fontWeight: 600,
|
||
color: "oklch(50% 0.03 210 / .8)",
|
||
textAlign: "center",
|
||
}}
|
||
>
|
||
Tippe irgendwohin, um zu schließen
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|