fix(site): add 'use client' to ejected skin Next.js output

[ronald-urbina]

The build-ejected-skins script was missing the 'use client' directive
in the React output, causing hydration errors when developers copy the
ejected skin example from the Next.js tab on the skins docs page.

Prepends 'use client'; to the reorganized React output so it matches
the packaged skin sample.

Closes 1486

---

Note

Low Risk
Low risk: a small string prefix change in the site build script that only affects generated ejected-skin snippets, with no runtime logic changes beyond Next.js hydration behavior for copied examples.

Overview
Fixes the React ejected-skin snippet generation for Next.js by prepending the 'use client'; directive to the output of reorganizeReactOutput in build-ejected-skins.ts.

This ensures the copy-paste React skin examples are treated as client components and avoids hydration issues when used in Next.js apps.

^{Reviewed by Cursor Bugbot for commit f4c2fa4. 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	Apr 28, 2026 7:14pm

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	f4c2fa4
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/69f107054c807100080dd37a
😎 Deploy Preview	https://deploy-preview-1488--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

🎨 @videojs/html — no changes

Presets (7)

Entry	Size
/video (default)	28.84 kB
/video (default + hls)	162.18 kB
/video (minimal)	26.28 kB
/video (minimal + hls)	159.71 kB
/audio (default)	26.66 kB
/audio (minimal)	24.25 kB
/background	4.16 kB

Media (8)

Entry	Size
/media/background-video	1.04 kB
/media/container	1.72 kB
/media/dash-video	236.58 kB
/media/hls-video	134.69 kB
/media/mux-audio	160.91 kB
/media/mux-video	160.85 kB
/media/native-hls-video	4.62 kB
/media/simple-hls-video	16.01 kB

Players (3)

Entry	Size
/video/player	7.00 kB
/audio/player	5.12 kB
/background/player	3.86 kB

Skins (29)

Entry	Type	Size
/video/minimal-skin.css	css	3.53 kB
/video/skin.css	css	3.56 kB
/video/minimal-skin	js	26.30 kB
/video/minimal-skin.tailwind	js	26.51 kB
/video/skin	js	28.80 kB
/video/skin.tailwind	js	28.90 kB
/audio/minimal-skin.css	css	2.55 kB
/audio/skin.css	css	2.52 kB
/audio/minimal-skin	js	24.22 kB
/audio/minimal-skin.tailwind	js	24.40 kB
/audio/skin	js	26.67 kB
/audio/skin.tailwind	js	26.80 kB
/background/skin.css	css	117 B
/background/skin	js	1.15 kB
/live-video/minimal-skin.css	css	3.53 kB
/live-video/skin.css	css	3.56 kB
/live-video/minimal-skin	js	26.12 kB
/live-video/minimal-skin.tailwind	js	26.16 kB
/live-video/skin	js	28.51 kB
/live-video/skin.tailwind	js	28.59 kB
/live-audio/minimal-skin.css	css	2.55 kB
/live-audio/skin.css	css	2.52 kB
/live-audio/minimal-skin	js	24.06 kB
/live-audio/minimal-skin.tailwind	js	24.00 kB
/live-audio/skin	js	26.40 kB
/live-audio/skin.tailwind	js	26.46 kB
/base.css	css	157 B
/shared.css	css	88 B
/skin-element	js	1.36 kB

UI Components (25)

Entry	Size
/ui/alert-dialog	989 B
/ui/alert-dialog-close	465 B
/ui/alert-dialog-description	451 B
/ui/alert-dialog-title	369 B
/ui/buffering-indicator	2.49 kB
/ui/captions-button	2.59 kB
/ui/cast-button	2.62 kB
/ui/compounds	4.15 kB
/ui/controls	2.03 kB
/ui/error-dialog	3.10 kB
/ui/fullscreen-button	2.58 kB
/ui/hotkey	1.91 kB
/ui/mute-button	2.58 kB
/ui/pip-button	2.55 kB
/ui/play-button	2.56 kB
/ui/playback-rate-button	2.67 kB
/ui/popover	1.82 kB
/ui/poster	1.88 kB
/ui/seek-button	2.59 kB
/ui/slider	1.51 kB
/ui/thumbnail	2.96 kB
/ui/time	2.52 kB
/ui/time-slider	3.92 kB
/ui/tooltip	2.03 kB
/ui/volume-slider	2.66 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes

Presets (7)

Entry	Size
/video (default)	23.53 kB
/video (default + hls)	155.68 kB
/video (minimal)	21.14 kB
/video (minimal + hls)	153.27 kB
/audio (default)	19.10 kB
/audio (minimal)	17.62 kB
/background	756 B

Media (7)

Entry	Size
/media/background-video	575 B
/media/dash-video	235.21 kB
/media/hls-video	133.34 kB
/media/mux-audio	159.31 kB
/media/mux-video	159.49 kB
/media/native-hls-video	3.13 kB
/media/simple-hls-video	14.55 kB

Skins (26)

Entry	Type	Size
/video/minimal-skin.css	css	3.46 kB
/video/skin.css	css	3.48 kB
/video/minimal-skin	js	21.05 kB
/video/minimal-skin.tailwind	js	24.58 kB
/video/skin	js	23.46 kB
/video/skin.tailwind	js	24.72 kB
/audio/minimal-skin.css	css	2.45 kB
/audio/skin.css	css	2.41 kB
/audio/minimal-skin	js	17.57 kB
/audio/minimal-skin.tailwind	js	20.05 kB
/audio/skin	js	19.03 kB
/audio/skin.tailwind	js	20.07 kB
/background/skin.css	css	90 B
/background/skin	js	272 B
/live-video/minimal-skin.css	css	3.46 kB
/live-video/skin.css	css	3.48 kB
/live-video/minimal-skin	js	17.79 kB
/live-video/minimal-skin.tailwind	js	21.19 kB
/live-video/skin	js	20.18 kB
/live-video/skin.tailwind	js	21.39 kB
/live-audio/minimal-skin.css	css	2.45 kB
/live-audio/skin.css	css	2.41 kB
/live-audio/minimal-skin	js	15.79 kB
/live-audio/minimal-skin.tailwind	js	18.04 kB
/live-audio/skin	js	17.26 kB
/live-audio/skin.tailwind	js	18.18 kB

UI Components (20)

Entry	Size
/ui/alert-dialog	1.11 kB
/ui/buffering-indicator	1.85 kB
/ui/captions-button	2.03 kB
/ui/cast-button	2.04 kB
/ui/controls	1.89 kB
/ui/error-dialog	2.31 kB
/ui/fullscreen-button	2.03 kB
/ui/mute-button	2.05 kB
/ui/pip-button	2.03 kB
/ui/play-button	2.00 kB
/ui/playback-rate-button	2.02 kB
/ui/popover	1.87 kB
/ui/poster	1.74 kB
/ui/seek-button	2.10 kB
/ui/slider	3.33 kB
/ui/thumbnail	2.08 kB
/ui/time	2.54 kB
/ui/time-slider	3.00 kB
/ui/tooltip	2.17 kB
/ui/volume-slider	2.39 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes

Entries (9)

Entry	Size
.	4.96 kB
/dom	11.93 kB
/dom/media/custom-media-element	1.90 kB
/dom/media/dash	234.36 kB
/dom/media/google-cast	4.07 kB
/dom/media/hls	132.72 kB
/dom/media/mux	158.81 kB
/dom/media/native-hls	2.52 kB
/dom/media/simple-hls	13.89 kB

🏷️ @videojs/element — no changes

Entries (2)

Entry	Size
.	996 B
/context	943 B

📦 @videojs/store — no changes

Entries (3)

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

🔧 @videojs/utils — no changes

Entries (10)

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

📦 @videojs/spf — no changes

Entries (3)

Entry	Size
.	4.29 kB
/dom	13.40 kB
/playback-engine	13.26 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.