feat(loadScript): Use the function from js-utils

Do not take legacy property into account if there's non-legacy value.

.eslintrc.js

@@ -1,61 +1,5 @@
 module.exports = {
-    'env': {
-        'browser': true,
-        'commonjs': true,
-        'es6': true
-    },
     'extends': [
-        'eslint:recommended',
-        'plugin:flowtype/recommended'
-    ],
-    'globals': {
-        // The globals that (1) are accessed but not defined within many of our
-        // files, (2) are certainly defined, and (3) we would like to use
-        // without explicitly specifying them (using a comment) inside of our
-        // files.
-        '__filename': false
-    },
-    'parser': 'babel-eslint',
-    'parserOptions': {
-        'ecmaFeatures': {
-            'experimentalObjectRestSpread': true
-        },
-        'sourceType': 'module'
-    },
-    'plugins': [
-        'flowtype'
-    ],
-    'rules': {
-        'indent': [
-            'error',
-            4,
-            {
-                'CallExpression': {
-                    arguments: 'off'
-                },
-                'FunctionDeclaration': {
-                    parameters: 2
-                },
-                'FunctionExpression': {
-                    parameters: 2
-                },
-                'MemberExpression': 'off',
-                'SwitchCase': 0
-            }
-        ],
-        'new-cap': [
-            'error',
-            {
-                'capIsNew': false // Behave like JSHint's newcap.
-            }
-        ],
-        // While it is considered a best practice to avoid using methods on
-        // console in JavaScript that is designed to be executed in the browser
-        // and ESLint includes the rule among its set of recommended rules, (1)
-        // the general practice is to strip such calls before pushing to
-        // production and (2) we prefer to utilize console in lib-jitsi-meet
-        // (and jitsi-meet).
-        'no-console': 'off',
-        'semi': 'error'
-    }
+        'eslint-config-jitsi'
+    ]
 };

.flowconfig

@@ -12,14 +12,22 @@
 ; For RN Apps installed via npm, "Libraries" folder is inside
 ; "node_modules/react-native" but in the source repo it is in the root
 .*/Libraries/react-native/React.js
-.*/Libraries/react-native/ReactNative.js
+
+; Ignore polyfills
+.*/Libraries/polyfills/.*
 
 ; Ignore packages in node_modules which we (i.e. the jitsi-meet project) have
 ; seen to cause errors and we have chosen not to fix.
-.*/node_modules/babel-.*
-.*/node_modules/bower/.*
-.*/node_modules/jsonlint/.*
-.*/node_modules/promise/index.js.flow
+.*/node_modules/@atlaskit/.*/*.js.flow
+.*/node_modules/@atlassian
+.*/node_modules/bower/lib/node_modules/bower-json/test/.*
+.*/node_modules/immutable/dist/immutable.js.flow
+.*/node_modules/jsonlint/test/.*
+
+; FIXME Remove once we update past commit
+; https://github.com/facebook/react-native/commit/df8d0d1db9203cc87ad3682e6138b2a9ed714365
+.*/node_modules/react-native/local-cli/link/link.js
+.*/node_modules/react-native-keep-awake/.*
 .*/node_modules/styled-components/.*
 
 .*/\.git/.*
@@ -28,33 +36,31 @@
 
 [libs]
 node_modules/react-native/Libraries/react-native/react-native-interface.js
-node_modules/react-native/flow
-flow/
+node_modules/react-native/flow/
 
 [options]
 emoji=true
 
 module.system=haste
 
-experimental.strict_type_args=true
-
-; FIXME: munge_underscores should be false but right now there are some errors
-; if we change the value to false
-; Treats class properties with underscore as private. Disabled because currently
-; for us "_" can mean protected too.
-; munge_underscores=false
 munge_underscores=true
 
+; FIXME Remove once we update past commit
+; https://github.com/facebook/react-native/commit/df8d0d1db9203cc87ad3682e6138b2a9ed714365
+module.name_mapper='^./link/link$' -> 'emptyObject'
+
 module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
 
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
+suppress_type=$FlowFixMeProps
+suppress_type=$FlowFixMeState
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-8]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-8]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-7]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-7]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
-suppress_comment=\\(.\\|\n\\)*\\$FlowDisableNextLine
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 
 unsafe.enable_getters_and_setters=true
 
@@ -71,4 +77,4 @@ module.file_ext=.jsx
 module.file_ext=.json
 
 [version]
-^0.38.0
+^0.57.0

.gitignore

@@ -7,6 +7,9 @@ all.css
 .remote-sync.json
 .sync-config.cson
 
+# CocoaPods
+Pods/
+
 # The following are automatically generated by the react-native command line
 # utility (either with the init or upgrade option which pull in the latest
 # template files recommended by Facebook for React Native).
@@ -57,15 +60,11 @@ buck-out/
 
 # fastlane
 #
-# It is recommended to not store the screenshots in the git repo. Instead, use
-# fastlane to re-generate the screenshots whenever they are needed. For more
-# information about the recommended setup visit:
-# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
-#
-fastlane/report.xml
-fastlane/Preview.html
-fastlane/screenshots
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
 
-# CocoaPods
-Pods/
-Podfile.lock
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots

CONTRIBUTING.md

