feat(packages): add hotkey bindings to preset skins

[mihar-22]

Closes #1263, #505

Summary

Wire up default keyboard shortcuts in the audio and video preset skins for both the HTML and React packages. The hotkey system (coordinator, actions, ARIA support) was already implemented — this adds the actual <media-hotkey> / <MediaHotkey> declarations to each skin so users get working keyboard controls out of the box.

Changes

• Audio skins (HTML + React): Space/k toggle play, m mute, arrow keys seek/volume, j/l skip 10s, 0-9/Home/End seek to percent, Shift+</> adjust speed.
• Video skins (HTML + React): Same as audio plus f fullscreen, c subtitles, i PiP.
• Import hotkey custom element registration in HTML audio/video ui.ts entry files.

Implementation notes

The video skin includes three extra bindings (fullscreen, subtitles, PiP) that don't apply to audio-only playback. All bindings use the declarative <media-hotkey> element in HTML and the <MediaHotkey> React component, both of which were already landed in prior PRs (#1238, #1239, #1241).

Testing

Covered by the existing hotkey element and coordinator tests from prior PRs. The preset skins are declarative templates — the hotkey elements are already tested at the component level.

---

Note

Low Risk
Low risk: changes are declarative UI additions that register and attach hotkey bindings, with primary risk being unexpected keybinding conflicts or behavior changes in embedded contexts.

Overview
Adds default hotkeys to the preset player skins so keyboard controls work out of the box in both packages/html and packages/react.

HTML audio/video skins now include <media-hotkey> declarations for common actions (play/pause, mute, seek, volume, rate; plus fullscreen/subtitles/PiP on video), and the HTML audio/ui.ts + video/ui.ts entrypoints now import ../ui/hotkey to ensure the custom element is registered.

React AudioSkin and VideoSkin similarly render <MediaHotkey> components with the same default bindings.

^{Reviewed by Cursor Bugbot for commit d25c1c3. Bugbot is set up for automated code reviews on this repo. Configure here.}

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	567bdae
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/69d562e211b94f000822656b
😎 Deploy Preview	https://deploy-preview-1264--vjs10-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	Apr 7, 2026 8:03pm

[github-actions]

📦 Bundle Size Report

🎨 @videojs/html

Path	Base	PR	Diff	%
/video/skin	25.14 kB	26.83 kB	+1.69 kB	+6.7%	🔺
/video/skin.tailwind	25.56 kB	27.02 kB	+1.47 kB	+5.7%	🔺
/audio/skin	23.27 kB	24.91 kB	+1.63 kB	+7.0%	🔺
/audio/skin.tailwind	23.64 kB	25.07 kB	+1.44 kB	+6.1%	🔺
/video (default)	25.16 kB	26.85 kB	+1.69 kB	+6.7%	🔺
/video (default + hls)	157.20 kB	158.88 kB	+1.68 kB	+1.1%	🔺
/audio (default)	23.29 kB	24.88 kB	+1.59 kB	+6.8%	🔺

Presets (7)

Entry	Size
/video (default)	26.85 kB
/video (default + hls)	158.88 kB
/video (minimal)	25.25 kB
/video (minimal + hls)	157.29 kB
/audio (default)	24.88 kB
/audio (minimal)	23.36 kB
/background	7.05 kB

Media (8)

Entry	Size
/media/background-video	1.04 kB
/media/container	1.73 kB
/media/dash-video	236.51 kB
/media/hls-video	133.61 kB
/media/mux-audio	156.33 kB
/media/mux-video	156.22 kB
/media/native-hls-video	3.62 kB
/media/simple-hls-video	15.04 kB

Players (3)

Entry	Size
/video/player	6.76 kB
/audio/player	6.76 kB
/background/player	6.75 kB

Skins (17)

Entry	Type	Size
/video/minimal-skin.css	css	3.43 kB
/video/skin.css	css	3.45 kB
/video/minimal-skin	js	25.22 kB
/video/minimal-skin.tailwind	js	25.53 kB
/video/skin	js	26.83 kB
/video/skin.tailwind	js	27.02 kB
/audio/minimal-skin.css	css	2.49 kB
/audio/skin.css	css	2.46 kB
/audio/minimal-skin	js	23.35 kB
/audio/minimal-skin.tailwind	js	23.56 kB
/audio/skin	js	24.91 kB
/audio/skin.tailwind	js	25.07 kB
/background/skin.css	css	117 B
/background/skin	js	1.15 kB
/base.css	css	157 B
/shared.css	css	88 B
/skin-element	js	1.35 kB

UI Components (23)

