fix(segments): should be stable once isFinalized (#5)

* fix(segments): should be stable once `isFinalized`

Previously the segments could receive one final update after `isFinalized` became `true` - this could cause consumer effects that read segments to run twice, even if guarded with `isFinalized` to run twice.

This PR fixes this behavior, such that with a guard such a consumer effect would run only once.

* chore(version): bump version

Author: bengreenier

packages/react-user-media/package.json

@@ -17,7 +17,7 @@
     "name": "bengreenier",
     "url": "https://github.com/bengreenier"
   },
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "licenses": [
     {

packages/react-user-media/src/hooks/use-media-recorder.ts

@@ -180,15 +180,16 @@ export function useMediaRecorder(): RecorderState {
   const error = useMediaRecorderError(recorder);
   const isError = useMemo(() => error !== null, [error]);
 
+  const [startTime, setStartTime] = useState<DOMHighResTimeStamp | null>(null);
+  const [endTime, setEndTime] = useState<DOMHighResTimeStamp | null>(null);
+
   const [segments, setSegments] = useState<Blob[]>([]);
   const isFinalized = useMemo(
-    () => segments.length > 0 && recorderState === "inactive",
-    [segments, recorderState],
+    () =>
+      segments.length > 0 && recorderState === "inactive" && endTime !== null,
+    [segments, recorderState, endTime],
   );
 
-  const [startTime, setStartTime] = useState<DOMHighResTimeStamp | null>(null);
-  const [endTime, setEndTime] = useState<DOMHighResTimeStamp | null>(null);
-
   const startRecording = useCallback(function startRecordingMedia(
     media: MediaStream,
     options?: RecorderOptions,
@@ -211,6 +212,7 @@ export function useMediaRecorder(): RecorderState {
     });
 
     setSegments([]);
+    setEndTime(null);
 
     const startTime = performance.now();
     recorder.start(timeslice);
@@ -224,9 +226,15 @@ export function useMediaRecorder(): RecorderState {
   const stopRecording = useCallback(function stopRecordingMedia() {
     const endTime = performance.now();
 
-    recorderRef.current?.stop();
+    recorderRef.current?.addEventListener(
+      "stop",
+      function onStopCompleted() {
+        setEndTime(endTime);
+      },
+      { once: true },
+    );
 
-    setEndTime(endTime);
+    recorderRef.current?.stop();
   }, []);
 
   const state = {