const [time, setTime] = useState(60000);
const [active, setActive] = useState(false);
const [paused, setPaused] = useState(true);
const toast = useToast();
const audioClips = [
{
sound: "https://soundbible.com/mp3/Fire_pager-jason-1283464858.mp3",
label: "Fire Pager",
},
];
useEffect(() => {
let interval: string | number | NodeJS.Timer | undefined;
if (active && paused === false) {
interval = setTimeout(() => {
setTime((time) => time - 10);
}, 7.5555);
}
if (time < 0) {
clearInterval(interval);
setTime(60000);
setActive(!active);
setPaused(!paused);
}
switch (time) {
case 1799990:
toast({
title: "Faltam 30 Minutos",
status: "success",
duration: 2000,
});
playAudio();
break;
case 1199990:
toast({
title: "Faltam 20 Minutos",
status: "success",
duration: 2000,
});
playAudio();
break;
case 599990:
toast({
title: "Faltam 10 Minutos",
status: "success",
duration: 2000,
});
playAudio();
break;
case 299990:
toast({
title: "Faltam 5 Minutos",
status: "success",
duration: 2000,
});
playAudio();
break;
case 119990:
toast({
title: "Faltam 2 minutos",
status: "success",
duration: 2000,
});
playAudio();
break;
case 10:
toast({
title: "Acabou o tempo",
status: "success",
duration: 2000,
});
playAudio();
break;
default:
break;
}
return () => {
clearInterval(interval);
};
}, [active, paused, time, toast]);
To see the full code is right here: https://github.com/TecJP/stopwatch
When I press in the start button, and compare with a timer in my phone, the timer in phone starts run a little bit faster compared with the timer running in the navigator.
Sorry for my english, I'm a brazillian and trying to improve it. Anyone can help me?