fix(react): rename MediaGesture and MediaHotkey to Gesture and Hotkey (#1374)

internal/design/ui/gesture.md

@@ -34,20 +34,20 @@ The component accepts additional props as needed (e.g. `value` for seek offset,
 
 ```tsx
 {/* Full surface gestures */}
-<MediaGesture type="tap" action="togglePaused" />
-<MediaGesture type="swipe" action="seek" axis="x" threshold={30} />
+<Gesture type="tap" action="togglePaused" />
+<Gesture type="swipe" action="seek" axis="x" threshold={30} />
 
 {/* Regions */}
-<MediaGesture type="doubletap" action="seek" value={-10} region="left" />
-<MediaGesture type="doubletap" action="toggleFullscreen" region="center" />
-<MediaGesture type="doubletap" action="seek" value={10} region="right" />
+<Gesture type="doubletap" action="seek" value={-10} region="left" />
+<Gesture type="doubletap" action="toggleFullscreen" region="center" />
+<Gesture type="doubletap" action="seek" value={10} region="right" />
 
 {/* Pointer filtering */}
-<MediaGesture pointer="touch" type="tap" action="toggleControls" />
-<MediaGesture pointer="mouse" type="tap" action="togglePaused" />
+<Gesture pointer="touch" type="tap" action="toggleControls" />
+<Gesture pointer="mouse" type="tap" action="togglePaused" />
 
 {/* Callback region — full control over hit testing */}
-<MediaGesture
+<Gesture
   type="doubletap"
   action="seek"
   value={-10}
@@ -83,7 +83,7 @@ When omitted, the gesture covers the full container surface. Full-surface gestur
 In React, `region` also accepts a callback that receives the gesture state and returns `true` or `false`. This gives full programmatic control over hit testing for custom zones that don't fit the `left` / `center` / `right` model:
 
 ```tsx
-<MediaGesture
+<Gesture
   type="swipe"
   action="setVolume"
   region={(state) => state.x > state.containerWidth / 2}

internal/design/ui/hotkey.md

@@ -71,11 +71,11 @@ Each element declares one binding. To bind multiple keys to the same action, use
 #### React
 
 ```tsx
-<MediaHotkey keys="k" action="togglePaused" />
-<MediaHotkey keys="ArrowRight" action="seekStep" value={5} />
-<MediaHotkey keys="ArrowLeft" action="seekStep" value={-5} />
-<MediaHotkey keys="ArrowUp" action="volumeStep" value={0.05} />
-<MediaHotkey keys=">" action="speedUp" />
+<Hotkey keys="k" action="togglePaused" />
+<Hotkey keys="ArrowRight" action="seekStep" value={5} />
+<Hotkey keys="ArrowLeft" action="seekStep" value={-5} />
+<Hotkey keys="ArrowUp" action="volumeStep" value={0.05} />
+<Hotkey keys=">" action="speedUp" />
 ```
 
 `keys` (not `key`) avoids collision with React's reserved `key` prop.

packages/react/src/index.ts

@@ -39,12 +39,12 @@ export type { ControlsGroupProps } from './ui/controls/controls-group';
 export type { ControlsRootProps } from './ui/controls/controls-root';
 export { ErrorDialog, type ErrorDialogContextValue, useErrorDialogContext } from './ui/error-dialog';
 export { FullscreenButton, type FullscreenButtonProps } from './ui/fullscreen-button/fullscreen-button';
-export { MediaGesture, type MediaGestureProps } from './ui/gesture/media-gesture';
+export { Gesture, type GestureProps, MediaGesture, type MediaGestureProps } from './ui/gesture/gesture';
 export { type UseDoubleTapGestureOptions, useDoubleTapGesture } from './ui/gesture/use-doubletap-gesture';
 export { type UseTapGestureOptions, useTapGesture } from './ui/gesture/use-tap-gesture';
 export { useButton } from './ui/hooks/use-button';
 export { useSlider } from './ui/hooks/use-slider';
-export { MediaHotkey, type MediaHotkeyProps } from './ui/hotkey/media-hotkey';
+export { Hotkey, type HotkeyProps, MediaHotkey, type MediaHotkeyProps } from './ui/hotkey/hotkey';
 export { useAriaKeyShortcuts } from './ui/hotkey/use-aria-key-shortcuts';
 export { type UseHotkeyOptions, useHotkey } from './ui/hotkey/use-hotkey';
 export { MuteButton, type MuteButtonProps } from './ui/mute-button/mute-button';

packages/react/src/presets/audio/skin.tsx

@@ -11,7 +11,7 @@ import { cn } from '@videojs/utils/style';
 import { type ComponentProps, forwardRef, type ReactNode } from 'react';
 import { Container, usePlayer } from '@/player/context';
 import { ErrorDialog } from '@/ui/error-dialog';
-import { MediaHotkey } from '@/ui/hotkey/media-hotkey';
+import { Hotkey } from '@/ui/hotkey/hotkey';
 import { MuteButton } from '@/ui/mute-button';
 import { PlayButton } from '@/ui/play-button';
 import { PlaybackRateButton } from '@/ui/playback-rate-button';
@@ -158,20 +158,20 @@ export function AudioSkin(props: AudioSkinProps): ReactNode {
       </div>
 
       {/* Hotkeys */}
-      <MediaHotkey keys="Space" action="togglePaused" />
-      <MediaHotkey keys="k" action="togglePaused" />
-      <MediaHotkey keys="m" action="toggleMuted" />
-      <MediaHotkey keys="ArrowRight" action="seekStep" value={5} />
-      <MediaHotkey keys="ArrowLeft" action="seekStep" value={-5} />
-      <MediaHotkey keys="l" action="seekStep" value={10} />
-      <MediaHotkey keys="j" action="seekStep" value={-10} />
-      <MediaHotkey keys="ArrowUp" action="volumeStep" value={0.05} />
-      <MediaHotkey keys="ArrowDown" action="volumeStep" value={-0.05} />
-      <MediaHotkey keys="0-9" action="seekToPercent" />
-      <MediaHotkey keys="Home" action="seekToPercent" value={0} />
-      <MediaHotkey keys="End" action="seekToPercent" value={100} />
-      <MediaHotkey keys=">" action="speedUp" />
-      <MediaHotkey keys="<" action="speedDown" />
+      <Hotkey keys="Space" action="togglePaused" />
+      <Hotkey keys="k" action="togglePaused" />
+      <Hotkey keys="m" action="toggleMuted" />
+      <Hotkey keys="ArrowRight" action="seekStep" value={5} />
+      <Hotkey keys="ArrowLeft" action="seekStep" value={-5} />
+      <Hotkey keys="l" action="seekStep" value={10} />
+      <Hotkey keys="j" action="seekStep" value={-10} />
+      <Hotkey keys="ArrowUp" action="volumeStep" value={0.05} />
+      <Hotkey keys="ArrowDown" action="volumeStep" value={-0.05} />
+      <Hotkey keys="0-9" action="seekToPercent" />
+      <Hotkey keys="Home" action="seekToPercent" value={0} />
+      <Hotkey keys="End" action="seekToPercent" value={100} />
+      <Hotkey keys=">" action="speedUp" />
+      <Hotkey keys="<" action="speedDown" />
     </Container>
   );
 }

packages/react/src/presets/video/skin.tsx

@@ -26,8 +26,8 @@ import { CastButton } from '@/ui/cast-button';
 import { Controls } from '@/ui/controls';
 import { ErrorDialog } from '@/ui/error-dialog';
 import { FullscreenButton } from '@/ui/fullscreen-button';
-import { MediaGesture } from '@/ui/gesture/media-gesture';
-import { MediaHotkey } from '@/ui/hotkey/media-hotkey';
+import { Gesture } from '@/ui/gesture/gesture';
+import { Hotkey } from '@/ui/hotkey/hotkey';
 import { MuteButton } from '@/ui/mute-button';
 import { PiPButton } from '@/ui/pip-button';
 import { PlayButton } from '@/ui/play-button';
@@ -248,30 +248,30 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
       <div className="media-overlay" />
 
       {/* Hotkeys */}
-      <MediaHotkey keys="Space" action="togglePaused" />
-      <MediaHotkey keys="k" action="togglePaused" />
-      <MediaHotkey keys="m" action="toggleMuted" />
-      <MediaHotkey keys="f" action="toggleFullscreen" />
-      <MediaHotkey keys="c" action="toggleSubtitles" />
-      <MediaHotkey keys="i" action="togglePictureInPicture" />
-      <MediaHotkey keys="ArrowRight" action="seekStep" value={5} />
-      <MediaHotkey keys="ArrowLeft" action="seekStep" value={-5} />
-      <MediaHotkey keys="l" action="seekStep" value={10} />
-      <MediaHotkey keys="j" action="seekStep" value={-10} />
-      <MediaHotkey keys="ArrowUp" action="volumeStep" value={0.05} />
-      <MediaHotkey keys="ArrowDown" action="volumeStep" value={-0.05} />
-      <MediaHotkey keys="0-9" action="seekToPercent" />
-      <MediaHotkey keys="Home" action="seekToPercent" value={0} />
-      <MediaHotkey keys="End" action="seekToPercent" value={100} />
-      <MediaHotkey keys=">" action="speedUp" />
-      <MediaHotkey keys="<" action="speedDown" />
+      <Hotkey keys="Space" action="togglePaused" />
+      <Hotkey keys="k" action="togglePaused" />
+      <Hotkey keys="m" action="toggleMuted" />
+      <Hotkey keys="f" action="toggleFullscreen" />
+      <Hotkey keys="c" action="toggleSubtitles" />
+      <Hotkey keys="i" action="togglePictureInPicture" />
+      <Hotkey keys="ArrowRight" action="seekStep" value={5} />
+      <Hotkey keys="ArrowLeft" action="seekStep" value={-5} />
+      <Hotkey keys="l" action="seekStep" value={10} />
+      <Hotkey keys="j" action="seekStep" value={-10} />
+      <Hotkey keys="ArrowUp" action="volumeStep" value={0.05} />
+      <Hotkey keys="ArrowDown" action="volumeStep" value={-0.05} />
+      <Hotkey keys="0-9" action="seekToPercent" />
+      <Hotkey keys="Home" action="seekToPercent" value={0} />
+      <Hotkey keys="End" action="seekToPercent" value={100} />
+      <Hotkey keys=">" action="speedUp" />
+      <Hotkey keys="<" action="speedDown" />
 
       {/* Gestures */}
-      <MediaGesture type="tap" action="togglePaused" pointer="mouse" region="center" />
-      <MediaGesture type="tap" action="toggleControls" pointer="touch" />
-      <MediaGesture type="doubletap" action="seekStep" value={-10} region="left" />
-      <MediaGesture type="doubletap" action="toggleFullscreen" region="center" />
-      <MediaGesture type="doubletap" action="seekStep" value={10} region="right" />
+      <Gesture type="tap" action="togglePaused" pointer="mouse" region="center" />
+      <Gesture type="tap" action="toggleControls" pointer="touch" />
+      <Gesture type="doubletap" action="seekStep" value={-10} region="left" />
+      <Gesture type="doubletap" action="toggleFullscreen" region="center" />
+      <Gesture type="doubletap" action="seekStep" value={10} region="right" />
     </Container>
   );
 }