@@ -21,7 +21,7 @@ license agreement as either a [corporation](https://jitsi.org/ccla) or an
 in the agreement, unfortunately, we cannot accept your contribution.
 
 ## Creating Pull Requests
-- Make sure your code passes the linter rules beforehand. The linter is exeuted
+- Make sure your code passes the linter rules beforehand. The linter is executed
   automatically when committing code.
 - Perform **one** logical change per pull request.
 - Maintain a clean list of commits, squash them if necessary.

ConferenceEvents.js

@@ -1,11 +1,11 @@
 /**
  * Notifies interested parties that hangup procedure will start.
  */
-export const BEFORE_HANGUP = "conference.before_hangup";
+export const BEFORE_HANGUP = 'conference.before_hangup';
 
 /**
  * Notifies interested parties that desktop sharing enable/disable state is
  * changed.
  */
 export const DESKTOP_SHARING_ENABLED_CHANGED
-    = "conference.desktop_sharing_enabled_changed";
+    = 'conference.desktop_sharing_enabled_changed';

Makefile

@@ -33,7 +33,11 @@ deploy-appbundle:
 		$(BUILD_DIR)/external_api.min.map \
 		$(BUILD_DIR)/device_selection_popup_bundle.min.js \
 		$(BUILD_DIR)/device_selection_popup_bundle.min.map \
-		$(OUTPUT_DIR)/analytics.js \
+		$(BUILD_DIR)/dial_in_info_bundle.min.js \
+		$(BUILD_DIR)/dial_in_info_bundle.min.map \
+		$(BUILD_DIR)/alwaysontop.min.js \
+		$(BUILD_DIR)/alwaysontop.min.map \
+		$(OUTPUT_DIR)/analytics-ga.js \
 		$(DEPLOY_DIR)
 
 deploy-lib-jitsi-meet:
@@ -41,6 +45,7 @@ deploy-lib-jitsi-meet:
 		$(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.js \
 		$(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.map \
 		$(LIBJITSIMEET_DIR)/connection_optimization/external_connect.js \
+		$(LIBJITSIMEET_DIR)/modules/browser/capabilities.json \
 		$(DEPLOY_DIR)
 
 deploy-css:

README.md

@@ -1,13 +1,15 @@
 # Jitsi Meet - Secure, Simple and Scalable Video Conferences
 
-Jitsi Meet is an open-source (Apache) WebRTC JavaScript application that uses [Jitsi Videobridge](https://jitsi.org/videobridge) to provide high quality, scalable video conferences. You can see [Jitsi Meet in action](http://youtu.be/7vFUVClsNh0) here at the session #482 of the VoIP Users Conference.
+Jitsi Meet is an open-source (Apache) WebRTC JavaScript application that uses [Jitsi Videobridge](https://jitsi.org/videobridge) to provide high quality, [secure](#security) and scalable video conferences. You can see Jitsi Meet in action [here at the session #482 of the VoIP Users Conference](http://youtu.be/7vFUVClsNh0).
 
-You can also try it out yourself at https://meet.jit.si .
+The Jitsi Meet client runs in your browser, without the need for installing anything on your computer. You can also try it out yourself at https://meet.jit.si .
 
 Jitsi Meet allows for very efficient collaboration. It allows users to stream their desktop or only some windows. It also supports shared document editing with Etherpad.
 
 ## Installation
 
+On the client side, no installation is necessary. You just point your browser to the URL of your deployment. This section is about installing the Jitsi Meet suite on your server and hosting your own conferencing service.
+
 Installing Jitsi Meet is quite a simple experience. For Debian-based systems, we recommend following the [quick-install](https://github.com/jitsi/jitsi-meet/blob/master/doc/quick-install.md) document, which uses the package system.
 
 For other systems, or if you wish to install all components manually, see the [detailed manual installation instructions](https://github.com/jitsi/jitsi-meet/blob/master/doc/manual-install.md).
@@ -88,6 +90,19 @@ cd jitsi-meet
 npm unlink lib-jitsi-meet
 npm install
 ```
+## Running with webpack-dev-server for development   
+
+Use it at the CLI, type
+```
+node_modules/.bin/webpack-dev-server
+```
+
+By default the backend deployment used is `beta.meet.jit.si`, you can point the Jitsi-Meet app at a different backend by using a proxy server. To do this set the WEBPACK_DEV_SERVER_PROXY_TARGET variable, type 
+```
+WEBPACK_DEV_SERVER_PROXY_TARGET=https://your-example-server.com node_modules/.bin/webpack-dev-server
+```
+
+The app should be running at https://localhost:8080/
 
 ## Contributing
 
@@ -98,6 +113,21 @@ see our [guidelines for contributing](CONTRIBUTING.md).
 
 Jitsi Meet provides a very flexible way of embedding it in external applications by using the [Jitsi Meet API](doc/api.md).
 
+## Security
+WebRTC today does not provide a way of conducting multiparty conversations with
+end-to-end encryption. As a matter of fact, unless you consistently vocally
+compare DTLS fingerprints with your peers, the same goes for one-to-one calls.
+As a result when using a Jitsi Meet instance, your stream is encrypted on the
+network but decrypted on the machine that hosts the bridge.
+
+The Jitsi Meet architecture allows you to deploy your own version, including
+all server components, and in that case your security guarantees will be roughly
+equivalent to these of a direct one-to-one WebRTC call. This is what's unique to 
+Jitsi Meet in terms of security.
+
+The [meet.jit.si](https://meet.jit.si) service is maintained by the Jitsi team
+at [Atlassian](https://atlassian.com).
+
 ## Mobile app
 Jitsi Meet is also available as a React Native app for Android and iOS.
 Instructions on how to build it can be found [here](doc/mobile.md).

analytics-ga.js

@@ -0,0 +1,154 @@
+/* global ga */
+
+(function(ctx) {
+    /**
+     *
+     */
+    function Analytics(options) {
+        /* eslint-disable */
+
+        if (!options.googleAnalyticsTrackingId) {
+            console.log(
+                'Failed to initialize Google Analytics handler, no tracking ID');
+             return;
+        }
+
+        /**
+         * Google Analytics
+         * TODO: Keep this local, there's no need to add it to window.
+         */
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+        ga('create', options.googleAnalyticsTrackingId, 'jit.si');
+        ga('send', 'pageview');
+
+        /* eslint-enable */
+    }
+
+    /**
+     * Extracts the integer to use for a Google Analytics event's value field
+     * from a lib-jitsi-meet analytics event.
+     * @param {Object} event - The lib-jitsi-meet analytics event.
+     * @returns {Object} - The integer to use for the 'value' of a Google
+     * Analytics event.
+     * @private
+     */
+    Analytics.prototype._extractAction = function(event) {
+        // Page events have a single 'name' field.
+        if (event.type === 'page') {
+            return event.name;
+        }
+
+        // All other events have action, actionSubject, and source fields. All
+        // three fields are required, and the often jitsi-meet and
+        // lib-jitsi-meet use the same value when separate values are not
+        // necessary (i.e. event.action == event.actionSubject).
+        // Here we concatenate these three fields, but avoid adding the same
+        // value twice, because it would only make the GA event's action harder
+        // to read.
+        let action = event.action;
+
+        if (event.actionSubject && event.actionSubject !== event.action) {
+            // Intentionally use string concatenation as analytics needs to
+            // work on IE but this file does not go through babel. For some
+            // reason disabling this globally for the file does not have an
+            // effect.
+            // eslint-disable-next-line prefer-template
+            action = event.actionSubject + '.' + action;
+        }
+        if (event.source && event.source !== event.action
+                && event.source !== event.action) {
+            // eslint-disable-next-line prefer-template
+            action = event.source + '.' + action;
+        }
+
+        return action;
+    };
+
+    /**
+     * Extracts the integer to use for a Google Analytics event's value field
+     * from a lib-jitsi-meet analytics event.
+     * @param {Object} event - The lib-jitsi-meet analytics event.
+     * @returns {Object} - The integer to use for the 'value' of a Google
+     * Analytics event, or NaN if the lib-jitsi-meet event doesn't contain a
+     * suitable value.
+     * @private
+     */
+    Analytics.prototype._extractValue = function(event) {
+        let value = event && event.attributes && event.attributes.value;
+
+        // Try to extract an integer from the "value" attribute.
+        value = Math.round(parseFloat(value));
+
+        return value;
+    };
+
+    /**
+     * Extracts the string to use for a Google Analytics event's label field
+     * from a lib-jitsi-meet analytics event.
+     * @param {Object} event - The lib-jitsi-meet analytics event.
+     * @returns {string} - The string to use for the 'label' of a Google
+     * Analytics event.
+     * @private
+     */
+    Analytics.prototype._extractLabel = function(event) {
+        let label = '';
+
+        // The label field is limited to 500B. We will concatenate all
+        // attributes of the event, except the user agent because it may be
+        // lengthy and is probably included from elsewhere.
+        for (const property in event.attributes) {
+            if (property !== 'permanent_user_agent'
+                && property !== 'permanent_callstats_name'
+                && event.attributes.hasOwnProperty(property)) {
+                // eslint-disable-next-line prefer-template
+                label += property + '=' + event.attributes[property] + '&';
+            }
+        }
+
+        if (label.length > 0) {
+            label = label.slice(0, -1);
+        }
+
+        return label;
+    };
+
+    /**
+     * This is the entry point of the API. The function sends an event to
+     * google analytics. The format of the event is described in
+     * AnalyticsAdapter in lib-jitsi-meet.
+     * @param {Object} event - the event in the format specified by
+     * lib-jitsi-meet.
+     */
+    Analytics.prototype.sendEvent = function(event) {
+        if (!event || !ga) {
+            return;
+        }
+
+        const gaEvent = {
+            'eventCategory': 'jitsi-meet',
+            'eventAction': this._extractAction(event),
+            'eventLabel': this._extractLabel(event)
+        };
+        const value = this._extractValue(event);
+
+        if (!isNaN(value)) {
+            gaEvent.eventValue = value;
+        }
+
+        ga('send', 'event', gaEvent);
+    };
+
+    if (typeof ctx.JitsiMeetJS === 'undefined') {
+        ctx.JitsiMeetJS = {};
+    }
+    if (typeof ctx.JitsiMeetJS.app === 'undefined') {
+        ctx.JitsiMeetJS.app = {};
+    }
+    if (typeof ctx.JitsiMeetJS.app.analyticsHandlers === 'undefined') {
+        ctx.JitsiMeetJS.app.analyticsHandlers = [];
+    }
+    ctx.JitsiMeetJS.app.analyticsHandlers.push(Analytics);
+})(window);
+/* eslint-enable prefer-template */

analytics.js

@@ -1,38 +0,0 @@
-/* global ga */
-/* eslint-disable indent */
-
-(function (ctx) {
-  function Analytics() {
-    /* eslint-disable semi */
-
-    /**
-     * Google Analytics
-     */
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-    ga('create', 'UA-319188-14', 'jit.si');
-    ga('send', 'pageview');
-
-    /* eslint-enable semi */
-  }
-
-  Analytics.prototype.sendEvent = function (action, data) {
-    // empty label if missing value for it and add the value,
-    // the value should be integer or null
-    var value = data.value;
-    value = value? Math.round(parseFloat(value)) : null;
-    var label = data.label || "";
-
-    ga('send', 'event', 'jit.si',
-        action + '.' + data.browserName, label, value);
-  };
-
-  if (typeof ctx.JitsiMeetJS === "undefined")
-    ctx.JitsiMeetJS = {};
-  if (typeof ctx.JitsiMeetJS.app === "undefined")
-    ctx.JitsiMeetJS.app = {};
-  if (typeof ctx.JitsiMeetJS.app.analyticsHandlers === "undefined")
-    ctx.JitsiMeetJS.app.analyticsHandlers = [];
-  ctx.JitsiMeetJS.app.analyticsHandlers.push(Analytics);
-}(window));

android/README.md

@@ -9,11 +9,34 @@
    ./gradlew :sdk:assembleRelease
    ```
 
-3. ```bash
+3. Configure the Maven repositories in which you are going to publish the
+   artifacts/binaries during step 4. Modify
+   `"file:${rootProject.projectDir}/../../../jitsi/jitsi-maven-repository/releases"`
+   in adroid/sdk/build.gradle for Jitsi Meet SDK for Android and/or
+   `"file:${rootProject.projectDir}/../../../jitsi/jitsi-maven-repository/releases"`
+   in android/build.gradle for the third-party react-native modules which Jitsi
+   Meet SDK for Android depends on and are not publicly available in Maven
+   repositories. Generally, if you are modifying the JavaScript code of Jitsi
+   Meet SDK for Android only, you will very likely need to consider the former
+   only.
+
+4. Publish the Maven artifact/binary of Jitsi Meet SDK for Android in the Maven
+   repository configured in step 3:
+
+   ```bash
    ./gradlew :sdk:publish
    cd ../
    ```
 
+   If you would like to publish a third-party react-native module which Jitsi
+   Meet SDK for Android depends on and is not publicly available in Maven
+   repositories, replace `sdk` with the name of the react-native module. For
+   example, to publish react-native-webrtc:
+
+   ```bash
+   ./gradlew :react-native-webrtc:publish
+   ```
+
 ## Install
 
 Add the Maven repository
@@ -84,19 +107,19 @@ public class MainActivity extends AppCompatActivity {
         JitsiMeetView.onNewIntent(intent);
     }
 
-    @Override
-    protected void onPause() {
-        super.onPause();
-
-        JitsiMeetView.onHostPause(this);
-    }
-
     @Override
     protected void onResume() {
         super.onResume();
 
         JitsiMeetView.onHostResume(this);
     }
+
+    @Override
+    protected void onStop() {
+        super.onStop();
+
+        JitsiMeetView.onHostPause(this);
+    }
 }
 ```
 
@@ -109,6 +132,10 @@ which displays a single `JitsiMeetView`.
 
 See JitsiMeetView.getDefaultURL.
 
+#### getPictureInPictureEnabled()
+
+See JitsiMeetView.getPictureInPictureEnabled.
+
 #### getWelcomePageEnabled()
 
 See JitsiMeetView.getWelcomePageEnabled.
@@ -121,6 +148,10 @@ See JitsiMeetView.loadURL.
 
 See JitsiMeetView.setDefaultURL.
 
+#### setPictureInPictureEnabled(boolean)
+
+See JitsiMeetView.setPictureInPictureEnabled.
+
 #### setWelcomePageEnabled(boolean)
 
 See JitsiMeetView.setWelcomePageEnabled.
@@ -146,6 +177,12 @@ if set to `null`, the default built in JavaScript is used: https://meet.jit.si.
 
 Returns the `JitsiMeetViewListener` instance attached to the view.
 
+#### getPictureInPictureEnabled()
+
+Returns `true` if Picture-in-Picture is enabled; `false`, otherwise. If not
+explicitly set (by a preceding `setPictureInPictureEnabled` call), defaults to
+`true` if the platform supports Picture-in-Picture natively; `false`, otherwise.
+
 #### getWelcomePageEnabled()
 
 Returns true if the Welcome page is enabled; otherwise, false. If false, a black
@@ -187,19 +224,30 @@ view.loadURLObject(urlObject);
 
 Sets the default URL. See `getDefaultURL` for more information.
 
-NOTE: Must be called before `loadURL`/`loadURLString` for it to take effect.
+NOTE: Must be called before (if at all) `loadURL`/`loadURLString` for it to take
+effect.
 
 #### setListener(listener)
 
 Sets the given listener (class implementing the `JitsiMeetViewListener`
 interface) on the view.
 
+#### setPictureInPictureEnabled(boolean)
+
+Sets whether Picture-in-Picture is enabled. If not set, Jitsi Meet SDK
+automatically enables/disables Picture-in-Picture based on native platform
+support.
+
+NOTE: Must be called (if at all) before `loadURL`/`loadURLString` for it to take
+effect.
+
 #### setWelcomePageEnabled(boolean)
 
 Sets whether the Welcome page is enabled. See `getWelcomePageEnabled` for more
 information.
 
-NOTE: Must be called before `loadURL`/`loadURLString` for it to take effect.
+NOTE: Must be called (if at all) before `loadURL`/`loadURLString` for it to take
+effect.
 
 #### onBackPressed()
 
@@ -224,7 +272,8 @@ This is a static method.
 
 #### onHostResume(activity)
 
-Helper method which should be called from the activity's `onResume` method.
+Helper method which should be called from the activity's `onResume` or `onStop`
+method.
 
 This is a static method.
 
@@ -236,6 +285,13 @@ activity's `onNewIntent` method.
 
 This is a static method.
 
+#### onUserLeaveHint()
+
+Helper method for integrating automatic Picture-in-Picture. It should be called
+from the activity's `onUserLeaveHint` method.
+
+This is a static method.
+
 #### JitsiMeetViewListener
 
 `JitsiMeetViewListener` provides an interface apps can implement to listen to
@@ -286,3 +342,79 @@ fails.
 
 The `data` `Map` contains an "error" key with the error and a "url" key with the
 conference URL which necessitated the loading of the configuration file.
+
+## ProGuard rules
+
+When using the SDK on a project some proguard rules have to be added in order
+to avoid necessary code being stripped. Add the following to your project's
+rules file:
+
+```
+# React Native
+
+# Keep our interfaces so they can be used by other ProGuard rules.
+# See http://sourceforge.net/p/proguard/bugs/466/
+-keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip
+-keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters
+-keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip
+
+# Do not strip any method/class that is annotated with @DoNotStrip
+-keep @com.facebook.proguard.annotations.DoNotStrip class *
+-keep @com.facebook.common.internal.DoNotStrip class *
+-keepclassmembers class * {
+    @com.facebook.proguard.annotations.DoNotStrip *;
+    @com.facebook.common.internal.DoNotStrip *;
+}
+
+-keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * {
+  void set*(***);
+  *** get*();
+}
+
+-keep class * extends com.facebook.react.bridge.JavaScriptModule { *; }
+-keep class * extends com.facebook.react.bridge.NativeModule { *; }
+-keepclassmembers,includedescriptorclasses class * { native <methods>; }
+-keepclassmembers class *  { @com.facebook.react.uimanager.UIProp <fields>; }
+-keepclassmembers class *  { @com.facebook.react.uimanager.annotations.ReactProp <methods>; }
+-keepclassmembers class *  { @com.facebook.react.uimanager.annotations.ReactPropGroup <methods>; }
+
+-dontwarn com.facebook.react.**
+
+# TextLayoutBuilder uses a non-public Android constructor within StaticLayout.
+# See libs/proxy/src/main/java/com/facebook/fbui/textlayoutbuilder/proxy for details.
+-dontwarn android.text.StaticLayout
+
+# okhttp
+
+-keepattributes Signature
+-keepattributes *Annotation*
+-keep class okhttp3.** { *; }
+-keep interface okhttp3.** { *; }
+-dontwarn okhttp3.**
+
+# okio
+
+-keep class sun.misc.Unsafe { *; }
+-dontwarn java.nio.file.*
+-dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement
+-dontwarn okio.**
+
+# WebRTC
+
+-keep class org.webrtc.** { *; }
+-dontwarn org.chromium.build.BuildHooksAndroid
+
+# Jisti Meet SDK
+
+-keep class org.jitsi.meet.sdk.** { *; }
+```
+
+## Picture-in-Picture
+
+`JitsiMeetView` will automatically adjust its UI when presented in a
+Picture-in-Picture style scenario, in a rectangle too small to accommodate its
+"full" UI.
+
+Jitsi Meet SDK automatically enables (unless explicitly disabled by a
+`setPictureInPictureEnabled(false)` call) Android's native Picture-in-Picture
+mode iff the platform is supported i.e. Android >= Oreo.

android/app/proguard-rules.pro

@@ -50,6 +50,10 @@
 
 -dontwarn com.facebook.react.**
 
+# TextLayoutBuilder uses a non-public Android constructor within StaticLayout.
+# See libs/proxy/src/main/java/com/facebook/fbui/textlayoutbuilder/proxy for details.
+-dontwarn android.text.StaticLayout
+
 # okhttp
 
 -keepattributes Signature

android/app/src/main/AndroidManifest.xml

@@ -7,10 +7,12 @@
       android:label="@string/app_name"
       android:theme="@style/AppTheme">
     <activity
-        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
+        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize"
         android:label="@string/app_name"
         android:launchMode="singleTask"
         android:name=".MainActivity"
+        android:resizeableActivity="true"
+        android:supportsPictureInPicture="true"
         android:windowSoftInputMode="adjustResize">
       <intent-filter>
         <action android:name="android.intent.action.MAIN" />

android/app/src/main/java/org/jitsi/meet/MainActivity.java

@@ -23,6 +23,8 @@ import org.jitsi.meet.sdk.JitsiMeetActivity;
 import org.jitsi.meet.sdk.JitsiMeetView;
 import org.jitsi.meet.sdk.JitsiMeetViewListener;
 
+import com.calendarevents.CalendarEventsPackage;
+
 import java.util.Map;
 
 /**
@@ -95,11 +97,18 @@ public class MainActivity extends JitsiMeetActivity {
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         // As this is the Jitsi Meet app (i.e. not the Jitsi Meet SDK), we do
-        // want the Welcome page to be enabled. It defaults to disabled in the
-        // SDK at the time of this writing but it is clearer to be explicit
-        // about what we want anyway.
+        // want to enable some options.
+
+        // The welcome page defaults to disabled in the SDK at the time of this
+        // writing but it is clearer to be explicit about what we want anyway.
         setWelcomePageEnabled(true);
 
         super.onCreate(savedInstanceState);
     }
+
+    @Override
+  public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {
+      CalendarEventsPackage.onRequestPermissionsResult(requestCode, permissions, grantResults);
+      super.onRequestPermissionsResult(requestCode, permissions, grantResults);
+  }
 }

android/app/src/main/res/values/styles.xml

@@ -2,6 +2,5 @@
     <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <!-- Customize your theme here. -->
-        <item name="android:windowTranslucentStatus">true</item>
     </style>
 </resources>

android/build.gradle

@@ -3,11 +3,11 @@
 
 buildscript {
     repositories {
+        google()
         jcenter()
-        maven { url 'https://maven.google.com' }
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:3.0.0-beta7'
+        classpath 'com.android.tools.build:gradle:3.0.1'
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files.
@@ -16,9 +16,8 @@ buildscript {
 
 allprojects {
     repositories {
-        mavenLocal()
+        google()
         jcenter()
-        maven { url "https://maven.google.com" } // Required for appcompat.
         // React Native (JS, Obj-C sources, Android binaries) is installed from
         // npm.
         maven { url "$rootDir/../node_modules/react-native/android" }
@@ -130,9 +129,10 @@ allprojects {
 }
 
 ext {
-    compileSdkVersion = 25
+    buildToolsVersion = "26.0.2"
+    compileSdkVersion = 26
     minSdkVersion    = 16
-    targetSdkVersion = 25
+    targetSdkVersion = 26
 
     // The Maven artifact groupdId of the third-party react-native modules which
     // Jitsi Meet SDK for Android depends on and which are not available in

android/keystores/BUCK

@@ -1,8 +1,8 @@
 keystore(
-  name = 'debug',
-  store = 'debug.keystore',
-  properties = 'debug.keystore.properties',
-  visibility = [
-    'PUBLIC',
-  ],
+    name = "debug",
+    properties = "debug.keystore.properties",
+    store = "debug.keystore",
+    visibility = [
+        "PUBLIC",
+    ],
 )

android/sdk/build.gradle

@@ -21,15 +21,18 @@ android {
 dependencies {
     compile fileTree(dir: 'libs', include: ['*.jar'])
 
-    compile 'com.android.support:appcompat-v7:25.4.0'
+    compile 'com.android.support:appcompat-v7:27.0.2'
     compile 'com.facebook.react:react-native:+'
 
     compile project(':react-native-background-timer')
     compile project(':react-native-fetch-blob')
     compile project(':react-native-immersive')
     compile project(':react-native-keep-awake')
+    compile project(':react-native-locale-detector')
+    compile project(':react-native-sound')
     compile project(':react-native-vector-icons')
     compile project(':react-native-webrtc')
+    compile project(':react-native-calendar-events')
 }
 
 // Build process helpers

android/sdk/src/main/AndroidManifest.xml

@@ -10,6 +10,7 @@
   <uses-permission android:name="android.permission.RECORD_AUDIO" />
   <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
   <uses-permission android:name="android.permission.WAKE_LOCK" />
+  <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
 
   <uses-feature android:glEsVersion="0x00020000" android:required="true" />
   <uses-feature

android/sdk/src/main/java/org/jitsi/meet/sdk/AndroidSettingsModule.java

@@ -5,11 +5,13 @@
 
 package org.jitsi.meet.sdk;
 
+import android.content.ActivityNotFoundException;
 import android.content.Context;
 import android.content.Intent;
 import android.net.Uri;
 import android.provider.Settings;
 
+import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
@@ -25,7 +27,7 @@ class AndroidSettingsModule extends ReactContextBaseJavaModule {
     }
 
     @ReactMethod
-    public void open() {
+    public void open(Promise promise) {
         Context context = getReactApplicationContext();
         Intent intent = new Intent();
 
@@ -34,6 +36,15 @@ class AndroidSettingsModule extends ReactContextBaseJavaModule {
         intent.setData(
             Uri.fromParts("package", context.getPackageName(), null));
 
-        context.startActivity(intent);
+        try {
+            context.startActivity(intent);
+        } catch (ActivityNotFoundException e) {
+            // Some devices may give an error here.
+            // https://developer.android.com/reference/android/provider/Settings.html#ACTION_APPLICATION_DETAILS_SETTINGS
+            promise.reject(e);
+            return;
+        }
+
+        promise.resolve(null);
     }
 }

android/sdk/src/main/java/org/jitsi/meet/sdk/AudioModeModule.java

@@ -21,6 +21,7 @@ import android.content.BroadcastReceiver;
 import android.content.Context;
 import android.content.Intent;
 import android.content.IntentFilter;
+import android.content.pm.PackageManager;
 import android.media.AudioDeviceInfo;
 import android.media.AudioManager;
 import android.os.Build;
@@ -28,13 +29,18 @@ import android.os.Handler;
 import android.os.Looper;
 import android.util.Log;
 
+import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.WritableArray;
+import com.facebook.react.bridge.WritableMap;
 
 import java.util.HashMap;
+import java.util.HashSet;
 import java.util.Map;
+import java.util.Set;
 
 /**
  * Module implementing a simple API to select the appropriate audio device for a
@@ -102,10 +108,53 @@ class AudioModeModule extends ReactContextBaseJavaModule {
     private final Handler mainThreadHandler
         = new Handler(Looper.getMainLooper());
 
+    /**
+     * {@link Runnable} for running audio device detection the main thread.
+     * This is only used on Android >= M.
+     */
+    private final Runnable onAudioDeviceChangeRunner = new Runnable() {
+        @TargetApi(Build.VERSION_CODES.M)
+        @Override
+        public void run() {
+            Set<String> devices = new HashSet<>();
+            AudioDeviceInfo[] deviceInfos
+                = audioManager.getDevices(AudioManager.GET_DEVICES_ALL);
+
+            for (AudioDeviceInfo info: deviceInfos) {
+                switch (info.getType()) {
+                case AudioDeviceInfo.TYPE_BLUETOOTH_SCO:
+                    devices.add(DEVICE_BLUETOOTH);
+                    break;
+                case AudioDeviceInfo.TYPE_BUILTIN_EARPIECE:
+                    devices.add(DEVICE_EARPIECE);
+                    break;
+                case AudioDeviceInfo.TYPE_BUILTIN_SPEAKER:
+                    devices.add(DEVICE_SPEAKER);
+                    break;
+                case AudioDeviceInfo.TYPE_WIRED_HEADPHONES:
+                case AudioDeviceInfo.TYPE_WIRED_HEADSET:
+                    devices.add(DEVICE_HEADPHONES);
+                    break;
+                }
+            }
+
+            availableDevices = devices;
+            Log.d(TAG, "Available audio devices: " +
+                availableDevices.toString());
+
+            // Reset user selection
+            userSelectedDevice = null;
+
+            if (mode != -1) {
+                updateAudioRoute(mode);
+            }
+        }
+    };
+
     /**
      * {@link Runnable} for running update operation on the main thread.
      */
-    private final Runnable mainThreadRunner
+    private final Runnable updateAudioRouteRunner
         = new Runnable() {
             @Override
             public void run() {
@@ -120,6 +169,30 @@ class AudioModeModule extends ReactContextBaseJavaModule {
      */
     private int mode = -1;
 
+    /**
+     * Audio device types.
+     */
+    private static final String DEVICE_BLUETOOTH  = "BLUETOOTH";
+    private static final String DEVICE_EARPIECE   = "EARPIECE";
+    private static final String DEVICE_HEADPHONES = "HEADPHONES";
+    private static final String DEVICE_SPEAKER    = "SPEAKER";
+
+    /**
+     * List of currently available audio devices.
+     */
+    private Set<String> availableDevices = new HashSet<>();
+
+    /**
+     * Currently selected device.
+     */
+    private String selectedDevice;
+
+    /**
+     * User selected device. When null the default is used depending on the
+     * mode.
+     */
+    private String userSelectedDevice;
+
     /**
      * Initializes a new module instance. There shall be a single instance of
      * this module throughout the lifetime of the application.
@@ -136,6 +209,20 @@ class AudioModeModule extends ReactContextBaseJavaModule {
 
         // Setup runtime device change detection.
         setupAudioRouteChangeDetection();
+
+        // Do an initial detection on Android >= M.
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+            mainThreadHandler.post(onAudioDeviceChangeRunner);
+        } else {
+            // On Android < M, detect if we have an earpiece.
+            PackageManager pm = reactContext.getPackageManager();
+            if (pm.hasSystemFeature(PackageManager.FEATURE_TELEPHONY)) {
+                availableDevices.add(DEVICE_EARPIECE);
+            }
+
+            // Always assume there is a speaker.
+            availableDevices.add(DEVICE_SPEAKER);
+        }
     }
 
     /**
@@ -155,6 +242,36 @@ class AudioModeModule extends ReactContextBaseJavaModule {
         return constants;
     }
 
+    /**
+     * Gets the list of available audio device categories, i.e. 'bluetooth',
+     * 'earpiece ', 'speaker', 'headphones'.
+     *
+     * @param promise a {@link Promise} which will be resolved with an object
+     *                containing a 'devices' key with a list of devices, plus a
+     *                'selected' key with the selected one.
+     */
+    @ReactMethod
+    public void getAudioDevices(final Promise promise) {
+        mainThreadHandler.post(new Runnable() {
+            @Override
+            public void run() {
+                WritableMap map = Arguments.createMap();
+                map.putString("selected", selectedDevice);
+                WritableArray devices = Arguments.createArray();
+                for (String device : availableDevices) {
+                    if (mode == VIDEO_CALL && device.equals(DEVICE_EARPIECE)) {
+                        // Skip earpiece when in video call mode.
+                        continue;
+                    }
+                    devices.pushString(device);
+                }
+                map.putArray("devices", devices);
+
+                promise.resolve(map);
+            }
+        });
+    }
+
     /**
      * Gets the name for this module to be used in the React Native bridge.
      *
@@ -168,9 +285,81 @@ class AudioModeModule extends ReactContextBaseJavaModule {
     /**
      * Helper method to trigger an audio route update when devices change. It
      * makes sure the operation is performed on the main thread.
+     *
+     * Only used on Android >= M.
      */
     void onAudioDeviceChange() {
-        mainThreadHandler.post(mainThreadRunner);
+        mainThreadHandler.post(onAudioDeviceChangeRunner);
+    }
+
+    /**
+     * Helper method to trigger an audio route update when Bluetooth devices are
+     * connected / disconnected.
+     *
+     * Only used on Android < M. Runs on the main thread.
+     */
+    void onBluetoothDeviceChange() {
+        if (bluetoothHeadsetMonitor != null && bluetoothHeadsetMonitor.isHeadsetAvailable()) {
+            availableDevices.add(DEVICE_BLUETOOTH);
+        } else {
+            availableDevices.remove(DEVICE_BLUETOOTH);
+        }
+
+        if (mode != -1) {
+            updateAudioRoute(mode);
+        }
+    }
+
+    /**
+     * Helper method to trigger an audio route update when a headset is plugged
+     * or unplugged.
+     *
+     * Only used on Android < M.
+     */
+    void onHeadsetDeviceChange() {
+        mainThreadHandler.post(new Runnable() {
+            @Override
+            public void run() {
+                // XXX: isWiredHeadsetOn is not deprecated when used just for
+                // knowing if there is a wired headset connected, regardless of
+                // audio being routed to it.
+                //noinspection deprecation
+                if (audioManager.isWiredHeadsetOn()) {
+                    availableDevices.add(DEVICE_HEADPHONES);
+                } else {
+                    availableDevices.remove(DEVICE_HEADPHONES);
+                }
+
+                if (mode != -1) {
+                    updateAudioRoute(mode);
+                }
+            }
+        });
+    }
+
+    /**
+     * Sets the user selected audio device as the active audio device.
+     *
+     * @param device the desired device which will become active.
+     */
+    @ReactMethod
+    public void setAudioDevice(final String device) {
+        mainThreadHandler.post(new Runnable() {
+            @Override
+            public void run() {
+                if (!availableDevices.contains(device)) {
+                    Log.d(TAG, "Audio device not available: " + device);
+                    userSelectedDevice = null;
+                    return;
+                }
+
+                if (mode != -1) {
+                    Log.d(TAG, "User selected device set to: " + device);
+                    userSelectedDevice = device;
+                    updateAudioRoute(mode);
+                }
+            }
+        });
     }
 
     /**
@@ -278,7 +467,7 @@ class AudioModeModule extends ReactContextBaseJavaModule {
             @Override
             public void onReceive(Context context, Intent intent) {
                 Log.d(TAG, "Wired headset added / removed");
-                onAudioDeviceChange();
+                onHeadsetDeviceChange();
             }
         };
         context.registerReceiver(wiredHeadsetReceiver, wiredHeadSetFilter);
@@ -302,6 +491,8 @@ class AudioModeModule extends ReactContextBaseJavaModule {
             audioManager.abandonAudioFocus(null);
             audioManager.setSpeakerphoneOn(false);
             setBluetoothAudioRoute(false);
+            selectedDevice = null;
+            userSelectedDevice = null;
 
             return true;
         }
@@ -318,31 +509,42 @@ class AudioModeModule extends ReactContextBaseJavaModule {
             return false;
         }
 
-        boolean useSpeaker = (mode == VIDEO_CALL);
+        boolean bluetoothAvailable = availableDevices.contains(DEVICE_BLUETOOTH);
+        boolean earpieceAvailable = availableDevices.contains(DEVICE_EARPIECE);
+        boolean headsetAvailable = availableDevices.contains(DEVICE_HEADPHONES);
 
-        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
-            // On Android >= M we use the AudioDeviceCallback API, so turn on
-            // Bluetooth SCO from the start.
-            if (audioManager.isBluetoothScoAvailableOffCall()) {
-                audioManager.startBluetoothSco();
-            }
+        // Pick the desired device based on what's available and the mode.
+        String audioDevice;
+        if (bluetoothAvailable) {
+            audioDevice = DEVICE_BLUETOOTH;
+        } else if (headsetAvailable) {
+            audioDevice = DEVICE_HEADPHONES;
+        } else if (mode == AUDIO_CALL && earpieceAvailable) {
+            audioDevice = DEVICE_EARPIECE;
         } else {
-            // On older Android versions we must set the Bluetooth route
-            // manually. Also disable the speaker in that case.
-            setBluetoothAudioRoute(
-                    bluetoothHeadsetMonitor.isHeadsetAvailable());
-            if (bluetoothHeadsetMonitor.isHeadsetAvailable()) {
-                useSpeaker = false;
-            }
+            audioDevice = DEVICE_SPEAKER;
         }
 
-        // XXX: isWiredHeadsetOn is not deprecated when used just for knowing if
-        // there is a wired headset connected, regardless of audio being routed
-        // to it.
-        audioManager.setSpeakerphoneOn(
-                useSpeaker
-                    && !(audioManager.isWiredHeadsetOn()
-                        || audioManager.isBluetoothScoOn()));
+        // Consider the user's selection
+        if (userSelectedDevice != null
+                && availableDevices.contains(userSelectedDevice)) {
+            audioDevice = userSelectedDevice;
+        }
+
+        // If the previously selected device and the current default one
+        // match, do nothing.
+        if (selectedDevice != null && selectedDevice.equals(audioDevice)) {
+            return true;
+        }
+
+        selectedDevice = audioDevice;
+        Log.d(TAG, "Selected audio device: " + audioDevice);
+
+        // Turn bluetooth on / off
+        setBluetoothAudioRoute(audioDevice.equals(DEVICE_BLUETOOTH));
+
+        // Turn speaker on / off
+        audioManager.setSpeakerphoneOn(audioDevice.equals(DEVICE_SPEAKER));
 
         return true;
     }

android/sdk/src/main/java/org/jitsi/meet/sdk/BluetoothHeadsetMonitor.java

@@ -71,7 +71,7 @@ class BluetoothHeadsetMonitor {
                 headsetAvailable
                     = (headset != null)
                         && !headset.getConnectedDevices().isEmpty();
-                audioModeModule.onAudioDeviceChange();
+                audioModeModule.onBluetoothDeviceChange();
             }
         };
 

android/sdk/src/main/java/org/jitsi/meet/sdk/JitsiMeetActivity.java

@@ -17,31 +17,32 @@
 package org.jitsi.meet.sdk;
 
 import android.content.Intent;
+import android.content.res.Configuration;
 import android.net.Uri;
 import android.os.Build;
 import android.os.Bundle;
 import android.provider.Settings;
 import android.support.annotation.Nullable;
 import android.support.v7.app.AppCompatActivity;
+import android.view.KeyEvent;
+
+import com.facebook.react.ReactInstanceManager;
+import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
 
 import java.net.URL;
 
-import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
-
 /**
  * Base Activity for applications integrating Jitsi Meet at a higher level. It
- * contains all the required wiring between the {@code JKConferenceView} and
+ * contains all the required wiring between the {@code JitsiMeetView} and
  * the Activity lifecycle methods already implemented.
  *
- * In this activity we use a single {@code JKConferenceView} instance. This
+ * In this activity we use a single {@code JitsiMeetView} instance. This
  * instance gives us access to a view which displays the welcome page and the
  * conference itself. All lifetime methods associated with this Activity are
  * hooked to the React Native subsystem via proxy calls through the
- * {@code JKConferenceView} static methods.
+ * {@code JitsiMeetView} static methods.
  */
-public class JitsiMeetActivity
-    extends AppCompatActivity {
-
+public class JitsiMeetActivity extends AppCompatActivity {
     /**
      * The request code identifying requests for the permission to draw on top
      * of other apps. The value must be 16-bit and is arbitrarily chosen here.
@@ -67,6 +68,12 @@ public class JitsiMeetActivity
      */
     private JitsiMeetView view;
 
+    /**
+     * Whether Picture-in-Picture is enabled. The value is used only while
+     * {@link #view} equals {@code null}.
+     */
+    private Boolean pictureInPictureEnabled;
+
     /**
      * Whether the Welcome page is enabled. The value is used only while
      * {@link #view} equals {@code null}.
@@ -89,6 +96,17 @@ public class JitsiMeetActivity
         return view == null ? defaultURL : view.getDefaultURL();
     }
 
+    /**
+     *
+     * @see JitsiMeetView#getPictureInPictureEnabled()
+     */
+    public boolean getPictureInPictureEnabled() {
+        return
+            view == null
+                ? pictureInPictureEnabled
+                : view.getPictureInPictureEnabled();
+    }
+
     /**
      *
      * @see JitsiMeetView#getWelcomePageEnabled()
@@ -121,6 +139,10 @@ public class JitsiMeetActivity
         // XXX Before calling JitsiMeetView#loadURL, make sure to call whatever
         // is documented to need such an order in order to take effect:
         view.setDefaultURL(defaultURL);
+        if (pictureInPictureEnabled != null) {
+            view.setPictureInPictureEnabled(
+                pictureInPictureEnabled.booleanValue());
+        }
         view.setWelcomePageEnabled(welcomePageEnabled);
 
         view.loadURL(null);
@@ -199,17 +221,26 @@ public class JitsiMeetActivity
         JitsiMeetView.onHostDestroy(this);
     }
 
+    // ReactAndroid/src/main/java/com/facebook/react/ReactActivity.java
     @Override
-    public void onNewIntent(Intent intent) {
-        JitsiMeetView.onNewIntent(intent);
+    public boolean onKeyUp(int keyCode, KeyEvent event) {
+        ReactInstanceManager reactInstanceManager;
+
+        if (!super.onKeyUp(keyCode, event)
+                && BuildConfig.DEBUG
+                && (reactInstanceManager
+                        = JitsiMeetView.getReactInstanceManager())
+                    != null
+                && keyCode == KeyEvent.KEYCODE_MENU) {
+            reactInstanceManager.showDevOptionsDialog();
+            return true;
+        }
+        return false;
     }
 
     @Override
-    protected void onPause() {
-        super.onPause();
-
-        JitsiMeetView.onHostPause(this);
-        defaultBackButtonImpl = null;
+    public void onNewIntent(Intent intent) {
+        JitsiMeetView.onNewIntent(intent);
     }
 
     @Override
@@ -220,6 +251,19 @@ public class JitsiMeetActivity
         JitsiMeetView.onHostResume(this, defaultBackButtonImpl);
     }
 
+    @Override
+    public void onStop() {
+        super.onStop();
+
+        JitsiMeetView.onHostPause(this);
+        defaultBackButtonImpl = null;
+    }
+
+    @Override
+    protected void onUserLeaveHint() {
+        JitsiMeetView.onUserLeaveHint();
+    }
+
     /**
      *
      * @see JitsiMeetView#setDefaultURL(URL)
@@ -232,6 +276,19 @@ public class JitsiMeetActivity
         }
     }
 
+    /**
+     *
+     * @see JitsiMeetView#setPictureInPictureEnabled(boolean)
+     */
+    public void setPictureInPictureEnabled(boolean pictureInPictureEnabled) {
+        if (view == null) {
+            this.pictureInPictureEnabled
+                = Boolean.valueOf(pictureInPictureEnabled);
+        } else {
+            view.setPictureInPictureEnabled(pictureInPictureEnabled);
+        }
+    }
+
     /**
      *
      * @see JitsiMeetView#setWelcomePageEnabled(boolean)

android/sdk/src/main/java/org/jitsi/meet/sdk/JitsiMeetView.java

@@ -21,17 +21,23 @@ import android.app.Application;
 import android.content.Context;
 import android.content.Intent;
 import android.net.Uri;
+import android.os.Build;
 import android.os.Bundle;
 import android.support.annotation.NonNull;
 import android.support.annotation.Nullable;
+import android.util.Log;
 import android.widget.FrameLayout;
 
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactRootView;
 import com.facebook.react.bridge.NativeModule;
 import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.common.LifecycleState;
 import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
+import com.facebook.react.modules.core.DeviceEventManagerModule;
+import com.rnimmersive.RNImmersiveModule;
 
 import java.net.URL;
 import java.util.Arrays;
@@ -48,6 +54,12 @@ public class JitsiMeetView extends FrameLayout {
      */
     private static final int BACKGROUND_COLOR = 0xFF111111;
 
+    /**
+     * The {@link Log} tag which identifies the source of the log messages of
+     * {@code JitsiMeetView}.
+     */
+    private final static String TAG = JitsiMeetView.class.getSimpleName();
+
     /**
      * React Native bridge. The instance manager allows embedding applications
      * to create multiple root views off the same JavaScript bundle.
@@ -64,7 +76,9 @@ public class JitsiMeetView extends FrameLayout {
             new AppInfoModule(reactContext),
             new AudioModeModule(reactContext),
             new ExternalAPIModule(reactContext),
-            new ProximityModule(reactContext)
+            new PictureInPictureModule(reactContext),
+            new ProximityModule(reactContext),
+            new WiFiStatsModule(reactContext)
         );
     }
 
@@ -81,6 +95,11 @@ public class JitsiMeetView extends FrameLayout {
         return null;
     }
 
+    // XXX Strictly internal use only (at the time of this writing)!
+    static ReactInstanceManager getReactInstanceManager() {
+        return reactInstanceManager;
+    }
+
     /**
      * Internal method to initialize the React Native instance manager. We
      * create a single instance in order to load the JavaScript bundle a single
@@ -94,14 +113,17 @@ public class JitsiMeetView extends FrameLayout {
             = ReactInstanceManager.builder()
                 .setApplication(application)
                 .setBundleAssetName("index.android.bundle")
-                .setJSMainModuleName("index.android")
+                .setJSMainModulePath("index.android")
+                .addPackage(new com.calendarevents.CalendarEventsPackage())
                 .addPackage(new com.corbt.keepawake.KCKeepAwakePackage())
                 .addPackage(new com.facebook.react.shell.MainReactPackage())
+                .addPackage(new com.i18n.reactnativei18n.ReactNativeI18n())
                 .addPackage(new com.oblador.vectoricons.VectorIconsPackage())
                 .addPackage(new com.ocetnik.timer.BackgroundTimerPackage())
                 .addPackage(new com.oney.WebRTCModule.WebRTCModulePackage())
                 .addPackage(new com.RNFetchBlob.RNFetchBlobPackage())
                 .addPackage(new com.rnimmersive.RNImmersivePackage())
+                .addPackage(new com.zmxv.RNSound.RNSoundPackage())
                 .addPackage(new ReactPackageAdapter() {
                     @Override
                     public List<NativeModule> createNativeModules(
@@ -235,6 +257,38 @@ public class JitsiMeetView extends FrameLayout {
         }
     }
 
+    /**
+     * Activity lifecycle method which should be called from
+     * {@code Activity.onUserLeaveHint} so we can do the required internal
+     * processing.
+     *
+     * This is currently not mandatory.
+     */
+    public static void onUserLeaveHint() {
+        sendEvent("onUserLeaveHint", null);
+    }
+
+    /**
+     * Helper function to send an event to JavaScript.
+     *
+     * @param eventName {@code String} containing the event name.
+     * @param params {@code WritableMap} optional ancillary data for the event.
+     */
+    private static void sendEvent(
+            String eventName,
+            @Nullable WritableMap params) {
+        if (reactInstanceManager != null) {
+            ReactContext reactContext
+                = reactInstanceManager.getCurrentReactContext();
+            if (reactContext != null) {
+                reactContext
+                    .getJSModule(
+                        DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+                    .emit(eventName, params);
+            }
+        }
+    }
+
     /**
      * The default base {@code URL} used to join a conference when a partial URL
      * (e.g. a room name only) is specified to {@link #loadURLString(String)} or
@@ -256,6 +310,13 @@ public class JitsiMeetView extends FrameLayout {
      */
     private JitsiMeetViewListener listener;
 
+    /**
+     * Whether Picture-in-Picture is enabled. If {@code null}, defaults to
+     * {@code true} iff the Android platform supports Picture-in-Picture
+     * natively.
+     */
+    private Boolean pictureInPictureEnabled;
+
     /**
      * React Native root view.
      */
@@ -320,6 +381,21 @@ public class JitsiMeetView extends FrameLayout {
         return listener;
     }
 
+    /**
+     * Gets whether Picture-in-Picture is enabled. Picture-in-Picture is
+     * natively supported on Android API >= 26 (Oreo), so it should not be
+     * enabled on older platform versions.
+     *
+     * @return If Picture-in-Picture is enabled, {@code true}; {@code false},
+     * otherwise.
+     */
+    public boolean getPictureInPictureEnabled() {
+        return
+            PictureInPictureModule.isPictureInPictureSupported()
+                && (pictureInPictureEnabled == null
+                    || pictureInPictureEnabled.booleanValue());
+    }
+
     /**
      * Gets whether the Welcome page is enabled. If {@code true}, the Welcome
      * page is rendered when this {@code JitsiMeetView} is not at a URL
@@ -361,23 +437,45 @@ public class JitsiMeetView extends FrameLayout {
         if (defaultURL != null) {
             props.putString("defaultURL", defaultURL.toString());
         }
+
         // externalAPIScope
         props.putString("externalAPIScope", externalAPIScope);
+
+        // pictureInPictureEnabled
+        props.putBoolean(
+            "pictureInPictureEnabled",
+            getPictureInPictureEnabled());
+
         // url
         if (urlObject != null) {
             props.putBundle("url", urlObject);
         }
+
         // welcomePageEnabled
         props.putBoolean("welcomePageEnabled", welcomePageEnabled);
 
-        // TODO: ReactRootView#setAppProperties is only available on React
-        // Native 0.45, so destroy the current root view and create a new one.
-        dispose();
+        // XXX The method loadURLObject: is supposed to be imperative i.e.
+        // a second invocation with one and the same URL is expected to join
+        // the respective conference again if the first invocation was followed
+        // by leaving the conference. However, React and, respectively,
+        // appProperties/initialProperties are declarative expressions i.e. one
+        // and the same URL will not trigger componentWillReceiveProps in the
+        // JavaScript source code. The workaround implemented bellow introduces
+        // imperativeness in React Component props by defining a unique value
+        // per loadURLObject: invocation.
+        props.putLong("timestamp", System.currentTimeMillis());
 
-        reactRootView = new ReactRootView(getContext());
-        reactRootView.startReactApplication(reactInstanceManager, "App", props);
-        reactRootView.setBackgroundColor(BACKGROUND_COLOR);
-        addView(reactRootView);
+        if (reactRootView == null) {
+            reactRootView = new ReactRootView(getContext());
+            reactRootView.startReactApplication(
+                reactInstanceManager,
+                "App",
+                props);
+            reactRootView.setBackgroundColor(BACKGROUND_COLOR);
+            addView(reactRootView);
+        } else {
+            reactRootView.setAppProperties(props);
+        }
     }
 
     /**
@@ -400,6 +498,43 @@ public class JitsiMeetView extends FrameLayout {
         loadURLObject(urlObject);
     }
 
+    /**
+     * Called when the window containing this view gains or loses focus.
+     *
+     * @param hasFocus If the window of this view now has focus, {@code true};
+     * otherwise, {@code false}.
+     */
+    @Override
+    public void onWindowFocusChanged(boolean hasFocus) {
+        super.onWindowFocusChanged(hasFocus);
+
+        // https://github.com/mockingbot/react-native-immersive#restore-immersive-state
+
+        // FIXME The singleton pattern employed by RNImmersiveModule is not
+        // advisable because a react-native mobule is consumable only after its
+        // BaseJavaModule#initialize() has completed and here we have no
+        // knowledge of whether the precondition is really met.
+        RNImmersiveModule immersive = RNImmersiveModule.getInstance();
+
+        if (hasFocus && immersive != null) {
+            try {
+                immersive.emitImmersiveStateChangeEvent();
+            } catch (RuntimeException re) {
+                // FIXME I don't know how to check myself whether
+                // BaseJavaModule#initialize() has been invoked and thus
+                // RNImmersiveModule is consumable. A safe workaround is to
+                // swallow the failure because the whole full-screen/immersive
+                // functionality is brittle anyway, akin to the icing on the
+                // cake, and has been working without onWindowFocusChanged for a
+                // very long time.
+                Log.e(
+                    TAG,
+                    "RNImmersiveModule#emitImmersiveStateChangeEvent() failed!",
+                    re);
+            }
+        }
+    }
+
     /**
      * Sets the default base {@code URL} used to join a conference when a
      * partial URL (e.g. a room name only) is specified to
@@ -424,6 +559,18 @@ public class JitsiMeetView extends FrameLayout {
         this.listener = listener;
     }
 
+    /**
+     * Sets whether Picture-in-Picture is enabled. Because Picture-in-Picture is
+     * natively supported only since certain platform versions, specifying
+     * {@code true} will have no effect on unsupported platform versions.
+     *
+     * @param pictureInPictureEnabled To enable Picture-in-Picture,
+     * {@code true}; otherwise, {@code false}.
+     */
+    public void setPictureInPictureEnabled(boolean pictureInPictureEnabled) {
+        this.pictureInPictureEnabled = Boolean.valueOf(pictureInPictureEnabled);
+    }
+
     /**
      * Sets whether the Welcome page is enabled. Must be called before
      * {@link #loadURL(URL)} for it to take effect.

android/sdk/src/main/java/org/jitsi/meet/sdk/PictureInPictureModule.java

@@ -0,0 +1,67 @@
+package org.jitsi.meet.sdk;
+
+import android.app.Activity;
+import android.app.PictureInPictureParams;
+import android.os.Build;
+import android.util.Log;
+import android.util.Rational;
+
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+
+public class PictureInPictureModule extends ReactContextBaseJavaModule {
+    private final static String TAG = "PictureInPicture";
+
+    static boolean isPictureInPictureSupported() {
+        return Build.VERSION.SDK_INT >= Build.VERSION_CODES.O;
+    }
+
+    public PictureInPictureModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+    }
+
+    /**
+     * Enters Picture-in-Picture (mode) for the current {@link Activity}.
+     * Supported on Android API >= 26 (Oreo) only.
+     *
+     * @param promise a {@code Promise} which will resolve with a {@code null}
+     * value upon success, and an {@link Exception} otherwise.
+     */
+    @ReactMethod
+    public void enterPictureInPicture(Promise promise) {
+        if (isPictureInPictureSupported()) {
+            Activity currentActivity = getCurrentActivity();
+
+            if (currentActivity == null) {
+                promise.reject(new Exception("No current Activity!"));
+                return;
+            }
+
+            Log.d(TAG, "Entering Picture-in-Picture");
+
+            PictureInPictureParams.Builder builder
+                = new PictureInPictureParams.Builder()
+                    .setAspectRatio(new Rational(1, 1));
+            boolean r
+                = currentActivity.enterPictureInPictureMode(builder.build());
+
+            if (r) {
+                promise.resolve(null);
+            } else {
+                promise.reject(
+                    new Exception("Failed to enter Picture-in-Picture"));
+            }
+
+            return;
+        }
+
+        promise.reject(new Exception("Picture-in-Picture not supported"));
+    }
+
+    @Override
+    public String getName() {
+        return TAG;
+    }
+}

android/sdk/src/main/java/org/jitsi/meet/sdk/ReactPackageAdapter.java

@@ -26,11 +26,6 @@ import java.util.Collections;
 import java.util.List;
 
 public class ReactPackageAdapter implements ReactPackage {
-    @Override
-    public List<Class<? extends JavaScriptModule>> createJSModules() {
-        return Collections.emptyList();
-    }
-
     @Override
     public List<NativeModule> createNativeModules(
             ReactApplicationContext reactContext) {

android/sdk/src/main/java/org/jitsi/meet/sdk/WiFiStatsModule.java

@@ -0,0 +1,208 @@
+/*
+ * Copyright @ 2017-present Atlassian Pty Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package org.jitsi.meet.sdk;
+
+import android.content.Context;
+import android.net.wifi.WifiInfo;
+import android.net.wifi.WifiManager;
+import android.os.Handler;
+import android.os.Looper;
+import android.util.Log;
+
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+
+import org.json.JSONArray;
+import org.json.JSONObject;
+
+import java.net.InetAddress;
+import java.net.NetworkInterface;
+import java.net.SocketException;
+import java.net.UnknownHostException;
+import java.util.Enumeration;
+
+/**
+ * Module exposing WiFi statistics.
+ *
+ * Gathers rssi, signal in percentage, timestamp and the addresses
+ * of the wifi device.
+ */
+class WiFiStatsModule extends ReactContextBaseJavaModule {
+    /**
+     * The name of {@code WiFiStatsModule} to be used in the React Native
+     * bridge.
+     */
+    private static final String MODULE_NAME = "WiFiStats";
+
+    /**
+     * The {@code Log} tag {@code WiFiStatsModule} is to log messages with.
+     */
+    static final String TAG = MODULE_NAME;
+
+    /**
+     * The scale used for the signal value.
+     * A level of the signal, given in the range
+     * of 0 to SIGNAL_LEVEL_SCALE-1 (both inclusive).
+     */
+    public final static int SIGNAL_LEVEL_SCALE = 101;
+
+    /**
+     * {@link Handler} for running all operations on the main thread.
+     */
+    private final Handler mainThreadHandler
+            = new Handler(Looper.getMainLooper());
+
+    /**
+     * Initializes a new module instance. There shall be a single instance of
+     * this module throughout the lifetime of the application.
+     *
+     * @param reactContext the {@link ReactApplicationContext} where this module
+     * is created.
+     */
+    public WiFiStatsModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+    }
+
+    /**
+     * Gets the name for this module to be used in the React Native bridge.
+     *
+     * @return a string with the module name.
+     */
+    @Override
+    public String getName() {
+        return MODULE_NAME;
+    }
+
+    /**
+     * Returns the {@link InetAddress} represented by this int.
+     *
+     * @param value the int representation of the ip address.
+     * @return the {@link InetAddress}.
+     * @throws UnknownHostException - if IP address is of illegal length.
+     */
+    public static InetAddress toInetAddress(int value)
+            throws UnknownHostException {
+        return InetAddress.getByAddress(
+            new byte[] {
+                    (byte) value,
+                    (byte) (value >> 8),
+                    (byte) (value >> 16),
+                    (byte) (value >> 24)
+            });
+    }
+
+    /**
+     * Public method to retrieve WiFi stats.
+     *
+     * @param promise a {@link Promise} which will be resolved if WiFi stats are
+     * retrieved successfully, and it will be rejected otherwise.
+     */
+    @ReactMethod
+    public void getWiFiStats(final Promise promise) {
+        Runnable r = new Runnable() {
+            @Override
+            public void run() {
+                try {
+
+                    Context context
+                        = getReactApplicationContext().getApplicationContext();
+                    WifiManager wifiManager
+                        = (WifiManager) context
+                            .getSystemService(Context.WIFI_SERVICE);
+
+                    if (!wifiManager.isWifiEnabled()) {
+                        promise.reject(new Exception("Wifi not enabled"));
+                        return;
+                    }
+
+                    WifiInfo wifiInfo = wifiManager.getConnectionInfo();
+
+                    if (wifiInfo.getNetworkId() == -1) {
+                        promise.reject(new Exception("Wifi not connected"));
+                        return;
+                    }
+
+                    int rssi = wifiInfo.getRssi();
+                    int signalLevel
+                        = WifiManager.calculateSignalLevel(
+                            rssi, SIGNAL_LEVEL_SCALE);
+
+                    JSONObject result = new JSONObject();
+                    result.put("rssi", rssi)
+                        .put("signal", signalLevel)
+                        .put("timestamp",
+                                String.valueOf(System.currentTimeMillis()));
+
+                    JSONArray addresses = new JSONArray();
+
+                    InetAddress wifiAddress
+                        = toInetAddress(wifiInfo.getIpAddress());
+
+                    try {
+                        Enumeration<NetworkInterface> e
+                            =  NetworkInterface.getNetworkInterfaces();
+                        while (e.hasMoreElements()) {
+                            NetworkInterface networkInterface = e.nextElement();
+                            boolean found = false;
+
+                            // first check whether this is the desired interface
+                            Enumeration<InetAddress> as
+                                = networkInterface.getInetAddresses();
+                            while (as.hasMoreElements()) {
+                                InetAddress a = as.nextElement();
+                                if(a.equals(wifiAddress)) {
+                                    found = true;
+                                    break;
+                                }
+                            }
+
+                            if (found) {
+                                // interface found let's put addresses
+                                // to the result object
+                                as = networkInterface.getInetAddresses();
+                                while (as.hasMoreElements()) {
+                                    InetAddress a = as.nextElement();
+                                    if (a.isLinkLocalAddress())
+                                        continue;
+
+                                    addresses.put(a.getHostAddress());
+                                }
+                            }
+
+                        }
+                    } catch (SocketException e) {
+                        Log.wtf(TAG,
+                            "Unable to NetworkInterface.getNetworkInterfaces()"
+                        );
+                    }
+
+                    result.put("addresses", addresses);
+                    promise.resolve(result.toString());
+
+                    Log.d(TAG, "WiFi stats: " + result.toString());
+                } catch (Throwable e) {
+                    Log.e(TAG, "Failed to obtain wifi stats", e);
+                    promise.reject(
+                        new Exception("Failed to obtain wifi stats"));
+                }
+            }
+        };
+        mainThreadHandler.post(r);
+    }
+}

android/settings.gradle

@@ -9,7 +9,13 @@ include ':react-native-immersive'
 project(':react-native-immersive').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-immersive/android')
 include ':react-native-keep-awake'
 project(':react-native-keep-awake').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keep-awake/android')
+include ':react-native-locale-detector'
+project(':react-native-locale-detector').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-locale-detector/android')
+include ':react-native-sound'
+project(':react-native-sound').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sound/android')
 include ':react-native-vector-icons'
 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 include ':react-native-webrtc'
 project(':react-native-webrtc').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webrtc/android')
+include ':react-native-calendar-events'
+project(':react-native-calendar-events').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-calendar-events/android')

app.js

@@ -1,18 +1,16 @@
 /* application specific logic */
 
+// FIXME: remove once atlaskit work with React 16
+// It seems that @atlaskit/icon is importing PropTypes from React, but it
+// happens through some glyph coffee script template. It could be that more
+// things are broken there (not only the icon).
+import './react/features/base/react/prop-types-polyfill.js';
+
 import 'jquery';
 import 'jquery-contextmenu';
-import 'jquery-ui';
-import 'strophe';
-import 'strophe-disco';
 import 'jQuery-Impromptu';
 import 'autosize';
 
-import 'aui';
-import 'aui-experimental';
-import 'aui-css';
-import 'aui-experimental-css';
-
 import conference from './conference';
 import API from './modules/API';
 import keyboardshortcut from './modules/keyboardshortcut/keyboardshortcut';

config.js

@@ -1,12 +1,14 @@
-var config = { // eslint-disable-line no-unused-vars
+/* eslint-disable no-unused-vars, no-var */
+
+var config = {
     // Configuration
     //
 
     // Alternative location for the configuration.
-    //configLocation: './config.json',
+    // configLocation: './config.json',
 
     // Custom function which given the URL path should return a room name.
-    //getroomnode: function (path) { return 'someprefixpossiblybasedonpath'; },
+    // getroomnode: function (path) { return 'someprefixpossiblybasedonpath'; },
 
 
     // Connection
@@ -17,22 +19,22 @@ var config = { // eslint-disable-line no-unused-vars
         domain: 'jitsi-meet.example.com',
 
         // XMPP MUC domain. FIXME: use XEP-0030 to discover it.
-        muc: 'conference.jitsi-meet.example.com',
+        muc: 'conference.jitsi-meet.example.com'
 
         // When using authentication, domain for guest users.
-        //anonymousdomain: 'guest.example.com',
+        // anonymousdomain: 'guest.example.com',
 
         // Domain for authenticated users. Defaults to <domain>.
-        //authdomain: 'jitsi-meet.example.com',
+        // authdomain: 'jitsi-meet.example.com',
 
         // Jirecon recording component domain.
-        //jirecon: 'jirecon.jitsi-meet.example.com',
+        // jirecon: 'jirecon.jitsi-meet.example.com',
 
         // Call control component (Jigasi).
-        //call_control: 'callcontrol.jitsi-meet.example.com',
+        // call_control: 'callcontrol.jitsi-meet.example.com',
 
         // Focus component domain. Defaults to focus.<domain>.
-        //focus: 'focus.jitsi-meet.example.com',
+        // focus: 'focus.jitsi-meet.example.com',
     },
 
     // BOSH URL. FIXME: use XEP-0156 to discover it.
@@ -42,7 +44,7 @@ var config = { // eslint-disable-line no-unused-vars
     clientNode: 'http://jitsi.org/jitsimeet',
 
     // The real JID of focus participant - can be overridden here
-    //focusUserJid: 'focus@auth.jitsi-meet.example.com',
+    // focusUserJid: 'focus@auth.jitsi-meet.example.com',
 
 
     // Testing / experimental features.
@@ -51,18 +53,19 @@ var config = { // eslint-disable-line no-unused-vars
     testing: {
         // Enables experimental simulcast support on Firefox.
         enableFirefoxSimulcast: false,
+
         // P2P test mode disables automatic switching to P2P when there are 2
         // participants in the conference.
-        p2pTestMode: false,
+        p2pTestMode: false
     },
 
     // Disables ICE/UDP by filtering out local and remote UDP candidates in
     // signalling.
-    //webrtcIceUdpDisable: false,
+    // webrtcIceUdpDisable: false,
 
     // Disables ICE/TCP by filtering out local and remote TCP candidates in
     // signalling.
-    //webrtcIceTcpDisable: false,
+    // webrtcIceTcpDisable: false,
 
 
     // Media
@@ -71,48 +74,68 @@ var config = { // eslint-disable-line no-unused-vars
     // Audio
 
     // Disable measuring of audio levels.
-    //disableAudioLevels: false,
+    // disableAudioLevels: false,
 
     // Start the conference in audio only mode (no video is being received nor
     // sent).
-    //startAudioOnly: false,
+    // startAudioOnly: false,
 
     // Every participant after the Nth will start audio muted.
-    //startAudioMuted: 10,
+    // startAudioMuted: 10,
 
     // Start calls with audio muted. Unlike the option above, this one is only
     // applied locally. FIXME: having these 2 options is confusing.
-    //startWithAudioMuted: false,
+    // startWithAudioMuted: false,
 
     // Video
 
     // Sets the preferred resolution (height) for local video. Defaults to 720.
-    //resolution: 720,
+    // resolution: 720,
+
+    // w3c spec-compliant video constraints to use for video capture. Currently
+    // used by browsers that return true from lib-jitsi-meet's
+    // util#browser#usesNewGumFlow. The constraints are independency from
+    // this config's resolution value. Defaults to requesting an ideal aspect
+    // ratio of 16:9 with an ideal resolution of 1080p.
+    // constraints: {
+    //     video: {
+    //         aspectRatio: 16 / 9,
+    //         height: {
+    //             ideal: 1080,
+    //             max: 1080,
+    //             min: 240
+    //         }
+    //     }
+    // },
 
     // Enable / disable simulcast support.
-    //disableSimulcast: false,
+    // disableSimulcast: false,
 
     // Suspend sending video if bandwidth estimation is too low. This may cause
     // problems with audio playback. Disabled until these are fixed.
     disableSuspendVideo: true,
 
     // Every participant after the Nth will start video muted.
-    //startVideoMuted: 10,
+    // startVideoMuted: 10,
 
     // Start calls with video muted. Unlike the option above, this one is only
     // applied locally. FIXME: having these 2 options is confusing.
-    //startWithVideoMuted: false,
+    // startWithVideoMuted: false,
 
     // If set to true, prefer to use the H.264 video codec (if supported).
     // Note that it's not recommended to do this because simulcast is not
     // supported when  using H.264. For 1-to-1 calls this setting is enabled by
     // default and can be toggled in the p2p section.
-    //preferH264: true,
+    // preferH264: true,
+
+    // If set to true, disable H.264 video codec by stripping it out of the
+    // SDP.
+    // disableH264: false,
 
     // Desktop sharing
 
     // Enable / disable desktop sharing
-    //disableDesktopSharing: false,
+    // disableDesktopSharing: false,
 
     // The ID of the jidesha extension for Chrome.
     desktopSharingChromeExtId: null,
@@ -122,38 +145,30 @@ var config = { // eslint-disable-line no-unused-vars
 
     // The media sources to use when using screen sharing with the Chrome
     // extension.
-    desktopSharingChromeSources: ['screen', 'window', 'tab'],
+    desktopSharingChromeSources: [ 'screen', 'window', 'tab' ],
 
     // Required version of Chrome extension
     desktopSharingChromeMinExtVersion: '0.1',
 
-    // The ID of the jidesha extension for Firefox. If null, we assume that no
-    // extension is required.
-    desktopSharingFirefoxExtId: null,
-
     // Whether desktop sharing should be disabled on Firefox.
     desktopSharingFirefoxDisabled: false,
 
-    // The maximum version of Firefox which requires a jidesha extension.
-    // Example: if set to 41, we will require the extension for Firefox versions
-    // up to and including 41. On Firefox 42 and higher, we will run without the
-    // extension.
-    // If set to -1, an extension will be required for all versions of Firefox.
-    desktopSharingFirefoxMaxVersionExtRequired: 51,
-
-    // The URL to the Firefox extension for desktop sharing.
-    desktopSharingFirefoxExtensionURL: null,
+    // Optional desktop sharing frame rate options. Default value: min:5, max:5.
+    // desktopSharingFrameRate: {
+    //     min: 5,
+    //     max: 5
+    // },
 
     // Try to start calls with screen-sharing instead of camera video.
-    //startScreenSharing: false,
+    // startScreenSharing: false,
 
     // Recording
 
     // Whether to enable recording or not.
-    //enableRecording: false,
+    // enableRecording: false,
 
     // Type for recording: one of jibri or jirecon.
-    //recordingType: 'jibri',
+    // recordingType: 'jibri',
 
     // Misc
 
@@ -161,29 +176,29 @@ var config = { // eslint-disable-line no-unused-vars
     channelLastN: -1,
 
     // Disables or enables RTX (RFC 4588) (defaults to false).
-    //disableRtx: false,
+    // disableRtx: false,
 
     // Use XEP-0215 to fetch STUN and TURN servers.
-    //useStunTurn: true,
+    // useStunTurn: true,
 
     // Enable IPv6 support.
-    //useIPv6: true,
+    // useIPv6: true,
 
     // Enables / disables a data communication channel with the Videobridge.
     // Values can be 'datachannel', 'websocket', true (treat it as
     // 'datachannel'), undefined (treat it as 'datachannel') and false (don't
     // open any channel).
-    //openBridgeChannel: true,
+    // openBridgeChannel: true,
 
 
     // UI
     //
 
     // Use display name as XMPP nickname.
-    //useNicks: false,
+    // useNicks: false,
 
     // Require users to always specify a display name.
-    //requireDisplayName: true,
+    // requireDisplayName: true,
 
     // Whether to use a welcome page or not. In case it's false a random room
     // will be joined when no room is specified.
@@ -191,17 +206,17 @@ var config = { // eslint-disable-line no-unused-vars
 
     // Enabling the close page will ignore the welcome page redirection when
     // a call is hangup.
-    //enableClosePage: false,
+    // enableClosePage: false,
 
     // Disable hiding of remote thumbnails when in a 1-on-1 conference call.
-    //disable1On1Mode: false,
+    // disable1On1Mode: false,
 
     // The minimum value a video's height (or width, whichever is smaller) needs
     // to be in order to be considered high-definition.
     minHDHeight: 540,
 
     // Default language for the user interface.
-    //defaultLanguage: 'en',
+    // defaultLanguage: 'en',
 
     // If true all users without a token will be considered guests and all users
     // with token will be considered non-guests. Only guests will be allowed to
@@ -210,19 +225,29 @@ var config = { // eslint-disable-line no-unused-vars
 
     // Message to show the users. Example: 'The service will be down for
     // maintenance at 01:00 AM GMT,
-    //noticeMessage: '',
+    // noticeMessage: '',
 
 
     // Stats
     //
 
-    // Whether to enable stats collection or not.
-    //disableStats: false,
+    // Whether to enable stats collection or not in the TraceablePeerConnection.
+    // This can be useful for debugging purposes (post-processing/analysis of
+    // the webrtc stats) as it is done in the jitsi-meet-torture bandwidth
+    // estimation tests.
+    // gatherStats: false,
 
     // To enable sending statistics to callstats.io you must provide the
     // Application ID and Secret.
-    //callStatsID: '',
-    //callStatsSecret: '',
+    // callStatsID: '',
+    // callStatsSecret: '',
+
+    // enables callstatsUsername to be reported as statsId and used
+    // by callstats as repoted remote id
+    // enableStatsID: false
+
+    // enables sending participants display name to callstats
+    // enableDisplayNameInStats: false
 
 
     // Privacy
@@ -231,7 +256,7 @@ var config = { // eslint-disable-line no-unused-vars
     // If third party requests are disabled, no other server will be contacted.
     // This means avatars will be locally generated and callstats integration
     // will not function.
-    //disableThirdPartyRequests: false,
+    // disableThirdPartyRequests: false,
 
 
     // Peer-To-Peer mode: used (if enabled) when there are just 2 participants.
@@ -247,32 +272,103 @@ var config = { // eslint-disable-line no-unused-vars
         enabled: true,
 
         // Use XEP-0215 to fetch STUN and TURN servers.
-        //useStunTurn: true,
+        // useStunTurn: true,
 
         // The STUN servers that will be used in the peer to peer connections
         stunServers: [
-            { urls: "stun:stun.l.google.com:19302" },
-            { urls: "stun:stun1.l.google.com:19302" },
-            { urls: "stun:stun2.l.google.com:19302" }
+            { urls: 'stun:stun.l.google.com:19302' },
+            { urls: 'stun:stun1.l.google.com:19302' },
+            { urls: 'stun:stun2.l.google.com:19302' }
         ],
 
+        // Sets the ICE transport policy for the p2p connection. At the time
+        // of this writing the list of possible values are 'all' and 'relay',
+        // but that is subject to change in the future. The enum is defined in
+        // the WebRTC standard:
+        // https://www.w3.org/TR/webrtc/#rtcicetransportpolicy-enum.
+        // If not set, the effective value is 'all'.
+        // iceTransportPolicy: 'all',
+
         // If set to true, it will prefer to use H.264 for P2P calls (if H.264
         // is supported).
         preferH264: true
 
+        // If set to true, disable H.264 video codec by stripping it out of the
+        // SDP.
+        // disableH264: false,
+
         // How long we're going to wait, before going back to P2P after the 3rd
         // participant has left the conference (to filter out page reload).
-        //backToP2PDelay: 5
+        // backToP2PDelay: 5
     },
 
+    // A list of scripts to load as lib-jitsi-meet "analytics handlers".
+    // analyticsScriptUrls: [
+    //      "libs/analytics-ga.js", // google-analytics
+    //      "https://example.com/my-custom-analytics.js"
+    // ],
+
+    // The Google Analytics Tracking ID
+    // googleAnalyticsTrackingId = 'your-tracking-id-here-UA-123456-1',
 
     // Information about the jitsi-meet instance we are connecting to, including
     // the user region as seen by the server.
-    //
-
     deploymentInfo: {
-        //shard: "shard1",
-        //region: "europe",
-        //userRegion: "asia"
+        // shard: "shard1",
+        // region: "europe",
+        // userRegion: "asia"
     }
+
+    // List of undocumented settings used in jitsi-meet
+    /**
+     alwaysVisibleToolbar
+     autoEnableDesktopSharing
+     autoRecord
+     autoRecordToken
+     debug
+     debugAudioLevels
+     deploymentInfo
+     dialInConfCodeUrl
+     dialInNumbersUrl
+     dialOutAuthUrl
+     dialOutCodesUrl
+     disableRemoteControl
+     displayJids
+     enableLocalVideoFlip
+     etherpad_base
+     externalConnectUrl
+     firefox_fake_device
+     googleApiApplicationClientID
+     iAmRecorder
+     iAmSipGateway
+     peopleSearchQueryTypes
+     peopleSearchUrl
+     requireDisplayName
+     tokenAuthUrl
+     */
+
+    // List of undocumented settings used in lib-jitsi-meet
+    /**
+     _peerConnStatusOutOfLastNTimeout
+     _peerConnStatusRtcMuteTimeout
+     abTesting
+     avgRtpStatsN
+     callStatsConfIDNamespace
+     callStatsCustomScriptUrl
+     desktopSharingSources
+     disableAEC
+     disableAGC
+     disableAP
+     disableHPF
+     disableNS
+     enableLipSync
+     enableTalkWhileMuted
+     forceJVB121Ratio
+     hiddenDomain
+     ignoreStartMuted
+     nick
+     startBitrate
+     */
 };
+
+/* eslint-enable no-unused-vars, no-var */

connection.js

@@ -8,12 +8,12 @@ import {
     connectionFailed
 } from './react/features/base/connection';
 import {
-    isFatalJitsiConnectionError
+    isFatalJitsiConnectionError,
+    JitsiConnectionErrors,
+    JitsiConnectionEvents
 } from './react/features/base/lib-jitsi-meet';
 
-const ConnectionEvents = JitsiMeetJS.events.connection;
-const ConnectionErrors = JitsiMeetJS.errors.connection;
-const logger = require("jitsi-meet-logger").getLogger(__filename);
+const logger = require('jitsi-meet-logger').getLogger(__filename);
 
 /**
  * Checks if we have data to use attach instead of connect. If we have the data
@@ -27,28 +27,39 @@ const logger = require("jitsi-meet-logger").getLogger(__filename);
  * @param {string} [roomName] the name of the conference.
  */
 function checkForAttachParametersAndConnect(id, password, connection) {
-    if(window.XMPPAttachInfo){
-        APP.connect.status = "connecting";
+    if (window.XMPPAttachInfo) {
+        APP.connect.status = 'connecting';
+
         // When connection optimization is not deployed or enabled the default
         // value will be window.XMPPAttachInfo.status = "error"
         // If the connection optimization is deployed and enabled and there is
         // a failure the value will be window.XMPPAttachInfo.status = "error"
-        if(window.XMPPAttachInfo.status === "error") {
-            connection.connect({id, password});
+        if (window.XMPPAttachInfo.status === 'error') {
+            connection.connect({
+                id,
+                password
+            });
+
             return;
         }
 
-        var attachOptions = window.XMPPAttachInfo.data;
-        if(attachOptions) {
+        const attachOptions = window.XMPPAttachInfo.data;
+
+        if (attachOptions) {
             connection.attach(attachOptions);
             delete window.XMPPAttachInfo.data;
         } else {
-            connection.connect({id, password});
+            connection.connect({
+                id,
+                password
+            });
         }
     } else {
-        APP.connect.status = "ready";
-        APP.connect.handler = checkForAttachParametersAndConnect.bind(null,
-            id, password, connection);
+        APP.connect.status = 'ready';
+        APP.connect.handler
+            = checkForAttachParametersAndConnect.bind(
+                null,
+                id, password, connection);
     }
 }
 
@@ -62,56 +73,71 @@ function checkForAttachParametersAndConnect(id, password, connection) {
  */
 function connect(id, password, roomName) {
     const connectionConfig = Object.assign({}, config);
-    const { issuer, jwt } = APP.store.getState()['features/jwt'];
+    const { issuer, jwt } = APP.store.getState()['features/base/jwt'];
 
-    connectionConfig.bosh += '?room=' + roomName;
+    connectionConfig.bosh += `?room=${roomName}`;
 
-    let connection
+    const connection
         = new JitsiMeetJS.JitsiConnection(
             null,
             jwt && issuer && issuer !== 'anonymous' ? jwt : undefined,
             connectionConfig);
 
-    return new Promise(function (resolve, reject) {
+    return new Promise((resolve, reject) => {
         connection.addEventListener(
-            ConnectionEvents.CONNECTION_ESTABLISHED,
+            JitsiConnectionEvents.CONNECTION_ESTABLISHED,
             handleConnectionEstablished);
         connection.addEventListener(
-            ConnectionEvents.CONNECTION_FAILED,
+            JitsiConnectionEvents.CONNECTION_FAILED,
             handleConnectionFailed);
         connection.addEventListener(
-            ConnectionEvents.CONNECTION_FAILED,
+            JitsiConnectionEvents.CONNECTION_FAILED,
             connectionFailedHandler);
 
-        function connectionFailedHandler(error, message, credentials) {
+        /* eslint-disable max-params */
+        /**
+         *
+         */
+        function connectionFailedHandler(error, message, credentials, details) {
+        /* eslint-enable max-params */
             APP.store.dispatch(
-                connectionFailed(connection, error, message, credentials));
+                connectionFailed(
+                    connection, error, message, credentials, details));
 
             if (isFatalJitsiConnectionError(error)) {
                 connection.removeEventListener(
-                    ConnectionEvents.CONNECTION_FAILED,
+                    JitsiConnectionEvents.CONNECTION_FAILED,
                     connectionFailedHandler);
             }
         }
 
+        /**
+         *
+         */
         function unsubscribe() {
             connection.removeEventListener(
-                ConnectionEvents.CONNECTION_ESTABLISHED,
+                JitsiConnectionEvents.CONNECTION_ESTABLISHED,
                 handleConnectionEstablished);
             connection.removeEventListener(
-                ConnectionEvents.CONNECTION_FAILED,
+                JitsiConnectionEvents.CONNECTION_FAILED,
                 handleConnectionFailed);
         }
 
+        /**
+         *
+         */
         function handleConnectionEstablished() {
             APP.store.dispatch(connectionEstablished(connection));
             unsubscribe();
             resolve(connection);
         }
 
+        /**
+         *
+         */
         function handleConnectionFailed(err) {
             unsubscribe();
-            logger.error("CONNECTION FAILED:", err);
+            logger.error('CONNECTION FAILED:', err);
             reject(err);
         }
 
@@ -132,24 +158,24 @@ function connect(id, password, roomName) {
  *
  * @returns {Promise<JitsiConnection>}
  */
-export function openConnection({id, password, retry, roomName}) {
-    let usernameOverride
-        = jitsiLocalStorage.getItem("xmpp_username_override");
-    let passwordOverride
-        = jitsiLocalStorage.getItem("xmpp_password_override");
+export function openConnection({ id, password, retry, roomName }) {
+    const usernameOverride
+        = jitsiLocalStorage.getItem('xmpp_username_override');
+    const passwordOverride
+        = jitsiLocalStorage.getItem('xmpp_password_override');
 
     if (usernameOverride && usernameOverride.length > 0) {
-        id = usernameOverride;
+        id = usernameOverride; // eslint-disable-line no-param-reassign
     }
     if (passwordOverride && passwordOverride.length > 0) {
-        password = passwordOverride;
+        password = passwordOverride; // eslint-disable-line no-param-reassign
     }
 
     return connect(id, password, roomName).catch(err => {
         if (retry) {
-            const { issuer, jwt } = APP.store.getState()['features/jwt'];
+            const { issuer, jwt } = APP.store.getState()['features/base/jwt'];
 
-            if (err === ConnectionErrors.PASSWORD_REQUIRED
+            if (err === JitsiConnectionErrors.PASSWORD_REQUIRED
                     && (!jwt || issuer === 'anonymous')) {
                 return AuthHandler.requestAuth(roomName, connect);
             }

connection_optimization/do_external_connect.js

@@ -16,14 +16,17 @@ import parseURLParams from '../react/features/base/config/parseURLParams';
  */
 
 if (typeof createConnectionExternally === 'function') {
-    // URL params have higher proirity than config params.
+    // URL params have higher priority than config params.
     let url
         = parseURLParams(window.location, true, 'hash')[
                 'config.externalConnectUrl']
             || config.externalConnectUrl;
+    const isRecorder
+        = parseURLParams(window.location, true, 'hash')['config.iAmRecorder'];
+
     let roomName;
 
-    if (url && (roomName = getRoomName())) {
+    if (url && (roomName = getRoomName()) && !isRecorder) {
         url += `?room=${roomName}`;
 
         const token = parseURLParams(window.location, true, 'search').jwt;

css/_aui_reset.scss

@@ -0,0 +1,229 @@
+/* Fonts and line heights */
+/**
+ * RESET
+ */
+html,
+body,
+p,
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+img,
+pre,
+form,
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+ul,
+ol,
+dl {
+  margin: 0;
+}
+img,
+fieldset {
+  border: 0;
+}
+@-moz-document url-prefix() {
+  img {
+    font-size: 0;
+  }
+  img:-moz-broken {
+    font-size: inherit;
+  }
+}
+/* https://github.com/necolas/normalize.css */
+/* Customised to remove styles for unsupported browsers */
+details,
+main,
+summary {
+  display: block;
+}
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  vertical-align: baseline;
+}
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+[hidden],
+template {
+  display: none;
+}
+input[type="button"],
+input[type="submit"],
+input[type="reset"] {
+  -webkit-appearance: button;
+}
+/**
+ * TYPOGRAPHY - 14px base font size, agnostic font stack
+ */
+body {
+  color: #333;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.42857142857143;
+}
+/* International Font Stacks*/
+[lang|=en] {
+  font-family: Arial, sans-serif;
+}
+[lang|=ja] {
+  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Verdana, Arial, sans-serif;
+}
+/* Default margins */
+p,
+ul,
+ol,
+dl,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+blockquote,
+pre {
+  margin: 10px 0 0 0;
+}
+/* No top margin to interfere with box padding */
+p:first-child,
+ul:first-child,
+ol:first-child,
+dl:first-child,
+h1:first-child,
+h2:first-child,
+h3:first-child,
+h4:first-child,
+h5:first-child,
+h6:first-child,
+blockquote:first-child,
+pre:first-child {
+  margin-top: 0;
+}
+/* Headings: desired line height in px / font size = unitless line height */
+h1 {
+  color: #333;
+  font-size: 32px;
+  font-weight: normal;
+  line-height: 1.25;
+  text-transform: none;
+  margin: 30px 0 0 0;
+}
+h2 {
+  color: #333;
+  font-size: 24px;
+  font-weight: normal;
+  line-height: 1.25;
+  text-transform: none;
+  margin: 30px 0 0 0;
+}
+h3 {
+  color: #333;
+  font-size: 20px;
+  font-weight: normal;
+  line-height: 1.5;
+  text-transform: none;
+  margin: 30px 0 0 0;
+}
+h4 {
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 1.25;
+  text-transform: none;
+  margin: 20px 0 0 0;
+}
+h5 {
+  color: #333;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 1.42857143;
+  text-transform: none;
+  margin: 20px 0 0 0;
+}
+h6 {
+  color: #707070;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 1.66666667;
+  text-transform: uppercase;
+  margin: 20px 0 0 0;
+}
+h1:first-child,
+h2:first-child,
+h3:first-child,
+h4:first-child,
+h5:first-child,
+h6:first-child {
+  margin-top: 0;
+}
+/* Nice styles for using subheadings */
+h1 + h2,
+h2 + h3,
+h3 + h4,
+h4 + h5,
+h5 + h6 {
+  margin-top: 10px;
+}
+
+
+/* Other typographical elements */
+small {
+  color: #707070;
+  font-size: 12px;
+  line-height: 1.33333333333333;
+}
+code,
+kbd {
+  font-family: monospace;
+}
+var,
+address,
+dfn,
+cite {
+  font-style: italic;
+}
+cite:before {
+  content: "\2014 \2009";
+}
+blockquote {
+  border-left: 1px solid #ccc;
+  color: #707070;
+  margin-left: 19px;
+  padding: 10px 20px;
+}
+blockquote > cite {
+  display: block;
+  margin-top: 10px;
+}
+q {
+  color: #707070;
+}
+q:before {
+  content: open-quote;
+}
+q:after {
+  content: close-quote;
+}
+abbr {
+  border-bottom: 1px #707070 dotted;
+  cursor: help;
+}
+
+a {
+  color: #3572b0;
+  text-decoration: none;
+}
+a:focus,
+a:hover,
+a:active {
+  text-decoration: underline;
+}

css/_base.scss

@@ -123,6 +123,9 @@ form {
 * Dialogs fade
 */
 .aui-blanket {
+    background: #000;
+    transition: opacity 0.2s, visibility 0.2s;
+    transition-delay: 0.1s;
     visibility: visible;
 }
 

css/_connection-info.scss

@@ -1,7 +1,6 @@
 %connection-info {
     font-size: 12px;
     font-weight: 400;
-    color: $modalTextColor;
 
     td {
         padding: 2px 0;
@@ -34,7 +33,6 @@
     &__download
     {
         @extend .connection-info__icon;
-        color: $downloadConnectionIconColor;
     }
 
     &__status
@@ -45,7 +43,6 @@
     &__upload
     {
         @extend .connection-info__icon;
-        color: $uploadConnectionIconColor;
     }
 
     .showmore {

css/_contact_list.scss

@@ -13,11 +13,6 @@
     .clickable {
         cursor: pointer;
     }
-
-    .icon-security,
-    .icon-security-locked {
-        font-size: 16px;
-    }
 }
 
 #contacts {

css/_dial-out.scss

@@ -1,81 +0,0 @@
-/**
- * The dialog content element.
- */
-.dial-out-content {
-    margin-top: 5px;
-
-    /**
-     * Wrap the contents in flex so items can be aligned on the same line.
-     */
-    .form-control {
-        display: flex;
-    }
-
-   /**
-    * The style of the flag icon.
-    */
-    .dial-out-flag-icon {
-        position: absolute;
-        left: 5px;
-        top: 50%;
-        transform: translate(0, -50%);
-    }
-
-    /**
-     * The style of the dial code element.
-     */
-    .dial-out-code {
-        margin-bottom: 0;
-        padding-left: 25px;
-    }
-
-    /**
-     * The dial-out dialog error element.
-     */
-    .dial-out-error {
-        color: $errorColor;
-    }
-
-    /**
-     * The style of the dial input element.
-     */
-    .dial-out-input {
-        display: inline-block;
-        flex: 1;
-        margin-left: 5px;
-    }
-
-    /**
-     * Re-styling the default dropdown inside the dial-out-content.
-     */
-    .dropdown {
-        position: relative;
-        width: 65px;
-    }
-
-    /**
-     * Re-styling the default form-control inside the dial-out-content.
-     */
-    .form-control {
-        margin-bottom: 8px;
-    }
-
-    .dropdown {
-        position: relative;
-
-        input {
-            padding-left: 16px;
-
-            &:read-only {
-                color: inherit;
-            }
-        }
-    }
-
-    .dropdown-trigger-icon {
-        position: absolute;
-        right: 0;
-        top: 50%;
-        transform: translate(0, -50%);
-    }
-}

css/_filmstrip.scss

@@ -52,20 +52,20 @@
         /* The filmstrip should not be covered by the left toolbar. */
         bottom: 0;
         width:auto;
-        transition: bottom 2s;
         overflow: visible !important;
 
         &#remoteVideos {
             border: $thumbnailsBorder solid transparent;
             padding-left: $defaultToolbarSize + 5;
+            transition: bottom 2s;
         }
 
         /**
          * The local video identifier.
          */
         &#filmstripLocalVideo {
-            bottom: 32px;
-            flex-direction: column;
+            align-self: flex-end;
+            display: block;
 
             /**
              * The invite button style.
@@ -86,26 +86,16 @@
                 width: 100%;
 
                 & button {
-                    background: $toolbarBackground;
                     flex-grow: 1;
                     flex-shrink: 1;
                     overflow: hidden;
                 }
 
                 & > * {
-                    color: $toolbarButtonColor;
                     flex-grow: 0;
                     flex-shrink: 0;
                     margin-left: 2px;
                 }
-
-                /**
-                 * Making sure any svg-s in an invite button group will be
-                 * colored the way we want.
-                 */
-                & path {
-                    fill: $toolbarButtonColor;
-                }
             }
         }
 
@@ -197,6 +187,12 @@
     &__videos-filmstripOnly {
         margin-top: auto;
         margin-bottom: auto;
+
+        .filmstrip__videos {
+            &#filmstripLocalVideo {
+                bottom: 0px;
+            }
+        }
     }
 
     .remote-videos-container {

css/_flag-icon.scss

@@ -1,35 +0,0 @@
-.flag-icon-background {
-  background-size: contain;
-  background-position: 50%;
-  background-repeat: no-repeat;
-}
-.flag-icon {
-  background-size: contain;
-  background-position: 50%;
-  background-repeat: no-repeat;
-  position: relative;
-  display: inline-block;
-  width: 1.33333333em;
-  line-height: 1em;
-}
-.flag-icon:before {
-  content: "\00a0";
-}
-.flag-icon-au {
-    background-image: url(../images/countries/au.svg);
-}
-.flag-icon-ca {
-    background-image: url(../images/countries/ca.svg);
-}
-.flag-icon-de {
-    background-image: url(../images/countries/de.svg);
-}
-.flag-icon-gb {
-    background-image: url(../images/countries/gb.svg);
-}
-.flag-icon-fr {
-    background-image: url(../images/countries/fr.svg);
-}
-.flag-icon-us {
-    background-image: url(../images/countries/us.svg);
-}

css/_font.scss

@@ -24,7 +24,30 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
-
+.icon-arrow_back:before {
+  content: "\e5c4";
+}
+.icon-event_note:before {
+    content: "\e616";
+}
+.icon-menu:before {
+  content: "\e5d2";
+}
+.icon-navigate_before:before {
+  content: "\e408";
+}
+.icon-navigate_next:before {
+  content: "\e409";
+}
+.icon-public:before {
+    content: "\e80b";
+}
+.icon-restore:before {
+  content: "\e8b3";
+}
+.icon-timer:before {
+    content: "\e425";
+}
 .icon-thumb-menu:before {
     content: "\e5d4";
 }

css/_inlay.scss

@@ -56,9 +56,6 @@
                 margin-bottom: 0px;
                 width: 100%;
                 border-radius: 0px;
-                > .aui-progress-indicator-value {
-                    border-radius: 0px;
-                }
             }
         }
         &__title {

css/_keyboard-shortcuts.scss

@@ -1,25 +1,10 @@
-#keyboard-shortcuts {
-    display: none;
-    position: absolute;
-    bottom: 20px;
-    left: $defaultToolbarSize;
-    overflow: hidden;
-    padding: 20px;
-    margin-left: 10px;
-    z-index: $zindex10;
-    border-radius: $borderRadius;
-    background-attachment: scroll;
-    background-size: auto auto;
-    color: rgba(255, 255, 255, .8);
-    background-color: rgba(0, 0, 0, .8);
-}
-
-#keyboard-shortcuts .item-action {
-    color: #209EFF;
-    font-size: 14pt;
-    padding-right: 5px;
-}
-
-#keyboard-shortcuts-list {
+.shortcuts-list {
     list-style-type: none;
-}
+    padding: 0;
+
+    &__item {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: em(7, 14);
+    }
+}

css/_popup_menu.scss

@@ -3,6 +3,7 @@
 **/
 
 .popupmenu {
+    min-width: 75px;
     text-align: left;
     padding: 0;
     white-space: nowrap;
@@ -19,7 +20,6 @@
     // Link Appearance
     &__link,
     &__contents {
-        color: $modalTextColor;
         display: block;
         box-sizing: border-box;
         text-decoration: none;
@@ -30,7 +30,6 @@
         padding: 0 5px;
 
         &.disabled {
-            color: gray !important;
             pointer-events: none;
         }
     }

css/_recording.scss

@@ -1,3 +1,81 @@
 .recordingSpinner {
     vertical-align: top;
 }
+
+.live-stream-dialog {
+    /**
+     * Set font-size to be consistent with Atlaskit FieldText.
+     */
+    font-size: 14px;
+
+    .broadcast-dropdown,
+    .broadcast-dropdown-trigger {
+        text-align: left;
+    }
+
+    .form-footer {
+        text-align: right;
+    }
+
+    .live-stream-cta {
+        a {
+            cursor: pointer;
+        }
+    }
+
+    .google-api {
+        margin-top: 10px;
+        min-height: 36px;
+        text-align: center;
+        width: 100%;
+    }
+
+    /**
+     * The Google sign in button must follow Google's design guidelines.
+     * See: https://developers.google.com/identity/branding-guidelines
+     */
+    .google-sign-in {
+        background-color: #4285f4;
+        border-radius: 2px;
+        cursor: pointer;
+        display: inline-flex;
+        font-family: Roboto, arial, sans-serif;
+        font-size: 14px;
+        padding: 1px;
+
+        .google-cta {
+            color: white;
+            display: inline-block;
+            /**
+             * Hack the line height for vertical centering of text.
+             */
+            line-height: 32px;
+            margin: 0 15px;
+        }
+
+        .google-logo {
+            background-color: white;
+            border-radius: 2px;
+            display: inline-block;
+            padding: 8px;
+            height: 18px;
+            width: 18px;
+        }
+    }
+
+    .google-panel {
+        align-items: center;
+        border-bottom: 2px solid rgba(0, 0, 0, 0.3);
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 10px;
+    }
+
+    .stream-key-form {
+        .helper-link {
+            display: inline-block;
+            cursor: pointer;
+            margin-top: 5px;
+        }
+    }
+}

css/_side_toolbar_container.scss

@@ -22,8 +22,10 @@
     /**
      * Form elements and blocks.
      */
-    input, select, a,
-    .sideToolbarBlock, .form-control, .button-control {
+    input,
+    a,
+    .sideToolbarBlock,
+    .form-control {
         display: block;
         margin-top: 15px;
         margin-left: 10%;
@@ -34,19 +36,11 @@
      * Specify styling of elements inside a block.
      */
     .sideToolbarBlock {
-        input, button, a, select {
+        input, a {
             margin-left: 0;
             margin-top: 5px;
             width: 100%;
         }
-        input[type='checkbox'] {
-            display: inline;
-            width: auto !important;
-            > label {
-                margin-top: 5px;
-                width: 80%;
-            }
-        }
     }
 
     /**
@@ -80,42 +74,35 @@
             font-size: $toolbarTitleFontSize;
         }
 
-        /**
-         * Subtitle specific properties.
-         */
-        div.subTitle {
-            color: $defaultSideBarFontColor !important;
-            font-size: 11px;
-            font-weight: 500;
-            margin-left: 10%;
-            text-align: left;
-        }
-
         /**
          * First element after a title.
          */
         .first {
             margin-top: 0 !important;
         }
-
-        /**
-         * Buttons in the side toolbar container.
-         */
-        .button-control {
-            margin: 9px 0;
-            width: 100%;
-        }
     }
-}
 
-#device_settings {
-    width : auto !important;
-    text-align: center;
-}
+    .settings-menu {
+        display: flex;
+        flex-direction: column;
+        padding-left: 10%;
+        padding-right: 10%;
 
-#deviceOptionsWrapper {
-    button {
-        float: none;
+        .moderator-checkbox {
+            display: inline-block;
+            margin: 0 5px 0;
+            width: auto;
+        }
+
+        .moderator-option {
+            margin-top: 15px;
+        }
+
+        .subTitle {
+            color: $defaultSideBarFontColor;
+            font-size: 11px;
+            font-weight: 500;
+        }
     }
 }
 

css/_toolbars.scss

@@ -36,7 +36,6 @@
  * Common toolbar styles.
  */
 .toolbar {
-    color: $modalTextColor;
     height: 100%;
     pointer-events: auto;
     position: relative;
@@ -57,11 +56,14 @@
         /**
          * Toolbar button styles for always on top.
          */
-        > .button {
+        .button {
             font-size: $alwaysOnTopToolbarFontSize;
             height: $alwaysOnTopToolbarSize;
             line-height: $alwaysOnTopToolbarSize;
             width: $alwaysOnTopToolbarSize;
+            &_hangup, &_hangup:hover {
+                font-size: $alwaysOnTopToolbarFontSize;
+            }
         }
     }
 
@@ -82,20 +84,21 @@
         vertical-align: middle;
         width: $defaultToolbarSize;
 
-        &_hangup {
-            color: $hangupColor;
-            font-size: $hangupFontSize;
-        }
-
         &[disabled] {
             opacity: 0.5;
         }
 
         &:hover, &:active {
+            color: $toolbarButtonColor;
             cursor: pointer;
             text-decoration: none;
         }
 
+        &_hangup, &_hangup:hover {
+            color: $hangupColor;
+            font-size: $hangupFontSize;
+        }
+
         &:not(.toggled) {
             &:hover, &:active {
                 // sum opacity with background layer should give us 0.8
@@ -150,10 +153,13 @@
 
         @include transform(translateX(-50%));
 
+        > a:first-child.button,
         > div:first-child .button {
             border-bottom-left-radius: 3px;
             border-top-left-radius: 3px;
         }
+
+        > a:last-child.button,
         > div:last-child .button {
             border-bottom-right-radius: 3px;
             border-top-right-radius: 3px;
@@ -183,6 +189,7 @@
         justify-content: flex-start;
         left: 0;
         padding-top: 24px;
+        pointer-events: none;
         top: 0;
         transform: translateX(-100%);
         width: $defaultToolbarSize;
@@ -194,6 +201,10 @@
             line-height: $secToolbarLineHeight;
         }
 
+        > * {
+            pointer-events: auto
+        }
+
         .button.toggled:not(.icon-raised-hand):not(.button-active) {
             background: $secondaryToolbarBg;
             cursor: pointer;
@@ -226,11 +237,15 @@
             width: 37px;
         }
 
-        .button:first-child {
+        .button-popover-message {
+            width: 100px;
+        }
+
+        .toolbar-button-wrapper:first-child .button {
             border-top-left-radius: 3px;
             border-top-right-radius: 3px;
         }
-        .button:last-child {
+        .toolbar-button-wrapper:last-child .button {
             border-bottom-right-radius: 3px;
             border-bottom-left-radius: 3px;
         }

css/_utils.scss

@@ -1,3 +1,11 @@
+.flip-x {
+    transform: scaleX(-1);
+}
+
+.hidden {
+  display: none;
+}
+
 /**
  * Hides an element.
  */
@@ -5,6 +13,10 @@
     display: none !important;
 }
 
+.invisible {
+    visibility: hidden;
+}
+
 /**
  * Shows an element.
  */
@@ -35,4 +47,4 @@
     display: -ms-flexbox !important;
     display: -webkit-flex !important;
     display: flex !important;
-}
+}

css/_variables.scss

@@ -64,6 +64,7 @@ $connectionIndicatorBg: #165ecc;
 $audioLevelShadow: rgba(9, 36, 77, 0.9);
 $videoStateIndicatorColor: $defaultColor;
 $videoStateIndicatorBackground: $toolbarBackground;
+$videoStateIndicatorSize: 40px;
 
 /**
  * Feedback Modal
@@ -137,8 +138,8 @@ $formPadding: 16px;
 /**
  * Unsupported browser
  */
-$primaryUnsupportedBrowserButtonBgColor: #17a0db;
-$unsupportedBrowserButtonBgColor: #ff9a00;
+$primaryUnsupportedBrowserButtonBgColor: #0052CC;
+$unsupportedBrowserButtonBgColor: rgba(9, 30, 66, 0.04);
 $unsupportedBrowserTextColor: #4a4a4a;
 $unsupportedBrowserTextSmallFontSize: 17px;
 $unsupportedBrowserTitleColor: #fff;
@@ -150,4 +151,12 @@ $unsupportedDesktopBrowserTextFontSize: 21px;
  * The size of the default watermark.
  */
 $watermarkWidth: 186px;
-$watermarkHeight: 74px;
+$watermarkHeight: 74px;
+
+/**
+ * Welcome page variables.
+ */
+$welcomePageDescriptionColor: #fff;
+$welcomePageFontFamily: inherit;
+$welcomePageHeaderBackground: linear-gradient(#165ecc, #44A5FF);
+$welcomePageTitleColor: #fff;

css/_vertical_filmstrip_overrides.scss

@@ -2,6 +2,23 @@
  * Override other styles to support vertical filmstrip mode.
  */
 .vertical-filmstrip {
+    /*
+     * Firefox sets flex items to min-height: auto and min-width: auto,
+     * preventing flex children from shrinking like they do on other browsers.
+     * Setting min-height and min-width 0 is a workaround for the issue so
+     * Firefox behaves like other browsers.
+     * https://bugzilla.mozilla.org/show_bug.cgi?id=1043520
+     */
+    @mixin minHWAutoFix() {
+        min-height: 0;
+        min-width: 0;
+    }
+
+    #etherpad,
+    #sharedvideo {
+        text-align: left;
+    }
+
     .filmstrip {
         align-items: flex-end;
         box-sizing: border-box;
@@ -29,7 +46,6 @@
          */
         .filmstrip__videos {
             right: 0;
-            transition: right 2s;
 
             &.hidden {
                 bottom: auto;
@@ -37,12 +53,17 @@
             }
 
             /**
-             * Remove horizontal filmstrip padding used to prevent videos from
-             * overlapping the left-side toolbar. An id selector is used to
-             * match id specificity with filmstrip styles.
+             * An id selector is used to match id specificity with existing
+             * filmstrip styles.
              */
             &#remoteVideos {
+                /**
+                 * Remove horizontal filmstrip padding used to prevent videos
+                 * from overlapping the left-side toolbar. An id selector is
+                 * used to match id specificity with filmstrip styles.
+                 */
                 padding-left: 0;
+                transition: right 2s;
             }
         }
 
@@ -51,7 +72,9 @@
          * vertical filmstrip layout.
          */
         #filmstripLocalVideo {
+            align-self: initial;
             bottom: 5px;
+            display: flex;
             flex-direction: column-reverse;
             height: auto;
             justify-content: flex-start;
@@ -73,6 +96,8 @@
         }
 
         #filmstripRemoteVideos {
+            @include minHWAutoFix();
+
             display: flex;
             flex: 1;
             flex-direction: column;
@@ -81,6 +106,11 @@
 
             #filmstripRemoteVideosContainer {
                 flex-direction: column-reverse;
+                /**
+                 * Add padding as a hack for Firefox not to show scrollbars when
+                 * unnecessary.
+                 */
+                padding: 1px 0;
                 overflow-x: hidden;
             }
         }
@@ -110,6 +140,8 @@
         }
 
         #remoteVideos {
+            @include minHWAutoFix();
+
             flex-direction: column;
             flex-grow: 1;
         }
@@ -219,3 +251,35 @@
         }
     }
 }
+
+/**
+ * Workarounds for Edge, IE11, and Firefox not handling scrolling properly
+ * with flex-direction: column-reverse. The remove videos in filmstrip should
+ * start scrolling from the bottom of the filmstrip, but in those browsers the
+ * scrolling won't happen. Per W3C spec, scrolling should happen from the
+ * bottom. As such, use css hacks to get around the css issue, with the intent
+ * being to remove the hacks as the spec is supported.
+ */
+@mixin undoColumnReverseVideos() {
+    .vertical-filmstrip {
+        #remoteVideos #filmstripRemoteVideos #filmstripRemoteVideosContainer {
+            flex-direction: column;
+        }
+    }
+}
+
+/** Firefox detection hack **/
+@-moz-document url-prefix() {
+    @include undoColumnReverseVideos();
+}
+
+/** IE11 detection hack **/
+@media screen and (-ms-high-contrast: active),
+screen and (-ms-high-contrast: none) {
+    @include undoColumnReverseVideos();
+}
+
+/** Edge detection hack **/
+@supports (-ms-ime-align:auto) {
+    @include undoColumnReverseVideos();
+}

css/_videolayout_default.scss

@@ -12,7 +12,8 @@
     overflow: hidden;
 }
 
-.video_blurred_container {
+#largeVideoBackgroundContainer,
+.large-video-background {
     height: 100%;
     filter: blur(40px);
     left: 0;
@@ -20,6 +21,16 @@
     position: absolute;
     top: 0;
     width: 100%;
+
+    &.fit-full-height #largeVideoBackground {
+        height: 100%;
+        width: auto;
+    }
+
+    .fit-full-width #largeVideoBackground {
+        height: auto;
+        width: 100%;
+    }
 }
 
 .videocontainer {
@@ -65,6 +76,15 @@
             float: left;
             pointer-events: all;
         }
+
+        /**
+         * Need to overwrite the background for the top toolbar dark theme div
+         * wrapper needed before we're able to move all top toolbar indicators
+         * creation to react.
+         */
+        .ckAJgx {
+            background: none;
+        }
     }
 
     &__toolbar {
@@ -241,6 +261,7 @@
 /**
  * Positions video thumbnail display name and editor.
  */
+#alwaysOnTop .displayname,
 .videocontainer .displayname,
 .videocontainer .editdisplayname {
     display: inline-block;
@@ -260,6 +281,15 @@
     z-index: $zindex2;
 }
 
+#alwaysOnTop .displayname {
+    font-size: 15px;
+    position: inherit;
+    width: 100%;
+    left: 0px;
+    top: 0px;
+    margin-top: 10px;
+}
+
 /**
  * Positions video thumbnail display name editor.
  */
@@ -498,6 +528,20 @@
     width: auto;
 }
 
+#videoNotAvailableScreen {
+    text-align: center;
+    #avatarContainer {
+        height: 50vh;
+        display:inline-block;
+        margin-top: 25vh;
+
+        #avatar {
+            border-radius: 50%;
+            height: 100%;
+        }
+    }
+}
+
 .sharedVideoAvatar {
     height: 100%;
     width: 100%;

css/_welcome_page.scss

@@ -1,200 +1,87 @@
-#disable_welcome {
-    display:none;
-}
+.welcome {
+    font-family: $welcomePageFontFamily;
+    height: 100%;
+    overflow: auto;
+    position: relative;
 
-.disable_welcome_position
-{
-    margin: -139px auto 0px auto;
-    padding-left: 39px;
-    padding-top: 7px;
-    width: 269px;
-    height: 31px;
-    display:block;
-}
-
-#disable_welcome + label
-{
-    background-image: url(../images/welcome_page/disable-welcome.png);
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    background-repeat: no-repeat;
-    font-weight: 500;
-    font-size: 16px;
-    color: #acacac;
-    z-index: $zindex2;
-}
-
-#disable_welcome:checked + label
-{
-    background-image: url(../images/welcome_page/disable-welcome-selected.png);
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    background-repeat: no-repeat;
-    font-weight: 500;
-    font-size: 16px;
-    color: #acacac;
-    z-index: $zindex2;
-}
-
-#enter_room_form {
-    border-radius: 1px;
-    background-color: #FFFFFF;
-    border: none;
-    -moz-border-radius: 1px;
-    -webkit-border-radius: 1px;
-    -webkit-appearance: none;
-    height: 55px;
-    box-shadow: none;
-    float: left;
-}
-
-.domain-name
-{
-    float: left;
-    height: 55px;
-    line-height: 55px;
-    font-size: 18px;
-    font-weight: 500;
-    padding-left: 20px;
-    color: $defaultDarkColor;
-}
-
-.enter-room {
-    &__field {
-        font-size: 15px;
-        border: none;
-        -webkit-appearance: none;
-        width: 228px;
-        height: 55px;
-        line-height: 55px;
-        font-weight: 500;
-        box-shadow: none;
-        float: left;
-        background-color: #FFFFFF;
+    .header {
+        align-items: center;
+        background: $welcomePageHeaderBackground;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
         position: relative;
-        z-index: $zindex2;
-    }
-
-    &__reload {
-        display: block;
-        width: 30px;
-        color: #acacac;
-        font-size: 1.9em;
-        line-height: 55px;
-        z-index: $zindex3;
-        float:  left;
-        cursor: pointer;
         text-align: center;
+
+        .header-text {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            margin-top: 120px;
+            margin-bottom: 20px;
+            min-height: 286px;
+            width: 645px;
+        }
+
+        .header-text-title {
+            color: $welcomePageTitleColor;
+            font-size: 48px;
+            letter-spacing: -1px;
+            line-height: 58px;
+            margin-bottom: 20px;
+        }
+
+        .header-text-description {
+            color: $welcomePageDescriptionColor;
+            font-size: 20px;
+            line-height: 28px;
+            opacity: 0.8;
+        }
+
+        .header-image {
+            background-image: url(../images/welcome_page/curves.png);
+            background-size: contain;
+            height: 209px;
+            position: absolute;
+            width: 1070px;
+        }
+
+        #new_enter_room {
+            align-items: center;
+            display: flex;
+            margin-bottom: 20px;
+            position: relative;
+            z-index: 2;
+
+            .enter-room-input {
+                display: inline-block;
+                margin-right: 15px;
+                width: 350px;
+            }
+        }
     }
 
-    &__button {
-        width: 73px;
-        height: 45px;
-        background-color: #21B9FC;
-        moz-border-radius: 1px;
-        -webkit-border-radius: 1px;
-        color: #ffffff;
-        font-weight: 600;
-        border: none;
-        margin-top: 5px;
-        font-size: 19px;
-        padding-top: 6px;
-        outline: none;
-        float:left;
-        position: relative;
-        z-index: $zindex2;
+    .welcome-page-button {
+        font-size: 16px;
     }
 }
 
-#enter_room_container {
-    margin: 70px auto 0px auto;
-    display: table;
+.welcome.with-content {
+    .header {
+        min-height: 552px;
+    }
+    .header-image {
+        left: -61px;
+        top: 401px;
+    }
 }
 
-#enter_room{
-    float:left;
-    padding-right: 5px;
-}
-
-#welcome_page_header
-{
-    background-image: url(../images/welcome_page/pattern-header.png);
-    height: 290px;
-    width: 100%;
-    position: absolute;
-}
-
-#welcome_page_main
-{
-    background-image:url(../images/welcome_page/pattern-body.png);
-    width: 100%;
-    position: absolute;
-    margin-top: 290px;
-}
-
-#brand_header
-{
-    background-image:url(../images/welcome_page/header-big.png);
-    width: 583px;
-    height: 274px;
-    margin: -110px auto 0px auto;
-}
-
-#header_text
-{
-    width: 885px;
-    height: 100px;
-    color: #ffffff;
-    font-size: 24px;
-    text-align: center;
-    margin: 0px auto 0px auto;
-}
-
-#features
-{
-    margin-top: 30px;
-    position: relative;
-}
-
-.feature_row
-{
-    position: relative;
-    width: 976px;
-    margin: 0px auto 30px auto;
-    padding-right: 75px;
-
-}
-
-.feature_holder
-{
-    float:left;
-    width: 169px;
-    padding-left: 75px;
-    padding-bottom: 30px;
-}
-
-.feature_icon
-{
-    background-image:url(../images/welcome_page/bubble.png);
-    background-repeat: no-repeat;
-    width: 169px;
-    height: 169px;
-    color: #ffffff;
-    font-size: 22px;
-    /*font-weight: bold;*/
-    text-align: center;
-    display: table-cell;
-    padding: 50px 26px 0px 20px;
-}
-
-.feature_description
-{
-    width: 190px;
-    color: #ffffff;
-    font-size: 16px;
-    padding-top: 30px;
-    line-height: 22px;
-    font-weight: 200;
+.welcome.without-content {
+    .header {
+        height: 100%;
+    }
+    .header-image {
+        bottom: -20px;
+        left: 0;
+    }
 }

css/_welcome_page_content.scss

@@ -0,0 +1 @@
+/** Insert custom CSS for any additional content in the welcome page **/

css/main.scss

@@ -28,11 +28,9 @@
 @import 'font-awesome';
 /* Fonts END */
 
-@import 'flag-icon';
-
 /* Modules BEGIN */
 
-@import 'dial-out';
+@import 'aui_reset';
 @import 'base';
 @import 'utils';
 @import 'overlay/overlay';
@@ -54,6 +52,7 @@
 @import 'chat';
 @import 'ringing/ringing';
 @import 'welcome_page';
+@import 'welcome_page_content';
 @import 'toolbars';
 @import 'side_toolbar_container';
 @import 'jquery.contextMenu';
@@ -61,11 +60,9 @@
 @import 'redirect_page';
 @import 'components/form-control';
 @import 'components/link';
-@import 'shortcuts/main';
 @import 'components/button-control';
 @import 'components/input-control';
 @import 'components/input-slider';
-@import "modals/invite/invite";
 @import "connection-info";
 @import 'aui-components/dropdown';
 @import '404';

css/modals/_dialog.scss

@@ -1,6 +1,10 @@
 .dialog {
-    visibility: visible;
+    box-sizing: border-box;
     height: auto;
+    min-height: 131px;
+    overflow: visible;
+    visibility: visible;
+    width: 400px;
 
     h1, h2, h3, h4, h5, h6 {
         color: $auiDialogColor;
@@ -10,10 +14,27 @@
 
         &-icon {
             color: $auiDialogColor;
+            text-indent: -999em;
 
             &-small {
                 width: 14px;
                 height: 14px;
+
+                &:before {
+                    color: inherit;
+                    font-family: "FontAwesome";
+                    font-size: 16px;
+                    -webkit-font-smoothing: antialiased;
+                    font-style: normal;
+                    font-weight: normal;
+                    left: 0;
+                    line-height: 1;
+                    margin-top: -8px;
+                    position: absolute;
+                    text-indent: 0;
+                    speak: none;
+                    top: 50%;
+                }
             }
         }
 
@@ -22,6 +43,10 @@
             right: 20px;
             position: absolute;
             top: -49px;
+
+            &:before {
+                content: "\f00d";
+            }
         }
 
         &-dialog2 {
@@ -31,8 +56,16 @@
             }
 
             &-header {
-                height: em(58, 12);
                 border-bottom: 1px solid $auiBorderColor;
+                border-radius: 5px 5px 0 0;
+                box-sizing: border-box;
+                color: #333;
+                display: table;
+                font-weight: normal;
+                height: em(58, 12);
+                margin-top: -69px;
+                padding: 0 20px;
+                width: 100%;
 
                 h2 {
                     font-size: em(20, 12);
@@ -41,19 +74,40 @@
                 }
 
                 &-main {
+                    display: table-cell;
                     padding-right: 0;
+                    max-width: 400px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    vertical-align: middle;
+                    white-space: nowrap;
+
                 }
             }
 
             &-footer {
                 border-top: 1px solid $auiBorderColor;
+                border-radius: 0 0 5px 5px;
+                box-sizing: border-box;
+                height: 51px;
+                overflow: hidden;
+                padding: 10px 20px;
+                width: 100%;
+
+                &:empty {
+                    height: 5px;
+                    padding: 0;
+                }
             }
 
             &-content {
-                font-size: em(14, 12);
-                min-height: 0;
-                background-color: $auiDialogContentBg;
+                background-color: $auiDialogBg;
+                box-sizing: border-box;
                 color: $auiDialogColor;
+                font-size: em(14, 12);
+                overflow: auto;
+                max-height: 100%;
+                padding: 20px;
 
                 p,span, h3 {
                     font-weight: $labelFontWeight;
@@ -72,13 +126,23 @@
         }
     }
 
+    .input-control {
+        background-color: $auiDialogContentBg;
+        color: $auiDialogColor;
+    }
+
     .form-control:not(:last-child) {
         border-bottom: 1px solid $auiBorderColor;
     }
 }
 
+@media all and (max-width: 420px) {
+  .aui-dialog2-small .aui-dialog2-content {
+    height: 100%;
+  }
+}
+
 .modal-dialog-form {
-    color: $modalTextColor;
     margin-top: 5px !important;
 
     .input-control {
@@ -90,6 +154,14 @@
     &-error {
         margin-bottom: 8px;
     }
+
+    /**
+     * Override Atlaskit dropdown styling when in a modal because the dropdown
+     * backgrounds clash with the modal backgrounds.
+     */
+    .htclLc[data-role=droplistContent] {
+        border: 1px solid #455166;
+    }
 }
 .modal-dialog-footer {
     font-size: $modalButtonFontSize;

css/modals/desktop-picker/_desktop-picker.scss

@@ -26,16 +26,22 @@
             width: 30%;
         }
     }
+
+    &-spinner {
+        justify-content: center;
+        display: flex;
+        height: 100%;
+        align-items: center;
+    }
 }
 
 .desktop-picker-source {
-    color: $defaultDarkFontColor;
     margin-top: 10px;
     text-align: center;
 
     &.is-selected {
         .desktop-source-preview-image-container {
-            background: rgba(0, 0, 0, 0.1);
+            background: rgba(255,255,255,0.3);
             border-radius: $borderRadius;
         }
     }

css/modals/device-selection/_device-selection.scss

@@ -1,6 +1,4 @@
 .device-selection {
-    color: $feedbackInputTextColor;
-
     .device-selectors {
         font-size: 14px;
 
@@ -22,19 +20,15 @@
 
         /* device-selector-trigger stylings attempt to mimic AtlasKit button */
         .device-selector-trigger {
-            background-color: rgba(9, 30, 66, 0.04);
-            border-radius: 3px;
-            color: #505f79;
+            background-color: #0E1624;
+            border: 1px solid #455166;
+            border-radius: 5px;
             display: flex;
             height: 2.3em;
             justify-content: space-between;
             line-height: 2.3em;
             overflow: hidden;
             padding: 0 8px;
-
-            &:hover {
-                background-color: rgba(9,30,66,.08);
-            }
         }
         .device-selector-trigger-disabled {
             .device-selector-trigger {
@@ -108,19 +102,21 @@
     .audio-output-preview {
         font-size: 14px;
         margin-top: 10px;
+
         a {
+            color: 4C9AFF;
             cursor: pointer;
             text-decoration: none;
         }
     }
 
     .audio-input-preview {
-        background: #f4f5f7;
+        background: #7b7b7b;
         border-radius: 5px;
         height: 6px;
 
         .audio-input-preview-level {
-            background: #0052cc;
+            background: #4C9AFF;
             border-radius: 5px;
             height: 100%;
             -webkit-transition: width .1s ease-in-out;

css/modals/invite/_add-people.scss

@@ -11,17 +11,11 @@
                 padding-left: 5px;
             }
         }
-    }
-}
 
-/**
- * Styles the loading element in the MultiSelectAutocomplete.
- */
-.autocomplete-loading {
-    justify-content: center;
-    display: flex;
-    min-width: 260px;
-    padding: 20px;
+        .add-telephone-icon {
+            transform: scaleX(-1);
+        }
+    }
 }
 
 /**

css/modals/invite/_info.scss

@@ -4,16 +4,20 @@
 
     .info-dialog-action-link {
         display: inline-block;
+        line-height: 1.5em;
 
         a {
             cursor: pointer;
+            vertical-align: middle;
         }
     }
 
     .info-dialog-action-link:before {
         color: $linkFontColor;
         content: '\2022';
+        font-size: 1.5em;
         padding: 0 10px;
+        vertical-align: middle;
     }
 
     .info-dialog-action-link:first-child:before {
@@ -22,6 +26,8 @@
     }
 
     .info-dialog-action-links {
+        font-weight: bold;
+        margin-top: 10px;
         white-space: nowrap;
     }
 
@@ -39,16 +45,33 @@
 
     .info-dialog-column {
         margin-right: 10px;
+        overflow: hidden;
+
+        a,
+        a:active,
+        a:focus,
+        a:hover {
+            text-decoration: none;
+        }
     }
 
     .info-dialog-conference-url {
-        margin: 10px 0;
         max-width: 250px;
         overflow: hidden;
         text-overflow: ellipsis;
+        user-select: text;
         white-space: nowrap;
     }
 
+    .info-dialog-dial-in {
+        white-space: nowrap;
+
+        .conference-id,
+        .phone-number {
+            user-select: text;
+        }
+    }
+
     .info-dialog-icon {
         color: #6453C0;
         font-size: 16px;
@@ -56,5 +79,63 @@
 
     .info-dialog-title {
         font-weight: bold;
+        margin-bottom: 10px;
+    }
+
+    .info-password,
+    .info-dialog-password,
+    .info-password-form {
+        display: flex;
+    }
+
+    .info-password-field {
+        margin-left: 2px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .info-password-none,
+    .info-password-remote {
+        opacity: 0.5;
+    }
+
+    .info-password-input {
+        background-color: transparent;
+        border: none;
+        color: inherit;
+        padding-left: 0;
+    }
+
+    .info-password-local {
+        user-select: text;
+    }
+
+    .conference-id {
+        margin-left: 5px;
+    }
+}
+
+.dial-in-page {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    font-size: 24px;
+    height: 100%;
+    justify-content: center;
+    width: 100%;
+
+    * {
+        user-select: text;
+    }
+
+    .dial-in-numbers-list {
+        font-size: 24px;
+        margin-top: 20px;
+    }
+
+    .dial-in-conference-id {
+        text-align: center;
+        width: 30%;
     }
 }

css/modals/invite/_invite.scss

@@ -1,103 +0,0 @@
-/*
- * Sets the default cursor the remove password link. The link doesn't use
- * the href attribute, so we need to set the  cursor manually.
- */
-#inviteDialogRemovePassword {
-    cursor: hand;
-}
-
-.invite-dialog {
-    .dial-in-numbers {
-        .dial-in-numbers-conference-id {
-            color: orange;
-            margin-left: 3px;
-        }
-
-        /*
-         * dial-in-numbers-copy styling is needed for the feature of copying
-         * text to the clipboard. The styling keeps the element invisible
-         * to the user but still programmatically selectable for copying.
-         */
-        .dial-in-numbers-copy {
-            opacity: 0;
-            pointer-events: none;
-            position: fixed;
-            -webkit-user-select: text;
-            user-select: text;
-        }
-
-        .dial-in-numbers-trigger {
-            position: relative;
-            width: 100%;
-
-            .dial-in-numbers-trigger-icon {
-                position: absolute;
-                right: 10px;
-                top: 4px;
-            }
-        }
-
-        .is-disabled,
-        .is-loading {
-            .dial-in-numbers-trigger-icon {
-                display: none;
-            }
-        }
-    }
-
-    .form-control {
-        padding: 0;
-
-        &__container {
-            /**
-             * Ensure contents display in a line and vertically centered.
-             */
-            align-items: center;
-
-            button {
-                font-size: $modalButtonFontSize;
-            }
-        }
-
-        &__input-container {
-            flex: 1;
-            margin-right: 10px;
-        }
-    }
-
-    .inviteLink {
-        color: $readOnlyInputColor;
-    }
-
-    .lock-state {
-        display: flex;
-    }
-
-    .password-overview {
-        margin-top: 10px;
-
-        .form-control {
-            margin-top: 10px;
-        }
-
-        .password-overview-status,
-        .remove-password {
-            display: flex;
-            justify-content: space-between;
-        }
-
-        .password-overview-toggle-edit,
-        .remove-password-link {
-            cursor: pointer;
-            text-decoration: none;
-        }
-
-        .remove-password {
-            margin-top: 15px;
-        }
-    }
-
-    .remove-password-current {
-        color: $inputControlEmColor;
-    }
-}

css/modals/speaker_stats/_speaker_stats.scss

@@ -42,10 +42,6 @@
         width: 55%;
     }
 
-    .speaker-stats-item:nth-child(even) {
-        background: whitesmoke;
-    }
-
     .speaker-stats-item__name,
     .speaker-stats-item__time {
         overflow: hidden;

css/modals/video-quality/_video-quality.scss

@@ -1,6 +1,4 @@
 .video-quality-dialog {
-    color: $modalTextColor;
-
     .hide-warning {
         height: 0;
         visibility: hidden;
@@ -12,7 +10,6 @@
 
     .video-quality-dialog-contents {
         align-items: center;
-        color: $modalTextColor;
         display: flex;
         flex-direction: column;
         padding: 10px;
@@ -29,7 +26,7 @@
             @mixin sliderTrackStyles() {
                 height: 15px;
                 border-radius: 10px;
-                background: black;
+                background: rgb(14, 22, 36);
             }
 
             &::-ms-track {
@@ -79,7 +76,6 @@
             transform: translate(-50%, 0%);
 
             &::before {
-                background: rgb(140, 156, 189);
                 content: '';
                 border-radius: 50%;
                 left: 0;
@@ -94,10 +90,10 @@
         }
 
         .video-quality-dialog-label-container.active {
-            color: $toolbarToggleBackground;
+            color: $videoQualityActive;
 
             &::before {
-                background: $toolbarToggleBackground;
+                background: $videoQualityActive;
                 height: 12px;
                 top: -19px;
                 width: 12px;
@@ -113,30 +109,54 @@
             word-spacing: unset;
         }
     }
+
+    &.video-not-supported {
+        .video-quality-dialog-labels {
+            color: gray;
+        }
+
+        .video-quality-dialog-slider {
+            @mixin sliderTrackDisabledStyles() {
+                background: rgba(14, 22, 36, 0.1);
+            }
+
+            &::-ms-track {
+                @include sliderTrackDisabledStyles();
+            }
+
+            &::-moz-range-track {
+                @include sliderTrackDisabledStyles();
+            }
+
+            &::-webkit-slider-runnable-track {
+                @include sliderTrackDisabledStyles();
+            }
+        }
+    }
 }
 
 .video-state-indicator {
     background: $videoStateIndicatorBackground;
-    color: $videoStateIndicatorColor;
     cursor: default;
     font-size: 13px;
-    height: 40px;
+    height: $videoStateIndicatorSize;
     line-height: 20px;
     text-align: left;
-    min-width: 40px;
+    min-width: $videoStateIndicatorSize;
     border-radius: 50%;
     position: absolute;
     box-sizing: border-box;
 
     i {
-        cursor: pointer;
+        line-height: $videoStateIndicatorSize;
     }
 
     /**
      * Give the label padding so it has more volume and can be easily clicked.
      */
     .video-quality-label-status {
-        padding: 10px 5px;
+        line-height: $videoStateIndicatorSize;
+        min-width: $videoStateIndicatorSize;
         text-align: center;
     }
 }

css/reload_overlay/_reload_overlay.scss

@@ -11,9 +11,16 @@
 }
 
 #reloadProgressBar {
-    width: 180px;
+    background: #e9e9e9;
+    border-radius: 3px;
+    height: 5px;
     margin: 5px auto;
-    > .aui-progress-indicator-value {
+    overflow: hidden;
+    width: 180px;
+
+    .progress-indicator-fill {
         background: $reloadProgressBarBg;
+        height: 100%;
+        transition: width .5s;
     }
 }

css/shortcuts/_main.scss

@@ -1,4 +0,0 @@
-/* Import shortcuts blocks */
-
-@import 'regular-key';
-@import 'shortcuts-list';

css/shortcuts/_regular-key.scss

@@ -1,11 +0,0 @@
-.regular-key {
-    display: table-cell;
-    width: 25px;
-    height: 20px;
-    padding: 0;
-    text-align: center;
-    vertical-align: middle;
-    font-family: $baseFontFamily;
-    color: $defaultDarkColor;
-    font-size: 12px;
-}

css/shortcuts/_shortcuts-list.scss

@@ -1,12 +0,0 @@
-.shortcuts-list {
-    padding: 0;
-
-    &__description {
-        margin-left: em(16, 14);
-        vertical-align: top;
-    }
-
-    &__item {
-        margin-bottom: em(7, 14);
-    }
-}

css/themes/_light.scss

@@ -14,11 +14,11 @@ $sliderThumbBackground: #3572b0;
 /**
 * Buttons
 */
-$buttonBackground: #f5f5f5;
-$buttonHoverBackground: #e9e9e9;
-$buttonBorder: #ccc;
-$buttonHoverBorder: #999;
-$buttonColor: #333;
+$buttonBackground: #44A5FF;
+$buttonHoverBackground: #2c4062;
+$buttonBorder: transparent;
+$buttonHoverBorder: transparent;
+$buttonColor: #eceef1;
 
 $buttonLightBackground: #f5f5f5;
 $buttonLightHoverBackground: #e9e9e9;
@@ -44,19 +44,13 @@ $defaultBackground: #474747;
 $filmstripOnlyOverlayBg: #000;
 $reloadProgressBarBg: #0074E0;
 
-/**
-* Connection indicator
-**/
-$downloadConnectionIconColor: #4abd04;
-$uploadConnectionIconColor: #ffa800;
-
 /**
  * Dialog colors
  **/
-$auiDialogColor: #333;
-$auiDialogBg: #f5f5f5;
-$auiDialogContentBg: $baseLight;
-$auiBorderColor: #ccc;
+$auiDialogColor: #eceef1;
+$auiDialogBg: #253858;
+$auiDialogContentBg: #344563;
+$auiBorderColor: #253858;
 $dialogTitleFontWeight: 400;
 $dialogErrorText: #344563;
 
@@ -64,7 +58,7 @@ $dialogErrorText: #344563;
 * Inlay colors
 **/
 $inlayColorBg: lighten($defaultBackground, 20%);
-$inlayBorderColor: lighten($auiDialogContentBg, 10%);
+$inlayBorderColor: lighten($baseLight, 10%);
 $inlayIconBg: #000;
 $inlayIconColor: #fff;
 $inlayFilmstripOnlyColor: #474747;
@@ -111,3 +105,8 @@ $selectFontColor: $controlColor;
 $selectBg: $controlBackground;
 $selectActiveBg: darken($controlBackground, 5%);
 $selectActiveItemBg: darken($controlBackground, 20%);
+
+/**
+ * TODO: Replace by themed component.
+ */
+$videoQualityActive: #4C9AFF;

css/unsupported-browser/_no-mobile-app.scss

@@ -5,7 +5,7 @@
     width: auto;
 
     &__title {
-        border-bottom: 1px solid $auiBorderColor;
+        border-bottom: 1px solid $inlayBorderColor;
         color: $unsupportedBrowserTitleColor;
         font-weight: 400;
         letter-spacing: 0.5px;

css/unsupported-browser/_unsupported-mobile-browser.scss

@@ -1,13 +1,19 @@
 .unsupported-mobile-browser {
     background-color: #fff;
     height: 100vh;
-    padding: 35px 0;
+    overflow: auto;
+    position: relative;
     width: 100vw;
 
+    a {
+        text-decoration: none
+    }
+
     &__body {
         color: $unsupportedBrowserTextColor;
         margin: auto;
         max-width: 40em;
+        padding: 35px 0 40px 0;
         text-align: center;
         width: 75%;
 
@@ -16,8 +22,9 @@
         }
     }
 
-    &__text {
-        font-size: 1.8em;
+    &__text,
+    .unsupported-dial-in  {
+        font-size: 1.2em;
         line-height: em(29px, 21px);
         margin-bottom: 0.65em;
 
@@ -39,20 +46,14 @@
 
     &__button {
         border: 0;
-        height: 42px;
-        margin: 0 auto;
+        height: 2.2857142857142856em;
+        line-height: 2.2857142857142856em;
+        margin: 18px auto 20px;
         max-width: 300px;
-        width: 98%;
-        @include border-radius(8px);
+        width: auto;
+        @include border-radius(3px);
         background-color: $unsupportedBrowserButtonBgColor;
-        font-size: 1.5em;
-        font-weight: 300;
-        letter-spacing: 0.5px;
-        text-shadow: 0px 1px 2px $unsupportedBrowserTextColor;
-
-        // Disable standard button effects.
-        box-shadow: none;
-        outline: none;
+        color: #505F79;
 
         &:active {
             background-color: $unsupportedBrowserButtonBgColor;
@@ -60,10 +61,29 @@
 
         &_primary {
             background-color: $primaryUnsupportedBrowserButtonBgColor;
+            color: #FFFFFF;
 
             &:active {
                 background-color: $primaryUnsupportedBrowserButtonBgColor;
             }
         }
     }
+
+    .unsupported-dial-in {
+        display: none;
+
+        &.has-numbers {
+            align-items: center;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .dial-in-numbers-list {
+            color: $unsupportedBrowserTextColor;
+        }
+
+        .dial-in-numbers-body {
+            vertical-align: top;
+        }
+    }
 }

debian/jitsi-meet-prosody.postinst

@@ -103,27 +103,6 @@ case "$1" in
                 echo -e "\nInclude \"conf.d/*.cfg.lua\"" >> $PROSODY_CONFIG_OLD
             fi
         fi
-        # UPGRADE to server side focus check if focus is configured
-        if [ -f $PROSODY_HOST_CONFIG ] && ! grep -q "VirtualHost \"$JICOFO_AUTH_DOMAIN\"" $PROSODY_HOST_CONFIG; then
-            echo -e "\nVirtualHost \"$JICOFO_AUTH_DOMAIN\"" >> $PROSODY_HOST_CONFIG
-            echo -e "        authentication = \"internal_plain\"\n" >> $PROSODY_HOST_CONFIG
-            sed -i "s/Component \"conference.$JVB_HOSTNAME\" \"muc\"/Component \"conference.$JVB_HOSTNAME\" \"muc\"\nadmins = { \"$JICOFO_AUTH_USER@$JICOFO_AUTH_DOMAIN\" }\n/g" $PROSODY_HOST_CONFIG
-            echo -e "Component \"focus.$JVB_HOSTNAME\"" >> $PROSODY_HOST_CONFIG
-            echo -e "    component_secret=\"$JICOFO_SECRET\"\n" >> $PROSODY_HOST_CONFIG
-            PROSODY_CREATE_JICOFO_USER="true"
-        # UPGRADE to server side focus on old config(/etc/prosody/prosody.cfg.lua)
-        elif [ ! -f $PROSODY_HOST_CONFIG ] && ! grep -q "VirtualHost \"$JICOFO_AUTH_DOMAIN\"" $PROSODY_CONFIG_OLD; then
-            echo -e "\nVirtualHost \"$JICOFO_AUTH_DOMAIN\"" >> $PROSODY_CONFIG_OLD
-            echo -e "        authentication = \"internal_plain\"\n" >> $PROSODY_CONFIG_OLD
-            if ! grep -q "admins = { }" $PROSODY_CONFIG_OLD; then
-                echo -e "admins = { \"$JICOFO_AUTH_USER@$JICOFO_AUTH_DOMAIN\" }\n" >> $PROSODY_CONFIG_OLD
-            else
-                sed -i "s/admins = { }/admins = { \"$JICOFO_AUTH_USER@$JICOFO_AUTH_DOMAIN\" }\n/g" $PROSODY_CONFIG_OLD
-            fi
-            echo -e "Component \"focus.$JVB_HOSTNAME\"" >> $PROSODY_CONFIG_OLD
-            echo -e "    component_secret=\"$JICOFO_SECRET\"\n" >> $PROSODY_CONFIG_OLD
-            PROSODY_CREATE_JICOFO_USER="true"
-        fi
 
         if [ "$PROSODY_CREATE_JICOFO_USER" = "true" ]; then
             # create 'focus@auth.domain' prosody user
@@ -133,15 +112,37 @@ case "$1" in
         fi
 
         if [ ! -f /var/lib/prosody/$JVB_HOSTNAME.crt ]; then
-            HOST="$( (hostname -s; echo localhost) | head -n 1)"
-            DOMAIN="$( (hostname -d; echo localdomain) | head -n 1)"
-            openssl req -new -newkey rsa:4096 -days 365 -nodes -x509 -subj \
-                "/O=$DOMAIN/OU=$HOST/CN=$JVB_HOSTNAME/emailAddress=webmaster@$HOST.$DOMAIN" \
-                -keyout /var/lib/prosody/$JVB_HOSTNAME.key \
-                -out /var/lib/prosody/$JVB_HOSTNAME.crt
+            # prosodyctl takes care for the permissions
+            # echo for using all default values
+            echo | prosodyctl cert generate $JVB_HOSTNAME
+
+            ln -sf /var/lib/prosody/$JVB_HOSTNAME.key /etc/prosody/certs/$JVB_HOSTNAME.key
+            ln -sf /var/lib/prosody/$JVB_HOSTNAME.crt /etc/prosody/certs/$JVB_HOSTNAME.crt
+        fi
+
+        if [ ! -f /var/lib/prosody/$JICOFO_AUTH_DOMAIN.crt ]; then
+            # prosodyctl takes care for the permissions
+            # echo for using all default values
+            echo | prosodyctl cert generate $JICOFO_AUTH_DOMAIN
+
+            AUTH_KEY_FILE="/etc/prosody/certs/$JICOFO_AUTH_DOMAIN.key"
+            AUTH_CRT_FILE="/etc/prosody/certs/$JICOFO_AUTH_DOMAIN.crt"
+
+            ln -sf /var/lib/prosody/$JICOFO_AUTH_DOMAIN.key $AUTH_KEY_FILE
+            ln -sf /var/lib/prosody/$JICOFO_AUTH_DOMAIN.crt $AUTH_CRT_FILE
+            ln -sf /var/lib/prosody/$JICOFO_AUTH_DOMAIN.crt /usr/local/share/ca-certificates/$JICOFO_AUTH_DOMAIN.crt
+
+            update-ca-certificates
+
+            # don't fail on systems with custom config ($PROSODY_HOST_CONFIG is missing)
+            if [ -f $PROSODY_HOST_CONFIG ]; then
+                # now let's add the ssl cert for the auth. domain (we use # as a sed delimiter cause filepaths are confused with default / delimiter)
+                sed -i "s#VirtualHost \"$JICOFO_AUTH_DOMAIN\"#VirtualHost \"$JICOFO_AUTH_DOMAIN\"\n    ssl = {\n        key = \"$AUTH_KEY_FILE\";\n        certificate = \"$AUTH_CRT_FILE\";\n    \}#g" $PROSODY_HOST_CONFIG
+            fi
+
+            # trigger a restart
+            PROSODY_CONFIG_PRESENT="false"
         fi
-        ln -sf /var/lib/prosody/$JVB_HOSTNAME.key /etc/prosody/certs/$JVB_HOSTNAME.key
-        ln -sf /var/lib/prosody/$JVB_HOSTNAME.crt /etc/prosody/certs/$JVB_HOSTNAME.crt
 
         if [ "$PROSODY_CONFIG_PRESENT" = "false" ]; then
             invoke-rc.d prosody restart

debian/jitsi-meet.README.source

@@ -1,24 +0,0 @@
-jitsi-meet for Debian
----------------------
-
-The jitsi-meet package is built from the sources of Jitsi Meet.
-
-Jitsi Meet is downloaded from https://github.com/jitsi/jitsi-meet and the git files are removed. you can recreate the source with 'git clone https://github.com/jitsi/jitsi-meet.git'.
-Use something like the script below to update from Git
-
-#!/bin/bash
-
-VERSION=1.0.1
-
-echo "*.min.js export-ignore" > .gitattributes
-echo "jquery-2.1.1.* export-ignore" >> .gitattributes
-echo "jquery-ui.js export-ignore" >> .gitattributes
-echo ".gitignore export-ignore" >> .gitattributes
-
-sed -i "s/1.0.1/$VERSION/g" debian/changelog
-
-git archive --worktree-attributes --format tar --prefix jitsi-meet-$VERSION/ -o ../jitsi-meet_${VERSION}.orig.tar master
-tar --transform "s,^,jitsi-meet-$VERSION/,"  -rf ../jitsi-meet_${VERSION}.orig.tar
-cd ..
-
-bzip2 jitsi-meet_${VERSION}.orig.tar

debian/patches/jquery-package

@@ -1,22 +0,0 @@
-Description: Update the used js files for jquery to generic ones, to be able to use local system installed version (through symlinks).
-Index: jitsi-meet/index.html
-===================================================================
---- jitsi-meet.orig/index.html
-+++ jitsi-meet/index.html
-@@ -10,13 +10,13 @@
-     <meta itemprop="description" content="Join a WebRTC video conference powered by the Jitsi Videobridge"/>
-     <meta itemprop="image" content="/images/jitsilogo.png"/>
-     <script src="https://api.callstats.io/static/callstats.min.js"></script>
--    <script src="libs/jquery-2.1.1.min.js"></script>
-+    <script src="libs/jquery.min.js"></script>
-     <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
-     <script src="https://cdnjs.cloudflare.com/ajax/libs/jsSHA/1.5.0/sha.js"></script>
-     <script src="config.js?v=11"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
-     <script src="libs/strophe/strophe.min.js?v=2"></script>
-     <script src="libs/strophe/strophe.disco.min.js?v=1"></script>
-     <script src="libs/strophe/strophe.caps.jsonly.min.js?v=1"></script>
--    <script src="libs/jquery-ui.js"></script>
-+    <script src="libs/jquery-ui.min.js"></script>
-     <script src="libs/tooltip.js?v=1"></script><!-- bootstrap tooltip lib -->
-     <script src="libs/popover.js?v=1"></script><!-- bootstrap tooltip lib -->
--    <script src="libs/toastr.js?v=1"></script><!-- notifications lib -->

debian/patches/series

@@ -1 +0,0 @@
-jquery-package

doc/adding-an-icon.md

@@ -2,11 +2,12 @@
 1. Go to https://icomoon.io/app/
 2. Go to "Manage Projects" from the menu on the top left.
 3. Use "Import project" and select <code>fonts/selection.json</code> from Jitsi Meet.
-4. Import icons (e.g. svg files) using the "import items" button.
-5. Go to "generate font" and make sure the identifiers for the new icons are correct.
-6. Download the result in a zip file using the "download" button.
-7. Copy <code>selection.json</code> and <code>fonts/jitsi.*</code> from the zip file to <code>fonts/</code> in Jitsi Meet
-8. Copy the class for the new icon from <code>style.css</code> in the zip file to <code>css/font.css</code> in Jitsi Meet (do *not* copy the whole file)
+4. Click "load".
+5. Add the new icons using the "Add icons from library" button...
+6. Go to "generate font" and make sure the identifiers for the new icons are correct.
+7. Download the result in a zip file using the "download" button.
+8. Copy <code>selection.json</code> and <code>fonts/jitsi.*</code> from the zip file to <code>fonts/</code> in Jitsi Meet
+9. Copy the class for the new icon from <code>style.css</code> in the zip file to <code>css/_font.scss</code> in Jitsi Meet (do *not* copy the whole file)
+10. Copy the <code>selection.json</code> file to <code>react/features/base/font-icons</code> overwriting <code>jitsi.json</code>
 
 Sample commit: https://github.com/jitsi/jitsi-meet/commit/68bc819b89aec12364fcf07b81efa83a1900eed6
-

doc/api.md

@@ -27,6 +27,7 @@ Its constructor gets a number of options:
     * **interfaceConfigOverwrite**: (optional) JS object with overrides for options defined in [interface_config.js].
     * **noSSL**: (optional, defaults to true) Boolean indicating if the server should be contacted using HTTP or HTTPS.
     * **jwt**: (optional) [JWT](https://jwt.io/) token.
+    * **onload**: (optional) handler for the iframe onload event.
 
 Example:
 
@@ -140,18 +141,33 @@ The `event` parameter is a String object with the name of the event.
 The `listener` parameter is a Function object with one argument that will be notified when the event occurs with data related to the event.
 
 The following events are currently supported:
+* **avatarChanged** - event notifications about avatar
+changes. The listener will receive an object with the following structure:
+```javascript
+{
+"id": id, // the id of the participant that changed his avatar.
+"avatarURL": avatarURL // the new avatar URL.
+}
+```
 
 * **audioAvailabilityChanged** - event notifications about audio availability status changes. The listener will receive an object with the following structure:
 ```javascript
 {
-"available": available   // new available status - boolean
+"available": available // new available status - boolean
 }
 ```
 
 * **audioMuteStatusChanged** - event notifications about audio mute status changes. The listener will receive an object with the following structure:
 ```javascript
 {
-"muted": muted   // new muted status - boolean
+"muted": muted // new muted status - boolean
+}
+```
+
+* **screenSharingStatusChanged** - receives event notifications about turning on/off the local user screen sharing. The listener will receive object with the following structure:
+```javascript
+{
+"on": on //whether screen sharing is on
 }
 ```
 
@@ -159,9 +175,9 @@ The following events are currently supported:
 messages. The listener will receive an object with the following structure:
 ```javascript
 {
-"from": from,    // JID of the user that sent the message
-"nick": nick,    // the nickname of the user that sent the message
-"message": txt   // the text of the message
+"from": from, // The id of the user that sent the message
+"nick": nick, // the nickname of the user that sent the message
+"message": txt // the text of the message
 }
 ```
 
@@ -169,7 +185,7 @@ messages. The listener will receive an object with the following structure:
 messages. The listener will receive an object with the following structure:
 ```javascript
 {
-"message": txt   // the text of the message
+"message": txt // the text of the message
 }
 ```
 
@@ -177,50 +193,54 @@ messages. The listener will receive an object with the following structure:
 changes. The listener will receive an object with the following structure:
 ```javascript
 {
-"jid": jid,                 // the JID of the participant that changed his display name
-"displayname": displayName  // the new display name
+"id": id, // the id of the participant that changed his display name
+"displayname": displayName // the new display name
 }
 ```
 
 * **participantJoined** - event notifications about new participants who join the room. The listener will receive an object with the following structure:
 ```javascript
 {
-"jid": jid   // the JID of the participant
+"id": id, // the id of the participant
+"displayName": displayName // the display name of the participant
 }
 ```
 
 * **participantLeft** - event notifications about participants that leave the room. The listener will receive an object with the following structure:
 ```javascript
 {
-"jid": jid   // the JID of the participant
+"id": id // the id of the participant
 }
 ```
 
 * **videoConferenceJoined** - event notifications fired when the local user has joined the video conference. The listener will receive an object with the following structure:
 ```javascript
 {
-"roomName": room   // the room name of the conference
+"roomName": room, // the room name of the conference
+"id": id, // the id of the local participant
+"displayName": displayName, // the display name of the local participant
+"avatarURL": avatarURL // the avatar URL of the local participant
 }
 ```
 
 * **videoConferenceLeft** - event notifications fired when the local user has left the video conference. The listener will receive an object with the following structure:
 ```javascript
 {
-"roomName": room   // the room name of the conference
+"roomName": room // the room name of the conference
 }
 ```
 
 * **videoAvailabilityChanged** - event notifications about video availability status changes. The listener will receive an object with the following structure:
 ```javascript
 {
-"available": available   // new available status - boolean
+"available": available // new available status - boolean
 }
 ```
 
 * **videoMuteStatusChanged** - event notifications about video mute status changes. The listener will receive an object with the following structure:
 ```javascript
 {
-"muted": muted   // new muted status - boolean
+"muted": muted // new muted status - boolean
 }
 ```
 
@@ -264,6 +284,16 @@ You can get the number of participants in the conference with the following API
 var numberOfParticipants = api.getNumberOfParticipants();
 ```
 
+You can get the avatar URL of a participant in the conference with the following API function:
+```javascript
+var avatarURL = api.getAvatarURL(participantId);
+```
+
+You can get the display name of a participant in the conference with the following API function:
+```javascript
+var displayName = api.getDisplayName(participantId);
+```
+
 You can get the iframe HTML element where Jitsi Meet is loaded with the following API function:
 ```javascript
 var iframe = api.getIFrame();

doc/example-config-files/prosody.cfg.lua.example

@@ -45,7 +45,7 @@ modules_enabled = {
 	-- Not essential, but recommended
 		"private"; -- Private XML storage (for room bookmarks, etc.)
 		"vcard"; -- Allow users to set vCards
-	
+
 	-- These are commented by default as they have a performance impact
 		--"privacy"; -- Support privacy lists
 		"compression"; -- Stream compression (requires the lua-zlib package installed)
@@ -181,6 +181,13 @@ VirtualHost "jitsi.example.com"
 
 	c2s_require_encryption = false
 
+VirtualHost "auth.jitsi.example.com"
+	ssl = {
+		key = "/var/lib/prosody/auth.jitsi.example.com.key";
+		certificate = "/var/lib/prosody/auth.jitsi.example.com.crt";
+	}
+	authentication = "internal_plain"
+
 ------ Components ------
 -- You can specify components to add hosts that provide special services,
 -- like multi-user conferences, and transports.

doc/manual-install.md

@@ -1,5 +1,10 @@
 # Server Installation for Jitsi Meet
 
+
+:warning: **WARNING:** Manual installation is not recommended. We recommend following the [quick-install](https://github.com/jitsi/jitsi-meet/blob/master/doc/quick-install.md) document. The current document describes the steps that are needed to install a working deployment, but steps are easy to mess up, and the debian packages are more up-to-date, where this document sometimes is not updated to latest changes.
+
+
+
 This describes configuring a server `jitsi.example.com` running Debian or a Debian Derivative. You will need to
 change references to that to match your host, and generate some passwords for
 `YOURSECRET1`, `YOURSECRET2` and `YOURSECRET3`.
@@ -60,6 +65,10 @@ VirtualHost "jitsi.example.com"
 - add domain with authentication for conference focus user:
 ```
 VirtualHost "auth.jitsi.example.com"
+    ssl = {
+        key = "/var/lib/prosody/auth.jitsi.example.com.key";
+        certificate = "/var/lib/prosody/auth.jitsi.example.com.crt";
+    }
     authentication = "internal_plain"
 ```
 - add focus user to server admins:
@@ -83,8 +92,16 @@ ln -s /etc/prosody/conf.avail/jitsi.example.com.cfg.lua /etc/prosody/conf.d/jits
 Generate certs for the domain:
 ```sh
 prosodyctl cert generate jitsi.example.com
+prosodyctl cert generate auth.jitsi.example.com
 ```
 
+Add auth.jitsi.example.com to the trusted certificates on the local machine:
+```sh
+ln -sf /var/lib/prosody/auth.jitsi.example.com.crt /usr/local/share/ca-certificates/auth.jitsi.example.com.crt
+update-ca-certificates -f
+```
+Note that the `-f` flag is necessary if there are symlinks left from a previous installation.
+
 Create conference focus user:
 ```sh
 prosodyctl register focus auth.jitsi.example.com YOURSECRET3

doc/quick-install.md

@@ -84,7 +84,7 @@ Enjoy!
 ## Uninstall
 
 ```sh
-apt-get purge jigasi jitsi-meet jitsi-meet-web-config jitsi-meet-web jicofo jitsi-videobridge
+apt-get purge jigasi jitsi-meet jitsi-meet-web-config jitsi-meet-prosody jitsi-meet-web jicofo jitsi-videobridge
 ```
 
 Sometimes the following packages will fail to uninstall properly:

doc/sipgw-config.md

@@ -0,0 +1,57 @@
+# Configuring sipgw jibri with jitsi-meet
+
+This document describes how you can configure jitsi-meet to use sipgw jibri and enable rooms in 'Add people dialog'
+You will need a working deployment of jibri configured to use a regular sip video device, for more info check out the [jibri documentation](https://github.com/jitsi/jibri/blob/master/README.md).
+
+This feature is available for non-guests of the system, so this relies on setting in config.js ``enableUserRolesBasedOnToken: true`` and providing a jwt token when accessing the conference.
+
+* Jicofo configuration:
+edit /etc/jitsi/jicofo/sip-communicator.properties (or similar), set the appropriate MUC to look for the Jibri Controllers. This should be the same MUC as is referenced in jibri's config.json file. Restart Jicofo after setting this property.
+
+```
+  org.jitsi.jicofo.jibri.SIP_BREWERY=TheSipBrewery@conference.yourdomain.com
+ ```
+
+* Jitsi Meet configuration:
+ - config.js: add 
+```
+  enableUserRolesBasedOnToken: true,
+  peopleSearchQueryTypes: ['conferenceRooms'],
+  peopleSearchUrl: 'https://api.yourdomain.com/testpath/searchpeople',
+```
+ - interface_config.js:
+```
+  ADD_PEOPLE_APP_NAME: 'Jitsi'
+```
+
+The combination of the above settings and providing a jwt token will enable a button under invite option which will show the dialog 'Add people'.
+
+## People search service
+
+When searching in the dialog, a request for results is made to the `peopleSearchUrl` service.
+
+The request is in the following format:
+```
+https://api.yourdomain.com/testpath/searchpeople?query=testroomname&queryTypes=[%22conferenceRooms%22]&jwt=somejwt
+```
+The parameters are:
+ - query - The text entered by the user.
+ - queryTypes - What type of results we want people, rooms, conferenceRooms. This is the value from config.js `peopleSearchQueryTypes`
+ - jwt - The token used by the user to access the conference.
+
+The response of the service is a json in the following format:
+```
+[
+   {
+       "id": "address@sip.domain.com",
+       "name": "Some room name",
+       "type": "videosipgw"
+   },
+  {
+      "id": "address2@sip.domain.com",
+      "name": "Some room name2",
+      "type": "videosipgw"
+  }
+]
+```
+Type should be `videosipgw`, `name` is the name shown to the user and `id` is the sip address to be called by the sipgw jibri.

flow-typed/npm/prop-types_v15.x.x.js

@@ -0,0 +1,34 @@
+// flow-typed signature: 3eaa1f24c7397b78a7481992d2cddcb2
+// flow-typed version: a1a20d4928/prop-types_v15.x.x/flow_>=v0.41.x
+
+type $npm$propTypes$ReactPropsCheckType = (
+  props: any,
+  propName: string,
+  componentName: string,
+  href?: string) => ?Error;
+
+declare module 'prop-types' {
+  declare var array: React$PropType$Primitive<Array<any>>;
+  declare var bool: React$PropType$Primitive<boolean>;
+  declare var func: React$PropType$Primitive<Function>;
+  declare var number: React$PropType$Primitive<number>;
+  declare var object: React$PropType$Primitive<Object>;
+  declare var string: React$PropType$Primitive<string>;
+  declare var any: React$PropType$Primitive<any>;
+  declare var arrayOf: React$PropType$ArrayOf;
+  declare var element: React$PropType$Primitive<any>; /* TODO */
+  declare var instanceOf: React$PropType$InstanceOf;
+  declare var node: React$PropType$Primitive<any>; /* TODO */
+  declare var objectOf: React$PropType$ObjectOf;
+  declare var oneOf: React$PropType$OneOf;
+  declare var oneOfType: React$PropType$OneOfType;
+  declare var shape: React$PropType$Shape;
+
+  declare function checkPropTypes<V>(
+    propTypes: $Subtype<{[_: $Keys<V>]: $npm$propTypes$ReactPropsCheckType}>,
+    values: V,
+    location: string,
+    componentName: string,
+    getStack: ?(() => ?string)
+  ) : void;
+}

flow-typed/npm/react-redux_v5.x.x.js

@@ -1,5 +1,5 @@
-// flow-typed signature: c0e8d9867aff7576bb7cf63fe60a6af3
-// flow-typed version: 83053e4020/react-redux_v5.x.x/flow_>=v0.30.x <=v0.52.x
+// flow-typed signature: 59b0c4be0e1408f21e2446be96c79804
+// flow-typed version: 9092387fd2/react-redux_v5.x.x/flow_>=v0.54.x
 
 import type { Dispatch, Store } from "redux";
 
@@ -31,41 +31,51 @@ declare module "react-redux" {
 
   declare type Context = { store: Store<*, *> };
 
-  declare type StatelessComponent<P> = (
-    props: P,
-    context: Context
-  ) => ?React$Element<any>;
+  declare type ComponentWithDefaultProps<DP: {}, P: {}, CP: P> = Class<
+    React$Component<CP>
+  > & { defaultProps: DP };
 
-  declare class ConnectedComponent<OP, P, Def, St> extends React$Component<
-    void,
+  declare class ConnectedComponentWithDefaultProps<
     OP,
-    void
-  > {
-    static WrappedComponent: Class<React$Component<Def, P, St>>,
-    getWrappedInstance(): React$Component<Def, P, St>,
-    static defaultProps: void,
+    DP,
+    CP
+  > extends React$Component<OP> {
+    static defaultProps: DP, // <= workaround for https://github.com/facebook/flow/issues/4644
+    static WrappedComponent: Class<React$Component<CP>>,
+    getWrappedInstance(): React$Component<CP>,
     props: OP,
     state: void
   }
 
-  declare type ConnectedComponentClass<OP, P, Def, St> = Class<
-    ConnectedComponent<OP, P, Def, St>
+  declare class ConnectedComponent<OP, P> extends React$Component<OP> {
+    static WrappedComponent: Class<React$Component<P>>,
+    getWrappedInstance(): React$Component<P>,
+    props: OP,
+    state: void
+  }
+
+  declare type ConnectedComponentWithDefaultPropsClass<OP, DP, CP> = Class<
+    ConnectedComponentWithDefaultProps<OP, DP, CP>
   >;
 
-  declare type Connector<OP, P> = {
-    (
-      component: StatelessComponent<P>
-    ): ConnectedComponentClass<OP, P, void, void>,
-    <Def, St>(
-      component: Class<React$Component<Def, P, St>>
-    ): ConnectedComponentClass<OP, P, Def, St>
-  };
+  declare type ConnectedComponentClass<OP, P> = Class<
+    ConnectedComponent<OP, P>
+  >;
 
-  declare class Provider<S, A> extends React$Component<
-    void,
-    { store: Store<S, A>, children?: any },
-    void
-  > {}
+  declare type Connector<OP, P> = (<DP: {}, CP: {}>(
+    component: ComponentWithDefaultProps<DP, P, CP>
+  ) => ConnectedComponentWithDefaultPropsClass<OP, DP, CP>) &
+    ((component: React$ComponentType<P>) => ConnectedComponentClass<OP, P>);
+
+  declare class Provider<S, A> extends React$Component<{
+    store: Store<S, A>,
+    children?: any
+  }> {}
+
+  declare function createProvider(
+    storeKey?: string,
+    subKey?: string
+  ): Provider<*, *>;
 
   declare type ConnectOptions = {
     pure?: boolean,
@@ -85,12 +95,12 @@ declare module "react-redux" {
     options: ConnectOptions
   ): Connector<OP, $Supertype<{ dispatch: Dispatch<A> } & OP>>;
 
-  declare function connect<S, A, OP, SP>(
-    mapStateToProps: MapStateToProps<S, OP, SP>,
-    mapDispatchToProps: Null,
-    mergeProps: Null,
-    options?: ConnectOptions
-  ): Connector<OP, $Supertype<SP & { dispatch: Dispatch<A> } & OP>>;
+//  declare function connect<S, A, OP, SP>(
+//    mapStateToProps: MapStateToProps<S, OP, SP>,
+//    mapDispatchToProps: Null,
+//    mergeProps: Null,
+//    options?: ConnectOptions
+//  ): Connector<OP, $Supertype<SP & { dispatch: Dispatch<A> } & OP>>;
 
   declare function connect<A, OP, DP>(
     mapStateToProps: Null,
@@ -101,7 +111,7 @@ declare module "react-redux" {
 
   declare function connect<S, A, OP, SP, DP>(
     mapStateToProps: MapStateToProps<S, OP, SP>,
-    mapDispatchToProps: MapDispatchToProps<A, OP, DP>,
+    mapDispatchToProps: MapDispatchToProps<A, OP, DP> | Null,
     mergeProps: Null,
     options?: ConnectOptions
   ): Connector<OP, $Supertype<SP & DP & OP>>;

flow-typed/npm/redux_v3.x.x.js

@@ -1,5 +1,5 @@
-// flow-typed signature: 86993bd000012d3e1ef10d757d16952d
-// flow-typed version: a165222d28/redux_v3.x.x/flow_>=v0.33.x
+// flow-typed signature: ec7daead5cb4fec5ab25fedbedef29e8
+// flow-typed version: 2c04631d20/redux_v3.x.x/flow_>=v0.55.x
 
 declare module 'redux' {
 
@@ -11,15 +11,15 @@ declare module 'redux' {
 
   */
 
-  declare type DispatchAPI<A> = (action: A) => A;
-  declare type Dispatch<A: { type: $Subtype<string> }> = DispatchAPI<A>;
+  declare export type DispatchAPI<A> = (action: A) => A;
+  declare export type Dispatch<A: { type: $Subtype<string> }> = DispatchAPI<A>;
 
-  declare type MiddlewareAPI<S, A, D = Dispatch<A>> = {
+  declare export type MiddlewareAPI<S, A, D = Dispatch<A>> = {
     dispatch: D;
     getState(): S;
   };
 
-  declare type Store<S, A, D = Dispatch<A>> = {
+  declare export type Store<S, A, D = Dispatch<A>> = {
     // rewrite MiddlewareAPI members in order to get nicer error messages (intersections produce long messages)
     dispatch: D;
     getState(): S;
@@ -27,83 +27,33 @@ declare module 'redux' {
     replaceReducer(nextReducer: Reducer<S, A>): void
   };
 
-  declare type Reducer<S, A> = (state: S, action: A) => S;
+  declare export type Reducer<S, A> = (state: S, action: A) => S;
 
-  declare type CombinedReducer<S, A> = (state: $Shape<S> & {} | void, action: A) => S;
+  declare export type CombinedReducer<S, A> = (state: $Shape<S> & {} | void, action: A) => S;
 
-  declare type Middleware<S, A, D = Dispatch<A>> =
+  declare export type Middleware<S, A, D = Dispatch<A>> =
     (api: MiddlewareAPI<S, A, D>) =>
       (next: D) => D;
 
-  declare type StoreCreator<S, A, D = Dispatch<A>> = {
+  declare export type StoreCreator<S, A, D = Dispatch<A>> = {
     (reducer: Reducer<S, A>, enhancer?: StoreEnhancer<S, A, D>): Store<S, A, D>;
     (reducer: Reducer<S, A>, preloadedState: S, enhancer?: StoreEnhancer<S, A, D>): Store<S, A, D>;
   };
 
-  declare type StoreEnhancer<S, A, D = Dispatch<A>> = (next: StoreCreator<S, A, D>) => StoreCreator<S, A, D>;
+  declare export type StoreEnhancer<S, A, D = Dispatch<A>> = (next: StoreCreator<S, A, D>) => StoreCreator<S, A, D>;
 
-  declare function createStore<S, A, D>(reducer: Reducer<S, A>, enhancer?: StoreEnhancer<S, A, D>): Store<S, A, D>;
-  declare function createStore<S, A, D>(reducer: Reducer<S, A>, preloadedState: S, enhancer?: StoreEnhancer<S, A, D>): Store<S, A, D>;
+  declare export function createStore<S, A, D>(reducer: Reducer<S, A>, enhancer?: StoreEnhancer<S, A, D>): Store<S, A, D>;
+  declare export function createStore<S, A, D>(reducer: Reducer<S, A>, preloadedState: S, enhancer?: StoreEnhancer<S, A, D>): Store<S, A, D>;
 
-  declare function applyMiddleware<S, A, D>(...middlewares: Array<Middleware<S, A, D>>): StoreEnhancer<S, A, D>;
+  declare export function applyMiddleware<S, A, D>(...middlewares: Array<Middleware<S, A, D>>): StoreEnhancer<S, A, D>;
 
-  declare type ActionCreator<A, B> = (...args: Array<B>) => A;
-  declare type ActionCreators<K, A> = { [key: K]: ActionCreator<A, any> };
+  declare export type ActionCreator<A, B> = (...args: Array<B>) => A;
+  declare export type ActionCreators<K, A> = { [key: K]: ActionCreator<A, any> };
 
-  declare function bindActionCreators<A, C: ActionCreator<A, any>, D: DispatchAPI<A>>(actionCreator: C, dispatch: D): C;
-  declare function bindActionCreators<A, K, C: ActionCreators<K, A>, D: DispatchAPI<A>>(actionCreators: C, dispatch: D): C;
+  declare export function bindActionCreators<A, C: ActionCreator<A, any>, D: DispatchAPI<A>>(actionCreator: C, dispatch: D): C;
+  declare export function bindActionCreators<A, K, C: ActionCreators<K, A>, D: DispatchAPI<A>>(actionCreators: C, dispatch: D): C;
 
-  declare function combineReducers<O: Object, A>(reducers: O): CombinedReducer<$ObjMap<O, <S>(r: Reducer<S, any>) => S>, A>;
+  declare export function combineReducers<O: Object, A>(reducers: O): CombinedReducer<$ObjMap<O, <S>(r: Reducer<S, any>) => S>, A>;
 
-  declare function compose<A, B>(ab: (a: A) => B): (a: A) => B
-  declare function compose<A, B, C>(
-    bc: (b: B) => C,
-    ab: (a: A) => B
-  ): (a: A) => C
-  declare function compose<A, B, C, D>(
-    cd: (c: C) => D,
-    bc: (b: B) => C,
-    ab: (a: A) => B
-  ): (a: A) => D
-  declare function compose<A, B, C, D, E>(
-    de: (d: D) => E,
-    cd: (c: C) => D,
-    bc: (b: B) => C,
-    ab: (a: A) => B
-  ): (a: A) => E
-  declare function compose<A, B, C, D, E, F>(
-    ef: (e: E) => F,
-    de: (d: D) => E,
-    cd: (c: C) => D,
-    bc: (b: B) => C,
-    ab: (a: A) => B
-  ): (a: A) => F
-  declare function compose<A, B, C, D, E, F, G>(
-    fg: (f: F) => G,
-    ef: (e: E) => F,
-    de: (d: D) => E,
-    cd: (c: C) => D,
-    bc: (b: B) => C,
-    ab: (a: A) => B
-  ): (a: A) => G
-  declare function compose<A, B, C, D, E, F, G, H>(
-    gh: (g: G) => H,
-    fg: (f: F) => G,
-    ef: (e: E) => F,
-    de: (d: D) => E,
-    cd: (c: C) => D,
-    bc: (b: B) => C,
-    ab: (a: A) => B
-  ): (a: A) => H
-  declare function compose<A, B, C, D, E, F, G, H, I>(
-    hi: (h: H) => I,
-    gh: (g: G) => H,
-    fg: (f: F) => G,
-    ef: (e: E) => F,
-    de: (d: D) => E,
-    cd: (c: C) => D,
-    bc: (b: B) => C,
-    ab: (a: A) => B
-  ): (a: A) => I
-
-}
+  declare export var compose: $Compose;
+}

fonts/jitsi.svg

@@ -9,10 +9,21 @@
 <glyph unicode="&#x20;" d="" />
 <glyph unicode="&#xe0cd;" glyph-name="phone" d="M282 564c62-120 162-220 282-282l94 94c12 12 30 16 44 10 48-16 100-24 152-24 24 0 42-18 42-42v-150c0-24-18-42-42-42-400 0-726 326-726 726 0 24 18 42 42 42h150c24 0 42-18 42-42 0-54 8-104 24-152 4-14 2-32-10-44z" />
 <glyph unicode="&#xe145;" glyph-name="add" d="M810 470h-256v-256h-84v256h-256v84h256v256h84v-256h256v-84z" />
+<glyph unicode="&#xe1aa;" glyph-name="bluetooth" d="M550 328l-80 82v-162zM470 776v-162l80 82zM670 696l-184-184 184-184-244-242h-42v324l-196-196-60 60 238 238-238 238 60 60 196-196v324h42zM834 738c40-64 62-142 62-222 0-84-24-160-66-226l-50 50c26 52 42 110 42 172s-16 120-42 172zM608 512l98 98c12-30 20-64 20-98s-8-70-20-100z" />
+<glyph unicode="&#xe310;" glyph-name="headset" d="M512 982c212 0 384-172 384-384v-300c0-70-58-128-128-128h-128v342h170v86c0 166-132 298-298 298s-298-132-298-298v-86h170v-342h-128c-70 0-128 58-128 128v300c0 212 172 384 384 384z" />
+<glyph unicode="&#xe408;" glyph-name="navigate_before" d="M658 708l-196-196 196-196-60-60-256 256 256 256z" />
+<glyph unicode="&#xe409;" glyph-name="navigate_next" d="M426 768l256-256-256-256-60 60 196 196-196 196z" />
+<glyph unicode="&#xe425;" glyph-name="timer" d="M512 170c166 0 298 134 298 300s-132 298-298 298-298-132-298-298 132-300 298-300zM812 708c52-66 84-148 84-238 0-212-172-384-384-384s-384 172-384 384 172 384 384 384c90 0 174-34 240-86l60 62c22-18 42-38 60-60zM470 426v256h84v-256h-84zM640 982v-86h-256v86h256z" />
+<glyph unicode="&#xe5c4;" glyph-name="arrow_back" d="M854 554v-84h-520l238-240-60-60-342 342 342 342 60-60-238-240h520z" />
+<glyph unicode="&#xe5d2;" glyph-name="menu" d="M128 768h768v-86h-768v86zM128 470v84h768v-84h-768zM128 256v86h768v-86h-768z" />
 <glyph unicode="&#xe5d4;" glyph-name="thumb-menu" d="M512 342c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM512 598c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM512 682c-46 0-86 40-86 86s40 86 86 86 86-40 86-86-40-86-86-86z" />
 <glyph unicode="&#xe603;" glyph-name="presentation" horiz-adv-x="1088" d="M952.495 1019.065h-818.689c-72.81 0-132.183-60.63-132.183-135.162v-750.719c0-74.473 59.372-135.101 132.183-135.101h818.686c72.936 0 132.314 60.625 132.314 135.101v750.722c0.003 74.532-59.378 135.159-132.311 135.159zM946.346 139.651h-806.14v737.822h806.015l0.126-737.822zM685.753 738.544h216.911v-566.758h-216.911v566.758zM428.672 610.002h216.911v-438.216h-216.911v438.216zM172.339 481.46h216.161v-309.677h-216.161v309.677z" />
 <glyph unicode="&#xe613;" glyph-name="recDisable" horiz-adv-x="1140" d="M1123.444 1003.015c-23.593 26.481-64.131 28.989-90.74 5.395l-1008.269-893.436c-26.609-23.468-28.991-64.131-5.46-90.676 12.674-14.306 30.308-21.649 48.126-21.649 15.123 0 30.372 5.401 42.544 16.195l130.045 115.22c90.743-81.844 210.569-132.165 342.473-132.101 282.816 0.061 510.913 227.969 511.287 510.972 0.126 109.934-34.682 211.367-93.499 294.72l118.088 104.625c26.483 23.526 28.997 64.129 5.404 90.735zM944.422 513.818c0.128-200.922-161.896-363.201-362.509-362.952-87.56 0.123-167.573 31.151-230.061 82.569l331.277 293.509v-73.176c1.071-60.993 32.696-92.18 94.944-93.692 61.997 1.512 93.686 32.763 95.131 93.756v41.096h-72.227v-47.499c0.251-4.642-0.564-10.607-2.511-17.949-1.25-3.261-3.448-6.020-6.525-8.093-3.197-2.572-7.845-3.828-13.868-3.828-10.543 0.31-17.132 4.268-19.827 11.921-1.068 3.512-1.947 6.905-2.508 10.163-0.254 2.887-0.377 5.532-0.377 7.786v143.511l42.477 37.634c0.215-0.432 0.452-0.851 0.63-1.303 1.947-6.467 2.762-12.799 2.511-19.076v-36.772h72.227v30.121c-0.246 31.245-9.086 54.699-26.363 70.447l40.711 36.069c35.787-56.055 56.803-122.585 56.867-194.244zM239.795 395.47c-12.613 37.023-19.827 76.557-19.827 117.913-0.19 200.236 161.584 362.009 361.945 362.135 56.853 0 110.313-13.302 158.133-36.398l117.846 104.421c-79.444 50.952-173.758 80.817-275.292 80.948-283.377 0.181-511.354-227.729-511.789-511.675-0.126-79.567 18.636-154.679 51.137-221.882l117.848 104.538zM388.576 690.020h-97.514v-249.057l72.23 64.070v0.689h0.815l117.72 104.418c0 0.564 0.123 0.94 0.123 1.509 0.753 53.898-30.369 80.069-93.374 78.37zM405.959 625.517c1.942-2.767 3.074-6.469 3.323-11.112 0.312-4.452 0.438-9.6 0.438-15.246 0.251-10.916-0.689-19.83-2.949-26.985-2.952-7.594-10.983-11.357-24.159-11.357h-19.325v74.043h15.31c7.842 0 13.865-0.683 18.072-2.19 4.397-1.573 7.468-3.953 9.29-7.153z" />
 <glyph unicode="&#xe614;" glyph-name="recEnable" horiz-adv-x="1142" d="M581.278 1025.708c284.857-0.19 514.807-230.517 514.427-514.997-0.378-285.047-230.073-514.553-514.869-514.615-284.541-0.062-515.311 230.517-514.933 514.422 0.439 285.936 230.009 515.439 515.375 515.19zM580.579 875.756c-201.764-0.123-364.666-163.032-364.478-364.663 0-202.018 162.524-364.735 364.478-364.984 202.018-0.316 365.174 163.030 365.048 365.423-0.252 201.767-163.156 364.35-365.048 364.224zM287.698 688.907h98.196c63.442 1.767 94.785-24.518 94.027-78.863 0.254-19.081-2.211-34.882-7.456-47.521-6.005-12.508-18.706-21.988-38.167-28.181v-0.819c28.373-6.259 43.031-23.573 43.981-51.946v-57.689c0-11.247 0.254-22.813 0.758-34.756 0.819-12.005 3.033-20.979 6.696-27.043h-71.846c-3.727 6.064-6.128 15.038-7.14 27.043-1.012 11.943-1.454 23.509-1.138 34.756v52.321c0 9.603-2.214 16.553-6.573 20.979-4.675 4.107-12.701 6.19-24.012 6.19h-14.599v-141.291h-72.73v326.82zM360.428 558.861h19.463c13.271 0 21.359 3.794 24.331 11.375 2.276 7.204 3.221 16.304 2.969 27.171 0 5.815-0.126 10.867-0.442 15.418-0.252 4.675-1.392 8.404-3.352 11.247-1.831 3.157-4.926 5.561-9.352 7.14-4.233 1.454-10.299 2.211-18.2 2.211h-15.418v-74.564zM498.372 688.907h162.082v-62.687h-89.35v-65.587h78.103v-62.685h-78.103v-73.11h92.822v-62.749h-165.557v326.818zM682.507 599.999c0.316 31.782 9.416 55.542 27.425 71.407 17.44 15.29 40.185 22.936 68.181 22.936 28.247 0 51.119-7.646 68.623-23 17.82-15.798 26.92-39.623 27.171-71.407v-30.333h-72.73v37.031c0.254 6.192-0.57 12.639-2.527 19.209-1.264 3.157-3.475 5.938-6.573 8.214-3.221 1.515-7.898 2.404-13.964 2.404-10.615-0.316-17.249-3.855-19.967-10.618-2.211-6.573-3.223-13.017-2.907-19.209v-161.956c0-2.273 0.126-4.865 0.38-7.772 0.568-3.411 1.454-6.824 2.527-10.233 2.717-7.775 9.352-11.756 19.967-12.007 6.067 0 10.744 1.261 13.964 3.791 3.098 2.15 5.309 4.867 6.573 8.216 1.96 7.33 2.782 13.33 2.527 18.007v47.837h72.73v-41.328c-1.451-61.547-33.364-93.015-95.794-94.469-62.685 1.454-94.53 32.922-95.607 94.343v148.937z" />
+<glyph unicode="&#xe616;" glyph-name="event_note" d="M598 426v-84h-300v84h300zM810 214v468h-596v-468h596zM810 896c46 0 86-40 86-86v-596c0-46-40-86-86-86h-596c-48 0-86 40-86 86v596c0 46 38 86 86 86h42v86h86v-86h340v86h86v-86h42zM726 598v-86h-428v86h428z" />
+<glyph unicode="&#xe61d;" glyph-name="phone-talk" d="M640 512c0 70-58 128-128 128v86c118 0 214-96 214-214h-86zM810 512c0 166-132 298-298 298v86c212 0 384-172 384-384h-86zM854 362c24 0 42-18 42-42v-150c0-24-18-42-42-42-400 0-726 326-726 726 0 24 18 42 42 42h150c24 0 42-18 42-42 0-54 8-104 24-152 4-14 2-32-10-44l-94-94c62-122 162-220 282-282l94 94c12 12 30 14 44 10 48-16 98-24 152-24z" />
+<glyph unicode="&#xe80b;" glyph-name="public" d="M764 282c56 60 90 142 90 230 0 142-88 266-214 316v-18c0-46-40-84-86-84h-84v-86c0-24-20-42-44-42h-84v-86h256c24 0 42-18 42-42v-128h42c38 0 70-26 82-60zM470 174v82c-46 0-86 40-86 86v42l-204 204c-6-24-10-50-10-76 0-174 132-318 300-338zM512 938c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
+<glyph unicode="&#xe8b3;" glyph-name="restore" d="M512 682h64v-180l150-90-32-52-182 110v212zM554 896c212 0 384-172 384-384s-172-384-384-384c-106 0-200 42-270 112l60 62c54-54 128-88 210-88 166 0 300 132 300 298s-134 298-300 298-298-132-298-298h128l-172-172-4 6-166 166h128c0 212 172 384 384 384z" />
 <glyph unicode="&#xe901;" glyph-name="avatar" d="M512 204c106 0 200 56 256 138-2 84-172 132-256 132-86 0-254-48-256-132 56-82 150-138 256-138zM512 810c-70 0-128-58-128-128s58-128 128-128 128 58 128 128-58 128-128 128zM512 938c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
 <glyph unicode="&#xe902;" glyph-name="download" d="M726 470h-128v170h-172v-170h-128l214-214zM826 596c110-8 198-100 198-212 0-118-96-214-214-214h-554c-142 0-256 114-256 256 0 132 100 240 228 254 54 102 160 174 284 174 156 0 284-110 314-258z" />
 <glyph unicode="&#xe903;" glyph-name="mic-camera-combined" d="M756.704 628.138l267.296 202.213v-635.075l-267.296 202.213v-191.923c0-12.085-11.296-21.863-25.216-21.863h-706.272c-13.92 0-25.216 9.777-25.216 21.863v612.25c0 12.085 11.296 21.863 25.216 21.863h706.272c13.92 0 25.216-9.777 25.216-21.863v-189.679zM371.338 376.228c47.817 0 86.529 40.232 86.529 89.811v184.835c0 49.651-38.713 89.883-86.529 89.883-47.788 0-86.515-40.232-86.515-89.883v-184.835c0-49.579 38.756-89.811 86.515-89.811v0zM356.754 314.070v-32.78h33.718v33.412c73.858 9.606 131.235 73.73 131.235 151.351v88.232h-30.636v-88.232c0-67.57-53.696-122.534-119.734-122.534-66.024 0-119.691 54.964-119.691 122.534v88.232h-30.636v-88.232c0-79.215 59.674-144.502 135.744-151.969v-0.014z" />

fonts/selection.json

@@ -1,6 +1,413 @@
 {
   "IcoMoonType": "selection",
   "icons": [
+    {
+      "icon": {
+        "paths": [
+          "M512 342h64v180l150 90-32 52-182-110v-212zM554 128c212 0 384 172 384 384s-172 384-384 384c-106 0-200-42-270-112l60-62c54 54 128 88 210 88 166 0 300-132 300-298s-134-298-300-298-298 132-298 298h128l-172 172-4-6-166-166h128c0-212 172-384 384-384z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "restore"
+        ],
+        "defaultCode": 59571,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "history, restore",
+        "id": 385,
+        "order": 930,
+        "prevSize": 24,
+        "code": 59571,
+        "name": "restore"
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 385
+    },
+    {
+      "icon": {
+        "paths": [
+          "M426 256l256 256-256 256-60-60 196-196-196-196z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "navigate_next"
+        ],
+        "defaultCode": 58377,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "chevron_right, navigate_next",
+        "id": 153,
+        "order": 927,
+        "prevSize": 24,
+        "code": 58377,
+        "name": "navigate_next"
+      },
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 0
+    },
+    {
+      "icon": {
+        "paths": [
+          "M128 256h768v86h-768v-86zM128 554v-84h768v84h-768zM128 768v-86h768v86h-768z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "menu"
+        ],
+        "defaultCode": 58834,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "menu",
+        "id": 489,
+        "order": 926,
+        "prevSize": 24,
+        "code": 58834,
+        "name": "menu"
+      },
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 1
+    },
+    {
+      "icon": {
+        "paths": [
+          "M854 470v84h-520l238 240-60 60-342-342 342-342 60 60-238 240h520z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "arrow_back"
+        ],
+        "defaultCode": 58820,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "arrow_back",
+        "id": 45,
+        "order": 924,
+        "prevSize": 24,
+        "code": 58820,
+        "name": "arrow_back"
+      },
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 2
+    },
+    {
+      "icon": {
+        "paths": [
+          "M658 316l-196 196 196 196-60 60-256-256 256-256z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "navigate_before"
+        ],
+        "defaultCode": 58376,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "chevron_left, navigate_before",
+        "id": 152,
+        "order": 923,
+        "prevSize": 24,
+        "code": 58376,
+        "name": "navigate_before"
+      },
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 3
+    },
+    {
+      "icon": {
+        "paths": [
+          "M764 742c56-60 90-142 90-230 0-142-88-266-214-316v18c0 46-40 84-86 84h-84v86c0 24-20 42-44 42h-84v86h256c24 0 42 18 42 42v128h42c38 0 70 26 82 60zM470 850v-82c-46 0-86-40-86-86v-42l-204-204c-6 24-10 50-10 76 0 174 132 318 300 338zM512 86c236 0 426 190 426 426s-190 426-426 426-426-190-426-426 190-426 426-426z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "public"
+        ],
+        "defaultCode": 59403,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "public",
+        "id": 605,
+        "order": 920,
+        "prevSize": 24,
+        "code": 59403,
+        "name": "public"
+      },
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 4
+    },
+    {
+      "icon": {
+        "paths": [
+          "M598 598v84h-300v-84h300zM810 810v-468h-596v468h596zM810 128c46 0 86 40 86 86v596c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h42v-86h86v86h340v-86h86v86h42zM726 426v86h-428v-86h428z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "event_note"
+        ],
+        "defaultCode": 58902,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "event_note",
+        "id": 252,
+        "order": 919,
+        "prevSize": 24,
+        "code": 58902,
+        "name": "event_note"
+      },
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 5
+    },
+    {
+      "icon": {
+        "paths": [
+          "M512 854c166 0 298-134 298-300s-132-298-298-298-298 132-298 298 132 300 298 300zM812 316c52 66 84 148 84 238 0 212-172 384-384 384s-384-172-384-384 172-384 384-384c90 0 174 34 240 86l60-62c22 18 42 38 60 60zM470 598v-256h84v256h-84zM640 42v86h-256v-86h256z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "timer"
+        ],
+        "defaultCode": 58405,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "timer",
+        "id": 760,
+        "order": 928,
+        "prevSize": 24,
+        "code": 58405,
+        "name": "timer"
+      },
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 6
+    },
+    {
+      "icon": {
+        "paths": [
+          "M550 696l-80-82v162zM470 248v162l80-82zM670 328l-184 184 184 184-244 242h-42v-324l-196 196-60-60 238-238-238-238 60-60 196 196v-324h42zM834 286c40 64 62 142 62 222 0 84-24 160-66 226l-50-50c26-52 42-110 42-172s-16-120-42-172zM608 512l98-98c12 30 20 64 20 98s-8 70-20 100z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "bluetooth_searching"
+        ],
+        "defaultCode": 57770,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "bluetooth_audio, bluetooth_searching",
+        "id": 79,
+        "order": 911,
+        "prevSize": 24,
+        "code": 57770,
+        "name": "bluetooth"
+      },
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 7
+    },
+    {
+      "icon": {
+        "paths": [
+          "M512 42c212 0 384 172 384 384v300c0 70-58 128-128 128h-128v-342h170v-86c0-166-132-298-298-298s-298 132-298 298v86h170v342h-128c-70 0-128-58-128-128v-300c0-212 172-384 384-384z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "headset"
+        ],
+        "defaultCode": 58128,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "headset",
+        "id": 376,
+        "order": 910,
+        "prevSize": 24,
+        "code": 58128,
+        "name": "headset"
+      },
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 8
+    },
+    {
+      "icon": {
+        "paths": [
+          "M640 512c0-70-58-128-128-128v-86c118 0 214 96 214 214h-86zM810 512c0-166-132-298-298-298v-86c212 0 384 172 384 384h-86zM854 662c24 0 42 18 42 42v150c0 24-18 42-42 42-400 0-726-326-726-726 0-24 18-42 42-42h150c24 0 42 18 42 42 0 54 8 104 24 152 4 14 2 32-10 44l-94 94c62 122 162 220 282 282l94-94c12-12 30-14 44-10 48 16 98 24 152 24z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "phone_in_talk"
+        ],
+        "defaultCode": 58909,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "phone_in_talk",
+        "id": 566,
+        "order": 912,
+        "prevSize": 24,
+        "code": 58909,
+        "name": "phone-talk"
+      },
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 9
+    },
+    {
+      "icon": {
+        "paths": [
+          "M512 682c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86zM512 426c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86zM512 342c-46 0-86-40-86-86s40-86 86-86 86 40 86 86-40 86-86 86z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "more_vert"
+        ],
+        "defaultCode": 58836,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "more_vert",
+        "id": 0,
+        "order": 897,
+        "prevSize": 24,
+        "code": 58836,
+        "name": "thumb-menu"
+      },
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 10
+    },
+    {
+      "icon": {
+        "paths": [
+          "M330.667 554.667c-0.427-14.933 6.4-29.44 17.92-39.253 32 6.827 61.867 20.053 88.747 39.253 0 29.013-23.893 52.907-53.333 52.907s-52.907-23.467-53.333-52.907zM586.667 554.667c26.88-18.773 56.747-32 88.747-38.827 11.52 9.813 18.347 24.32 17.92 38.827 0 29.867-23.893 53.76-53.333 53.76s-53.333-23.893-53.333-53.76v0zM512 384c-118.187-1.707-234.667 27.733-338.347 85.333l-2.987 42.667c0 52.48 12.373 104.107 35.84 151.040 101.12-15.36 203.093-23.040 305.493-23.040s204.373 7.68 305.493 23.040c23.467-46.933 35.84-98.56 35.84-151.040l-2.987-42.667c-103.68-57.6-220.16-87.040-338.347-85.333zM512 85.333c235.641 0 426.667 191.025 426.667 426.667s-191.025 426.667-426.667 426.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667z"
+        ],
+        "attrs": [
+          {}
+        ],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "ninja"
+        ],
+        "grid": 24
+      },
+      "attrs": [
+        {}
+      ],
+      "properties": {
+        "order": 850,
+        "id": 1,
+        "name": "ninja",
+        "prevSize": 24,
+        "code": 59657
+      },
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 11
+    },
+    {
+      "icon": {
+        "paths": [
+          "M282 460c62 120 162 220 282 282l94-94c12-12 30-16 44-10 48 16 100 24 152 24 24 0 42 18 42 42v150c0 24-18 42-42 42-400 0-726-326-726-726 0-24 18-42 42-42h150c24 0 42 18 42 42 0 54 8 104 24 152 4 14 2 32-10 44z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "phone"
+        ],
+        "defaultCode": 57549,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "call, local_phone, phone",
+        "id": 2,
+        "order": 851,
+        "prevSize": 24,
+        "code": 57549,
+        "name": "phone"
+      },
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 12
+    },
+    {
+      "icon": {
+        "paths": [
+          "M810 554h-256v256h-84v-256h-256v-84h256v-256h84v256h256v84z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "add"
+        ],
+        "defaultCode": 57669,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "add",
+        "id": 3,
+        "order": 896,
+        "prevSize": 24,
+        "code": 57669,
+        "name": "add"
+      },
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 13
+    },
     {
       "icon": {
         "paths": [
@@ -26,9 +433,9 @@
         "prevSize": 32,
         "code": 59686
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 0
+      "iconIdx": 14
     },
     {
       "icon": {
@@ -55,9 +462,9 @@
         "prevSize": 32,
         "code": 59682
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 1
+      "iconIdx": 15
     },
     {
       "icon": {
@@ -84,9 +491,9 @@
         "prevSize": 32,
         "code": 59651
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 2
+      "iconIdx": 16
     },
     {
       "icon": {
@@ -113,9 +520,9 @@
         "prevSize": 32,
         "code": 59677
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 3
+      "iconIdx": 17
     },
     {
       "icon": {
@@ -142,9 +549,9 @@
         "prevSize": 32,
         "code": 59676
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 4
+      "iconIdx": 18
     },
     {
       "icon": {
@@ -168,9 +575,9 @@
         "code": 59649,
         "name": "avatar"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 5
+      "iconIdx": 19
     },
     {
       "icon": {
@@ -194,9 +601,9 @@
         "code": 59653,
         "name": "hangup"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 6
+      "iconIdx": 20
     },
     {
       "icon": {
@@ -220,9 +627,9 @@
         "code": 59654,
         "name": "chat"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 7
+      "iconIdx": 21
     },
     {
       "icon": {
@@ -246,9 +653,9 @@
         "code": 59650,
         "name": "download"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 8
+      "iconIdx": 22
     },
     {
       "icon": {
@@ -272,9 +679,9 @@
         "code": 59655,
         "name": "edit"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 9
+      "iconIdx": 23
     },
     {
       "icon": {
@@ -298,9 +705,9 @@
         "code": 59656,
         "name": "share-doc"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 10
+      "iconIdx": 24
     },
     {
       "icon": {
@@ -324,9 +731,9 @@
         "code": 59652,
         "name": "kick"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 11
+      "iconIdx": 25
     },
     {
       "icon": {
@@ -344,15 +751,15 @@
       "attrs": [],
       "properties": {
         "id": 10,
-        "order": 900,
+        "order": 922,
         "ligatures": "expand_less",
         "prevSize": 32,
         "code": 59679,
         "name": "menu-up"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 12
+      "iconIdx": 26
     },
     {
       "icon": {
@@ -376,9 +783,9 @@
         "code": 59680,
         "name": "menu-down"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 13
+      "iconIdx": 27
     },
     {
       "icon": {
@@ -402,9 +809,9 @@
         "code": 59659,
         "name": "full-screen"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 14
+      "iconIdx": 28
     },
     {
       "icon": {
@@ -428,9 +835,9 @@
         "code": 59660,
         "name": "exit-full-screen"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 15
+      "iconIdx": 29
     },
     {
       "icon": {
@@ -454,9 +861,9 @@
         "code": 59658,
         "name": "star-full"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 16
+      "iconIdx": 30
     },
     {
       "icon": {
@@ -480,9 +887,9 @@
         "code": 59661,
         "name": "security"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 17
+      "iconIdx": 31
     },
     {
       "icon": {
@@ -506,9 +913,9 @@
         "code": 59662,
         "name": "security-locked"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 18
+      "iconIdx": 32
     },
     {
       "icon": {
@@ -532,9 +939,9 @@
         "code": 59663,
         "name": "reload"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 19
+      "iconIdx": 33
     },
     {
       "icon": {
@@ -558,9 +965,9 @@
         "code": 59664,
         "name": "microphone"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 20
+      "iconIdx": 34
     },
     {
       "icon": {
@@ -584,9 +991,9 @@
         "code": 59665,
         "name": "mic-empty"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 21
+      "iconIdx": 35
     },
     {
       "icon": {
@@ -610,9 +1017,9 @@
         "code": 59666,
         "name": "mic-disabled"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 22
+      "iconIdx": 36
     },
     {
       "icon": {
@@ -636,9 +1043,9 @@
         "code": 59678,
         "name": "raised-hand"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 23
+      "iconIdx": 37
     },
     {
       "icon": {
@@ -662,9 +1069,9 @@
         "code": 59675,
         "name": "contactList"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 24
+      "iconIdx": 38
     },
     {
       "icon": {
@@ -688,9 +1095,9 @@
         "code": 59667,
         "name": "link"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 25
+      "iconIdx": 39
     },
     {
       "icon": {
@@ -714,9 +1121,9 @@
         "code": 59668,
         "name": "shared-video"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 26
+      "iconIdx": 40
     },
     {
       "icon": {
@@ -740,9 +1147,9 @@
         "code": 59669,
         "name": "settings"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 27
+      "iconIdx": 41
     },
     {
       "icon": {
@@ -766,9 +1173,9 @@
         "code": 59670,
         "name": "star"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 28
+      "iconIdx": 42
     },
     {
       "icon": {
@@ -792,9 +1199,9 @@
         "code": 59681,
         "name": "switch-camera"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 29
+      "iconIdx": 43
     },
     {
       "icon": {
@@ -818,9 +1225,9 @@
         "code": 59671,
         "name": "share-desktop"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 30
+      "iconIdx": 44
     },
     {
       "icon": {
@@ -844,9 +1251,9 @@
         "code": 59672,
         "name": "camera"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 31
+      "iconIdx": 45
     },
     {
       "icon": {
@@ -870,9 +1277,9 @@
         "code": 59673,
         "name": "camera-disabled"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 32
+      "iconIdx": 46
     },
     {
       "icon": {
@@ -896,9 +1303,9 @@
         "code": 59674,
         "name": "volume"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 33
+      "iconIdx": 47
     },
     {
       "icon": {
@@ -925,9 +1332,9 @@
         "name": "recDisable",
         "ligatures": ""
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 36
+      "iconIdx": 48
     },
     {
       "icon": {
@@ -955,9 +1362,9 @@
         "name": "recEnable",
         "ligatures": ""
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 37
+      "iconIdx": 49
     },
     {
       "icon": {
@@ -985,9 +1392,9 @@
         "name": "presentation",
         "ligatures": ""
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 38
+      "iconIdx": 50
     },
     {
       "icon": {
@@ -1011,9 +1418,9 @@
         "code": 59685,
         "name": "dialpad"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 39
+      "iconIdx": 51
     },
     {
       "icon": {
@@ -1037,9 +1444,9 @@
         "code": 59683,
         "name": "visibility"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 40
+      "iconIdx": 52
     },
     {
       "icon": {
@@ -1063,119 +1470,9 @@
         "code": 59684,
         "name": "visibility-off"
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 1,
-      "iconIdx": 41
-    },
-    {
-      "icon": {
-        "paths": [
-          "M512 682c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86zM512 426c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86zM512 342c-46 0-86-40-86-86s40-86 86-86 86 40 86 86-40 86-86 86z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": [
-          "more_vert"
-        ],
-        "defaultCode": 58836,
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "more_vert",
-        "id": 0,
-        "order": 897,
-        "prevSize": 24,
-        "code": 58836,
-        "name": "thumb-menu"
-      },
-      "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 42
-    },
-    {
-      "icon": {
-        "paths": [
-          "M330.667 554.667c-0.427-14.933 6.4-29.44 17.92-39.253 32 6.827 61.867 20.053 88.747 39.253 0 29.013-23.893 52.907-53.333 52.907s-52.907-23.467-53.333-52.907zM586.667 554.667c26.88-18.773 56.747-32 88.747-38.827 11.52 9.813 18.347 24.32 17.92 38.827 0 29.867-23.893 53.76-53.333 53.76s-53.333-23.893-53.333-53.76v0zM512 384c-118.187-1.707-234.667 27.733-338.347 85.333l-2.987 42.667c0 52.48 12.373 104.107 35.84 151.040 101.12-15.36 203.093-23.040 305.493-23.040s204.373 7.68 305.493 23.040c23.467-46.933 35.84-98.56 35.84-151.040l-2.987-42.667c-103.68-57.6-220.16-87.040-338.347-85.333zM512 85.333c235.641 0 426.667 191.025 426.667 426.667s-191.025 426.667-426.667 426.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667z"
-        ],
-        "attrs": [
-          {}
-        ],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": [
-          "ninja"
-        ],
-        "grid": 24
-      },
-      "attrs": [
-        {}
-      ],
-      "properties": {
-        "order": 850,
-        "id": 1,
-        "name": "ninja",
-        "prevSize": 24,
-        "code": 59657
-      },
-      "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 43
-    },
-    {
-      "icon": {
-        "paths": [
-          "M282 460c62 120 162 220 282 282l94-94c12-12 30-16 44-10 48 16 100 24 152 24 24 0 42 18 42 42v150c0 24-18 42-42 42-400 0-726-326-726-726 0-24 18-42 42-42h150c24 0 42 18 42 42 0 54 8 104 24 152 4 14 2 32-10 44z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": [
-          "phone"
-        ],
-        "defaultCode": 57549,
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "call, local_phone, phone",
-        "id": 2,
-        "order": 851,
-        "prevSize": 24,
-        "code": 57549,
-        "name": "phone"
-      },
-      "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 44
-    },
-    {
-      "icon": {
-        "paths": [
-          "M810 554h-256v256h-84v-256h-256v-84h256v-256h84v256h256v84z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": [
-          "add"
-        ],
-        "defaultCode": 57669,
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "add",
-        "id": 3,
-        "order": 896,
-        "prevSize": 24,
-        "code": 57669,
-        "name": "add"
-      },
-      "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 45
+      "iconIdx": 53
     }
   ],
   "height": 1024,

images/countries/au.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" viewBox="0 0 640 480">
-  <g stroke-width="1pt">
-    <path fill="#006" d="M0 0h640v480H0z"/>
-    <path d="M0 0v27.95L307.037 250h38.647v-27.95L38.647 0H0zm345.684 0v27.95L38.647 250H0v-27.95L307.037 0h38.647z" fill="#fff"/>
-    <path d="M144.035 0v250h57.614V0h-57.615zM0 83.333v83.333h345.684V83.333H0z" fill="#fff"/>
-    <path d="M0 100v50h345.684v-50H0zM155.558 0v250h34.568V0h-34.568zM0 250l115.228-83.334h25.765L25.765 250H0zM0 0l115.228 83.333H89.463L0 18.633V0zm204.69 83.333L319.92 0h25.764L230.456 83.333H204.69zM345.685 250l-115.228-83.334h25.765l89.464 64.7V250z" fill="#c00"/>
-    <path d="M299.762 392.523l-43.653 3.795 6.013 43.406-30.187-31.764-30.186 31.764 6.014-43.406-43.653-3.795 37.68-22.364-24.244-36.495 40.97 15.514 13.42-41.713 13.42 41.712 40.97-15.515-24.242 36.494m224.444 62.372l-10.537-15.854 17.81 6.742 5.824-18.125 5.825 18.126 17.807-6.742-10.537 15.854 16.37 9.718-18.965 1.65 2.616 18.85-13.116-13.793-13.117 13.794 2.616-18.85-18.964-1.65m16.368-291.815l-10.537-15.856 17.81 6.742 5.824-18.122 5.825 18.12 17.807-6.74-10.537 15.855 16.37 9.717-18.965 1.65 2.616 18.85-13.116-13.793-13.117 13.794 2.616-18.85-18.964-1.65m-89.418 104.883l-10.537-15.853 17.808 6.742 5.825-18.125 5.825 18.125 17.808-6.742-10.536 15.853 16.37 9.72-18.965 1.65 2.615 18.85-13.117-13.795-13.117 13.795 2.617-18.85-18.964-1.65m216.212-37.929l-10.558-15.854 17.822 6.742 5.782-18.125 5.854 18.125 17.772-6.742-10.508 15.854 16.362 9.718-18.97 1.65 2.608 18.85-13.118-13.793-13.117 13.793 2.61-18.85-18.936-1.65m-22.251 73.394l-10.367 6.425 2.914-11.84-9.316-7.863 12.165-.896 4.605-11.29 4.606 11.29 12.165.897-9.317 7.863 2.912 11.84" fill-rule="evenodd" fill="#fff"/>
-  </g>
-</svg>

images/countries/ca.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" viewBox="0 0 640 480">
-  <g transform="translate(74.118) scale(.9375)">
-    <path fill="#fff" d="M81.137 0h362.276v512H81.137z"/>
-    <path fill="#bf0a30" d="M-100 0H81.138v512H-100zm543.413 0H624.55v512H443.414zM135.31 247.41l-14.067 4.808 65.456 57.446c4.95 14.764-1.72 19.116-5.97 26.86l71.06-9.02-1.85 71.512 14.718-.423-3.21-70.918 71.13 8.432c-4.402-9.297-8.32-14.233-4.247-29.098l65.414-54.426-11.447-4.144c-9.36-7.222 4.044-34.784 6.066-52.178 0 0-38.195 13.135-40.698 6.262l-9.727-18.685-34.747 38.17c-3.796.91-5.413-.6-6.304-3.808l16.053-79.766-25.42 14.297c-2.128.91-4.256.125-5.658-2.355l-24.45-49.06-25.21 50.95c-1.9 1.826-3.803 2.037-5.382.796l-24.204-13.578 14.53 79.143c-1.156 3.14-3.924 4.025-7.18 2.324l-33.216-37.737c-4.345 6.962-7.29 18.336-13.033 20.885-5.744 2.387-24.98-4.823-37.873-7.637 4.404 15.895 18.176 42.302 9.46 50.957z"/>
-  </g>
-</svg>

images/countries/de.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" viewBox="0 0 640 480">
-  <path fill="#ffce00" d="M0 320h640v160.002H0z"/>
-  <path d="M0 0h640v160H0z"/>
-  <path fill="#d00" d="M0 160h640v160H0z"/>
-</svg>

images/countries/fr.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" viewBox="0 0 640 480">
-  <g fill-rule="evenodd" stroke-width="1pt">
-    <path fill="#fff" d="M0 0h640v480H0z"/>
-    <path fill="#00267f" d="M0 0h213.337v480H0z"/>
-    <path fill="#f31830" d="M426.662 0H640v480H426.662z"/>
-  </g>
-</svg>

images/countries/gb.svg

@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" viewBox="0 0 640 480">
-  <defs>
-    <clipPath id="a">
-      <path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z"/>
-    </clipPath>
-  </defs>
-  <g clip-path="url(#a)" transform="translate(80) scale(.94)">
-    <g stroke-width="1pt">
-      <path fill="#006" d="M-256 0H768.02v512.01H-256z"/>
-      <path d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z" fill="#fff"/>
-      <path d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z" fill="#fff"/>
-      <path d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z" fill="#c00"/>
-    </g>
-  </g>
-</svg>

images/countries/us.svg

@@ -1,18 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" viewBox="0 0 640 480">
-  <g fill-rule="evenodd" transform="scale(.9375)">
-    <g stroke-width="1pt">
-      <path d="M0 0h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0z" fill="#bd3d44"/>
-      <path d="M0 39.385h972.81V78.77H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0z" fill="#fff"/>
-    </g>
-    <path fill="#192f5d" d="M0 0h389.12v275.69H0z"/>
-    <g fill="#fff">
-      <path d="M32.427 11.8l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.853 0l3.541 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735H93.74zm64.856 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.269 6.734 3.54-10.896-9.269-6.735h11.458zm64.852 0l3.54 10.896h11.457l-9.269 6.735 3.54 10.896-9.268-6.734-9.27 6.734 3.541-10.896-9.27-6.735h11.458zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.27 6.734 3.542-10.896-9.27-6.735h11.458zM64.855 39.37l3.54 10.896h11.458L70.583 57l3.542 10.897-9.27-6.734-9.269 6.734L59.126 57l-9.269-6.734h11.458zm64.852 0l3.54 10.896h11.457L135.435 57l3.54 10.897-9.268-6.734-9.27 6.734L123.978 57l-9.27-6.734h11.458zm64.855 0l3.54 10.896h11.458L200.29 57l3.541 10.897-9.27-6.734-9.268 6.734L188.833 57l-9.269-6.734h11.457zm64.855 0l3.54 10.896h11.458L265.145 57l3.541 10.897-9.269-6.734-9.27 6.734L253.69 57l-9.27-6.734h11.458zm64.852 0l3.54 10.896h11.457L329.997 57l3.54 10.897-9.268-6.734-9.27 6.734L318.54 57l-9.27-6.734h11.458zM32.427 66.939l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.853 0l3.541 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735H93.74zm64.856 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.269 6.734 3.54-10.896-9.269-6.735h11.458zm64.852 0l3.54 10.896h11.457l-9.269 6.735 3.54 10.896-9.268-6.734-9.27 6.734 3.541-10.896-9.27-6.735h11.458zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.27 6.734 3.542-10.896-9.27-6.735h11.458zM64.855 94.508l3.54 10.897h11.458l-9.27 6.734 3.542 10.897-9.27-6.734-9.269 6.734 3.54-10.897-9.269-6.734h11.458zm64.852 0l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458zm64.855 0l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.27-6.734-9.268 6.734 3.54-10.897-9.269-6.734h11.457zm64.855 0l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.269-6.734-9.27 6.734 3.542-10.897-9.27-6.734h11.458zm64.852 0l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458zM32.427 122.078l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.853 0l3.541 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735H93.74zm64.856 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.269 6.734 3.54-10.896-9.269-6.735h11.458zm64.852 0l3.54 10.896h11.457l-9.269 6.735 3.54 10.896-9.268-6.734-9.27 6.734 3.541-10.896-9.27-6.735h11.458zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.27 6.734 3.542-10.896-9.27-6.735h11.458zM64.855 149.647l3.54 10.897h11.458l-9.27 6.734 3.542 10.897-9.27-6.734-9.269 6.734 3.54-10.897-9.269-6.734h11.458zm64.852 0l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458zm64.855 0l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.27-6.734-9.268 6.734 3.54-10.897-9.269-6.734h11.457zm64.855 0l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.269-6.734-9.27 6.734 3.542-10.897-9.27-6.734h11.458zm64.852 0l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458z"/>
-      <g>
-        <path d="M32.427 177.217l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.853 0l3.541 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735H93.74zm64.856 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.269 6.734 3.54-10.896-9.269-6.735h11.458zm64.852 0l3.54 10.896h11.457l-9.269 6.735 3.54 10.896-9.268-6.734-9.27 6.734 3.541-10.896-9.27-6.735h11.458zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.27 6.734 3.542-10.896-9.27-6.735h11.458zM64.855 204.786l3.54 10.897h11.458l-9.27 6.734 3.542 10.897-9.27-6.734-9.269 6.734 3.54-10.897-9.269-6.734h11.458zm64.852 0l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458zm64.855 0l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.27-6.734-9.268 6.734 3.54-10.897-9.269-6.734h11.457zm64.855 0l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.269-6.734-9.27 6.734 3.542-10.897-9.27-6.734h11.458zm64.852 0l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458z"/>
-      </g>
-      <g>
-        <path d="M32.427 232.356l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.853 0l3.541 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735H93.74zm64.856 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.269 6.734 3.54-10.896-9.269-6.735h11.458zm64.852 0l3.54 10.896h11.457l-9.269 6.735 3.54 10.896-9.268-6.734-9.27 6.734 3.541-10.896-9.27-6.735h11.458zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.27 6.734 3.542-10.896-9.27-6.735h11.458z"/>
-      </g>
-    </g>
-  </g>
-</svg>

images/googleLogo.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 48 48" class="abcRioButtonSvg">
+  <g>
+    <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
+    <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
+    <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
+    <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
+    <path fill="none" d="M0 0h48v48H0z"></path>
+  </g>
+</svg>