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

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]);
+}