packages/react/src/ui/gesture/gesture.tsx

@@ -14,7 +14,7 @@ import { useEffect } from 'react';
 
 import { useContainer, usePlayer } from '../../player/context';
 
-export interface MediaGestureProps {
+export interface GestureProps {
   type: 'tap' | 'doubletap' | (string & {});
   action: GestureActionName | (string & {});
   value?: number;
@@ -23,7 +23,7 @@ export interface MediaGestureProps {
   disabled?: boolean;
 }
 
-export function MediaGesture({ type, action, value, pointer, region, disabled }: MediaGestureProps): ReactNode {
+export function Gesture({ type, action, value, pointer, region, disabled }: GestureProps): ReactNode {
   const store = usePlayer() as AnyPlayerStore;
   const container = useContainer();
 
@@ -48,3 +48,13 @@ export function MediaGesture({ type, action, value, pointer, region, disabled }:
 
   return null;
 }
+
+export namespace Gesture {
+  export type Props = GestureProps;
+}
+
+/** @deprecated Use `GestureProps` instead. */
+export type MediaGestureProps = GestureProps;
+
+/** @deprecated Use `Gesture` instead. */
+export const MediaGesture = Gesture;

packages/react/src/ui/hotkey/hotkey.tsx

@@ -12,7 +12,7 @@ import { useEffect } from 'react';
 
 import { useContainer, usePlayer } from '../../player/context';
 
-export interface MediaHotkeyProps {
+export interface HotkeyProps {
   keys: string;
   action: HotkeyActionName | (string & {});
   value?: number;
@@ -20,7 +20,7 @@ export interface MediaHotkeyProps {
   target?: 'player' | 'document';
 }
 
-export function MediaHotkey({ keys, action, value, disabled, target }: MediaHotkeyProps): ReactNode {
+export function Hotkey({ keys, action, value, disabled, target }: HotkeyProps): ReactNode {
   const store = usePlayer() as AnyPlayerStore;
   const container = useContainer();
 
@@ -44,3 +44,13 @@ export function MediaHotkey({ keys, action, value, disabled, target }: MediaHotk
 
   return null;
 }
+
+export namespace Hotkey {
+  export type Props = HotkeyProps;
+}
+
+/** @deprecated Use `HotkeyProps` instead. */
+export type MediaHotkeyProps = HotkeyProps;
+
+/** @deprecated Use `Hotkey` instead. */
+export const MediaHotkey = Hotkey;

site/src/content/docs/reference/player-container.mdx

@@ -122,8 +122,8 @@ Media discovery is handled by the provider, not the container. Custom media elem
 The container is where user intent enters the player. It listens for physical interaction on its surface and translates that into player behavior:
 
 - **User activity** — Mouse movement, touch, and keyboard activity within the container drive idle detection. This is how controls know when to show and hide.
-- **Gestures** *(coming soon)* — Click-to-play, double-click fullscreen, swipe to seek, and other touch/mouse gestures.
-- **Keyboard controls** *(coming soon)* — Spacebar to play/pause, arrow keys to seek, and other keyboard shortcuts scoped to the container.
+- **Gestures** — Click-to-play, double-click fullscreen, swipe to seek, and other touch/mouse gestures. Configured via the `Gesture` component.
+- **Keyboard controls** — Spacebar to play/pause, arrow keys to seek, and other keyboard shortcuts scoped to the container. Configured via the `Hotkey` component.
 
 ## Relationship to skins