27:Te4be,
/** What it plays: a film with no words, or a speech captioned in two languages (a
 *  WebVTT file each, English shown to whoever never chose). */
const PLAYED = {
  bunny: {
    src: "/bunny.mp4",
    poster: "/video-poster.jpg",
    width: 1280,
    height: 720,
    fps: 25,
    label: "Big Buck Bunny",
  },
  moon: {
    src: "/kennedy/moon.mp4",
    poster: "/kennedy/moon.jpg",
    width: 640,
    height: 480,
    label: "We choose to go to the Moon",
    captions: [
      {
        src: "/kennedy/moon.en.vtt",
        lang: "en",
        label: "English",
        default: true,
      },
      { src: "/kennedy/moon.es.vtt", lang: "es", label: "español" },
    ],
  },
}

/** The player, every choice it offers one row above it: what it plays, what it is
 *  made of, where its controls sit, the transport, what a swipe does, how the time
 *  first reads, and whether it starts by itself. */
function ThePlayer() {
  const [film, setFilm] = React.useState<keyof typeof PLAYED>("bunny")
  const [material, setMaterial] = React.useState<"plain" | "glass">("plain")
  const [controls, setControls] = React.useState<"over" | "under">("over")
  const [transport, setTransport] = React.useState<"on" | "off">("on")
  const [gestures, setGestures] = React.useState<"off" | "scrub" | "all">(
    "scrub",
  )
  const [starts, setStarts] = React.useState<"manual" | "visible">("manual")
  const [zoom, setZoom] = React.useState<
    "off" | "finder over" | "finder beside"
  >("finder over")
  // Glass and the transport belong over the picture: under it, on the page, there is
  // nothing behind the glass and no middle to hold a transport.
  const over = controls === "over"
  const face = over ? material : "plain"
  const played = PLAYED[film]
  // Its parts take the material of the chrome they sit in (over), else the page's.
  const bar = (
    <PlayerBar
      label={played.label}
      chapters="hover"
      playButton={!(over && transport === "on")}
    >
      <PlayerCaptions />
      <PlayerSpeed />
      <PlayerSound />
      <PlayerFullscreen />
    </PlayerBar>
  )
  return (
    <div className="space-y-5">
      <div className="flex flex-wrap gap-x-5 gap-y-2">
        <Choice
          label="film"
          value={film}
          onChange={setFilm}
          options={[
            { value: "bunny", label: "bunny", hint: "a film with no words" },
            {
              value: "moon",
              label: "kennedy",
              hint: "a speech captioned in English and Spanish: the captions button picks one or none, C turns them on and off, and the choice is kept for the next video",
            },
          ]}
        />
        <Choice
          label="material"
          value={over ? material : "plain"}
          onChange={setMaterial}
          options={[
            {
              value: "plain",
              label: "plain",
              hint: "plain controls on a scrim",
            },
            {
              value: "glass",
              label: "glass",
              hint: "glass controls; only over the picture, where there is something behind the glass",
              disabled: !over,
            },
          ]}
        />
        <Choice
          label="controls"
          value={controls}
          onChange={setControls}
          options={[
            {
              value: "over",
              label: "over",
              hint: "over the picture, shown on hover and while paused",
            },
            {
              value: "under",
              label: "under",
              hint: "under the picture, always there",
            },
          ]}
        />
        <Choice
          label="centre"
          value={over ? transport : "off"}
          onChange={setTransport}
          options={[
            {
              value: "on",
              label: "buttons",
              hint: "back 10 s, play, forward 10 s in the middle of the picture (and the chapters, when there are some)",
              disabled: !over,
            },
            { value: "off", label: "none" },
          ]}
        />
        <Choice
          label="gestures"
          value={gestures}
          onChange={setGestures}
          options={[
            { value: "off", label: "off" },
            {
              value: "scrub",
              label: "sideways",
              hint: "swipe sideways to scrub, pinch for fullscreen",
            },
            {
              value: "all",
              label: "all",
              hint: "sideways too, and up and down: volume on the left half, speed on the right",
            },
          ]}
        />
        <Choice
          label="starts"
          value={starts}
          onChange={setStarts}
          options={[
            { value: "manual", label: "press", hint: "the person starts it" },
            {
              value: "visible",
              label: "auto",
              hint: "plays by itself while on screen, muted until someone turns the sound on",
            },
          ]}
        />
        <Choice
          label="zoom"
          value={zoom}
          onChange={setZoom}
          options={[
            { value: "off", label: "off" },
            {
              value: "finder over",
              label: "finder over",
              hint: "pinch or ctrl-scroll at a point, + and - step; while zoomed, drag or scroll to look around. The finder shows where, over the corner",
            },
            {
              value: "finder beside",
              label: "finder beside",
              hint: "the same zoom, its finder on the page under the player, always there",
            },
          ]}
        />
        <span className="flex items-center gap-1 self-start font-mono text-[11px] text-muted-foreground">
          keys
          <TooltipHint
            card
            label="the player's keys"
            content={
              <PlayerKeysCard
                zoom={zoom !== "off"}
                captions={"captions" in played}
              />
            }
          />
        </span>
      </div>
      <VideoPlayback
        key={`${film}-${starts}-${zoom !== "off"}`}
        {...played}
        play={starts}
        loop
        zoom={zoom !== "off"}
      >
        {/* Controls over it: the picture alone goes fullscreen, its bar inside it. */}
        <VideoPicture fullscreen={over}>
          {gestures !== "off" && (
            <PlayerGestures vertical={gestures === "all"} />
          )}
          {zoom === "finder over" && <PlayerZoomFinder material={face} />}
          {controls === "over" && (
            <PlayerChrome material={face}>
              {transport === "on" && <PlayerTransport />}
              <PlayerFoot>{bar}</PlayerFoot>
            </PlayerChrome>
          )}
        </VideoPicture>
        {controls === "under" && bar}
        {zoom === "finder beside" && (
          <PlayerZoomFinder floating={false} always share={0.3} />
        )}
        <PlayerKeys />
      </VideoPlayback>
    </div>
  )
}

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