Ustream fix 4

package.json

@@ -1,6 +1,6 @@
 {
   "name": "maestro-react-player",
-  "version": "1.2.3",
+  "version": "1.2.7",
   "description": "A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion",
   "main": "lib/ReactPlayer.js",
   "typings": "index.d.ts",
@@ -11,7 +11,7 @@
     "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",
-    "build:demo": "cross-env NODE_ENV=production webpack --config webpack.demo.babel.js",
+    "build:demo": "cross-env NODE_ENV=production webpack --config webpack.demo.babel.js && node test-server",
     "build:dist": "cross-env NODE_ENV=production webpack --config webpack.dist.babel.js",
     "build:standalone": "cross-env NODE_ENV=production webpack --config webpack.standalone.babel.js",
     "preversion": "npm run lint",
@@ -83,6 +83,7 @@
     "karma-mocha-reporter": "^2.2.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.9",
+    "koa": "^2.6.2",
     "mocha": "^4.1.0",
     "nodemon": "^1.18.5",
     "postcss-automath": "^1.0.1",

src/demo/MaestroPlayer.js

@@ -4,13 +4,14 @@ import ReactPlayer from '../ReactPlayer'
 
 export default class MaestroPlayer extends React.Component {
   static propTypes = {
-    refreshPlayer: PropTypes.func.isRequired,
+    refreshPlayer: PropTypes.func,
     video: PropTypes.shape({
       url: PropTypes.string.isRequired
     })
   };
 
   static defaultProps = {
+    refreshPlayer: () => {},
     video: null
   };
 
@@ -24,7 +25,7 @@ export default class MaestroPlayer extends React.Component {
         video: {
           offset: 102,
           spot: 'tv',
-          url: 'VAST:https://bs.serving-sys.com/Serving?cn=display&c=23&pl=VAST&pli=25235872&PluID=0&pos=7996&ord=%5Btimestamp%5D&cim=1'
+          url: 'http://www.ustream.tv/channel/6540154'
         },
         ready: false
       })

src/players/UstreamLive.js

@@ -12,6 +12,10 @@ export class UstreamLive extends Component {
   static canPlay = url => MATCH_URL.test(url)
   static loopOnEnded = false;
 
+  state = {
+    ustreamSrc: null
+  }
+
   playerID = PLAYER_ID_PREFIX + randomString()
 
   callPlayer = callPlayer
@@ -20,17 +24,22 @@ export class UstreamLive extends Component {
     return m[2]
   }
   componentDidUpdate (prevProps) {
-    // reset autoplay on reload
-    if (prevProps.url !== this.props.url) {
-      this.autoplay = null
+    // reset ustreamSrc on reload
+    if (prevProps.url && (prevProps.url !== this.props.url)) {
+      this.setState({
+        ustreamSrc: null
+      })
     }
   }
 
   load () {
-    const {onEnded, onError, onPause, onPlay, onReady, playing} = this.props
+    const {onEnded, onError, onPause, onPlay, onReady, playing, url} = this.props
+    const channelId = this.parseId(url)
+    this.setState({
+      ustreamSrc: `https://www.ustream.tv/embed/${channelId}?html5ui=1&autoplay=${playing}`
+    })
     getSDK(SDK_URL, SDK_GLOBAL).then(UstreamEmbed => {
       if (!this.container) return
-      this.autoplay = playing
       this.currentTime = 0
       this.player = UstreamEmbed(this.playerID)
       this.player.addListener('playing', (type, playing) => {
@@ -43,12 +52,8 @@ export class UstreamLive extends Component {
           onPause()
         }
       })
-      this.player.addListener('live', () => {
-        onReady()
-      })
-      this.player.addListener('offline', () => {
-        onReady()
-      })
+      this.player.addListener('live', onReady)
+      this.player.addListener('offline', onReady)
       this.player.addListener('finished', onEnded)
       this.player.getProperty('duration', (duration) => {
         this.player.duration = duration || Infinity
@@ -91,22 +96,17 @@ export class UstreamLive extends Component {
     this.container = container
   }
   render () {
-    const channelId = this.parseId(this.props.url)
-    const base = 'https://www.ustream.tv/embed'
     const style = {
       width: '100%',
       height: '100%'
     }
 
-    if (![true, false].includes(this.autoplay)) {
-      this.autoplay = this.props.playing
-    }
-
+    const {ustreamSrc} = this.state
     return (
-      <iframe
+      ustreamSrc && <iframe
         id={this.playerID}
         ref={this.ref}
-        src={`${base}/${channelId}?html5ui?autoplay=${this.autoplay}`}
+        src={ustreamSrc}
         frameBorder='0'
         scrolling='no'
         style={style}

test-server/index.js

@@ -0,0 +1,29 @@
+const Koa = require('koa')
+const fs = require('fs')
+const path = require('path')
+
+const app = new Koa()
+app.use((ctx) => {
+  const {path: reqPath } = ctx
+  const filePath = path.join(__dirname, '..', 'demo', reqPath === '/' ? '/index.html' : reqPath)
+  const exists = fs.existsSync(filePath)
+  if (!exists) {
+    ctx.status = 404
+    return
+  }
+
+  let type = 'text'
+  if (/html/.test(filePath)) {
+    type = 'text/html'
+  } else if (/css/.test(filePath)) {
+    type = 'text/css'
+  } else if (/js/.test(filePath)) {
+    type = 'text/javascript'
+  }
+  ctx.type = type
+  ctx.status = 200
+  ctx.body = fs.createReadStream(filePath)
+})
+
+app.listen(3050)
+console.log('Test Server listening on port 3050')