zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(packages): add hotkey bindings to preset skins (#1264)

Browse Source
This commit is contained in:
rahim
2026-04-07 19:46:44 -07:00
committed by GitHub
parent 2d702ba1dd
commit 9912a8e759
11 changed files with 137 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/presets/audio/skin.tsx
+17
View File
@@ -11,6 +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 { MuteButton } from '@/ui/mute-button';
import { PlayButton } from '@/ui/play-button';
import { PlaybackRateButton } from '@/ui/playback-rate-button';
@@ -155,6 +156,22 @@ export function AudioSkin(props: AudioSkinProps): ReactNode {
</div>
</Tooltip.Provider>
</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="Shift+>" action="speedUp" />
<MediaHotkey keys="Shift+<" action="speedDown" />
</Container>
);
}
packages/react/src/presets/video/skin.tsx
+20
View File
@@ -23,6 +23,7 @@ import { CaptionsButton } from '@/ui/captions-button';
import { Controls } from '@/ui/controls';
import { ErrorDialog } from '@/ui/error-dialog';
import { FullscreenButton } from '@/ui/fullscreen-button';
import { MediaHotkey } from '@/ui/hotkey/media-hotkey';
import { MuteButton } from '@/ui/mute-button';
import { PiPButton } from '@/ui/pip-button';
import { PlayButton } from '@/ui/play-button';
@@ -229,6 +230,25 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
</Controls.Root>
<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="togglePiP" />
<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="Shift+>" action="speedUp" />
<MediaHotkey keys="Shift+<" action="speedDown" />
</Container>
);
}