feat(skin): add captions button to video skins

[sampotts]

Summary

Add a captions toggle button to all video skin variants (default, minimal, Tailwind) with corresponding caption on/off icons for both icon sets.

Closes #590

Changes

• Add CaptionsButton React component with toggle state and aria-pressed support
• Add captions-on and captions-off SVG icons for default and minimal icon sets
• Update icon build script to preserve stroke/fill attributes and convert black to currentColor
• Integrate captions button into all six skin variants (default/minimal x CSS/Tailwind)
• Reduce overlay backdrop saturation from 1.5 to 1.2 across all skins

Implementation details

The CaptionsButton component currently uses local React state (useState) for the active toggle — marked with FIXME comments to be replaced with actual captions state from core once available. The icon build script was updated to handle SVGs that use both fill and stroke attributes (needed for the captions-off outline icon) instead of stripping them all and adding a blanket fill="currentColor".

Testing

Manual: verify captions button appears in all skin variants and toggles between on/off icon states when clicked.

[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		Feb 25, 2026 11:49pm

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	48409a1
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/699f8a80b6c9a200071876fb
😎 Deploy Preview	https://deploy-preview-612--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.68 kB	0 B	░░░░░░░░	0%	✅
@videojs/element	1.60 kB	0 B	░░░░░░░░	0%	✅
@videojs/html	8.63 kB	0 B	░░░░░░░░	0%	✅
@videojs/icons	3.79 kB	+329 B	████████	+9.3%	🔺
@videojs/react	16.37 kB	+455 B	██░░░░░░	+2.8%	🔺
@videojs/store	1.94 kB	0 B	░░░░░░░░	0%	✅
@videojs/utils	2.47 kB	0 B	░░░░░░░░	0%	✅

Total: 40.48 kB · +784 B · +1.9%

---

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.10 kB	3.10 kB	0 B	0%	✅
./dom	2.58 kB	2.58 kB	0 B	0%	✅
total	5.68 kB	5.68 kB	0 B	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.27 kB	+173 B	+8.1%	🔺
./html	1.37 kB	1.52 kB	+156 B	+11.1%	🔴
total	3.46 kB	3.79 kB	+329 B	+9.3%

@videojs/react

Entry	Base	PR	Diff	%
.	7.69 kB	7.69 kB	0 B	0%	✅
./audio	266 B	266 B	0 B	0%	✅
./background	268 B	268 B	0 B	0%	✅
./video	7.72 kB	8.16 kB	+455 B	+5.8%	🔺
total	15.92 kB	16.37 kB	+455 B	+2.8%

@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.