feat(skin): implement default and minimal skins for HTML player by sampotts · Pull Request #698 · videojs/v10

sampotts · 2026-03-03T23:53:50Z

Closes #551

Summary

Implement shared default and minimal video/audio skins for the HTML player with CSS and Tailwind variants. Introduce a @videojs/skins package for cross-platform skin definitions, a renderIcon API in @videojs/icons for server-side and template-based icon rendering, and simplify React skins by reusing shared definitions.

Changes

Add @videojs/skins package with shared CSS and Tailwind classname tokens for video/audio skins
Add renderIcon(name, attrs?) function in @videojs/icons/render for string-based SVG icon rendering (used by HTML skin templates)
Add @videojs/icons/element export with MediaIconElement custom element and per-family icon registration
Implement HTML skin elements (video-skin, video-minimal-skin) using SkinMixin preset pattern and renderIcon for icon injection
Refactor React skins to consume shared skin definitions from @videojs/skins instead of duplicating CSS/tokens
Add HTML and HTML+Tailwind sandbox templates for development and testing

Implementation details

The icon build pipeline (packages/icons/scripts/build.ts) now generates three additional outputs beyond the existing per-icon React/HTML modules:

render/ — A renderIcon(name, attrs?) function per icon set that returns SVG strings, used by HTML skin templates to inline icons at build time
element/ — A MediaIconElement custom element with a static register(family, icons) method, plus per-set icon maps and a unified index that auto-registers all families

The HTML skins use renderIcon in getTemplateHTML() to stamp icons into the shadow-free template string, avoiding runtime DOM manipulation for icon rendering.

Testing

pnpm build — all packages build successfully
pnpm typecheck — no type errors
Verify skins render in HTML and HTML+Tailwind sandboxes
Verify React skins still work after simplification

netlify · 2026-03-03T23:53:55Z

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	`16ab966`
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/69a8176987329800081cc20f
😎 Deploy Preview	https://deploy-preview-698--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 · 2026-03-03T23:54:48Z

📦 Bundle Size Report

Package	Size	Diff		%
@videojs/core	10.41 kB	0 B	`░░░░░░░░`	0%	✅
@videojs/element	1.60 kB	0 B	`░░░░░░░░`	0%	✅
@videojs/html	26.98 kB	+8.43 kB	`████░░░░`	+45.4%	🔴
@videojs/icons	7.49 kB	+3.70 kB	`████████`	+97.8%	🔴
@videojs/react	15.08 kB	0 B	`░░░░░░░░`	0%	✅
@videojs/store	1.96 kB	0 B	`░░░░░░░░`	0%	✅
@videojs/utils	2.81 kB	0 B	`░░░░░░░░`	0%	✅

Total: 66.33 kB · +12.13 kB · +22.4%

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	%
`.`	4.39 kB	4.39 kB	0 B	0%	✅
`./dom`	6.03 kB	6.03 kB	0 B	0%	✅
total	10.41 kB	10.41 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/html

Entry	Base	PR	Diff	%
`.`	15.44 kB	15.45 kB	+14 B	+0.1%	🔺
`./video`	1.04 kB	9.44 kB	+8.40 kB	+807.2%	🔴
`./audio`	1.03 kB	1.06 kB	+28 B	+2.7%	🔺
`./background`	1.04 kB	1.02 kB	-15 B	-1.4%	🔽
total	18.55 kB	26.98 kB	+8.43 kB	+45.4%

@videojs/icons

Entry	Base	PR	Diff	%
`./react`	2.27 kB	2.27 kB	0 B	0%	✅
`./html`	1.52 kB	1.52 kB	0 B	0%	✅
`./render`	—	1.59 kB	—		🆕
`./element`	—	2.11 kB	—		🆕
total	3.79 kB	7.49 kB	+3.70 kB	+97.8%

@videojs/store

Entry	Base	PR	Diff	%
`.`	1.31 kB	1.31 kB	0 B	0%	✅
`./html`	472 B	472 B	0 B	0%	✅
`./react`	199 B	199 B	0 B	0%	✅
total	1.96 kB	1.96 kB	0 B	0%

@videojs/utils

Entry	Base	PR	Diff	%
`./array`	104 B	104 B	0 B	0%	✅
`./dom`	928 B	928 B	0 B	0%	✅
`./events`	227 B	227 B	0 B	0%	✅
`./function`	261 B	261 B	0 B	0%	✅
`./object`	119 B	119 B	0 B	0%	✅
`./predicate`	265 B	265 B	0 B	0%	✅
`./string`	148 B	148 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.81 kB	2.81 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.

