apps/web/src/voiceover/use-recording-elapsed.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import { useEffect, useState } from "react";
import { useVoiceOverStore } from "@/voiceover/voiceover-store";

const ELAPSED_TICK_MS = 250;

/**
 * Elapsed seconds of the active voice-over recording, ticking while recording.
 * Returns 0 when idle.
 */
export function useRecordingElapsedSeconds(): number {
	const status = useVoiceOverStore((state) => state.status);
	const startedAtMs = useVoiceOverStore((state) => state.startedAtMs);
	const [elapsedSeconds, setElapsedSeconds] = useState(0);

	useEffect(() => {
		if (status !== "recording" || startedAtMs === null) {
			return;
		}
		const interval = setInterval(() => {
			setElapsedSeconds((Date.now() - startedAtMs) / 1000);
		}, ELAPSED_TICK_MS);
		return () => clearInterval(interval);
	}, [status, startedAtMs]);

	return status === "recording" ? elapsedSeconds : 0;
}