feat(external_api): make height / width calculation more resilient

This commit is contained in:
Saúl Ibarra Corretgé 2017-07-06 22:17:55 +02:00 committed by hristoterezov
parent 4eacbd9f61
commit 7b1639569e
1 changed files with 28 additions and 4 deletions

View File

@ -182,8 +182,7 @@ export default class JitsiMeetExternalAPI extends EventEmitter {
noSSL, noSSL,
roomName roomName
}); });
this._createIFrame(Math.max(height, MIN_HEIGHT), this._createIFrame(height, width);
Math.max(width, MIN_WIDTH));
this._transport = new Transport({ this._transport = new Transport({
backend: new PostMessageTransportBackend({ backend: new PostMessageTransportBackend({
postisOptions: { postisOptions: {
@ -207,11 +206,36 @@ export default class JitsiMeetExternalAPI extends EventEmitter {
* @private * @private
*/ */
_createIFrame(height, width) { _createIFrame(height, width) {
// Compute valid values for height and width. If a number is specified
// it's treated as pixel units and our minimum constraints are applied.
// If the value is expressed in em, pt or percentage, it's used as is.
// Also protect ourselves from undefined, because
// Math.max(undefined, 100) === NaN, obviously.
//
// This regex parses values of the form 100em, 100pt or 100%. Values
// like 100 or 100px are handled outside of the regex, and invalid
// values will be ignored and the minimum will be used.
const re = /([0-9]*\.?[0-9]+)(em|pt|%)$/;
/* eslint-disable no-param-reassign */
if (String(height).match(re) === null) {
height = parseInt(height, 10) || MIN_HEIGHT;
height = `${Math.max(height, MIN_HEIGHT)}px`;
}
if (String(width).match(re) === null) {
width = parseInt(width, 10) || MIN_WIDTH;
width = `${Math.max(width, MIN_WIDTH)}px`;
}
/* eslint-enable no-param-reassign */
this.iframeHolder this.iframeHolder
= this.parentNode.appendChild(document.createElement('div')); = this.parentNode.appendChild(document.createElement('div'));
this.iframeHolder.id = `jitsiConference${id}`; this.iframeHolder.id = `jitsiConference${id}`;
this.iframeHolder.style.width = `${width}px`; this.iframeHolder.style.width = width;
this.iframeHolder.style.height = `${height}px`; this.iframeHolder.style.height = height;
this.frameName = `jitsiConferenceFrame${id}`; this.frameName = `jitsiConferenceFrame${id}`;