playlist HLS

Films one after another

examples/playlist/App.tsx

import { Video } from "@uln/hls/react";
import { useEffect, useState } from "react";
import { type Film, fetchFilms } from "../films";

/** A showreel: films one after another; Next skips ahead. */
export function App() {
  const [films, setFilms] = useState<Film[]>([]);
  const [index, setIndex] = useState(0);
  const current = films[index];
  const next = () => setIndex((i) => (i + 1) % films.length);

  useEffect(() => {
    void fetchFilms(0).then(setFilms);
  }, []);

  if (!current) return null;
  return (
    <section>
      {/* When one ends, the next attaches and `playing` starts it. */}
      <Video src={current.hls} poster={current.poster} playing controls onEnded={next} />
      <button type="button" onClick={next}>
        Next: {films[(index + 1) % films.length]?.title}
      </button>
    </section>
  );
}