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,