fix: start audio recorder timer if already recording (#2453)

GetStream · Jul 22, 2024 · 836917e · 836917e
1 parent 6033466
commit 836917e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.tsx b/src/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.tsx
@@ -52,8 +52,12 @@ export const AudioRecordingInProgress = () => {
 
   useEffect(() => {
     if (!recorder?.mediaRecorder) return;
-
     const { mediaRecorder } = recorder;
+
+    if (mediaRecorder.state === 'recording') {
+      startCounter();
+    }
+
     mediaRecorder.addEventListener('start', startCounter);
     mediaRecorder.addEventListener('resume', startCounter);
     mediaRecorder.addEventListener('stop', stopCounter);

diff --git a/src/components/MessageInput/hooks/useTimeElapsed.ts b/src/components/MessageInput/hooks/useTimeElapsed.ts
@@ -10,24 +10,24 @@ export const useTimeElapsed = ({ startOnMount }: UseTimeElapsedParams = {}) => {
   const updateInterval = useRef<ReturnType<typeof setInterval>>();
 
   const startCounter = useCallback(() => {
+    if (updateInterval.current) return;
     updateInterval.current = setInterval(() => {
       setSecondsElapsed((prev) => prev + 1);
     }, 1000);
   }, []);
 
   const stopCounter = useCallback(() => {
     clearInterval(updateInterval.current);
+    updateInterval.current = undefined;
   }, []);
 
   useEffect(() => {
     if (!startOnMount) return;
-    updateInterval.current = setInterval(() => {
-      setSecondsElapsed((prev) => prev + 1);
-    }, 1000);
+    startCounter();
     return () => {
       stopCounter();
     };
-  }, [startOnMount, stopCounter]);
+  }, [startCounter, startOnMount, stopCounter]);
 
   return {
     secondsElapsed,