From c609f618b1ef811b058c0ab706690b539bb1795e Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Tue, 16 Jul 2024 15:47:28 +0200
Subject: [PATCH] fix: start audio recorder timer if already recording

---
 .../AudioRecorder/AudioRecordingInProgress.tsx            | 6 +++++-
 src/components/MessageInput/hooks/useTimeElapsed.ts       | 8 ++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.tsx b/src/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.tsx
index 6280db19bc..776b787441 100644
--- 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
index 930e6e4a39..9ff5a61e0e 100644
--- a/src/components/MessageInput/hooks/useTimeElapsed.ts
+++ b/src/components/MessageInput/hooks/useTimeElapsed.ts
@@ -10,6 +10,7 @@ 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);
@@ -17,17 +18,16 @@ export const useTimeElapsed = ({ startOnMount }: UseTimeElapsedParams = {}) => {
 
   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,