Livestream.com player

src/demo/App.js

@@ -274,6 +274,13 @@ class App extends Component {
                 {this.renderLoadButton('https://mixer.com/embed/player/monstercat', 'Test B')}
               </td>
             </tr>
+            <tr>
+              <th>Livestream</th>
+              <td>
+                {this.renderLoadButton('https://livestream.com/accounts/1909571/events/8465750/videos/186258837', 'Test A')}
+                {this.renderLoadButton('https://livestream.com/accounts/11707815/events/4299357', 'Test B')}
+              </td>
+            </tr>
             <tr>
               <th>Mixcloud</th>
               <td>

src/players/Livestream.js

@@ -0,0 +1,116 @@
+import React, { Component } from 'react'
+import { randomString } from '../utils'
+import createSinglePlayer from '../singlePlayer'
+
+// permitted livestream url format
+// livestream.com/account/<accounId>/events/<eventId>(/videos/<videoId>)
+// We add '/player' to the end of the url to force iframe embed
+// other types of livestream urls will fail, however we permit them to use this
+// player so that they get a livestream.com video not found error message
+
+const MATCH_URL = /livestream\.com\//
+const PLAYER_ID_PREFIX = 'Livestream-player-'
+
+export class Livestream extends Component {
+  static displayName = 'Livestream';
+  static canPlay = url => MATCH_URL.test(url)
+
+  playerID = PLAYER_ID_PREFIX + randomString()
+  player = {
+    currentTime: 0
+  }
+  load(url) {
+
+    if (!this.container) {
+      this.props.onReady()
+    } else {
+      setTimeout(() => this.props.onReady(), 3000)
+    }
+  }
+  play() {
+    this.playTime = Date.now()
+    this.props.onPlay()
+  }
+  pause() {
+    this.player.currentTime = this.getCurrentTime()
+    this.playTime = null
+    this.props.onPause()
+  }
+  stop() {
+    this.player.currentTime = this.getCurrentTime()
+    this.playTime = null
+    this.props.onPause()
+  }
+  seekTo(seconds) {
+    // no support
+  }
+  setVolume(fraction) {
+    // no support
+  }
+  mute = () => {
+    // no support
+  }
+  unmute = () => {
+    // no support
+  }
+  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 style = {
+      width: '100%',
+      height: '100%'
+    }
+    const { url, playing } = this.props
+
+    if (playing) {
+      return (
+        <iframe
+          id={this.playerID}
+          ref={this.ref}
+          src={playing && url}
+          frameBorder='0'
+          scrolling='no'
+          style={style}
+          allowFullScreen
+        />
+      )
+    } else {
+      // pause flow for iframe
+      return (
+        <div style={style} >
+          <div style={{
+            alignItems: 'center',
+            background: 'rgba(255,255,255,0.3)',
+            display: 'flex',
+            height: '100%',
+            justifyContent: 'center',
+            width: '100%'
+          }}>
+            <div className='pause' style={{
+              borderStyle: 'double',
+              borderWidth: '0px 0px 0px 50px',
+              color: 'gray',
+              height: '60px'
+            }} />
+          </div>
+        </div>
+      )
+    }
+  }
+}
+
+export default createSinglePlayer(Livestream)

src/players/index.js

@@ -9,6 +9,7 @@ import { Twitch } from './Twitch'
 import { DailyMotion } from './DailyMotion'
 import { UstreamLive } from './UstreamLive'
 import { UstreamVideo } from './UstreamVideo'
+import { Livestream } from './Livestream'
 import { Iframe } from './Iframe'
 import { Mixcloud } from './Mixcloud'
 import { FilePlayer } from './FilePlayer'
@@ -29,5 +30,6 @@ export default [
   UstreamVideo,
   VAST,
   FilePlayer,
+  Livestream,
   Iframe
 ]