Device on fresh load.

[ClaudioPuggioni]

Hello, thank you for the library and your time in advance.

I have a couple of issues using it to my preference.

1. If I have my Spotify desktop player open on webApp fresh load (not defaulted with default device prop), the webplayer on the webApp defaults to the webplayer and not the desktop player of course. If I press play, it'll throw an error about not having a list to play: "Cannot perform operation; no list was loaded."
   
   

Additionally, the devices icon on the webplayer disappears when this error occurs!

To make it work, before anything after login, I have to click on the devices icon and select my Desktop Spotify app. However, I would like to skip this step by just feeding the player my "active" device on load. I tried doing this using the state update callback, but it looks like even though I change the player in the state, it doesn't actually change the device played by the webplayer in the webApp. Currently, I will probably have to make a call to Spotify to change it on load.

I tried using the syncExternalDevice but I believe I'm misunderstanding what this does because it doesn't do what I thought it would, which is defaulting to the active device.

2. Another thing I thought would be happening that isn't, which I believe can improve this library:
   When I have both webplayer on the webApp and desktop player synced and playing, and I change the position of the track on the desktop player, the state callback doesn't trigger after the webApp webplayer resyncs on its interval. I would really appreciate if this triggered the state callback.

[ClaudioPuggioni]

I tried disabling the play button with play={false} in the player props, but it's still attempting to play when I press the play button so it still throws the "Cannot perform operation; no list was loaded" error.

[ClaudioPuggioni]

Also, is it possible to feed the player a position in the track to play from?

[ClaudioPuggioni]

There's a seek option in the Spotify Web Playback API. Is this available for this library?

https://developer.spotify.com/documentation/web-playback-sdk/reference/#api-spotify-player-seek

[gilbarbara]

It's not possible to seek tracks programmatically.

[gilbarbara]

Hey @ClaudioPuggioni

If I have my Spotify desktop player open on webApp fresh load (not defaulted with default device prop), the webplayer on the webApp defaults to the webplayer and not the desktop player of course. If I press play, it'll throw an error about not having a list to play: "Cannot perform operation; no list was loaded."

Are you setting the uris prop? That's probably why you are getting the no list was loaded error.
Can you post a codesandbox or similar with a minimal reproducible example?

Another thing I thought would be happening that isn't, which I believe can improve this library:
When I have both webplayer on the webApp and desktop player synced and playing, and I change the position of the track on the desktop player, the state callback doesn't trigger after the webApp webplayer resyncs on its interval. I would really appreciate if this triggered the state callback.

The callback is to "Get status updates from the player" triggered by actions of the player UI, but when you use an external device, it controls the SpotifyWebPlayback SDK instead.

[ClaudioPuggioni]

Hey @gilbarbara,
Thank you for your thoughtful response.

Are you setting the uris prop? That's probably why you are getting the no list was loaded error.
Can you post a codesandbox or similar with a minimal reproducible example?

1. The error was exactly from what you said, a missing valid uri input. I had to set a default one to prevent the error. Could you make it possible to disable the play on click button if the uri is missing?

2. I noticed that the menu for the devices was selecting the device for a future call to the Spotify Web Api to play the uri from the device we selected. Your repo makes this call:

export async function setDevice(token: string, deviceId: string, shouldPlay?: boolean | undefined) {
return fetch(https://api.spotify.com/v1/me/player, {
body: JSON.stringify({ device_ids: [deviceId], play: shouldPlay }),
headers: {
Authorization: Bearer ${token},
'Content-Type': 'application/json',
},
method: 'PUT',
});
}

I originally thought that there was a device prop for the <SpotifyPlayer/> that set the device manually but I must have imagined it. Is it possible for you to add this feature? This way, people could set the default device on load rather than selecting it manually from the player.

An example use case would be if a user has his favorite device saved in a database, the player can load that device in React on user login whether they log into the app on their phone, mac, pc, etc..