Feature request: customizable ontimeupdate frequency

[gonzaloarca]

Trying out the new ontimeupdate callback feature, which is great. However, since it fires so quickly, it ends up leading to excessive amounts of re-renders in React when calling state setters from the callback. I was able to verify this by setting 3 different functions to the ontimeupdate callback:

1. (...) => {}
2. (...) => setState(...)
3. (...) => console.log(...)

Function 2 is the only one that causes the entire UI to act very choppy and laggy, and the other ones do not cause any performance issues. Being able to set a custom value for the callback frequency would definitely help anyone who experiences poor performance from using the ontimeupdate feature.

Thank you!

[regosen]

Why not use debounce on the client side? Something like:

import debounce from 'lodash/debounce';
...
[trackPosition, setTrackPosition] = React.useState(0);
const debouncedPositionUpdate = debounce((trackPos) => setTrackPosition(trackPos), CALLBACK_FREQUENCY);
// const debouncedPositionUpdate = debounce(setTrackPosition, CALLBACK_FREQUENCY); might work too
gaplessPlayer.ontimeupdate = (position, _trackIndex) => debouncedPositionUpdate(position);

Doesn't have to be the lodash version, but you get the idea.

[gonzaloarca]

Interesting. However, if you debounce it to, for example 200 ms, and let's say that the function is called every 27 ms, then debouncing it means it will not run until 200 ms take place between the function calls. That will never happen since it is called every 27 ms. The only way to get that gap is if you pause the player.

[gonzaloarca]

I think lodash's throttle might be the right tool for the solution you proposed. Good idea, I think this might just do the trick. Thanks!