From 143b7d1938c4a0243786ea556bb5be017d68a293 Mon Sep 17 00:00:00 2001 From: Christian Pillsbury Date: Mon, 9 Mar 2026 20:12:34 -0700 Subject: [PATCH] chore(sandbox): adding spf/simple-hls-video + filtering to only include CMAF/fmp4 sources --- packages/sandbox/templates/constants.ts | 2 +- .../html-simple-hls-video/index.html | 15 +++++++ .../templates/html-simple-hls-video/main.ts | 41 +++++++++++++++++++ .../react-simple-hls-video/index.html | 15 +++++++ .../templates/react-simple-hls-video/main.tsx | 24 +++++++++++ packages/sandbox/templates/shared/sources.ts | 14 ++++++- packages/sandbox/templates/shell/app.tsx | 1 + packages/sandbox/templates/shell/navbar.tsx | 13 +++++- 8 files changed, 120 insertions(+), 5 deletions(-) create mode 100644 packages/sandbox/templates/html-simple-hls-video/index.html create mode 100644 packages/sandbox/templates/html-simple-hls-video/main.ts create mode 100644 packages/sandbox/templates/react-simple-hls-video/index.html create mode 100644 packages/sandbox/templates/react-simple-hls-video/main.tsx diff --git a/packages/sandbox/templates/constants.ts b/packages/sandbox/templates/constants.ts index 2be897470..18c882b1a 100644 --- a/packages/sandbox/templates/constants.ts +++ b/packages/sandbox/templates/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', 'audio', 'background-video'] as const; +export const PRESETS = ['video', 'hls-video', 'simple-hls-video', 'audio', 'background-video'] as const; diff --git a/packages/sandbox/templates/html-simple-hls-video/index.html b/packages/sandbox/templates/html-simple-hls-video/index.html new file mode 100644 index 000000000..70e9ffcff --- /dev/null +++ b/packages/sandbox/templates/html-simple-hls-video/index.html @@ -0,0 +1,15 @@ + + + + + + Sandbox — HTML Video + + + + + +
+ + + diff --git a/packages/sandbox/templates/html-simple-hls-video/main.ts b/packages/sandbox/templates/html-simple-hls-video/main.ts new file mode 100644 index 000000000..9ecdc84ad --- /dev/null +++ b/packages/sandbox/templates/html-simple-hls-video/main.ts @@ -0,0 +1,41 @@ +import '@videojs/html/video/player'; +import '@videojs/html/media/simple-hls-video'; +import '@videojs/html/video/skin'; +import '@videojs/html/video/minimal-skin'; +import { CSS_SKIN_TAGS } from '../shared/html/skin-tags'; +import { loadVideoStylesheets } from '../shared/html/stylesheets'; +import { getInitialSkin, getInitialSource, onSkinChange, onSourceChange } from '../shared/sandbox-listener'; +import type { SourceId } from '../shared/sources'; +import { SOURCES } from '../shared/sources'; +import type { Skin } from '../types'; + +const html = String.raw; + +let currentSkin: Skin = getInitialSkin(); +let currentSource: SourceId = getInitialSource(); + +function render() { + const tag = CSS_SKIN_TAGS[currentSkin].video; + + loadVideoStylesheets(currentSkin); + + document.getElementById('root')!.innerHTML = html` + + <${tag} class="w-full aspect-video max-w-4xl mx-auto"> + + + + `; +} + +render(); + +onSkinChange((skin) => { + currentSkin = skin; + render(); +}); + +onSourceChange((source) => { + currentSource = source; + render(); +}); diff --git a/packages/sandbox/templates/react-simple-hls-video/index.html b/packages/sandbox/templates/react-simple-hls-video/index.html new file mode 100644 index 000000000..29ec7003a --- /dev/null +++ b/packages/sandbox/templates/react-simple-hls-video/index.html @@ -0,0 +1,15 @@ + + + + + + Sandbox — React Video + + + + + +
+ + + diff --git a/packages/sandbox/templates/react-simple-hls-video/main.tsx b/packages/sandbox/templates/react-simple-hls-video/main.tsx new file mode 100644 index 000000000..23a81b9fe --- /dev/null +++ b/packages/sandbox/templates/react-simple-hls-video/main.tsx @@ -0,0 +1,24 @@ +import '@videojs/react/video/skin.css'; +import '@videojs/react/video/minimal-skin.css'; +import { SimpleHlsVideo } from '@videojs/react/media/simple-hls-video'; +import { createRoot } from 'react-dom/client'; +import { VideoProvider } from '../shared/react/providers'; +import { VideoSkinComponent } from '../shared/react/skins'; +import { useSkin } from '../shared/react/use-skin'; +import { useSource } from '../shared/react/use-source'; +import { SOURCES } from '../shared/sources'; + +function App() { + const skin = useSkin(); + const source = useSource(); + + return ( + + + + + + ); +} + +createRoot(document.getElementById('root')!).render(); diff --git a/packages/sandbox/templates/shared/sources.ts b/packages/sandbox/templates/shared/sources.ts index 561055c10..0b740a9aa 100644 --- a/packages/sandbox/templates/shared/sources.ts +++ b/packages/sandbox/templates/shared/sources.ts @@ -1,25 +1,35 @@ -export type SourceId = 'hls-1' | 'hls-2' | 'hls-3' | 'hls-4' | 'mp4-1'; +export type SourceId = 'hls-1' | 'hls-2' | 'hls-3' | 'hls-4' | 'hls-5' | 'mp4-1'; -export const SOURCES: Record = { +export const SOURCES: Record = { 'hls-1': { label: 'HLS - Big Buck Bunny', url: 'https://stream.mux.com/VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA.m3u8', type: 'hls', + subType: 'ts', }, 'hls-2': { label: 'HLS - 2', url: 'https://stream.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008.m3u8', type: 'hls', + subType: 'ts', }, 'hls-3': { label: 'HLS - Dancing Dude', url: 'https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4.m3u8', type: 'hls', + subType: 'mp4', }, 'hls-4': { label: 'HLS - Plyr', url: 'https://stream.mux.com/lyrKpPcGfqyzeI00jZAfW6MvP6GNPrkML.m3u8', type: 'hls', + subType: 'mp4', + }, + 'hls-5': { + label: 'HLS - Mad Max Fury Road Trailer', + url: 'https://stream.mux.com/JX01bG8eB4uaoV3OpDuK602rBfvdSgrMObjwuUOBn4JrQ.m3u8', + type: 'hls', + subType: 'mp4', }, 'mp4-1': { label: 'MP4 - Dancing Dude', diff --git a/packages/sandbox/templates/shell/app.tsx b/packages/sandbox/templates/shell/app.tsx index b705fc8eb..72ca87530 100644 --- a/packages/sandbox/templates/shell/app.tsx +++ b/packages/sandbox/templates/shell/app.tsx @@ -91,6 +91,7 @@ export function App() { onSourceChange={handleSourceChange} availableSources={availableSources} isBackgroundVideo={preset === 'background-video'} + isSimpleHlsVideo={preset === 'simple-hls-video'} platforms={PLATFORMS} stylings={STYLINGS} presets={PRESETS} diff --git a/packages/sandbox/templates/shell/navbar.tsx b/packages/sandbox/templates/shell/navbar.tsx index 0c59e37e4..6e2692a94 100644 --- a/packages/sandbox/templates/shell/navbar.tsx +++ b/packages/sandbox/templates/shell/navbar.tsx @@ -15,10 +15,11 @@ type NavbarProps = { onSourceChange: (value: string) => void; availableSources: readonly SourceId[]; isBackgroundVideo: boolean; + isSimpleHlsVideo: boolean; platforms: readonly Platform[]; stylings: readonly Styling[]; presets: readonly Preset[]; - sources: Record; + sources: Record; }; const SKIN_OPTIONS: readonly Skin[] = ['default', 'minimal'] satisfies readonly (typeof SKINS)[number][]; @@ -31,6 +32,7 @@ const PLATFORM_LABELS: Record = { const PRESET_LABELS: Record = { video: 'Video', 'hls-video': 'HlsVideo', + 'simple-hls-video': 'SimpleHlsVideo', audio: 'Audio', 'background-video': 'Background Video', }; @@ -48,6 +50,7 @@ export function Navbar({ onSourceChange, availableSources, isBackgroundVideo, + isSimpleHlsVideo, platforms, stylings, presets, @@ -99,7 +102,13 @@ export function Navbar({ label="Source" value={source} onChange={onSourceChange} - options={availableSources.map((id) => ({ value: id, label: sources[id].label }))} + options={ + isSimpleHlsVideo + ? availableSources + .filter((id) => sources[id].subType === 'mp4') + .map((id) => ({ value: id, label: sources[id].label })) + : availableSources.map((id) => ({ value: id, label: sources[id].label })) + } disabled={isBackgroundVideo} />