Logic behind progress bar updates

[sqram]

How does one update the progress bar?

Are we supposed to poll the API (ttps://api.spotify.com/v1/me/player/)

every X milliseconds and update the UI?

[Anent]

Not sure what SDK you are using. But on the Web Playback SDK, the player will update it's state whenever user interacts with it or the song changes. Then I created my own loop to just mimic the progress of the song if the song is playing - no need to poll. And it will update itself when the player state updates.

$: position = state.position;
onInterval(() => position += state.paused ? 0 : 300, 300);

 Above snippet is svelte, but the logic is:

• position updates to state.position when state.position changes.
• Every 300ms position is updated by 300 - aka. creating an progress bar.
• If the player is paused. No progress will be added.

Above state object is: WebPlaybackState Object 

[sqram]

So what i'm doing right now is, after API call to play the song is made, I start a setInterval to update the progress bar every 100ms. 

But setInterval isn't exactly reliable in since JS is single-threaded. Was wondering if there's a more accurate, fail-safe way 🙂

Looks like this is the way to go. thank you!

[marklegosz]

I do a bit of both. I guess where the progress should be based on an interval, then periodically get the actual progress and update. About every 5 seconds currently but looking to tune the interval logic to consider actual start time and current time, things like that 

[Anent · Accepted solution]

Just to clarify, on my snippet in my 1st message. The `state.position` is derived from: event-player-state-changed 

That event is fired when the song changes, play/pause, or at random intervals.
When that event fires, it will update / correct the position. And simultaneously the timer will add progress to it.

I have had that running for a quite a while, and can't really get it out-of-sync. 

[sqram]

Ooohhh yes. this helped tremendously. thanks for clarifying that!