Video player

"use client";

import {
  useEffect,
  useRef,
  useState,
  type ComponentProps,
  type CSSProperties,
  type KeyboardEvent,
  type PointerEvent,
  type Ref,
} from "react";
import { Icon } from "./icon";
import "./video-player.css";

export type VideoPlayerProps = Omit<ComponentProps<"video">, "controls"> & {
  /** Names the player for assistive tech, e.g. "Product tour". */
  label?: string;
  /** Speeds the speed button steps through. */
  rates?: number[];
  /** Frame shape as a CSS aspect-ratio. The video is letterboxed inside it. */
  ratio?: string;
  /** Milliseconds without pointer movement before the controls fade while playing. */
  hideAfter?: number;
};

type State = {
  playing: boolean;
  started: boolean;
  time: number;
  duration: number;
  buffered: number;
  volume: number;
  muted: boolean;
  rate: number;
  waiting: boolean;
  failed: boolean;
};

const START: State = {
  playing: false,
  started: false,
  time: 0,
  duration: Number.NaN,
  buffered: 0,
  volume: 1,
  muted: false,
  rate: 1,
  waiting: false,
  failed: false,
};

const EVENTS = [
  "play",
  "pause",
  "playing",
  "waiting",
  "canplay",
  "timeupdate",
  "durationchange",
  "loadedmetadata",
  "progress",
  "volumechange",
  "ratechange",
  "seeked",
  "ended",
  "emptied",
  "error",
] as const;

/** 65 gives "1:05", 3725 gives "1:02:05", an unknown length gives "--:--". */
function clock(seconds: number): string {
  if (!Number.isFinite(seconds)) return "--:--";
  const total = Math.max(0, Math.floor(seconds));
  const h = Math.floor(total / 3600);
  const m = Math.floor((total % 3600) / 60);
  const s = String(total % 60).padStart(2, "0");
  return h > 0 ? `${h}:${String(m).padStart(2, "0")}:${s}` : `${m}:${s}`;
}

function spoken(seconds: number): string {
  if (!Number.isFinite(seconds)) return "unknown";
  const total = Math.max(0, Math.floor(seconds));
  const m = Math.floor(total / 60);
  const s = total % 60;
  return [m > 0 ? `${m} minute${m === 1 ? "" : "s"}` : "", `${s} second${s === 1 ? "" : "s"}`].filter(Boolean).join(" ");
}

function bufferedEnd(media: HTMLMediaElement): number {
  const ranges = media.buffered;
  for (let i = 0; i < ranges.length; i++) {
    if (ranges.start(i) <= media.currentTime && media.currentTime <= ranges.end(i)) return ranges.end(i);
  }
  return ranges.length > 0 ? ranges.end(ranges.length - 1) : 0;
}

function assign<T>(ref: Ref<T> | undefined, value: T | null) {
  if (typeof ref === "function") ref(value);
  else if (ref) ref.current = value;
}

function captionTracks(video: HTMLVideoElement): TextTrack[] {
  return Array.from(video.textTracks).filter((t) => t.kind === "captions" || t.kind === "subtitles");
}

function Glyph({ d }: { d: string }) {
  return (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d={d} />
    </svg>
  );
}

/* A frame with two lines of text, and a frame with a small window in its corner. */
const CAPTIONS = "M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM7 12.5h3M12.5 12.5h4.5M7 15.5h6.5";
const PIP = "M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM12.5 12h5v4h-5z";

