Waveform

"use client";

import { useState, type ComponentProps, type CSSProperties, type KeyboardEvent, type PointerEvent } from "react";
import "./waveform.css";

export type WaveformProps = Omit<ComponentProps<"div">, "onChange" | "defaultValue" | "children"> & {
  /** Loudness per slice, 0 to 1, oldest first. Any length; bars resamples it. */
  peaks: number[];
  /** Length of the audio in seconds. */
  duration: number;
  /** Playhead in seconds, when you control it. */
  value?: number;
  /** Playhead on first render, when you do not. */
  defaultValue?: number;
  /** Called while the user clicks, drags or presses keys to move the playhead. */
  onSeek?: (seconds: number) => void;
  /** Names the control, e.g. "Voice note from Priya". */
  label: string;
  /** How far the audio has loaded, in seconds. Drawn a step darker than the rest. */
  buffered?: number;
  /** Number of bars to draw. Defaults to one per peak. */
  bars?: number;
  disabled?: boolean;
};

/** 65 gives "1:05". */
function clock(seconds: number): string {
  const total = Math.max(0, Math.floor(seconds));
  return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, "0")}`;
}

/** Takes the loudest peak in each bucket, so short spikes survive the resampling. */
function resample(peaks: number[], count: number): number[] {
  if (count <= 0 || peaks.length === 0) return [];
  if (count === peaks.length) return peaks;
  return Array.from({ length: count }, (_, i) => {
    const from = Math.floor((i * peaks.length) / count);
    const to = Math.max(from + 1, Math.floor(((i + 1) * peaks.length) / count));
    return Math.max(...peaks.slice(from, to));
  });
}

function Bars({ peaks, className }: { peaks: number[]; className: string }) {
  return (
    <svg className={className} viewBox={`0 0 ${peaks.length} 2`} preserveAspectRatio="none" aria-hidden="true">
      {peaks.map((p, i) => {
        // Rounded, so a server and a browser whose Math.sin differ in the last digit draw the same markup.
        const h = Math.round(Math.max(0.06, Math.min(1, p || 0)) * 1000) / 1000;
        return <rect key={i} x={i + 0.18} y={Math.round((1 - h) * 1000) / 1000} width={0.64} height={Math.round(h * 2000) / 1000} />;
      })}
    </svg>
  );
}

export function Waveform({
  peaks,
  duration,
  value,
  defaultValue = 0,
  onSeek,
  label,
  buffered,
  bars,
  disabled = false,
  className,
  style,
  onKeyDown,
  onPointerDown,
  onPointerMove,
  onPointerUp,
  onPointerLeave,
  ...rest
}: WaveformProps) {
  const [inner, setInner] = useState(defaultValue);
  const [dragging, setDragging] = useState(false);
  const [hover, setHover] = useState<number | null>(null);
  const length = Number.isFinite(duration) && duration > 0 ? duration : 0;
  const current = Math.min(Math.max(value ?? inner, 0), length);
  const shown = resample(peaks, bars ?? peaks.length);
  const at = length > 0 ? current / length : 0;
  const loaded = buffered === undefined || length === 0 ? 1 : Math.min(1, Math.max(0, buffered / length));

  function seek(seconds: number) {
    if (disabled || length === 0) return;
    const next = Math.min(Math.max(seconds, 0), length);
    if (value === undefined) setInner(next);
    onSeek?.(next);
  }

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

  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    onKeyDown?.(event);
    if (event.defaultPrevented || disabled) return;
    const big = length / 10;
    const moves: Record<string, number> = {
      ArrowLeft: current - 5,
      ArrowDown: current - 5,
      ArrowRight: current + 5,
      ArrowUp: current + 5,
      PageDown: current - big,
      PageUp: current + big,
      Home: 0,
      End: length,
    };
    const next = moves[event.key];
    if (next === undefined) return;
    event.preventDefault();
    event.stopPropagation();
    seek(next);
  }

  return (
    <div
      role="slider"
      tabIndex={disabled ? -1 : 0}
      aria-label={label}
      aria-valuemin={0}
      aria-valuemax={Math.round(length)}
      aria-valuenow={Math.round(current)}
      aria-valuetext={`${clock(current)} of ${clock(length)}`}
      aria-disabled={disabled || undefined}
      {...rest}
      className={["eq-waveform", className].filter(Boolean).join(" ")}
      style={
        {
          ...style,
          "--_at": at,
          "--_loaded": loaded,
          "--_hover": hover ?? 0,
        } as CSSProperties
      }
      data-dragging={dragging || undefined}
      data-hovering={hover !== null || undefined}
      onKeyDown={handleKeyDown}
      onPointerDown={(event) => {
        onPointerDown?.(event);
        if (event.defaultPrevented || disabled || event.button !== 0) return;
        event.currentTarget.setPointerCapture(event.pointerId);
        event.currentTarget.focus({ preventScroll: true });
        setDragging(true);
        seek(fraction(event) * length);
      }}
      onPointerMove={(event) => {
        onPointerMove?.(event);
        if (disabled) return;
        const f = fraction(event);
        if (event.pointerType === "mouse") setHover(f);
        if (dragging) seek(f * length);
      }}
      onPointerUp={(event) => {
        onPointerUp?.(event);
        setDragging(false);
      }}
      onPointerLeave={(event) => {
        onPointerLeave?.(event);
        setHover(null);
      }}
      onLostPointerCapture={() => setDragging(false)}
    >
      <Bars peaks={shown} className="eq-waveform-bars" />
      <Bars peaks={shown} className="eq-waveform-loaded" />
      <Bars peaks={shown} className="eq-waveform-played" />
      <span className="eq-waveform-hover" aria-hidden="true">
        <span className="eq-waveform-tip">{clock((hover ?? 0) * length)}</span>
      </span>
      <span className="eq-waveform-head" aria-hidden="true" />
    </div>
  );
}