Preload keep playing the first track that was played with it

In the demo/App.js file I created a playlist with urls from the different providers. 2 from youtube, 2 from soundcloud and 2 from vimeo. Like this:

const LINKS = [
  'https://www.youtube.com/watch?v=oUFJJNQGwhk'
 ,'https://www.youtube.com/watch?v=jNgP6d9HraI'
 ,'https://soundcloud.com/miami-nights-1984/accelerated'
 ,'https://soundcloud.com/tycho/tycho-awake'
 ,'https://vimeo.com/90509568'
 ,'https://vimeo.com/169599296'
]

Along with buttons to switch to the next or previous url.

The 2 first videos play fine. But as soon as it switch to the third one, the provider change and the youtube preload plays the first video in the background. Without any control possible over it.

If I check into the React tree ai can see that the silent video url is a prop of the preload player. But if I check the element tree directly, the youtube iframe points to the first video of the playlist.

I tried to debug this but could not track down the problem.

I pushed my code to my fork github repo if you have time to check it:

https://github.com/SkinyMonkey/react-player/tree/bug-playlist-problem

[cookpete]

After some more investigation I think I know the problem.

The order of the players in this array seems to be causing the problem. It seems to only happen when the player is switched with another player in the array of players. The array is keyed using the displayName of each player (so components aren’t unmounted/remounted) but it still seems to affect the YT iframe.

The YouTube iframe does not do the weird reload error if another player is simply prepending to the array (like if you are preloading YT, SC and Vimeo and then load a Vidme URL). It only happens when you switch from a youtube URL (whilst preloading SC and Vimeo) to a SC or Vimeo URL.

Probably easier with an example:

// Simplified player array, `-p` means preloading

// Load youtube URL, preload SC and Vimeo:
['yt', 'sc-p', 'vim-p']

// Then load SC URL
['sc', 'yt-p', 'vim-p'] // yt and sc switch, yt breaks

But it works when you prepend to the array:

// Load youtube URL, preload SC and Vimeo:
['yt', 'sc-p', 'vim-p']

// Then load vidme URL
['vid', 'yt-p', 'sc-p', 'vim-p'] // Nothing switches, yt works

A possible fix: sort the player array by key so it is never shuffled (weird but it seems to work)

// Load youtube URL, preload SC and Vimeo:
['yt', 'sc-p', 'vim-p']

// Then load SC URL (but keep the order)
['yt-p', 'sc', 'vim-p'] // Nothing switches, yt works

See https://github.com/CookPete/react-player/commit/c769a7a967f1de83f765b382b8ba3363a6e690f4 from the fix-preload-bug branch for an example of a possible fix. If it works I’m happy to use it and update the logic but I would love to know why this is happening.

Probably related to this:

<iframe>s reload whenever they are reattached to the DOM. So it might not be reasonable to expect this to work. Consider two frames that need to trade places. One has to get removed from the DOM and reattached, no matter what you do. Hoping to get away with lucky re-renderings is a recipe for fragile code.

From https://github.com/facebook/react/issues/858#issuecomment-32001084

[cookpete]

See if you get any errors with react-player@1.0.0-beta.4

Note that I have (stupidly) just unpublished 1.0.0-beta.4 to try and correct a tagging problem. I have emailed support to try and republish it. I will publish a 1.0.0-beta.5 at some point soon anyway. But it’s good to know that this fixes the problem.