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

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

Browse Source
This commit is contained in:
Christian Pillsbury
2026-03-16 12:21:19 -07:00
committed by GitHub
parent 7a5ce94bca
commit 5bdbbec8a0
16 changed files with 468 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/sandbox/app/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', '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
+12
View File
@@ -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
+19 -4
View File
@@ -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
+4 -1
View File
@@ -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),
}))}
/>
packages/sandbox/templates/html-dash-video/index.html
+14
View File
@@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sandbox — HTML DASH Video</title>
<link rel="preconnect" href="https://rsms.me/" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.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-dash-video/main.ts
+42
View File
@@ -0,0 +1,42 @@
import '@app/styles.css';
import '@videojs/html/video/player';
import '@videojs/html/media/dash-video';
import '@videojs/html/video/skin';
import '@videojs/html/video/minimal-skin';
import { CSS_SKIN_TAGS } from '@app/shared/html/skin-tags';
import { loadVideoStylesheets } from '@app/shared/html/stylesheets';
import { getInitialSkin, getInitialSource, onSkinChange, onSourceChange } from '@app/shared/sandbox-listener';
import type { SourceId } from '@app/shared/sources';
import { SOURCES } from '@app/shared/sources';
import type { Skin } from '@app/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>
<${tag} class="w-full aspect-video max-w-4xl mx-auto">
<dash-video slot="media" src="${SOURCES[currentSource].url}" playsinline></dash-video>
</${tag}>
</video-player>
`;
}
render();
onSkinChange((skin) => {
currentSkin = skin;
render();
});
onSourceChange((source) => {
currentSource = source;
render();
});
packages/sandbox/templates/react-dash-video/index.html
+14
View File
@@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sandbox — React DASH Video</title>
<link rel="preconnect" href="https://rsms.me/" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.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-dash-video/main.tsx
+25
View File
@@ -0,0 +1,25 @@
import '@app/styles.css';
import '@videojs/react/video/skin.css';
import '@videojs/react/video/minimal-skin.css';
import { VideoProvider } from '@app/shared/react/providers';
import { VideoSkinComponent } from '@app/shared/react/skins';
import { useSkin } from '@app/shared/react/use-skin';
import { useSource } from '@app/shared/react/use-source';
import { SOURCES } from '@app/shared/sources';
import { DashVideo } from '@videojs/react/media/dash-video';
import { createRoot } from 'react-dom/client';
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">
<DashVideo src={SOURCES[source].url} playsInline />
</VideoSkinComponent>
</VideoProvider>
);
}
createRoot(document.getElementById('root')!).render(<App />);