27:T7ade,
/** 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 file from your disk: no frames prepared, no rate known. The decoder times its
 *  frames, then seeks to each instant. */
function YourFile() {
  const [file, setFile] = React.useState<{
    src: string
    duration: number
  } | null>(null)
  React.useEffect(
    () => () => {
      if (file) URL.revokeObjectURL(file.src)
    },
    [file],
  )
  const decoded = useSeekStills(file?.src ?? null, { width: 360 })
  const stills = useStills([decoded.source])
  const source = decoded.source
  const ats = React.useMemo(
    () =>
      source && file
        ? [0, 1, 2, 3, 4, 5].map((k) => source.place((file.duration * k) / 6))
        : [],
    [source, file],
  )
  return (
    <div className="flex flex-col gap-3">
      <label className="flex flex-wrap items-center gap-2 text-[13px]">
        <span>a video file</span>
        <input
          type="file"
          accept="video/*"
          className="text-[12px]"
          onChange={(e) => {
            const picked = e.currentTarget.files?.[0]
            if (!picked) return
            const src = URL.createObjectURL(picked)
            // Its length, read off its metadata before anything is decoded.
            const probe = document.createElement("video")
            probe.preload = "metadata"
            probe.src = src
            probe.onloadedmetadata = () =>
              setFile({ src, duration: probe.duration * 1000 })
          }}
        />
      </label>
      <p className="m-0 font-mono text-[11px] text-foreground/60">
        {!file
          ? "nothing picked"
          : decoded.failed
            ? decoded.failed
            : source
              ? `${(1000 / source.grain).toFixed(3)} fps, measured: a still a frame`
              : "timing its frames…"}
      </p>
      {source && <Row stills={stills} ats={ats} />}
    </div>
  )
}

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