Copilot

Pull request overview

Implements shared “default” and “minimal” skins for the HTML player (CSS + Tailwind token variants) via a new @videojs/skins workspace package, and refactors the React presets to consume those shared definitions. It also updates the icons build pipeline to support HTML custom-element icon usage and expands the sandbox with an HTML+Tailwind template.

Changes:

Add @videojs/skins package containing shared skin CSS and Tailwind classname token modules.
Refactor HTML + React skins to reuse shared CSS/tokens; update build configs to inline skin CSS imports into package outputs.
Extend icons build to generate an element export (custom element + family registration) and add new sandbox templates/routes for HTML Tailwind.

Reviewed changes

Copilot reviewed 48 out of 50 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
tsconfig.json	Adds `packages/skins` as a TS project reference.
pnpm-lock.yaml	Updates workspace links and dependency snapshot versions for new package wiring.
packages/skins/tsdown.config.ts	Builds Tailwind token entrypoints and copies CSS assets.
packages/skins/tsconfig.json	TypeScript config for new skins package.
packages/skins/src/video/minimal.tailwind.ts	Adds minimal video Tailwind classname tokens.
packages/skins/src/video/minimal.css	Adds minimal video CSS skin.
packages/skins/src/video/icon-state.css	Adds shared CSS rules to toggle multi-state icons via data attributes.
packages/skins/src/video/default.tailwind.ts	Adds default video Tailwind classname tokens.
packages/skins/src/video/default.css	Adds default video CSS skin.
packages/skins/src/background/default.css	Adds shared background skin CSS.
packages/skins/src/audio/default.css	Adds shared audio skin CSS (currently very minimal).
packages/skins/package.json	Defines exports for shared CSS + Tailwind token modules.
packages/sandbox/vite.config.ts	Adds `html-tailwind` sandbox entry.
packages/sandbox/templates/styles.css	Extends Tailwind sources to include `@videojs/skins` and `@videojs/html`.
packages/sandbox/templates/index.html	Adds navigation link to the HTML+Tailwind sandbox.
packages/sandbox/templates/html/main.ts	Adds runtime skin switching to the HTML sandbox (loads CSS dynamically).
packages/sandbox/templates/html/index.html	Adds UI for skin selection + player container.
packages/sandbox/templates/html-tailwind/main.ts	Adds HTML+Tailwind sandbox that uses Tailwind skin modules.
packages/sandbox/templates/html-tailwind/index.html	New HTML+Tailwind sandbox page.
packages/sandbox/src/index.html	Adds navigation link to the HTML+Tailwind sandbox.
packages/sandbox/package.json	Adds dependency on `@videojs/skins`.
packages/sandbox/README.md	Documents the new `html-tailwind` sandbox and updates HTML sandbox description.
packages/react/tsdown.config.ts	Inlines `@videojs/skins` CSS imports into React package CSS outputs; bundles skins tokens.
packages/react/src/presets/video/skin.tsx	Uses shared icon-state CSS approach (renders all icons + relies on data-attrs).
packages/react/src/presets/video/skin.tailwind.tsx	Refactors to consume `@videojs/skins` Tailwind tokens.
packages/react/src/presets/video/skin.css	Switches to importing shared default skin CSS from `@videojs/skins`.
packages/react/src/presets/video/minimal-skin.tsx	Uses shared icon-state CSS approach for minimal skin.
packages/react/src/presets/video/minimal-skin.tailwind.tsx	Refactors to consume `@videojs/skins` minimal Tailwind tokens.
packages/react/src/presets/video/minimal-skin.css	Switches to importing shared minimal skin CSS from `@videojs/skins`.
packages/react/src/presets/background/skin.css	Switches to importing shared background CSS from `@videojs/skins`.
packages/react/src/presets/audio/skin.css	Switches to importing shared audio CSS from `@videojs/skins`.
packages/react/package.json	Adds dependency on `@videojs/skins`.
packages/icons/scripts/build.ts	Adds `dist/element` build output (custom element + family registration + icon maps).
packages/icons/package.json	Adds `./element` export and marks element JS as side-effectful.
packages/html/tsdown.config.ts	Inlines `@videojs/skins` CSS imports into HTML package CSS outputs; bundles icons/skins.
packages/html/src/store/container-mixin.ts	Adjusts context consumer initialization to avoid sync-callback ordering issues.
packages/html/src/presets/video.ts	Exposes video skin elements (default/minimal + Tailwind variants).
packages/html/src/presets/skin-mixin.ts	Adds mixin to render a static template and safely relocate children into `media-container`.
packages/html/src/presets/audio.ts	Exposes audio skin elements (default/minimal).
packages/html/src/define/video/skin.ts	Implements default HTML video skin element template and registers custom element.
packages/html/src/define/video/skin.tailwind.ts	Implements Tailwind-token HTML video skin element template and registers custom element.
packages/html/src/define/video/skin.css	Imports shared default video CSS from `@videojs/skins`.
packages/html/src/define/video/minimal-skin.ts	Implements minimal HTML video skin element template and registers custom element.
packages/html/src/define/video/minimal-skin.tailwind.ts	Implements Tailwind-token minimal HTML video skin element template and registers custom element.
packages/html/src/define/video/minimal-skin.css	Imports shared minimal video CSS from `@videojs/skins`.
packages/html/src/define/audio/skin.ts	Adds placeholder audio skin element template and registration.
packages/html/src/define/audio/skin.css	Imports shared audio CSS and sets `display: contents` for wrapper elements.
packages/html/src/define/audio/minimal-skin.ts	Adds placeholder minimal audio skin element template and registration.
packages/html/src/define/audio/minimal-skin.css	Adds placeholder minimal audio skin CSS + wrapper display rules.
packages/html/package.json	Adds dependencies on `@videojs/icons` and `@videojs/skins`.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Add video and audio skins with CSS and Tailwind variants, introduce skin-mixin preset pattern, update icon build pipeline, and simplify React skins to share the new skin definitions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

