24:I[307436,["/_next/static/immutable/chunks/1gchium7nww9r.js","/_next/static/immutable/chunks/2d7gr10yud7ll.js","/_next/static/immutable/chunks/2kyb8oum4hifz.js","/_next/static/immutable/chunks/17bc5e9cm9a-q.js","/_next/static/immutable/chunks/42sqmxmk3cnps.js","/_next/static/immutable/chunks/2-g5j69xga-j-.js","/_next/static/immutable/chunks/1vqnea-qk-oh0.js","/_next/static/immutable/chunks/0457ji1bpobon.js","/_next/static/immutable/chunks/2kc7ecqs15k_7.js","/_next/static/immutable/chunks/0a937jsg96ehe.js","/_next/static/immutable/chunks/1x71wnz52c5-i.js","/_next/static/immutable/chunks/3bmj1ccyv_bzu.js","/_next/static/immutable/chunks/3zyborr59s_3k.js","/_next/static/immutable/chunks/2iprwyxekay_3.js"],"Copy"] 25:Tbbd,// 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`, }, }, ] /** 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) => ( {film.captions && } ) } 26:T761f,

// 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`,
    },
  },
]

/** 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>
  )
}

<FilmWall {...MOON} player={playerFor(MOON)} />

20:["$","div","captions",{"data-slot":"code","data-material":"plain","data-compact":"$undefined","className":"ag-code","children":[["$","div",null,{"className":"ag-code-bar","children":[["$","span",null,{"className":"ag-code-name","children":"tsx"}],["$","$L24",null,{"value":"$25","label":true}]]}],["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$26"}}],false]}]