feat(sandbox): fold the skins playground into the sandbox - #2586
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
@videojs/core
@videojs/element
@videojs/html
@videojs/media
@videojs/react
@videojs/spf
@videojs/store
@videojs/utils
commit: |
Contributor
📦 Bundle Size Report🎨 @videojs/html
Small changes (16, ≤ 300 B)
Presets (7)
Media (18)
Extensions (2)
Players (5)
Skins (29)
UI Components (62)
⚛️ @videojs/react — 8 small size changes
Presets (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/media
Entries (23)
📦 @videojs/spf — no changesEntries (10)
ℹ️ 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 |
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
mihar-22
force-pushed
the
feat/sandbox-playground
branch
from
September 3, 2026 00:28
a592c38 to
1984ba2
Compare
Contributor
Contributor
|
E2E triage: real regression. The buffering indicator stays hidden after |
Contributor
…e its output pnpm exec exited without output in the CI container while npx worked from the previous layout, so use npx from the e2e package and pipe the server's stdout and stderr into the Playwright log.
The workspace overrides every vite dependency with the Vite+ core package, which ships only the vp binary, so neither pnpm exec vite nor npx vite can start the player app in a clean install. Run vp dev from the e2e package against the app directory, as the app's own dev script and the sandbox already do.
…ets" This reverts commit a592c38.
The time label sat two units higher than the legacy default skin placed it and the Minimal label and thumbnail sat two and three units higher, with extra horizontal padding the legacy Minimal label never had. The offsets return to 10.5 default and 5 Minimal for labels and 11 for the Minimal thumbnail.
The navbar keeps what plays: platform, media, and source. The skin, its styling, where it comes from, and the compare axis move into the preview header. Width, appearance, playback, captions, language, and the detected preferences move into an Options panel beside the preview, toggled from the navbar and remembered across loads, so nothing covers the player. The width control now reaches 1360px and takes an exact value.
The dark overlay colour and its blur were the only tokens still called scrim while the utilities that used them were already named after the backdrop. `--media-scrim` becomes `--media-backdrop`, `--media-backdrop-filter-scrim` becomes `--media-backdrop-filter-backdrop`, and the `bg-media-backdrop` and `backdrop-filter-media-backdrop` utilities follow.
…registry modules A module owned by a preset directory such as `skins/audio` was written to that directory for every skin that used it, and that directory is also the default theme's own. Default and Minimal audio both compiled `time-slider.tsx` there with their own variants, and the default copy won, so the Minimal audio slider preview in the Tailwind registry output kept the default's fixed-width preview box and stopped short of both edges. The Minimal theme now keeps such modules beside its skin, as it already does for shared components.
…y module A skin's compiled module was mapped onto a published item whenever its own source and styles matched, so a component whose source never changes between skins, such as the playback rate button, resolved to the shared item even though the button it renders differs by skin. The Minimal audio skin then rendered its rate trigger with the default theme's radius in the Tailwind registry output. Two modules are now interchangeable only when everything they import is interchangeable too.
`--media-backdrop-filter-backdrop` sat behind the buffering and playback status indicators only, so it is now `--media-backdrop-filter-indicator`, beside the `-surface` and `-dialog` filters, with the `backdrop-filter-media-indicator` utility to match.
mihar-22
force-pushed
the
feat/sandbox-playground
branch
from
September 3, 2026 18:59
87e8f01 to
b8cda46
Compare
The define entries import their skin's internal/skins/*/register.js for its element registrations, but package.json#sideEffects never listed that path, so production bundlers dropped the import and packaged HTML skins rendered without a container or controls. Pin the coverage with a test.
… escape markup values The CDN page now adds the subtitle tracks the shell streams, the preview pages default the skin source through defaultSkinSource so an html Tailwind URL loads the authored skin, and the html string sinks escape the URLs they interpolate.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
…enable A styling comparison puts CSS in the first panel, so constraining the shell's styling by that panel's source sent a Tailwind selection back to CSS. Constrain it by the selection's own resolved source instead. Mirroring also reports the current playback state as soon as it turns on or binds a media element, so the sibling panel does not wait for the next event.
The pkg.pr.new template is apps/sandbox alone, and it failed at every step: pnpm could not resolve the catalog: specs or the private @videojs/icons range, the start command ran a dev script that did not exist, pnpm 11 refused the preview packages' URL subdependencies and re-ran the install before the task, the Vite config imported build/task.ts from the repo root, the task graph named sibling packages, a nested tsconfig extended the root one, and setup aborted when the hosted registry answered 404. CI now prepares the template manifest before publishing, the start command runs the dev task through vp with the pnpm settings the template needs, the config carries its own task helpers and declares cross-package tasks only inside the workspace, the shared type project moved beside tsconfig.json, and setup degrades to package skins when the registry is unreachable, which the shell reflects by disabling the registry sources.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit cefbb6a. Configure here.
defaultSkinSource named the registry for React Tailwind even where setup found no registry, so a direct Tailwind URL loaded modules that were not there before the shell's CSS fallback ran. Pick the first available source that publishes the styling, and fall back to the packages' CSS skin.
7 tasks
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.
Stacked on #2585.
Summary
The skins playground and the sandbox overlapped: both loaded skins, both switched styling, skin, and media, and only one of them had compare, a width slider, color scheme, direction, preference badges, and a copyable report. This PR moves all of that into the sandbox, lets the sandbox load skins from the framework packages, the Shadcn registry, or the authored sources compiled in the workspace, points the skin-parity suite at the sandbox, and removes the playground. One commit per step, in the order below.
Changes
createHtmlSandboxowns the shell's selections, the latest-skin guard,<media-i18n>, and the change subscriptions for every html page;useSandboxdoes the same for react. A template is the player it mounts, its media markup, and what an attribute cannot carry.app/media.tsdescribes each media engine once. The shell, navbar, and CDN page derive their source lists, defaults, and disabled controls from it, and a unit test pins the lists and the template coverage. The axis ismedianow;?preset=still resolves.--sandbox-player-width; a preview opens at its skin's own width until the control is touched. Color scheme pinscolor-schemeon the shell and the preview, and thedark:variant follows the resolved scheme. Direction pins the document and the player, which otherwise derives one from its locale. Captions adds one or two subtitle tracks through the runtimes. All of it travels in the URL.skinsaxis: the framework packages (CSS), the Shadcn registry (CSS for both platforms, Tailwind for React; the html registry install was always a CSS skin), or the authored sources, compiled on request through the skins' Vite preset inside the workspace and disabled elsewhere. Setup installs the registry's React CSS catalog beside the Tailwind one under its own alias. The preset is loaded throughvite.workspace.config.ts, which the dev and build tasks pass as--configonce their dependencies are built; the task config itself never imports the compiler, because Vite+ reads it before anything is built.packages/skins/dev, its Tailwind entry, task, and scripts are gone;pnpm -F @videojs/skins devregenerates package inputs and points at the sandbox.vjscparsed every module it wrapped as a script, which failed the first production build through the plugin on the graph plugin's virtual stylesheets. It now parses script modules only, with a test.Testing
pnpm -F @videojs/sandbox test: 26 unit tests for the media table, skin sources, compare panels, and the report.pnpm --workspace-root build:sandbox, the command Vercel runs, from a task graph loaded withpackages/vjsc/distmoved aside: the graph loads, and the build completes in about 12 seconds.Follow-ups
🤖 Generated with Claude Code
Note
Medium Risk
Large surface area across sandbox shell, skin loading paths, and visual parity E2E; behavior changes are mostly dev/demo and test infrastructure rather than published player APIs.
Overview
Consolidates skin development and parity testing into
@videojs/sandbox, replacing the separate skins playground with a richer shell: URL-drivenmedia(replacingpreset), skin provenance (package/ registry / authored), side-by-side compare and mirror playback, width/scheme/direction/captions, and a copyable report with errors and preferences.Runtime refactors unify HTML (
createHtmlSandbox) and React (useSandbox) around shared shell state; skins load through package imports, Shadcn registry templates, or workspace-authored VJSC modules (vite.workspace.config.ts). CI adds@videojs/sandbox, runsprepare-template.tsbefore StackBlitz uploads, and skin-parity E2E now boots the sandbox compare UI (iframe-aware helpers, updated baselines).Registry E2E gains webpack and rspack consumer projects with static
dist/serving; player E2E switches to Vite+ (vp). New sandbox Playwright specs cover compare, mirror, report, shell controls, and authored skins.Reviewed by Cursor Bugbot for commit 679b447. Bugbot is set up for automated code reviews on this repo. Configure here.