feat(packages): add poster component to video skins by sampotts · Pull Request #994 · videojs/v10

sampotts · 2026-03-18T02:28:05Z

Summary

Add a dedicated <media-poster> component with proper CSS and Tailwind styling for both default and minimal video skins, replacing the previous inline img selector approach. Poster is now a first-class prop on React video skin presets.

Closes #992

Changes

Extract poster styles into dedicated CSS and Tailwind component files for default and minimal skins
Add <media-poster> element with <slot name="poster"> to all HTML video skin templates (CSS and Tailwind variants)
Add poster prop to React video skin presets (VideoSkin, MinimalVideoSkin, and their Tailwind variants)
Add isRenderProp utility and BaseVideoSkinProps type for poster prop handling
Refactor sandbox to use centralized getPosterSrc/getStoryboardSrc helpers instead of Mux-specific components
Improve sandbox setup/reset scripts with mirrorTemplatesToSrc and removeGeneratedSrcFiles utilities
Simplify sandbox Vite config app shell serving

Testing

pnpm dev and verify poster images display correctly in all sandbox templates
Verify poster fades out on play and fades in when appropriate
Check both CSS and Tailwind styling modes

vercel · 2026-03-18T02:28:09Z

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

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	Mar 18, 2026 5:32am

netlify · 2026-03-18T02:28:10Z

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	`b072229`
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/69ba38c745ffaa000874c966
😎 Deploy Preview	https://deploy-preview-994--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-18T02:31:35Z

CI Failure Diagnosis

Run: https://github.com/videojs/v10/actions/runs/23226230464
Commit: c98347f3e9aedbf64bfb26bc51c3935e5ae3f341

File	Type	What failed
`packages/sandbox` (vite config)	build	`vite:build-html` plugin error: emitted file name `../app/index.html` is a relative path, which is not allowed by rolldown.

github-actions · 2026-03-18T02:34:55Z

📦 Bundle Size Report

🎨 @videojs/html

Path	Base	PR	Diff	%
`/video (minimal + hls)`	153.06 kB	153.38 kB	+330 B	+0.2%	🔺

Presets (7)

Entry	Size
`/video (default)`	22.94 kB
`/video (default + hls)`	153.29 kB
`/video (minimal)`	22.85 kB
`/video (minimal + hls)`	153.38 kB
`/audio (default)`	21.20 kB
`/audio (minimal)`	21.19 kB
`/background`	6.36 kB

Media (5)

Entry	Size
`/media/background-video`	617 B
`/media/container`	1.58 kB
`/media/dash-video`	235.71 kB
`/media/hls-video`	131.17 kB
`/media/simple-hls-video`	11.94 kB

Players (3)

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

Skins (16)

Entry	Type	Size
`/video/minimal-skin.css`	css	3.09 kB
`/video/skin.css`	css	3.11 kB
`/video/minimal-skin`	js	22.07 kB
`/video/minimal-skin.tailwind`	js	22.29 kB
`/video/skin`	js	22.16 kB
`/video/skin.tailwind`	js	22.52 kB
`/audio/minimal-skin.css`	css	2.25 kB
`/audio/skin.css`	css	2.29 kB
`/audio/minimal-skin`	js	20.45 kB
`/audio/minimal-skin.tailwind`	js	20.47 kB
`/audio/skin`	js	20.46 kB
`/audio/skin.tailwind`	js	20.70 kB
`/background/skin.css`	css	124 B
`/background/skin`	js	999 B
`/base.css`	css	144 B
`/shared.css`	css	43 B

UI Components (21)

