From e417ec3419faa4278a47752ed7a86fe5d4fdc95f Mon Sep 17 00:00:00 2001 From: Christian Pillsbury Date: Mon, 9 Mar 2026 19:04:06 -0700 Subject: [PATCH] =?UTF-8?q?chore(sandbox):=20add=20hls-video=20to=20new=20?= =?UTF-8?q?sandbox=20setup=20(NOTE:=20hls-video=20H=E2=80=A6=20(#798)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/sandbox/templates/constants.ts | 2 +- .../templates/html-hls-video/index.html | 15 +++++++ .../sandbox/templates/html-hls-video/main.ts | 41 +++++++++++++++++++ .../templates/react-hls-video/index.html | 15 +++++++ .../templates/react-hls-video/main.tsx | 24 +++++++++++ packages/sandbox/templates/shell/navbar.tsx | 1 + packages/sandbox/vite.config.ts | 2 + 7 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 packages/sandbox/templates/html-hls-video/index.html create mode 100644 packages/sandbox/templates/html-hls-video/main.ts create mode 100644 packages/sandbox/templates/react-hls-video/index.html create mode 100644 packages/sandbox/templates/react-hls-video/main.tsx diff --git a/packages/sandbox/templates/constants.ts b/packages/sandbox/templates/constants.ts index e806428f..2be89747 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', 'audio', 'background-video'] as const; +export const PRESETS = ['video', 'hls-video', 'audio', 'background-video'] as const; diff --git a/packages/sandbox/templates/html-hls-video/index.html b/packages/sandbox/templates/html-hls-video/index.html new file mode 100644 index 00000000..70e9ffcf --- /dev/null +++ b/packages/sandbox/templates/html-hls-video/index.html @@ -0,0 +1,15 @@ + + + + + + Sandbox — HTML Video + + + + + +
+ + + diff --git a/packages/sandbox/templates/html-hls-video/main.ts b/packages/sandbox/templates/html-hls-video/main.ts new file mode 100644 index 00000000..37dd7683 --- /dev/null +++ b/packages/sandbox/templates/html-hls-video/main.ts @@ -0,0 +1,41 @@ +import '@videojs/html/video/player'; +import '@videojs/html/media/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-hls-video/index.html b/packages/sandbox/templates/react-hls-video/index.html new file mode 100644 index 00000000..29ec7003 --- /dev/null +++ b/packages/sandbox/templates/react-hls-video/index.html @@ -0,0 +1,15 @@ + + + + + + Sandbox — React Video + + + + + +
+ + + diff --git a/packages/sandbox/templates/react-hls-video/main.tsx b/packages/sandbox/templates/react-hls-video/main.tsx new file mode 100644 index 00000000..dadccb8c --- /dev/null +++ b/packages/sandbox/templates/react-hls-video/main.tsx @@ -0,0 +1,24 @@ +import '@videojs/react/video/skin.css'; +import '@videojs/react/video/minimal-skin.css'; +import { HlsVideo } from '@videojs/react/media/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/shell/navbar.tsx b/packages/sandbox/templates/shell/navbar.tsx index bb5ccc7e..0c59e37e 100644 --- a/packages/sandbox/templates/shell/navbar.tsx +++ b/packages/sandbox/templates/shell/navbar.tsx @@ -30,6 +30,7 @@ const PLATFORM_LABELS: Record = { const PRESET_LABELS: Record = { video: 'Video', + 'hls-video': 'HlsVideo', audio: 'Audio', 'background-video': 'Background Video', }; diff --git a/packages/sandbox/vite.config.ts b/packages/sandbox/vite.config.ts index c395eb0d..d20b8449 100644 --- a/packages/sandbox/vite.config.ts +++ b/packages/sandbox/vite.config.ts @@ -27,11 +27,13 @@ export default defineConfig({ input: { main: resolve(__dirname, 'src/index.html'), 'html-video': resolve(__dirname, 'src/html-video/index.html'), + 'html-hls-video': resolve(__dirname, 'src/html-hls-video/index.html'), 'html-audio': resolve(__dirname, 'src/html-audio/index.html'), 'html-video-tailwind': resolve(__dirname, 'src/html-video-tailwind/index.html'), 'html-audio-tailwind': resolve(__dirname, 'src/html-audio-tailwind/index.html'), 'html-background-video': resolve(__dirname, 'src/html-background-video/index.html'), 'react-video': resolve(__dirname, 'src/react-video/index.html'), + 'react-hls-video': resolve(__dirname, 'src/react-hls-video/index.html'), 'react-audio': resolve(__dirname, 'src/react-audio/index.html'), 'react-video-tailwind': resolve(__dirname, 'src/react-video-tailwind/index.html'), 'react-audio-tailwind': resolve(__dirname, 'src/react-audio-tailwind/index.html'),