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

/** Under its player: a press hands the span to it, the tile it is playing is lit. */
function WithPlayer() {
  const stills = useStills([stillsOf(INTERVIEW.src)])
  return (
    <VideoPlayback
      src={INTERVIEW.src}
      label={INTERVIEW.label}
      poster="/apollo-11/cronkite-aldrin.jpg"
    >
      <div className="flex w-full flex-col gap-2">
        <VideoPicture aspect="626 / 476" className="rounded-xl">
          <PlayerChrome>
            <PlayerTransport only={["play"]} />
            <PlayerFoot>
              <PlayerBar label={INTERVIEW.label} />
            </PlayerFoot>
          </PlayerChrome>
        </VideoPicture>
        <FilmMosaic
          label={INTERVIEW.label}
          duration={INTERVIEW.duration}
          aspect={INTERVIEW.width / INTERVIEW.height}
          src={INTERVIEW.src}
          stills={stills}
          tile={110}
        />
      </div>
    </VideoPlayback>
  )
}

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