zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-05 05:37:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(sandbox): fix app for mux, native hls (#1207)

Browse Source
This commit is contained in:
Wesley Luyten
2026-04-02 23:13:23 -05:00
committed by GitHub
parent 80c43d2c18
commit 5a3254fd81
3 changed files with 39 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sandbox/app/shared/sources.ts
+1
View File
@@ -59,6 +59,7 @@ export const SOURCES = {
export type SourceId = keyof typeof SOURCES;
export const SOURCE_IDS = Object.keys(SOURCES) as SourceId[];
export const NON_DASH_SOURCE_IDS = SOURCE_IDS.filter((id) => SOURCES[id].type !== 'dash');
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 MUX_SOURCE_IDS = SOURCE_IDS.filter((id) => !!SOURCES[id].playbackId);
apps/sandbox/app/shell/app.tsx
+9 -2
View File
@@ -7,7 +7,7 @@ import {
DEFAULT_SOURCE,
MP4_SOURCE_IDS,
MUX_SOURCE_IDS,
SOURCE_IDS,
NON_DASH_SOURCE_IDS,
SOURCES,
} from '@app/shared/sources';
import type { Platform, Preset, Styling } from '@app/types';
@@ -71,6 +71,13 @@ export function App() {
}
}, [preset, source, setSource]);
// Constrain source away from DASH for non-DASH presets
useEffect(() => {
if (preset !== 'dash-video' && SOURCES[source].type === 'dash') {
setSource(DEFAULT_SOURCE);
}
}, [preset, source, setSource]);
// Constrain source to Mux playbackId sources when switching to mux-video
useEffect(() => {
if (preset === 'mux-video' && !SOURCES[source].playbackId) {
@@ -92,7 +99,7 @@ export function App() {
? DASH_SOURCE_IDS
: preset === 'mux-video'
? MUX_SOURCE_IDS
: SOURCE_IDS;
: NON_DASH_SOURCE_IDS;
const handleSourceChange = useCallback((value: string) => setSource(value as SourceId), [setSource]);
apps/sandbox/templates/cdn/main.ts
+29 -5
View File
@@ -23,6 +23,8 @@ async function loadCdnPreset(preset: Preset, skin: Skin) {
switch (preset) {
case 'video':
case 'hls-video':
case 'mux-video':
case 'native-hls-video':
case 'simple-hls-video':
case 'dash-video':
if (skin === 'minimal') await import('@videojs/html/cdn/video-minimal');
@@ -43,6 +45,12 @@ async function loadCdnMedia(preset: Preset) {
case 'hls-video':
await import('@videojs/html/cdn/media/hls-video');
break;
case 'mux-video':
await import('@videojs/html/cdn/media/mux-video');
break;
case 'native-hls-video':
await import('@videojs/html/cdn/media/native-hls-video');
break;
case 'simple-hls-video':
await import('@videojs/html/cdn/media/simple-hls-video');
break;
@@ -71,6 +79,8 @@ function getSkinTag(preset: Preset, skin: Skin): string {
function getMediaTag(preset: Preset): string {
const tags: Partial<Record<Preset, string>> = {
'hls-video': 'hls-video',
'mux-video': 'mux-video',
'native-hls-video': 'native-hls-video',
'simple-hls-video': 'simple-hls-video',
'dash-video': 'dash-video',
audio: 'audio',
@@ -87,7 +97,14 @@ function loadStylesheets(preset: Preset, skin: Skin) {
}
function isVideoPreset(preset: Preset): boolean {
return preset === 'video' || preset === 'hls-video' || preset === 'simple-hls-video' || preset === 'dash-video';
return (
preset === 'video' ||
preset === 'hls-video' ||
preset === 'mux-video' ||
preset === 'native-hls-video' ||
preset === 'simple-hls-video' ||
preset === 'dash-video'
);
}
async function render() {
@@ -102,10 +119,17 @@ async function render() {
const playerTag = getPlayerTag(preset);
const skinTag = getSkinTag(preset, state.skin);
const mediaTag = getMediaTag(preset);
const src = preset === 'background-video' ? BACKGROUND_VIDEO_SRC : SOURCES[state.source].url;
const source = SOURCES[state.source];
const storyboard = isVideoPreset(preset) ? getStoryboardSrc(state.source) : undefined;
const poster = isVideoPreset(preset) ? getPosterSrc(state.source) : undefined;
const sourceAttr =
preset === 'background-video'
? `src="${BACKGROUND_VIDEO_SRC}"`
: preset === 'mux-video' && source.type !== 'mp4'
? `playback-id="${source.playbackId}"`
: `src="${source.url}"`;
// Background video needs viewport dimensions instead of flex centering.
if (preset === 'background-video') {
root.className = '';
@@ -116,7 +140,7 @@ async function render() {
root.innerHTML = html`
<${playerTag}>
<${skinTag}>
<${mediaTag} src="${src}"></${mediaTag}>
<${mediaTag} ${sourceAttr}></${mediaTag}>
</${skinTag}>
</${playerTag}>
`;
@@ -128,7 +152,7 @@ async function render() {
<div class="w-full max-w-xl mx-auto">
<${playerTag}>
<${skinTag}>
<${mediaTag} src="${src}"></${mediaTag}>
<${mediaTag} ${sourceAttr}></${mediaTag}>
</${skinTag}>
</${playerTag}>
</div>
@@ -139,7 +163,7 @@ async function render() {
root.innerHTML = html`
<${playerTag}>
<${skinTag} class="aspect-video max-w-4xl mx-auto">
<${mediaTag} src="${src}" playsinline crossorigin="anonymous">
<${mediaTag} ${sourceAttr} playsinline crossorigin="anonymous">
${renderStoryboard(storyboard)}
</${mediaTag}>
${poster ? html`<img slot="poster" src="${poster}" alt="Video poster" />` : ''}