feat(site): ejected skins build script, docs page, and home page wiring by sampotts · Pull Request #809 · videojs/v10

sampotts · 2026-03-10T05:43:28Z

Summary

Add site/scripts/build-ejected-skins.ts that produces copy-paste skin snippets (Shadcn-style eject) for all 4 skins across HTML and React, in both CSS and Tailwind variants (16 entries total)
Output written to site/src/content/ejected-skins.json (gitignored); run with pnpm -F site ejected-skins (requires pnpm build:packages first)
Wire real ejected skin data to home page "Take full control" (Eject) demo using ServerCode + Astro named slots for build-time syntax highlighting — no client-side Shiki needed
Rename 'frosted' skin to 'default' across home page components
Add EjectedSkin.astro component and customize-skins.mdx docs page
All private package dependencies resolved at build time: icons inlined as SVG, Tailwind tokens serialized as consts, cn() replaced with [].filter(Boolean).join(' '), internal path aliases rewritten to @videojs/react

Closes #701

Test plan

🤖 Generated with Claude Code

@imports

Add a script that produces copy-paste skin snippets (Shadcn-style eject) for all 4 skins across HTML and React, in both CSS and Tailwind variants. The script outputs `site/src/content/ejected-skins.json` with 16 entries: - HTML skins: rendered templates with inline SVGs and resolved classes - React skins: TSX (typed) and JSX (types stripped) with inline SVGs - CSS variants include resolved CSS (all @imports flattened) - Tailwind variants omit CSS (users bring their own Tailwind config) All private package dependencies are resolved at build time: - @videojs/icons → SVGs inlined directly into markup - @videojs/skins → Tailwind tokens serialized as const declarations - @videojs/utils/style cn() → replaced with [].filter(Boolean).join(' ') - Internal path aliases (@/) → rewritten to @videojs/react Closes #701 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

netlify · 2026-03-10T05:43:33Z

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	`f5987eb`
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/69b03be6effb4b00086ff5d4
😎 Deploy Preview	https://deploy-preview-809--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 · 2026-03-10T05:43:33Z

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

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	Mar 10, 2026 3:42pm

github-actions · 2026-03-10T05:44:45Z

📦 Bundle Size Report

🎨 @videojs/html

(no changes)

Presets (7)

Entry	Size
`/video (default)`	22.95 kB
`/video (default + hls)`	153.33 kB
`/video (minimal)`	22.81 kB
`/video (minimal + hls)`	153.26 kB
`/audio (default)`	21.17 kB
`/audio (minimal)`	21.15 kB
`/background`	6.36 kB

Media (4)

Entry	Size
`/media/background-video`	652 B
`/media/container`	1.86 kB
`/media/hls-video`	131.32 kB
`/media/simple-hls-video`	11.54 kB

Players (3)

Entry	Size
`/video/player`	6.22 kB
`/audio/player`	6.21 kB
`/background/player`	6.21 kB

Skins (14)

Entry	Type	Size
`/video/minimal-skin.css`	css	2.74 kB
`/video/skin.css`	css	2.79 kB
`/video/minimal-skin`	js	22.23 kB
`/video/minimal-skin.tailwind`	js	21.48 kB
`/video/skin`	js	22.40 kB
`/video/skin.tailwind`	js	21.52 kB
`/audio/minimal-skin.css`	css	2.17 kB
`/audio/skin.css`	css	2.19 kB
`/audio/minimal-skin`	js	20.58 kB
`/audio/minimal-skin.tailwind`	js	19.71 kB
`/audio/skin`	js	20.62 kB
`/audio/skin.tailwind`	js	19.89 kB
`/background/skin.css`	css	124 B
`/background/skin`	js	1009 B

UI Components (21)

Entry	Size
`/ui/alert-dialog`	2.05 kB
`/ui/alert-dialog-close`	1.22 kB
`/ui/alert-dialog-description`	1.16 kB
`/ui/alert-dialog-title`	1.17 kB
`/ui/buffering-indicator`	1.71 kB
`/ui/captions-button`	1.82 kB
`/ui/controls`	1.79 kB
`/ui/fullscreen-button`	1.77 kB
`/ui/mute-button`	1.79 kB
`/ui/pip-button`	1.77 kB
`/ui/play-button`	1.77 kB
`/ui/playback-rate-button`	1.80 kB
`/ui/popover`	3.06 kB
`/ui/poster`	1.66 kB
`/ui/seek-button`	1.81 kB
`/ui/slider`	2.22 kB
`/ui/thumbnail`	2.08 kB
`/ui/time`	1.85 kB
`/ui/time-slider`	2.92 kB
`/ui/tooltip`	2.42 kB
`/ui/volume-slider`	2.19 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react

(no changes)

Presets (7)

