Recently played - duplicate tracks (breaks webplayer)

[jeadys]

When passing the track uri to the player how would I handle duplicates that appear in the recently played tracks api request?
Currently it won't play any song when duplicates appear.

this is how i currently set the offset:

offset={trackQueue.indexOf(offset)}

offset is the trackuri.
I tried just passing the index number directly, like so offset={index} but that wouldn't work

[gilbarbara]

Hey @jeadys

Can you post a minimal reproducible example?
What is the trackQueue?
Are you setting a single track in the uris props? If so, the only possible offset is 0
If the trackQueue is an array of tracks, you can filter the duplicates before passing it to uris

I'm not sure I understand what you mean by Currently it won't play any song when duplicates appear.

[jeadys]

In this case the offset is a single track uri. I use this to find the index within trackqueue. trackqueue itself has above 10 tracks. The problem is when the trackqueue has duplicates it won't play the duplicates, which makes sense because it wont know which track uri to target out of the duplicates. I don't want to filter out the duplicates because I do want to play them if they appear in the trackqueue of recently played tracks. also directly using the index number for the offset instead of indexing trackqueue based on uri doesn't work either. I get a 502 bad gateway error.

This issue only occurs when the first song i click on to play is a duplicate. When the first song is a NON duplicate everything works fine and i can even navigate (prev/next) with the player over the duplicates and they play.

Version 0.13.4

'use client'

import { useSession } from 'next-auth/react'
import SpotifyPlayer from 'react-spotify-web-playback'

import { usePlaybackStore } from 'store/usePlayback'

export default function TrackPlayer() {
  const { data: session } = useSession()
  const offset: string = usePlaybackStore((state) => state.offset)
  const trackQueue: string[] = usePlaybackStore((state) => state.queue)

  if (!session?.accessToken) return null

  return (
    <SpotifyPlayer
      magnifySliderOnHover={false}
      callback={(state) => {
        usePlaybackStore.setState({ offset: state.track.uri })
      }}
      token={session.accessToken}
      uris={trackQueue}
      offset={trackQueue.indexOf(offset)}
      layout="responsive"
      persistDeviceSelection={true}
      syncExternalDevice={true}
      hideAttribution
      styles={{
        activeColor: '#fff',
        bgColor: '#191a20',
        color: '#fff',
        loaderColor: '#fff',
        sliderHeight: 8,
        sliderColor: '#93c5fd',
        sliderTrackColor: '#c7d5ed',
        sliderHandleColor: '#fff',
        trackArtistColor: '#ccc',
        trackNameColor: '#fff',
      }}
    />
  )
}

[gilbarbara]

Hey @jeadys

I see. This library is just a UI for the Web Playback SDK and relies on Spotify's API to control the playback.
If the API call gives you errors, there's nothing the library can do about it.
Good luck