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

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;