Move redundant code from app.js

app.js

@@ -1,6 +1,4 @@
-/* global $, config, loggingConfig, JitsiMeetJS */
 /* application specific logic */
-const logger = require("jitsi-meet-logger").getLogger(__filename);
 
 import "babel-polyfill";
 import "jquery";
@@ -18,51 +16,13 @@ import 'aui-experimental-css';
 
 window.toastr = require("toastr");
 
-const Logger = require("jitsi-meet-logger");
-const LogCollector = Logger.LogCollector;
-import JitsiMeetLogStorage from "./modules/util/JitsiMeetLogStorage";
-
-import URLProcessor from "./modules/config/URLProcessor";
-
 import UI from "./modules/UI/UI";
 import settings from "./modules/settings/Settings";
 import conference from './conference';
-import ConferenceUrl from './modules/URL/ConferenceUrl';
 import API from './modules/API/API';
 
-import getTokenData from "./modules/tokendata/TokenData";
 import translation from "./modules/translation/translation";
 
-/**
- * Adjusts the logging levels.
- * @private
- */
-function configureLoggingLevels () {
-    // NOTE The library Logger is separated from the app loggers, so the levels
-    // have to be set in two places
-
-    // Set default logging level
-    const defaultLogLevel
-        = loggingConfig.defaultLogLevel || JitsiMeetJS.logLevels.TRACE;
-    Logger.setLogLevel(defaultLogLevel);
-    JitsiMeetJS.setLogLevel(defaultLogLevel);
-
-    // NOTE console was used on purpose here to go around the logging
-    // and always print the default logging level to the console
-    console.info("Default logging level set to: " + defaultLogLevel);
-
-    // Set log level for each logger
-    if (loggingConfig) {
-        Object.keys(loggingConfig).forEach(function(loggerName) {
-            if ('defaultLogLevel' !== loggerName) {
-                const level = loggingConfig[loggerName];
-                Logger.setLogLevelById(level, loggerName);
-                JitsiMeetJS.setLogLevelById(level, loggerName);
-            }
-        });
-    }
-}
-
 const APP = {
     // Used by do_external_connect.js if we receive the attach data after
     // connect was already executed. status property can be "initialized",
@@ -99,111 +59,15 @@ const APP = {
      */
     ConferenceUrl : null,
     connection: null,
-    API,
+    API
-    init () {
-        this.initLogging();
-        this.keyboardshortcut =
-            require("./modules/keyboardshortcut/keyboardshortcut");
-        this.configFetch = require("./modules/config/HttpConfigFetch");
-        this.tokenData = getTokenData();
-    },
-    initLogging () {
-        // Adjust logging level
-        configureLoggingLevels();
-        // Create the LogCollector and register it as the global log transport.
-        // It is done early to capture as much logs as possible. Captured logs
-        // will be cached, before the JitsiMeetLogStorage gets ready (statistics
-        // module is initialized).
-        if (!this.logCollector && !loggingConfig.disableLogCollector) {
-            this.logCollector = new LogCollector(new JitsiMeetLogStorage());
-            Logger.addGlobalTransport(this.logCollector);
-            JitsiMeetJS.addGlobalLogTransport(this.logCollector);
-        }
-    }
 };
 
-/**
+// TODO The execution of the mobile app starts from react/index.native.js.
- * If JWT token data it will be used for local user settings
+// Similarly, the execution of the Web app should start from
- */
+// react/index.web.js for the sake of consistency and ease of understanding.
-function setTokenData() {
+// Temporarily though because we are at the beginning of introducing React
-    let localUser = APP.tokenData.caller;
+// into the Web app, allow the execution of the Web app to start from app.js
-    if(localUser) {
+// in order to reduce the complexity of the beginning step.
-        APP.settings.setEmail((localUser.getEmail() || "").trim(), true);
+require('./react');
-        APP.settings.setAvatarUrl((localUser.getAvatarUrl() || "").trim());
-        APP.settings.setDisplayName((localUser.getName() || "").trim(), true);
-    }
-}
-
-function init() {
-    setTokenData();
-    // Initialize the conference URL handler
-    APP.ConferenceUrl = new ConferenceUrl(window.location);
-
-    // TODO The execution of the mobile app starts from react/index.native.js.
-    // Similarly, the execution of the Web app should start from
-    // react/index.web.js for the sake of consistency and ease of understanding.
-    // Temporarily though because we are at the beginning of introducing React
-    // into the Web app, allow the execution of the Web app to start from app.js
-    // in order to reduce the complexity of the beginning step.
-    require('./react');
-}
-
-/**
- * If we have an HTTP endpoint for getting config.json configured we're going to
- * read it and override properties from config.js and interfaceConfig.js.
- * If there is no endpoint we'll just continue with initialization.
- * Keep in mind that if the endpoint has been configured and we fail to obtain
- * the config for any reason then the conference won't start and error message
- * will be displayed to the user.
- */
-function obtainConfigAndInit() {
-    let roomName = APP.conference.roomName;
-
-    if (config.configLocation) {
-        APP.configFetch.obtainConfig(
-            config.configLocation, roomName,
-            // Get config result callback
-            function(success, error) {
-                if (success) {
-                    var now = APP.connectionTimes["configuration.fetched"] =
-                        window.performance.now();
-                    logger.log("(TIME) configuration fetched:\t", now);
-                    init();
-                } else {
-                    // Show obtain config error,
-                    // pass the error object for report
-                    APP.UI.messageHandler.openReportDialog(
-                        null, "dialog.connectError", error);
-                }
-            });
-    } else {
-        require("./modules/config/BoshAddressChoice").chooseAddress(
-            config, roomName);
-
-        init();
-    }
-}
-
-
-$(document).ready(function () {
-    var now = APP.connectionTimes["document.ready"] = window.performance.now();
-    logger.log("(TIME) document ready:\t", now);
-
-    URLProcessor.setConfigParametersFromUrl();
-
-    APP.init();
-    APP.API.init(APP.tokenData.externalAPISettings);
-
-    obtainConfigAndInit();
-});
-
-$(window).bind('beforeunload', function () {
-    // Stop the LogCollector
-    if (APP.logCollectorStarted) {
-        APP.logCollector.stop();
-        APP.logCollectorStarted = false;
-    }
-    APP.API.dispose();
-});
 
 module.exports = APP;

react/features/app/components/App.web.js

@@ -15,6 +15,15 @@ import { RouteRegistry } from '../../base/navigator';
 import { AbstractApp } from './AbstractApp';
 import settings from '../../../../modules/settings/Settings';
 
+
+import URLProcessor from '../../../../modules/config/URLProcessor';
+import getTokenData from '../../../../modules/tokendata/TokenData';
+import JitsiMeetLogStorage from '../../../../modules/util/JitsiMeetLogStorage';
+import KeyboardShortcut from '../../../../modules/keyboardshortcut/keyboardshortcut';
+const Logger = require('jitsi-meet-logger');
+const LogCollector = Logger.LogCollector;
+
+
 /**
  * Root application component.
  *
@@ -59,6 +68,69 @@ export class App extends AbstractApp {
     componentWillMount(...args) {
         super.componentWillMount(...args);
 
+        URLProcessor.setConfigParametersFromUrl();
+
+        /* APP.init BEGIN */
+
+        /*  Init logging BEGIN */
+
+        // Adjust logging level
+        configureLoggingLevels();
+
+        // Create the LogCollector and register it as the global log transport.
+        // It is done early to capture as much logs as possible. Captured logs
+        // will be cached, before the JitsiMeetLogStorage gets ready (statistics
+        // module is initialized).
+        if (!APP.logCollector && !loggingConfig.disableLogCollector) {
+            APP.logCollector = new LogCollector(new JitsiMeetLogStorage());
+            Logger.addGlobalTransport(APP.logCollector);
+            JitsiMeetJS.addGlobalLogTransport(APP.logCollector);
+        }
+
+        /*  Init logging BEGIN */
+
+        APP.keyboardshortcut = KeyboardShortcut;
+        APP.tokenData = getTokenData();
+
+        /* APP.init END */
+
+        APP.API.init(APP.tokenData.externalAPISettings);
+
+        /**
+         * Adjusts the logging levels.
+         *
+         * @private
+         * @returns {void}
+         */
+        function configureLoggingLevels() {
+            // NOTE The library Logger is separated from the app loggers, so the levels
+            // have to be set in two places
+
+            // Set default logging level
+            const defaultLogLevel
+                = loggingConfig.defaultLogLevel || JitsiMeetJS.logLevels.TRACE;
+
+            Logger.setLogLevel(defaultLogLevel);
+            JitsiMeetJS.setLogLevel(defaultLogLevel);
+
+            // NOTE console was used on purpose here to go around the logging
+            // and always print the default logging level to the console
+            console.info(`Default logging level set to: ${defaultLogLevel}`);
+
+            // Set log level for each logger
+            if (loggingConfig) {
+                Object.keys(loggingConfig).forEach(loggerName => {
+                    if (loggerName !== 'defaultLogLevel') {
+                        const level = loggingConfig[loggerName];
+
+                        Logger.setLogLevelById(level, loggerName);
+                        JitsiMeetJS.setLogLevelById(level, loggerName);
+                    }
+                });
+            }
+        }
+
+
         APP.translation.init(settings.getLanguage());
     }
 