Entry	Size
`/ui/alert-dialog`	2.12 kB
`/ui/alert-dialog-close`	1.24 kB
`/ui/alert-dialog-description`	1.51 kB
`/ui/alert-dialog-title`	1.53 kB
`/ui/buffering-indicator`	1.78 kB
`/ui/captions-button`	1.84 kB
`/ui/controls`	1.85 kB
`/ui/fullscreen-button`	1.81 kB
`/ui/mute-button`	1.82 kB
`/ui/pip-button`	1.79 kB
`/ui/play-button`	1.83 kB
`/ui/playback-rate-button`	1.80 kB
`/ui/popover`	3.31 kB
`/ui/poster`	1.71 kB
`/ui/seek-button`	1.79 kB
`/ui/slider`	2.02 kB
`/ui/thumbnail`	2.10 kB
`/ui/time`	1.67 kB
`/ui/time-slider`	2.94 kB
`/ui/tooltip`	2.62 kB
`/ui/volume-slider`	2.20 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react

(no changes)

Presets (7)

Entry	Size
`/video (default)`	18.80 kB
`/video (default + hls)`	149.59 kB
`/video (minimal)`	18.83 kB
`/video (minimal + hls)`	149.61 kB
`/audio (default)`	14.92 kB
`/audio (minimal)`	14.95 kB
`/background`	3.14 kB

Media (4)

Entry	Size
`/media/background-video`	476 B
`/media/dash-video`	236.19 kB
`/media/hls-video`	131.59 kB
`/media/simple-hls-video`	12.34 kB

Skins (14)

Entry	Type	Size
`/video/minimal-skin.css`	css	3.09 kB
`/video/skin.css`	css	3.11 kB
`/video/minimal-skin`	js	18.75 kB
`/video/minimal-skin.tailwind`	js	21.88 kB
`/video/skin`	js	18.73 kB
`/video/skin.tailwind`	js	21.88 kB
`/audio/minimal-skin.css`	css	2.25 kB
`/audio/skin.css`	css	2.29 kB
`/audio/minimal-skin`	js	14.88 kB
`/audio/minimal-skin.tailwind`	js	16.93 kB
`/audio/skin`	js	14.85 kB
`/audio/skin.tailwind`	js	17.18 kB
`/background/skin.css`	css	90 B
`/background/skin`	js	272 B

UI Components (18)

Entry	Size
`/ui/alert-dialog`	2.69 kB
`/ui/buffering-indicator`	2.22 kB
`/ui/captions-button`	2.27 kB
`/ui/controls`	2.23 kB
`/ui/fullscreen-button`	2.27 kB
`/ui/mute-button`	2.28 kB
`/ui/pip-button`	2.23 kB
`/ui/play-button`	2.25 kB
`/ui/playback-rate-button`	2.27 kB
`/ui/popover`	3.30 kB
`/ui/poster`	2.10 kB
`/ui/seek-button`	2.24 kB
`/ui/slider`	2.93 kB
`/ui/thumbnail`	2.49 kB
`/ui/time`	2.33 kB
`/ui/time-slider`	2.67 kB
`/ui/tooltip`	3.20 kB
`/ui/volume-slider`	2.59 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core

(no changes)

Entries (6)

