WIP arc player

bigbluebutton-html5/imports/ui/components/external-video-player/component.jsx

@@ -3,12 +3,16 @@ import injectWbResizeEvent from '/imports/ui/components/presentation/resize-wrap
 import { sendMessage, onMessage } from './service';
 import logger from '/imports/startup/client/logger';
 
+import ArcPlayer from './custom-players/arc-player';
+
 import ReactPlayer from 'react-player';
 
 import { styles } from './styles';
 
 const SYNC_INTERVAL_SECONDS = 2;
 
+ReactPlayer.addCustomPlayer(ArcPlayer);
+
 class VideoPlayer extends Component {
   constructor(props) {
     super(props);

bigbluebutton-html5/imports/ui/components/external-video-player/custom-players/arc-player.jsx

@@ -0,0 +1,186 @@
+import loadScript from 'load-script';
+import React, { Component } from 'react'
+
+const MATCH_URL = new RegExp("https?:\/\/(\\w+)\.(instructuremedia.com)(\/embed)?\/([-abcdef0-9]+)");
+
+const SDK_URL = 'https://dev22.bigbluebutton.org/dist/instructure-media-1.0.0.js';
+
+const EMBED_PATH = "/embed/";
+
+// Util function to load an external SDK
+// or return the SDK if it is already loaded
+const resolves = {}
+export function getSDK (url, sdkGlobal, sdkReady = null, isLoaded = () => true, fetchScript = loadScript) {
+  if (window[sdkGlobal] && isLoaded(window[sdkGlobal])) {
+    return Promise.resolve(window[sdkGlobal])
+  }
+  return new Promise((resolve, reject) => {
+    // If we are already loading the SDK, add the resolve
+    // function to the existing array of resolve functions
+    if (resolves[url]) {
+      resolves[url].push(resolve)
+      return
+    }
+    resolves[url] = [resolve]
+    const onLoaded = sdk => {
+      // When loaded, resolve all pending promises
+      resolves[url].forEach(resolve => resolve(sdk))
+    }
+    if (sdkReady) {
+      const previousOnReady = window[sdkReady]
+      window[sdkReady] = function () {
+        if (previousOnReady) previousOnReady()
+        onLoaded(window[sdkGlobal])
+      }
+    }
+    fetchScript(url, err => {
+      if (err) reject(err)
+      if (!sdkReady) {
+        onLoaded(window[sdkGlobal])
+      }
+    })
+  })
+}
+
+export class ArcPlayer extends Component {
+  static displayName = 'ArcPlayer'
+
+  static canPlay = url => {
+    return MATCH_URL.test(url)
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.currentTime = 0;
+    this.updateCurrentTime = this.updateCurrentTime.bind(this);
+    this.getCurrentTime = this.getCurrentTime.bind(this);
+    this.getEmbedUrl = this.getEmbedUrl.bind(this);
+    this.onStateChange = this.onStateChange.bind(this);
+  }
+
+  load() {
+    console.log("LOAD THE BOIS");
+    new Promise((resolve, reject) => {
+      this.render();
+      resolve();
+    })
+    .then(() => { return getSDK(SDK_URL, 'ArcPlayer') })
+    .then(() => {
+      console.log(this.container);
+      this.player = new InstructureMedia.Player('arcPlayerContainer', {
+        height: '100%',
+        width: '100%',
+        embedUrl: this.getEmbedUrl(),
+        events: {
+          onStateChange: this.onStateChange,
+        }
+      });
+    });
+  }
+
+  onStateChange(event) {
+    console.log('js_api index.development.html onStateChange', event);
+
+    console.log(this.player);
+
+    if (event.data === "CUED") {
+      this.props.onReady();
+    } else if (event.data === "PLAYING") {
+      this.props.onPlay && this.props.onPlay();
+    } else if (event.data === "PAUSED") {
+      this.props.onPause && this.props.onPause();
+    } else if (event.data === "SEEKING") {
+
+    }
+  }
+
+  updateCurrentTime(e) {
+    this.currentTime = e;
+  }
+
+  getVideoId() {
+    const { url } = this.props;
+    const m = url.match(MATCH_URL);
+    return m && m[4];
+  }
+
+  getHostUrl() {
+    const { url } = this.props;
+    const m = url.match(MATCH_URL);
+    return m && 'https://' + m[1] + '.' + m[2];
+  }
+
+  getEmbedUrl() {
+    let url = this.getHostUrl() + EMBED_PATH + this.getVideoId();
+    console.log(url);
+    return url;
+  }
+
+  play() {
+    this.player.playVideo();
+  }
+
+  pause() {
+    this.player.pauseVideo();
+  }
+
+  stop() {
+    // TODO: STOP
+  }
+
+  seekTo(seconds) {
+    this.player.seekTo(seconds);
+  }
+
+  setVolume(fraction) {
+    // console.log("SET VOLUME");
+  }
+
+  setLoop(loop) {
+    // console.log("SET LOOP");
+  }
+
+  mute() {
+    // console.log("SET MUTE");
+  }
+
+  unmute() {
+    // console.log("SET UNMUTE");
+  }
+
+  getDuration() {
+    //console.log("GET DURATION");
+  }
+
+  getCurrentTime () {
+    //console.log("GET CURRENT TIME");
+    return this.currentTime;
+  }
+
+  getSecondsLoaded () {
+  }
+
+  render () {
+    const style = {
+      width: '100%',
+      height: '100%',
+      overflow: 'hidden',
+      backgroundColor: 'black'
+    }
+    return (
+      <div
+        key={this.props.url}
+        style={style}
+        id={"arcPlayerContainer"}
+        ref={(container) => {
+          this.container = container;
+        }}
+      >
+      </div>
+    )
+  }
+}
+
+export default ArcPlayer;
+