50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T258e,"use client"; import { useRef, useState, useEffect, useCallback, type CSSProperties, } from "react"; import { Button } from "@/components/ui/button"; import { Mic, Pause, Play, Square, Trash2 } from "lucide-react"; import RecordPlugin, { type RecordPluginOptions, type RecordPluginDeviceOptions, } from "wavesurfer.js/dist/plugins/record.esm.js"; import { cn } from "@/lib/utils"; import { formatTime, useCssVar, useWavesurfer } from "@/lib/wave-cn"; // Types export type RecordState = "idle" | "recording" | "paused" | "done"; export type WaveRecorderProps = { // Callbacks onRecordEnd?: (blob: Blob) => void; onRecordStart?: () => void; onRecordPause?: () => void; onRecordResume?: () => void; onDiscard?: () => void; onError?: (error: Error) => void; // Behaviour maxDuration?: number; mimeType?: RecordPluginOptions["mimeType"]; audioBitsPerSecond?: RecordPluginOptions["audioBitsPerSecond"]; // default: 128000 deviceId?: string; disabled?: boolean; // Display showWaveform?: boolean; // default: true showTimer?: boolean; // default: true waveColor?: string; progressColor?: string; waveformHeight?: number; // default: 64 barWidth?: number; // default: 3 barGap?: number; // default: 2 barRadius?: number; // default: 30 barHeight?: number; // default: 0.8 // Style className?: string; style?: CSSProperties; waveformClassName?: string; timerClassName?: string; controlsClassName?: string; }; type RecordPluginInstance = InstanceType; export function WaveRecorder({ onRecordEnd, onRecordStart, onRecordPause, onRecordResume, onDiscard, onError, maxDuration, mimeType, audioBitsPerSecond = 128000, deviceId, disabled = false, showWaveform = true, showTimer = true, waveColor = "var(--primary)", progressColor = "var(--background)", waveformHeight = 64, barWidth = 3, barGap = 2, barRadius = 2, barHeight, className, style, waveformClassName, timerClassName, controlsClassName, }: WaveRecorderProps) { const containerRef = useRef(null); // Live plugin instance. Kept in a ref (not state): it is only read from // event handlers, and the plugin effect must not call setState synchronously. const recordRef = useRef(null); const [recordState, setRecordState] = useState("idle"); const [duration, setDuration] = useState(0); const isDiscarding = useRef(false); const maxDurationTimer = useRef | null>(null); // Latest callback props, read at event time so the plugin effect never // needs to re-run when a parent passes a new inline function. const callbacks = useRef({ onRecordEnd, onRecordStart, onRecordPause, onRecordResume, onDiscard, }); useEffect(() => { callbacks.current = { onRecordEnd, onRecordStart, onRecordPause, onRecordResume, onDiscard, }; }); const resolvedWaveColor = useCssVar(waveColor); const resolvedProgressColor = useCssVar(progressColor); const { wavesurfer } = useWavesurfer({ container: containerRef, waveColor: resolvedWaveColor, progressColor: resolvedProgressColor, height: waveformHeight, barWidth, barGap, barRadius, barHeight, }); const clearMaxDurationTimer = useCallback(() => { if (maxDurationTimer.current) { clearTimeout(maxDurationTimer.current); maxDurationTimer.current = null; } }, []); // Plugin lifecycle + events useEffect(() => { if (!wavesurfer) return; const record = wavesurfer.registerPlugin( RecordPlugin.create({ renderRecordedAudio: false, continuousWaveform: false, scrollingWaveform: true, mimeType, audioBitsPerSecond, mediaRecorderTimeslice: 100, }), ); recordRef.current = record; const unsubs = [ // Only re-render when the displayed second changes. record.on("record-progress", (ms) => { setDuration((prev) => Math.floor(ms / 1000) === Math.floor(prev / 1000) ? prev : ms, ); }), record.on("record-start", () => { setRecordState("recording"); setDuration(0); callbacks.current.onRecordStart?.(); }), record.on("record-pause", () => { setRecordState("paused"); callbacks.current.onRecordPause?.(); }), record.on("record-resume", () => { setRecordState("recording"); callbacks.current.onRecordResume?.(); }), record.on("record-end", (blob: Blob) => { if (maxDurationTimer.current) { clearTimeout(maxDurationTimer.current); maxDurationTimer.current = null; } if (!isDiscarding.current) { callbacks.current.onRecordEnd?.(blob); setRecordState("done"); } else { callbacks.current.onDiscard?.(); setRecordState("idle"); } isDiscarding.current = false; wavesurfer.empty(); setDuration(0); }), ]; return () => { unsubs.forEach((fn) => fn()); if (maxDurationTimer.current) { clearTimeout(maxDurationTimer.current); maxDurationTimer.current = null; } if (record.isActive()) record.stopRecording(); record.stopMic(); record.destroy(); if (recordRef.current === record) recordRef.current = null; }; }, [wavesurfer, mimeType, audioBitsPerSecond]); // Actions const start = useCallback(async () => { const record = recordRef.current; if (!record || disabled) return; try { const deviceOptions: RecordPluginDeviceOptions = deviceId ? { deviceId: { exact: deviceId } } : {}; await record.startRecording(deviceOptions); if (maxDuration && maxDuration > 0) { maxDurationTimer.current = setTimeout( () => record.stopRecording(), maxDuration * 1000, ); } } catch (err) { onError?.(err instanceof Error ? err : new Error(String(err))); } }, [disabled, deviceId, maxDuration, onError]); const stop = useCallback(() => { clearMaxDurationTimer(); recordRef.current?.stopRecording(); }, [clearMaxDurationTimer]); const togglePause = useCallback(() => { const record = recordRef.current; if (!record) return; if (recordState === "paused") { record.resumeRecording(); } else { record.pauseRecording(); } }, [recordState]); const discard = useCallback(() => { clearMaxDurationTimer(); isDiscarding.current = true; recordRef.current?.stopRecording(); wavesurfer?.empty(); setRecordState("idle"); setDuration(0); }, [clearMaxDurationTimer, wavesurfer]); // Derived const isActive = recordState === "recording" || recordState === "paused"; const isPaused = recordState === "paused"; // Render return (

{/* Waveform — always mounted for stable DOM ref, hidden when idle */}

{/* Controls */} {showTimer && isActive && (

{formatTime(duration / 1000)}

)}

{!isActive && ( )} {isActive && ( <> )}

); } export default WaveRecorder; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","wavesurfer.js",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/wavesurfer.js","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"wavesurfer.js"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@waves-cn","registryDependencies":["@waves-cn/wave-cn","button"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/components/wave-recorder.tsx","content":"$52","type":"registry:component","target":"components/waves-cn/wave-recorder.tsx"}],"className":"h-[70svh] min-h-80"}]]}]