fix(skin): use <media-controls-group> / <Controls.Group> components

[sampotts]

Following on from #1727 where I added <media-controls> / <Controls.Root>, this adds usage of <media-controls-group> / <Controls.Group> components where applicable.

---

Note

Low Risk
Markup-only refactor across preset templates with preserved class names; low chance of layout regressions unless custom CSS targeted generic divs inside controls.

Overview
Preset control bars now group related UI with media-controls-group (HTML skins) and Controls.Group (React presets) instead of bare <div> wrappers under media-controls / Controls.Root, continuing the controls work from #1727.

The swap is applied across audio, video, and live variants (default + minimal, CSS + Tailwind). Existing layout classes (media-button-group, media-time-controls, grow, Tailwind tokens, etc.) stay on the new elements so styling should be unchanged; only the DOM semantics change. Live layouts still use empty spacer groups where they did before (e.g. grow or media-time-controls with aria-hidden).

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

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	Jun 24, 2026 1:22am

[github-actions]

📦 Bundle Size Report

🎨 @videojs/html — no changes

Presets (7)

Entry	Initial
/video (default)	44.54 kB
/video (default + hls)	184.01 kB
/video (minimal)	44.21 kB
/video (minimal + hls)	183.75 kB
/audio (default)	38.29 kB
/audio (minimal)	37.04 kB
/background	4.35 kB

Media (10)

Entry	Initial
/media/background-video	1.15 kB
/media/container	1.75 kB
/media/dash-video	242.64 kB
/media/hls-video	141.27 kB
/media/mux-audio	163.77 kB
/media/mux-video	163.73 kB
/media/native-hls-video	9.06 kB
/media/simple-hls-audio-only	17.16 kB
/media/simple-hls-video	18.72 kB
/media/vimeo-video	12.33 kB

Players (5)

Entry	Initial
/video/player	8.23 kB
/audio/player	5.53 kB
/background/player	4.09 kB
/live-video/player	7.78 kB
/live-audio/player	5.54 kB

Skins (30)

Entry	Type	Initial
/video/minimal-skin.css	css	5.45 kB
/video/skin.css	css	5.43 kB
/video/minimal-skin	js	44.26 kB
/video/minimal-skin.tailwind	js	44.78 kB
/video/skin	js	44.53 kB
/video/skin.tailwind	js	45.16 kB
/audio/minimal-skin.css	css	3.60 kB
/audio/skin.css	css	3.53 kB
/audio/minimal-skin	js	37.01 kB
/audio/minimal-skin.tailwind	js	37.42 kB
/audio/skin	js	38.33 kB
/audio/skin.tailwind	js	38.64 kB
/background/skin.css	css	133 B
/background/skin	js	1.14 kB
/live-video/minimal-skin.css	css	5.45 kB
/live-video/skin.css	css	5.43 kB
/live-video/minimal-skin	js	43.31 kB
/live-video/minimal-skin.tailwind	js	43.77 kB
/live-video/skin	js	43.32 kB
/live-video/skin.tailwind	js	43.79 kB
/live-audio/minimal-skin.css	css	3.60 kB
/live-audio/skin.css	css	3.53 kB
/live-audio/minimal-skin	js	30.12 kB
/live-audio/minimal-skin.tailwind	js	29.61 kB
/live-audio/skin	js	31.49 kB
/live-audio/skin.tailwind	js	31.12 kB
/global.css	css	176 B
/shared.css	css	88 B
/tailwind.css	css	228 B
/skin-element	js	1.44 kB

UI Components (38)

Entry	Initial
/ui/airplay-button	2.40 kB
/ui/alert-dialog	2.56 kB
/ui/alert-dialog-close	2.30 kB
/ui/alert-dialog-description	2.28 kB
/ui/alert-dialog-title	2.28 kB
/ui/buffering-indicator	2.27 kB
/ui/captions-button	2.42 kB
/ui/captions-radio-group	2.79 kB
/ui/cast-button	2.44 kB
/ui/compounds	2.98 kB
/ui/controls	2.72 kB
/ui/error-dialog	2.74 kB
/ui/fullscreen-button	2.41 kB
/ui/hotkey	2.40 kB
/ui/menu	2.76 kB
/ui/mute-button	2.45 kB
/ui/pip-button	2.41 kB
/ui/play-button	2.38 kB
/ui/playback-rate-button	2.43 kB
/ui/playback-rate-radio-group	2.90 kB
/ui/popover	2.77 kB
/ui/poster	2.36 kB
/ui/quality-radio-group	2.81 kB
/ui/seek-button	2.39 kB
/ui/seek-indicator	2.43 kB
/ui/seek-indicator-value	546 B
/ui/slider	2.75 kB
/ui/status-announcer	2.31 kB
/ui/status-indicator	2.46 kB
/ui/status-indicator-value	561 B
/ui/thumbnail	2.20 kB
/ui/time	2.72 kB
/ui/time-slider	2.77 kB
/ui/tooltip	2.72 kB
/ui/volume-indicator	2.43 kB
/ui/volume-indicator-fill	554 B
/ui/volume-indicator-value	483 B
/ui/volume-slider	2.75 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes

