From 836917e3b231f3c1f30a98004bce367d37cf4a63 Mon Sep 17 00:00:00 2001
From: MartinCupela <32706194+MartinCupela@users.noreply.github.com>
Date: Mon, 22 Jul 2024 10:05:58 +0200
Subject: [PATCH] fix: start audio recorder timer if already recording (#2453)

---
 .../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 6280db19b..776b78744 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 930e6e4a3..9ff5a61e0 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,