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

/** The registry's player, in the mosaic's box, started where the pressed tile was; the
 *  mosaic's toggle in its bar comes back. */
function playerFor(film: Film) {
  return (start: number) => (
    <VideoPlayback
      src={film.src}
      label={film.label}
      width={film.width}
      height={film.height}
      captions={film.captions}
      start={start}
      autoPlay
    >
      <VideoPicture>
        <PlayerChrome>
          <PlayerTransport />
          <PlayerFoot>
            <PlayerBar label={film.label} playButton={false}>
              {film.captions && <PlayerCaptions />}
              <FilmWallToggle />
            </PlayerBar>
          </PlayerFoot>
        </PlayerChrome>
      </VideoPicture>
    </VideoPlayback>
  )
}

/** The film as a mosaic: every tile playing, the switch for that at the end of its
 *  bar. */
function Mosaic() {
  const stills = useStills([stillsOf(INTERVIEW.src)])
  return (
    <FilmWall {...INTERVIEW} stills={stills} player={playerFor(INTERVIEW)}>
      <FilmWallMotion />
    </FilmWall>
  )
}

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