Media Resolution

Lessons may reference media files (images, videos, voiceovers) by ID. You provide resolver hooks that map these IDs to actual URLs.


import { TeachariumPlayer } from "@teacharium/player";
import { getWidgets } from "@teacharium/widget";
 
// Map media IDs to static file paths
const mediaFiles: Record<string, string> = {
  "media:abc123": "/lessons/my-lesson/images/intro.png",
  "media:def456": "/lessons/my-lesson/images/diagram.jpg",
};
 
// Hook that resolves media IDs to URLs
function useMediaUrl(mediaId: string | undefined) {
  if (!mediaId) {
    return { data: null, isLoading: false, error: null };
  }
  return { data: mediaFiles[mediaId] ?? null, isLoading: false, error: null };
}
 
// Hook that resolves voiceover content to audio URLs
function useVoiceoverUrl(
  contentHash: string | undefined,
  voice: string | undefined,
) {
  if (!contentHash || !voice) {
    return { data: null, isLoading: false, error: null };
  }
  return {
    data: `/lessons/my-lesson/audio/${contentHash}.mp3`,
    isLoading: false,
    error: null,
  };
}
 
function LessonPage() {
  return (
    <TeachariumPlayer
      lesson={lessonData}
      widgets={getWidgets()}
      mediaResolvers={{
        useMediaUrl,
        useVoiceoverUrl,
      }}
    />
  );
}

Resolver Hook Interface

The resolver hooks must return this shape:


interface MediaUrlResult {
  data: string | null | undefined;
  isLoading?: boolean;
  error?: Error | null;
}