fix(iframe_api): Remove min height/width.

doc/api.md

@@ -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].

modules/API/external/external_api.js

@@ -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.
      *