Skip to content

Instantly share code, notes, and snippets.

@Tushkiz
Created December 20, 2023 10:19
Show Gist options
  • Save Tushkiz/d22511468b519b73f95151903c8c0e32 to your computer and use it in GitHub Desktop.
Save Tushkiz/d22511468b519b73f95151903c8c0e32 to your computer and use it in GitHub Desktop.
dyte meeting timer
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>;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment