feat(react): implement video skins with responsive layout

[sampotts]

Summary

Implements default and minimal video skin presets for the React player, with container query-based responsive layout that adapts controls for different player widths.

Closes #548

Changes

• Add default and minimal video skin components with play, seek, mute, PiP, and fullscreen controls
• Add time display (current / duration) with BEM-style CSS class naming
• Use CSS container queries to adapt layout at breakpoints: hide seek buttons below 480px, collapse time display to duration-only on small sizes, adjust control bar padding and gap
• Button component accepts className prop for variant styling (e.g. media-button--seek)
• Refactor minimal skin to use <span> for inline layout groups and media-time-controls wrapper for flexible time/slider arrangement
• Fix ReferenceError: HTMLMediaElement is not defined in site build.

Testing

Manual: resize the player and verify controls adapt at breakpoints. Verify seek buttons hide at narrow widths and time display toggles between modes.

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
vjs-10-demo-react	Ignored	Preview	Feb 19, 2026 4:42am

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	9aee19b
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/699694ad29c173000762167c
😎 Deploy Preview	https://deploy-preview-568--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.

[github-actions]

📦 Bundle Size Report

Package	Size	Diff		%
@videojs/core	5.67 kB	-181 B	█████░░░	-3.0%	🔽
@videojs/element	1.60 kB	0 B	░░░░░░░░	0%	✅
@videojs/html	8.63 kB	-309 B	██████░░	-3.4%	🔽
@videojs/icons	3.46 kB	0 B	░░░░░░░░	0%	✅
@videojs/react	12.82 kB	-652 B	████████	-4.7%	🔽
@videojs/store	1.94 kB	0 B	░░░░░░░░	0%	✅
@videojs/utils	2.47 kB	0 B	░░░░░░░░	0%	✅

Total: 36.60 kB · -1.12 kB · -3.0%

---

Entry Breakdown

Subpath sizes are the additional bytes on top of the root entry point, measured by bundling root + subpath together and subtracting the root-only size.

@videojs/core

Entry	Base	PR	Diff	%
.	3.09 kB	3.09 kB	0 B	0%	✅
./dom	2.75 kB	2.58 kB	-181 B	-6.4%	🔽
total	5.85 kB	5.67 kB	-181 B	-3.0%

@videojs/element

Entry	Base	PR	Diff	%
.	817 B	817 B	0 B	0%	✅
./context	823 B	823 B	0 B	0%	✅
total	1.60 kB	1.60 kB	0 B	0%

@videojs/icons

Entry	Base	PR	Diff	%
./react	2.10 kB	2.10 kB	0 B	0%	✅
./html	1.37 kB	1.37 kB	0 B	0%	✅
total	3.46 kB	3.46 kB	0 B	0%

@videojs/react

Entry	Base	PR	Diff	%
.	8.00 kB	7.69 kB	-325 B	-4.0%	🔽
./audio	255 B	266 B	+11 B	+4.3%	🔺
./background	34 B	35 B	+1 B	+2.9%	🔺
./video	5.17 kB	4.84 kB	-339 B	-6.4%	🔽
total	13.46 kB	12.82 kB	-652 B	-4.7%

@videojs/store

Entry	Base	PR	Diff	%
.	1.29 kB	1.29 kB	0 B	0%	✅
./html	468 B	468 B	0 B	0%	✅
./react	199 B	199 B	0 B	0%	✅
total	1.94 kB	1.94 kB	0 B	0%

@videojs/utils

Entry	Base	PR	Diff	%
./array	104 B	104 B	0 B	0%	✅
./dom	684 B	684 B	0 B	0%	✅
./events	227 B	227 B	0 B	0%	✅
./function	197 B	197 B	0 B	0%	✅
./object	119 B	119 B	0 B	0%	✅
./predicate	265 B	265 B	0 B	0%	✅
./string	110 B	110 B	0 B	0%	✅
./style	185 B	185 B	0 B	0%	✅
./time	478 B	478 B	0 B	0%	✅
./number	158 B	158 B	0 B	0%	✅
total	2.47 kB	2.47 kB	0 B	0%

---

ℹ️ How to interpret

Sizes are minified + brotli, measured with esbuild.
Package totals are computed as root size + marginal subpath costs.
Subpath marginal cost = (root + subpath bundled together) − root alone.

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

Run pnpm size locally to check current sizes.