Add Wistia player id to support multiple players (cookpete#905)

* Add unique wistia player id to have possibility to have multiple players with the same url on one page

* Tidy up wistia playerID logic

Co-authored-by: Mariya Nizovtsova <m.nizovtsova@itransition.com>
Co-authored-by: Pete Cook <pete@cookpete.com>

Author: 3 people

README.md

@@ -142,7 +142,7 @@ Key | Options
 `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)
 `vimeo` | `playerOptions`: Override the [default params](https://developer.vimeo.com/player/sdk/embed)
-`wistia` | `options`: Override the [default player options](https://wistia.com/doc/embed-options#options_list)
+`wistia` | `options`: Override the [default player options](https://wistia.com/doc/embed-options#options_list)<br />`playerId`: Override player ID for consistent server-side rendering (use with [`react-uid`](https://github.com/thearnica/react-uid))
 `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)
 `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))

src/players/Wistia.js

@@ -1,31 +1,29 @@
 import React, { Component } from 'react'
 
-import { callPlayer, getSDK } from '../utils'
+import { callPlayer, getSDK, randomString } from '../utils'
 import { canPlay, MATCH_URL_WISTIA } from '../patterns'
 
 const SDK_URL = 'https://fast.wistia.com/assets/external/E-v1.js'
 const SDK_GLOBAL = 'Wistia'
+const PLAYER_ID_PREFIX = 'wistia-player-'
 
 export default class Wistia extends Component {
   static displayName = 'Wistia'
   static canPlay = canPlay.wistia
   static loopOnEnded = true
   callPlayer = callPlayer
+  playerID = this.props.config.playerId || `${PLAYER_ID_PREFIX}${randomString()}`
 
   componentDidMount () {
     this.props.onMount && this.props.onMount(this)
   }
 
-  getID (url) {
-    return url && url.match(MATCH_URL_WISTIA)[1]
-  }
-
   load (url) {
     const { playing, muted, controls, onReady, config, onError } = this.props
     getSDK(SDK_URL, SDK_GLOBAL).then(() => {
       window._wq = window._wq || []
       window._wq.push({
-        id: this.getID(url),
+        id: this.playerID,
         options: {
           autoPlay: playing,
           silentAutoPlay: 'allow',
@@ -105,14 +103,15 @@ export default class Wistia extends Component {
   }
 
   render () {
-    const id = this.getID(this.props.url)
-    const className = `wistia_embed wistia_async_${id}`
+    const { url } = this.props
+    const videoID = url.match(MATCH_URL_WISTIA)[1]
+    const className = `wistia_embed wistia_async_${videoID}`
     const style = {
       width: '100%',
       height: '100%'
     }
     return (
-      <div key={id} className={className} style={style} />
+      <div id={this.playerID} key={videoID} className={className} style={style} />
     )
   }
 }

test/players/Wistia.js

@@ -16,6 +16,10 @@ const TEST_CONFIG = {
   options: {}
 }
 
+Wistia.prototype.componentWillMount = function () {
+  this.playerID = 'mock-player-id'
+}
+
 testPlayerMethods(Wistia, {
   play: 'play',
   pause: 'pause',
@@ -59,6 +63,7 @@ test('render()', t => {
   const style = { width: '100%', height: '100%' }
   t.true(wrapper.contains(
     <div
+      id='mock-player-id'
       key='e4a27b971d'
       style={style}
       className='wistia_embed wistia_async_e4a27b971d'