Audio player

"use client";

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

export type AudioPlayerProps = Omit<ComponentProps<"audio">, "controls" | "title"> & {
  /** The track name, shown in bold. A string also goes to the Media Session. */
  title?: ReactNode;
  /** Who made it. A string also goes to the Media Session. */
  artist?: ReactNode;
  /** Album or show name, for the Media Session only. */
  album?: string;
  /** Cover art: an img or svg, drawn as a square. */
  artwork?: ReactNode;
  /** Full shows artwork and every control; compact is one line. */
  variant?: "full" | "compact";
  /** Seconds the skip buttons jump. */
  skip?: number;
  /** Speeds the speed button steps through. */
  rates?: number[];
  /** Names the player for assistive tech. Defaults to the title when it is a string. */
  label?: string;
  /** Tells the system media controls what is playing, where the browser has them. */
  mediaSession?: boolean;
};

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

const START: State = {
  playing: 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}`;
}

/** The same time in words, for aria-valuetext. */
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;
  const parts = [m > 0 ? `${m} minute${m === 1 ? "" : "s"}` : "", `${s} second${s === 1 ? "" : "s"}`];
  return parts.filter(Boolean).join(" ");
}

/** End of the buffered range that holds the playhead, or of the last one. */
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 SkipIcon({ seconds, back }: { seconds: number; back?: boolean }) {
  return (
    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <g transform={back ? undefined : "matrix(-1 0 0 1 24 0)"}>
        <path d="M5.2 8.5A8 8 0 1 1 4 12.5" />
        <path d="M4.6 4.2l.6 4.3 4.3-.6" />
      </g>
      <text x="12" y="15.6" textAnchor="middle" fontSize="8" fontWeight="650" fill="currentColor" stroke="none" fontFamily="inherit">
        {seconds}
      </text>
    </svg>
  );
}

export function AudioPlayer({
  title,
  artist,
  album,
  artwork,
  variant = "full",
  skip = 15,
  rates = [0.75, 1, 1.25, 1.5, 2],
  label,
  mediaSession = true,
  className,
  style,
  ref,
  ...rest
}: AudioPlayerProps) {
  const audio = useRef<HTMLAudioElement | null>(null);
  const [state, setState] = useState<State>(START);
  const meta = useRef({ title, artist, album, mediaSession, skip });
  meta.current = { title, artist, album, mediaSession, skip };

  useEffect(() => {
    const media = audio.current;
    if (!media) return;
    const sync = () =>
      setState({
        playing: !media.paused,
        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);
    };
  }, []);

  // The system media controls follow whichever player started last.
  useEffect(() => {
    const media = audio.current;
    if (!media || !("mediaSession" in navigator)) return;
    const session = navigator.mediaSession;
    function claim() {
      const { title: t, artist: a, album: al, mediaSession: on, skip: step } = meta.current;
      if (!on || !media) return;
      if (typeof MediaMetadata !== "undefined") {
        session.metadata = new MediaMetadata({
          title: typeof t === "string" ? t : "",
          artist: typeof a === "string" ? a : "",
          album: al ?? "",
        });
      }
      const handlers: [MediaSessionAction, MediaSessionActionHandler][] = [
        ["play", () => void media.play().catch(() => {})],
        ["pause", () => media.pause()],
        ["seekbackward", (d) => (media.currentTime = Math.max(0, media.currentTime - (d.seekOffset ?? step)))],
        ["seekforward", (d) => (media.currentTime = Math.min(media.duration || 0, media.currentTime + (d.seekOffset ?? step)))],
        ["seekto", (d) => d.seekTime !== undefined && (media.currentTime = d.seekTime)],
      ];
      for (const [action, handler] of handlers) {
        try {
          session.setActionHandler(action, handler);
        } catch {
          // An action this browser does not know.
        }
      }
    }
    media.addEventListener("play", claim);
    return () => media.removeEventListener("play", claim);
  }, []);

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

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

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

  function setVolume(next: number) {
    const media = audio.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 = audio.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 = audio.current;
    if (!media || rates.length === 0) return;
    const at = rates.findIndex((r) => r === media.playbackRate);
    media.playbackRate = rates[(at + 1) % rates.length] ?? 1;
  }

  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 = audio.current;
    if (!media) return;
    if (key === " " || key === "k" || key === "K") toggle();
    else if (key === "ArrowLeft") seekTo(media.currentTime - 5);
    else if (key === "ArrowRight") seekTo(media.currentTime + 5);
    else if (key === "j" || key === "J") seekTo(media.currentTime - skip);
    else if (key === "l" || key === "L") seekTo(media.currentTime + skip);
    else if (key === "ArrowUp") setVolume((media.muted ? 0 : media.volume) + 0.1);
    else if (key === "ArrowDown") setVolume(media.volume - 0.1);
    else if (key === "m" || key === "M") toggleMute();
    else if (key === "Home") seekTo(0);
    else if (key === "End") seekTo(state.duration);
    else return;
    event.preventDefault();
    event.stopPropagation();
  }

  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;
  const compact = variant === "compact";
  const name = label ?? (typeof title === "string" ? title : "Audio player");

  const seek = (
    <input
      className="eq-audio-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)}
    />
  );

  const playButton = (
    <button
      type="button"
      className="eq-audio-player-play"
      aria-label={state.playing ? "Pause" : "Play"}
      data-waiting={state.waiting || undefined}
      onClick={toggle}
    >
      <Icon name={state.playing ? "pause" : "play"} size={compact ? 16 : 18} />
    </button>
  );

  const muteButton = (
    <button
      type="button"
      className="eq-audio-player-button"
      aria-label="Mute"
      aria-pressed={silent}
      onClick={toggleMute}
    >
      <Icon name={silent ? "volume-off" : "volume"} size={18} />
    </button>
  );

  const text = (title != null || artist != null) && (
    <div className="eq-audio-player-meta">
      {title != null && <div className="eq-audio-player-title">{title}</div>}
      {state.failed ? (
        <div className="eq-audio-player-error" role="status">
          This audio could not be played.
        </div>
      ) : (
        artist != null && !compact && <div className="eq-audio-player-artist">{artist}</div>
      )}
    </div>
  );

  return (
    <div
      role="group"
      aria-label={name}
      className={["eq-audio-player", className].filter(Boolean).join(" ")}
      style={style}
      data-variant={variant}
      data-playing={state.playing || undefined}
      onKeyDown={handleKeyDown}
    >
      <audio
        preload="metadata"
        {...rest}
        ref={(node) => {
          audio.current = node;
          assign(ref, node);
        }}
      />
      {compact ? (
        <>
          {playButton}
          <div className="eq-audio-player-main">
            {text}
            {seek}
          </div>
          <span className="eq-audio-player-time" aria-hidden="true">
            {clock(state.time)} / {clock(state.duration)}
          </span>
          {muteButton}
        </>
      ) : (
        <>
          {(artwork != null || text) && (
            <div className="eq-audio-player-header">
              {artwork != null && <div className="eq-audio-player-artwork">{artwork}</div>}
              {text}
            </div>
          )}
          <div className="eq-audio-player-timeline">
            <span className="eq-audio-player-time" aria-hidden="true">
              {clock(state.time)}
            </span>
            {seek}
            <span className="eq-audio-player-time" aria-hidden="true">
              {clock(state.duration)}
            </span>
          </div>
          <div className="eq-audio-player-controls">
            <button
              type="button"
              className="eq-audio-player-button"
              data-control="skip"
              aria-label={`Back ${skip} seconds`}
              disabled={!known}
              onClick={() => seekTo(state.time - skip)}
            >
              <SkipIcon seconds={skip} back />
            </button>
            {playButton}
            <button
              type="button"
              className="eq-audio-player-button"
              data-control="skip"
              aria-label={`Forward ${skip} seconds`}
              disabled={!known}
              onClick={() => seekTo(state.time + skip)}
            >
              <SkipIcon seconds={skip} />
            </button>
            <span className="eq-audio-player-spacer" />
            {rates.length > 1 && (
              <button
                type="button"
                className="eq-audio-player-button"
                data-control="rate"
                aria-label={`Playback speed ${state.rate}×`}
                onClick={cycleRate}
              >
                {state.rate}×
              </button>
            )}
            {muteButton}
            <input
              className="eq-audio-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)}
            />
          </div>
        </>
      )}
    </div>
  );
}