@waveform-playlist/recording 12.2.0 → 13.0.1

package/dist/index.js

@@ -59,10 +59,16 @@ function useRecording(stream, options = {}) {
   const stopRecordingRef = (0, import_react.useRef)(null);
   const stopAckResolveRef = (0, import_react.useRef)(null);
   const isStoppingRef = (0, import_react.useRef)(false);
+  const stopPromiseRef = (0, import_react.useRef)(null);
+  const finishStopRecordingRef = (0, import_react.useRef)(null);
+  const isStartingRef = (0, import_react.useRef)(false);
+  const isUnmountedRef = (0, import_react.useRef)(false);
+  const durationRef = (0, import_react.useRef)(0);
   const startDurationLoop = (0, import_react.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);
       }
@@ -85,11 +91,12 @@ function useRecording(stream, options = {}) {
     }
   }, []);
   const startRecording = (0, import_react.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 = (0, import_playout.getGlobalContext)();
@@ -97,6 +104,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;
@@ -172,17 +180,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 = (0, import_react.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 = (0, import_react.useCallback)(async () => {
     try {
-      isStoppingRef.current = true;
       if (animationFrameRef.current !== null) {
         cancelAnimationFrame(animationFrameRef.current);
         animationFrameRef.current = null;
@@ -225,6 +245,8 @@ function useRecording(stream, options = {}) {
           }
         }
         node.disconnect();
+        workletNodeRef.current = null;
+        mediaStreamSourceRef.current = null;
       }
       const context = (0, import_playout.getGlobalContext)();
       const rawContext = context.rawContext;
@@ -237,6 +259,7 @@ function useRecording(stream, options = {}) {
       }
       const buffer = (0, import_core.createAudioBuffer)(rawContext, channelData, rawContext.sampleRate, numChannels);
       setAudioBuffer(buffer);
+      durationRef.current = buffer.duration;
       setDuration(buffer.duration);
       return buffer;
     } catch (err) {
@@ -253,8 +276,9 @@ function useRecording(stream, options = {}) {
     }
   }, [channelCount]);
   stopRecordingRef.current = stopRecording;
+  finishStopRecordingRef.current = finishStopRecording;
   const pauseRecording = (0, import_react.useCallback)(() => {
-    if (isRecording && !isPaused) {
+    if (isRecordingRef.current && !isPausedRef.current && !isStoppingRef.current) {
       workletNodeRef.current?.port.postMessage({ command: "pause" });
       if (animationFrameRef.current !== null) {
         cancelAnimationFrame(animationFrameRef.current);
@@ -263,18 +287,20 @@ function useRecording(stream, options = {}) {
       isPausedRef.current = true;
       setIsPaused(true);
     }
-  }, [isRecording, isPaused]);
+  }, []);
   const resumeRecording = (0, import_react.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]);
   (0, import_react.useEffect)(() => {
+    isUnmountedRef.current = false;
     return () => {
+      isUnmountedRef.current = true;
       if (audioTrackRef.current && onTrackEndedRef.current) {
         audioTrackRef.current.removeEventListener("ended", onTrackEndedRef.current);
       }
@@ -316,20 +342,19 @@ function useRecording(stream, options = {}) {
 
 // src/hooks/useMicrophoneAccess.ts
 var import_react2 = require("react");
+var import_core2 = require("@waveform-playlist/core");
 function useMicrophoneAccess() {
   const [stream, setStream] = (0, import_react2.useState)(null);
   const [devices, setDevices] = (0, import_react2.useState)([]);
   const [hasPermission, setHasPermission] = (0, import_react2.useState)(false);
   const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
   const [error, setError] = (0, import_react2.useState)(null);
+  const streamRef = (0, import_react2.useRef)(null);
+  const requestGenerationRef = (0, import_react2.useRef)(0);
+  const isUnmountedRef = (0, import_react2.useRef)(false);
   const enumerateDevices = (0, import_react2.useCallback)(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 (0, import_core2.enumerateMicrophones)();
       setDevices(audioInputs);
     } catch (err) {
       console.error("Failed to enumerate devices:", err);
@@ -338,11 +363,14 @@ function useMicrophoneAccess() {
   }, []);
   const requestAccess = (0, import_react2.useCallback)(
     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
@@ -361,36 +389,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 = (0, import_react2.useCallback)(() => {
-    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]);
+  }, []);
   (0, import_react2.useEffect)(() => {
+    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,
@@ -405,7 +447,7 @@ function useMicrophoneAccess() {
 // src/hooks/useMicrophoneLevel.ts
 var import_react3 = require("react");
 var import_playout2 = require("@waveform-playlist/playout");
-var import_core2 = require("@waveform-playlist/core");
+var import_core3 = require("@waveform-playlist/core");
 var import_worklets2 = require("@waveform-playlist/worklets");
 var PEAK_DECAY = 0.98;
 function useMicrophoneLevel(stream, options = {}) {
@@ -460,21 +502,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);
-          peakValues.push((0, import_core2.gainToNormalized)(smoothed[ch]));
-          rmsValues.push((0, import_core2.gainToNormalized)(rms[ch]));
+        for (let ch = 0; ch < workletChannels; ch++) {
+          smoothed[ch] = Math.max(data[ch], (smoothed[ch] ?? 0) * PEAK_DECAY);
+          peakValues.push((0, import_core3.gainToNormalized)(smoothed[ch]));
+          rmsValues.push((0, import_core3.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));
@@ -518,7 +562,7 @@ function useMicrophoneLevel(stream, options = {}) {
 
 // src/hooks/useIntegratedRecording.ts
 var import_react4 = require("react");
-var import_core3 = require("@waveform-playlist/core");
+var import_core4 = require("@waveform-playlist/core");
 var import_playout3 = require("@waveform-playlist/playout");
 function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}) {
   const { currentTime = 0, audioConstraints, latencyOffset, ...recordingOptions } = options;
@@ -530,6 +574,8 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
   selectedTrackIdRef.current = selectedTrackId;
   const currentTimeRef = (0, import_react4.useRef)(currentTime);
   currentTimeRef.current = currentTime;
+  const tracksRef = (0, import_react4.useRef)(tracks);
+  tracksRef.current = tracks;
   const { stream, devices, hasPermission, requestAccess, error: micError } = useMicrophoneAccess();
   const {
     level,
@@ -559,7 +605,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);
@@ -568,9 +614,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 = (0, import_react4.useCallback)(async () => {
@@ -582,8 +629,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.`
@@ -592,21 +640,12 @@ 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 = (0, import_playout3.getGlobalAudioContext)();
       const outputLatency = audioContext.outputLatency ?? 0;
       const toneContext = (0, import_playout3.getGlobalContext)();
       const lookAhead = toneContext.lookAhead ?? 0;
-      const latencyOffsetSamples = (0, import_core3.resolveRecordingOffsetSamples)({
+      const latencyOffsetSamples = (0, import_core4.resolveRecordingOffsetSamples)({
         overrideSeconds: latencyOffset,
         outputLatency,
         lookAhead,
@@ -631,18 +670,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: [
+              ...(0, import_core4.carveClipRange)(track.clips, startSample, startSample + effectiveDuration),
+              newClip
+            ]
           };
         }
         return track;
       });
       setTracks(newTracks);
     }
-  }, [tracks, setTracks, stopRec, latencyOffset]);
+  }, [setTracks, stopRec, latencyOffset]);
   (0, import_react4.useEffect)(() => {
     if (!hasPermission || devices.length === 0) return;
     if (selectedDevice === null) {
@@ -654,7 +696,13 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
       requestAccess(fallbackId, audioConstraints);
     }
   }, [hasPermission, devices, selectedDevice, resetPeak, requestAccess, audioConstraints]);
+  const isRecordingRef = (0, import_react4.useRef)(isRecording);
+  isRecordingRef.current = isRecording;
   const requestMicAccess = (0, import_react4.useCallback)(async () => {
+    if (isRecordingRef.current) {
+      setHookError(new Error("Cannot request microphone access while recording. Stop first."));
+      return;
+    }
     try {
       setHookError(null);
       await requestAccess(void 0, audioConstraints);
@@ -666,6 +714,10 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
   }, [requestAccess, audioConstraints]);
   const changeDevice = (0, import_react4.useCallback)(
     async (deviceId) => {
+      if (isRecordingRef.current) {
+        setHookError(new Error("Cannot switch microphone while recording. Stop first."));
+        return;
+      }
       try {
         setHookError(null);
         setSelectedDevice(deviceId);