refactor(sandbox): spell out the player markup in the html templates - #2691
Merged
Conversation
#2586 moved the player element, the skin, its frame classes, and the poster into `createHtmlSandbox`, so a template only wrote its media element and a reader had to open the runtime to learn how a player is put together. Templates now render the whole player as a consumer would write it, and the runtime hands them only what the shell varies: the skin tag it registered, the live player tag, the source and poster URLs, and the attributes the Options panel controls. The frame classes become the plain `max-w-4xl` and `max-w-xl` a consumer would use; an unlayered rule in `styles.css` caps them at the shell's `--sandbox-player-width` so the width control still works.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
✅ Deploy Preview for vjs-registry canceled.
|
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
@videojs/cdn
@videojs/core
@videojs/element
@videojs/html
@videojs/media
@videojs/react
@videojs/spf
@videojs/store
@videojs/utils
@videojs/cloudflare-video
@videojs/dash-video
@videojs/hlsjs-video
@videojs/mux-audio
@videojs/mux-video
@videojs/native-hls-video
@videojs/shaka-video
@videojs/spotify-audio
@videojs/tiktok-video
@videojs/twitch-video
@videojs/vimeo-video
@videojs/wistia-video
@videojs/youtube-video
@videojs/google-cast
@videojs/mux-data
commit: |
Contributor
📦 Bundle Size Report🎨 @videojs/html — no changesPresets (7)
Media (18)
Players (5)
Skins (29)
UI Components (62)
⚛️ @videojs/react — no changesPresets (7)
Media (22)
Extensions (2)
Players (5)
Skins (18)
UI Components (39)
🧩 @videojs/core — no changesEntries (76)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (13)
📦 @videojs/cdn — no changes📦 @videojs/cloudflare-video — no changes📦 @videojs/dash-video — no changes📦 @videojs/google-cast — no changes📦 @videojs/hlsjs-video — no changes📦 @videojs/media — no changesEntries (3)
📦 @videojs/mux — no changes📦 @videojs/mux-audio — no changesEntries (2)
📦 @videojs/mux-data — no changes📦 @videojs/mux-video — no changesEntries (2)
📦 @videojs/native-hls-video — no changes📦 @videojs/shaka-video — no changes📦 @videojs/spf — no changesEntries (7)
📦 @videojs/spotify-audio — no changes📦 @videojs/tiktok-video — no changes📦 @videojs/twitch-video — no changes📦 @videojs/vimeo-video — no changes📦 @videojs/wistia-video — no changesEntries (2)
📦 @videojs/youtube-video — no changesℹ️ How to interpretEach entry is independently bundled, minified, and brotli-compressed. Initial size includes its static import graph; lazy dynamic chunks are reported separately. Entries are not additive because their dependency graphs overlap. Preset rows represent realistic combined bundles. Changes of 300 B or less across initial, lazy, and total size are collapsed, not discarded. Run |
mihar-22
approved these changes
Sep 9, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Refs #2586
Summary
The html sandbox templates render the whole player again — the player element, the skin, and the media inside it — so the markup can be read and copied straight from
templates/html-*/main.ts. #2586 had folded that markup intocreateHtmlSandbox, leaving a template with only its media element.Changes
createHtmlSandboxtakes arendercallback in place ofmediaandposter, and its context exposes what the shell varies: the registeredskinTag, the liveplayerTag, the source andposter/placeholderURLs, and the Options-panel attributes. The runtime still owns the sandbox-only concerns: state streaming, skin loading,<media-i18n>, caption injection, mirror, and direction.html-*template writes its player, skin, frame classes, and poster markup literally. Non-live players and the background skin are written by tag; live-capable templates use${playerTag}, and skinned templates use${skinTag}.max-w-4xl/max-w-xla consumer would write. An unlayered rule inapp/styles.csscaps those at--sandbox-player-width, so the shell's width control keeps working without the sandbox-specific classes appearing in the templates. The CDN page uses the same classes; React pages are unchanged.Implementation details
The poster and placeholder are handed over as attribute-safe URL strings rather than markup, so templates guard on them (
${poster ? html<img slot="poster" …>: ''}) the same way the runtime did, since the Mux pickers include a source with no asset.The width rule reaches through
<media-i18n>as well because the CDN page nests the provider inside the player element rather than around it.Testing
pnpm -F @videojs/sandbox test: 30 passed.sandbox-mirror.spec.ts › carries playback from one panel to the other, times out clicking Pause in the React panel while its controls auto-hide; it fails onmaintoo and the React page is untouched here.shell-controls,html-i18n,skin-styling,compare,cdn-i18n) were rerun: 89 passed./?platform=html&media=video, drag the Options width slider, switch skin, source, and captions; the player resizes and re-renders as before.Note
Medium Risk
Wide mechanical refactor across all HTML sandbox entry points and preview layout CSS; behavior should match prior tests but poster/live tag wiring now lives in many templates.
Overview
HTML sandbox templates now own the full player markup so examples read like copy-paste integration code instead of a thin
mediasnippet wrapped by the runtime.createHtmlSandboxdrops themediaandposteroptions in favor of arender(context)callback. The context addsplayerTag,skinTag, and escapedposter/placeholderURLs; the helper no longer builds player/skin wrappers or poster slots internally. Shell behavior (state, skin load, i18n wrap, captions, mirror) is unchanged.Every
html-*template (and the CDN page) writesvideo-player/audio-player,${skinTag}, framing with consumermax-w-4xl/max-w-xl, and optional poster markup—Mux pages use playerposterplus blur placeholder slots explicitly.styles.cssadds#rootrules so those Tailwind caps still honor--sandbox-player-width; React framing viaPLAYER_FRAME_CLASSESis documented as React-only.Reviewed by Cursor Bugbot for commit 69cd83d. Bugbot is set up for automated code reviews on this repo. Configure here.