27:T8a73,
// 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
}

/** No player around: the page hears the span. */
function Chosen() {
  const stills = useStills([stillsOf(INTERVIEW.src)])
  const [span, setSpan] = React.useState<Span | null>(null)
  return (
    <div className="flex w-full flex-col gap-2">
      <FilmMosaic
        label={INTERVIEW.label}
        duration={INTERVIEW.duration}
        aspect={INTERVIEW.width / INTERVIEW.height}
        view={{ from: 30_000, to: 60_000 }}
        src={INTERVIEW.src}
        stills={stills}
        tile={100}
        onPlay={setSpan}
      />
      <span className="font-mono text-[11px] text-foreground/60">
        {span
          ? `chosen: ${spanWords(span)}`
          : "half a minute of it, 0:30 to 1:00"}
      </span>
    </div>
  )
}

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