dyte meeting timer

MeetingTimer.tsx

import { useDyteSelector } from '@dytesdk/react-web-core';
import { useEffect, useRef, useState } from 'react';

const addZero = (n: number) => Math.trunc(n).toString().padStart(2, '0');

export default function MeetingTimer() {
	const [time, setTime] = useState('');
	const timerId = useRef<number>();
	const timestamp = useDyteSelector((meeting) => meeting.meta.meetingStartedTimestamp);

	useEffect(() => {
		const calc = () => {
			if (!timestamp) return;
			const diff = (Date.now() - new Date(timestamp).getTime()) / 1000;
			let time = '';
			if (diff >= 3600) {
				time = `${addZero(diff / 3600)}:`;
			}
			time += `${addZero((diff % 3600) / 60)}:${addZero(diff % 60)}`;
			setTime(time);

			timerId.current = setTimeout(calc, 500);
		};
		calc();
		return () => {
			clearTimeout(timerId.current);
		};
	}, [timestamp]);

	return <time>{time}</time>;
}