Entry	Size
`.`	4.78 kB
`/dom`	8.40 kB
`/dom/media/custom-media-element`	1.81 kB
`/dom/media/dash`	235.62 kB
`/dom/media/hls`	131.27 kB
`/dom/media/simple-hls`	11.85 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`	1.25 kB
`/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`	10.04 kB
`/playback-engine`	9.94 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.

Copilot

Pull request overview

This PR introduces a dedicated <media-poster> component and promotes “poster” to a first-class input across HTML and React video skin presets, replacing the previous “style an inline <img>” approach. It also refactors the sandbox to use centralized poster/storyboard URL helpers and simplifies setup/reset + Vite shell serving.

Changes:

Add <media-poster> + slot wiring to HTML skin templates (CSS + Tailwind), and extract poster styling into dedicated skin component files.
Add poster support to React video skin presets (CSS + Tailwind variants) via a shared BaseVideoSkinProps type and an isRenderProp helper.
Sandbox refactor: centralize Mux-derived poster/storyboard URL generation, update templates, and improve setup/reset scripts + app shell serving.

Reviewed changes

Copilot reviewed 42 out of 42 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
packages/skins/src/minimal/tailwind/video.tailwind.ts	Removes inline `img` poster styling; exports new poster + playback-rate components.
packages/skins/src/minimal/tailwind/components/poster.ts	Adds Tailwind poster class generator for minimal skin.
packages/skins/src/minimal/tailwind/components/playback-rate.ts	Adds minimal Tailwind playback-rate button styling config.
packages/skins/src/minimal/css/video.css	Imports new poster CSS component.
packages/skins/src/minimal/css/components/poster.css	Adds minimal skin poster CSS component.
packages/skins/src/default/tailwind/video.tailwind.ts	Removes inline `img` poster styling; exports new poster component.
packages/skins/src/default/tailwind/components/poster.ts	Adds Tailwind poster class generator for default skin.
packages/skins/src/default/css/video.css	Imports new poster CSS component.
packages/skins/src/default/css/components/poster.css	Adds default skin poster CSS component.
packages/skins/src/default/css/components/media.css	Removes legacy default skin `> img` poster styling block (migrated to poster.css).
packages/sandbox/vite.config.ts	Simplifies app shell serving and changes build input to `app/index.html`.
packages/sandbox/templates/react-video/main.tsx	Switches from Mux-specific components to `poster` prop + generic Storyboard.
packages/sandbox/templates/react-simple-hls-video/main.tsx	Same as above for simple HLS React template.
packages/sandbox/templates/react-hls-video/main.tsx	Same as above for HLS React template.
packages/sandbox/templates/html-video/main.ts	Adds storyboard rendering + poster slot image for HTML template.
packages/sandbox/templates/html-simple-hls-video/main.ts	Adds storyboard rendering + poster slot image for HTML template.
packages/sandbox/templates/html-hls-video/main.ts	Adds storyboard rendering + poster slot image for HTML template.
packages/sandbox/templates/html-dash-video/main.ts	Adds storyboard rendering + poster slot image for HTML DASH template.
packages/sandbox/scripts/shared.ts	Adds utilities to mirror templates to src and remove generated src files; filters generated files from diffs.
packages/sandbox/scripts/setup.ts	Refactors setup to use shared mirror/remove utilities.
packages/sandbox/scripts/reset.ts	Enhances reset behavior (restores missing files, removes generated), and tweaks diff printing.
packages/sandbox/app/shared/sources.ts	Adds `getPosterSrc` / `getStoryboardSrc` derived from Mux asset id.
packages/sandbox/app/shared/react/use-storyboard.ts	New hook for storyboard URL derived from current source.
packages/sandbox/app/shared/react/use-poster.ts	New hook for poster URL derived from current source.
packages/sandbox/app/shared/react/storyboard.tsx	New generic Storyboard `<track>` component.
packages/sandbox/app/shared/react/mux-storyboard.tsx	Removes Mux-specific storyboard React component.
packages/sandbox/app/shared/react/mux-poster.tsx	Removes Mux-specific poster React component.
packages/sandbox/app/shared/mux.ts	Removes Mux poster helper; keeps Mux asset id helper.
packages/sandbox/app/shared/html/storyboard.ts	Adds generic HTML storyboard renderer helper.
packages/sandbox/app/shared/html/sandbox-state.ts	Adds poster/storyboard fields to HTML sandbox state.
packages/sandbox/app/shared/html/mux-storyboard.ts	Removes Mux-specific HTML storyboard renderer.
packages/react/src/utils/use-render.tsx	Adds `isRenderProp` helper for render-prop detection.
packages/react/src/presets/video/skin.tsx	Adds `poster` prop handling to default React CSS skin preset.
packages/react/src/presets/video/skin.tailwind.tsx	Adds `poster` prop handling + Tailwind poster classes to default preset.
packages/react/src/presets/video/minimal-skin.tsx	Adds `poster` prop handling to minimal React CSS skin preset.
packages/react/src/presets/video/minimal-skin.tailwind.tsx	Adds `poster` prop handling + Tailwind poster classes to minimal preset.
packages/react/src/presets/types.ts	Introduces `BaseVideoSkinProps` with `poster` typing.
packages/html/src/define/video/skin.ts	Adds `<media-poster>` + poster slot to default HTML skin template.
packages/html/src/define/video/skin.tailwind.ts	Adds `<media-poster>` + Tailwind poster classes to default HTML skin template.
packages/html/src/define/video/minimal-skin.ts	Adds `<media-poster>` + poster slot to minimal HTML skin template.
packages/html/src/define/video/minimal-skin.tailwind.ts	Adds `<media-poster>` + Tailwind poster classes to minimal HTML skin template.
packages/html/src/define/base.css	Removes object-fit/position defaults from base video styling (delegated to skins).

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

Move poster styling from inline img rules into a dedicated media-poster component with its own CSS and Tailwind files for both default and minimal skins. Integrate poster prop into React video skin presets and HTML skin templates. Refactor sandbox to use centralized poster/storyboard helpers.

Copilot AI review requested due to automatic review settings March 18, 2026 02:28

Copilot started reviewing on behalf of sampotts March 18, 2026 02:28 View session

sampotts force-pushed the feat/poster branch from c98347f to 049ffb1 Compare March 18, 2026 02:33

vercel bot deployed to Preview March 18, 2026 02:33 View deployment

Copilot AI reviewed Mar 18, 2026

View reviewed changes

sampotts force-pushed the feat/poster branch from 049ffb1 to b860db8 Compare March 18, 2026 02:48

vercel bot deployed to Preview March 18, 2026 02:49 View deployment

sampotts force-pushed the feat/poster branch from b860db8 to 134b64c Compare March 18, 2026 02:53

vercel bot deployed to Preview March 18, 2026 02:53 View deployment

sampotts force-pushed the feat/poster branch from 134b64c to 2d22c05 Compare March 18, 2026 02:57

vercel bot deployed to Preview March 18, 2026 02:58 View deployment

sampotts force-pushed the feat/poster branch from 2d22c05 to 0551954 Compare March 18, 2026 03:11

vercel bot deployed to Preview March 18, 2026 03:11 View deployment

sampotts force-pushed the feat/poster branch from 0551954 to dc9074e Compare March 18, 2026 03:24

vercel bot deployed to Preview March 18, 2026 03:25 View deployment

sampotts force-pushed the feat/poster branch from dc9074e to b4c88bf Compare March 18, 2026 05:17

vercel bot deployed to Preview March 18, 2026 05:17 View deployment

sampotts force-pushed the feat/poster branch from b4c88bf to c314b3e Compare March 18, 2026 05:23

vercel bot deployed to Preview March 18, 2026 05:23 View deployment

sampotts force-pushed the feat/poster branch from c314b3e to b072229 Compare March 18, 2026 05:31

vercel bot deployed to Preview March 18, 2026 05:32 View deployment

mihar-22 approved these changes Mar 18, 2026

View reviewed changes

sampotts merged commit 59bbf6c into main Mar 18, 2026
20 checks passed

sampotts deleted the feat/poster branch March 18, 2026 06:57

luwes mentioned this pull request Mar 18, 2026

chore: release main #955

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(packages): add poster component to video skins#994

feat(packages): add poster component to video skins#994
sampotts merged 1 commit intomainfrom
feat/poster

sampotts commented Mar 18, 2026 •

edited

Loading

Uh oh!

vercel bot commented Mar 18, 2026 •

edited

Loading

Uh oh!

netlify bot commented Mar 18, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 18, 2026

Uh oh!

github-actions bot commented Mar 18, 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

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

Uh oh!

Summary

Changes

Testing

Uh oh!

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

Uh oh!

Uh oh!

netlify bot commented Mar 18, 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 18, 2026

CI Failure Diagnosis

Uh oh!

github-actions bot commented Mar 18, 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!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sampotts commented Mar 18, 2026 •

edited

Loading

vercel bot commented Mar 18, 2026 •

edited

Loading

netlify bot commented Mar 18, 2026 •

edited

Loading

github-actions bot commented Mar 18, 2026 •

edited

Loading