Entry	Size
`/video (default)`	16.67 kB
`/video (default + hls)`	147.47 kB
`/video (minimal)`	16.72 kB
`/video (minimal + hls)`	147.54 kB
`/audio (default)`	14.39 kB
`/audio (minimal)`	14.41 kB
`/background`	3.14 kB

Media (3)

Entry	Size
`/media/background-video`	539 B
`/media/hls-video`	131.60 kB
`/media/simple-hls-video`	11.92 kB

Skins (14)

Entry	Type	Size
`/video/minimal-skin.css`	css	2.74 kB
`/video/skin.css`	css	2.79 kB
`/video/minimal-skin`	js	16.61 kB
`/video/minimal-skin.tailwind`	js	19.17 kB
`/video/skin`	js	16.61 kB
`/video/skin.tailwind`	js	19.23 kB
`/audio/minimal-skin.css`	css	2.17 kB
`/audio/skin.css`	css	2.19 kB
`/audio/minimal-skin`	js	14.34 kB
`/audio/minimal-skin.tailwind`	js	16.13 kB
`/audio/skin`	js	14.27 kB
`/audio/skin.tailwind`	js	16.31 kB
`/background/skin.css`	css	90 B
`/background/skin`	js	272 B

UI Components (17)

Entry	Size
`/ui/alert-dialog`	2.70 kB
`/ui/buffering-indicator`	2.20 kB
`/ui/captions-button`	2.26 kB
`/ui/controls`	2.19 kB
`/ui/fullscreen-button`	2.28 kB
`/ui/mute-button`	2.23 kB
`/ui/pip-button`	2.26 kB
`/ui/play-button`	2.25 kB
`/ui/playback-rate-button`	2.24 kB
`/ui/popover`	3.10 kB
`/ui/poster`	2.05 kB
`/ui/seek-button`	2.25 kB
`/ui/slider`	3.09 kB
`/ui/time`	2.36 kB
`/ui/time-slider`	3.24 kB
`/ui/tooltip`	3.20 kB
`/ui/volume-slider`	3.08 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core

(no changes)

Entries (5)

Entry	Size
`.`	4.78 kB
`/dom`	8.02 kB
`/dom/media/custom-media-element`	1.77 kB
`/dom/media/hls`	131.18 kB
`/dom/media/simple-hls`	11.43 kB

🏷️ @videojs/element

(no changes)

Entries (2)

Entry	Size
`.`	999 B
`/context`	936 B

📦 @videojs/store

(no changes)

Entries (3)

Entry	Size
`.`	1.32 kB
`/html`	700 B
`/react`	360 B

🔧 @videojs/utils

(no changes)

Entries (10)

Entry	Size
`/array`	104 B
`/dom`	1003 B
`/events`	227 B
`/function`	261 B
`/object`	119 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`	9.67 kB
`/playback-engine`	9.60 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.

- Move build script from build/scripts to site/scripts - Add ejected skins content collection and build integration - Wire real ejected skin data to Eject demo via ServerCode slots - Rename 'frosted' skin to 'default' across home page - Add EjectedSkin.astro component and customize-skins docs page Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…ng (#809) Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Darius Cepulis <dcepulis@mux.com>

decepulis changed the title ~~build(skin): add ejected skins build script~~ feat(site): ejected skins build script, docs page, and home page wiring Mar 10, 2026

vercel bot deployed to Preview March 10, 2026 15:42 View deployment

decepulis merged commit ee99e21 into main Mar 10, 2026
20 checks passed

decepulis deleted the claude/adoring-feistel branch March 10, 2026 15:45

sampotts added a commit that referenced this pull request Mar 11, 2026

feat(site): ejected skins build script, docs page, and home page wiri…

249c55e

…ng (#809) Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Darius Cepulis <dcepulis@mux.com>

decepulis mentioned this pull request Mar 14, 2026

How to customize a skin guide #336

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(site): ejected skins build script, docs page, and home page wiring#809

feat(site): ejected skins build script, docs page, and home page wiring#809
decepulis merged 2 commits intomainfrom
claude/adoring-feistel

sampotts commented Mar 10, 2026 •

edited by decepulis

Loading

Uh oh!

netlify bot commented Mar 10, 2026 •

edited

Loading

Uh oh!

vercel bot commented Mar 10, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 10, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

sampotts commented Mar 10, 2026 • edited by decepulis Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

netlify bot commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for vjs10-site ready!

Uh oh!

vercel bot commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 Bundle Size Report

🎨 @videojs/html

⚛️ @videojs/react

🧩 @videojs/core

🏷️ @videojs/element

📦 @videojs/store

🔧 @videojs/utils

📦 @videojs/spf

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sampotts commented Mar 10, 2026 •

edited by decepulis

Loading

netlify bot commented Mar 10, 2026 •

edited

Loading

vercel bot commented Mar 10, 2026 •

edited

Loading

github-actions bot commented Mar 10, 2026 •

edited

Loading