PR #698 (feat(skin)) added @videojs/icons to dependencies instead of devDependencies, causing `No matching version found for @videojs/icons@10.0.0-alpha.5` errors for consumers. Icons are bundled at build time and not needed at runtime. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

PR #698 (feat(skin)) added @videojs/skins to dependencies in both packages/html and packages/react. Since @videojs/skins is not published to npm, this causes install failures for consumers. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

sampotts force-pushed the feat/html-skins branch from 316f9cf to c8965c8 Compare March 3, 2026 23:54

sampotts requested review from Copilot, luwes and mihar-22 March 3, 2026 23:58

Copilot started reviewing on behalf of sampotts March 3, 2026 23:58 View session

Copilot AI reviewed Mar 4, 2026

View reviewed changes

sampotts force-pushed the feat/html-skins branch 6 times, most recently from 54fcfaa to 7cb7c8c Compare March 4, 2026 01:48

sampotts force-pushed the feat/html-skins branch from 7cb7c8c to 16ab966 Compare March 4, 2026 11:28

sampotts merged commit c5cafae into main Mar 4, 2026
19 checks passed

sampotts deleted the feat/html-skins branch March 4, 2026 11:35

This was referenced Mar 4, 2026

chore: release main #630

Merged

Skins: Create audio skins #585

Closed

Epic: UC-3 — Skins #490

Closed

decepulis mentioned this pull request Mar 4, 2026

fix(html): move @videojs/icons to devDependencies #712

Merged

1 task

decepulis mentioned this pull request Mar 4, 2026

fix(html,react): move @videojs/skins to devDependencies #716

Merged

1 task

This was referenced Mar 10, 2026

chore: release main #851

Merged

chore: release main #911

Merged

This was referenced Apr 11, 2026

chore: release main #1313

Merged

chore: release main #1336

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(skin): implement default and minimal skins for HTML player#698

feat(skin): implement default and minimal skins for HTML player#698
sampotts merged 1 commit intomainfrom
feat/html-skins

sampotts commented Mar 3, 2026 •

edited

Loading

Uh oh!

netlify bot commented Mar 3, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 3, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

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

Uh oh!

Summary

Changes

Testing

Uh oh!

netlify bot commented Mar 3, 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!

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

Uh oh!

📦 Bundle Size Report

Entry Breakdown

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sampotts commented Mar 3, 2026 •

edited

Loading

netlify bot commented Mar 3, 2026 •

edited

Loading

github-actions bot commented Mar 3, 2026 •

edited

Loading