Add Vidyard player

README.md

@@ -328,6 +328,7 @@ You can also specify a `type` for each source by using objects with `src` and `t
 * Wistia videos use the [Wistia Player API](https://wistia.com/doc/player-api)
 * Twitch videos use the [Twitch Interactive Frames API](https://dev.twitch.tv/docs/embed#interactive-frames-for-live-streams-and-vods)
 * DailyMotion videos use the [DailyMotion Player API](https://developer.dailymotion.com/player)
+* Vidyard videos use the [Vidyard Player API](https://knowledge.vidyard.com/hc/en-us/articles/360019034753-Using-the-Vidyard-Player-API)
 * [Supported file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats) are playing using [`<video>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/video) or [`<audio>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/audio) elements
   * HLS streams are played using [`hls.js`](https://github.com/video-dev/hls.js)
   * DASH streams are played using [`dash.js`](https://github.com/Dash-Industry-Forum/dash.js)

index.d.ts

@@ -48,6 +48,10 @@ export interface MixcloudConfig {
   options?: Object;
 }
 
+export interface VidyardConfig {
+  options?: Object;
+}
+
 export interface FileConfig {
   attributes?: Object;
   tracks?: TrackProps[];
@@ -69,6 +73,7 @@ export interface Config {
   file?: FileConfig;
   wistia?: WistiaConfig;
   mixcloud?: MixcloudConfig;
+  vidyard?: VidyardConfig;
 }
 
 export interface ReactPlayerProps {

src/demo/App.js

@@ -340,6 +340,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>Vidyard</th>
+                <td>
+                  {this.renderLoadButton('https://video.vidyard.com/watch/YBvcF2BEfvKdowmfrRwk57', 'Test A')}
+                  {this.renderLoadButton('https://video.vidyard.com/watch/BLXgYCDGfwU62vdMWybNVJ', 'Test B')}
+                </td>
+              </tr>
               <tr>
                 <th>Files</th>
                 <td>

src/patterns.js

@@ -9,6 +9,7 @@ export const MATCH_URL_TWITCH_VIDEO = /(?:www\.|go\.)?twitch\.tv\/videos\/(\d+)(
 export const MATCH_URL_TWITCH_CHANNEL = /(?:www\.|go\.)?twitch\.tv\/([a-z0-9_]+)($|\?)/
 export const MATCH_URL_DAILYMOTION = /^(?:(?:https?):)?(?:\/\/)?(?:www\.)?(?:(?:dailymotion\.com(?:\/embed)?\/video)|dai\.ly)\/([a-zA-Z0-9]+)(?:_[\w_-]+)?$/
 export const MATCH_URL_MIXCLOUD = /mixcloud\.com\/([^/]+\/[^/]+)/
+export const MATCH_URL_VIDYARD = /vidyard.com\/(?:watch\/)?([a-zA-Z0-9-]+)/
 export const AUDIO_EXTENSIONS = /\.(m4a|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx)($|\?)/i
 export const VIDEO_EXTENSIONS = /\.(mp4|og[gv]|webm|mov|m4v)($|\?)/i
 export const HLS_EXTENSIONS = /\.(m3u8)($|\?)/i

src/players/Vidyard.js

@@ -0,0 +1,108 @@
+import React, { Component } from 'react'
+
+import { callPlayer, getSDK } from '../utils'
+
+const SDK_URL = 'https://play.vidyard.com/embed/v4.js'
+const SDK_GLOBAL = 'VidyardV4'
+const SDK_GLOBAL_READY = 'onVidyardAPI'
+const MATCH_URL = /vidyard.com\/(?:watch\/)?([a-zA-Z0-9-]+)/
+
+export default class Vidyard extends Component {
+  static displayName = 'Vidyard'
+  static canPlay = url => MATCH_URL.test(url)
+
+  callPlayer = callPlayer
+
+  componentDidMount () {
+    this.props.onMount && this.props.onMount(this)
+  }
+
+  load (url, isReady) {
+    const { config, onError, onDuration } = this.props
+    const id = url && url.match(MATCH_URL)[1]
+    getSDK(SDK_URL, SDK_GLOBAL, SDK_GLOBAL_READY).then(Vidyard => {
+      if (!this.container) return
+      Vidyard.api.addReadyListener((data, player) => {
+        this.player = player
+        this.player.on('ready', this.props.onReady)
+        this.player.on('play', this.props.onPlay)
+        this.player.on('pause', this.props.onPause)
+        this.player.on('seek', this.props.onSeek)
+        this.player.on('playerComplete', this.props.onEnded)
+      }, id)
+      Vidyard.api.renderPlayer({
+        uuid: id,
+        container: this.container,
+        ...config.vidyard.options
+      })
+      Vidyard.api.getPlayerMetadata(id).then(meta => {
+        this.duration = meta.length_in_seconds
+        onDuration(meta.length_in_seconds)
+      })
+    }, onError)
+  }
+
+  play () {
+    this.callPlayer('play')
+  }
+
+  pause () {
+    this.callPlayer('pause')
+  }
+
+  stop () {
+    window.VidyardV4.api.destroyPlayer(this.player)
+  }
+
+  seekTo (amount) {
+    this.callPlayer('seek', amount)
+  }
+
+  setVolume (fraction) {
+    this.callPlayer('setVolume', fraction)
+  }
+
+  mute = () => {
+    this.setVolume(0)
+  }
+
+  unmute = () => {
+    if (this.props.volume !== null) {
+      this.setVolume(this.props.volume)
+    }
+  }
+
+  setPlaybackRate (rate) {
+    this.callPlayer('setPlaybackSpeed', rate)
+  }
+
+  getDuration () {
+    return this.duration
+  }
+
+  getCurrentTime () {
+    return this.callPlayer('currentTime')
+  }
+
+  getSecondsLoaded () {
+    return null
+  }
+
+  ref = container => {
+    this.container = container
+  }
+
+  render () {
+    const { display } = this.props
+    const style = {
+      width: '100%',
+      height: '100%',
+      display
+    }
+    return (
+      <div style={style}>
+        <div ref={this.ref} />
+      </div>
+    )
+  }
+}

src/players/index.js

@@ -13,6 +13,7 @@ import {
   MATCH_URL_TWITCH_CHANNEL,
   MATCH_URL_DAILYMOTION,
   MATCH_URL_MIXCLOUD,
+  MATCH_URL_VIDYARD,
   AUDIO_EXTENSIONS,
   VIDEO_EXTENSIONS,
   HLS_EXTENSIONS,
@@ -92,6 +93,10 @@ export default [
     canPlay: url => MATCH_URL_MIXCLOUD.test(url),
     Player: lazy(() => import('./Mixcloud'))
   },
+  {
+    canPlay: url => MATCH_URL_VIDYARD.test(url),
+    Player: lazy(() => import('./Vidyard'))
+  },
   {
     canPlay: canPlayFile,
     Player: lazy(() => import('./FilePlayer'))

src/props.js

@@ -66,6 +66,9 @@ export const propTypes = {
     twitch: shape({
       options: object,
       playerId: string
+    }),
+    vidyard: shape({
+      options: object
     })
   }),
   onReady: func,
@@ -164,6 +167,9 @@ export const defaultProps = {
     twitch: {
       options: {},
       playerId: null
+    },
+    vidyard: {
+      options: {}
     }
   },
   onReady: function () {},