chore(sandbox): fix app for mux, native hls

[luwes]

Note

Low Risk
Low risk: changes are confined to the sandbox UI and CDN demo template, mainly adjusting preset module loading and how media sources are selected for playback.

Overview
Fixes the sandbox so Mux and native HLS presets load the correct CDN bundles and render the appropriate media element tags.

Updates source selection to avoid offering/retaining DASH sources for non-DASH presets (and vice versa), and updates CDN rendering to choose between src vs playback-id attributes depending on preset/source type.

^{Written by Cursor Bugbot for commit de424a1. This will update automatically on new commits. Configure here.}

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	de424a1
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/69cf3ded489e8f0008b00c37
😎 Deploy Preview	https://deploy-preview-1207--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.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Error		Apr 3, 2026 4:11am

[github-actions]

📦 Bundle Size Report

🎨 @videojs/html — no changes

Presets (7)

Entry	Size
/video (default)	24.92 kB
/video (default + hls)	156.64 kB
/video (minimal)	24.82 kB
/video (minimal + hls)	156.73 kB
/audio (default)	23.00 kB
/audio (minimal)	23.01 kB
/background	6.89 kB

Media (7)

Entry	Size
/media/background-video	1.04 kB
/media/container	1.59 kB
/media/dash-video	236.35 kB
/media/hls-video	133.34 kB
/media/mux-video	156.05 kB
/media/native-hls-video	3.54 kB
/media/simple-hls-video	14.96 kB

Players (3)

Entry	Size
/video/player	6.62 kB
/audio/player	6.61 kB
/background/player	6.60 kB

Skins (17)

Entry	Type	Size
/video/minimal-skin.css	css	3.42 kB
/video/skin.css	css	3.44 kB
/video/minimal-skin	js	24.83 kB
/video/minimal-skin.tailwind	js	25.13 kB
/video/skin	js	24.87 kB
/video/skin.tailwind	js	25.25 kB
/audio/minimal-skin.css	css	2.48 kB
/audio/skin.css	css	2.45 kB
/audio/minimal-skin	js	23.01 kB
/audio/minimal-skin.tailwind	js	23.22 kB
/audio/skin	js	23.00 kB
/audio/skin.tailwind	js	23.29 kB
/background/skin.css	css	117 B
/background/skin	js	1.15 kB
/base.css	css	157 B
/shared.css	css	88 B
/skin-element	js	1.34 kB

UI Components (22)

Entry	Size
/ui/alert-dialog	1.93 kB
/ui/alert-dialog-close	1.70 kB
/ui/alert-dialog-description	1.68 kB
/ui/alert-dialog-title	1.62 kB
/ui/buffering-indicator	1.67 kB
/ui/captions-button	2.00 kB
/ui/controls	1.66 kB
/ui/error-dialog	2.16 kB
/ui/fullscreen-button	1.98 kB
/ui/mute-button	2.02 kB
/ui/pip-button	2.01 kB
/ui/play-button	2.05 kB
/ui/playback-rate-button	1.78 kB
/ui/popover	1.77 kB
/ui/poster	1.59 kB
/ui/seek-button	2.01 kB
/ui/slider	1.70 kB
/ui/thumbnail	1.98 kB
/ui/time	1.75 kB
/ui/time-slider	2.18 kB
/ui/tooltip	2.30 kB
/ui/volume-slider	2.33 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes

Presets (7)

Entry	Size
/video (default)	19.83 kB
/video (default + hls)	151.71 kB
/video (minimal)	19.89 kB
/video (minimal + hls)	151.76 kB
/audio (default)	16.65 kB
/audio (minimal)	16.70 kB
/background	3.13 kB

Media (6)

Entry	Size
/media/background-video	476 B
/media/dash-video	236.39 kB
/media/hls-video	133.25 kB
/media/mux-video	155.98 kB
/media/native-hls-video	3.50 kB
/media/simple-hls-video	15.03 kB

Skins (14)

Entry	Type	Size
/video/minimal-skin.css	css	3.35 kB
/video/skin.css	css	3.37 kB
/video/minimal-skin	js	19.81 kB
/video/minimal-skin.tailwind	js	23.28 kB
/video/skin	js	19.77 kB
/video/skin.tailwind	js	23.36 kB
/audio/minimal-skin.css	css	2.38 kB
/audio/skin.css	css	2.34 kB
/audio/minimal-skin	js	16.63 kB
/audio/minimal-skin.tailwind	js	19.12 kB
/audio/skin	js	16.58 kB
/audio/skin.tailwind	js	19.10 kB
/background/skin.css	css	90 B
/background/skin	js	272 B

UI Components (19)

Entry	Size
/ui/alert-dialog	1.52 kB
/ui/buffering-indicator	1.22 kB
/ui/captions-button	1.83 kB
/ui/controls	1.18 kB
/ui/error-dialog	1.64 kB
/ui/fullscreen-button	1.82 kB
/ui/mute-button	1.83 kB
/ui/pip-button	1.84 kB
/ui/play-button	1.86 kB
/ui/playback-rate-button	1.31 kB
/ui/popover	2.94 kB
/ui/poster	1.12 kB
/ui/seek-button	1.83 kB
/ui/slider	2.32 kB
/ui/thumbnail	1.41 kB
/ui/time	1.95 kB
/ui/time-slider	2.69 kB
/ui/tooltip	2.14 kB
/ui/volume-slider	2.82 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes

Entries (8)

Entry	Size
.	5.27 kB
/dom	8.89 kB
/dom/media/custom-media-element	1.82 kB
/dom/media/dash	235.73 kB
/dom/media/hls	132.79 kB
/dom/media/mux	155.45 kB
/dom/media/native-hls	2.90 kB
/dom/media/simple-hls	14.43 kB

🏷️ @videojs/element — no changes

Entries (2)

Entry	Size
.	999 B
/context	943 B

📦 @videojs/store — no changes

Entries (3)

Entry	Size
.	1.39 kB
/html	696 B
/react	360 B

🔧 @videojs/utils — no changes

Entries (10)

Entry	Size
/array	104 B
/dom	1.53 kB
/events	319 B
/function	261 B
/object	247 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	12.45 kB
/playback-engine	12.41 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.