Bundle external API

We use very little functionality of it anyway.

app/features/conference/components/Conference.js

@@ -11,8 +11,8 @@ import config from '../../config';
 import { getSetting, setEmail, setName } from '../../settings';
 
 import { conferenceEnded, conferenceJoined } from '../actions';
+import JitsiMeetExternalAPI from '../external_api';
 import { LoadingIndicator, Wrapper } from '../styled';
-import { getExternalApiURL } from '../../utils';
 
 type Props = {
 
@@ -118,7 +118,6 @@ class Conference extends Component<Props, State> {
      * @returns {void}
      */
     componentDidMount() {
-        const parentNode = this._ref.current;
         const room = this.props.location.state.room;
         const serverTimeout = this.props._serverTimeout || config.defaultServerTimeout;
         const serverURL = this.props.location.state.serverURL
@@ -130,15 +129,7 @@ class Conference extends Component<Props, State> {
             serverURL
         };
 
-        const script = document.createElement('script');
-
-        script.async = true;
-        script.onload = () => this._onScriptLoad(parentNode);
-        script.onerror = (event: Event) =>
-            this._navigateToHome(event, room, serverURL);
-        script.src = getExternalApiURL(serverURL);
-
-        this._ref.current.appendChild(script);
+        this._loadConference();
 
         // Set a timer for a timeout duration, if we haven't loaded the iframe by then,
         // give up.
@@ -200,45 +191,12 @@ class Conference extends Component<Props, State> {
     }
 
     /**
-     * It renders a loading indicator, if appropriate.
+     * Load the conference by creating the iframe element in this component
+     * and attaching utils from jitsi-meet-electron-utils.
      *
-     * @returns {?ReactElement}
-     */
-    _maybeRenderLoadingIndicator() {
-        if (this.state.isLoading) {
-            return (
-                <LoadingIndicator>
-                    <Spinner size = 'large' />
-                </LoadingIndicator>
-            );
-        }
-    }
-
-    /**
-     * Navigates to home screen (Welcome).
-     *
-     * @param {Event} event - Event by which the function is called.
-     * @param {string} room - Room name.
-     * @param {string} serverURL - Server URL.
      * @returns {void}
      */
-    _navigateToHome(event: Event, room: ?string, serverURL: ?string) {
-        this.props.dispatch(push('/', {
-            error: event.type === 'error',
-            room,
-            serverURL
-        }));
-    }
-
-    /**
-     * When the script is loaded create the iframe element in this component
-     * and attach utils from jitsi-meet-electron-utils.
-     *
-     * @param {Object} parentNode - Node to which iframe has to be attached.
-     * @returns {void}
-     */
-    _onScriptLoad(parentNode: Object) {
-        const JitsiMeetExternalAPI = window.JitsiMeetExternalAPI;
+    _loadConference() {
         const url = new URL(this._conference.room, this._conference.serverURL);
         const roomName = url.pathname.split('/').pop();
         const host = this._conference.serverURL.replace(/https?:\/\//, '');
@@ -253,7 +211,7 @@ class Conference extends Component<Props, State> {
         const options = {
             configOverwrite,
             onload: this._onIframeLoad,
-            parentNode,
+            parentNode: this._ref.current,
             roomName
         };
 
@@ -296,6 +254,37 @@ class Conference extends Component<Props, State> {
         setupPowerMonitorRender(this._api);
     }
 
+    /**
+     * It renders a loading indicator, if appropriate.
+     *
+     * @returns {?ReactElement}
+     */
+    _maybeRenderLoadingIndicator() {
+        if (this.state.isLoading) {
+            return (
+                <LoadingIndicator>
+                    <Spinner size = 'large' />
+                </LoadingIndicator>
+            );
+        }
+    }
+
+    /**
+     * Navigates to home screen (Welcome).
+     *
+     * @param {Event} event - Event by which the function is called.
+     * @param {string} room - Room name.
+     * @param {string} serverURL - Server URL.
+     * @returns {void}
+     */
+    _navigateToHome(event: Event, room: ?string, serverURL: ?string) {
+        this.props.dispatch(push('/', {
+            error: event.type === 'error',
+            room,
+            serverURL
+        }));
+    }
+
     _onVideoConferenceEnded: (*) => void;
 
     /**

webpack.renderer.js

@@ -21,6 +21,7 @@ module.exports = {
         __dirname: true
     },
     module: {
+        noParse: /external_api\\.js/,
         rules: [
             {
                 exclude: /node_modules(?!(\/|\\)js-utils)/,