export function VideoPlayer({
  label = "Video player",
  rates = [0.5, 1, 1.25, 1.5, 2],
  ratio = "16 / 9",
  hideAfter = 2500,
  className,
  style,
  ref,
  children,
  ...rest
}: VideoPlayerProps) {
  const root = useRef<HTMLDivElement>(null);
  const video = useRef<HTMLVideoElement | null>(null);
  const playButton = useRef<HTMLButtonElement>(null);
  const refocus = useRef(false);
  const idleTimer = useRef<number | undefined>(undefined);
  const [state, setState] = useState<State>(START);
  const [idle, setIdle] = useState(false);
  const [hover, setHover] = useState<number | null>(null);
  const [captions, setCaptions] = useState({ available: false, on: false, text: "" });
  const [can, setCan] = useState({ fullscreen: false, pip: false });
  const [fullscreen, setFullscreen] = useState(false);
  const [pip, setPip] = useState(false);

  // Mirror the video element's state.
  useEffect(() => {
    const media = video.current;
    if (!media) return;
    const sync = () =>
      setState({
        playing: !media.paused,
        started: !media.paused || media.currentTime > 0,
        time: media.currentTime,
        duration: media.duration,
        buffered: bufferedEnd(media),
        volume: media.volume,
        muted: media.muted,
        rate: media.playbackRate,
        waiting: !media.paused && media.readyState < 3,
        failed: media.error !== null,
      });
    for (const name of EVENTS) media.addEventListener(name, sync);
    sync();
    return () => {
      for (const name of EVENTS) media.removeEventListener(name, sync);
    };
  }, []);

  // What this engine can do, and caption tracks as they arrive.
  useEffect(() => {
    const media = video.current;
    const frame = root.current;
    if (!media || !frame) return;
    setCan({
      fullscreen: Boolean(document.fullscreenEnabled) || "webkitEnterFullscreen" in media,
      pip: Boolean(document.pictureInPictureEnabled) && !media.disablePictureInPicture,
    });

    // The part draws cues itself, above the controls, so tracks run hidden rather than showing.
    let active: TextTrack | null = null;
    const onCue = () => {
      const cues = active?.activeCues;
      const text = cues
        ? Array.from(cues)
            .map((cue) => ("text" in cue && typeof cue.text === "string" ? cue.text.replace(/<[^>]+>/g, "") : ""))
            .join("\n")
        : "";
      setCaptions((c) => ({ ...c, text }));
    };
    const scan = () => {
      const tracks = captionTracks(media);
      const showing = tracks.find((t) => t.mode === "showing" || t.mode === "hidden") ?? null;
      if (showing !== active) {
        active?.removeEventListener("cuechange", onCue);
        active = showing;
        active?.addEventListener("cuechange", onCue);
      }
      for (const t of tracks) if (t.mode === "showing") t.mode = "hidden";
      setCaptions({ available: tracks.length > 0, on: active !== null, text: "" });
      onCue();
    };
    const list = media.textTracks;
    list.addEventListener("addtrack", scan);
    list.addEventListener("removetrack", scan);
    list.addEventListener("change", scan);
    scan();

    const onFull = () => setFullscreen(document.fullscreenElement === frame);
    const onPipIn = () => setPip(true);
    const onPipOut = () => setPip(false);
    frame.addEventListener("fullscreenchange", onFull);
    media.addEventListener("enterpictureinpicture", onPipIn);
    media.addEventListener("leavepictureinpicture", onPipOut);
    return () => {
      list.removeEventListener("addtrack", scan);
      list.removeEventListener("removetrack", scan);
      list.removeEventListener("change", scan);
      active?.removeEventListener("cuechange", onCue);
      frame.removeEventListener("fullscreenchange", onFull);
      media.removeEventListener("enterpictureinpicture", onPipIn);
      media.removeEventListener("leavepictureinpicture", onPipOut);
    };
  }, []);

  useEffect(() => () => window.clearTimeout(idleTimer.current), []);

  // Playback started any way at all (autoplay, a media key, a ref) arms the fade too.
  useEffect(() => {
    if (!state.playing) return;
    setIdle(false);
    window.clearTimeout(idleTimer.current);
    idleTimer.current = window.setTimeout(() => setIdle(true), hideAfter);
  }, [state.playing, hideAfter]);

  // The big play button leaves once playback starts; focus it held moves to the bar's play button.
  useEffect(() => {
    if (!state.started || !refocus.current) return;
    refocus.current = false;
    playButton.current?.focus({ preventScroll: true });
  }, [state.started]);

  // Controls fade only while playing, after the pointer rests.
  function wake() {
    setIdle(false);
    window.clearTimeout(idleTimer.current);
    idleTimer.current = window.setTimeout(() => setIdle(true), hideAfter);
  }

  const known = Number.isFinite(state.duration) && state.duration > 0;

  function toggle() {
    const media = video.current;
    if (!media) return;
    if (media.paused) void media.play().catch(() => {});
    else media.pause();
    wake();
  }

  function seekTo(seconds: number) {
    const media = video.current;
    if (!media || !known) return;
    media.currentTime = Math.min(Math.max(seconds, 0), state.duration);
  }

  function setVolume(next: number) {
    const media = video.current;
    if (!media) return;
    media.volume = Math.min(1, Math.max(0, Math.round(next * 100) / 100));
    if (media.volume > 0) media.muted = false;
  }

  function toggleMute() {
    const media = video.current;
    if (!media) return;
    if (media.muted || media.volume === 0) {
      media.muted = false;
      if (media.volume === 0) media.volume = 0.5;
    } else media.muted = true;
  }

  function cycleRate() {
    const media = video.current;
    if (!media || rates.length === 0) return;
    const at = rates.findIndex((r) => r === media.playbackRate);
    media.playbackRate = rates[(at + 1) % rates.length] ?? 1;
  }

  function toggleCaptions() {
    const media = video.current;
    if (!media) return;
    const tracks = captionTracks(media);
    if (tracks.length === 0) return;
    const on = tracks.some((t) => t.mode !== "disabled");
    for (const t of tracks) t.mode = "disabled";
    const first = tracks[0];
    if (!on && first) first.mode = "hidden";
  }

  function toggleFullscreen() {
    const media = video.current;
    const frame = root.current;
    if (!media || !frame) return;
    if (document.fullscreenElement) void document.exitFullscreen().catch(() => {});
    else if (frame.requestFullscreen) void frame.requestFullscreen().catch(() => {});
    else if ("webkitEnterFullscreen" in media && typeof media.webkitEnterFullscreen === "function") media.webkitEnterFullscreen();
  }

  function togglePip() {
    const media = video.current;
    if (!media) return;
    if (document.pictureInPictureElement === media) void document.exitPictureInPicture().catch(() => {});
    else void media.requestPictureInPicture().catch(() => {});
  }

  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
    const target = event.target;
    const onButton = target instanceof HTMLButtonElement;
    const range = target instanceof HTMLInputElement && target.type === "range" ? target : null;
    const onVolume = range?.dataset.control === "volume";
    const key = event.key;
    if ((key === " " || key === "Enter") && onButton) return;
    if (onVolume && key.startsWith("Arrow")) return;
    if (range && (key === "Home" || key === "End" || key === "PageUp" || key === "PageDown")) return;
    const media = video.current;
    if (!media) return;
    const lower = key.length === 1 ? key.toLowerCase() : key;
    if (lower === " " || lower === "k") toggle();
    else if (lower === "ArrowLeft") seekTo(media.currentTime - 5);
    else if (lower === "ArrowRight") seekTo(media.currentTime + 5);
    else if (lower === "j") seekTo(media.currentTime - 10);
    else if (lower === "l") seekTo(media.currentTime + 10);
    else if (lower === "ArrowUp") setVolume((media.muted ? 0 : media.volume) + 0.1);
    else if (lower === "ArrowDown") setVolume(media.volume - 0.1);
    else if (lower === "m") toggleMute();
    else if (lower === "f" && can.fullscreen) toggleFullscreen();
    else if (lower === "c" && captions.available) toggleCaptions();
    else if (lower === "Home") seekTo(0);
    else if (lower === "End") seekTo(state.duration);
    else return;
    event.preventDefault();
    event.stopPropagation();
    wake();
  }

  function scrubFraction(event: PointerEvent<HTMLElement>) {
    const box = event.currentTarget.getBoundingClientRect();
    return box.width > 0 ? Math.min(1, Math.max(0, (event.clientX - box.left) / box.width)) : 0;
  }

  const played = known ? Math.min(1, state.time / state.duration) : 0;
  const loaded = known ? Math.min(1, state.buffered / state.duration) : 0;
  const silent = state.muted || state.volume === 0;

  return (
    <div
      ref={root}
      role="group"
      aria-label={label}
      tabIndex={-1}
      className={["eq-video-player", className].filter(Boolean).join(" ")}
      style={{ ...style, "--_ratio": ratio } as CSSProperties}
      data-playing={state.playing || undefined}
      data-started={state.started || undefined}
      data-idle={(state.playing && idle) || undefined}
      data-fullscreen={fullscreen || undefined}
      onKeyDown={handleKeyDown}
      onPointerMove={wake}
      onPointerDown={wake}
      onPointerLeave={() => state.playing && setIdle(true)}
    >
      <video
        playsInline
        preload="metadata"
        {...rest}
        ref={(node) => {
          video.current = node;
          assign(ref, node);
        }}
        className="eq-video-player-video"
        onClick={(event) => {
          rest.onClick?.(event);
          if (!event.defaultPrevented) toggle();
        }}
        onDoubleClick={(event) => {
          rest.onDoubleClick?.(event);
          if (!event.defaultPrevented && can.fullscreen) toggleFullscreen();
        }}
      >
        {children}
      </video>

      {captions.on && captions.text && (
        <div className="eq-video-player-captions" aria-hidden="true">
          <span className="eq-video-player-cue">{captions.text}</span>
        </div>
      )}

      {!state.started && (
        <button type="button" className="eq-video-player-big" aria-label={label === "Video player" ? "Play video" : `Play ${label}`}
          onClick={(event) => {
            refocus.current = document.activeElement === event.currentTarget;
            toggle();
          }}
        >
          <Icon name="play" size={24} />
        </button>
      )}

      {state.failed && (
        <p className="eq-video-player-error" role="status">
          This video could not be played.
        </p>
      )}

      <div className="eq-video-player-bar">
        <div
          className="eq-video-player-scrub"
          onPointerMove={(event) => event.pointerType === "mouse" && known && setHover(scrubFraction(event))}
          onPointerLeave={() => setHover(null)}
          style={{ "--_hover": hover ?? 0 } as CSSProperties}
        >
          <input
            className="eq-video-player-seek"
            type="range"
            min={0}
            max={known ? state.duration : 1}
            step="any"
            value={known ? state.time : 0}
            disabled={!known}
            aria-label="Position"
            aria-valuetext={known ? `${spoken(state.time)} of ${spoken(state.duration)}` : "Not loaded"}
            style={{ "--_played": played, "--_loaded": loaded } as CSSProperties}
            onChange={(event) => seekTo(event.currentTarget.valueAsNumber)}
          />
          {hover !== null && (
            <span className="eq-video-player-preview" aria-hidden="true">
              {clock(hover * state.duration)}
            </span>
          )}
        </div>
        <div className="eq-video-player-controls">
          <button
            ref={playButton}
            type="button"
            className="eq-video-player-button"
            aria-label={state.playing ? "Pause" : "Play"}
            data-waiting={state.waiting || undefined}
            onClick={toggle}
          >
            <Icon name={state.playing ? "pause" : "play"} size={18} />
          </button>
          <button
            type="button"
            className="eq-video-player-button"
            data-control="mute"
            aria-label="Mute"
            aria-pressed={silent}
            onClick={toggleMute}
          >
            <Icon name={silent ? "volume-off" : "volume"} size={18} />
          </button>
          <input
            className="eq-video-player-volume"
            type="range"
            data-control="volume"
            min={0}
            max={1}
            step={0.05}
            value={silent ? 0 : state.volume}
            aria-label="Volume"
            aria-valuetext={`${Math.round((silent ? 0 : state.volume) * 100)}%`}
            style={{ "--_played": silent ? 0 : state.volume } as CSSProperties}
            onChange={(event) => setVolume(event.currentTarget.valueAsNumber)}
          />
          <span className="eq-video-player-time" aria-hidden="true">
            {clock(state.time)} / {clock(state.duration)}
          </span>
          <span className="eq-video-player-spacer" />
          {rates.length > 1 && (
            <button
              type="button"
              className="eq-video-player-button"
              data-control="rate"
              aria-label={`Playback speed ${state.rate}×`}
              onClick={cycleRate}
            >
              {state.rate}×
            </button>
          )}
          {captions.available && (
            <button
              type="button"
              className="eq-video-player-button"
              data-control="captions"
              aria-label="Captions"
              aria-pressed={captions.on}
              onClick={toggleCaptions}
            >
              <Glyph d={CAPTIONS} />
            </button>
          )}
          {can.pip && (
            <button
              type="button"
              className="eq-video-player-button"
              data-control="pip"
              aria-label="Picture in picture"
              aria-pressed={pip}
              onClick={togglePip}
            >
              <Glyph d={PIP} />
            </button>
          )}
          {can.fullscreen && (
            <button
              type="button"
              className="eq-video-player-button"
              data-control="fullscreen"
              aria-label="Full screen"
              aria-pressed={fullscreen}
              onClick={toggleFullscreen}
            >
              <Icon name={fullscreen ? "minimize" : "maximize"} size={18} />
            </button>
          )}
        </div>
      </div>
    </div>
  );
}