Hook
useKeyboardShortcuts
Registers keyboard shortcuts for the player. Automatically disabled on input elements.
Registered shortcuts
| Key | Action | Control method |
|---|---|---|
| Space | Play / Pause | controls.togglePlay() |
| F | Toggle fullscreen | controls.toggleFullscreen() |
| M | Toggle mute | controls.toggleMute() |
| ArrowLeft | Seek -10s | controls.seekRelative(-10) |
| ArrowRight | Seek +10s | controls.seekRelative(10) |
Options
| Prop | Type | Default | Description |
|---|---|---|---|
| enabled | boolean | true | Whether keyboard shortcuts are active. |
| controls* | PlayerControls | — | The controls object from useYtcnPlayer. |
Input safety
Auto-disabled on form elements
The hook checks
document.activeElement before firing any action. If focus is on an input, textarea, or contenteditable element, the shortcut is silently ignored.Usage
custom-shortcuts.tsx
import { useKeyboardShortcuts } from "@/hooks/ytcn/use-keyboard-shortcuts"
// Inside your custom player:
useKeyboardShortcuts({
enabled: keyboardShortcuts,
controls,
})