zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-14 09:59:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(sandbox): adding spf/simple-hls-video + filtering to only include CMAF/fmp4 sources (#802)

Browse Source
This commit is contained in:
Christian Pillsbury
2026-03-09 20:19:42 -07:00
committed by GitHub
parent f6c1b51f13
commit afe149f8de
8 changed files with 120 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/sandbox/templates/constants.ts
+1 -1
View File
@@ -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;
packages/sandbox/templates/html-simple-hls-video/index.html
+15
View File
@@ -0,0 +1,15 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sandbox — HTML Video</title>
<link rel="preconnect" href="https://rsms.me/" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<link rel="stylesheet" href="../styles.css" />
</head>
<body class="font-sans">
<div id="root" class="flex justify-center items-center min-h-screen"></div>
<script type="module" src="./main.ts"></script>
</body>
</html>
packages/sandbox/templates/html-simple-hls-video/main.ts
+41
View File
@@ -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`
<video-player class="contents">
<${tag} class="w-full aspect-video max-w-4xl mx-auto">
<simple-hls-video slot="media" src="${SOURCES[currentSource].url}"></simple-hls-video>
</${tag}>
</video-player>
`;
}
render();
onSkinChange((skin) => {
currentSkin = skin;
render();
});
onSourceChange((source) => {
currentSource = source;
render();
});
packages/sandbox/templates/react-simple-hls-video/index.html
+15
View File
@@ -0,0 +1,15 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sandbox — React Video</title>
<link rel="preconnect" href="https://rsms.me/" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<link rel="stylesheet" href="../styles.css" />
</head>
<body class="font-sans">
<div id="root" class="flex justify-center items-center min-h-screen"></div>
<script type="module" src="./main.tsx"></script>
</body>
</html>
packages/sandbox/templates/react-simple-hls-video/main.tsx
+24
View File
@@ -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 (
<VideoProvider>
<VideoSkinComponent skin={skin} styling="css" className="w-full aspect-video max-w-4xl mx-auto">
<SimpleHlsVideo src={SOURCES[source].url} />
</VideoSkinComponent>
</VideoProvider>
);
}
createRoot(document.getElementById('root')!).render(<App />);
packages/sandbox/templates/shared/sources.ts
+12 -2
View File
@@ -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<SourceId, { label: string; url: string; type: 'hls' | 'mp4' }> = {
export const SOURCES: Record<SourceId, { label: string; url: string; type: 'hls' | 'mp4'; subType?: 'mp4' | 'ts' }> = {
'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',
packages/sandbox/templates/shell/app.tsx
+1
View File
@@ -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}
packages/sandbox/templates/shell/navbar.tsx
+11 -2
View File
@@ -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<SourceId, { label: string; url: string; type: string }>;
sources: Record<SourceId, { label: string; url: string; type: string; subType?: string }>;
};
const SKIN_OPTIONS: readonly Skin[] = ['default', 'minimal'] satisfies readonly (typeof SKINS)[number][];
@@ -31,6 +32,7 @@ const PLATFORM_LABELS: Record<Platform, string> = {
const PRESET_LABELS: Record<Preset, string> = {
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}
/>
</div>