player components

2026-03-29 06:40:45 +03:00
parent 02d65fbeeb
commit 9a4f5a4bf5
25 changed files with 4795 additions and 0 deletions
@@ -0,0 +1,130 @@
+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>
+  )
+}