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:Tb00,const FILMS = [ { label: "Big Buck Bunny", src: "/bunny.mp4", poster: "/video-poster.jpg", duration: 8000, width: 1280, height: 720, fps: 25, }, { label: "Adrian Galilea", src: "/adriangalilea.mp4", poster: "/adriangalilea.jpg", duration: 2733, width: 304, height: 304, }, // An item carries its own captions: the player offers them while it plays. { label: "Ask not", src: "/kennedy/ask-not.mp4", poster: "/kennedy/ask-not.jpg", duration: 17_518, width: 640, height: 480, captions: [ { src: "/kennedy/ask-not.en.vtt", lang: "en", label: "English", default: true, }, { src: "/kennedy/ask-not.es.vtt", lang: "es", label: "español" }, ], }, ] /** The player keyed by the item, so each film starts fresh; it plays at once when the * person got to it by watching, and its end goes on to the next. A 16:9 stage, so a * square film fits inside it whole and the player keeps its size between films. */ function Films({ list }: { list: "side" | "card" | "glass" }) { const playlist = usePlaylist<(typeof FILMS)[number]>() if (!playlist) throw new Error("Films: place it inside a PlaylistProvider") const film = playlist.item const face = list === "glass" ? "glass" : "plain" const bar = ( {list !== "side" && } ) return ( {bar} ) } /** Where the playlist shows: a list beside the player, or a card from the bar. */ function ThePlaylist() { const [list, setList] = React.useState<"side" | "card" | "glass">("side") return (

{list === "side" && }

) } 26:T6c6f,

const FILMS = [
  {
    label: "Big Buck Bunny",
    src: "/bunny.mp4",
    poster: "/video-poster.jpg",
    duration: 8000,
    width: 1280,
    height: 720,
    fps: 25,
  },
  {
    label: "Adrian Galilea",
    src: "/adriangalilea.mp4",
    poster: "/adriangalilea.jpg",
    duration: 2733,
    width: 304,
    height: 304,
  },
  // An item carries its own captions: the player offers them while it plays.
  {
    label: "Ask not",
    src: "/kennedy/ask-not.mp4",
    poster: "/kennedy/ask-not.jpg",
    duration: 17_518,
    width: 640,
    height: 480,
    captions: [
      {
        src: "/kennedy/ask-not.en.vtt",
        lang: "en",
        label: "English",
        default: true,
      },
      { src: "/kennedy/ask-not.es.vtt", lang: "es", label: "español" },
    ],
  },
]

/** The player keyed by the item, so each film starts fresh; it plays at once when the
 *  person got to it by watching, and its end goes on to the next. A 16:9 stage, so a
 *  square film fits inside it whole and the player keeps its size between films. */
function Films({ list }: { list: "side" | "card" | "glass" }) {
  const playlist = usePlaylist<(typeof FILMS)[number]>()
  if (!playlist) throw new Error("Films: place it inside a PlaylistProvider")
  const film = playlist.item
  const face = list === "glass" ? "glass" : "plain"
  const bar = (
    <PlayerBar label={film.label} playButton={false}>
      {list !== "side" && <PlayerPlaylistButton />}
      <PlayerCaptions />
      <PlayerSpeed />
      <PlayerSound />
      <PlayerFullscreen />
    </PlayerBar>
  )
  return (
    <VideoPlayback
      key={playlist.index}
      {...film}
      autoPlay={playlist.continuing}
      onEnded={playlist.advance}
      zoom
    >
      <VideoPicture aspect="16 / 9">
        <PlayerZoomFinder material={face} />
        <PlayerChrome material={face}>
          <PlayerTransport />
          <PlayerFoot>{bar}</PlayerFoot>
        </PlayerChrome>
      </VideoPicture>
    </VideoPlayback>
  )
}

/** Where the playlist shows: a list beside the player, or a card from the bar. */
function ThePlaylist() {
  const [list, setList] = React.useState<"side" | "card" | "glass">("side")
  return (
    <div className="space-y-5">
      <Choice
        label="list"
        value={list}
        onChange={setList}
        options={[
          { value: "side", label: "beside" },
          { value: "card", label: "card" },
          { value: "glass", label: "glass card" },
        ]}
      />
      <PlaylistProvider items={FILMS}>
        <div
          className={
            list === "side" ? "grid gap-4 md:grid-cols-[1fr_15rem]" : undefined
          }
        >
          <Films list={list} />
          {list === "side" && <PlayerPlaylist />}
        </div>
      </PlaylistProvider>
    </div>
  )
}

<ThePlaylist />

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