Ustream live wip

package.json

@@ -8,6 +8,7 @@
     "clean": "rimraf lib demo",
     "start": "webpack-dev-server",
     "lint": "standard --verbose | snazzy",
+    "format": "standard --fix --verbose | snazzy",
     "test": "cross-env NODE_ENV=test babel-node ./node_modules/karma/bin/karma start test/karma.config.js",
     "coverage": "codecov",
     "build:lib": "cross-env NODE_ENV=production babel src -d lib --ignore src/demo",

src/Player.js

@@ -84,10 +84,14 @@ export default class Player extends Component {
           progress.loadedSeconds = loadedSeconds
           progress.loaded = loadedSeconds / duration
         }
-        // Only call onProgress if values have changed
-        if (progress.played !== this.prevPlayed || progress.loaded !== this.prevLoaded) {
+
+        // Special case for live types so they still OnProgress
+        if (duration === Infinity && progress.playedSeconds !== this.prevPlayedSeconds) {
+          this.props.onProgress(progress)
+        } else if (progress.played !== this.prevPlayed || progress.loaded !== this.prevLoaded) {
           this.props.onProgress(progress)
         }
+        this.prevPlayedSeconds = progress.playedSeconds
         this.prevPlayed = progress.played
         this.prevLoaded = progress.loaded
       }

src/demo/App.js

