Add support for importing single players

Fixes cookpete/react-player#311

README.md

@@ -195,6 +195,23 @@ class ResponsivePlayer extends Component {
 
 See [`jsFiddle` example](https://jsfiddle.net/e6w3rtj1/)
 
+#### Single player imports
+
+If you are only ever playing a single type of URL, you can import individual players to keep your bundle size down:
+
+```jsx
+import YouTubePlayer from 'react-player/lib/players/YouTube'
+
+<YouTubePlayer
+  url='https://www.youtube.com/watch?v=d46Azg3Pm4c'
+  playing
+  controls
+  // Other ReactPlayer props will work here
+/>
+```
+
+See a list of available players [here](https://github.com/CookPete/react-player/tree/master/src/players).
+
 #### Standalone player
 
 If you aren’t using React, you can still render a player using the standalone library:

src/ReactPlayer.js

@@ -4,7 +4,7 @@ import { propTypes, defaultProps, DEPRECATED_CONFIG_PROPS } from './props'
 import { getConfig, omit, isEqual } from './utils'
 import players from './players'
 import Player from './Player'
-import FilePlayer from './players/FilePlayer'
+import { FilePlayer } from './players/FilePlayer'
 import renderPreloadPlayers from './preload'
 
 const SUPPORTED_PROPS = Object.keys(propTypes)

src/players/DailyMotion.js

@@ -1,13 +1,14 @@
 import React, { Component } from 'react'
 
 import { callPlayer, getSDK, parseStartTime } from '../utils'
+import createSinglePlayer from '../singlePlayer'
 
 const SDK_URL = 'https://api.dmcdn.net/all.js'
 const SDK_GLOBAL = 'DM'
 const SDK_GLOBAL_READY = 'dmAsyncInit'
 const MATCH_URL = /dailymotion.com\/(video|hub)\/([^_]+)[^#]*(#video=([^_&]+))?/
 
-export default class DailyMotion extends Component {
+export class DailyMotion extends Component {
   static displayName = 'DailyMotion'
   static canPlay = url => MATCH_URL.test(url)
   static loopOnEnded = true
@@ -99,3 +100,5 @@ export default class DailyMotion extends Component {
     )
   }
 }
+
+export default createSinglePlayer(DailyMotion)

src/players/Facebook.js

@@ -1,14 +1,15 @@
 import React, { Component } from 'react'
 
 import { callPlayer, getSDK, randomString } from '../utils'
+import createSinglePlayer from '../singlePlayer'
 
 const SDK_URL = '//connect.facebook.net/en_US/sdk.js'
 const SDK_GLOBAL = 'FB'
 const SDK_GLOBAL_READY = 'fbAsyncInit'
 const MATCH_URL = /facebook\.com\/([^/?].+\/)?video(s|\.php)[/?].*$/
 const PLAYER_ID_PREFIX = 'facebook-player-'
 
-export default class Facebook extends Component {
+export class Facebook extends Component {
   static displayName = 'Facebook'
   static canPlay = url => MATCH_URL.test(url)
   static loopOnEnded = true
@@ -84,3 +85,5 @@ export default class Facebook extends Component {
     )
   }
 }
+
+export default createSinglePlayer(Facebook)

src/players/FilePlayer.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 
 import { getSDK } from '../utils'
+import createSinglePlayer from '../singlePlayer'
 
 const AUDIO_EXTENSIONS = /\.(m4a|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx)($|\?)/i
 const VIDEO_EXTENSIONS = /\.(mp4|og[gv]|webm|mov|m4v)($|\?)/i
@@ -31,7 +32,7 @@ function canPlay (url) {
   )
 }
 
-export default class FilePlayer extends Component {
+export class FilePlayer extends Component {
   static displayName = 'FilePlayer'
   static canPlay = canPlay
 
@@ -182,3 +183,5 @@ export default class FilePlayer extends Component {
     )
   }
 }
+
+export default createSinglePlayer(FilePlayer)

src/players/SoundCloud.js

@@ -1,12 +1,13 @@
 import React, { Component } from 'react'
 
 import { callPlayer, getSDK } from '../utils'
+import createSinglePlayer from '../singlePlayer'
 
 const SDK_URL = 'https://w.soundcloud.com/player/api.js'
 const SDK_GLOBAL = 'SC'
 const MATCH_URL = /(soundcloud.com|snd.sc)\/.+$/
 
-export default class SoundCloud extends Component {
+export class SoundCloud extends Component {
   static displayName = 'SoundCloud'
   static canPlay = url => MATCH_URL.test(url)
   static loopOnEnded = true
@@ -84,3 +85,5 @@ export default class SoundCloud extends Component {
     )
   }
 }
+
+export default createSinglePlayer(SoundCloud)

src/players/Streamable.js

@@ -1,12 +1,13 @@
 import React, { Component } from 'react'
 
 import { callPlayer, getSDK } from '../utils'
+import createSinglePlayer from '../singlePlayer'
 
 const SDK_URL = '//cdn.embed.ly/player-0.1.0.min.js'
 const SDK_GLOBAL = 'playerjs'
 const MATCH_URL = /streamable.com\/([a-z0-9]+)$/
 
-export default class Streamable extends Component {
+export class Streamable extends Component {
   static displayName = 'Streamable'
   static canPlay = url => MATCH_URL.test(url)
 
@@ -81,3 +82,5 @@ export default class Streamable extends Component {
     )
   }
 }
+
+export default createSinglePlayer(Streamable)

src/players/Twitch.js

@@ -1,14 +1,15 @@
 import React, { Component } from 'react'
 
 import { callPlayer, getSDK, randomString } from '../utils'
+import createSinglePlayer from '../singlePlayer'
 
 const SDK_URL = '//player.twitch.tv/js/embed/v1.js'
 const SDK_GLOBAL = 'Twitch'
 const MATCH_VIDEO_URL = /(?:www\.|go\.)?twitch\.tv\/videos\/(\d+)($|\?)/
 const MATCH_CHANNEL_URL = /(?:www\.|go\.)?twitch\.tv\/([a-z0-9_]+)($|\?)/
 const PLAYER_ID_PREFIX = 'twitch-player-'
 
-export default class Twitch extends Component {
+export class Twitch extends Component {
   static displayName = 'Twitch'
   static canPlay = url => MATCH_VIDEO_URL.test(url) || MATCH_CHANNEL_URL.test(url)
   static loopOnEnded = true
@@ -77,3 +78,5 @@ export default class Twitch extends Component {
     )
   }
 }
+
+export default createSinglePlayer(Twitch)

src/players/Vimeo.js

@@ -1,12 +1,13 @@
 import React, { Component } from 'react'
 
 import { callPlayer, getSDK } from '../utils'
+import createSinglePlayer from '../singlePlayer'
 
 const SDK_URL = 'https://player.vimeo.com/api/player.js'
 const SDK_GLOBAL = 'Vimeo'
 const MATCH_URL = /(?:www\.|player\.)?vimeo.com\/(?:(?:channels|ondemand)\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)/
 
-export default class Vimeo extends Component {
+export class Vimeo extends Component {
   static displayName = 'Vimeo'
   static canPlay = url => MATCH_URL.test(url)
 
@@ -90,3 +91,5 @@ export default class Vimeo extends Component {
     return <div style={style} ref={this.ref} />
   }
 }
+
+export default createSinglePlayer(Vimeo)

src/players/Wistia.js

@@ -1,12 +1,13 @@
 import React, { Component } from 'react'
 
 import { callPlayer, getSDK } from '../utils'
+import createSinglePlayer from '../singlePlayer'
 
 const SDK_URL = '//fast.wistia.com/assets/external/E-v1.js'
 const SDK_GLOBAL = 'Wistia'
 const MATCH_URL = /(?:wistia.com|wi.st)\/(?:medias|embed)\/(.*)$/
 
-export default class Wistia extends Component {
+export class Wistia extends Component {
   static displayName = 'Wistia'
   static canPlay = url => MATCH_URL.test(url)
   static loopOnEnded = true
@@ -75,3 +76,5 @@ export default class Wistia extends Component {
     )
   }
 }
+
+export default createSinglePlayer(Wistia)

src/players/YouTube.js

@@ -1,13 +1,14 @@
 import React, { Component } from 'react'
 
 import { callPlayer, getSDK, parseStartTime } from '../utils'
+import createSinglePlayer from '../singlePlayer'
 
 const SDK_URL = 'https://www.youtube.com/iframe_api'
 const SDK_GLOBAL = 'YT'
 const SDK_GLOBAL_READY = 'onYouTubeIframeAPIReady'
 const MATCH_URL = /(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})/
 
-export default class YouTube extends Component {
+export class YouTube extends Component {
   static displayName = 'YouTube'
   static canPlay = url => MATCH_URL.test(url)
   static loopOnEnded = true
@@ -97,3 +98,5 @@ export default class YouTube extends Component {
     )
   }
 }
+
+export default createSinglePlayer(YouTube)

src/players/index.js

@@ -1,12 +1,12 @@
-import YouTube from './YouTube'
-import SoundCloud from './SoundCloud'
-import Vimeo from './Vimeo'
-import Facebook from './Facebook'
-import Streamable from './Streamable'
-import Wistia from './Wistia'
-import Twitch from './Twitch'
-import DailyMotion from './DailyMotion'
-import FilePlayer from './FilePlayer'
+import { YouTube } from './YouTube'
+import { SoundCloud } from './SoundCloud'
+import { Vimeo } from './Vimeo'
+import { Facebook } from './Facebook'
+import { Streamable } from './Streamable'
+import { Wistia } from './Wistia'
+import { Twitch } from './Twitch'
+import { DailyMotion } from './DailyMotion'
+import { FilePlayer } from './FilePlayer'
 
 export default [
   YouTube,

src/preload.js

@@ -1,10 +1,10 @@
 import React from 'react'
 
 import Player from './Player'
-import YouTube from './players/YouTube'
-import SoundCloud from './players/SoundCloud'
-import Vimeo from './players/Vimeo'
-import DailyMotion from './players/DailyMotion'
+import { YouTube } from './players/YouTube'
+import { SoundCloud } from './players/SoundCloud'
+import { Vimeo } from './players/Vimeo'
+import { DailyMotion } from './players/DailyMotion'
 
 const PRELOAD_PLAYERS = [
   {

src/singlePlayer.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+
+import { propTypes, defaultProps } from './props'
+import Player from './Player'
+import { isEqual, getConfig } from './utils'
+
+export default function createSinglePlayer (activePlayer) {
+  return class SinglePlayer extends Component {
+    static displayName = `${activePlayer.displayName}Player`
+    static propTypes = propTypes
+    static defaultProps = defaultProps
+    static canPlay = activePlayer.canPlay
+
+    shouldComponentUpdate (nextProps) {
+      return !isEqual(this.props, nextProps)
+    }
+    componentWillUpdate (nextProps) {
+      this.config = getConfig(nextProps, defaultProps)
+    }
+    render () {
+      if (!activePlayer.canPlay(this.props.url)) {
+        return null
+      }
+      return (
+        <Player
+          {...this.props}
+          activePlayer={activePlayer}
+          config={getConfig(this.props, defaultProps)}
+        />
+      )
+    }
+  }
+}

test/specs/canPlay.js

@@ -1,10 +1,10 @@
 /* eslint-disable no-unused-expressions */
 
-import SoundCloud from '../../src/players/SoundCloud'
-import YouTube from '../../src/players/YouTube'
-import Vimeo from '../../src/players/Vimeo'
-import Wistia from '../../src/players/Wistia'
-import Twitch from '../../src/players/Twitch'
+import { SoundCloud } from '../../src/players/SoundCloud'
+import { YouTube } from '../../src/players/YouTube'
+import { Vimeo } from '../../src/players/Vimeo'
+import { Wistia } from '../../src/players/Wistia'
+import { Twitch } from '../../src/players/Twitch'
 
 const { describe, it, expect } = window