custom-controls HLS

The site's own play/pause, scrubber, mute and fullscreen

examples/custom-controls/App.tsx

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

preload(film.hls);

/** A film page with the site's own controls: play/pause, scrubber, mute, fullscreen. */
export function App() {
  const player = useVideo();
  const [muted, setMuted] = useState(false);
  const playing = player.status === "playing";

  return (
    // Children are drawn over the video and stay with it in fullscreen.
    <Video src={film.hls} poster={film.poster} player={player} muted={muted} className="film">
      <div className="controls">
        <button type="button" onClick={playing ? player.pause : player.play}>
          {playing ? "Pause" : "Play"}
        </button>
        <input
          type="range"
          aria-label="Position"
          min={0}
          max={player.duration ?? 0}
          disabled={player.duration === null}
          step={0.1}
          value={player.currentTime}
          onChange={(event) => player.seek(event.currentTarget.valueAsNumber)}
        />
        <span>
          {formatTimecode(player.currentTime)} / {player.duration === null ? "–:––" : formatTimecode(player.duration)}
        </span>
        <button type="button" onClick={() => setMuted(!muted)}>
          {muted ? "Sound on" : "Mute"}
        </button>
        <button type="button" onClick={player.fullscreen ? player.exitFullscreen : player.openFullscreen}>
          {player.fullscreen ? "Exit fullscreen" : "Fullscreen"}
        </button>
      </div>
    </Video>
  );
}