Support array of youtube urls

Fixes cookpete/react-player#906

README.md

@@ -270,6 +270,17 @@ Due to various restrictions, `ReactPlayer` is not guaranteed to function properl
 
 #### Multiple Sources and Tracks
 
+Passing an array of YouTube URLs to the `url` prop will load them as an untitled playlist.
+
+```jsx
+<ReactPlayer
+  url={[
+    'https://www.youtube.com/watch?v=oUFJJNQGwhk',
+    'https://www.youtube.com/watch?v=jNgP6d9HraI'
+  ]}
+/>
+```
+
 When playing file paths, an array of sources can be passed to the `url` prop to render multiple `<source>` tags.
 
 ```jsx

src/players/YouTube.js

@@ -11,23 +11,6 @@ const MATCH_USER_UPLOADS = /user\/([a-zA-Z0-9_-]+)\/?/
 const MATCH_NOCOOKIE = /youtube-nocookie\.com/
 const NOCOOKIE_HOST = 'https://www.youtube-nocookie.com'
 
-function parsePlaylist (url) {
-  if (MATCH_PLAYLIST.test(url)) {
-    const [, playlistId] = url.match(MATCH_PLAYLIST)
-    return {
-      listType: 'playlist',
-      list: playlistId
-    }
-  } else if (MATCH_USER_UPLOADS.test(url)) {
-    const [, username] = url.match(MATCH_USER_UPLOADS)
-    return {
-      listType: 'user_uploads',
-      list: username
-    }
-  }
-  return {}
-}
-
 export default class YouTube extends Component {
   static displayName = 'YouTube'
   callPlayer = callPlayer
@@ -36,13 +19,20 @@ export default class YouTube extends Component {
     this.props.onMount && this.props.onMount(this)
   }
 
+  getID (url) {
+    if (!url || url instanceof Array) {
+      return null
+    }
+    return url.match(MATCH_URL_YOUTUBE)[1]
+  }
+
   load (url, isReady) {
     const { playing, muted, playsinline, controls, loop, config, onError } = this.props
     const { playerVars, embedOptions } = config
-    const id = url && url.match(MATCH_URL_YOUTUBE)[1]
+    const id = this.getID(url)
     if (isReady) {
-      if (MATCH_PLAYLIST.test(url) || MATCH_USER_UPLOADS.test(url)) {
-        this.player.loadPlaylist(parsePlaylist(url))
+      if (MATCH_PLAYLIST.test(url) || MATCH_USER_UPLOADS.test(url) || url instanceof Array) {
+        this.player.loadPlaylist(this.parsePlaylist(url))
         return
       }
       this.player.cueVideoById({
@@ -66,7 +56,7 @@ export default class YouTube extends Component {
           end: parseEndTime(url),
           origin: window.location.origin,
           playsinline: playsinline,
-          ...parsePlaylist(url),
+          ...this.parsePlaylist(url),
           ...playerVars
         },
         events: {
@@ -85,6 +75,29 @@ export default class YouTube extends Component {
     }, onError)
   }
 
+  parsePlaylist = (url) => {
+    if (url instanceof Array) {
+      return {
+        listType: 'playlist',
+        playlist: url.map(this.getID).join(',')
+      }
+    }
+    if (MATCH_PLAYLIST.test(url)) {
+      const [, playlistId] = url.match(MATCH_PLAYLIST)
+      return {
+        listType: 'playlist',
+        list: playlistId
+      }
+    } else if (MATCH_USER_UPLOADS.test(url)) {
+      const [, username] = url.match(MATCH_USER_UPLOADS)
+      return {
+        listType: 'user_uploads',
+        list: username
+      }
+    }
+    return {}
+  }
+
   onStateChange = (event) => {
     const { data } = event
     const { onPlay, onPause, onBuffer, onBufferEnd, onEnded, onReady, loop, config: { playerVars, onUnstarted } } = this.props

src/players/index.js

@@ -45,7 +45,12 @@ const canPlayFile = url => {
 export default [
   {
     key: 'youtube',
-    canPlay: url => MATCH_URL_YOUTUBE.test(url),
+    canPlay: url => {
+      if (url instanceof Array) {
+        return url.every(item => MATCH_URL_YOUTUBE.test(item))
+      }
+      return MATCH_URL_YOUTUBE.test(url)
+    },
     lazyPlayer: lazy(() => import(/* webpackChunkName: 'reactPlayerYouTube' */'./YouTube'))
   },
   {

src/utils.js

@@ -9,6 +9,9 @@ const MATCH_NUMERIC = /^\d+$/
 // Parse YouTube URL for a start time param, ie ?t=1h14m30s
 // and return the start time in seconds
 function parseTimeParam (url, pattern) {
+  if (url instanceof Array) {
+    return undefined
+  }
   const match = url.match(pattern)
   if (match) {
     const stamp = match[1]