BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

First working version of Arc media player

Browse Source
This commit is contained in:
Lucas Zawacki 2019-08-26 16:50:59 -03:00
parent 41e0af264d
commit 630f470672
1 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,12 +3,12 @@ import React, { Component } from 'react'
const MATCH_URL = new RegExp("https?:\/\/(\\w+)\.(instructuremedia.com)(\/embed)?\/([-abcdef0-9]+)"); 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 SDK_URL = 'https://files.instructuremedia.com/instructure-media-script/instructure-media-1.1.0.js';
const EMBED_PATH = "/embed/"; const EMBED_PATH = "/embed/";
// Util function to load an external SDK // Util function to load an external SDK or return the SDK if it is already loaded
// or return the SDK if it is already loaded // From https://github.com/CookPete/react-player/blob/master/src/utils.js
const resolves = {} const resolves = {}
export function getSDK (url, sdkGlobal, sdkReady = null, isLoaded = () => true, fetchScript = loadScript) { export function getSDK (url, sdkGlobal, sdkReady = null, isLoaded = () => true, fetchScript = loadScript) {
if (window[sdkGlobal] && isLoaded(window[sdkGlobal])) { if (window[sdkGlobal] && isLoaded(window[sdkGlobal])) {
@ -34,7 +34,10 @@ export function getSDK (url, sdkGlobal, sdkReady = null, isLoaded = () => true,
} }
} }
fetchScript(url, err => { fetchScript(url, err => {
if (err) reject(err) if (err) {
reject(err);
}
window[sdkGlobal] = url;
if (!sdkReady) { if (!sdkReady) {
onLoaded(window[sdkGlobal]) onLoaded(window[sdkGlobal])
} }
@ -60,14 +63,12 @@ export class ArcPlayer extends Component {
} }
load() { load() {
console.log("LOAD THE BOIS");
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
this.render(); this.render();
resolve(); resolve();
}) })
.then(() => { return getSDK(SDK_URL, 'ArcPlayer') }) .then(() => { return getSDK(SDK_URL, 'ArcPlayer') })
.then(() => { .then(() => {
console.log(this.container);
this.player = new InstructureMedia.Player('arcPlayerContainer', { this.player = new InstructureMedia.Player('arcPlayerContainer', {
height: '100%', height: '100%',
width: '100%', width: '100%',
@ -76,13 +77,15 @@ export class ArcPlayer extends Component {
onStateChange: this.onStateChange, onStateChange: this.onStateChange,
} }
}); });
this.player.playVideo();
}); });
} }
onStateChange(event) { onStateChange(event) {
console.log('js_api index.development.html onStateChange', event); console.log('js_api index.development.html onStateChange', event);
this.player.getCurrentTime().then((t) => {
console.log(this.player); this.updateCurrentTime(t.data);
});
if (event.data === "CUED") { if (event.data === "CUED") {
this.props.onReady(); this.props.onReady();
@ -90,8 +93,10 @@ export class ArcPlayer extends Component {
this.props.onPlay && this.props.onPlay(); this.props.onPlay && this.props.onPlay();
} else if (event.data === "PAUSED") { } else if (event.data === "PAUSED") {
this.props.onPause && this.props.onPause(); this.props.onPause && this.props.onPause();
} else if (event.data === "SEEKED") {
// TODO
} else if (event.data === "SEEKING") { } else if (event.data === "SEEKING") {
// TODO
} }
} }
@ -113,7 +118,6 @@ export class ArcPlayer extends Component {
getEmbedUrl() { getEmbedUrl() {
let url = this.getHostUrl() + EMBED_PATH + this.getVideoId(); let url = this.getHostUrl() + EMBED_PATH + this.getVideoId();
console.log(url);
return url; return url;
} }
@ -154,7 +158,6 @@ export class ArcPlayer extends Component {
} }
getCurrentTime () { getCurrentTime () {
//console.log("GET CURRENT TIME");
return this.currentTime; return this.currentTime;
} }