Index in Playlist URLs is being ignored

[TheManFromEarth1]

Set e.g. this URL with index=8: https://www.youtube.com/watch?v=tvTRZJ-4EyI&list=PLlrk7Psha6E9SAfeFJTJHkVJjoax4MRpt&index=8

In the browser, "Kendrick Lamar - HUMBLE." opens as a video. In react-player, it always loads the first video of the playlist with index 1.

Something else I notice:

1. If I set light={true}, the cover-image is correct before you click play.

Using: NextJS v10.0.4, React v17, react-player 2.9.0

[TheManFromEarth1]

Workaround if you don't have a lot of videos:

Set the index additionally under config

config={{
                youtube: {
                  playerVars: { index: 8 }
 }}}

// Edit: I tried to use the workaround by setting the index as a state, same as I do for the VideoURL which works.

But for state, reactplayer seems to ignore the state value updates, only the first initially loaded state is loaded correct.

This is the current config:

 <ReactPlayer 
              url={randomVideo.URL} // This value from state updates fine 
              pip={true}
              stopOnUnmount={false}
              onEnded={endAlert}
              config={{
                youtube: {
                  playerVars: { index: currentYTIndex } // This state is ignored
              }}}
 />

This is the function which runs onClick to get a new random video & update current index from URL.

 function RandomizeVideo() {
      // New Random Index for Object
      RandomYTURL = YouTubeURLs[Math.floor(Math.random() * YouTubeURLs.length)];

      // Check if current randomVideo has an Index
      let n = RandomYTURL.URL.includes("&index=");

      if (n) {
        // grab index (temporary, needs update as Index can be more chars than one)
        let NewIndex = RandomYTURL.URL.slice(-1); 

        //Update State with new Index 
        setYTIndex(NewIndex)
      }
      
      // Update Video, works fine
      setRandomVideo(RandomYTURL)     
    }

[cookpete]

ReactPlayer wasn't really built to support playlists. It’s a nice feature because it was easy to add, but is not fully supported.

Updating the index in config won’t work because playerVars is only used when instantiating the player. Changing playerVars after the player is loaded will do nothing. Further to this, the config is memoized and only updates when the url changes (see https://github.com/cookpete/react-player/issues/1162#issuecomment-775503444)

You are better off using the getInternalPlayer() instance method to get the Youtube Player instance, then calling playVideoAt() as detailed here: https://developers.google.com/youtube/iframe_api_reference#playing-a-video-in-a-playlist

[gyurkoz]

For whos need a quick solution without code change, downgrading React Player to ^2.7.2 can solves this issue.

[walidvb]

adding a reference to #1183 . As mentioned there, maybe a solution would be to expose reinitializing the player?

[spereira2017]

Is possible to remove list param from URL to play desired video.

Example:

const newUrl = new URL(item.resource_url); const urlSearchObj = new URLSearchParams(newUrl.search); urlSearchObj.delete('list');

const url = ${newUrl.origin}${newUrl.pathname}?${urlSearchObj.toString()};