I am trying to integrate Spotify tracks in my Mobile App, I am using Spotify SDK to fetch list of liked tracks from user. In the API response, I only get track preview link that actually is the track preview media file.
In order to play the song I have to use Spotify SDK react-native-spotify-remote for react Native to pass the track_id and play the song but every time when I login and play the song it invokes the Spotify App again for new token even though the previous token is still valid and when I move to the next song it repeat this process again and doesn't even play the next song and still plays the old song.
Another problem that I am facing is that I have to close the app and the Spotify in the background then open the app and hit play it will authenticate again with Spotify even last token is not expired, and the second time when we hit the play button with the changed "spotify:track:6IA8E2Q5ttcpbuahIejO74" uri it does not play that track, actually nothing happens.
Spotify SDK Sample Code for Player
const connectToSpotify = async () => {
try {
const session = await SpotifyAuth.authorize(spotifyConfig);
if (session) setToken(session.accessToken);
} catch (err) {
console.log(err);
}
};
async function playEpicSong(track_id) {
try {
await SpotifyRemote.connect(token);
await SpotifyRemote.playUri(track_id);
await SpotifyRemote.seek(58000);
} catch (err) {
console.log(err);
}
}
Spotify Configuration
const spotifyConfig: ApiConfig = {
clientID: "xxxxxxxxxxx",
redirectURL: "mySpotify://callback",
scopes: [
ApiScope.AppRemoteControlScope,
ApiScope.UserFollowReadScope,
ApiScope.PlaylistReadPrivateScope,
ApiScope.UserReadPlaybackStateScope,
ApiScope.UserReadPrivateScope,
ApiScope.UserReadEmailScope,
],
};
Actionable button on song selection
<Pressable onPress={() => {
playEpicSong(`${item.track_id}`);
navigation.navigate('player');
}}>
<Text>Play Song</Text>
</Pressable>