131 lines
4.8 KiB
TypeScript
131 lines
4.8 KiB
TypeScript
import { useEffect } from 'react'
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
import { X } from '../../lib/icons'
|
|
import { SHORTCUTS, type ShortcutCategory } from '../../lib/player-shortcuts'
|
|
import { usePreferencesStore } from '../../stores/preferences-store'
|
|
|
|
interface Props {
|
|
open: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
const CATEGORY_LABELS: Record<ShortcutCategory, string> = {
|
|
playback: 'Playback',
|
|
audio: 'Audio',
|
|
subtitles: 'Subtitles',
|
|
tools: 'Tools',
|
|
view: 'View',
|
|
navigation: 'Navigation',
|
|
}
|
|
|
|
const CATEGORY_ORDER: ShortcutCategory[] = [
|
|
'playback',
|
|
'audio',
|
|
'subtitles',
|
|
'view',
|
|
'tools',
|
|
'navigation',
|
|
]
|
|
|
|
function prettyKey(binding: string): string[] {
|
|
return binding.split('+').map(p => {
|
|
if (p === ' ') return 'Space'
|
|
if (p === 'ArrowLeft') return '←'
|
|
if (p === 'ArrowRight') return '→'
|
|
if (p === 'ArrowUp') return '↑'
|
|
if (p === 'ArrowDown') return '↓'
|
|
if (p === 'Escape') return 'Esc'
|
|
return p
|
|
})
|
|
}
|
|
|
|
export default function KeyboardHints({ open, onClose }: Props) {
|
|
const overrides = usePreferencesStore(s => s.keyboardShortcuts)
|
|
|
|
useEffect(() => {
|
|
if (!open) return
|
|
function onKey(e: KeyboardEvent) {
|
|
if (e.key === 'Escape' || e.key === '?') {
|
|
e.preventDefault()
|
|
onClose()
|
|
}
|
|
}
|
|
window.addEventListener('keydown', onKey, true)
|
|
return () => window.removeEventListener('keydown', onKey, true)
|
|
}, [open, onClose])
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{open && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.18 }}
|
|
className="absolute inset-0 z-toast grid place-items-center bg-black/70 backdrop-blur-sm"
|
|
onClick={onClose}
|
|
>
|
|
<motion.div
|
|
initial={{ y: 20, scale: 0.96 }}
|
|
animate={{ y: 0, scale: 1 }}
|
|
exit={{ y: 20, scale: 0.96 }}
|
|
transition={{ duration: 0.32, ease: [0.16, 1, 0.3, 1] }}
|
|
onClick={e => e.stopPropagation()}
|
|
className="bg-[#0c0a08]/96 backdrop-blur-2xl border border-white/14 rounded-2xl w-[640px] max-w-[88vw] max-h-[80vh] overflow-y-auto content-scroll shadow-[0_30px_80px_-20px_rgba(0,0,0,0.85)]"
|
|
role="dialog"
|
|
aria-label="Keyboard shortcuts"
|
|
>
|
|
<header className="sticky top-0 px-6 py-4 bg-[#0c0a08]/96 backdrop-blur-2xl border-b border-white/8 flex items-center justify-between z-10">
|
|
<h2 className="font-display text-xl font-bold text-white tracking-tight">
|
|
Keyboard shortcuts
|
|
</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="w-8 h-8 grid place-items-center rounded-full text-white/70 hover:text-white hover:bg-white/10 transition-colors focus-ring"
|
|
aria-label="Close"
|
|
>
|
|
<X size={16} />
|
|
</button>
|
|
</header>
|
|
<div className="px-6 py-5 grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">
|
|
{CATEGORY_ORDER.map(cat => {
|
|
const items = SHORTCUTS.filter(s => s.category === cat)
|
|
if (items.length === 0) return null
|
|
return (
|
|
<div key={cat}>
|
|
<p className="text-[10px] uppercase tracking-[0.18em] font-semibold text-text-3 mb-3 leading-none">
|
|
{CATEGORY_LABELS[cat]}
|
|
</p>
|
|
<ul className="flex flex-col gap-2">
|
|
{items.map(sc => {
|
|
const keys = overrides[sc.id]?.length ? overrides[sc.id] : sc.keys
|
|
return (
|
|
<li key={sc.id} className="flex items-baseline gap-3">
|
|
<span className="text-[12.5px] text-text-2 leading-tight flex-1">
|
|
{sc.description}
|
|
</span>
|
|
<span className="flex items-center gap-1 shrink-0">
|
|
{prettyKey(keys[0]).map((k, i) => (
|
|
<kbd
|
|
key={i}
|
|
className="inline-flex items-center justify-center min-w-[22px] h-6 px-1.5 rounded text-[10.5px] font-mono font-medium text-text-1 bg-elevated border border-border tabular-nums"
|
|
>
|
|
{k}
|
|
</kbd>
|
|
))}
|
|
</span>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
)
|
|
}
|