mirror of https://github.com/jitsi/jitsi-meet
isymchych
9 years ago
parent
e494c3028d
commit
0fd0f5b633
File diff suppressed because it is too large
Load Diff
@ -1,345 +1,377 @@ |
||||
/* global $, APP */ |
||||
/* jshint -W101 */ |
||||
import UIUtil from "../util/UIUtil"; |
||||
|
||||
import VideoLayout from "../videolayout/VideoLayout"; |
||||
import LargeContainer from '../videolayout/LargeContainer'; |
||||
import PreziPlayer from './PreziPlayer'; |
||||
import UIUtil from '../util/UIUtil'; |
||||
import UIEvents from '../../../service/UI/UIEvents'; |
||||
import messageHandler from '../util/MessageHandler'; |
||||
import ToolbarToggler from "../toolbars/ToolbarToggler"; |
||||
import SidePanelToggler from "../side_pannels/SidePanelToggler"; |
||||
|
||||
var messageHandler = require("../util/MessageHandler"); |
||||
var PreziPlayer = require("./PreziPlayer"); |
||||
const defaultPreziLink = "http://prezi.com/wz7vhjycl7e6/my-prezi"; |
||||
const alphanumRegex = /^[a-z0-9-_\/&\?=;]+$/i; |
||||
const aspectRatio = 16.0 / 9.0; |
||||
|
||||
var preziPlayer = null; |
||||
const DEFAULT_WIDTH = 640; |
||||
const DEFAULT_HEIGHT = 480; |
||||
|
||||
/** |
||||
* Indicates if the given string is an alphanumeric string. |
||||
* Note that some special characters are also allowed (-, _ , /, &, ?, =, ;) for the |
||||
* purpose of checking URIs. |
||||
*/ |
||||
function isAlphanumeric(unsafeText) { |
||||
return alphanumRegex.test(unsafeText); |
||||
} |
||||
|
||||
/** |
||||
* Shows/hides a presentation. |
||||
* Returns the presentation id from the given url. |
||||
*/ |
||||
function setPresentationVisible(visible) { |
||||
function getPresentationId (url) { |
||||
let presId = url.substring(url.indexOf("prezi.com/") + 10); |
||||
return presId.substring(0, presId.indexOf('/')); |
||||
} |
||||
|
||||
if (visible) { |
||||
VideoLayout.setLargeVideoState("prezi"); |
||||
function isPreziLink(url) { |
||||
if (url.indexOf('http://prezi.com/') !== 0 && url.indexOf('https://prezi.com/') !== 0) { |
||||
return false; |
||||
} |
||||
else { |
||||
VideoLayout.setLargeVideoState("video"); |
||||
|
||||
let presId = url.substring(url.indexOf("prezi.com/") + 10); |
||||
if (!isAlphanumeric(presId) || presId.indexOf('/') < 2) { |
||||
return false; |
||||
} |
||||
} |
||||
|
||||
var Prezi = { |
||||
return true; |
||||
} |
||||
|
||||
function notifyOtherIsSharingPrezi() { |
||||
messageHandler.openMessageDialog( |
||||
"dialog.sharePreziTitle", |
||||
"dialog.sharePreziMsg" |
||||
); |
||||
} |
||||
|
||||
/** |
||||
* Reloads the current presentation. |
||||
*/ |
||||
reloadPresentation: function() { |
||||
var iframe = document.getElementById(preziPlayer.options.preziId); |
||||
iframe.src = iframe.src; |
||||
}, |
||||
|
||||
/** |
||||
* Returns <tt>true</tt> if the presentation is visible, <tt>false</tt> - |
||||
* otherwise. |
||||
*/ |
||||
isPresentationVisible: function () { |
||||
return ($('#presentation>iframe') != null |
||||
&& $('#presentation>iframe').css('opacity') == 1); |
||||
}, |
||||
|
||||
/** |
||||
* Opens the Prezi dialog, from which the user could choose a presentation |
||||
* to load. |
||||
*/ |
||||
openPreziDialog: function() { |
||||
var myprezi = APP.xmpp.getPrezi(); |
||||
if (myprezi) { |
||||
messageHandler.openTwoButtonDialog("dialog.removePreziTitle", |
||||
null, |
||||
"dialog.removePreziMsg", |
||||
null, |
||||
false, |
||||
"dialog.Remove", |
||||
function(e,v,m,f) { |
||||
if(v) { |
||||
APP.xmpp.removePreziFromPresence(); |
||||
} |
||||
} |
||||
); |
||||
} |
||||
else if (preziPlayer != null) { |
||||
messageHandler.openTwoButtonDialog("dialog.sharePreziTitle", |
||||
null, "dialog.sharePreziMsg", |
||||
null, |
||||
false, |
||||
"dialog.Ok", |
||||
function(e,v,m,f) { |
||||
$.prompt.close(); |
||||
function proposeToClosePrezi() { |
||||
return new Promise(function (resolve, reject) { |
||||
messageHandler.openTwoButtonDialog( |
||||
"dialog.removePreziTitle", |
||||
null, |
||||
"dialog.removePreziMsg", |
||||
null, |
||||
false, |
||||
"dialog.Remove", |
||||
function(e,v,m,f) { |
||||
if (v) { |
||||
resolve(); |
||||
} else { |
||||
reject(); |
||||
} |
||||
); |
||||
} |
||||
else { |
||||
var html = APP.translation.generateTranslationHTML( |
||||
"dialog.sharePreziTitle"); |
||||
var cancelButton = APP.translation.generateTranslationHTML( |
||||
"dialog.Cancel"); |
||||
var shareButton = APP.translation.generateTranslationHTML( |
||||
"dialog.Share"); |
||||
var backButton = APP.translation.generateTranslationHTML( |
||||
"dialog.Back"); |
||||
var buttons = []; |
||||
var buttons1 = []; |
||||
// Cancel button to both states
|
||||
buttons.push({title: cancelButton, value: false}); |
||||
buttons1.push({title: cancelButton, value: false}); |
||||
// Share button
|
||||
buttons.push({title: shareButton, value: true}); |
||||
// Back button
|
||||
buttons1.push({title: backButton, value: true}); |
||||
var linkError = APP.translation.generateTranslationHTML( |
||||
"dialog.preziLinkError"); |
||||
var defaultUrl = APP.translation.translateString("defaultPreziLink", |
||||
{url: "http://prezi.com/wz7vhjycl7e6/my-prezi"}); |
||||
var openPreziState = { |
||||
state0: { |
||||
html: '<h2>' + html + '</h2>' + |
||||
'<input name="preziUrl" type="text" ' + |
||||
'data-i18n="[placeholder]defaultPreziLink" data-i18n-options=\'' + |
||||
JSON.stringify({"url": "http://prezi.com/wz7vhjycl7e6/my-prezi"}) + |
||||
'\' placeholder="' + defaultUrl + '" autofocus>', |
||||
persistent: false, |
||||
buttons: buttons, |
||||
focus: ':input:first', |
||||
defaultButton: 0, |
||||
submit: function (e, v, m, f) { |
||||
e.preventDefault(); |
||||
if(v) |
||||
{ |
||||
var preziUrl = f.preziUrl; |
||||
|
||||
if (preziUrl) |
||||
{ |
||||
var urlValue |
||||
= encodeURI(UIUtil.escapeHtml(preziUrl)); |
||||
|
||||
if (urlValue.indexOf('http://prezi.com/') != 0 |
||||
&& urlValue.indexOf('https://prezi.com/') != 0) |
||||
{ |
||||
$.prompt.goToState('state1'); |
||||
return false; |
||||
} |
||||
else { |
||||
var presIdTmp = urlValue.substring( |
||||
urlValue.indexOf("prezi.com/") + 10); |
||||
if (!isAlphanumeric(presIdTmp) |
||||
|| presIdTmp.indexOf('/') < 2) { |
||||
$.prompt.goToState('state1'); |
||||
return false; |
||||
} |
||||
else { |
||||
APP.xmpp.addToPresence("prezi", urlValue); |
||||
$.prompt.close(); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
else |
||||
$.prompt.close(); |
||||
} |
||||
); |
||||
|
||||
}); |
||||
} |
||||
|
||||
function requestPreziLink() { |
||||
const title = APP.translation.generateTranslationHTML("dialog.sharePreziTitle"); |
||||
const cancelButton = APP.translation.generateTranslationHTML("dialog.Cancel"); |
||||
const shareButton = APP.translation.generateTranslationHTML("dialog.Share"); |
||||
const backButton = APP.translation.generateTranslationHTML("dialog.Back"); |
||||
const linkError = APP.translation.generateTranslationHTML("dialog.preziLinkError"); |
||||
const i18nOptions = {url: defaultPreziLink}; |
||||
const defaultUrl = APP.translation.translateString( |
||||
"defaultPreziLink", i18nOptions |
||||
); |
||||
|
||||
return new Promise(function (resolve, reject) { |
||||
let dialog = messageHandler.openDialogWithStates({ |
||||
state0: { |
||||
html: ` |
||||
<h2>${title}</h2> |
||||
<input name="preziUrl" type="text" |
||||
data-i18n="[placeholder]defaultPreziLink" |
||||
data-i18n-options="${JSON.stringify(i18nOptions)}" |
||||
placeholder="${defaultUrl}" autofocus>`,
|
||||
persistent: false, |
||||
buttons: [ |
||||
{title: cancelButton, value: false}, |
||||
{title: shareButton, value: true} |
||||
], |
||||
focus: ':input:first', |
||||
defaultButton: 1, |
||||
submit: function (e, v, m, f) { |
||||
e.preventDefault(); |
||||
if (!v) { |
||||
reject('cancelled'); |
||||
dialog.close(); |
||||
return; |
||||
} |
||||
}, |
||||
state1: { |
||||
html: '<h2>' + html + '</h2>' + |
||||
linkError, |
||||
persistent: false, |
||||
buttons: buttons1, |
||||
focus: ':input:first', |
||||
defaultButton: 1, |
||||
submit: function (e, v, m, f) { |
||||
e.preventDefault(); |
||||
if (v === 0) |
||||
$.prompt.close(); |
||||
else |
||||
$.prompt.goToState('state0'); |
||||
|
||||
let preziUrl = f.preziUrl; |
||||
if (!preziUrl) { |
||||
return; |
||||
} |
||||
} |
||||
}; |
||||
messageHandler.openDialogWithStates(openPreziState); |
||||
} |
||||
} |
||||
|
||||
}; |
||||
let urlValue = encodeURI(UIUtil.escapeHtml(preziUrl)); |
||||
|
||||
/** |
||||
* A new presentation has been added. |
||||
* |
||||
* @param event the event indicating the add of a presentation |
||||
* @param jid the jid from which the presentation was added |
||||
* @param presUrl url of the presentation |
||||
* @param currentSlide the current slide to which we should move |
||||
*/ |
||||
function presentationAdded(event, jid, presUrl, currentSlide) { |
||||
console.log("presentation added", presUrl); |
||||
if (!isPreziLink(urlValue)) { |
||||
dialog.goToState('state1'); |
||||
return false; |
||||
} |
||||
|
||||
var presId = getPresentationId(presUrl); |
||||
resolve(urlValue); |
||||
dialog.close(); |
||||
} |
||||
}, |
||||
|
||||
state1: { |
||||
html: `<h2>${title}</h2> ${linkError}`, |
||||
persistent: false, |
||||
buttons: [ |
||||
{title: cancelButton, value: false}, |
||||
{title: backButton, value: true} |
||||
], |
||||
focus: ':input:first', |
||||
defaultButton: 1, |
||||
submit: function (e, v, m, f) { |
||||
e.preventDefault(); |
||||
if (v === 0) { |
||||
reject(); |
||||
dialog.close(); |
||||
} else { |
||||
dialog.goToState('state0'); |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
var elementId = 'participant_' |
||||
+ Strophe.getResourceFromJid(jid) |
||||
+ '_' + presId; |
||||
}); |
||||
} |
||||
|
||||
VideoLayout.addPreziContainer(elementId); |
||||
export const PreziContainerType = "prezi"; |
||||
|
||||
var controlsEnabled = false; |
||||
if (jid === APP.xmpp.myJid()) |
||||
controlsEnabled = true; |
||||
class PreziContainer extends LargeContainer { |
||||
|
||||
setPresentationVisible(true); |
||||
VideoLayout.setLargeVideoHover( |
||||
function (event) { |
||||
if (Prezi.isPresentationVisible()) { |
||||
var reloadButtonRight = window.innerWidth |
||||
- $('#presentation>iframe').offset().left |
||||
- $('#presentation>iframe').width(); |
||||
constructor ({preziId, isMy, slide, onSlideChanged}) { |
||||
super(); |
||||
this.reloadBtn = $('#reloadPresentation'); |
||||
|
||||
$('#reloadPresentation').css({ right: reloadButtonRight, |
||||
display:'inline-block'}); |
||||
let preziPlayer = new PreziPlayer( |
||||
'presentation', { |
||||
preziId, |
||||
width: DEFAULT_WIDTH, |
||||
height: DEFAULT_HEIGHT, |
||||
controls: isMy, |
||||
debug: true |
||||
} |
||||
}, |
||||
function (event) { |
||||
if (!Prezi.isPresentationVisible()) |
||||
$('#reloadPresentation').css({display:'none'}); |
||||
else { |
||||
var e = event.toElement || event.relatedTarget; |
||||
|
||||
if (e && e.id != 'reloadPresentation' && e.id != 'header') |
||||
$('#reloadPresentation').css({display:'none'}); |
||||
); |
||||
this.preziPlayer = preziPlayer; |
||||
this.$iframe = $(preziPlayer.iframe); |
||||
|
||||
this.$iframe.attr('id', preziId); |
||||
|
||||
preziPlayer.on(PreziPlayer.EVENT_STATUS, function({value}) { |
||||
console.log("prezi status", value); |
||||
if (value == PreziPlayer.STATUS_CONTENT_READY && !isMy) { |
||||
preziPlayer.flyToStep(slide); |
||||
} |
||||
}); |
||||
|
||||
preziPlayer = new PreziPlayer( |
||||
'presentation', |
||||
{preziId: presId, |
||||
width: getPresentationWidth(), |
||||
height: getPresentationHeihgt(), |
||||
controls: controlsEnabled, |
||||
debug: true |
||||
preziPlayer.on(PreziPlayer.EVENT_CURRENT_STEP, function({value}) { |
||||
console.log("event value", value); |
||||
onSlideChanged(value); |
||||
}); |
||||
} |
||||
|
||||
goToSlide (slide) { |
||||
if (this.preziPlayer.getCurrentStep() === slide) { |
||||
return; |
||||
} |
||||
|
||||
$('#presentation>iframe').attr('id', preziPlayer.options.preziId); |
||||
this.preziPlayer.flyToStep(slide); |
||||
|
||||
preziPlayer.on(PreziPlayer.EVENT_STATUS, function(event) { |
||||
console.log("prezi status", event.value); |
||||
if (event.value == PreziPlayer.STATUS_CONTENT_READY) { |
||||
if (jid != APP.xmpp.myJid()) |
||||
preziPlayer.flyToStep(currentSlide); |
||||
let animationStepsArray = this.preziPlayer.getAnimationCountOnSteps(); |
||||
if (!animationStepsArray) { |
||||
return; |
||||
} |
||||
}); |
||||
|
||||
preziPlayer.on(PreziPlayer.EVENT_CURRENT_STEP, function(event) { |
||||
console.log("event value", event.value); |
||||
APP.xmpp.addToPresence("preziSlide", event.value); |
||||
}); |
||||
for (var i = 0; i < parseInt(animationStepsArray[slide]); i += 1) { |
||||
this.preziPlayer.flyToStep(slide, i); |
||||
} |
||||
} |
||||
|
||||
showReloadBtn (show) { |
||||
this.reloadBtn.css('display', show ? 'inline-block' : 'none'); |
||||
} |
||||
|
||||
show () { |
||||
return new Promise(resolve => { |
||||
this.$iframe.fadeIn(300, () => { |
||||
this.$iframe.css({opacity: 1}); |
||||
ToolbarToggler.dockToolbar(true); |
||||
resolve(); |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
hide () { |
||||
return new Promise(resolve => { |
||||
this.$iframe.fadeOut(300, () => { |
||||
this.$iframe.css({opacity: 0}); |
||||
this.showReloadBtn(false); |
||||
ToolbarToggler.dockToolbar(false); |
||||
resolve(); |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
onHoverIn () { |
||||
let rightOffset = window.innerWidth - this.$iframe.offset().left - this.$iframe.width(); |
||||
|
||||
this.showReloadBtn(true); |
||||
this.reloadBtn.css('right', rightOffset); |
||||
} |
||||
|
||||
$("#" + elementId).css( 'background-image', |
||||
'url(../images/avatarprezi.png)'); |
||||
$("#" + elementId).click( |
||||
function () { |
||||
setPresentationVisible(true); |
||||
onHoverOut (event) { |
||||
let e = event.toElement || event.relatedTarget; |
||||
|
||||
if (e && e.id != 'reloadPresentation' && e.id != 'header') { |
||||
this.showReloadBtn(false); |
||||
} |
||||
); |
||||
}; |
||||
} |
||||
|
||||
/** |
||||
* A presentation has been removed. |
||||
* |
||||
* @param event the event indicating the remove of a presentation |
||||
* @param jid the jid for which the presentation was removed |
||||
* @param the url of the presentation |
||||
*/ |
||||
function presentationRemoved(event, jid, presUrl) { |
||||
console.log('presentation removed', presUrl); |
||||
var presId = getPresentationId(presUrl); |
||||
setPresentationVisible(false); |
||||
$('#participant_' |
||||
+ Strophe.getResourceFromJid(jid) |
||||
+ '_' + presId).remove(); |
||||
$('#presentation>iframe').remove(); |
||||
if (preziPlayer != null) { |
||||
preziPlayer.destroy(); |
||||
preziPlayer = null; |
||||
resize (containerWidth, containerHeight) { |
||||
let remoteVideos = $('#remoteVideos'); |
||||
let height = containerHeight - remoteVideos.outerHeight(); |
||||
|
||||
let width = containerWidth; |
||||
|
||||
if (height < width / aspectRatio) { |
||||
width = Math.floor(height * aspectRatio); |
||||
} |
||||
|
||||
this.$iframe.width(width).height(height); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* Indicates if the given string is an alphanumeric string. |
||||
* Note that some special characters are also allowed (-, _ , /, &, ?, =, ;) for the |
||||
* purpose of checking URIs. |
||||
*/ |
||||
function isAlphanumeric(unsafeText) { |
||||
var regex = /^[a-z0-9-_\/&\?=;]+$/i; |
||||
return regex.test(unsafeText); |
||||
close () { |
||||
this.showReloadBtn(false); |
||||
this.preziPlayer.destroy(); |
||||
this.$iframe.remove(); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Returns the presentation id from the given url. |
||||
*/ |
||||
function getPresentationId (presUrl) { |
||||
var presIdTmp = presUrl.substring(presUrl.indexOf("prezi.com/") + 10); |
||||
return presIdTmp.substring(0, presIdTmp.indexOf('/')); |
||||
} |
||||
export default class PreziManager { |
||||
constructor (emitter) { |
||||
this.emitter = emitter; |
||||
|
||||
/** |
||||
* Returns the presentation width. |
||||
*/ |
||||
function getPresentationWidth() { |
||||
var availableWidth = UIUtil.getAvailableVideoWidth(); |
||||
var availableHeight = getPresentationHeihgt(); |
||||
this.userId = null; |
||||
this.url = null; |
||||
this.prezi = null; |
||||
|
||||
var aspectRatio = 16.0 / 9.0; |
||||
if (availableHeight < availableWidth / aspectRatio) { |
||||
availableWidth = Math.floor(availableHeight * aspectRatio); |
||||
$("#reloadPresentationLink").click(this.reloadPresentation.bind(this)); |
||||
} |
||||
return availableWidth; |
||||
} |
||||
|
||||
/** |
||||
* Returns the presentation height. |
||||
*/ |
||||
function getPresentationHeihgt() { |
||||
var remoteVideos = $('#remoteVideos'); |
||||
return window.innerHeight - remoteVideos.outerHeight(); |
||||
} |
||||
get isPresenting () { |
||||
return !!this.userId; |
||||
} |
||||
|
||||
/** |
||||
* Resizes the presentation iframe. |
||||
*/ |
||||
function resize() { |
||||
if ($('#presentation>iframe')) { |
||||
$('#presentation>iframe').width(getPresentationWidth()); |
||||
$('#presentation>iframe').height(getPresentationHeihgt()); |
||||
get isMyPrezi () { |
||||
return this.userId === APP.conference.localId; |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Presentation has been removed. |
||||
*/ |
||||
$(document).bind('presentationremoved.muc', presentationRemoved); |
||||
isSharing (id) { |
||||
return this.userId === id; |
||||
} |
||||
|
||||
/** |
||||
* Presentation has been added. |
||||
*/ |
||||
$(document).bind('presentationadded.muc', presentationAdded); |
||||
handlePreziButtonClicked () { |
||||
if (!this.isPresenting) { |
||||
requestPreziLink().then( |
||||
url => this.emitter.emit(UIEvents.SHARE_PREZI, url, 0), |
||||
err => console.error('PREZI CANCELED', err) |
||||
); |
||||
return; |
||||
} |
||||
|
||||
/* |
||||
* Indicates presentation slide change. |
||||
*/ |
||||
$(document).bind('gotoslide.muc', function (event, jid, presUrl, current) { |
||||
if (preziPlayer && preziPlayer.getCurrentStep() != current) { |
||||
preziPlayer.flyToStep(current); |
||||
if (this.isMyPrezi) { |
||||
proposeToClosePrezi().then(() => this.emitter.emit(UIEvents.STOP_SHARING_PREZI)); |
||||
} else { |
||||
notifyOtherIsSharingPrezi(); |
||||
} |
||||
} |
||||
|
||||
var animationStepsArray = preziPlayer.getAnimationCountOnSteps(); |
||||
for (var i = 0; i < parseInt(animationStepsArray[current]); i++) { |
||||
preziPlayer.flyToStep(current, i); |
||||
reloadPresentation () { |
||||
if (!this.prezi) { |
||||
return; |
||||
} |
||||
let iframe = this.prezi.$iframe[0]; |
||||
iframe.src = iframe.src; |
||||
} |
||||
|
||||
showPrezi (id, url, slide) { |
||||
if (!this.isPresenting) { |
||||
this.createPrezi(id, url, slide); |
||||
} |
||||
|
||||
if (this.userId === id && this.url === url) { |
||||
this.prezi.goToSlide(slide); |
||||
} else { |
||||
console.error(this.userId, id); |
||||
console.error(this.url, url); |
||||
throw new Error("unexpected presentation change"); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
$(window).resize(function () { |
||||
resize(); |
||||
}); |
||||
createPrezi (id, url, slide) { |
||||
console.log("presentation added", url); |
||||
|
||||
this.userId = id; |
||||
this.url = url; |
||||
|
||||
let preziId = getPresentationId(url); |
||||
let elementId = `participant_${id}_${preziId}`; |
||||
|
||||
module.exports = Prezi; |
||||
this.$thumb = $(VideoLayout.addRemoteVideoContainer(elementId)); |
||||
VideoLayout.resizeThumbnails(); |
||||
this.$thumb.css({ |
||||
'background-image': 'url(../images/avatarprezi.png)' |
||||
}).click(() => VideoLayout.showLargeVideoContainer(PreziContainerType, true)); |
||||
|
||||
this.prezi = new PreziContainer({ |
||||
preziId, |
||||
isMy: this.isMyPrezi, |
||||
slide, |
||||
onSlideChanged: newSlide => { |
||||
if (this.isMyPrezi) { |
||||
this.emitter.emit(UIEvents.SHARE_PREZI, url, newSlide); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
VideoLayout.addLargeVideoContainer(PreziContainerType, this.prezi); |
||||
VideoLayout.showLargeVideoContainer(PreziContainerType, true); |
||||
} |
||||
|
||||
removePrezi (id) { |
||||
if (this.userId !== id) { |
||||
throw new Error(`cannot close presentation from ${this.userId} instead of ${id}`); |
||||
} |
||||
|
||||
this.$thumb.remove(); |
||||
this.$thumb = null; |
||||
|
||||
// wait until Prezi is hidden, then remove it
|
||||
VideoLayout.showLargeVideoContainer(PreziContainerType, false).then(() => { |
||||
console.log("presentation removed", this.url); |
||||
|
||||
VideoLayout.removeLargeVideoContainer(PreziContainerType); |
||||
|
||||
this.userId = null; |
||||
this.url = null; |
||||
this.prezi.close(); |
||||
this.prezi = null; |
||||
}); |
||||
} |
||||
} |
||||
|
||||
@ -1,298 +1,290 @@ |
||||
/* global PreziPlayer */ |
||||
/* jshint -W101 */ |
||||
(function() { |
||||
"use strict"; |
||||
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; |
||||
|
||||
window.PreziPlayer = (function() { |
||||
|
||||
PreziPlayer.API_VERSION = 1; |
||||
PreziPlayer.CURRENT_STEP = 'currentStep'; |
||||
PreziPlayer.CURRENT_ANIMATION_STEP = 'currentAnimationStep'; |
||||
PreziPlayer.CURRENT_OBJECT = 'currentObject'; |
||||
PreziPlayer.STATUS_LOADING = 'loading'; |
||||
PreziPlayer.STATUS_READY = 'ready'; |
||||
PreziPlayer.STATUS_CONTENT_READY = 'contentready'; |
||||
PreziPlayer.EVENT_CURRENT_STEP = "currentStepChange"; |
||||
PreziPlayer.EVENT_CURRENT_ANIMATION_STEP = "currentAnimationStepChange"; |
||||
PreziPlayer.EVENT_CURRENT_OBJECT = "currentObjectChange"; |
||||
PreziPlayer.EVENT_STATUS = "statusChange"; |
||||
PreziPlayer.EVENT_PLAYING = "isAutoPlayingChange"; |
||||
PreziPlayer.EVENT_IS_MOVING = "isMovingChange"; |
||||
PreziPlayer.domain = "https://prezi.com"; |
||||
PreziPlayer.path = "/player/"; |
||||
PreziPlayer.players = {}; |
||||
PreziPlayer.binded_methods = ['changesHandler']; |
||||
|
||||
PreziPlayer.createMultiplePlayers = function(optionArray){ |
||||
for(var i=0; i<optionArray.length; i++) { |
||||
var optionSet = optionArray[i]; |
||||
new PreziPlayer(optionSet.id, optionSet); |
||||
} |
||||
}; |
||||
|
||||
PreziPlayer.messageReceived = function(event){ |
||||
var message, item, player; |
||||
try { |
||||
message = JSON.parse(event.data); |
||||
if (message.id && (player = PreziPlayer.players[message.id])) { |
||||
if (player.options.debug === true) { |
||||
if (console && console.log) |
||||
console.log('received', message); |
||||
} |
||||
if (message.type === "changes") { |
||||
player.changesHandler(message); |
||||
} |
||||
for (var i = 0; i < player.callbacks.length; i++) { |
||||
item = player.callbacks[i]; |
||||
if (item && message.type === item.event) { |
||||
item.callback(message); |
||||
} |
||||
} |
||||
} |
||||
} catch (e) { } |
||||
}; |
||||
|
||||
/*jshint -W004 */ |
||||
function PreziPlayer(id, options) { |
||||
/*jshint +W004 */ |
||||
var params, paramString = "", _this = this; |
||||
if (PreziPlayer.players[id]){ |
||||
PreziPlayer.players[id].destroy(); |
||||
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; |
||||
|
||||
PreziPlayer.API_VERSION = 1; |
||||
PreziPlayer.CURRENT_STEP = 'currentStep'; |
||||
PreziPlayer.CURRENT_ANIMATION_STEP = 'currentAnimationStep'; |
||||
PreziPlayer.CURRENT_OBJECT = 'currentObject'; |
||||
PreziPlayer.STATUS_LOADING = 'loading'; |
||||
PreziPlayer.STATUS_READY = 'ready'; |
||||
PreziPlayer.STATUS_CONTENT_READY = 'contentready'; |
||||
PreziPlayer.EVENT_CURRENT_STEP = "currentStepChange"; |
||||
PreziPlayer.EVENT_CURRENT_ANIMATION_STEP = "currentAnimationStepChange"; |
||||
PreziPlayer.EVENT_CURRENT_OBJECT = "currentObjectChange"; |
||||
PreziPlayer.EVENT_STATUS = "statusChange"; |
||||
PreziPlayer.EVENT_PLAYING = "isAutoPlayingChange"; |
||||
PreziPlayer.EVENT_IS_MOVING = "isMovingChange"; |
||||
PreziPlayer.domain = "https://prezi.com"; |
||||
PreziPlayer.path = "/player/"; |
||||
PreziPlayer.players = {}; |
||||
PreziPlayer.binded_methods = ['changesHandler']; |
||||
|
||||
PreziPlayer.createMultiplePlayers = function(optionArray){ |
||||
for(var i=0; i<optionArray.length; i++) { |
||||
var optionSet = optionArray[i]; |
||||
new PreziPlayer(optionSet.id, optionSet); |
||||
} |
||||
}; |
||||
|
||||
PreziPlayer.messageReceived = function(event){ |
||||
var message, item, player; |
||||
try { |
||||
message = JSON.parse(event.data); |
||||
if (message.id && (player = PreziPlayer.players[message.id])) { |
||||
if (player.options.debug === true) { |
||||
if (console && console.log) |
||||
console.log('received', message); |
||||
} |
||||
for(var i=0; i<PreziPlayer.binded_methods.length; i++) { |
||||
var method_name = PreziPlayer.binded_methods[i]; |
||||
_this[method_name] = __bind(_this[method_name], _this); |
||||
} |
||||
options = options || {}; |
||||
this.options = options; |
||||
this.values = {'status': PreziPlayer.STATUS_LOADING}; |
||||
this.values[PreziPlayer.CURRENT_STEP] = 0; |
||||
this.values[PreziPlayer.CURRENT_ANIMATION_STEP] = 0; |
||||
this.values[PreziPlayer.CURRENT_OBJECT] = null; |
||||
this.callbacks = []; |
||||
this.id = id; |
||||
this.embedTo = document.getElementById(id); |
||||
if (!this.embedTo) { |
||||
throw "The element id is not available."; |
||||
} |
||||
this.iframe = document.createElement('iframe'); |
||||
params = [ |
||||
{ name: 'oid', value: options.preziId }, |
||||
{ name: 'explorable', value: options.explorable ? 1 : 0 }, |
||||
{ name: 'controls', value: options.controls ? 1 : 0 } |
||||
]; |
||||
for (i=0; i<params.length; i++) { |
||||
var param = params[i]; |
||||
paramString += (i===0 ? "?" : "&") + param.name + "=" + param.value; |
||||
} |
||||
this.iframe.src = PreziPlayer.domain + PreziPlayer.path + paramString; |
||||
this.iframe.frameBorder = 0; |
||||
this.iframe.scrolling = "no"; |
||||
this.iframe.width = options.width || 640; |
||||
this.iframe.height = options.height || 480; |
||||
this.embedTo.innerHTML = ''; |
||||
// JITSI: IN CASE SOMETHING GOES WRONG.
|
||||
try { |
||||
this.embedTo.appendChild(this.iframe); |
||||
} |
||||
catch (err) { |
||||
console.log("CATCH ERROR"); |
||||
} |
||||
|
||||
// JITSI: Increase interval from 200 to 500, which fixes prezi
|
||||
// crashes for us.
|
||||
this.initPollInterval = setInterval(function(){ |
||||
_this.sendMessage({'action': 'init'}); |
||||
}, 500); |
||||
PreziPlayer.players[id] = this; |
||||
} |
||||
|
||||
PreziPlayer.prototype.changesHandler = function(message) { |
||||
var key, value, j, item; |
||||
if (this.initPollInterval) { |
||||
clearInterval(this.initPollInterval); |
||||
this.initPollInterval = false; |
||||
} |
||||
for (key in message.data) { |
||||
if (message.data.hasOwnProperty(key)){ |
||||
value = message.data[key]; |
||||
this.values[key] = value; |
||||
for (j=0; j<this.callbacks.length; j++) { |
||||
item = this.callbacks[j]; |
||||
if (item && item.event === key + "Change"){ |
||||
item.callback({type: item.event, value: value}); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
|
||||
PreziPlayer.prototype.destroy = function() { |
||||
if (this.initPollInterval) { |
||||
clearInterval(this.initPollInterval); |
||||
this.initPollInterval = false; |
||||
} |
||||
this.embedTo.innerHTML = ''; |
||||
}; |
||||
|
||||
PreziPlayer.prototype.sendMessage = function(message) { |
||||
if (this.options.debug === true) { |
||||
if (console && console.log) console.log('sent', message); |
||||
} |
||||
message.version = PreziPlayer.API_VERSION; |
||||
message.id = this.id; |
||||
return this.iframe.contentWindow.postMessage(JSON.stringify(message), '*'); |
||||
}; |
||||
|
||||
PreziPlayer.prototype.nextStep = /* nextStep is DEPRECATED */ |
||||
PreziPlayer.prototype.flyToNextStep = function() { |
||||
return this.sendMessage({ |
||||
'action': 'present', |
||||
'data': ['moveToNextStep'] |
||||
}); |
||||
}; |
||||
|
||||
PreziPlayer.prototype.previousStep = /* previousStep is DEPRECATED */ |
||||
PreziPlayer.prototype.flyToPreviousStep = function() { |
||||
return this.sendMessage({ |
||||
'action': 'present', |
||||
'data': ['moveToPrevStep'] |
||||
}); |
||||
}; |
||||
|
||||
PreziPlayer.prototype.toStep = /* toStep is DEPRECATED */ |
||||
PreziPlayer.prototype.flyToStep = function(step, animation_step) { |
||||
var obj = this; |
||||
// check animation_step
|
||||
if (animation_step > 0 && |
||||
obj.values.animationCountOnSteps && |
||||
obj.values.animationCountOnSteps[step] <= animation_step) { |
||||
animation_step = obj.values.animationCountOnSteps[step]; |
||||
if (message.type === "changes") { |
||||
player.changesHandler(message); |
||||
} |
||||
// jump to animation steps by calling flyToNextStep()
|
||||
function doAnimationSteps() { |
||||
if (obj.values.isMoving) { |
||||
setTimeout(doAnimationSteps, 100); // wait until the flight ends
|
||||
return; |
||||
} |
||||
while (animation_step-- > 0) { |
||||
obj.flyToNextStep(); // do the animation steps
|
||||
for (var i = 0; i < player.callbacks.length; i++) { |
||||
item = player.callbacks[i]; |
||||
if (item && message.type === item.event) { |
||||
item.callback(message); |
||||
} |
||||
} |
||||
setTimeout(doAnimationSteps, 200); // 200ms is the internal "reporting" time
|
||||
// jump to the step
|
||||
return this.sendMessage({ |
||||
'action': 'present', |
||||
'data': ['moveToStep', step] |
||||
}); |
||||
}; |
||||
|
||||
PreziPlayer.prototype.toObject = /* toObject is DEPRECATED */ |
||||
PreziPlayer.prototype.flyToObject = function(objectId) { |
||||
return this.sendMessage({ |
||||
'action': 'present', |
||||
'data': ['moveToObject', objectId] |
||||
}); |
||||
}; |
||||
|
||||
PreziPlayer.prototype.play = function(defaultDelay) { |
||||
return this.sendMessage({ |
||||
'action': 'present', |
||||
'data': ['startAutoPlay', defaultDelay] |
||||
}); |
||||
}; |
||||
|
||||
PreziPlayer.prototype.stop = function() { |
||||
return this.sendMessage({ |
||||
'action': 'present', |
||||
'data': ['stopAutoPlay'] |
||||
}); |
||||
}; |
||||
|
||||
PreziPlayer.prototype.pause = function(defaultDelay) { |
||||
return this.sendMessage({ |
||||
'action': 'present', |
||||
'data': ['pauseAutoPlay', defaultDelay] |
||||
}); |
||||
}; |
||||
|
||||
PreziPlayer.prototype.getCurrentStep = function() { |
||||
return this.values.currentStep; |
||||
}; |
||||
|
||||
PreziPlayer.prototype.getCurrentAnimationStep = function() { |
||||
return this.values.currentAnimationStep; |
||||
}; |
||||
|
||||
PreziPlayer.prototype.getCurrentObject = function() { |
||||
return this.values.currentObject; |
||||
}; |
||||
|
||||
PreziPlayer.prototype.getStatus = function() { |
||||
return this.values.status; |
||||
}; |
||||
|
||||
PreziPlayer.prototype.isPlaying = function() { |
||||
return this.values.isAutoPlaying; |
||||
}; |
||||
|
||||
PreziPlayer.prototype.getStepCount = function() { |
||||
return this.values.stepCount; |
||||
}; |
||||
|
||||
PreziPlayer.prototype.getAnimationCountOnSteps = function() { |
||||
return this.values.animationCountOnSteps; |
||||
}; |
||||
|
||||
PreziPlayer.prototype.getTitle = function() { |
||||
return this.values.title; |
||||
}; |
||||
|
||||
PreziPlayer.prototype.setDimensions = function(dims) { |
||||
for (var parameter in dims) { |
||||
this.iframe[parameter] = dims[parameter]; |
||||
} |
||||
}; |
||||
|
||||
PreziPlayer.prototype.getDimensions = function() { |
||||
return { |
||||
width: parseInt(this.iframe.width, 10), |
||||
height: parseInt(this.iframe.height, 10) |
||||
}; |
||||
}; |
||||
|
||||
PreziPlayer.prototype.on = function(event, callback) { |
||||
this.callbacks.push({ |
||||
event: event, |
||||
callback: callback |
||||
}); |
||||
}; |
||||
} |
||||
} catch (e) { } |
||||
}; |
||||
|
||||
PreziPlayer.prototype.off = function(event, callback) { |
||||
var j, item; |
||||
if (event === undefined) { |
||||
this.callbacks = []; |
||||
} |
||||
j = this.callbacks.length; |
||||
while (j--) { |
||||
/*jshint -W004 */ |
||||
function PreziPlayer(id, options) { |
||||
/*jshint +W004 */ |
||||
var params, paramString = "", _this = this; |
||||
if (PreziPlayer.players[id]){ |
||||
PreziPlayer.players[id].destroy(); |
||||
} |
||||
for(var i=0; i<PreziPlayer.binded_methods.length; i++) { |
||||
var method_name = PreziPlayer.binded_methods[i]; |
||||
_this[method_name] = __bind(_this[method_name], _this); |
||||
} |
||||
options = options || {}; |
||||
this.options = options; |
||||
this.values = {'status': PreziPlayer.STATUS_LOADING}; |
||||
this.values[PreziPlayer.CURRENT_STEP] = 0; |
||||
this.values[PreziPlayer.CURRENT_ANIMATION_STEP] = 0; |
||||
this.values[PreziPlayer.CURRENT_OBJECT] = null; |
||||
this.callbacks = []; |
||||
this.id = id; |
||||
this.embedTo = document.getElementById(id); |
||||
if (!this.embedTo) { |
||||
throw "The element id is not available."; |
||||
} |
||||
this.iframe = document.createElement('iframe'); |
||||
params = [ |
||||
{ name: 'oid', value: options.preziId }, |
||||
{ name: 'explorable', value: options.explorable ? 1 : 0 }, |
||||
{ name: 'controls', value: options.controls ? 1 : 0 } |
||||
]; |
||||
for (i=0; i<params.length; i++) { |
||||
var param = params[i]; |
||||
paramString += (i===0 ? "?" : "&") + param.name + "=" + param.value; |
||||
} |
||||
this.iframe.src = PreziPlayer.domain + PreziPlayer.path + paramString; |
||||
this.iframe.frameBorder = 0; |
||||
this.iframe.scrolling = "no"; |
||||
this.iframe.width = options.width || 640; |
||||
this.iframe.height = options.height || 480; |
||||
this.embedTo.innerHTML = ''; |
||||
// JITSI: IN CASE SOMETHING GOES WRONG.
|
||||
try { |
||||
this.embedTo.appendChild(this.iframe); |
||||
} |
||||
catch (err) { |
||||
console.log("CATCH ERROR"); |
||||
} |
||||
|
||||
// JITSI: Increase interval from 200 to 500, which fixes prezi
|
||||
// crashes for us.
|
||||
this.initPollInterval = setInterval(function(){ |
||||
_this.sendMessage({'action': 'init'}); |
||||
}, 500); |
||||
PreziPlayer.players[id] = this; |
||||
} |
||||
|
||||
PreziPlayer.prototype.changesHandler = function(message) { |
||||
var key, value, j, item; |
||||
if (this.initPollInterval) { |
||||
clearInterval(this.initPollInterval); |
||||
this.initPollInterval = false; |
||||
} |
||||
for (key in message.data) { |
||||
if (message.data.hasOwnProperty(key)){ |
||||
value = message.data[key]; |
||||
this.values[key] = value; |
||||
for (j=0; j<this.callbacks.length; j++) { |
||||
item = this.callbacks[j]; |
||||
if (item && item.event === event && (callback === undefined || item.callback === callback)){ |
||||
this.callbacks.splice(j, 1); |
||||
if (item && item.event === key + "Change"){ |
||||
item.callback({type: item.event, value: value}); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
if (window.addEventListener) { |
||||
window.addEventListener('message', PreziPlayer.messageReceived, false); |
||||
} else { |
||||
window.attachEvent('onmessage', PreziPlayer.messageReceived); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
PreziPlayer.prototype.destroy = function() { |
||||
if (this.initPollInterval) { |
||||
clearInterval(this.initPollInterval); |
||||
this.initPollInterval = false; |
||||
} |
||||
this.embedTo.innerHTML = ''; |
||||
}; |
||||
|
||||
PreziPlayer.prototype.sendMessage = function(message) { |
||||
if (this.options.debug === true) { |
||||
if (console && console.log) console.log('sent', message); |
||||
} |
||||
message.version = PreziPlayer.API_VERSION; |
||||
message.id = this.id; |
||||
return this.iframe.contentWindow.postMessage(JSON.stringify(message), '*'); |
||||
}; |
||||
|
||||
PreziPlayer.prototype.nextStep = /* nextStep is DEPRECATED */ |
||||
PreziPlayer.prototype.flyToNextStep = function() { |
||||
return this.sendMessage({ |
||||
'action': 'present', |
||||
'data': ['moveToNextStep'] |
||||
}); |
||||
}; |
||||
|
||||
PreziPlayer.prototype.previousStep = /* previousStep is DEPRECATED */ |
||||
PreziPlayer.prototype.flyToPreviousStep = function() { |
||||
return this.sendMessage({ |
||||
'action': 'present', |
||||
'data': ['moveToPrevStep'] |
||||
}); |
||||
}; |
||||
|
||||
PreziPlayer.prototype.toStep = /* toStep is DEPRECATED */ |
||||
PreziPlayer.prototype.flyToStep = function(step, animation_step) { |
||||
var obj = this; |
||||
// check animation_step
|
||||
if (animation_step > 0 && |
||||
obj.values.animationCountOnSteps && |
||||
obj.values.animationCountOnSteps[step] <= animation_step) { |
||||
animation_step = obj.values.animationCountOnSteps[step]; |
||||
} |
||||
// jump to animation steps by calling flyToNextStep()
|
||||
function doAnimationSteps() { |
||||
if (obj.values.isMoving) { |
||||
setTimeout(doAnimationSteps, 100); // wait until the flight ends
|
||||
return; |
||||
} |
||||
while (animation_step-- > 0) { |
||||
obj.flyToNextStep(); // do the animation steps
|
||||
} |
||||
} |
||||
setTimeout(doAnimationSteps, 200); // 200ms is the internal "reporting" time
|
||||
// jump to the step
|
||||
return this.sendMessage({ |
||||
'action': 'present', |
||||
'data': ['moveToStep', step] |
||||
}); |
||||
}; |
||||
|
||||
PreziPlayer.prototype.toObject = /* toObject is DEPRECATED */ |
||||
PreziPlayer.prototype.flyToObject = function(objectId) { |
||||
return this.sendMessage({ |
||||
'action': 'present', |
||||
'data': ['moveToObject', objectId] |
||||
}); |
||||
}; |
||||
|
||||
PreziPlayer.prototype.play = function(defaultDelay) { |
||||
return this.sendMessage({ |
||||
'action': 'present', |
||||
'data': ['startAutoPlay', defaultDelay] |
||||
}); |
||||
}; |
||||
|
||||
PreziPlayer.prototype.stop = function() { |
||||
return this.sendMessage({ |
||||
'action': 'present', |
||||
'data': ['stopAutoPlay'] |
||||
}); |
||||
}; |
||||
|
||||
PreziPlayer.prototype.pause = function(defaultDelay) { |
||||
return this.sendMessage({ |
||||
'action': 'present', |
||||
'data': ['pauseAutoPlay', defaultDelay] |
||||
}); |
||||
}; |
||||
|
||||
PreziPlayer.prototype.getCurrentStep = function() { |
||||
return this.values.currentStep; |
||||
}; |
||||
|
||||
PreziPlayer.prototype.getCurrentAnimationStep = function() { |
||||
return this.values.currentAnimationStep; |
||||
}; |
||||
|
||||
PreziPlayer.prototype.getCurrentObject = function() { |
||||
return this.values.currentObject; |
||||
}; |
||||
|
||||
PreziPlayer.prototype.getStatus = function() { |
||||
return this.values.status; |
||||
}; |
||||
|
||||
PreziPlayer.prototype.isPlaying = function() { |
||||
return this.values.isAutoPlaying; |
||||
}; |
||||
|
||||
PreziPlayer.prototype.getStepCount = function() { |
||||
return this.values.stepCount; |
||||
}; |
||||
|
||||
PreziPlayer.prototype.getAnimationCountOnSteps = function() { |
||||
return this.values.animationCountOnSteps; |
||||
}; |
||||
|
||||
PreziPlayer.prototype.getTitle = function() { |
||||
return this.values.title; |
||||
}; |
||||
|
||||
PreziPlayer.prototype.setDimensions = function(dims) { |
||||
for (var parameter in dims) { |
||||
this.iframe[parameter] = dims[parameter]; |
||||
} |
||||
}; |
||||
|
||||
PreziPlayer.prototype.getDimensions = function() { |
||||
return { |
||||
width: parseInt(this.iframe.width, 10), |
||||
height: parseInt(this.iframe.height, 10) |
||||
}; |
||||
}; |
||||
|
||||
PreziPlayer.prototype.on = function(event, callback) { |
||||
this.callbacks.push({ |
||||
event: event, |
||||
callback: callback |
||||
}); |
||||
}; |
||||
|
||||
PreziPlayer.prototype.off = function(event, callback) { |
||||
var j, item; |
||||
if (event === undefined) { |
||||
this.callbacks = []; |
||||
} |
||||
j = this.callbacks.length; |
||||
while (j--) { |
||||
item = this.callbacks[j]; |
||||
if (item && item.event === event && (callback === undefined || item.callback === callback)){ |
||||
this.callbacks.splice(j, 1); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
return PreziPlayer; |
||||
|
||||
})(); |
||||
if (window.addEventListener) { |
||||
window.addEventListener('message', PreziPlayer.messageReceived, false); |
||||
} else { |
||||
window.attachEvent('onmessage', PreziPlayer.messageReceived); |
||||
} |
||||
|
||||
})(); |
||||
window.PreziPlayer = PreziPlayer; |
||||
|
||||
module.exports = PreziPlayer; |
||||
export default PreziPlayer; |
||||
|
||||
@ -0,0 +1,24 @@ |
||||
|
||||
export default class LargeContainer { |
||||
|
||||
/** |
||||
* @returns Promise |
||||
*/ |
||||
show () { |
||||
} |
||||
|
||||
/** |
||||
* @returns Promise |
||||
*/ |
||||
hide () { |
||||
} |
||||
|
||||
resize (containerWidth, containerHeight, animate) { |
||||
} |
||||
|
||||
onHoverIn (e) { |
||||
} |
||||
|
||||
onHoverOut (e) { |
||||
} |
||||
} |
||||
Loading…
Reference in new issue