feat: add DashVideo media element (html, react) with sandbox support (#940)

packages/sandbox/app/constants.ts

@@ -1,4 +1,4 @@
 export const SKINS = ['default', 'minimal'] as const;
 export const PLATFORMS = ['html', 'react'] as const;
 export const STYLINGS = ['css', 'tailwind'] as const;
-export const PRESETS = ['video', 'hls-video', 'simple-hls-video', 'audio', 'background-video'] as const;
+export const PRESETS = ['video', 'hls-video', 'simple-hls-video', 'dash-video', 'audio', 'background-video'] as const;

packages/sandbox/app/shared/sources.ts

@@ -34,13 +34,25 @@ export const SOURCES = {
     url: 'https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4',
     type: 'mp4',
   },
+  'dash-1': {
+    label: 'DASH - Big Buck Bunny',
+    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
+    type: 'dash',
+  },
+  'dash-2': {
+    label: 'DASH - Envivio Test Stream',
+    url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd',
+    type: 'dash',
+  },
 } as const;
 
 export type SourceId = keyof typeof SOURCES;
 
 export const SOURCE_IDS = Object.keys(SOURCES) as SourceId[];
 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 DEFAULT_SOURCE: SourceId = 'hls-1';
 export const DEFAULT_AUDIO_SOURCE: SourceId = 'mp4-1';
+export const DEFAULT_DASH_SOURCE: SourceId = 'dash-1';
 
 export const BACKGROUND_VIDEO_SRC = 'https://stream.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/low.mp4';

packages/sandbox/app/shell/app.tsx

@@ -1,6 +1,13 @@
 import { PLATFORMS, PRESETS, STYLINGS } from '@app/constants';
 import type { SourceId } from '@app/shared/sources';
-import { DEFAULT_AUDIO_SOURCE, MP4_SOURCE_IDS, SOURCE_IDS, SOURCES } from '@app/shared/sources';
+import {
+  DASH_SOURCE_IDS,
+  DEFAULT_AUDIO_SOURCE,
+  DEFAULT_DASH_SOURCE,
+  MP4_SOURCE_IDS,
+  SOURCE_IDS,
+  SOURCES,
+} from '@app/shared/sources';
 import type { Platform, Preset, Styling } from '@app/types';
 import { useSkinSwitcher } from '@app/utils/use-skin-switcher';
 import { useSourceSwitcher } from '@app/utils/use-source-switcher';
@@ -67,14 +74,21 @@ export function App() {
     }
   }, [preset, source, setSource]);
 
-  // Constrain styling when switching to background-video
+  // Constrain source to DASH when switching to dash-video
   useEffect(() => {
-    if (preset === 'background-video' && styling === 'tailwind') {
+    if (preset === 'dash-video' && SOURCES[source].type !== 'dash') {
+      setSource(DEFAULT_DASH_SOURCE);
+    }
+  }, [preset, source, setSource]);
+
+  // Constrain styling when switching to a preset that has no tailwind template
+  useEffect(() => {
+    if ((preset === 'background-video' || preset === 'dash-video') && styling === 'tailwind') {
       setStyling('css');
     }
   }, [preset, styling]);
 
-  const availableSources = preset === 'audio' ? MP4_SOURCE_IDS : SOURCE_IDS;
+  const availableSources = preset === 'audio' ? MP4_SOURCE_IDS : preset === 'dash-video' ? DASH_SOURCE_IDS : SOURCE_IDS;
 
   const handleSourceChange = useCallback((value: string) => setSource(value as SourceId), [setSource]);
 
@@ -94,6 +108,7 @@ export function App() {
         availableSources={availableSources}
         isBackgroundVideo={preset === 'background-video'}
         isSimpleHlsVideo={preset === 'simple-hls-video'}
+        isDashVideo={preset === 'dash-video'}
         platforms={PLATFORMS}
         stylings={STYLINGS}
         presets={PRESETS}

packages/sandbox/app/shell/navbar.tsx

@@ -16,6 +16,7 @@ type NavbarProps = {
   availableSources: readonly SourceId[];
   isBackgroundVideo: boolean;
   isSimpleHlsVideo: boolean;
+  isDashVideo: boolean;
   platforms: readonly Platform[];
   stylings: readonly Styling[];
   presets: readonly Preset[];
@@ -33,6 +34,7 @@ const PRESET_LABELS: Record<Preset, string> = {
   video: 'Video',
   'hls-video': 'HLS Video',
   'simple-hls-video': 'Simple HLS Video',
+  'dash-video': 'DASH Video',
   audio: 'Audio',
   'background-video': 'Background Video',
 };
@@ -51,6 +53,7 @@ export function Navbar({
   availableSources,
   isBackgroundVideo,
   isSimpleHlsVideo,
+  isDashVideo,
   platforms,
   stylings,
   presets,
@@ -79,7 +82,7 @@ export function Navbar({
           options={stylings.map((s) => ({
             value: s,
             label: s === 'css' ? 'CSS' : 'Tailwind',
-            disabled: s === 'tailwind' && isBackgroundVideo,
+            disabled: s === 'tailwind' && (isBackgroundVideo || isDashVideo),
           }))}
         />