@@ -56,11 +56,9 @@ class App extends Component {
     this.setState({ playbackRate: parseFloat(e.target.value) })
   }
   onPlay = () => {
-    console.log('onPlay')
     this.setState({ playing: true })
   }
   onPause = () => {
-    console.log('onPause')
     this.setState({ playing: false })
   }
   onSeekMouseDown = e => {
@@ -74,18 +72,15 @@ class App extends Component {
     this.player.seekTo(parseFloat(e.target.value))
   }
   onProgress = state => {
-    console.log('onProgress', state)
     // We only want to update time slider if we are not currently seeking
     if (!this.state.seeking) {
       this.setState(state)
     }
   }
   onEnded = () => {
-    console.log('onEnded')
     this.setState({ playing: this.state.loop })
   }
   onDuration = (duration) => {
-    console.log('onDuration', duration)
     this.setState({ duration })
   }
   onClickFullscreen = () => {
@@ -102,9 +97,8 @@ class App extends Component {
     this.player = player
   }
   render () {
-    const { url, playing, volume, muted, loop, played, loaded, duration, playbackRate } = this.state
+    const { url, playing, volume, muted, loop, played, playedSeconds, loaded, duration, playbackRate } = this.state
     const SEPARATOR = ' · '
-
     return (
       <div className='app'>
         <section className='section'>
@@ -225,7 +219,8 @@ class App extends Component {
               <td>
                 {this.renderLoadButton('https://www.twitch.tv/videos/106400740', 'Test A')}
                 {this.renderLoadButton('https://www.twitch.tv/videos/12783852', 'Test B')}
-                {this.renderLoadButton('https://www.twitch.tv/kronovi', 'Test C')}
+                {this.renderLoadButton('https://www.twitch.tv/ofsoulheartmind', 'Offline Test C')}
+                {this.renderLoadButton('https://www.twitch.tv/monstercat', 'Online Test C')}
               </td>
             </tr>
             <tr>
@@ -256,6 +251,13 @@ class App extends Component {
                 {this.renderLoadButton('https://www.mixcloud.com/mixcloud/mixcloud-curates-4-mary-anne-hobbs-in-conversation-with-dan-deacon/', 'Test B')}
               </td>
             </tr>
+            <tr>
+              <th>UstreamLive</th>
+              <td>
+                {this.renderLoadButton('http://www.ustream.tv/channel/6540154', 'Test A')}
+                {this.renderLoadButton('http://www.ustream.tv/channel/9408562', 'Test B')}
+              </td>
+            </tr>
             <tr>
               <th>Files</th>
               <td>
@@ -314,6 +316,10 @@ class App extends Component {
               <th>remaining</th>
               <td><Duration seconds={duration * (1 - played)} /></td>
             </tr>
+            <tr>
+              <th>playedSeconds</th>
+              <td><Duration seconds={playedSeconds} /></td>
+            </tr>
           </tbody></table>
         </section>
         <footer className='footer'>

src/players/Twitch.js

@@ -12,6 +12,7 @@ const PLAYER_ID_PREFIX = 'twitch-player-'
 export class Twitch extends Component {
   static displayName = 'Twitch'
   static canPlay = url => MATCH_VIDEO_URL.test(url) || MATCH_CHANNEL_URL.test(url)
+  static isChannel = url => MATCH_CHANNEL_URL.test(url)
   static loopOnEnded = true
 
   callPlayer = callPlayer
@@ -20,6 +21,10 @@ export class Twitch extends Component {
     const { playsinline, onError, config } = this.props
     const isChannel = MATCH_CHANNEL_URL.test(url)
     const id = isChannel ? url.match(MATCH_CHANNEL_URL)[1] : url.match(MATCH_VIDEO_URL)[1]
+
+    // hacks to fix seek logic on live players
+    this.channelTime = 0
+    this.pausedTime = 0
     if (isReady) {
       if (isChannel) {
         this.player.setChannel(id)
@@ -40,8 +45,18 @@ export class Twitch extends Component {
       })
       const { READY, PLAY, PAUSE, ENDED } = Twitch.Player
       this.player.addEventListener(READY, this.props.onReady)
-      this.player.addEventListener(PLAY, this.props.onPlay)
-      this.player.addEventListener(PAUSE, this.props.onPause)
+      this.player.addEventListener(PLAY, (args) => {
+        if (isChannel) {
+          this.channelTime = this.pausedTime
+        }
+        this.props.onPlay(args)
+      })
+      this.player.addEventListener(PAUSE, (args) => {
+        if (isChannel) {
+          this.pausedTime = this.getCurrentTime()
+        }
+        this.props.onPause(args)
+      })
       this.player.addEventListener(ENDED, this.props.onEnded)
     }, onError)
   }
@@ -61,10 +76,14 @@ export class Twitch extends Component {
     this.callPlayer('setVolume', fraction)
   }
   getDuration () {
+    // need this for offline mode too
+    if (Twitch.isChannel(this.props.url)) {
+      return Infinity
+    }
     return this.callPlayer('getDuration')
   }
   getCurrentTime () {
-    return this.callPlayer('getCurrentTime')
+    return this.channelTime + this.callPlayer('getCurrentTime')
   }
   getSecondsLoaded () {
     return null

src/players/UstreamLive.js

@@ -0,0 +1,105 @@
+import React, { Component } from 'react'
+
+import { callPlayer, getSDK, randomString, queryString } from '../utils'
+import createSinglePlayer from '../singlePlayer'
+
+const SDK_URL = 'http://developers.ustream.tv/js/ustream-embedapi.min.js'
+const SDK_GLOBAL = 'UstreamEmbed'
+const MATCH_URL = /(ustream.tv\/channel\/)([^#&?/]*)/
+const PLAYER_ID_PREFIX = 'UstreamLive-player-'
+export class UstreamLive extends Component {
+  static displayName = 'UstreamLive';
+  static canPlay = url => MATCH_URL.test(url);
+  static loopOnEnded = false;
+
+  playerID = PLAYER_ID_PREFIX + randomString()
+
+  callPlayer = callPlayer
+  parseId (url) {
+    const m = url.match(MATCH_URL)
+    return m[2]
+  }
+  load (url) {
+    getSDK(SDK_URL, SDK_GLOBAL).then(UstreamEmbed => {
+      this.player = UstreamEmbed(this.playerID)
+      this.player.currentTime = 0
+      this.player.addListener('playing', (type, playing) => {
+        if (playing) {
+          this.playTime = Date.now()
+          this.props.onPlay()
+        } else {
+          this.player.currentTime = this.getCurrentTime()
+          this.playTime = null
+          this.props.onPause()
+        }
+      })
+      this.player.addListener('live', () => {
+        this.props.onReady()
+      })
+      this.player.addListener('offline', () => {
+        this.props.onReady()
+      })
+      this.player.addListener('finished', this.props.onEnded)
+      this.player.getProperty('duration', (duration) => {
+        this.player.duration = duration || Infinity
+      })
+    }, this.props.onError)
+  }
+  play () {
+    this.callPlayer('callMethod', 'play')
+  }
+  pause () {
+    this.callPlayer('callMethod', 'pause')
+  }
+  stop () {
+    this.callPlayer('callMethod', 'stop')
+  }
+  seekTo (seconds) {
+    this.callPlayer('callMethod', 'seek', seconds)
+  }
+  setVolume (fraction) {
+    this.callPlayer('callMethod', 'volume', fraction * 100)
+  }
+  getDuration () {
+    return Infinity
+  }
+  getCurrentTime () {
+    let playing = 0
+    if (this.playTime) {
+      playing = (Date.now() - this.playTime) / 1000
+    }
+
+    return this.player.currentTime + playing
+  }
+  getSecondsLoaded () {
+    return null
+  }
+  ref = container => {
+    this.container = container
+  }
+  render () {
+    const channelId = this.parseId(this.props.url)
+    const base = '//www.ustream.tv/embed'
+    const style = {
+      width: '100%',
+      height: '100%'
+    }
+    const query = queryString({
+      autoplay: this.props.playing
+    })
+
+    return (
+      <iframe
+        id={this.playerID}
+        ref={this.ref}
+        src={`${base}/${channelId}?html5ui?${query}`}
+        frameBorder='0'
+        scrolling='no'
+        style={style}
+        allowFullScreen
+      />
+    )
+  }
+}
+
+export default createSinglePlayer(UstreamLive)

src/players/index.js

@@ -7,6 +7,7 @@ import { Wistia } from './Wistia'
 import { Twitch } from './Twitch'
 import { DailyMotion } from './DailyMotion'
 import { Mixcloud } from './Mixcloud'
+import { UstreamLive } from './UstreamLive'
 import { FilePlayer } from './FilePlayer'
 
 export default [
@@ -19,5 +20,6 @@ export default [
   Twitch,
   DailyMotion,
   Mixcloud,
+  UstreamLive,
   FilePlayer
 ]

test/specs/ReactPlayer.js

@@ -93,6 +93,11 @@ const TEST_URLS = [
     url: 'https://www.mixcloud.com/mixcloud/meet-the-curators/',
     switchTo: 'https://www.mixcloud.com/mixcloud/mixcloud-curates-4-mary-anne-hobbs-in-conversation-with-dan-deacon/',
     skip: true
+  },
+  {
+    name: 'Ustream',
+    url: 'http://www.ustream.tv/channel/9408562',
+    switchTo: 'http://www.ustream.tv/channel/6540154'
   }
 ]
 
@@ -249,23 +254,23 @@ describe('ReactPlayer', () => {
         })
       }
 
-      it('seekTo, onEnded', done => {
-        let duration
-        let seeked = false
-        renderPlayer({
-          url: test.url,
-          onDuration: d => { duration = d },
-          onProgress: p => {
-            if (!seeked && duration && p.playedSeconds > 1) {
-              player.seekTo(duration - 1)
-              seeked = true
-            }
-          },
-          onEnded: () => done()
+      if (test.onSeek) {
+        it('seekTo, onEnded', done => {
+          let duration
+          let seeked = false
+          renderPlayer({
+            url: test.url,
+            onDuration: d => { duration = d },
+            onProgress: p => {
+              if (!seeked && duration && p.playedSeconds > 1) {
+                player.seekTo(duration - 1)
+                seeked = true
+              }
+            },
+            onEnded: () => done()
+          })
         })
-      })
 
-      if (test.onSeek) {
         it('onSeek', done => {
           renderPlayer({
             url: test.url,

test/specs/canPlay.js

@@ -5,6 +5,7 @@ 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 { UstreamLive } from '../../src/players/UstreamLive'
 
 const { describe, it, expect } = window
 
@@ -106,4 +107,14 @@ describe('canPlay', () => {
       expect(Twitch.canPlay('https://www.youtube.com/watch?v=1234')).to.be.false
     })
   })
+
+  describe('Ustream', () => {
+    it('knows what it can play', () => {
+      expect(UstreamLive.canPlay('http://www.ustream.tv/channel/9408562')).to.be.true
+    })
+
+    it('knows what it can\'t play', () => {
+      expect(UstreamLive.canPlay('http://www.ustream.tv/recorded/9408562')).to.be.false
+    })
+  })
 })