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}
/>