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:T973,// Walter Cronkite questions Buzz Aldrin, 5 July 1969 (NASA, public domain): 109 s at // 29.97 fps, its stills prepared at every second (lib/prepare-media's `frames`). const INTERVIEW = { src: "/apollo-11/cronkite-aldrin.mp4", duration: 109_009, aspect: 626 / 476, fps: 30000 / 1001, frames: { every: 1, count: 109, src: "/gallery-stills/cronkite-aldrin/{i}.jpg", }, } /** Made once: a new source each render would be a new cache each render. */ const SECONDS = frameStills(INTERVIEW.frames) /** Stills of `stills` at `ats`, in a row, each with its instant and what it shows. */ function Row({ stills, ats }: { stills: Stills | null; ats: number[] }) { React.useEffect(() => stills?.want(ats), [stills, ats]) return (

{ats.map((at) => (

{stills && }

{startLabel(at, 100)} {stills && }

))}

) } /** What a still shows now: its own, a stand-in, nothing yet, or never. */ function Status({ stills, at }: { stills: Stills; at: number }) { const status = React.useSyncExternalStore( stills.subscribe, () => stills.status(at), () => stills.status(at), ) return {status} } /** A stand-in for a server's still tier, making a frame on request: slowly, and * refusing the ones past the minute. The prepared second stands in for those, marked * failed, and they are never asked again. */ const TIER: StillSource = { grain: 1000 / INTERVIEW.fps, place: (at) => frameTime(frameAt(Math.max(0, at), INTERVIEW.fps), INTERVIEW.fps), parallel: 2, still: (at) => new Promise((made, refused) => setTimeout( () => at > 60_000 ? refused(new Error(`no frame at ${at} ms`)) : made( `/gallery-stills/cronkite-aldrin/${Math.floor(at / 1000)}.jpg`, ), 600, ), ), } 26:T59dd,

// Walter Cronkite questions Buzz Aldrin, 5 July 1969 (NASA, public domain): 109 s at
// 29.97 fps, its stills prepared at every second (lib/prepare-media's `frames`).
const INTERVIEW = {
  src: "/apollo-11/cronkite-aldrin.mp4",
  duration: 109_009,
  aspect: 626 / 476,
  fps: 30000 / 1001,
  frames: {
    every: 1,
    count: 109,
    src: "/gallery-stills/cronkite-aldrin/{i}.jpg",
  },
}
/** Made once: a new source each render would be a new cache each render. */
const SECONDS = frameStills(INTERVIEW.frames)

/** Stills of `stills` at `ats`, in a row, each with its instant and what it shows. */
function Row({ stills, ats }: { stills: Stills<Still> | null; ats: number[] }) {
  React.useEffect(() => stills?.want(ats), [stills, ats])
  return (
    <div className="grid grid-cols-3 gap-2 sm:grid-cols-6">
      {ats.map((at) => (
        <figure key={at} className="m-0 flex flex-col gap-1">
          <span className="relative block aspect-[626/476] overflow-hidden rounded-md bg-foreground/[0.07]">
            {stills && <StillPicture stills={stills} at={at} />}
          </span>
          <figcaption className="flex justify-between font-mono text-[11px] text-foreground/60 tabular-nums">
            <span>{startLabel(at, 100)}</span>
            {stills && <Status stills={stills} at={at} />}
          </figcaption>
        </figure>
      ))}
    </div>
  )
}

/** What a still shows now: its own, a stand-in, nothing yet, or never. */
function Status({ stills, at }: { stills: Stills<Still>; at: number }) {
  const status = React.useSyncExternalStore(
    stills.subscribe,
    () => stills.status(at),
    () => stills.status(at),
  )
  return <span data-status={status}>{status}</span>
}

/** A stand-in for a server's still tier, making a frame on request: slowly, and
 *  refusing the ones past the minute. The prepared second stands in for those, marked
 *  failed, and they are never asked again. */
const TIER: StillSource<string> = {
  grain: 1000 / INTERVIEW.fps,
  place: (at) =>
    frameTime(frameAt(Math.max(0, at), INTERVIEW.fps), INTERVIEW.fps),
  parallel: 2,
  still: (at) =>
    new Promise((made, refused) =>
      setTimeout(
        () =>
          at > 60_000
            ? refused(new Error(`no frame at ${at} ms`))
            : made(
                `/gallery-stills/cronkite-aldrin/${Math.floor(at / 1000)}.jpg`,
              ),
        600,
      ),
    ),
}

<Refused />

20:["$","div","refused",{"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]}]