@@ -70,7 +142,6 @@ export class App extends AbstractApp {
      */
     render() {
 
-
         return (
             <Provider store = { this.props.store }>
                 <Router

react/features/conference/components/Conference.web.js

@@ -6,7 +6,9 @@ import {
     connect,
     disconnect
 } from '../../base/connection';
-
+import ConferenceUrl from '../../../../modules/URL/ConferenceUrl';
+import HttpConfigFetch from '../../../../modules/config/HttpConfigFetch';
+import BoshAddressChoice from '../../../../modules/config/BoshAddressChoice';
 
 /**
  * For legacy reasons, inline style for display none.
@@ -20,7 +22,6 @@ const DISPLAY_NONE_STYLE = {
  * Implements a React Component which renders initial conference layout
  */
 class Conference extends Component {
-
     /**
      * Until we don't rewrite UI using react components
      * we use UI.start from old app. Also method translates
@@ -29,6 +30,80 @@ class Conference extends Component {
      * @inheritdoc
      */
     componentDidMount() {
+        /**
+         * If JWT token data it will be used for local user settings.
+         *
+         * @returns {void}
+         */
+        function setTokenData() {
+            const localUser = APP.tokenData.caller;
+
+            if (localUser) {
+                APP.settings.setEmail((localUser.getEmail() || '').trim(), true);
+                APP.settings.setAvatarUrl((localUser.getAvatarUrl() || '').trim());
+                APP.settings.setDisplayName((localUser.getName() || '').trim(), true);
+            }
+        }
+        /**
+         *  Initialization of the app.
+         *
+         *  @returns {void}
+         */
+        function init() {
+            setTokenData();
+
+            // Initialize the conference URL handler
+            APP.ConferenceUrl = new ConferenceUrl(window.location);
+        }
+        /**
+         * If we have an HTTP endpoint for getting config.json configured we're going to
+         * read it and override properties from config.js and interfaceConfig.js.
+         * If there is no endpoint we'll just continue with initialization.
+         * Keep in mind that if the endpoint has been configured and we fail to obtain
+         * the config for any reason then the conference won't start and error message
+         * will be displayed to the user.
+         *
+         * @returns {void}
+         */
+        function obtainConfigAndInit() {
+            const roomName = APP.conference.roomName;
+
+            if (config.configLocation) {
+                const configFetch = HttpConfigFetch;
+                const location = config.configLocation;
+
+                configFetch.obtainConfig(location, roomName, obtainConfigHandler);
+            } else {
+                BoshAddressChoice.chooseAddress(config, roomName);
+                init();
+            }
+        }
+
+        /**
+         * Obtain config handler.
+         *
+         * @param {boolean} success - Equals to true if
+         * config has been obtained w/o errors.
+         * @param {Object} error - Error object if there is error occured
+         * while fetching config.
+         * @returns {void}
+         */
+        function obtainConfigHandler(success, error) {
+            if (success) {
+                const now = window.performance.now();
+
+                APP.connectionTimes['configuration.fetched'] = now;
+                logger.log('(TIME) configuration fetched:\t', now);
+                init();
+            } else {
+                // Show obtain config error,
+                // pass the error object for report
+                APP.UI.messageHandler.openReportDialog(
+                    null, 'dialog.connectError', error);
+            }
+        }
+
+        obtainConfigAndInit();
         APP.UI.start();
 
         // XXX Temporary solution until we add React translation.

react/index.web.js

@@ -1,3 +1,4 @@
+/* global APP */
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { browserHistory } from 'react-router';
@@ -15,6 +16,8 @@ import {
     ReducerRegistry
 } from './features/base/redux';
 
+const logger = require('jitsi-meet-logger').getLogger(__filename);
+
 // Create combined reducer from all reducers in registry + routerReducer from
 // 'react-router-redux' module (stores location updates from history).
 // @see https://github.com/reactjs/react-router-redux#routerreducer.
@@ -45,10 +48,33 @@ if (typeof window === 'object'
 // Create Redux store with our reducer and middleware.
 const store = createStore(reducer, middleware);
 
-// Render the main Component.
+/**
-ReactDOM.render(
+ * Render the app when DOM tree has been loaded.
-    <App
+ */
-        config = { config }
+document.addEventListener('DOMContentLoaded', () => {
-        store = { store }
+    const now = window.performance.now();
-        url = { window.location.toString() } />,
+
-    document.getElementById('react'));
+    APP.connectionTimes['document.ready'] = now;
+    logger.log('(TIME) document ready:\t', now);
+
+    // Render the main Component.
+    ReactDOM.render(
+        <App
+            config = { config }
+            store = { store }
+            url = { window.location.toString() } />,
+        document.getElementById('react'));
+});
+
+/**
+ * Stop collecting the logs and disposing the API when
+ * user closes the page.
+ */
+window.addEventListener('beforeunload', () => {
+    // Stop the LogCollector
+    if (APP.logCollectorStarted) {
+        APP.logCollector.stop();
+        APP.logCollectorStarted = false;
+    }
+    APP.API.dispose();
+});