Presets (7)

Entry	Initial
/video (default)	36.98 kB
/video (default + hls)	175.34 kB
/video (minimal)	37.03 kB
/video (minimal + hls)	175.42 kB
/audio (default)	30.26 kB
/audio (minimal)	30.24 kB
/background	752 B

Media (9)

Entry	Initial
/media/background-video	575 B
/media/dash-video	241.23 kB
/media/hls-video	139.80 kB
/media/mux-audio	162.26 kB
/media/mux-video	162.26 kB
/media/native-hls-video	7.39 kB
/media/simple-hls-audio-only	15.56 kB
/media/simple-hls-video	17.15 kB
/media/vimeo-video	10.58 kB

Skins (27)

Entry	Type	Initial
/tailwind.css	css	228 B
/video/minimal-skin.css	css	5.37 kB
/video/skin.css	css	5.34 kB
/video/minimal-skin	js	36.91 kB
/video/minimal-skin.tailwind	js	42.69 kB
/video/skin	js	36.86 kB
/video/skin.tailwind	js	42.67 kB
/audio/minimal-skin.css	css	3.47 kB
/audio/skin.css	css	3.39 kB
/audio/minimal-skin	js	30.18 kB
/audio/minimal-skin.tailwind	js	31.95 kB
/audio/skin	js	30.17 kB
/audio/skin.tailwind	js	33.97 kB
/background/skin.css	css	90 B
/background/skin	js	272 B
/live-video/minimal-skin.css	css	5.37 kB
/live-video/skin.css	css	5.34 kB
/live-video/minimal-skin	js	32.71 kB
/live-video/minimal-skin.tailwind	js	38.36 kB
/live-video/skin	js	32.71 kB
/live-video/skin.tailwind	js	38.36 kB
/live-audio/minimal-skin.css	css	3.47 kB
/live-audio/skin.css	css	3.39 kB
/live-audio/minimal-skin	js	22.03 kB
/live-audio/minimal-skin.tailwind	js	24.88 kB
/live-audio/skin	js	22.03 kB
/live-audio/skin.tailwind	js	25.01 kB

UI Components (32)

Entry	Initial
/ui/airplay-button	2.34 kB
/ui/alert-dialog	2.27 kB
/ui/buffering-indicator	2.17 kB
/ui/captions-button	2.29 kB
/ui/captions-radio-group	2.22 kB
/ui/cast-button	2.31 kB
/ui/controls	2.11 kB
/ui/error-dialog	2.33 kB
/ui/fullscreen-button	2.31 kB
/ui/gesture	2.33 kB
/ui/hotkey	2.29 kB
/ui/live-button	2.18 kB
/ui/menu	2.48 kB
/ui/mute-button	2.34 kB
/ui/pip-button	2.32 kB
/ui/play-button	2.34 kB
/ui/playback-rate	2.17 kB
/ui/playback-rate-button	2.34 kB
/ui/popover	2.67 kB
/ui/poster	2.10 kB
/ui/quality	2.16 kB
/ui/seek-button	2.33 kB
/ui/seek-indicator	2.24 kB
/ui/slider	2.34 kB
/ui/status-announcer	2.19 kB
/ui/status-indicator	2.19 kB
/ui/thumbnail	2.11 kB
/ui/time	2.10 kB
/ui/time-slider	2.32 kB
/ui/tooltip	2.72 kB
/ui/volume-indicator	2.14 kB
/ui/volume-slider	2.38 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes

Entries (14)

Entry	Initial
.	9.10 kB
/dom	17.02 kB
/dom/media/custom-media-element	2.09 kB
/dom/media/dash	236.88 kB
/dom/media/google-cast	4.04 kB
/dom/media/hls	135.63 kB
/dom/media/media-host	1.25 kB
/dom/media/media-played-ranges	576 B
/dom/media/mux	151.26 kB
/dom/media/native-hls	3.05 kB
/dom/media/simple-hls	16.47 kB
/dom/media/simple-hls-audio-only	14.92 kB
/dom/media/vimeo	9.86 kB
/media/predicate	561 B

🏷️ @videojs/element — no changes

Entries (2)

Entry	Initial
.	996 B
/context	943 B

📦 @videojs/store — no changes

Entries (3)

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

🔧 @videojs/utils — no changes

Entries (10)

Entry	Initial
/array	104 B
/dom	2.26 kB
/events	319 B
/function	327 B
/object	275 B
/predicate	265 B
/string	231 B
/style	190 B
/time	478 B
/number	158 B

📦 @videojs/spf — no changes

Entries (4)

Entry	Initial
.	4.45 kB
/dom	6.33 kB
/hls	15.37 kB
/background-looping-video	12.90 kB

---

ℹ️ How to interpret

JS sizes are initial static graph totals (minified + brotli). Lazy dynamic chunks are shown separately when present.

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

Run pnpm size locally to check current initial sizes.

[mihar-22]

Sam I've already ported over to using Controls in compiler-land. I'm going to close this out but please let me know if this has noticeable impact on UX or any reason we need this through now. Thankssss!