alittle confused about initialRemainingTime vs remainingTime

[loshya]

i noticed an issue that the timer only starts when the window is focused so i tried to overcome this by using a date object from when the component was mounted vs the current time (which essentially would give me the true elapsed time. but the component always seems to rely on the remainingtime even when i try to change the key

any idea how to resolve this ?

[loshya]

quick example to maybe clear any confusion , i get sent something from the server at time x , i focus on the window ten seconds later
so i want that to be reflected on the duration of the timer ( so if for example i had the duration set to 60 seconds but i open the tab ten seconds later i want it to display 50 seconds or 10 seconds have passed from the timer)

[vydimitrov]

In this case the initialRemainingTime should be 50, duration should be 60

[vydimitrov]

Hey @loshya, can you provide a small demo where you reproduce the issue so I can take a look at it? Just by reading your comment I am not able to tell you what the problem is.

Otherwise, your approach seems correct, when the component is mounted, you check how much time elapsed, then from the total time you remove the elapsed time and feed that to the component as initialRemainingTime (with a new key in case the component was mounted before). 

[vydimitrov]

In my example, I do not change the key so that will not reset the time. Can you record a video and posted here. I am not sure what I am looking in the image you sent to me.

[loshya]

here i refresh the tab and go into another tab before it loads and wait around 10 seconds before reponening the app window
you can see in the console that the log from remainingTime and the function is different

https://imgur.com/a/6GjIG9I

[vydimitrov]

I see what you mean .... so what happens here is that when you init the app you init the Timer with some duration and initialRemaingTime. If you navigate away and you come back to the tab the timer will continue using the old values. By design the duration and initialRemaingTime can not be just changed. Read more about it here.

What you need is a listener for when the tab becomes active again to update the key prop of the Timer, which will reset the duration and initialRemaingTime . One way of doing it is like this

 // Active
 window.addEventListener('focus', //change the `key` of the Timer);

 // Inactive
 window.addEventListener('blur', stopTimer);

[vydimitrov]

You can use this one as well to pause and play the timer - https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event

[vydimitrov]

Here is a working demo where you pause the timer when the tab is not focused - https://codesandbox.io/s/gifted-murdock-ly719?file=/src/index.js

Does this help?

[ghost]

I have this same issue. Countdown starts only when tab is active. It should start tho even if I am not in the tab right now.. Anyone has a fix for this?