fix(MediaRecorder): stop the recording timer when the preview unmounts

src/components/MediaRecorder/AudioRecorder/hooks/__tests__/useTimeElapsed.test.ts

@@ -0,0 +1,44 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useTimeElapsed } from '../useTimeElapsed';
+
+describe('useTimeElapsed', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('counts one second per second after startCounter() until stopCounter()', () => {
+    const { result } = renderHook(() => useTimeElapsed());
+
+    act(() => result.current.startCounter());
+    act(() => vi.advanceTimersByTime(3000));
+    expect(result.current.secondsElapsed).toBe(3);
+
+    act(() => result.current.stopCounter());
+    act(() => vi.advanceTimersByTime(3000));
+    expect(result.current.secondsElapsed).toBe(3);
+  });
+
+  it('stops counting on unmount when started with startOnMount', () => {
+    const { unmount } = renderHook(() => useTimeElapsed({ startOnMount: true }));
+    expect(vi.getTimerCount()).toBe(1);
+
+    unmount();
+
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it('stops counting on unmount when started with startCounter()', () => {
+    const { result, unmount } = renderHook(() => useTimeElapsed());
+    act(() => result.current.startCounter());
+    expect(vi.getTimerCount()).toBe(1);
+
+    unmount();
+
+    expect(vi.getTimerCount()).toBe(0);
+  });
+});

src/components/MediaRecorder/AudioRecorder/hooks/useTimeElapsed.ts

@@ -38,6 +38,9 @@ export const useTimeElapsed = ({
     };
   }, [startCounter, startOnMount, stopCounter]);
 
+  // The counter can also be started through startCounter(), so stop it on unmount too
+  useEffect(() => stopCounter, [stopCounter]);
+
   return {
     secondsElapsed,
     startCounter,