Entry	Size
/ui/alert-dialog	2.29 kB
/ui/alert-dialog-close	1.75 kB
/ui/alert-dialog-description	1.62 kB
/ui/alert-dialog-title	1.62 kB
/ui/buffering-indicator	1.91 kB
/ui/captions-button	2.03 kB
/ui/controls	1.94 kB
/ui/error-dialog	2.45 kB
/ui/fullscreen-button	2.07 kB
/ui/hotkey	1.60 kB
/ui/mute-button	2.06 kB
/ui/pip-button	2.06 kB
/ui/play-button	2.05 kB
/ui/playback-rate-button	2.03 kB
/ui/popover	2.45 kB
/ui/poster	1.87 kB
/ui/seek-button	2.05 kB
/ui/slider	1.72 kB
/ui/thumbnail	2.28 kB
/ui/time	1.72 kB
/ui/time-slider	1.99 kB
/ui/tooltip	2.51 kB
/ui/volume-slider	2.41 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react

Path	Base	PR	Diff	%
/video/skin	20.10 kB	21.60 kB	+1.50 kB	+7.5%	🔺
/audio/skin	16.87 kB	18.38 kB	+1.51 kB	+8.9%	🔺
/video (default)	20.14 kB	21.70 kB	+1.56 kB	+7.7%	🔺
/video (default + hls)	152.34 kB	153.85 kB	+1.51 kB	+1.0%	🔺
/audio (default)	16.92 kB	18.44 kB	+1.52 kB	+9.0%	🔺

Presets (7)

Entry	Size
/video (default)	21.70 kB
/video (default + hls)	153.85 kB
/video (minimal)	20.23 kB
/video (minimal + hls)	152.40 kB
/audio (default)	18.44 kB
/audio (minimal)	17.04 kB
/background	3.23 kB

Media (7)

Entry	Size
/media/background-video	575 B
/media/dash-video	236.54 kB
/media/hls-video	133.64 kB
/media/mux-audio	156.34 kB
/media/mux-video	156.29 kB
/media/native-hls-video	3.65 kB
/media/simple-hls-video	15.19 kB

Skins (14)

Entry	Type	Size
/video/minimal-skin.css	css	3.36 kB
/video/skin.css	css	3.38 kB
/video/minimal-skin	js	20.15 kB
/video/minimal-skin.tailwind	js	23.61 kB
/video/skin	js	21.60 kB
/video/skin.tailwind	js	23.68 kB
/audio/minimal-skin.css	css	2.38 kB
/audio/skin.css	css	2.34 kB
/audio/minimal-skin	js	16.97 kB
/audio/minimal-skin.tailwind	js	19.45 kB
/audio/skin	js	18.38 kB
/audio/skin.tailwind	js	19.45 kB
/background/skin.css	css	90 B
/background/skin	js	272 B

UI Components (19)

Entry	Size
/ui/alert-dialog	1.93 kB
/ui/buffering-indicator	1.75 kB
/ui/captions-button	1.97 kB
/ui/controls	1.65 kB
/ui/error-dialog	2.25 kB
/ui/fullscreen-button	1.97 kB
/ui/mute-button	1.99 kB
/ui/pip-button	1.95 kB
/ui/play-button	1.97 kB
/ui/playback-rate-button	1.96 kB
/ui/popover	3.42 kB
/ui/poster	1.55 kB
/ui/seek-button	1.97 kB
/ui/slider	3.00 kB
/ui/thumbnail	1.98 kB
/ui/time	1.25 kB
/ui/time-slider	3.28 kB
/ui/tooltip	2.65 kB
/ui/volume-slider	3.29 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes

Entries (8)

Entry	Size
.	5.29 kB
/dom	10.46 kB
/dom/media/custom-media-element	1.91 kB
/dom/media/dash	235.94 kB
/dom/media/hls	132.95 kB
/dom/media/mux	155.72 kB
/dom/media/native-hls	2.97 kB
/dom/media/simple-hls	14.53 kB

🏷️ @videojs/element — no changes

Entries (2)

Entry	Size
.	999 B
/context	943 B

📦 @videojs/store — no changes

Entries (3)

Entry	Size
.	1.39 kB
/html	696 B
/react	360 B

🔧 @videojs/utils — no changes

Entries (10)

Entry	Size
/array	104 B
/dom	1.73 kB
/events	319 B
/function	327 B
/object	247 B
/predicate	265 B
/string	148 B
/style	190 B
/time	478 B
/number	158 B

📦 @videojs/spf — no changes

Entries (3)

Entry	Size
.	40 B
/dom	12.45 kB
/playback-engine	12.41 kB

---

ℹ️ How to interpret

All sizes are standalone totals (minified + brotli).

Icon	Meaning
✅	No change
🔺	Increased ≤ 10%
🔴	Increased > 10%
🔽	Decreased
🆕	New (no baseline)

Run pnpm size locally to check current sizes.