Tidy up Wistia player

README.md

@@ -6,7 +6,7 @@ ReactPlayer
 [![Dependency Status](https://img.shields.io/david/CookPete/react-player.svg)](https://david-dm.org/CookPete/react-player)
 [![devDependency Status](https://img.shields.io/david/dev/CookPete/react-player.svg)](https://david-dm.org/CookPete/react-player?type=dev)
 
-A react component for playing media from YouTube, SoundCloud, Streamable, Vidme, Vimeo, or Wistia as well as supported media files. Used by [rplayr](http://rplayr.com), an app to generate playlists from Reddit URLs.
+A react component for playing a variety of URLs, including file paths, YouTube, SoundCloud, Streamable, Vidme, Vimeo and Wistia. Used by [rplayr](http://rplayr.com), an app to generate playlists from Reddit URLs.
 
 The component parses a URL and loads in the appropriate markup and external SDKs to play media from [various sources](#supported-media). [Props](#props) can be passed in to control playback and react to events such as buffering or media ending.
 

src/players/Wistia.js

@@ -4,41 +4,36 @@ import loadScript from 'load-script'
 import Base from './Base'
 
 const SDK_URL = '//fast.wistia.com/assets/external/E-v1.js'
+const SDK_GLOBAL = 'Wistia'
 const MATCH_URL = /^https?:\/\/(.+)?(wistia.com|wi.st)\/(medias|embed)\/(.*)$/
 
 export default class Wistia extends Base {
   static displayName = 'Wistia'
   static canPlay (url) {
     return MATCH_URL.test(url)
   }
-  constructor (props) {
-    super(props)
-    this.loadingSDK = true
-    this.player = null
-  }
   componentDidMount () {
     const { onStart, onPause, onEnded } = this.props
-    this.getSDK().then((_script) => {
+    this.loadingSDK = true
+    this.getSDK().then(() => {
       window._wq = window._wq || []
-      window._wq.push(
-        {
-          id: this.getVideoId(this.props.url),
-          onReady: (video) => {
-            this.loadingSDK = false
-            this.player = video
-            this.player.bind('start', onStart)
-            this.player.bind('play', this.onPlay)
-            this.player.bind('pause', onPause)
-            this.player.bind('end', onEnded)
-            this.onReady()
-          }
+      window._wq.push({
+        id: this.getID(this.props.url),
+        onReady: player => {
+          this.loadingSDK = false
+          this.player = player
+          this.player.bind('start', onStart)
+          this.player.bind('play', this.onPlay)
+          this.player.bind('pause', onPause)
+          this.player.bind('end', onEnded)
+          this.onReady()
         }
-      )
+      })
     })
   }
   getSDK () {
     return new Promise((resolve, reject) => {
-      if (window.Wistia) {
+      if (window[SDK_GLOBAL]) {
         resolve()
       } else {
         loadScript(SDK_URL, (err, script) => {
@@ -48,13 +43,15 @@ export default class Wistia extends Base {
       }
     })
   }
+  getID (url) {
+    return url && url.match(MATCH_URL)[4]
+  }
   load (url) {
-    const wistiaId = this.getVideoId(url)
+    const id = this.getID(url)
     if (this.isReady) {
-      this.player.replaceWith(wistiaId)
+      this.player.replaceWith(id)
       this.props.onReady()
       this.onReady()
-      return
     }
   }
   play () {
@@ -93,22 +90,16 @@ export default class Wistia extends Base {
   getFractionLoaded () {
     return null
   }
-  getVideoId (url) {
-    return url && url.match(MATCH_URL)[4]
-  }
-  ref = container => {
-    this.container = container
-  }
   render () {
+    const id = this.getID(this.props.url)
+    const className = `wistia_embed wistia_async_${id}`
     const style = {
       width: '100%',
       height: '100%',
       display: this.props.url ? 'block' : 'none'
     }
-
-    const id = this.getVideoId(this.props.url)
     return (
-      <div ref={this.ref} className={`wistia_embed wistia_async_${id}`} style={style} />
+      <div className={className} style={style} />
     )
   }
 }