apitech
/
jitsi-meet
mirror of https://github.com/jitsi/jitsi-meet
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(iframe_api): Remove min height/width.

Browse Source
pull/1784/head jitsi-meet_2255
hristoterezov 7 years ago committed by yanas
parent 70122789e7
commit 07a0e3d8ff
2 changed files with 63 additions and 45 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      doc/api.md
  2. 104
      modules/API/external/external_api.js

4
doc/api.md
Unescape View File

@ -20,8 +20,8 @@ Its constructor gets a number of options:
example.
* **options**: object with properties - the optional arguments:
* **room**: (optional) name of the room to join.
* **width**: (optional) width for the iframe which will be created.
* **height**: (optional) height for the iframe which will be created.
* **width**: (optional) width for the iframe which will be created. If a number is specified it's treated as pixel units. If a string is specified the format is number followed by 'px', 'em', 'pt' or '%'.
* **height**: (optional) height for the iframe which will be created. If a number is specified it's treated as pixel units. If a string is specified the format is number followed by 'px', 'em', 'pt' or '%'.
* **htmlElement**: (optional) HTL DOM Element where the iframe will be added as a child.
* **configOverwite**: (optional) JS object with overrides for options defined in [config.js].
* **interfaceConfigOverwrite**: (optional) JS object with overrides for options defined in [interface_config.js].

104
modules/API/external/external_api.js vendored
Unescape View File

@ -45,18 +45,6 @@ const events = {
*/
let id = 0;
/**
* The minimum height for the Jitsi Meet frame
* @type {number}
*/
const MIN_HEIGHT = 300;
/**
* The minimum width for the Jitsi Meet frame
* @type {number}
*/
const MIN_WIDTH = 790;
/**
* Adds given number to the numberOfParticipants property of given APIInstance.
*
@ -190,6 +178,34 @@ function parseArguments(args) {
}
}
/**
* Compute valid values for height and width. If a number is specified it's
* treated as pixel units. If the value is expressed in px, em, pt or
* percentage, it's used as is.
*
* @param {any} value - The value to be parsed.
* @returns {string|undefined} The parsed value that can be used for setting
* sizes through the style property. If invalid value is passed the method
* retuns undefined.
*/
function parseSizeParam(value) {
let parsedValue;
// This regex parses values of the form 100px, 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|px|%)$/;
if (typeof value === 'string' && String(value).match(re) !== null) {
parsedValue = value;
} else if (typeof value === 'number') {
parsedValue = `${value}px`;
}
return parsedValue;
}
/**
* The IFrame API interface class.
*/
@ -201,8 +217,10 @@ export default class JitsiMeetExternalAPI extends EventEmitter {
* conference.
* @param {Object} [options] - Optional arguments.
* @param {string} [options.roomName] - The name of the room to join.
* @param {number} [options.width] - Width of the iframe.
* @param {number} [options.height] - Height of the iframe.
* @param {number|string} [options.width] - Width of the iframe. Check
* parseSizeParam for format details.
* @param {number|string} [options.height] - Height of the iframe. Check
* parseSizeParam for format details.
* @param {DOMElement} [options.parentNode] - The node that will contain the
* iframe.
* @param {Object} [options.configOverwrite] - Object containing
@ -218,8 +236,8 @@ export default class JitsiMeetExternalAPI extends EventEmitter {
super();
const {
roomName = '',
width = MIN_WIDTH,
height = MIN_HEIGHT,
width = '100%',
height = '100%',
parentNode = document.body,
configOverwrite = {},
interfaceConfigOverwrite = {},
@ -252,49 +270,49 @@ export default class JitsiMeetExternalAPI extends EventEmitter {
/**
* Creates the iframe element.
*
* @param {number} height - The height of the iframe.
* @param {number} width - The with of the iframe.
* @param {number|string} height - The height of the iframe. Check
* parseSizeParam for format details.
* @param {number|string} width - The with of the iframe. Check
* parseSizeParam for format details.
* @returns {void}
*
* @private
*/
_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`;
}
const frameName = `jitsiConferenceFrame${id}`;
this._frame = document.createElement('iframe');
this._frame.src = this._url;
this._frame.name = frameName;
this._frame.id = frameName;
this._frame.style.width = width;
this._frame.style.height = height;
this._setSize(height, width);
this._frame.setAttribute('allowFullScreen', 'true');
this._frame.style.border = 0;
this._frame = this._parentNode.appendChild(this._frame);
}
/**
* Sets the size of the iframe element.
*
* @param {number|string} height - The height of the iframe.
* @param {number|string} width - The with of the iframe.
* @returns {void}
*
* @private
*/
_setSize(height, width) {
const parsedHeight = parseSizeParam(height);
const parsedWidth = parseSizeParam(width);
if (parsedHeight !== undefined) {
this._frame.style.height = parsedHeight;
}
if (parsedWidth !== undefined) {
this._frame.style.width = parsedWidth;
}
}
/**
* Setups listeners that are used internally for JitsiMeetExternalAPI.
*

Write Preview
Loading…
Cancel
Save