"use client"; import { useCallback, useEffect, useMemo, useRef, useState, memo, type ReactElement, type RefObject, } from "react"; import WaveSurfer, { type WaveSurferEvents, type WaveSurferOptions, } from "wavesurfer.js"; // ─── Types ─────────────────────────────────────────────────────────────────── type WavesurferEventHandler = ( wavesurfer: WaveSurfer, ...args: T ) => void; /** `onReady`, `onPlay`, `onTimeupdate`, … — one prop per wavesurfer.js event. */ export type OnWavesurferEvents = { [K in keyof WaveSurferEvents as `on${Capitalize}`]?: WavesurferEventHandler< WaveSurferEvents[K] >; }; export type PartialWavesurferOptions = Omit; type WavesurferPlugin = NonNullable[number]; export type WavesurferProps = PartialWavesurferOptions & OnWavesurferEvents & { className?: string; }; // ─── Defaults ──────────────────────────────────────────────────────────────── export const WAVESURFER_DEFAULTS = { waveColor: "var(--muted-foreground)", progressColor: "var(--primary)", height: 64, barWidth: 3, barGap: 2, barRadius: 2, minPxPerSec: 1, cursorWidth: 0, } as const satisfies Partial; // ─── Helpers ───────────────────────────────────────────────────────────────── /** Formats seconds as `m:ss`. Negative or non-finite input renders as `0:00`. */ export function formatTime(seconds: number): string { if (!Number.isFinite(seconds) || seconds < 0) return "0:00"; const m = Math.floor(seconds / 60); const s = Math.floor(seconds % 60); return `${m}:${s.toString().padStart(2, "0")}`; } const EVENT_PROP_RE = /^on([A-Z])/; const isEventProp = (key: string) => EVENT_PROP_RE.test(key); const getEventName = (key: string) => key.replace(EVENT_PROP_RE, (_, $1) => $1.toLowerCase(), ) as keyof WaveSurferEvents; /** * Options that require a brand-new WaveSurfer instance when they change. * Every other option is applied in place through `wavesurfer.setOptions()`, * so cosmetic changes (bar width, height, colors…) never re-fetch the audio. * * `plugins` and `peaks` are compared by reference: memoize them in the caller * (`useMemo`) or the player will be recreated on every render. */ const STRUCTURAL_KEYS = [ "url", "media", "plugins", "peaks", "duration", "sampleRate", "backend", "mediaControls", ] as const satisfies readonly (keyof WaveSurferOptions)[]; type StructuralKey = (typeof STRUCTURAL_KEYS)[number]; function isStructuralKey(key: string): key is StructuralKey { return (STRUCTURAL_KEYS as readonly string[]).includes(key); } function splitProps(props: WavesurferProps) { const { className, ...rest } = props; const options: Partial = {}; const events: OnWavesurferEvents = {}; for (const key in rest) { const value = rest[key as keyof typeof rest]; if (isEventProp(key)) { events[key as keyof OnWavesurferEvents] = value as never; } else { options[key as keyof PartialWavesurferOptions] = value as never; } } return { className, options, events }; } function pickUpdatableOptions( options: Partial, ): Partial { const out: Partial = {}; for (const key in options) { if (isStructuralKey(key)) continue; const value = options[key as keyof WaveSurferOptions]; if (value === undefined) continue; // keep WAVESURFER_DEFAULTS in place out[key as keyof WaveSurferOptions] = value as never; } return out; } /** * Keys whose value changed between two option objects. Only those are sent to * `setOptions()`, so re-rendering with the same props never resets state that * the user changed through the instance (zoom level, playback rate…). */ function diffOptions( prev: Partial, next: Partial, ): Partial { const patch: Partial = {}; const keys = new Set([...Object.keys(prev), ...Object.keys(next)]); for (const key of keys) { const k = key as keyof WaveSurferOptions; if (prev[k] !== next[k]) patch[k] = next[k] as never; } return patch; } /** Stable string for the updatable, serialisable part of the options. */ function updatableOptionsKey(options: Partial): string { const out: Record = {}; for (const key in options) { if (isStructuralKey(key)) continue; const value = options[key as keyof WaveSurferOptions]; if (typeof value === "function") continue; if (typeof HTMLElement !== "undefined" && value instanceof HTMLElement) continue; out[key] = value; } return JSON.stringify(out); } /** * Plugins passed to `` act as templates. wavesurfer.js destroys * plugins together with the instance, so a fresh copy is created from each * template every time the instance is (re)created. */ function instantiatePlugins( plugins: WaveSurferOptions["plugins"], ): WaveSurferOptions["plugins"] { return plugins?.map((plugin) => { const Plugin = plugin.constructor as new ( options: unknown, ) => WavesurferPlugin; const options = (plugin as unknown as { options?: unknown }).options; return new Plugin(options); }); } // ─── CSS var resolver ──────────────────────────────────────────────────────── const CSS_VAR_RE = /^var$(--[^,)]+)(?:\s*,\s*([^)]+))?$$/; function resolveCssVar(value: string): string { if (typeof window === "undefined") return value; const match = CSS_VAR_RE.exec(value.trim()); if (!match) return value; const [, name, fallback] = match; const root = getComputedStyle(document.documentElement) .getPropertyValue(name) .trim(); const body = root ? "" : getComputedStyle(document.body).getPropertyValue(name).trim(); const raw = root || body || fallback?.trim() || ""; if (!raw) return value; // shadcn v3 stored bare HSL channels ("222.2 47.4% 11.2%"); canvas needs a full color. const isHslChannels = /^[\d.]+\s+[\d.]+%\s+[\d.]+%$/.test(raw); return isHslChannels ? `hsl(${raw})` : raw; } /** * Resolves a `var(--token)` string to its computed value so it can be handed to * a `