loading-screen HLS

A hero film that plays, with sound, the instant the loading screen is dismissed

examples/loading-screen/App.tsx

import { preload, useVideo, Video } from "@uln/hls/react";
import { useState } from "react";
import { film } from "../films";

preload(film.hls);

/**
 * A loading screen over a hero film. The film sits behind the screen from the
 * start, so by the time "Enter" appears its opening is buffered and it plays
 * the instant the screen is gone. The tap on "Enter" is what allows sound.
 */
export function App() {
  const player = useVideo();
  const [entered, setEntered] = useState(false);

  return (
    <>
      <Video src={film.hls} poster={film.poster} player={player} className="hero" />
      {!entered && (
        <div className="loading-screen">
          {player.ready ? (
            <button
              type="button"
              onClick={() => {
                player.play();
                setEntered(true);
              }}
            >
              Enter
            </button>
          ) : (
            <p>Loading…</p>
          )}
        </div>
      )}
    </>
  );
}