Timer starts when tab is focused about react-countdown-circle-timer HOT 4 CLOSED

Yup, you are right, when the the tab is not focused the browser will give a very low priority to requestAnimationFrame and it may run less offen or may not run at all.

There is a way you can implment it but that should go outside of the component since will require a bit of logic, which may be needed in a few cases. Here is how I see it.

• Add visibilitychange event listener so you can track whether the tab has focuse or it is blured.

document.addEventListener('visibilitychange', function(ev) {
  console.log(`Tab state : ${document.visibilityState}`);
});

• When you reciece a new duration and If the tab is not focused and you store that duration, lets say const newDuration = 100 and current time const durationChangedTime = 1523289 in unix timestamnp so it is seconds.
• In the event listener above when the visibilityState changes to visible and you have stored newDuration then you take again the current time, like const tabFocuedTime = 1523320
• now you know how much time passed since the duration changed and the tab became visible, const diff = durationChangedTime - tabFocuedTime, in this case it would be 31 seconds.
• You render a new instance of the Timer by passsíng the following props:

<CountdownCircleTimer
    isPlaying
    key={someNewKey} // to render a new instance of the timer
    duration={newDuration} // 100
    initialRemainingTime={newDuration - diff} // 100 - 31 = 69 -> timer will start from 69 
  />

Hope this helps you :) Let me know if something is not clear :)

from react-countdown-circle-timer.

I came up with an idea :) I leave here if someone is with the same case: storing a timestamp then the duration changes and subtract it to the timestamp when requestAnimationFrame runs (in some browsers is immediately and in others, like Chrome, is when the user focus the tab), and then storing the displayedDuration and work with it as the duration.

it's not a very clean solution, but it's better to use setInterval. I think it's a strange case but if someone needs the same I can work on a PR.

const [displayedDuration, setDisplayedDuration] = useState()

useEffect(() => {
  const loadedTime = Date.now()

  requestAnimationFrame(() => {
    const deltaTime = (Date.now() - loadedTime) / 1000

    return setDisplayedDuration(duration - deltaTime)
  })
}, [duration])

from react-countdown-circle-timer.

Closing this one, let me know if you need any help working with the component :)

from react-countdown-circle-timer.

I need help with this. https://stackoverflow.com/questions/74603468/countdown-circle-animation-starts-only-when-tab-is-active

from react-countdown-circle-timer.