@waveform-playlist/recording 12.2.0 → 13.0.1

package/dist/index.mjs

@@ -30,10 +30,16 @@ function useRecording(stream, options = {}) {
   const stopRecordingRef = useRef(null);
   const stopAckResolveRef = useRef(null);
   const isStoppingRef = useRef(false);
+  const stopPromiseRef = useRef(null);
+  const finishStopRecordingRef = useRef(null);
+  const isStartingRef = useRef(false);
+  const isUnmountedRef = useRef(false);
+  const durationRef = useRef(0);
   const startDurationLoop = useCallback(() => {
     const tick = () => {
       if (isRecordingRef.current && !isPausedRef.current && !isStoppingRef.current) {
         const elapsed = (performance.now() - startTimeRef.current) / 1e3;
+        durationRef.current = elapsed;
         setDuration(elapsed);
         animationFrameRef.current = requestAnimationFrame(tick);
       }
@@ -56,11 +62,12 @@ function useRecording(stream, options = {}) {
     }
   }, []);
   const startRecording = useCallback(async () => {
-    if (isRecordingRef.current) return;
+    if (isRecordingRef.current || isStartingRef.current) return false;
     if (!stream) {
       setError(new Error("No microphone stream available"));
-      return;
+      return false;
     }
+    isStartingRef.current = true;
     try {
       setError(null);
       const context = getGlobalContext();
@@ -68,6 +75,7 @@ function useRecording(stream, options = {}) {
         await context.resume();
       }
       await loadWorklet();
+      if (isUnmountedRef.current) return false;
       const source = context.createMediaStreamSource(stream);
       mediaStreamSourceRef.current = source;
       const detectedChannelCount = stream.getAudioTracks()[0]?.getSettings().channelCount;
@@ -143,17 +151,29 @@ function useRecording(stream, options = {}) {
       setIsPaused(false);
       startTimeRef.current = performance.now();
       startDurationLoop();
+      return true;
     } catch (err) {
       console.warn("[waveform-playlist] Failed to start recording:", String(err));
       setError(err instanceof Error ? err : new Error("Failed to start recording"));
+      return false;
+    } finally {
+      isStartingRef.current = false;
     }
   }, [stream, channelCount, samplesPerPixel, bits, loadWorklet, startDurationLoop]);
   const stopRecording = useCallback(async () => {
     if (!isRecordingRef.current) {
       return null;
     }
+    if (isStoppingRef.current) {
+      return stopPromiseRef.current ?? null;
+    }
+    isStoppingRef.current = true;
+    const stopPromise = finishStopRecordingRef.current();
+    stopPromiseRef.current = stopPromise;
+    return stopPromise;
+  }, []);
+  const finishStopRecording = useCallback(async () => {
     try {
-      isStoppingRef.current = true;
       if (animationFrameRef.current !== null) {
         cancelAnimationFrame(animationFrameRef.current);
         animationFrameRef.current = null;
@@ -196,6 +216,8 @@ function useRecording(stream, options = {}) {
           }
         }
         node.disconnect();
+        workletNodeRef.current = null;
+        mediaStreamSourceRef.current = null;
       }
       const context = getGlobalContext();
       const rawContext = context.rawContext;
@@ -208,6 +230,7 @@ function useRecording(stream, options = {}) {
       }
       const buffer = createAudioBuffer(rawContext, channelData, rawContext.sampleRate, numChannels);
       setAudioBuffer(buffer);
+      durationRef.current = buffer.duration;
       setDuration(buffer.duration);
       return buffer;
     } catch (err) {
@@ -224,8 +247,9 @@ function useRecording(stream, options = {}) {
     }
   }, [channelCount]);
   stopRecordingRef.current = stopRecording;
+  finishStopRecordingRef.current = finishStopRecording;
   const pauseRecording = useCallback(() => {
-    if (isRecording && !isPaused) {
+    if (isRecordingRef.current && !isPausedRef.current && !isStoppingRef.current) {
       workletNodeRef.current?.port.postMessage({ command: "pause" });
       if (animationFrameRef.current !== null) {
         cancelAnimationFrame(animationFrameRef.current);
@@ -234,18 +258,20 @@ function useRecording(stream, options = {}) {
       isPausedRef.current = true;
       setIsPaused(true);
     }
-  }, [isRecording, isPaused]);
+  }, []);
   const resumeRecording = useCallback(() => {
-    if (isRecording && isPaused) {
+    if (isRecordingRef.current && isPausedRef.current && !isStoppingRef.current) {
       workletNodeRef.current?.port.postMessage({ command: "resume" });
       isPausedRef.current = false;
       setIsPaused(false);
-      startTimeRef.current = performance.now() - duration * 1e3;
+      startTimeRef.current = performance.now() - durationRef.current * 1e3;
       startDurationLoop();
     }
-  }, [isRecording, isPaused, duration, startDurationLoop]);
+  }, [startDurationLoop]);
   useEffect(() => {
+    isUnmountedRef.current = false;
     return () => {
+      isUnmountedRef.current = true;
       if (audioTrackRef.current && onTrackEndedRef.current) {
         audioTrackRef.current.removeEventListener("ended", onTrackEndedRef.current);
       }
@@ -286,21 +312,20 @@ function useRecording(stream, options = {}) {
 }
 
 // src/hooks/useMicrophoneAccess.ts
-import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2, useRef as useRef2 } from "react";
+import { enumerateMicrophones } from "@waveform-playlist/core";
 function useMicrophoneAccess() {
   const [stream, setStream] = useState2(null);
   const [devices, setDevices] = useState2([]);
   const [hasPermission, setHasPermission] = useState2(false);
   const [isLoading, setIsLoading] = useState2(false);
   const [error, setError] = useState2(null);
+  const streamRef = useRef2(null);
+  const requestGenerationRef = useRef2(0);
+  const isUnmountedRef = useRef2(false);
   const enumerateDevices = useCallback2(async () => {
     try {
-      const allDevices = await navigator.mediaDevices.enumerateDevices();
-      const audioInputs = allDevices.filter((device) => device.kind === "audioinput").map((device) => ({
-        deviceId: device.deviceId,
-        label: device.label || `Microphone ${device.deviceId.slice(0, 8)}`,
-        groupId: device.groupId
-      }));
+      const { devices: audioInputs } = await enumerateMicrophones();
       setDevices(audioInputs);
     } catch (err) {
       console.error("Failed to enumerate devices:", err);
@@ -309,11 +334,14 @@ function useMicrophoneAccess() {
   }, []);
   const requestAccess = useCallback2(
     async (deviceId, audioConstraints) => {
+      const generation = ++requestGenerationRef.current;
       setIsLoading(true);
       setError(null);
       try {
-        if (stream) {
-          stream.getTracks().forEach((track) => track.stop());
+        if (streamRef.current) {
+          streamRef.current.getTracks().forEach((track) => track.stop());
+          streamRef.current = null;
+          setStream(null);
         }
         const audio = {
           // Recording-optimized defaults: prioritize raw audio quality and low latency
@@ -332,36 +360,50 @@ function useMicrophoneAccess() {
           video: false
         };
         const newStream = await navigator.mediaDevices.getUserMedia(constraints);
+        if (generation !== requestGenerationRef.current || isUnmountedRef.current) {
+          newStream.getTracks().forEach((track) => track.stop());
+          return;
+        }
+        streamRef.current = newStream;
         setStream(newStream);
         setHasPermission(true);
         await enumerateDevices();
       } catch (err) {
         console.error("Failed to access microphone:", err);
-        setError(err instanceof Error ? err : new Error("Failed to access microphone"));
-        setHasPermission(false);
+        if (generation === requestGenerationRef.current) {
+          setError(err instanceof Error ? err : new Error("Failed to access microphone"));
+          setHasPermission(false);
+        }
       } finally {
-        setIsLoading(false);
+        if (generation === requestGenerationRef.current) {
+          setIsLoading(false);
+        }
       }
     },
-    [stream, enumerateDevices]
+    [enumerateDevices]
   );
   const stopStream = useCallback2(() => {
-    if (stream) {
-      stream.getTracks().forEach((track) => track.stop());
+    requestGenerationRef.current++;
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((track) => track.stop());
+      streamRef.current = null;
       setStream(null);
       setHasPermission(false);
     }
-  }, [stream]);
+  }, []);
   useEffect2(() => {
+    isUnmountedRef.current = false;
     enumerateDevices();
     navigator.mediaDevices.addEventListener("devicechange", enumerateDevices);
     return () => {
       navigator.mediaDevices.removeEventListener("devicechange", enumerateDevices);
-      if (stream) {
-        stream.getTracks().forEach((track) => track.stop());
+      isUnmountedRef.current = true;
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((track) => track.stop());
+        streamRef.current = null;
       }
     };
-  }, [enumerateDevices, stream]);
+  }, [enumerateDevices]);
   return {
     stream,
     devices,
@@ -374,7 +416,7 @@ function useMicrophoneAccess() {
 }
 
 // src/hooks/useMicrophoneLevel.ts
-import { useEffect as useEffect3, useState as useState3, useRef as useRef2, useCallback as useCallback3 } from "react";
+import { useEffect as useEffect3, useState as useState3, useRef as useRef3, useCallback as useCallback3 } from "react";
 import { getGlobalContext as getGlobalContext2 } from "@waveform-playlist/playout";
 import { gainToNormalized } from "@waveform-playlist/core";
 import { addMeterWorkletModule } from "@waveform-playlist/worklets";
@@ -385,9 +427,9 @@ function useMicrophoneLevel(stream, options = {}) {
   const [peakLevels, setPeakLevels] = useState3(() => new Array(channelCount).fill(0));
   const [rmsLevels, setRmsLevels] = useState3(() => new Array(channelCount).fill(0));
   const [meterError, setMeterError] = useState3(null);
-  const workletNodeRef = useRef2(null);
-  const sourceRef = useRef2(null);
-  const smoothedPeakRef = useRef2(new Array(channelCount).fill(0));
+  const workletNodeRef = useRef3(null);
+  const sourceRef = useRef3(null);
+  const smoothedPeakRef = useRef3(new Array(channelCount).fill(0));
   const resetPeak = useCallback3(
     () => setPeakLevels(new Array(channelCount).fill(0)),
     [channelCount]
@@ -431,21 +473,23 @@ function useMicrophoneLevel(stream, options = {}) {
       smoothedPeakRef.current = new Array(actualChannels).fill(0);
       workletNode.port.onmessage = (event) => {
         if (!isMounted) return;
-        const { peak, rms } = event.data;
+        const data = event.data;
+        const workletChannels = data.length / 2;
         const smoothed = smoothedPeakRef.current;
         const peakValues = [];
         const rmsValues = [];
-        for (let ch = 0; ch < peak.length; ch++) {
-          smoothed[ch] = Math.max(peak[ch], (smoothed[ch] ?? 0) * PEAK_DECAY);
+        for (let ch = 0; ch < workletChannels; ch++) {
+          smoothed[ch] = Math.max(data[ch], (smoothed[ch] ?? 0) * PEAK_DECAY);
           peakValues.push(gainToNormalized(smoothed[ch]));
-          rmsValues.push(gainToNormalized(rms[ch]));
+          rmsValues.push(gainToNormalized(data[workletChannels + ch]));
         }
-        const mirroredPeaks = peak.length < channelCount ? new Array(channelCount).fill(peakValues[0]) : peakValues;
-        const mirroredRms = peak.length < channelCount ? new Array(channelCount).fill(rmsValues[0]) : rmsValues;
+        const mirroredPeaks = workletChannels < channelCount ? new Array(channelCount).fill(peakValues[0]) : peakValues;
+        const mirroredRms = workletChannels < channelCount ? new Array(channelCount).fill(rmsValues[0]) : rmsValues;
         setLevels(mirroredPeaks);
         setRmsLevels(mirroredRms);
         setPeakLevels((prev) => mirroredPeaks.map((val, i) => Math.max(prev[i] ?? 0, val)));
       };
+      setMeterError(null);
     };
     setupMonitoring().catch((err) => {
       console.warn("[waveform-playlist] Failed to set up mic level monitoring:", String(err));
@@ -488,8 +532,9 @@ function useMicrophoneLevel(stream, options = {}) {
 }
 
 // src/hooks/useIntegratedRecording.ts
-import { useState as useState4, useCallback as useCallback4, useEffect as useEffect4, useRef as useRef3 } from "react";
+import { useState as useState4, useCallback as useCallback4, useEffect as useEffect4, useRef as useRef4 } from "react";
 import {
+  carveClipRange,
   resolveRecordingOffsetSamples
 } from "@waveform-playlist/core";
 import {
@@ -502,11 +547,13 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
   const [isMonitoring, setIsMonitoring] = useState4(false);
   const [selectedDevice, setSelectedDevice] = useState4(null);
   const [hookError, setHookError] = useState4(null);
-  const recordingStartTimeRef = useRef3(0);
-  const selectedTrackIdRef = useRef3(selectedTrackId);
+  const recordingStartTimeRef = useRef4(0);
+  const selectedTrackIdRef = useRef4(selectedTrackId);
   selectedTrackIdRef.current = selectedTrackId;
-  const currentTimeRef = useRef3(currentTime);
+  const currentTimeRef = useRef4(currentTime);
   currentTimeRef.current = currentTime;
+  const tracksRef = useRef4(tracks);
+  tracksRef.current = tracks;
   const { stream, devices, hasPermission, requestAccess, error: micError } = useMicrophoneAccess();
   const {
     level,
@@ -536,7 +583,7 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
       setHookError(
         new Error("Cannot start recording: no track selected. Select or create a track first.")
       );
-      return;
+      return false;
     }
     try {
       setHookError(null);
@@ -545,9 +592,10 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
         setIsMonitoring(true);
       }
       recordingStartTimeRef.current = currentTimeRef.current;
-      await startRec();
+      return await startRec();
     } catch (err) {
       setHookError(err instanceof Error ? err : new Error(String(err)));
+      return false;
     }
   }, [isMonitoring, startRec]);
   const stopRecording = useCallback4(async () => {
@@ -559,8 +607,9 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
       return;
     }
     const trackId = selectedTrackIdRef.current;
+    const currentTracks = tracksRef.current;
     if (buffer && trackId) {
-      const selectedTrackIndex = tracks.findIndex((t) => t.id === trackId);
+      const selectedTrackIndex = currentTracks.findIndex((t) => t.id === trackId);
       if (selectedTrackIndex === -1) {
         const err = new Error(
           `Recording completed but track "${trackId}" no longer exists. The recorded audio could not be saved.`
@@ -569,16 +618,7 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
         setHookError(err);
         return;
       }
-      const selectedTrack = tracks[selectedTrackIndex];
-      const recordStartTimeSamples = Math.floor(recordingStartTimeRef.current * buffer.sampleRate);
-      let lastClipEndSample = 0;
-      if (selectedTrack.clips.length > 0) {
-        const endSamples = selectedTrack.clips.map(
-          (clip) => clip.startSample + clip.durationSamples
-        );
-        lastClipEndSample = Math.max(...endSamples);
-      }
-      const startSample = Math.max(recordStartTimeSamples, lastClipEndSample);
+      const startSample = Math.floor(recordingStartTimeRef.current * buffer.sampleRate);
       const audioContext = getGlobalAudioContext();
       const outputLatency = audioContext.outputLatency ?? 0;
       const toneContext = getGlobalContext3();
@@ -608,18 +648,21 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
         gain: 1,
         name: `Recording ${(/* @__PURE__ */ new Date()).toLocaleTimeString()}`
       };
-      const newTracks = tracks.map((track, index) => {
+      const newTracks = currentTracks.map((track, index) => {
         if (index === selectedTrackIndex) {
           return {
             ...track,
-            clips: [...track.clips, newClip]
+            clips: [
+              ...carveClipRange(track.clips, startSample, startSample + effectiveDuration),
+              newClip
+            ]
           };
         }
         return track;
       });
       setTracks(newTracks);
     }
-  }, [tracks, setTracks, stopRec, latencyOffset]);
+  }, [setTracks, stopRec, latencyOffset]);
   useEffect4(() => {
     if (!hasPermission || devices.length === 0) return;
     if (selectedDevice === null) {
@@ -631,7 +674,13 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
       requestAccess(fallbackId, audioConstraints);
     }
   }, [hasPermission, devices, selectedDevice, resetPeak, requestAccess, audioConstraints]);
+  const isRecordingRef = useRef4(isRecording);
+  isRecordingRef.current = isRecording;
   const requestMicAccess = useCallback4(async () => {
+    if (isRecordingRef.current) {
+      setHookError(new Error("Cannot request microphone access while recording. Stop first."));
+      return;
+    }
     try {
       setHookError(null);
       await requestAccess(void 0, audioConstraints);
@@ -643,6 +692,10 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
   }, [requestAccess, audioConstraints]);
   const changeDevice = useCallback4(
     async (deviceId) => {
+      if (isRecordingRef.current) {
+        setHookError(new Error("Cannot switch microphone while recording. Stop first."));
+        return;
+      }
       try {
         setHookError(null);
         setSelectedDevice(deviceId);