Add playerId override to facebook and twitch players

Attempts to fix cookpete/react-player#788

README.md

@@ -133,13 +133,13 @@ Settings for each player live under different keys:
 Key | Options
 --- | -------
 `youtube` | `playerVars`: Override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5)<br />`embedOptions`: Override the [default embed options](https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player)<br />`preload`: Used for [preloading](#preloading)
-`facebook` | `appId`: Your own [Facebook app ID](https://developers.facebook.com/docs/apps/register#app-id)
+`facebook` | `appId`: Your own [Facebook app ID](https://developers.facebook.com/docs/apps/register#app-id)<br />`version`: Facebook SDK version<br />`playerId`: Override player ID for consistent server-side rendering (use with [`react-uid`](https://github.com/thearnica/react-uid))
 `soundcloud` | `options`: Override the [default player options](https://developers.soundcloud.com/docs/api/html5-widget#params)<br />`preload`: Used for [preloading](#preloading)
 `vimeo` | `playerOptions`: Override the [default params](https://developer.vimeo.com/player/embedding#universal-parameters)<br />`preload`: Used for [preloading](#preloading)
 `wistia` | `options`: Override the [default player options](https://wistia.com/doc/embed-options#options_list)
 `mixcloud` | `options`: Override the [default player options](https://www.mixcloud.com/developers/widget/#methods)
 `dailymotion` | `params`: Override the [default player vars](https://developer.dailymotion.com/player#player-parameters)<br />`preload`: Used for [preloading](#preloading)
-`twitch` | `options`: Override the [default player options](https://dev.twitch.tv/docs/embed)
+`twitch` | `options`: Override the [default player options](https://dev.twitch.tv/docs/embed)<br />`playerId`: Override player ID for consistent server-side rendering (use with [`react-uid`](https://github.com/thearnica/react-uid))
 `file` | `attributes`: Apply [element attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video#Attributes)<br />`forceVideo`: Always render a `<video>` element<br />`forceAudio`: Always render an `<audio>` element<br />`forceHLS`: Use [hls.js](https://github.com/video-dev/hls.js) for HLS streams<br />`forceDASH`: Always use [dash.js](https://github.com/Dash-Industry-Forum/dash.js) for DASH streams<br />`hlsOptions`: Override the [default `hls.js` options](https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning)<br />`hlsVersion`: Override the [`hls.js`](https://github.com/video-dev/hls.js) version loaded from [`cdnjs`](https://cdnjs.com/libraries/hls.js), default: `0.10.1`<br />`dashVersion`: Override the [`dash.js`](https://github.com/Dash-Industry-Forum/dash.js) version loaded from [`cdnjs`](https://cdnjs.com/libraries/dashjs), default: `2.9.2`
 
 ##### Preloading

index.d.ts

@@ -26,6 +26,8 @@ export interface YouTubeConfig {
 
 export interface FacebookConfig {
   appId: string;
+  version: string;
+  playerId: string;
 }
 
 export interface DailyMotionConfig {

src/players/Facebook.js

@@ -15,7 +15,8 @@ export class Facebook extends Component {
   static loopOnEnded = true
 
   callPlayer = callPlayer
-  playerID = PLAYER_ID_PREFIX + randomString()
+  playerID = this.props.config.facebook.playerId || `${PLAYER_ID_PREFIX}${randomString()}`
+
   load (url, isReady) {
     if (isReady) {
       getSDK(SDK_URL, SDK_GLOBAL, SDK_GLOBAL_READY).then(FB => FB.XFBML.parse())

src/players/Twitch.js

@@ -15,7 +15,8 @@ export class Twitch extends Component {
   static loopOnEnded = true
 
   callPlayer = callPlayer
-  playerID = PLAYER_ID_PREFIX + randomString()
+  playerID = this.props.config.twitch.playerId || `${PLAYER_ID_PREFIX}${randomString()}`
+
   load (url, isReady) {
     const { playsinline, onError, config, controls } = this.props
     const isChannel = MATCH_CHANNEL_URL.test(url)

src/props.js

@@ -35,7 +35,8 @@ export const propTypes = {
     }),
     facebook: shape({
       appId: string,
-      version: string
+      version: string,
+      playerId: string
     }),
     dailymotion: shape({
       params: object,
@@ -63,7 +64,8 @@ export const propTypes = {
       options: object
     }),
     twitch: shape({
-      options: object
+      options: object,
+      playerId: string
     })
   }),
   onReady: func,
@@ -121,7 +123,8 @@ export const defaultProps = {
     },
     facebook: {
       appId: '1309697205772819',
-      version: 'v3.3'
+      version: 'v3.3',
+      playerId: null
     },
     dailymotion: {
       params: {
@@ -159,7 +162,8 @@ export const defaultProps = {
       }
     },
     twitch: {
-      options: {}
+      options: {},
+      playerId: null
     }
   },
   onReady: function () {},

test/players/Facebook.js

@@ -39,7 +39,7 @@ testPlayerMethods(Facebook, {
   getDuration: 'getDuration',
   getCurrentTime: 'getCurrentPosition',
   getSecondsLoaded: null
-})
+}, { config: TEST_CONFIG })
 
 test('load()', async t => {
   const FB = {
@@ -86,7 +86,7 @@ test('render()', t => {
     width: '100%',
     height: '100%'
   }
-  const wrapper = shallow(<Facebook url={TEST_URL} />)
+  const wrapper = shallow(<Facebook url={TEST_URL} config={TEST_CONFIG} />)
   t.true(wrapper.contains(
     <div
       style={style}

test/players/Twitch.js

@@ -31,7 +31,7 @@ testPlayerMethods(Twitch, {
   getDuration: 'getDuration',
   getCurrentTime: 'getCurrentTime',
   getSecondsLoaded: null
-})
+}, { config: TEST_CONFIG })
 
 test('load()', t => {
   class Player {
@@ -64,7 +64,7 @@ test('load()', t => {
 
 test('render()', t => {
   const style = { width: '100%', height: '100%' }
-  const wrapper = shallow(<Twitch url={TEST_URL} />)
+  const wrapper = shallow(<Twitch url={TEST_URL} config={TEST_CONFIG} />)
   t.true(wrapper.contains(
     <div style={style} id='mock-player-id' />
   ))