Why can I not pass an album uri and offset to SpotifyWebPlayer component?

[ZacharySal]

Whenever I pass in a new Album URI to the Spotify Web Player component (as a string) and an offset
<SpotifyWebPlayer callback={(state) => playerCallback(state)} token={userAccessToken?.access_token} uris={currentTrack?.contextUri} offset={currentTrack?.offset} hideAttribution={true} play={playSong} syncExternalDevice={true} />

it makes a Spotify api play request, however, the body of the request is
{ offset: {position: 5}, uris:[albumURI] }
and the api returns an error with status 400 and message ""position" out of range" and the player does not change tracks

after refreshing the page, the web player correctly makes the request by including the context URI in the body
{ offset: {position: 5}, context_uri: albumURI }
this request is successful and the track begins to play

I could just pass in the track URI instead of the album URI, but I want to be able to skip forward and backward between the album by changing the offset. Any idea why this is happening?

Thank you by the way for creating and sharing this player!

[gilbarbara]

Hey @ZacharySal

Could you give me more information about when and how this happened?
Was it already playing something, and you changed the props to an album with position, or did this happen on mount?
Is there anything that could help with debugging?

[ZacharySal]

Sorry, to clarify, the error occurs when a song on an album is already playing and I try to pick a different song on that album at a different position. The uri I am passing through to the player component does not change, only the offset does.

[ZacharySal]

Also, I am having an issue with controlling the player's status via the play prop in the player component. I am using a global state to manage the current track and wether the song should be playing or not, based on user input. If the user navigates to an album and clicks play on the album, the global state is updated and then passed to your player component. The user can then control the play status with the play/pause through icons that are separate from the player component and it works. However, if the user pauses the play status via the player component, the player then disregards future updates to the play prop, which prevents the user from controlling playback outside of the player component.

[ZacharySal]

I have created a new issue for this if you have the time to look at it, thank you.

[gilbarbara]

Awesome, thank you!