Remove recording indicator when recorder is stopped

ohcnetwork · Apr 16, 2024 · 7041e63 · 7041e63
1 parent 6500fc6
commit 7041e63
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/src/Utils/useRecorder.js b/src/Utils/useRecorder.js
@@ -7,6 +7,12 @@ const useRecorder = (handleMicPermission) => {
   const [recorder, setRecorder] = useState(null);
   const [newBlob, setNewBlob] = useState(null);
 
+  useEffect(() => {
+    if (!isRecording && recorder && audioURL) {
+      setRecorder(null);
+    }
+  }, [isRecording, recorder, audioURL]);
+
   useEffect(() => {
     // Lazily obtain recorder first time we're recording.
     if (recorder === null) {
@@ -32,6 +38,7 @@ const useRecorder = (handleMicPermission) => {
     if (isRecording) {
       recorder.start();
     } else {
+      recorder.stream.getTracks().forEach((i) => i.stop());
       recorder.stop();
     }
 

diff --git a/src/Utils/useSegmentedRecorder.ts b/src/Utils/useSegmentedRecorder.ts
@@ -2,7 +2,6 @@ import { useState, useEffect } from "react";
 import * as Notify from "./Notifications";
 
 const useSegmentedRecording = () => {
-  const [audioURL, setAudioURL] = useState("");
   const [isRecording, setIsRecording] = useState(false);
   const [recorder, setRecorder] = useState<MediaRecorder | null>(null);
   const [audioBlobs, setAudioBlobs] = useState<Blob[]>([]);
@@ -11,6 +10,12 @@ const useSegmentedRecording = () => {
   const bufferInterval = 1 * 1000;
   const splitSizeLimit = 20 * 1000000; // 20MB
 
+  useEffect(() => {
+    if (!isRecording && recorder && audioBlobs.length > 0) {
+      setRecorder(null);
+    }
+  }, [isRecording, recorder, audioBlobs]);
+
   useEffect(() => {
     if (recorder === null) {
       if (isRecording || restart) {
@@ -37,6 +42,9 @@ const useSegmentedRecording = () => {
     } else {
       if (restart) {
         setIsRecording(true);
+      } else {
+        recorder?.stream?.getTracks()?.forEach((i) => i?.stop());
+        recorder.stop();
       }
       recorder.state === "recording" && recorder.stop();
     }
@@ -96,12 +104,10 @@ const useSegmentedRecording = () => {
   };
 
   const resetRecording = () => {
-    setAudioURL("");
     setAudioBlobs([]);
   };
 
   return {
-    audioURL,
     isRecording,
     startRecording,
     stopRecording,