feat(packages): add poster component to video skins (#994)

packages/sandbox/app/shared/html/mux-storyboard.ts

@@ -1,9 +0,0 @@
-import { getMuxAssetId } from '../mux';
-import type { SourceId } from '../sources';
-
-export function renderMuxStoryboard(source: SourceId): string {
-  const id = getMuxAssetId(source);
-  return id
-    ? `<track kind="metadata" label="thumbnails" src="https://image.mux.com/${id}/storyboard.vtt" default />`
-    : '';
-}

packages/sandbox/app/shared/html/storyboard.ts

@@ -0,0 +1,3 @@
+export function renderStoryboard(src?: string | undefined): string {
+  return src ? `<track kind="metadata" label="thumbnails" src="${src}" default />` : '';
+}

packages/sandbox/app/shared/mux.ts

@@ -3,8 +3,3 @@ import { SOURCES, type SourceId } from './sources';
 export function getMuxAssetId(source: SourceId): string | undefined {
   return SOURCES[source].url.match(/stream\.mux\.com\/([a-zA-Z0-9]+)/)?.[1];
 }
-
-export function getMuxPosterSrc(source: SourceId): string | undefined {
-  const id = getMuxAssetId(source);
-  return id ? `https://image.mux.com/${id}/thumbnail.jpg` : undefined;
-}

packages/sandbox/app/shared/react/mux-poster.tsx

@@ -1,14 +0,0 @@
-import { Poster } from '@videojs/react';
-
-import { getMuxPosterSrc } from '../mux';
-import type { SourceId } from '../sources';
-
-type MuxPosterProps = {
-  source: SourceId;
-};
-
-export function MuxPoster({ source }: MuxPosterProps) {
-  const src = getMuxPosterSrc(source);
-  if (!src) return null;
-  return <Poster src={src} />;
-}

packages/sandbox/app/shared/react/mux-storyboard.tsx

@@ -1,12 +0,0 @@
-import { getMuxAssetId } from '../mux';
-import type { SourceId } from '../sources';
-
-type MuxStoryboardProps = {
-  source: SourceId;
-};
-
-export function MuxStoryboard({ source }: MuxStoryboardProps) {
-  const id = getMuxAssetId(source);
-  if (!id) return null;
-  return <track kind="metadata" label="thumbnails" src={`https://image.mux.com/${id}/storyboard.vtt`} default />;
-}

packages/sandbox/app/shared/react/storyboard.tsx

@@ -0,0 +1,8 @@
+type StoryboardProps = {
+  src?: string | undefined;
+};
+
+export function Storyboard({ src }: StoryboardProps) {
+  if (!src) return null;
+  return <track kind="metadata" label="thumbnails" src={src} default />;
+}

packages/sandbox/app/shared/react/use-poster.ts

@@ -0,0 +1,8 @@
+import { useMemo } from 'react';
+import { getPosterSrc } from '../sources';
+import { useSource } from './use-source';
+
+export function usePoster() {
+  const source = useSource();
+  return useMemo(() => getPosterSrc(source), [source]);
+}

packages/sandbox/app/shared/react/use-storyboard.ts

@@ -0,0 +1,8 @@
+import { useMemo } from 'react';
+import { getStoryboardSrc } from '../sources';
+import { useSource } from './use-source';
+
+export function useStoryboard() {
+  const source = useSource();
+  return useMemo(() => getStoryboardSrc(source), [source]);
+}

packages/sandbox/app/shared/sources.ts

@@ -1,3 +1,5 @@
+import { getMuxAssetId } from './mux';
+
 export const SOURCES = {
   'hls-1': {
     label: 'HLS - Big Buck Bunny',
@@ -6,7 +8,7 @@ export const SOURCES = {
     subType: 'ts',
   },
   'hls-2': {
-    label: 'HLS - 2',
+    label: 'HLS - Elephants Dream',
     url: 'https://stream.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008.m3u8',
     type: 'hls',
     subType: 'ts',
@@ -56,3 +58,13 @@ 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';
+
+export function getPosterSrc(source: SourceId): string | undefined {
+  const id = getMuxAssetId(source);
+  return id ? `https://image.mux.com/${id}/thumbnail.jpg` : undefined;
+}
+
+export function getStoryboardSrc(source: SourceId): string | undefined {
+  const id = getMuxAssetId(source);
+  return id ? `https://image.mux.com/${id}/storyboard.vtt` : undefined;
+}