From 5a3254fd8175b214a3b32bf03d7d799ff5234463 Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Thu, 2 Apr 2026 23:13:23 -0500
Subject: [PATCH] chore(sandbox): fix app for mux, native hls (#1207)

---
 apps/sandbox/app/shared/sources.ts |  1 +
 apps/sandbox/app/shell/app.tsx     | 11 ++++++++--
 apps/sandbox/templates/cdn/main.ts | 34 +++++++++++++++++++++++++-----
 3 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/apps/sandbox/app/shared/sources.ts b/apps/sandbox/app/shared/sources.ts
index b1ee6ac0..9781eed3 100644
--- a/apps/sandbox/app/shared/sources.ts
+++ b/apps/sandbox/app/shared/sources.ts
@@ -59,6 +59,7 @@ export const SOURCES = {
 export type SourceId = keyof typeof SOURCES;
 
 export const SOURCE_IDS = Object.keys(SOURCES) as SourceId[];
+export const NON_DASH_SOURCE_IDS = SOURCE_IDS.filter((id) => SOURCES[id].type !== 'dash');
 export const MP4_SOURCE_IDS = SOURCE_IDS.filter((id) => SOURCES[id].type === 'mp4');
 export const DASH_SOURCE_IDS = SOURCE_IDS.filter((id) => SOURCES[id].type === 'dash');
 export const MUX_SOURCE_IDS = SOURCE_IDS.filter((id) => !!SOURCES[id].playbackId);
diff --git a/apps/sandbox/app/shell/app.tsx b/apps/sandbox/app/shell/app.tsx
index 70189bb9..c168a74b 100644
--- a/apps/sandbox/app/shell/app.tsx
+++ b/apps/sandbox/app/shell/app.tsx
@@ -7,7 +7,7 @@ import {
   DEFAULT_SOURCE,
   MP4_SOURCE_IDS,
   MUX_SOURCE_IDS,
-  SOURCE_IDS,
+  NON_DASH_SOURCE_IDS,
   SOURCES,
 } from '@app/shared/sources';
 import type { Platform, Preset, Styling } from '@app/types';
@@ -71,6 +71,13 @@ export function App() {
     }
   }, [preset, source, setSource]);
 
+  // Constrain source away from DASH for non-DASH presets
+  useEffect(() => {
+    if (preset !== 'dash-video' && SOURCES[source].type === 'dash') {
+      setSource(DEFAULT_SOURCE);
+    }
+  }, [preset, source, setSource]);
+
   // Constrain source to Mux playbackId sources when switching to mux-video
   useEffect(() => {
     if (preset === 'mux-video' && !SOURCES[source].playbackId) {
@@ -92,7 +99,7 @@ export function App() {
         ? DASH_SOURCE_IDS
         : preset === 'mux-video'
           ? MUX_SOURCE_IDS
-          : SOURCE_IDS;
+          : NON_DASH_SOURCE_IDS;
 
   const handleSourceChange = useCallback((value: string) => setSource(value as SourceId), [setSource]);
 
diff --git a/apps/sandbox/templates/cdn/main.ts b/apps/sandbox/templates/cdn/main.ts
index 7016a3cd..acd41551 100644
--- a/apps/sandbox/templates/cdn/main.ts
+++ b/apps/sandbox/templates/cdn/main.ts
@@ -23,6 +23,8 @@ async function loadCdnPreset(preset: Preset, skin: Skin) {
   switch (preset) {
     case 'video':
     case 'hls-video':
+    case 'mux-video':
+    case 'native-hls-video':
     case 'simple-hls-video':
     case 'dash-video':
       if (skin === 'minimal') await import('@videojs/html/cdn/video-minimal');
@@ -43,6 +45,12 @@ async function loadCdnMedia(preset: Preset) {
     case 'hls-video':
       await import('@videojs/html/cdn/media/hls-video');
       break;
+    case 'mux-video':
+      await import('@videojs/html/cdn/media/mux-video');
+      break;
+    case 'native-hls-video':
+      await import('@videojs/html/cdn/media/native-hls-video');
+      break;
     case 'simple-hls-video':
       await import('@videojs/html/cdn/media/simple-hls-video');
       break;
@@ -71,6 +79,8 @@ function getSkinTag(preset: Preset, skin: Skin): string {
 function getMediaTag(preset: Preset): string {
   const tags: Partial<Record<Preset, string>> = {
     'hls-video': 'hls-video',
+    'mux-video': 'mux-video',
+    'native-hls-video': 'native-hls-video',
     'simple-hls-video': 'simple-hls-video',
     'dash-video': 'dash-video',
     audio: 'audio',
@@ -87,7 +97,14 @@ function loadStylesheets(preset: Preset, skin: Skin) {
 }
 
 function isVideoPreset(preset: Preset): boolean {
-  return preset === 'video' || preset === 'hls-video' || preset === 'simple-hls-video' || preset === 'dash-video';
+  return (
+    preset === 'video' ||
+    preset === 'hls-video' ||
+    preset === 'mux-video' ||
+    preset === 'native-hls-video' ||
+    preset === 'simple-hls-video' ||
+    preset === 'dash-video'
+  );
 }
 
 async function render() {
@@ -102,10 +119,17 @@ async function render() {
   const playerTag = getPlayerTag(preset);
   const skinTag = getSkinTag(preset, state.skin);
   const mediaTag = getMediaTag(preset);
-  const src = preset === 'background-video' ? BACKGROUND_VIDEO_SRC : SOURCES[state.source].url;
+  const source = SOURCES[state.source];
   const storyboard = isVideoPreset(preset) ? getStoryboardSrc(state.source) : undefined;
   const poster = isVideoPreset(preset) ? getPosterSrc(state.source) : undefined;
 
+  const sourceAttr =
+    preset === 'background-video'
+      ? `src="${BACKGROUND_VIDEO_SRC}"`
+      : preset === 'mux-video' && source.type !== 'mp4'
+        ? `playback-id="${source.playbackId}"`
+        : `src="${source.url}"`;
+
   // Background video needs viewport dimensions instead of flex centering.
   if (preset === 'background-video') {
     root.className = '';
@@ -116,7 +140,7 @@ async function render() {
     root.innerHTML = html`
       <${playerTag}>
         <${skinTag}>
-          <${mediaTag} src="${src}"></${mediaTag}>
+          <${mediaTag} ${sourceAttr}></${mediaTag}>
         </${skinTag}>
       </${playerTag}>
     `;
@@ -128,7 +152,7 @@ async function render() {
       <div class="w-full max-w-xl mx-auto">
         <${playerTag}>
           <${skinTag}>
-            <${mediaTag} src="${src}"></${mediaTag}>
+            <${mediaTag} ${sourceAttr}></${mediaTag}>
           </${skinTag}>
         </${playerTag}>
       </div>
@@ -139,7 +163,7 @@ async function render() {
   root.innerHTML = html`
     <${playerTag}>
       <${skinTag} class="aspect-video max-w-4xl mx-auto">
-        <${mediaTag} src="${src}" playsinline crossorigin="anonymous">
+        <${mediaTag} ${sourceAttr} playsinline crossorigin="anonymous">
           ${renderStoryboard(storyboard)}
         </${mediaTag}>
         ${poster ? html`<img slot="poster" src="${poster}" alt="Video poster" />` : ''}