feat(sandbox): dynamically load skins by styling#989
Merged
Conversation
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
sampotts
requested review from
cjpillsbury,
Copilot and
mihar-22
and removed request for
cjpillsbury
Contributor
📦 Bundle Size Report🎨 @videojs/html(no changes) Presets (7)
Media (5)
Players (3)
Skins (16)
UI Components (21)
Sizes are marginal over the root entry point. ⚛️ @videojs/react(no changes) Presets (7)
Media (4)
Skins (14)
UI Components (18)
Sizes are marginal over the root entry point. 🧩 @videojs/core(no changes) Entries (6)
🏷️ @videojs/element(no changes) Entries (2)
📦 @videojs/store(no changes) Entries (3)
🔧 @videojs/utils(no changes) Entries (10)
📦 @videojs/spf(no changes) Entries (3)
ℹ️ How to interpretAll sizes are standalone totals (minified + brotli).
Run |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors the sandbox to (1) keep skin/source selection in a shared in-memory store (instead of localStorage), and (2) dynamically load the correct React + HTML skin implementations based on the current styling (CSS vs Tailwind), removing the separate *-tailwind templates.
Changes:
- Replaced localStorage-backed skin/source persistence with a shared store using
BroadcastChannel+ an in-memory registry. - Consolidated Tailwind vs CSS sandboxes by passing
stylingvia URL params and dynamically loading the appropriate skin implementations. - Removed dedicated React/HTML Tailwind template directories and updated shell preview URL construction.
Reviewed changes
Copilot reviewed 30 out of 30 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/sandbox/templates/react-video/main.tsx | Stop importing skin CSS upfront; read styling from URL and pass into VideoSkinComponent. |
| packages/sandbox/templates/react-simple-hls-video/main.tsx | Same as above for SimpleHlsVideo. |
| packages/sandbox/templates/react-hls-video/main.tsx | Same as above for HlsVideo. |
| packages/sandbox/templates/react-dash-video/main.tsx | Same as above for DashVideo. |
| packages/sandbox/templates/react-audio/main.tsx | Same as above for audio skins. |
| packages/sandbox/templates/react-video-tailwind/main.tsx | Removed dedicated Tailwind template. |
| packages/sandbox/templates/react-video-tailwind/index.html | Removed dedicated Tailwind template HTML. |
| packages/sandbox/templates/react-audio-tailwind/main.tsx | Removed dedicated Tailwind template. |
| packages/sandbox/templates/react-audio-tailwind/index.html | Removed dedicated Tailwind template HTML. |
| packages/sandbox/templates/html-video/main.ts | Switch to shared HTML sandbox state + dynamically loaded skin tags. |
| packages/sandbox/templates/html-simple-hls-video/main.ts | Same as above for simple HLS. |
| packages/sandbox/templates/html-hls-video/main.ts | Same as above for HLS. |
| packages/sandbox/templates/html-dash-video/main.ts | Same as above for DASH. |
| packages/sandbox/templates/html-audio/main.ts | Same as above for audio. |
| packages/sandbox/templates/html-video-tailwind/main.ts | Removed dedicated Tailwind template. |
| packages/sandbox/templates/html-video-tailwind/index.html | Removed dedicated Tailwind template HTML. |
| packages/sandbox/templates/html-audio-tailwind/main.ts | Removed dedicated Tailwind template. |
| packages/sandbox/templates/html-audio-tailwind/index.html | Removed dedicated Tailwind template HTML. |
| packages/sandbox/app/utils/create-shared-store.ts | New shared store implementation using a global registry + BroadcastChannel. |
| packages/sandbox/app/utils/stores.ts | Wire skinStore/sourceStore to the shared store and initialize from query params. |
| packages/sandbox/app/shared/sandbox-listener.ts | Replace localStorage + postMessage syncing with shared stores. |
| packages/sandbox/app/shell/app.tsx | Collapse *-tailwind routes; keep styling in URL state; remove iframe postMessage code. |
| packages/sandbox/app/shell/navbar.tsx | Update Tailwind availability logic (no longer disables for DASH). |
| packages/sandbox/app/shell/preview.tsx | Build/open preview URL including skin/styling/source (and set iframe src to it). |
| packages/sandbox/app/shared/react/skins.tsx | Dynamically import the appropriate React skin component and CSS at runtime. |
| packages/sandbox/app/shared/html/skins.ts | New dynamic loader for HTML skin tags (CSS and Tailwind variants). |
| packages/sandbox/app/shared/html/sandbox-state.ts | New shared state helper for HTML templates + “latest loader” to avoid races. |
| packages/sandbox/app/shared/html/tailwind-setup.ts | Refactor to expose Tailwind stylesheet via getTailwindStyles(). |
| packages/sandbox/app/shared/html/stylesheets.ts | Use a stable data-sandbox-stylesheet id to replace the active stylesheet link. |
| packages/sandbox/app/main.tsx | Remove pre-mount query-param → localStorage syncing (no longer applicable). |
💡 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.
Comment on lines
+12
to
+13
| if (skinParam) skinStore.initialize(skinParam); | ||
| if (sourceParam) sourceStore.initialize(sourceParam); |
mihar-22
previously approved these changes
Mar 17, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors the sandbox to drive skin/source/styling selection via in-memory state + URL params, and dynamically loads the correct React + HTML skin implementations (including Tailwind variants) instead of relying on separate *-tailwind sandbox entries and localStorage syncing.
Changes:
- Removed localStorage-backed stores/hooks and switched sandbox state initialization to URL params + postMessage updates.
- Collapsed dedicated Tailwind templates; styling is now selected per sandbox tab via
?styling=.... - Added dynamic skin loaders for React (
@videojs/react/*) and HTML (@videojs/html/*), including Tailwind stylesheet setup.
Reviewed changes
Copilot reviewed 34 out of 34 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/sandbox/templates/react-video/main.tsx | Reads styling from URL and passes it into the shared VideoSkinComponent; removes eager CSS skin imports. |
| packages/sandbox/templates/react-video-tailwind/main.tsx | Removes the dedicated Tailwind React video template entry. |
| packages/sandbox/templates/react-video-tailwind/index.html | Removes the dedicated Tailwind React video HTML entrypoint. |
| packages/sandbox/templates/react-simple-hls-video/main.tsx | Same as react-video, but for SimpleHlsVideo. |
| packages/sandbox/templates/react-hls-video/main.tsx | Same as react-video, but for HlsVideo. |
| packages/sandbox/templates/react-dash-video/main.tsx | Same as react-video, but for DashVideo. |
| packages/sandbox/templates/react-audio/main.tsx | Reads styling from URL and passes it into the shared AudioSkinComponent; removes eager CSS skin imports. |
| packages/sandbox/templates/react-audio-tailwind/main.tsx | Removes the dedicated Tailwind React audio template entry. |
| packages/sandbox/templates/react-audio-tailwind/index.html | Removes the dedicated Tailwind React audio HTML entrypoint. |
| packages/sandbox/templates/html-video/main.ts | Switches HTML video template to dynamic skin-tag loading and shared in-memory sandbox state. |
| packages/sandbox/templates/html-video-tailwind/main.ts | Removes the dedicated Tailwind HTML video template entry. |
| packages/sandbox/templates/html-video-tailwind/index.html | Removes the dedicated Tailwind HTML video HTML entrypoint. |
| packages/sandbox/templates/html-simple-hls-video/main.ts | Switches HTML simple-HLS template to dynamic skin-tag loading and shared in-memory sandbox state. |
| packages/sandbox/templates/html-hls-video/main.ts | Switches HTML HLS template to dynamic skin-tag loading and shared in-memory sandbox state. |
| packages/sandbox/templates/html-dash-video/main.ts | Switches HTML DASH template to dynamic skin-tag loading and shared in-memory sandbox state. |
| packages/sandbox/templates/html-audio/main.ts | Switches HTML audio template to dynamic skin-tag loading and shared in-memory sandbox state. |
| packages/sandbox/templates/html-audio-tailwind/main.ts | Removes the dedicated Tailwind HTML audio template entry. |
| packages/sandbox/templates/html-audio-tailwind/index.html | Removes the dedicated Tailwind HTML audio HTML entrypoint. |
| packages/sandbox/app/utils/use-web-storage.ts | Deletes localStorage hook wrapper (no longer used). |
| packages/sandbox/app/utils/use-source-switcher.ts | Deletes localStorage-backed source switcher hook. |
| packages/sandbox/app/utils/use-skin-switcher.ts | Deletes localStorage-backed skin switcher hook. |
| packages/sandbox/app/utils/use-external-store.ts | Deletes useSyncExternalStore wrapper for removed stores. |
| packages/sandbox/app/utils/stores.ts | Deletes localStorage-backed stores. |
| packages/sandbox/app/utils/create-web-storage-store.ts | Deletes the generic web-storage store implementation. |
| packages/sandbox/app/shell/preview.tsx | Adds styling and builds iframe URL once per mount (navigation on styling/page change via key). |
| packages/sandbox/app/shell/navbar.tsx | Removes Tailwind disablement for DASH preset; Tailwind is now only disabled for background-video. |
| packages/sandbox/app/shell/app.tsx | Moves initial skin/source to URL-param initialization (no localStorage), updates iframe URL logic, and keeps URL synced to state. |
| packages/sandbox/app/shared/sandbox-listener.ts | Replaces web-storage syncing with URL param initialization + postMessage-driven updates (in-memory). |
| packages/sandbox/app/shared/react/skins.tsx | Introduces dynamic loading for React skin components + CSS imports based on skin/styling. |
| packages/sandbox/app/shared/html/tailwind-setup.ts | Refactors Tailwind setup to expose a shared constructed CSSStyleSheet. |
| packages/sandbox/app/shared/html/stylesheets.ts | Updates stylesheet loading to replace per-kind links via data-sandbox-stylesheet ids. |
| packages/sandbox/app/shared/html/skins.ts | New: dynamic HTML skin/tag loader for CSS and Tailwind variants. |
| packages/sandbox/app/shared/html/sandbox-state.ts | New: shared HTML sandbox state and a “latest loader” helper for async rendering. |
| packages/sandbox/app/main.tsx | Removes pre-mount localStorage sync (no longer applicable). |
💡 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.
sampotts
force-pushed
the
codex/sandbox-dynamic-styling
branch
from
1482383 to
17fc72c
Compare
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
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.
Summary
Testing