jiti-meet/modules/UI/etherpad/Etherpad.js

240 lines
5.7 KiB
JavaScript
Raw Normal View History

/* global APP, interfaceConfig */
import $ from 'jquery';
import { getSharedDocumentUrl, setDocumentEditingState } from '../../../react/features/etherpad';
2020-07-24 12:14:33 +00:00
import { getToolboxHeight } from '../../../react/features/toolbox/functions.web';
import Filmstrip from '../videolayout/Filmstrip';
2020-05-20 10:57:03 +00:00
import LargeContainer from '../videolayout/LargeContainer';
import VideoLayout from '../videolayout/VideoLayout';
2015-01-07 14:54:03 +00:00
/**
*
*/
function bubbleIframeMouseMove(iframe) {
const existingOnMouseMove = iframe.contentWindow.onmousemove;
iframe.contentWindow.onmousemove = function(e) {
if (existingOnMouseMove) {
existingOnMouseMove(e);
}
const evt = document.createEvent('MouseEvents');
const boundingClientRect = iframe.getBoundingClientRect();
2015-01-07 14:54:03 +00:00
evt.initMouseEvent(
'mousemove',
2015-01-07 14:54:03 +00:00
true, // bubbles
false, // not cancelable
window,
e.detail,
e.screenX,
e.screenY,
2015-12-25 16:55:45 +00:00
e.clientX + boundingClientRect.left,
e.clientY + boundingClientRect.top,
2015-01-07 14:54:03 +00:00
e.ctrlKey,
e.altKey,
e.shiftKey,
e.metaKey,
e.button,
null // no related element
);
iframe.dispatchEvent(evt);
};
}
2016-01-15 14:59:35 +00:00
/**
* Default Etherpad frame width.
*/
2015-12-25 16:55:45 +00:00
const DEFAULT_WIDTH = 640;
2016-01-15 14:59:35 +00:00
/**
* Default Etherpad frame height.
*/
2015-12-25 16:55:45 +00:00
const DEFAULT_HEIGHT = 480;
const ETHERPAD_CONTAINER_TYPE = 'etherpad';
2015-12-25 16:55:45 +00:00
2016-01-15 14:59:35 +00:00
/**
* Container for Etherpad iframe.
*/
2015-12-25 16:55:45 +00:00
class Etherpad extends LargeContainer {
/**
* Creates new Etherpad object
*/
constructor(url) {
2015-12-25 16:55:45 +00:00
super();
const iframe = document.createElement('iframe');
iframe.id = 'etherpadIFrame';
iframe.src = url;
2015-12-25 16:55:45 +00:00
iframe.frameBorder = 0;
iframe.scrolling = 'no';
2015-12-25 16:55:45 +00:00
iframe.width = DEFAULT_WIDTH;
iframe.height = DEFAULT_HEIGHT;
iframe.setAttribute('style', 'visibility: hidden;');
this.container.appendChild(iframe);
iframe.onload = function() {
2018-10-02 13:03:23 +00:00
// eslint-disable-next-line no-self-assign
2015-12-25 16:55:45 +00:00
document.domain = document.domain;
bubbleIframeMouseMove(iframe);
setTimeout(() => {
2015-12-25 16:55:45 +00:00
const doc = iframe.contentDocument;
// the iframes inside of the etherpad are
// not yet loaded when the etherpad iframe is loaded
const outer = doc.getElementsByName('ace_outer')[0];
2015-12-25 16:55:45 +00:00
bubbleIframeMouseMove(outer);
const inner = doc.getElementsByName('ace_inner')[0];
2015-12-25 16:55:45 +00:00
bubbleIframeMouseMove(inner);
}, 2000);
};
this.iframe = iframe;
}
/**
*
*/
get isOpen() {
return Boolean(this.iframe);
2015-12-25 16:55:45 +00:00
}
/**
*
*/
get container() {
2015-12-25 16:55:45 +00:00
return document.getElementById('etherpad');
}
/**
*
*/
resize(containerWidth, containerHeight) {
let height, width;
if (interfaceConfig.VERTICAL_FILMSTRIP) {
height = containerHeight - getToolboxHeight();
width = containerWidth - Filmstrip.getVerticalFilmstripWidth();
} else {
height = containerHeight - Filmstrip.getFilmstripHeight();
width = containerWidth;
}
2015-01-07 14:54:03 +00:00
$(this.iframe)
.width(width)
.height(height);
2015-12-25 16:55:45 +00:00
}
2015-01-07 14:54:03 +00:00
/**
*
*/
show() {
2015-12-25 16:55:45 +00:00
const $iframe = $(this.iframe);
const $container = $(this.container);
const self = this;
2015-01-07 14:54:03 +00:00
2015-12-25 16:55:45 +00:00
return new Promise(resolve => {
$iframe.fadeIn(300, () => {
self.bodyBackground = document.body.style.background;
2015-12-25 16:55:45 +00:00
document.body.style.background = '#eeeeee';
$iframe.css({ visibility: 'visible' });
$container.css({ zIndex: 2 });
APP.store.dispatch(setDocumentEditingState(true));
2015-12-25 16:55:45 +00:00
resolve();
});
});
}
2015-01-07 14:54:03 +00:00
/**
*
*/
hide() {
2015-12-25 16:55:45 +00:00
const $iframe = $(this.iframe);
const $container = $(this.container);
document.body.style.background = this.bodyBackground;
2015-01-07 14:54:03 +00:00
2015-12-25 16:55:45 +00:00
return new Promise(resolve => {
$iframe.fadeOut(300, () => {
$iframe.css({ visibility: 'hidden' });
$container.css({ zIndex: 0 });
APP.store.dispatch(setDocumentEditingState(false));
2015-12-25 16:55:45 +00:00
resolve();
2015-01-07 14:54:03 +00:00
});
2015-12-25 16:55:45 +00:00
});
}
/**
* @return {boolean} do not switch on dominant speaker event if on stage.
*/
stayOnStage() {
return true;
}
2015-12-25 16:55:45 +00:00
}
2016-01-15 14:59:35 +00:00
/**
* Manager of the Etherpad frame.
*/
2015-12-25 16:55:45 +00:00
export default class EtherpadManager {
/**
*
*/
constructor(eventEmitter) {
this.eventEmitter = eventEmitter;
2015-12-25 16:55:45 +00:00
this.etherpad = null;
}
2015-01-07 14:54:03 +00:00
/**
*
*/
get isOpen() {
return Boolean(this.etherpad);
2015-12-25 16:55:45 +00:00
}
2015-01-07 14:54:03 +00:00
/**
*
*/
isVisible() {
return VideoLayout.isLargeContainerTypeVisible(ETHERPAD_CONTAINER_TYPE);
}
2016-01-15 14:59:35 +00:00
/**
* Create new Etherpad frame.
*/
openEtherpad() {
this.etherpad = new Etherpad(getSharedDocumentUrl(APP.store.getState));
2015-12-25 16:55:45 +00:00
VideoLayout.addLargeVideoContainer(
ETHERPAD_CONTAINER_TYPE,
2015-12-25 16:55:45 +00:00
this.etherpad
);
2015-01-07 14:54:03 +00:00
}
2016-01-15 14:59:35 +00:00
/**
* Toggle Etherpad frame visibility.
* Open new Etherpad frame if there is no Etherpad frame yet.
*/
toggleEtherpad() {
2015-12-25 16:55:45 +00:00
if (!this.isOpen) {
this.openEtherpad();
}
const isVisible = this.isVisible();
2015-12-25 16:55:45 +00:00
VideoLayout.showLargeVideoContainer(
ETHERPAD_CONTAINER_TYPE, !isVisible);
APP.store.dispatch(setDocumentEditingState(!isVisible));
2015-12-25 16:55:45 +00:00
}
}