27:T88e0,
// Each film's facts as its prepared media asset states them (lib/media-asset): its
// length, its frame's size, and the stills cut along it, one a second.
interface Film {
  label: string
  src: string
  duration: number
  width: number
  height: number
  captions?: readonly Captions[]
  frames?: { every: number; count: number; src: string }
}

const INTERVIEW: Film = {
  label: "Cronkite questions Aldrin, July 1969",
  src: "/apollo-11/cronkite-aldrin.mp4",
  duration: 109_009,
  width: 626,
  height: 476,
  frames: {
    every: 1,
    count: 109,
    src: "/gallery-stills/cronkite-aldrin/{i}.jpg",
  },
}
const KEYNOTE: Film = {
  label: "Steve Jobs introduces the iPhone, 2007",
  src: "/jobs/iphone.mp4",
  duration: 118_500,
  width: 640,
  height: 352,
}
const PORTRAIT: Film = {
  label: "Stay hungry, stay foolish (portrait cut)",
  src: "/jobs/hungry-portrait.mp4",
  duration: 40_006,
  width: 360,
  height: 640,
}
const MOON: Film = {
  label: "We choose to go to the Moon",
  src: "/kennedy/moon.mp4",
  duration: 50_050,
  width: 640,
  height: 480,
  captions: [
    {
      src: "/kennedy/moon.en.vtt",
      lang: "en",
      label: "English",
      default: true,
    },
    { src: "/kennedy/moon.es.vtt", lang: "es", label: "español" },
  ],
}
const CDN = "https://cdn.untitled.garden/media/ui/gallery"
/** From the gallery's corpus (Wikimedia Commons), on its CDN. */
const SHELF: Film[] = [
  {
    label: "one small step",
    src: `${CDN}/461a38825c3d7b1172c6d6b2.mp4`,
    duration: 56_112,
    width: 16,
    height: 9,
    frames: {
      every: 1,
      count: 56,
      src: `${CDN}/461a38825c3d7b1172c6d6b2.frame-{i}.jpg`,
    },
  },
  {
    label: "Le Déjeuner des Minet (1906)",
    src: `${CDN}/e141b3900933b1fd907b5d25.mp4`,
    duration: 20_003,
    width: 16,
    height: 9,
    frames: {
      every: 1,
      count: 20,
      src: `${CDN}/e141b3900933b1fd907b5d25.frame-{i}.jpg`,
    },
  },
  {
    label: "a braided river in Tibet",
    src: `${CDN}/ebfc8d8f94158250db14b476.mp4`,
    duration: 20_000,
    width: 16,
    height: 9,
    frames: {
      every: 1,
      count: 20,
      src: `${CDN}/ebfc8d8f94158250db14b476.frame-{i}.jpg`,
    },
  },
]

/** Each film's stills source, made once (a new one each render is a new cache). */
const SECONDS = new Map(
  [INTERVIEW, ...SHELF].map((f) => [
    f.src,
    frameStills(f.frames as NonNullable<Film["frames"]>),
  ]),
)
const stillsOf = (src: string) => {
  const source = SECONDS.get(src)
  if (!source) throw new Error(`no stills for ${src}`)
  return source
}

/** One film a row, as a strip: a pass over many without leaving the list. */
function Shelf() {
  return (
    <div className="flex w-full flex-col gap-4">
      {SHELF.map((film) => (
        <ShelfRow key={film.src} film={film} />
      ))}
    </div>
  )
}

function ShelfRow({ film }: { film: Film }) {
  const stills = useStills([stillsOf(film.src)])
  return (
    <div className="flex flex-col gap-1.5">
      <span className="font-medium text-[13px]">{film.label}</span>
      <FilmMosaic
        tile={120}
        label={film.label}
        duration={film.duration}
        aspect={film.width / film.height}
        src={film.src}
        stills={stills}
      />
    </div>
  )
}

<Shelf />
26:["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$27"}}]