Update Streamable player to use player.js

Closes cookpete/react-player#237

src/players/Streamable.js

@@ -1,37 +1,88 @@
-import FilePlayer from './FilePlayer'
+import React from 'react'
 
-const RESOLVE_URL = 'https://api.streamable.com/videos/'
-const MATCH_URL = /^https?:\/\/streamable.com\/([a-z0-9]+)$/
+import Base from './Base'
+import { getSDK } from '../utils'
 
-const cache = {} // Cache song data requests
+const SDK_URL = '//cdn.embed.ly/player-0.0.12.min.js'
+const SDK_GLOBAL = 'playerjs'
+const MATCH_URL = /^https?:\/\/streamable.com\/([a-z0-9]+)$/
 
-export default class Streamable extends FilePlayer {
+export default class Streamable extends Base {
   static displayName = 'Streamable'
   static canPlay (url) {
     return MATCH_URL.test(url)
   }
-  getData (url) {
-    const { onError } = this.props
-    const id = url.match(MATCH_URL)[1]
-    if (cache[id]) {
-      return Promise.resolve(cache[id])
+  duration = null
+  currentTime = null
+  secondsLoaded = null
+  load (url) {
+    if (this.loadingSDK) {
+      this.loadOnReady = url
+      return
     }
-    return window.fetch(RESOLVE_URL + id)
-      .then(response => {
-        if (response.status === 200) {
-          cache[id] = response.json()
-          return cache[id]
-        } else {
-          onError(new Error('Streamable track could not be resolved'))
+    this.loadingSDK = true
+    getSDK(SDK_URL, SDK_GLOBAL).then(playerjs => {
+      this.player = new playerjs.Player(this.iframe)
+      this.player.on('ready', this.onReady)
+      this.player.on('play', this.onPlay)
+      this.player.on('pause', this.props.onPause)
+      this.player.on('seeked', this.props.onSeek)
+      this.player.on('ended', this.props.onEnded)
+      this.player.on('error', this.props.onError)
+      this.player.on('timeupdate', ({ duration, seconds }) => {
+        this.duration = duration
+        this.currentTime = seconds
+      })
+      this.player.on('progress', ({ percent }) => {
+        if (this.duration) {
+          this.secondsLoaded = this.duration * percent
         }
       })
+    }, this.props.onError)
   }
-  load (url) {
-    const { onError } = this.props
-    this.stop()
-    this.getData(url).then(data => {
-      if (!this.mounted) return
-      this.player.src = data.files.mp4.url
-    }, onError)
+  play () {
+    this.callPlayer('play')
+  }
+  pause () {
+    this.callPlayer('pause')
+  }
+  stop () {
+    // Nothing to do
+  }
+  seekTo (amount) {
+    const seconds = super.seekTo(amount)
+    this.callPlayer('setCurrentTime', seconds)
+  }
+  setVolume (fraction) {
+    this.callPlayer('setVolume', fraction * 100)
+  }
+  getDuration () {
+    return this.duration
+  }
+  getCurrentTime () {
+    return this.currentTime
+  }
+  getSecondsLoaded () {
+    return this.secondsLoaded
+  }
+  ref = iframe => {
+    this.iframe = iframe
+  }
+  render () {
+    const id = this.props.url.match(MATCH_URL)[1]
+    const style = {
+      width: '100%',
+      height: '100%'
+    }
+    return (
+      <iframe
+        ref={this.ref}
+        src={`https://streamable.com/o/${id}`}
+        frameBorder='0'
+        scrolling='no'
+        style={style}
+        allowFullScreen
+      />
+    )
   }
 }