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

.flowconfig

@@ -16,14 +16,18 @@
 ; Ignore polyfills
 .*/Libraries/polyfills/.*
 
-; Ignore metro
-.*/node_modules/metro/.*
-
 ; 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/@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/react-native-permissions/.*
 .*/node_modules/styled-components/.*
 
 .*/\.git/.*
@@ -33,43 +37,33 @@
 [libs]
 node_modules/react-native/Libraries/react-native/react-native-interface.js
 node_modules/react-native/flow/
-node_modules/react-native/flow-github/
 
 [options]
 emoji=true
 
-esproposal.optional_chaining=enable
-esproposal.nullish_coalescing=enable
-
 module.system=haste
-module.system.haste.use_name_reducers=true
-# get basename
-module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1'
-# strip .js or .js.flow suffix
-module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1'
-# strip .ios suffix
-module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1'
-module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1'
-module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1'
-module.system.haste.paths.blacklist=.*/__tests__/.*
-module.system.haste.paths.blacklist=.*/__mocks__/.*
-module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/Animated/src/polyfills/.*
-module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/Libraries/.*
 
 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\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(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\\)*\\$FlowExpectedError
 
+unsafe.enable_getters_and_setters=true
+
 ; We (i.e. the jitsi-meet project) are using the haste module system on Web as
 ; well, not only on React Native. Unfortunately, Flow does not support .web.js
 ; by default. Override Flow's defaults to include .web.js as well. Technically,
@@ -83,4 +77,4 @@ module.file_ext=.jsx
 module.file_ext=.json
 
 [version]
-^0.78.0
+^0.57.0

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,27 +0,0 @@
----
-name: Bug Report
-about: Before posting, please make sure you check https://community.jitsi.org
-
----
-
-*This Issue tracker is only for reporting bugs and tracking code related issues.*
-
-Before posting, please make sure you check community.jitsi.org to see if the same or similar bugs have already been discussed. General questions, installation help, and feature requests can also be posted to community.jitsi.org.
-
-## Description
----
-
-## Current behavior
----
-
-## Expected Behavior
----
-
-## Possible Solution
----
-
-## Steps to reproduce
----
-
-# Environment details
----

.gitignore

@@ -68,11 +68,3 @@ buck-out/
 */fastlane/report.xml
 */fastlane/Preview.html
 */fastlane/screenshots
-
-# Bundle artifact
-*.jsbundle
-
-# precommit-hook
-.jshintignore
-.jshintrc
-

.travis.yml

@@ -1,4 +0,0 @@
-osx_image: xcode10
-language: objective-c
-script:
-- "./ios/travis-ci/build-ipa.sh"

Makefile

@@ -2,7 +2,6 @@ BUILD_DIR = build
 CLEANCSS = ./node_modules/.bin/cleancss
 DEPLOY_DIR = libs
 LIBJITSIMEET_DIR = node_modules/lib-jitsi-meet/
-LIBFLAC_DIR = node_modules/libflacjs/dist/min/
 NODE_SASS = ./node_modules/.bin/node-sass
 NPM = npm
 OUTPUT_DIR = .
@@ -10,7 +9,6 @@ STYLES_BUNDLE = css/all.bundle.css
 STYLES_DESTINATION = css/all.css
 STYLES_MAIN = css/main.scss
 WEBPACK = ./node_modules/.bin/webpack
-WEBPACK_DEV_SERVER = ./node_modules/.bin/webpack-dev-server
 
 all: compile deploy clean
 
@@ -20,10 +18,9 @@ compile:
 clean:
 	rm -fr $(BUILD_DIR)
 
-deploy: deploy-init deploy-appbundle deploy-lib-jitsi-meet deploy-libflac deploy-css deploy-local
+deploy: deploy-init deploy-appbundle deploy-lib-jitsi-meet deploy-css deploy-local
 
 deploy-init:
-	rm -fr $(DEPLOY_DIR)
 	mkdir -p $(DEPLOY_DIR)
 
 deploy-appbundle:
@@ -34,8 +31,6 @@ deploy-appbundle:
 		$(BUILD_DIR)/do_external_connect.min.map \
 		$(BUILD_DIR)/external_api.min.js \
 		$(BUILD_DIR)/external_api.min.map \
-		$(BUILD_DIR)/flacEncodeWorker.min.js \
-		$(BUILD_DIR)/flacEncodeWorker.min.map \
 		$(BUILD_DIR)/device_selection_popup_bundle.min.js \
 		$(BUILD_DIR)/device_selection_popup_bundle.min.map \
 		$(BUILD_DIR)/dial_in_info_bundle.min.js \
@@ -53,12 +48,6 @@ deploy-lib-jitsi-meet:
 		$(LIBJITSIMEET_DIR)/modules/browser/capabilities.json \
 		$(DEPLOY_DIR)
 
-deploy-libflac:
-	cp \
-		$(LIBFLAC_DIR)/libflac4-1.3.2.min.js \
-		$(LIBFLAC_DIR)/libflac4-1.3.2.min.js.mem \
-		$(DEPLOY_DIR)
-
 deploy-css:
 	$(NODE_SASS) $(STYLES_MAIN) $(STYLES_BUNDLE) && \
 	$(CLEANCSS) $(STYLES_BUNDLE) > $(STYLES_DESTINATION) ; \
@@ -67,9 +56,6 @@ deploy-css:
 deploy-local:
 	([ ! -x deploy-local.sh ] || ./deploy-local.sh)
 
-dev: deploy-init deploy-css deploy-lib-jitsi-meet deploy-libflac
-	$(WEBPACK_DEV_SERVER)
-
 source-package:
 	mkdir -p source_package/jitsi-meet/css && \
 	cp -r *.js *.html connection_optimization favicon.ico fonts images libs static sounds LICENSE lang source_package/jitsi-meet && \

README.md

@@ -10,15 +10,12 @@ Jitsi Meet allows for very efficient collaboration. It allows users to stream th
 
 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. You can also see a demonstration of the process in [this tutorial video](https://jitsi.org/tutorial).
+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).
 
 ## Download
 
-| Latest stable release | [![release](https://img.shields.io/badge/release-latest-green.svg)](https://github.com/jitsi/jitsi-meet/releases/latest) |
-|---|---|
-
 You can download Debian/Ubuntu binaries:
 * [stable](https://download.jitsi.org/stable/) ([instructions](https://jitsi.org/downloads/ubuntu-debian-installations-instructions/))
 * [testing](https://download.jitsi.org/testing/) ([instructions](https://jitsi.org/downloads/ubuntu-debian-installations-instructions-for-testing/))
@@ -33,11 +30,11 @@ You can get our mobile versions from here:
 
 ## Building the sources
 
-Node.js >= 8 and npm >= 6 are required.
+Node.js >= 6 is required.
 
 On Debian/Ubuntu systems, the required packages can be installed with:
 ```
-sudo apt-get install npm nodejs
+sudo apt-get install npm nodejs-legacy
 cd jitsi-meet
 npm install
 ```
@@ -47,7 +44,7 @@ To build the Jitsi Meet application, just type
 make
 ```
 
-### Working with the library sources (lib-jitsi-meet)
+## Working with the library sources (lib-jitsi-meet)
 
 By default the library is build from its git repository sources. The default dependency path in package.json is :
 ```json
@@ -75,12 +72,12 @@ It allows to link `lib-jitsi-meet` dependency to local source in few steps:
 ```bash
 cd lib-jitsi-meet
 
-#### create global symlink for lib-jitsi-meet package
+# create global symlink for lib-jitsi-meet package
 npm link
 
 cd ../jitsi-meet
 
-#### create symlink from the local node_modules folder to the global lib-jitsi-meet symlink
+# create symlink from the local node_modules folder to the global lib-jitsi-meet symlink
 npm link lib-jitsi-meet
 ```
 
@@ -93,17 +90,16 @@ cd jitsi-meet
 npm unlink lib-jitsi-meet
 npm install
 ```
-### Running with webpack-dev-server for development
+## Running with webpack-dev-server for development   
 
 Use it at the CLI, type
 ```
-make dev
+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:
+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 
 ```
-export WEBPACK_DEV_SERVER_PROXY_TARGET=https://your-example-server.com
-make dev
+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/
@@ -126,11 +122,11 @@ 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
+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 [8x8](https://8x8.com).
+at [Atlassian](https://atlassian.com).
 
 ## Mobile app
 Jitsi Meet is also available as a React Native app for Android and iOS.

analytics-ga.js

@@ -20,7 +20,7 @@
         (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, 'auto');
+        ga('create', options.googleAnalyticsTrackingId, 'jit.si');
         ga('send', 'pageview');
 
         /* eslint-enable */
@@ -126,15 +126,6 @@
             return;
         }
 
-        const ignoredEvents
-            = [ 'e2e_rtt', 'rtp.stats', 'rtt.by.region', 'available.device',
-                'stream.switch.delay', 'ice.state.changed', 'ice.duration' ];
-
-        // Temporary removing some of the events that are too noisy.
-        if (ignoredEvents.indexOf(event.action) !== -1) {
-            return;
-        }
-
         const gaEvent = {
             'eventCategory': 'jitsi-meet',
             'eventAction': this._extractAction(event),

android/README.md

@@ -1,58 +1,24 @@
 # Jitsi Meet SDK for Android
 
-## Build your own, or use a pre-build SDK artifacts/binaries
-Jitsi conveniently provides a pre-build SDK artifacts/binaries in its Maven repository. When you do not require any modification to the SDK itself, it's suggested to use the pre-build SDK. This avoids the complexity of building and installing your own SDK artifacts/binaries.
-
-### Use pre-build SDK artifacts/binaries
-In your project, add the Maven repository
-`https://github.com/jitsi/jitsi-maven-repository/raw/master/releases` and the
-dependency `org.jitsi.react:jitsi-meet-sdk` into your `build.gradle` files.
-
-The repository typically goes into the `build.gradle` file in the root of your project:
-
-```gradle
-allprojects {
-    repositories {
-        google()
-        jcenter()
-        maven {
-            url "https://github.com/jitsi/jitsi-maven-repository/raw/master/releases"
-        }
-    }
-}
-```
-
-Dependency definitions belong in the individual module `build.gradle` files:
-
-```gradle
-dependencies {
-    // (other dependencies)
-    implementation ('org.jitsi.react:jitsi-meet-sdk:+') { transitive = true }
-}
-```
-
-### Build and use your own SDK artifacts/binaries
+## Build
 
 1. Install all required [dependencies](https://github.com/jitsi/jitsi-meet/blob/master/doc/mobile.md).
 
-2. Create the SDK-release assembly, by invoking the following in the jitsi-meet
-   project source:
-
-   ```bash
+2. ```bash
    cd android/
    ./gradlew :sdk:assembleRelease
    ```
-   When this successfully executes, artifacts/binaries are ready to be published
-   into a Maven repository of your choice.
 
 3. Configure the Maven repositories in which you are going to publish the
-   artifacts/binaries during step 4.
-
-   In the file `android/sdk/build.gradle` modify the line that contains
+   artifacts/binaries during step 4. Modify
    `"file:${rootProject.projectDir}/../../../jitsi/jitsi-maven-repository/releases"`
-
-   Change this value (which represents the Maven repository location used internally
-   by the Jitsi Developers) to the location of the repository that you'd like to use.
+   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:
@@ -61,66 +27,27 @@ dependencies {
    ./gradlew :sdk:publish
    cd ../
    ```
-5. In _your_ project, add the Maven repository that you configured in step 3, as well
-   as the dependency `org.jitsi.react:jitsi-meet-sdk` into your `build.gradle`
-   file. Note that it's needed to pull in the transitive dependencies:
 
-   ```gradle
-   implementation ('org.jitsi.react:jitsi-meet-sdk:+') { transitive = true }
-   ```
-
-Generally, if you are modifying the JavaScript code of Jitsi Meet SDK for Android only,
-the above will suffice. 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) continue below.
-
-6. Create the release assembly for _each_ third-party react-native module that you
-   need, replacing it's name in the example below.
-
-   ```bash
-   ./gradlew :react-native-webrtc:assembleRelease
-   ```
-
-7. Configure the Maven repositories in which you are going to publish the
-   artifacts/binaries during step 8.
-
-   In the file `android/build.gradle` (note that this is a different file than the file
-   that was modified in step 3) modify the line that contains
-   `"file:${rootProject.projectDir}/../../../jitsi/jitsi-maven-repository/releases"`
-
-   Change this value (which represents the Maven repository location used internally
-   by the Jitsi Developers) to the location of the repository that you'd like to use.
-   You can use the same repository as the one you configured in step 3 if you want.
-
-8. Publish the Maven artifact/binary of _each_ third-party react-native module that
-   you need, replacing it's name in the example below. For example, to publish
-   react-native-webrtc:
+   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
    ```
 
-   Note that there should not be a need to explicitly add these dependencies in
-   _your_ project, as they will be pulled in as transitive dependencies of
-   `jitsi-meet-sdk`.
+## Install
 
+Add the Maven repository
+`https://github.com/jitsi/jitsi-maven-repository/raw/master/releases` and the
+dependency `org.jitsi.react:jitsi-meet-sdk:1.9.0` into your `build.gradle`.
 
-## Using the API
-=======
+## API
 
 Jitsi Meet SDK is an Android library which embodies the whole Jitsi Meet
 experience and makes it reusable by third-party apps.
 
-First, add Java 1.8 compatibility support to your project by adding the
-following lines into your `build.gradle` file:
-
-```
-compileOptions {
-    sourceCompatibility JavaVersion.VERSION_1_8
-    targetCompatibility JavaVersion.VERSION_1_8
-}
-```
-
 To get started, extends your `android.app.Activity` from
 `org.jitsi.meet.sdk.JitsiMeetActivity`:
 
@@ -205,13 +132,13 @@ which displays a single `JitsiMeetView`.
 
 See JitsiMeetView.getDefaultURL.
 
-#### isPictureInPictureEnabled()
+#### getPictureInPictureEnabled()
 
-See JitsiMeetView.isPictureInPictureEnabled.
+See JitsiMeetView.getPictureInPictureEnabled.
 
-#### isWelcomePageEnabled()
+#### getWelcomePageEnabled()
 
-See JitsiMeetView.isWelcomePageEnabled.
+See JitsiMeetView.getWelcomePageEnabled.
 
 #### loadURL(URL)
 
@@ -250,13 +177,13 @@ if set to `null`, the default built in JavaScript is used: https://meet.jit.si.
 
 Returns the `JitsiMeetViewListener` instance attached to the view.
 
-#### isPictureInPictureEnabled()
+#### 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.
 
-#### isWelcomePageEnabled()
+#### getWelcomePageEnabled()
 
 Returns true if the Welcome page is enabled; otherwise, false. If false, a black
 empty view will be rendered when not in a conference. Defaults to false.
@@ -316,7 +243,7 @@ effect.
 
 #### setWelcomePageEnabled(boolean)
 
-Sets whether the Welcome page is enabled. See `isWelcomePageEnabled` for more
+Sets whether the Welcome page is enabled. See `getWelcomePageEnabled` for more
 information.
 
 NOTE: Must be called (if at all) before `loadURL`/`loadURLString` for it to take
@@ -491,29 +418,3 @@ Picture-in-Picture style scenario, in a rectangle too small to accommodate its
 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.
-
-## Dropbox integration
-
-To setup the Dropbox integration, follow these steps:
-
-1. Add the following to the app's AndroidManifest.xml and change `<APP_KEY>` to
-your Dropbox app key:
-```
-<activity
-    android:configChanges="keyboard|orientation"
-    android:launchMode="singleTask"
-    android:name="com.dropbox.core.android.AuthActivity">
-  <intent-filter>
-    <action android:name="android.intent.action.VIEW" />
-    <category android:name="android.intent.category.BROWSABLE" />
-    <category android:name="android.intent.category.DEFAULT" />
-    <data android:scheme="db-<APP_KEY>" />
-  </intent-filter>
-</activity>
-```
-
-2. Add the following to the app's strings.xml and change `<APP_KEY>` to your
-Dropbox app key:
-```
-<string name="dropbox_app_key"><APP_KEY></string>
-```

android/app/build.gradle

@@ -2,7 +2,6 @@ apply plugin: 'com.android.application'
 
 android {
     compileSdkVersion rootProject.ext.compileSdkVersion
-    buildToolsVersion rootProject.ext.buildToolsVersion
 
     defaultConfig {
         applicationId 'org.jitsi.meet'
@@ -26,88 +25,16 @@ android {
             exclude '/lib/x86_64/**'
         }
     }
-
     buildTypes {
-        debug {
-            minifyEnabled true
-            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules-debug.pro'
-        }
         release {
-            minifyEnabled true
-            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules-release.pro'
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
         }
     }
-
-    compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
-    }
 }
 
 dependencies {
-    implementation fileTree(dir: 'libs', include: ['*.jar'])
-    implementation "com.android.support:support-v4:${rootProject.ext.supportLibVersion}"
-    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
-    implementation 'com.google.android.gms:play-services-auth:15.0.0'
+    compile fileTree(dir: 'libs', include: ['*.jar'])
 
     implementation project(':sdk')
-
-    debugImplementation 'com.squareup.leakcanary:leakcanary-android:1.6.1'
-    releaseImplementation 'com.squareup.leakcanary:leakcanary-android-no-op:1.6.1'
-}
-
-gradle.projectsEvaluated {
-    // Dropbox integration
-    //
-
-    def plistParser = new XmlSlurper(
-            /* validating */ false,
-            /* namespaceAware */ false,
-            /* allowDocTypeDeclaration */ true)
-    plistParser.setFeature(
-            'http://apache.org/xml/features/nonvalidating/load-external-dtd',
-            false)
-    def plist = plistParser.parse('../ios/app/src/Info.plist')
-    def dropboxScheme = plist.dict.array.dict.array.string.find { string ->
-        string.text().startsWith('db-')
-    }
-    def dropboxAppKey = dropboxScheme?.text() - 'db-'
-
-    if (dropboxAppKey) {
-        android.defaultConfig.resValue('string', 'dropbox_app_key', "${dropboxAppKey}")
-
-        def dropboxActivity = """
-          <activity
-              android:configChanges="keyboard|orientation"
-              android:launchMode="singleTask"
-              android:name="com.dropbox.core.android.AuthActivity">
-            <intent-filter>
-              <action android:name="android.intent.action.VIEW" />
-              <category android:name="android.intent.category.BROWSABLE" />
-              <category android:name="android.intent.category.DEFAULT" />
-              <data android:scheme="db-${dropboxAppKey}" />
-            </intent-filter>
-          </activity>""";
-
-        android.applicationVariants.all { variant ->
-            variant.outputs.each { output ->
-                output.processManifest.doLast {
-                    def f = new File(manifestOutputDirectory, 'AndroidManifest.xml')
-                    if (!f.isFile()) {
-                        f = new File(new File(manifestOutputDirectory, output.dirName), 'AndroidManifest.xml')
-                    }
-                    if (f.exists()) {
-                        def charset = 'UTF-8'
-                        def s = f.getText(charset)
-                        s = s.replace('</application>', "${dropboxActivity}</application>")
-                        f.write(s, charset)
-                    }
-                }
-            }
-        }
-    }
-}
-
-if (project.file('google-services.json').exists()) {
-   apply plugin: 'com.google.gms.google-services'
 }

android/app/proguard-rules-debug.pro

@@ -1,5 +0,0 @@
--include proguard-rules.pro
-
-# Disabling obfuscation is useful if you collect stack traces from production crashes
-# (unless you are using a system that supports de-obfuscate the stack traces).
--dontobfuscate

android/app/proguard-rules-release.pro

@@ -1,6 +0,0 @@
--include proguard-rules.pro
-
-# Crashlytics
--keepattributes *Annotation*
--keepattributes SourceFile,LineNumberTable
--keep public class * extends java.lang.Exception

android/app/proguard-rules.pro

@@ -16,6 +16,10 @@
 #   public *;
 #}
 
+# Disabling obfuscation is useful if you collect stack traces from production crashes
+# (unless you are using a system that supports de-obfuscate the stack traces).
+-dontobfuscate
+
 # React Native
 
 # Keep our interfaces so they can be used by other ProGuard rules.
@@ -64,26 +68,3 @@
 -dontwarn java.nio.file.*
 -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement
 -dontwarn okio.**
-
-# FastImage
-
--keep public class com.dylanvann.fastimage.** {*;}
-
-# We added the following when we switched minifyEnabled on. Probably because we
-# ran the app and hit problems...
-
--keep class com.facebook.react.bridge.CatalystInstanceImpl { *; }
--keep class com.facebook.react.bridge.ExecutorToken { *; }
--keep class com.facebook.react.bridge.JavaScriptExecutor { *; }
--keep class com.facebook.react.bridge.ModuleRegistryHolder { *; }
--keep class com.facebook.react.bridge.ReadableType { *; }
--keep class com.facebook.react.bridge.queue.NativeRunnable { *; }
--keep class com.facebook.react.devsupport.** { *; }
--keep class org.webrtc.** { *; }
-
--dontwarn com.facebook.react.devsupport.**
--dontwarn com.google.appengine.**
--dontwarn com.squareup.okhttp.**
--dontwarn javax.servlet.**
-
-# ^^^ We added the above when we switched minifyEnabled on.

android/app/src/main/AndroidManifest.xml

@@ -5,7 +5,6 @@
       android:allowBackup="true"
       android:icon="@mipmap/ic_launcher"
       android:label="@string/app_name"
-      android:name=".MainApplication"
       android:theme="@style/AppTheme">
     <activity
         android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize"

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

@@ -22,15 +22,9 @@ import android.util.Log;
 import org.jitsi.meet.sdk.JitsiMeetActivity;
 import org.jitsi.meet.sdk.JitsiMeetView;
 import org.jitsi.meet.sdk.JitsiMeetViewListener;
-import org.jitsi.meet.sdk.invite.AddPeopleController;
-import org.jitsi.meet.sdk.invite.AddPeopleControllerListener;
-import org.jitsi.meet.sdk.invite.InviteController;
-import org.jitsi.meet.sdk.invite.InviteControllerListener;
 
-import com.facebook.react.bridge.UiThreadUtil;
+import com.calendarevents.CalendarEventsPackage;
 
-import java.util.ArrayList;
-import java.util.List;
 import java.util.Map;
 
 /**
@@ -46,14 +40,6 @@ import java.util.Map;
  * {@code react-native run-android}.
  */
 public class MainActivity extends JitsiMeetActivity {
-    /**
-     * The query to perform through {@link AddPeopleController} when the
-     * {@code InviteButton} is tapped in order to exercise the public API of the
-     * feature invite. If {@code null}, the {@code InviteButton} will not be
-     * rendered.
-     */
-    private static final String ADD_PEOPLE_CONTROLLER_QUERY = null;
-
     @Override
     protected JitsiMeetView initializeView() {
         JitsiMeetView view = super.initializeView();
@@ -64,8 +50,6 @@ public class MainActivity extends JitsiMeetActivity {
         if (BuildConfig.DEBUG && view != null) {
             view.setListener(new JitsiMeetViewListener() {
                 private void on(String name, Map<String, Object> data) {
-                    UiThreadUtil.assertOnUiThread();
-
                     // Log with the tag "ReactNative" in order to have the log
                     // visible in react-native log-android as well.
                     Log.d(
@@ -105,73 +89,11 @@ public class MainActivity extends JitsiMeetActivity {
                     on("LOAD_CONFIG_ERROR", data);
                 }
             });
-
-            // inviteController
-            final InviteController inviteController
-                = view.getInviteController();
-
-            inviteController.setListener(new InviteControllerListener() {
-                public void beginAddPeople(
-                        AddPeopleController addPeopleController) {
-                    onInviteControllerBeginAddPeople(
-                        inviteController,
-                        addPeopleController);
-                }
-            });
-            inviteController.setAddPeopleEnabled(
-                ADD_PEOPLE_CONTROLLER_QUERY != null);
-            inviteController.setDialOutEnabled(
-                inviteController.isAddPeopleEnabled());
         }
 
         return view;
     }
 
-    private void onAddPeopleControllerInviteSettled(
-            AddPeopleController addPeopleController,
-            List<Map<String, Object>> failedInvitees) {
-        UiThreadUtil.assertOnUiThread();
-
-        // XXX Explicitly invoke endAddPeople on addPeopleController; otherwise,
-        // it is going to be memory-leaked in the associated InviteController
-        // and no subsequent InviteButton clicks/taps will be delivered.
-        // Technically, endAddPeople will automatically be invoked if there are
-        // no failedInviteees i.e. the invite succeeeded for all specified
-        // invitees.
-        addPeopleController.endAddPeople();
-    }
-
-    private void onAddPeopleControllerReceivedResults(
-            AddPeopleController addPeopleController,
-            List<Map<String, Object>> results,
-            String query) {
-        UiThreadUtil.assertOnUiThread();
-
-        int size = results.size();
-
-        if (size > 0) {
-            // Exercise AddPeopleController's inviteById implementation.
-            List<String> ids = new ArrayList<>(size);
-
-            for (Map<String, Object> result : results) {
-                Object id = result.get("id");
-
-                if (id != null) {
-                    ids.add(id.toString());
-                }
-            }
-
-            addPeopleController.inviteById(ids);
-
-            return;
-        }
-
-        // XXX Explicitly invoke endAddPeople on addPeopleController; otherwise,
-        // it is going to be memory-leaked in the associated InviteController
-        // and no subsequent InviteButton clicks/taps will be delivered.
-        addPeopleController.endAddPeople();
-    }
-
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         // As this is the Jitsi Meet app (i.e. not the Jitsi Meet SDK), we do
@@ -184,47 +106,9 @@ public class MainActivity extends JitsiMeetActivity {
         super.onCreate(savedInstanceState);
     }
 
-    private void onInviteControllerBeginAddPeople(
-            InviteController inviteController,
-            AddPeopleController addPeopleController) {
-        UiThreadUtil.assertOnUiThread();
-
-        // Log with the tag "ReactNative" in order to have the log visible in
-        // react-native log-android as well.
-        Log.d(
-            "ReactNative",
-            InviteControllerListener.class.getSimpleName() + ".beginAddPeople");
-
-        String query = ADD_PEOPLE_CONTROLLER_QUERY;
-    
-        if (query != null
-                && (inviteController.isAddPeopleEnabled()
-                    || inviteController.isDialOutEnabled())) {
-            addPeopleController.setListener(new AddPeopleControllerListener() {
-                public void onInviteSettled(
-                        AddPeopleController addPeopleController,
-                        List<Map<String, Object>> failedInvitees) {
-                    onAddPeopleControllerInviteSettled(
-                        addPeopleController,
-                        failedInvitees);
-                }
-
-                public void onReceivedResults(
-                        AddPeopleController addPeopleController,
-                        List<Map<String, Object>> results,
-                        String query) {
-                    onAddPeopleControllerReceivedResults(
-                        addPeopleController,
-                        results, query);
-                }
-            });
-            addPeopleController.performQuery(query);
-        } else {
-            // XXX Explicitly invoke endAddPeople on addPeopleController;
-            // otherwise, it is going to be memory-leaked in the associated
-            // InviteController and no subsequent InviteButton clicks/taps will
-            // be delivered.
-            addPeopleController.endAddPeople();
-        }
-    }
+    @Override
+  public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {
+      CalendarEventsPackage.onRequestPermissionsResult(requestCode, permissions, grantResults);
+      super.onRequestPermissionsResult(requestCode, permissions, grantResults);
+  }
 }

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

@@ -1,36 +0,0 @@
-/*
- * Copyright @ 2018-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;
-
-import android.app.Application;
-
-import com.squareup.leakcanary.LeakCanary;
-
-/**
- * Simple {@link Application} for hooking up LeakCanary:
- * https://github.com/square/leakcanary
- */
-public class MainApplication extends Application {
-    @Override
-    public void onCreate() {
-        super.onCreate();
-
-        if (!LeakCanary.isInAnalyzerProcess(this)) {
-            LeakCanary.install(this);
-        }
-    }
-}

android/build.gradle

@@ -7,8 +7,7 @@ buildscript {
         jcenter()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:3.1.4'
-        classpath 'com.google.gms:google-services:3.2.1'
+        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.
@@ -17,36 +16,13 @@ buildscript {
 
 allprojects {
     repositories {
-        maven { url "https://maven.google.com" }
         google()
         jcenter()
-        maven { url "$rootDir/../node_modules/jsc-android/dist" }
         // React Native (JS, Obj-C sources, Android binaries) is installed from
         // npm.
         maven { url "$rootDir/../node_modules/react-native/android" }
     }
 
-    // Make sure we use the react-native version in node_modules and not the one
-    // published in jcenter / elsewhere.
-    configurations.all {
-        resolutionStrategy {
-            eachDependency { DependencyResolveDetails details ->
-                if (details.requested.group == 'com.facebook.react'
-                        && details.requested.name == 'react-native') {
-                    def file = new File("$rootDir/../node_modules/react-native/package.json")
-                    def version = new groovy.json.JsonSlurper().parseText(file.text).version
-                    details.useVersion version
-                }
-                if (details.requested.group == 'org.webkit'
-                        && details.requested.name == 'android-jsc') {
-                    def file = new File("$rootDir/../node_modules/jsc-android/package.json")
-                    def version = new groovy.json.JsonSlurper().parseText(file.text).version
-                    details.useVersion "r${version.tokenize('.')[0]}"
-                }
-            }
-        }
-    }
-
     // Third-party react-native modules which Jitsi Meet SDK for Android depends
     // on and which are not available in third-party Maven repositories need to
     // be deployed in a Maven repository of ours.
@@ -153,11 +129,10 @@ allprojects {
 }
 
 ext {
-    buildToolsVersion = "27.0.3"
-    compileSdkVersion = 27
-    minSdkVersion    = 21
+    buildToolsVersion = "26.0.2"
+    compileSdkVersion = 26
+    minSdkVersion    = 16
     targetSdkVersion = 26
-    supportLibVersion = "27.1.1"
 
     // 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
@@ -180,8 +155,3 @@ subprojects { subproject ->
         }
     }
 }
-
-task wrapper(type: Wrapper) {
-    gradleVersion = '4.4'
-    distributionUrl = distributionUrl.replace("bin", "all")
-}

android/gradle.properties

@@ -17,4 +17,5 @@
 # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
 # org.gradle.parallel=true
 
-version=1
+android.useDeprecatedNdk=true
+version=1

android/gradle/wrapper/gradle-wrapper.properties

@@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-4.1-all.zip

android/gradlew

@@ -1,4 +1,4 @@
-#!/usr/bin/env sh
+#!/usr/bin/env bash
 
 ##############################################################################
 ##
@@ -6,6 +6,47 @@
 ##
 ##############################################################################
 
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS=""
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn ( ) {
+    echo "$*"
+}
+
+die ( ) {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+esac
+
+# For Cygwin, ensure paths are in UNIX format before anything is touched.
+if $cygwin ; then
+    [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"`
+fi
+
 # Attempt to set APP_HOME
 # Resolve links: $0 may be a link
 PRG="$0"
@@ -20,49 +61,9 @@ while [ -h "$PRG" ] ; do
     fi
 done
 SAVED="`pwd`"
-cd "`dirname \"$PRG\"`/" >/dev/null
+cd "`dirname \"$PRG\"`/" >&-
 APP_HOME="`pwd -P`"
-cd "$SAVED" >/dev/null
-
-APP_NAME="Gradle"
-APP_BASE_NAME=`basename "$0"`
-
-# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-DEFAULT_JVM_OPTS=""
-
-# Use the maximum available, or set MAX_FD != -1 to use that value.
-MAX_FD="maximum"
-
-warn () {
-    echo "$*"
-}
-
-die () {
-    echo
-    echo "$*"
-    echo
-    exit 1
-}
-
-# OS specific support (must be 'true' or 'false').
-cygwin=false
-msys=false
-darwin=false
-nonstop=false
-case "`uname`" in
-  CYGWIN* )
-    cygwin=true
-    ;;
-  Darwin* )
-    darwin=true
-    ;;
-  MINGW* )
-    msys=true
-    ;;
-  NONSTOP* )
-    nonstop=true
-    ;;
-esac
+cd "$SAVED" >&-
 
 CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
 
@@ -89,7 +90,7 @@ location of your Java installation."
 fi
 
 # Increase the maximum file descriptors if we can.
-if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then
     MAX_FD_LIMIT=`ulimit -H -n`
     if [ $? -eq 0 ] ; then
         if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
@@ -113,7 +114,6 @@ fi
 if $cygwin ; then
     APP_HOME=`cygpath --path --mixed "$APP_HOME"`
     CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
-    JAVACMD=`cygpath --unix "$JAVACMD"`
 
     # We build the pattern for arguments to be converted via cygpath
     ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
@@ -154,19 +154,11 @@ if $cygwin ; then
     esac
 fi
 
-# Escape application args
-save () {
-    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
-    echo " "
+# Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules
+function splitJvmOpts() {
+    JVM_OPTS=("$@")
 }
-APP_ARGS=$(save "$@")
+eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS
+JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME"
 
-# Collect all arguments for the java command, following the shell quoting and substitution rules
-eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
-
-# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
-if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
-  cd "$(dirname "$0")"
-fi
-
-exec "$JAVACMD" "$@"
+exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@"

android/gradlew.bat

@@ -8,14 +8,14 @@
 @rem Set local scope for the variables with windows NT shell
 if "%OS%"=="Windows_NT" setlocal
 
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS=
+
 set DIRNAME=%~dp0
 if "%DIRNAME%" == "" set DIRNAME=.
 set APP_BASE_NAME=%~n0
 set APP_HOME=%DIRNAME%
 
-@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-set DEFAULT_JVM_OPTS=
-
 @rem Find java.exe
 if defined JAVA_HOME goto findJavaFromJavaHome
 
@@ -46,9 +46,10 @@ echo location of your Java installation.
 goto fail
 
 :init
-@rem Get command-line arguments, handling Windows variants
+@rem Get command-line arguments, handling Windowz variants
 
 if not "%OS%" == "Windows_NT" goto win9xME_args
+if "%@eval[2+2]" == "4" goto 4NT_args
 
 :win9xME_args
 @rem Slurp the command line arguments.
@@ -59,6 +60,11 @@ set _SKIP=2
 if "x%~1" == "x" goto execute
 
 set CMD_LINE_ARGS=%*
+goto execute
+
+:4NT_args
+@rem Get arguments from the 4NT Shell from JP Software
+set CMD_LINE_ARGS=%$
 
 :execute
 @rem Setup the command line

android/sdk/build.gradle

@@ -19,144 +19,108 @@ android {
 }
 
 dependencies {
-    implementation fileTree(dir: 'libs', include: ['*.jar'])
+    compile fileTree(dir: 'libs', include: ['*.jar'])
 
-    implementation "com.android.support:support-v4:${rootProject.ext.supportLibVersion}"
-    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
+    compile 'com.android.support:appcompat-v7:27.0.2'
+    compile 'com.facebook.react:react-native:+'
 
-    implementation 'com.dropbox.core:dropbox-core-sdk:3.0.8'
-    api 'com.facebook.react:react-native:+'
-
-    implementation project(':react-native-background-timer')
-    implementation project(':react-native-calendar-events')
-    implementation(project(':react-native-fast-image')) {
-        exclude group: 'com.android.support'
-    }
-    implementation(project(":react-native-google-signin")) {
-        exclude group: 'com.google.android.gms'
-        exclude group: 'com.android.support'
-    }
-    implementation project(':react-native-immersive')
-    implementation project(':react-native-keep-awake')
-    implementation project(':react-native-linear-gradient')
-    implementation project(':react-native-locale-detector')
-    implementation project(':react-native-sound')
-    implementation project(':react-native-vector-icons')
-    implementation project(':react-native-webrtc')
-
-    testImplementation 'junit:junit:4.12'
+    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
+//
 
-// Here we bundle all assets, resources and React files. We cannot use the
-// react.gradle file provided by react-native because it's designed to be used
-// in an application (it taps into applicationVariants, but the SDK is a library
-// so we need libraryVariants instead).
-android.libraryVariants.all { def variant ->
-    // Create variant and target names
-    def targetName = variant.name.capitalize()
-    def targetPath = variant.dirName
-
-    // React js bundle directories
-    def jsBundleDir = file("$buildDir/generated/assets/react/${targetPath}")
-    def resourcesDir = file("$buildDir/generated/res/react/${targetPath}")
-
-    def jsBundleFile = file("$jsBundleDir/index.android.bundle")
-
-    def currentBundleTask = tasks.create(
-            name: "bundle${targetName}JsAndAssets",
-            type: Exec) {
-        group = "react"
-        description = "bundle JS and assets for ${targetName}."
-
-        // Create dirs if they are not there (e.g. the "clean" task just ran)
-        doFirst {
-            jsBundleDir.deleteDir()
-            jsBundleDir.mkdirs()
-            resourcesDir.deleteDir()
-            resourcesDir.mkdirs()
-        }
-
-        // Set up inputs and outputs so gradle can cache the result
-        def reactRoot = file("${projectDir}/../../")
-        inputs.files fileTree(dir: reactRoot, excludes: ["android/**", "ios/**"])
-        outputs.dir jsBundleDir
-        outputs.dir resourcesDir
-
-        // Set up the call to the react-native cli
-        workingDir reactRoot
-
-        // Set up dev mode
-        def devEnabled = !targetName.toLowerCase().contains("release")
-
-        // Run the bundler
-        commandLine(
-                "node",
-                "node_modules/react-native/local-cli/cli.js",
-                "bundle",
-                "--platform", "android",
-                "--dev", "${devEnabled}",
-                "--reset-cache",
-                "--entry-file", "index.android.js",
-                "--bundle-output", jsBundleFile,
-                "--assets-dest", resourcesDir)
-
-        // Disable bundling on dev builds
-        enabled !devEnabled
+void runBefore(String dependentTaskName, Task task) {
+    Task dependentTask = tasks.findByPath(dependentTaskName);
+    if (dependentTask != null) {
+        dependentTask.dependsOn task
     }
+}
 
-    currentBundleTask.ext.generatedResFolders = files(resourcesDir).builtBy(currentBundleTask)
-    currentBundleTask.ext.generatedAssetsFolders = files(jsBundleDir).builtBy(currentBundleTask)
+gradle.projectsEvaluated {
+    android.buildTypes.all { buildType ->
+        def buildNameCapitalized = "${buildType.name.capitalize()}"
+        def bundlePath = "${buildDir}/intermediates/bundles/${buildType.name}"
 
-    variant.registerGeneratedResFolders(currentBundleTask.generatedResFolders)
-    variant.mergeResources.dependsOn(currentBundleTask)
-
-    def assetsDir = variant.mergeAssets.outputDir
-
-    variant.mergeAssets.doLast {
-        // Bundle fonts
+        // Bundle fonts in react-native-vector-icons.
         //
-        copy {
+
+        def currentFontTask = tasks.create(
+                name: "copy${buildNameCapitalized}Fonts",
+                type: Copy) {
             from("${projectDir}/../../fonts/jitsi.ttf")
-            into("${assetsDir}/fonts")
+            from("${projectDir}/../../node_modules/react-native-vector-icons/Fonts/")
+            into("${bundlePath}/assets/fonts")
         }
 
-        // Bundle sounds
+        currentFontTask.dependsOn("merge${buildNameCapitalized}Resources")
+        currentFontTask.dependsOn("merge${buildNameCapitalized}Assets")
+
+        runBefore("processArmeabi-v7a${buildNameCapitalized}Resources", currentFontTask)
+        runBefore("processX86${buildNameCapitalized}Resources", currentFontTask)
+        runBefore("processUniversal${buildNameCapitalized}Resources", currentFontTask)
+        runBefore("process${buildNameCapitalized}Resources", currentFontTask)
+
+        // Bundle JavaScript and React resources.
+        // (adapted from react-native/react.gradle)
         //
-        copy {
-            from("${projectDir}/../../sounds/joined.wav")
-            from("${projectDir}/../../sounds/left.wav")
-            from("${projectDir}/../../sounds/outgoingRinging.wav")
-            from("${projectDir}/../../sounds/outgoingStart.wav")
-            from("${projectDir}/../../sounds/recordingOn.mp3")
-            from("${projectDir}/../../sounds/recordingOff.mp3")
-            from("${projectDir}/../../sounds/rejected.wav")
-            into("${assetsDir}/sounds")
+
+        // React JS bundle directories
+        def jsBundleDir = file("${bundlePath}/assets")
+        def resourcesDir = file("${bundlePath}/res/merged")
+        def jsBundleFile = file("${jsBundleDir}/index.android.bundle")
+
+        // Bundle task name for variant.
+        def bundleJsAndAssetsTaskName = "bundle${buildNameCapitalized}JsAndAssets"
+
+        def currentBundleTask = tasks.create(
+                name: bundleJsAndAssetsTaskName,
+                type: Exec) {
+            // Set up inputs and outputs so gradle can cache the result.
+            def reactRoot = file("${projectDir}/../../")
+            inputs.files fileTree(dir: reactRoot, excludes: ['android/**', 'ios/**'])
+            outputs.dir jsBundleDir
+            outputs.dir resourcesDir
+
+            // Set up the call to the react-native cli.
+            workingDir reactRoot
+
+            // Create JS bundle
+            def devEnabled = !buildNameCapitalized.toLowerCase().contains('release')
+            commandLine(
+                'node',
+                'node_modules/react-native/local-cli/cli.js',
+                'bundle',
+                '--assets-dest', resourcesDir,
+                '--bundle-output', jsBundleFile,
+                '--dev', "${devEnabled}",
+                '--entry-file', 'index.android.js',
+                '--platform', 'android',
+                '--reset-cache')
+
+            // Disable bundling on dev builds
+            enabled !devEnabled
         }
 
-        // Copy React assets
-        //
-        if (currentBundleTask.enabled) {
-            copy {
-                from(jsBundleDir)
-                into(assetsDir)
-            }
-        }
-    }
+        // Hook bundle${productFlavor}${buildType}JsAndAssets into the android build process
+        currentBundleTask.dependsOn("merge${buildNameCapitalized}Resources")
+        currentBundleTask.dependsOn("merge${buildNameCapitalized}Assets")
 
-    variant.mergeResources.doLast {
-        // Copy React resources
-        //
-        if (currentBundleTask.enabled) {
-            copy {
-                from(resourcesDir)
-                into(variant.mergeResources.outputDir)
-            }
-        }
+        runBefore("processArmeabi-v7a${buildNameCapitalized}Resources", currentBundleTask)
+        runBefore("processX86${buildNameCapitalized}Resources", currentBundleTask)
+        runBefore("processUniversal${buildNameCapitalized}Resources", currentBundleTask)
+        runBefore("process${buildNameCapitalized}Resources", currentBundleTask)
     }
 }
 
-
 publishing {
     publications {
         aarArchive(MavenPublication) {

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

@@ -16,9 +16,7 @@ import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
 
-class AndroidSettingsModule
-    extends ReactContextBaseJavaModule {
-
+class AndroidSettingsModule extends ReactContextBaseJavaModule {
     public AndroidSettingsModule(ReactApplicationContext reactContext) {
         super(reactContext);
     }

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

@@ -1,19 +1,3 @@
-/*
- * 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;
@@ -27,9 +11,7 @@ import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import java.util.HashMap;
 import java.util.Map;
 
-class AppInfoModule
-    extends ReactContextBaseJavaModule {
-
+class AppInfoModule extends ReactContextBaseJavaModule {
     public AppInfoModule(ReactApplicationContext reactContext) {
         super(reactContext);
     }

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

@@ -25,6 +25,8 @@ import android.content.pm.PackageManager;
 import android.media.AudioDeviceInfo;
 import android.media.AudioManager;
 import android.os.Build;
+import android.os.Handler;
+import android.os.Looper;
 import android.util.Log;
 
 import com.facebook.react.bridge.Arguments;
@@ -39,8 +41,6 @@ import java.util.HashMap;
 import java.util.HashSet;
 import java.util.Map;
 import java.util.Set;
-import java.util.concurrent.ExecutorService;
-import java.util.concurrent.Executors;
 
 /**
  * Module implementing a simple API to select the appropriate audio device for a
@@ -57,10 +57,7 @@ import java.util.concurrent.Executors;
  * Before a call has started and after it has ended the
  * {@code AudioModeModule.DEFAULT} mode should be used.
  */
-class AudioModeModule
-    extends ReactContextBaseJavaModule
-    implements AudioManager.OnAudioFocusChangeListener {
-
+class AudioModeModule extends ReactContextBaseJavaModule {
     /**
      * Constants representing the audio mode.
      * - DEFAULT: Used before and after every call. It represents the default
@@ -75,20 +72,13 @@ class AudioModeModule
     private static final int VIDEO_CALL = 2;
 
     /**
-     * Constant defining the action for plugging in a headset. This is used on
-     * our device detection system for API < 23.
+     *
      */
     private static final String ACTION_HEADSET_PLUG
         = (Build.VERSION.SDK_INT >= 21)
             ? AudioManager.ACTION_HEADSET_PLUG
             : Intent.ACTION_HEADSET_PLUG;
 
-    /**
-     * Constant defining a USB headset. Only available on API level >= 26.
-     * The value of: AudioDeviceInfo.TYPE_USB_HEADSET
-     */
-    private static final int TYPE_USB_HEADSET = 22;
-
     /**
      * The name of {@code AudioModeModule} to be used in the React Native
      * bridge.
@@ -100,11 +90,6 @@ class AudioModeModule
      */
     static final String TAG = MODULE_NAME;
 
-    /**
-     * Indicator that we have lost audio focus.
-     */
-    private boolean audioFocusLost = false;
-
     /**
      * {@link AudioManager} instance used to interact with the Android audio
      * subsystem.
@@ -118,11 +103,10 @@ class AudioModeModule
     private BluetoothHeadsetMonitor bluetoothHeadsetMonitor;
 
     /**
-     * {@link ExecutorService} for running all audio operations on a dedicated
-     * thread.
+     * {@link Handler} for running all operations on the main thread.
      */
-    private static final ExecutorService executor
-        = Executors.newSingleThreadExecutor();
+    private final Handler mainThreadHandler
+        = new Handler(Looper.getMainLooper());
 
     /**
      * {@link Runnable} for running audio device detection the main thread.
@@ -149,7 +133,6 @@ class AudioModeModule
                     break;
                 case AudioDeviceInfo.TYPE_WIRED_HEADPHONES:
                 case AudioDeviceInfo.TYPE_WIRED_HEADSET:
-                case TYPE_USB_HEADSET:
                     devices.add(DEVICE_HEADPHONES);
                     break;
                 }
@@ -229,7 +212,7 @@ class AudioModeModule
 
         // Do an initial detection on Android >= M.
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
-            runInAudioThread(onAudioDeviceChangeRunner);
+            mainThreadHandler.post(onAudioDeviceChangeRunner);
         } else {
             // On Android < M, detect if we have an earpiece.
             PackageManager pm = reactContext.getPackageManager();
@@ -269,7 +252,7 @@ class AudioModeModule
      */
     @ReactMethod
     public void getAudioDevices(final Promise promise) {
-        runInAudioThread(new Runnable() {
+        mainThreadHandler.post(new Runnable() {
             @Override
             public void run() {
                 WritableMap map = Arguments.createMap();
@@ -306,7 +289,7 @@ class AudioModeModule
      * Only used on Android >= M.
      */
     void onAudioDeviceChange() {
-        runInAudioThread(onAudioDeviceChangeRunner);
+        mainThreadHandler.post(onAudioDeviceChangeRunner);
     }
 
     /**
@@ -334,7 +317,7 @@ class AudioModeModule
      * Only used on Android < M.
      */
     void onHeadsetDeviceChange() {
-        runInAudioThread(new Runnable() {
+        mainThreadHandler.post(new Runnable() {
             @Override
             public void run() {
                 // XXX: isWiredHeadsetOn is not deprecated when used just for
@@ -354,44 +337,6 @@ class AudioModeModule
         });
     }
 
-    /**
-     * {@link AudioManager.OnAudioFocusChangeListener} interface method. Called
-     * when the audio focus of the system is updated.
-     *
-     * @param focusChange - The type of focus change.
-     */
-    @Override
-    public void onAudioFocusChange(int focusChange) {
-        switch (focusChange) {
-        case AudioManager.AUDIOFOCUS_GAIN: {
-            Log.d(TAG, "Audio focus gained");
-            // Some other application potentially stole our audio focus
-            // temporarily. Restore our mode.
-            if (audioFocusLost) {
-                updateAudioRoute(mode);
-            }
-            audioFocusLost = false;
-            break;
-        }
-        case AudioManager.AUDIOFOCUS_LOSS:
-        case AudioManager.AUDIOFOCUS_LOSS_TRANSIENT:
-        case AudioManager.AUDIOFOCUS_LOSS_TRANSIENT_CAN_DUCK: {
-            Log.d(TAG, "Audio focus lost");
-            audioFocusLost = true;
-            break;
-        }
-
-        }
-    }
-
-    /**
-     * Helper function to run operations on a dedicated thread.
-     * @param runnable
-     */
-    public void runInAudioThread(Runnable runnable) {
-        executor.execute(runnable);
-    }
-
     /**
      * Sets the user selected audio device as the active audio device.
      *
@@ -399,7 +344,7 @@ class AudioModeModule
      */
     @ReactMethod
     public void setAudioDevice(final String device) {
-        runInAudioThread(new Runnable() {
+        mainThreadHandler.post(new Runnable() {
             @Override
             public void run() {
                 if (!availableDevices.contains(device)) {
@@ -470,7 +415,7 @@ class AudioModeModule
                 }
             }
         };
-        runInAudioThread(r);
+        mainThreadHandler.post(r);
     }
 
     /**
@@ -542,9 +487,8 @@ class AudioModeModule
         Log.d(TAG, "Update audio route for mode: " + mode);
 
         if (mode == DEFAULT) {
-            audioFocusLost = false;
             audioManager.setMode(AudioManager.MODE_NORMAL);
-            audioManager.abandonAudioFocus(this);
+            audioManager.abandonAudioFocus(null);
             audioManager.setSpeakerphoneOn(false);
             setBluetoothAudioRoute(false);
             selectedDevice = null;
@@ -557,7 +501,7 @@ class AudioModeModule
         audioManager.setMicrophoneMute(false);
 
         if (audioManager.requestAudioFocus(
-                    this,
+                    null,
                     AudioManager.STREAM_VOICE_CALL,
                     AudioManager.AUDIOFOCUS_GAIN)
                 == AudioManager.AUDIOFOCUS_REQUEST_FAILED) {

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

@@ -1,231 +0,0 @@
-/*
- * Copyright @ 2018-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.app.Activity;
-import android.content.Context;
-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.ReactRootView;
-import com.facebook.react.bridge.ReadableMap;
-import com.rnimmersive.RNImmersiveModule;
-
-import java.lang.reflect.Method;
-import java.util.Collections;
-import java.util.Map;
-import java.util.Set;
-import java.util.UUID;
-import java.util.WeakHashMap;
-
-/**
- * Base class for all views which are backed by a React Native view.
- */
-public abstract class BaseReactView<ListenerT>
-    extends FrameLayout {
-
-    /**
-     * Background color used by {@code BaseReactView} and the React Native root
-     * view.
-     */
-    protected static int BACKGROUND_COLOR = 0xFF111111;
-
-    /**
-     * The collection of all existing {@code BaseReactView}s. Used to find the
-     * {@code BaseReactView} when delivering events coming from
-     * {@link ExternalAPIModule}.
-     */
-    static final Set<BaseReactView> views
-        = Collections.newSetFromMap(new WeakHashMap<BaseReactView, Boolean>());
-
-    /**
-     * Finds a {@code BaseReactView} which matches a specific external API
-     * scope.
-     *
-     * @param externalAPIScope - The external API scope associated with the
-     * {@code BaseReactView} to find.
-     * @return The {@code BaseReactView}, if any, associated with the specified
-     * {@code externalAPIScope}; otherwise, {@code null}.
-     */
-    public static BaseReactView findViewByExternalAPIScope(
-            String externalAPIScope) {
-        synchronized (views) {
-            for (BaseReactView view : views) {
-                if (view.externalAPIScope.equals(externalAPIScope)) {
-                    return view;
-                }
-            }
-        }
-
-        return null;
-    }
-
-    /**
-     * The unique identifier of this {@code BaseReactView} within the process
-     * for the purposes of {@link ExternalAPIModule}. The name scope was
-     * inspired by postis which we use on Web for the similar purposes of the
-     * iframe-based external API.
-     */
-    protected final String externalAPIScope;
-
-    /**
-     * The listener (e.g. {@link JitsiMeetViewListener}) instance for reporting
-     * events occurring in Jitsi Meet.
-     */
-    private ListenerT listener;
-
-    /**
-     * React Native root view.
-     */
-    private ReactRootView reactRootView;
-
-    public BaseReactView(@NonNull Context context) {
-        super(context);
-
-        setBackgroundColor(BACKGROUND_COLOR);
-
-        ReactInstanceManagerHolder.initReactInstanceManager(
-            ((Activity) context).getApplication());
-
-        // Hook this BaseReactView into ExternalAPI.
-        externalAPIScope = UUID.randomUUID().toString();
-        synchronized (views) {
-            views.add(this);
-        }
-    }
-
-    /**
-     * Creates the {@code ReactRootView} for the given app name with the given
-     * props. Once created it's set as the view of this {@code FrameLayout}.
-     *
-     * @param appName - The name of the "app" (in React Native terms) to load.
-     * @param props - The React Component props to pass to the app.
-     */
-    public void createReactRootView(String appName, @Nullable Bundle props) {
-        if (props == null) {
-            props = new Bundle();
-        }
-
-        props.putString("externalAPIScope", externalAPIScope);
-
-        if (reactRootView == null) {
-            reactRootView = new ReactRootView(getContext());
-            reactRootView.startReactApplication(
-                ReactInstanceManagerHolder.getReactInstanceManager(),
-                appName,
-                props);
-            reactRootView.setBackgroundColor(BACKGROUND_COLOR);
-            addView(reactRootView);
-        } else {
-            reactRootView.setAppProperties(props);
-        }
-    }
-
-    /**
-     * Releases the React resources (specifically the {@link ReactRootView})
-     * associated with this view.
-     *
-     * MUST be called when the {@link Activity} holding this view is destroyed,
-     * typically in the {@code onDestroy} method.
-     */
-    public void dispose() {
-        if (reactRootView != null) {
-            removeView(reactRootView);
-            reactRootView.unmountReactApplication();
-            reactRootView = null;
-        }
-    }
-
-    /**
-     * Gets the listener set on this {@code BaseReactView}.
-     *
-     * @return The listener set on this {@code BaseReactView}.
-     */
-    public ListenerT getListener() {
-        return listener;
-    }
-
-    /**
-     * Abstract method called by {@link ExternalAPIModule} when an event is
-     * received for this view.
-     *
-     * @param name - The name of the event.
-     * @param data - The details of the event associated with/specific to the
-     * specified {@code name}.
-     */
-    public abstract void onExternalAPIEvent(String name, ReadableMap data);
-
-    protected void onExternalAPIEvent(
-            Map<String, Method> listenerMethods,
-            String name, ReadableMap data) {
-        ListenerT listener = getListener();
-
-        if (listener != null) {
-            ListenerUtils.runListenerMethod(
-                listener, listenerMethods, name, data);
-        }
-    }
-
-    /**
-     * 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(
-                    "RNImmersiveModule",
-                    "emitImmersiveStateChangeEvent() failed!",
-                    re);
-            }
-        }
-    }
-
-    /**
-     * Sets a specific listener on this {@code BaseReactView}.
-     *
-     * @param listener The listener to set on this {@code BaseReactView}.
-     */
-    public void setListener(ListenerT listener) {
-        this.listener = listener;
-    }
-}

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

@@ -24,6 +24,8 @@ import android.content.Context;
 import android.content.Intent;
 import android.content.IntentFilter;
 import android.media.AudioManager;
+import android.os.Handler;
+import android.os.Looper;
 import android.util.Log;
 
 /**
@@ -53,6 +55,12 @@ class BluetoothHeadsetMonitor {
      */
     private boolean headsetAvailable = false;
 
+    /**
+     * {@link Handler} for running all operations on the main thread.
+     */
+    private final Handler mainThreadHandler
+        = new Handler(Looper.getMainLooper());
+
     /**
      * Helper for running Bluetooth operations on the main thread.
      */
@@ -192,6 +200,6 @@ class BluetoothHeadsetMonitor {
      * {@link AudioModeModule#onAudioDeviceChange()} callback.
      */
     private void updateDevices() {
-        audioModeModule.runInAudioThread(updateDevicesRunnable);
+        mainThreadHandler.post(updateDevicesRunnable);
     }
 }

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

@@ -16,24 +16,83 @@
 
 package org.jitsi.meet.sdk;
 
-import android.util.Log;
-
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.bridge.ReadableMapKeySetIterator;
+
+import org.jitsi.meet.sdk.JitsiMeetView;
+import org.jitsi.meet.sdk.JitsiMeetViewListener;
+
+import java.lang.reflect.InvocationTargetException;
+import java.lang.reflect.Method;
+import java.lang.reflect.Modifier;
+import java.util.HashMap;
+import java.util.Locale;
+import java.util.Map;
+import java.util.regex.Pattern;
 
 /**
- * Module implementing an API for sending events from JavaScript to native code.
+ * Module implementing a simple API to enable a proximity sensor-controlled
+ * wake lock. When the lock is held, if the proximity sensor detects a nearby
+ * object it will dim the screen and disable touch controls. The functionality
+ * is used with the conference audio-only mode.
  */
-class ExternalAPIModule
-    extends ReactContextBaseJavaModule {
+class ExternalAPIModule extends ReactContextBaseJavaModule {
+    /**
+     * The {@code Method}s of {@code JitsiMeetViewListener} by event name i.e.
+     * redux action types.
+     */
+    private static final Map<String, Method> JITSI_MEET_VIEW_LISTENER_METHODS
+        = new HashMap<>();
 
-    private static final String TAG = ExternalAPIModule.class.getSimpleName();
+    static {
+        // Figure out the mapping between the JitsiMeetViewListener methods
+        // and the events i.e. redux action types.
+        Pattern onPattern = Pattern.compile("^on[A-Z]+");
+        Pattern camelcasePattern = Pattern.compile("([a-z0-9]+)([A-Z0-9]+)");
+
+        for (Method method : JitsiMeetViewListener.class.getDeclaredMethods()) {
+            // * The method must be public (because it is declared by an
+            //   interface).
+            // * The method must be/return void.
+            if (!Modifier.isPublic(method.getModifiers())
+                    || !Void.TYPE.equals(method.getReturnType())) {
+                continue;
+            }
+
+            // * The method name must start with "on" followed by a
+            //   capital/uppercase letter (in agreement with the camelcase
+            //   coding style customary to Java in general and the projects of
+            //   the Jitsi community in particular).
+            String name = method.getName();
+
+            if (!onPattern.matcher(name).find()) {
+                continue;
+            }
+
+            // * The method must accept/have exactly 1 parameter of a type
+            //   assignable from HashMap.
+            Class<?>[] parameterTypes = method.getParameterTypes();
+
+            if (parameterTypes.length != 1
+                    || !parameterTypes[0].isAssignableFrom(HashMap.class)) {
+                continue;
+            }
+
+            // Convert the method name to an event name.
+            name
+                = camelcasePattern.matcher(name.substring(2))
+                    .replaceAll("$1_$2")
+                    .toUpperCase(Locale.ROOT);
+            JITSI_MEET_VIEW_LISTENER_METHODS.put(name, method);
+        }
+    }
 
     /**
      * Initializes a new module instance. There shall be a single instance of
-     * this module throughout the lifetime of the app.
+     * this module throughout the lifetime of the application.
      *
      * @param reactContext the {@link ReactApplicationContext} where this module
      * is created.
@@ -53,8 +112,7 @@ class ExternalAPIModule
     }
 
     /**
-     * Dispatches an event that occurred on the JavaScript side of the SDK to
-     * the specified {@link BaseReactView}'s listener.
+     * Dispatches an event that occurred on JavaScript to the view's listener.
      *
      * @param name The name of the event.
      * @param data The details/specifics of the event to send determined
@@ -65,15 +123,50 @@ class ExternalAPIModule
     public void sendEvent(String name, ReadableMap data, String scope) {
         // The JavaScript App needs to provide uniquely identifying information
         // to the native ExternalAPI module so that the latter may match the
-        // former to the native BaseReactView which hosts it.
-        BaseReactView view = BaseReactView.findViewByExternalAPIScope(scope);
+        // former to the native JitsiMeetView which hosts it.
+        JitsiMeetView view = JitsiMeetView.findViewByExternalAPIScope(scope);
 
-        if (view != null) {
+        if (view == null) {
+            return;
+        }
+
+        JitsiMeetViewListener listener = view.getListener();
+
+        if (listener == null) {
+            return;
+        }
+
+        Method method = JITSI_MEET_VIEW_LISTENER_METHODS.get(name);
+
+        if (method != null) {
             try {
-                view.onExternalAPIEvent(name, data);
-            } catch(Exception e) {
-                Log.e(TAG, "onExternalAPIEvent: error sending event", e);
+                method.invoke(listener, toHashMap(data));
+            } catch (IllegalAccessException | InvocationTargetException e) {
+                throw new RuntimeException(e);
             }
         }
     }
+
+    /**
+     * Initializes a new {@code HashMap} instance with the key-value
+     * associations of a specific {@code ReadableMap}.
+     *
+     * @param readableMap the {@code ReadableMap} specifying the key-value
+     * associations with which the new {@code HashMap} instance is to be
+     * initialized.
+     * @return a new {@code HashMap} instance initialized with the key-value
+     * associations of the specified {@code readableMap}.
+     */
+    private HashMap<String, Object> toHashMap(ReadableMap readableMap) {
+        HashMap<String, Object> hashMap = new HashMap<>();
+
+        for (ReadableMapKeySetIterator i = readableMap.keySetIterator();
+                i.hasNextKey();) {
+            String key = i.nextKey();
+
+            hashMap.put(key, readableMap.getString(key));
+        }
+
+        return hashMap;
+    }
 }

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

@@ -17,6 +17,7 @@
 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;
@@ -27,7 +28,6 @@ import android.view.KeyEvent;
 
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
-import com.facebook.react.modules.core.PermissionListener;
 
 import java.net.URL;
 
@@ -42,9 +42,7 @@ import java.net.URL;
  * hooked to the React Native subsystem via proxy calls through the
  * {@code JitsiMeetView} static methods.
  */
-public class JitsiMeetActivity
-    extends AppCompatActivity implements JitsiMeetActivityInterface {
-
+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.
@@ -98,6 +96,25 @@ public class JitsiMeetActivity
         return view == null ? defaultURL : view.getDefaultURL();
     }
 
+    /**
+     *
+     * @see JitsiMeetView#getPictureInPictureEnabled()
+     */
+    public boolean getPictureInPictureEnabled() {
+        return
+            view == null
+                ? pictureInPictureEnabled
+                : view.getPictureInPictureEnabled();
+    }
+
+    /**
+     *
+     * @see JitsiMeetView#getWelcomePageEnabled()
+     */
+    public boolean getWelcomePageEnabled() {
+        return view == null ? welcomePageEnabled : view.getWelcomePageEnabled();
+    }
+
     /**
      * Initializes the {@link #view} of this {@code JitsiMeetActivity} with a
      * new {@link JitsiMeetView} instance.
@@ -106,11 +123,6 @@ public class JitsiMeetActivity
         JitsiMeetView view = initializeView();
 
         if (view != null) {
-            // XXX Allow extenders who override initializeView() to configure
-            // the view before the first loadURL(). Probably works around a
-            // problem related to ReactRootView#setAppProperties().
-            view.loadURL(null);
-
             this.view = view;
             setContentView(this.view);
         }
@@ -133,28 +145,11 @@ public class JitsiMeetActivity
         }
         view.setWelcomePageEnabled(welcomePageEnabled);
 
+        view.loadURL(null);
+
         return view;
     }
 
-    /**
-     *
-     * @see JitsiMeetView#isPictureInPictureEnabled()
-     */
-    public boolean isPictureInPictureEnabled() {
-        return
-            view == null
-                ? pictureInPictureEnabled
-                : view.isPictureInPictureEnabled();
-    }
-
-    /**
-     *
-     * @see JitsiMeetView#isWelcomePageEnabled()
-     */
-    public boolean isWelcomePageEnabled() {
-        return view == null ? welcomePageEnabled : view.isWelcomePageEnabled();
-    }
-
     /**
      * Loads the given URL and displays the conference. If the specified URL is
      * null, the welcome page is displayed instead.
@@ -175,17 +170,12 @@ public class JitsiMeetActivity
             if (Settings.canDrawOverlays(this)) {
                 initializeContentView();
             }
-
-            return;
         }
-
-        ReactActivityLifecycleCallbacks.onActivityResult(
-                this, requestCode, resultCode, data);
     }
 
     @Override
     public void onBackPressed() {
-        if (!ReactActivityLifecycleCallbacks.onBackPressed()) {
+        if (!JitsiMeetView.onBackPressed()) {
             // JitsiMeetView didn't handle the invocation of the back button.
             // Generally, an Activity extender would very likely want to invoke
             // Activity#onBackPressed(). For the sake of consistency with
@@ -228,7 +218,7 @@ public class JitsiMeetActivity
             view = null;
         }
 
-        ReactActivityLifecycleCallbacks.onHostDestroy(this);
+        JitsiMeetView.onHostDestroy(this);
     }
 
     // ReactAndroid/src/main/java/com/facebook/react/ReactActivity.java
@@ -239,7 +229,7 @@ public class JitsiMeetActivity
         if (!super.onKeyUp(keyCode, event)
                 && BuildConfig.DEBUG
                 && (reactInstanceManager
-                        = ReactInstanceManagerHolder.getReactInstanceManager())
+                        = JitsiMeetView.getReactInstanceManager())
                     != null
                 && keyCode == KeyEvent.KEYCODE_MENU) {
             reactInstanceManager.showDevOptionsDialog();
@@ -250,29 +240,7 @@ public class JitsiMeetActivity
 
     @Override
     public void onNewIntent(Intent intent) {
-        // XXX At least twice we received bug reports about malfunctioning
-        // loadURL in the Jitsi Meet SDK while the Jitsi Meet app seemed to
-        // functioning as expected in our testing. But that was to be expected
-        // because the app does not exercise loadURL. In order to increase the
-        // test coverage of loadURL, channel deep linking through loadURL.
-        Uri uri;
-
-        if (Intent.ACTION_VIEW.equals(intent.getAction())
-                && (uri = intent.getData()) != null
-                && JitsiMeetView.loadURLStringInViews(uri.toString())) {
-            return;
-        }
-
-        ReactActivityLifecycleCallbacks.onNewIntent(intent);
-    }
-
-    // https://developer.android.com/reference/android/support/v4/app/ActivityCompat.OnRequestPermissionsResultCallback
-    @Override
-    public void onRequestPermissionsResult(
-            final int requestCode,
-            final String[] permissions,
-            final int[] grantResults) {
-        ReactActivityLifecycleCallbacks.onRequestPermissionsResult(requestCode, permissions, grantResults);
+        JitsiMeetView.onNewIntent(intent);
     }
 
     @Override
@@ -280,30 +248,20 @@ public class JitsiMeetActivity
         super.onResume();
 
         defaultBackButtonImpl = new DefaultHardwareBackBtnHandlerImpl(this);
-        ReactActivityLifecycleCallbacks.onHostResume(this, defaultBackButtonImpl);
+        JitsiMeetView.onHostResume(this, defaultBackButtonImpl);
     }
 
     @Override
     public void onStop() {
         super.onStop();
 
-        ReactActivityLifecycleCallbacks.onHostPause(this);
+        JitsiMeetView.onHostPause(this);
         defaultBackButtonImpl = null;
     }
 
     @Override
     protected void onUserLeaveHint() {
-        if (view != null) {
-            view.enterPictureInPicture();
-        }
-    }
-
-    /**
-     * Implementation of the {@code PermissionAwareActivity} interface.
-     */
-    @Override
-    public void requestPermissions(String[] permissions, int requestCode, PermissionListener listener) {
-        ReactActivityLifecycleCallbacks.requestPermissions(this, permissions, requestCode, listener);
+        JitsiMeetView.onUserLeaveHint();
     }
 
     /**

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

@@ -1,15 +0,0 @@
-package org.jitsi.meet.sdk;
-
-import android.support.v4.app.ActivityCompat;
-
-import com.facebook.react.modules.core.PermissionAwareActivity;
-
-/**
- * This interface serves as the umbrella interface that applications not using
- * {@code JitsiMeetActivity} must implement in order to ensure full
- * functionality.
- */
-public interface JitsiMeetActivityInterface
-    extends ActivityCompat.OnRequestPermissionsResultCallback,
-            PermissionAwareActivity {
-}

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

@@ -16,35 +16,125 @@
 
 package org.jitsi.meet.sdk;
 
+import android.app.Activity;
+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.bridge.ReadableMap;
+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 org.jitsi.meet.sdk.invite.InviteController;
-
-import java.lang.reflect.Method;
 import java.net.URL;
-import java.util.Map;
-
-public class JitsiMeetView
-    extends BaseReactView<JitsiMeetViewListener> {
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.List;
+import java.util.Set;
+import java.util.UUID;
+import java.util.WeakHashMap;
 
+public class JitsiMeetView extends FrameLayout {
     /**
-     * The {@code Method}s of {@code JitsiMeetViewListener} by event name i.e.
-     * redux action types.
+     * Background color used by {@code JitsiMeetView} and the React Native root
+     * view.
      */
-    private static final Map<String, Method> LISTENER_METHODS
-        = ListenerUtils.mapListenerMethods(JitsiMeetViewListener.class);
+    private static final int BACKGROUND_COLOR = 0xFF111111;
 
     /**
      * The {@link Log} tag which identifies the source of the log messages of
      * {@code JitsiMeetView}.
      */
-    private static final String TAG = JitsiMeetView.class.getSimpleName();
+    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.
+     */
+    private static ReactInstanceManager reactInstanceManager;
+
+    private static final Set<JitsiMeetView> views
+        = Collections.newSetFromMap(new WeakHashMap<JitsiMeetView, Boolean>());
+
+    private static List<NativeModule> createNativeModules(
+            ReactApplicationContext reactContext) {
+        return Arrays.<NativeModule>asList(
+            new AndroidSettingsModule(reactContext),
+            new AppInfoModule(reactContext),
+            new AudioModeModule(reactContext),
+            new ExternalAPIModule(reactContext),
+            new PictureInPictureModule(reactContext),
+            new ProximityModule(reactContext),
+            new WiFiStatsModule(reactContext)
+        );
+    }
+
+    public static JitsiMeetView findViewByExternalAPIScope(
+            String externalAPIScope) {
+        synchronized (views) {
+            for (JitsiMeetView view : views) {
+                if (view.externalAPIScope.equals(externalAPIScope)) {
+                    return view;
+                }
+            }
+        }
+
+        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
+     * time. All {@code ReactRootView} instances will be tied to the one and
+     * only {@code ReactInstanceManager}.
+     *
+     * @param application {@code Application} instance which is running.
+     */
+    private static void initReactInstanceManager(Application application) {
+        reactInstanceManager
+            = ReactInstanceManager.builder()
+                .setApplication(application)
+                .setBundleAssetName("index.android.bundle")
+                .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(
+                            ReactApplicationContext reactContext) {
+                        return JitsiMeetView.createNativeModules(reactContext);
+                    }
+                })
+                .setUseDeveloperSupport(BuildConfig.DEBUG)
+                .setInitialLifecycleState(LifecycleState.RESUMED)
+                .build();
+    }
 
     /**
      * Loads a specific URL {@code String} in all existing
@@ -56,19 +146,147 @@ public class JitsiMeetView
      * at least one {@code JitsiMeetView}, then {@code true}; otherwise,
      * {@code false}.
      */
-    public static boolean loadURLStringInViews(String urlString) {
-        boolean loaded = false;
-
+    private static boolean loadURLStringInViews(String urlString) {
         synchronized (views) {
-            for (BaseReactView view : views) {
-                if (view instanceof JitsiMeetView) {
-                    ((JitsiMeetView)view).loadURLString(urlString);
-                    loaded = true;
+            if (!views.isEmpty()) {
+                for (JitsiMeetView view : views) {
+                    view.loadURLString(urlString);
                 }
+
+                return true;
             }
         }
 
-        return loaded;
+        return false;
+    }
+
+    /**
+     * Activity lifecycle method which should be called from
+     * {@code Activity.onBackPressed} so we can do the required internal
+     * processing.
+     *
+     * @return {@code true} if the back-press was processed; {@code false},
+     * otherwise. If {@code false}, the application should call the parent's
+     * implementation.
+     */
+    public static boolean onBackPressed() {
+        if (reactInstanceManager == null) {
+            return false;
+        } else {
+            reactInstanceManager.onBackPressed();
+            return true;
+        }
+    }
+
+    /**
+     * Activity lifecycle method which should be called from
+     * {@code Activity.onDestroy} so we can do the required internal
+     * processing.
+     *
+     * @param activity {@code Activity} being destroyed.
+     */
+    public static void onHostDestroy(Activity activity) {
+        if (reactInstanceManager != null) {
+            reactInstanceManager.onHostDestroy(activity);
+        }
+    }
+
+    /**
+     * Activity lifecycle method which should be called from
+     * {@code Activity.onPause} so we can do the required internal processing.
+     *
+     * @param activity {@code Activity} being paused.
+     */
+    public static void onHostPause(Activity activity) {
+        if (reactInstanceManager != null) {
+            reactInstanceManager.onHostPause(activity);
+        }
+    }
+
+    /**
+     * Activity lifecycle method which should be called from
+     * {@code Activity.onResume} so we can do the required internal processing.
+     *
+     * @param activity {@code Activity} being resumed.
+     */
+    public static void onHostResume(Activity activity) {
+        onHostResume(activity, new DefaultHardwareBackBtnHandlerImpl(activity));
+    }
+
+    /**
+     * Activity lifecycle method which should be called from
+     * {@code Activity.onResume} so we can do the required internal processing.
+     *
+     * @param activity {@code Activity} being resumed.
+     * @param defaultBackButtonImpl a {@code DefaultHardwareBackBtnHandler} to
+     * handle invoking the back button if no {@code JitsiMeetView} handles it.
+     */
+    public static void onHostResume(
+            Activity activity,
+            DefaultHardwareBackBtnHandler defaultBackButtonImpl) {
+        if (reactInstanceManager != null) {
+            reactInstanceManager.onHostResume(activity, defaultBackButtonImpl);
+        }
+    }
+
+    /**
+     * Activity lifecycle method which should be called from
+     * {@code Activity.onNewIntent} so we can do the required internal
+     * processing. Note that this is only needed if the activity's "launchMode"
+     * was set to "singleTask". This is required for deep linking to work once
+     * the application is already running.
+     *
+     * @param intent {@code Intent} instance which was received.
+     */
+    public static void onNewIntent(Intent intent) {
+        // XXX At least twice we received bug reports about malfunctioning
+        // loadURL in the Jitsi Meet SDK while the Jitsi Meet app seemed to
+        // functioning as expected in our testing. But that was to be expected
+        // because the app does not exercise loadURL. In order to increase the
+        // test coverage of loadURL, channel deep linking through loadURL.
+        Uri uri;
+
+        if (Intent.ACTION_VIEW.equals(intent.getAction())
+                && (uri = intent.getData()) != null
+                && loadURLStringInViews(uri.toString())) {
+            return;
+        }
+
+        if (reactInstanceManager != null) {
+            reactInstanceManager.onNewIntent(intent);
+        }
+    }
+
+    /**
+     * 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);
+            }
+        }
     }
 
     /**
@@ -79,10 +297,18 @@ public class JitsiMeetView
     private URL defaultURL;
 
     /**
-     * The entry point into the invite feature of Jitsi Meet. The Java
-     * counterpart of the JavaScript {@code InviteButton}.
+     * The unique identifier of this {@code JitsiMeetView} within the process
+     * for the purposes of {@link ExternalAPI}. The name scope was inspired by
+     * postis which we use on Web for the similar purposes of the iframe-based
+     * external API.
      */
-    private final InviteController inviteController;
+    private final String externalAPIScope;
+
+    /**
+     * {@link JitsiMeetViewListener} instance for reporting events occurring in
+     * Jitsi Meet.
+     */
+    private JitsiMeetViewListener listener;
 
     /**
      * Whether Picture-in-Picture is enabled. If {@code null}, defaults to
@@ -92,11 +318,9 @@ public class JitsiMeetView
     private Boolean pictureInPictureEnabled;
 
     /**
-     * The URL of the current conference.
+     * React Native root view.
      */
-    // XXX Currently, one thread writes and one thread reads, so it should be
-    // fine to have this field volatile without additional synchronization.
-    private volatile String url;
+    private ReactRootView reactRootView;
 
     /**
      * Whether the Welcome page is enabled.
@@ -106,33 +330,31 @@ public class JitsiMeetView
     public JitsiMeetView(@NonNull Context context) {
         super(context);
 
-        // The entry point into the invite feature of Jitsi Meet. The Java
-        // counterpart of the JavaScript InviteButton.
-        inviteController = new InviteController(externalAPIScope);
+        setBackgroundColor(BACKGROUND_COLOR);
+
+        if (reactInstanceManager == null) {
+            initReactInstanceManager(((Activity) context).getApplication());
+        }
+
+        // Hook this JitsiMeetView into ExternalAPI.
+        externalAPIScope = UUID.randomUUID().toString();
+        synchronized (views) {
+            views.add(this);
+        }
     }
 
     /**
-     * Enters Picture-In-Picture mode, if possible. This method is designed to
-     * be called from the {@code Activity.onUserLeaveHint} method.
+     * Releases the React resources (specifically the {@link ReactRootView})
+     * associated with this view.
      *
-     * This is currently not mandatory, but if used will provide automatic
-     * handling of the picture in picture mode when user minimizes the app. It
-     * will be probably the most useful in case the app is using the welcome
-     * page.
+     * This method MUST be called when the Activity holding this view is
+     * destroyed, typically in the {@code onDestroy} method.
      */
-    public void enterPictureInPicture() {
-        if (isPictureInPictureEnabled() && getURL() != null) {
-            PictureInPictureModule pipModule
-                = ReactInstanceManagerHolder.getNativeModule(
-                PictureInPictureModule.class);
-
-            if (pipModule != null) {
-                try {
-                    pipModule.enterPictureInPicture();
-                } catch (RuntimeException re) {
-                    Log.e(TAG, "onUserLeaveHint: failed to enter PiP mode", re);
-                }
-            }
+    public void dispose() {
+        if (reactRootView != null) {
+            removeView(reactRootView);
+            reactRootView.unmountReactApplication();
+            reactRootView = null;
         }
     }
 
@@ -141,7 +363,7 @@ public class JitsiMeetView
      * partial URL (e.g. a room name only) is specified to
      * {@link #loadURLString(String)} or {@link #loadURLObject(Bundle)}. If not
      * set or if set to {@code null}, the default built in JavaScript is used:
-     * https://meet.jit.si
+     * {@link https://meet.jit.si}
      *
      * @return The default base {@code URL} or {@code null}.
      */
@@ -150,29 +372,13 @@ public class JitsiMeetView
     }
 
     /**
-     * Gets the {@link InviteController} which represents the entry point into
-     * the invite feature of Jitsi Meet and is the Java counterpart of the
-     * JavaScript {@code InviteButton}.
+     * Gets the {@link JitsiMeetViewListener} set on this {@code JitsiMeetView}.
      *
-     * @return the {@link InviteController} which represents the entry point
-     * into the invite feature of Jitsi Meet and is the Java counterpart of the
-     * JavaScript {@code InviteButton}
+     * @return The {@code JitsiMeetViewListener} set on this
+     * {@code JitsiMeetView}.
      */
-    public InviteController getInviteController() {
-        return inviteController;
-    }
-
-    /**
-     * Gets the URL of the current conference.
-     *
-     * XXX The method is meant for internal purposes only at the time of this
-     * writing because there is no equivalent API on iOS.
-     *
-     * @return the URL {@code String} of the current conference if any;
-     * otherwise, {@code null}.
-     */
-    String getURL() {
-        return url;
+    public JitsiMeetViewListener getListener() {
+        return listener;
     }
 
     /**
@@ -183,11 +389,11 @@ public class JitsiMeetView
      * @return If Picture-in-Picture is enabled, {@code true}; {@code false},
      * otherwise.
      */
-    public boolean isPictureInPictureEnabled() {
+    public boolean getPictureInPictureEnabled() {
         return
             PictureInPictureModule.isPictureInPictureSupported()
                 && (pictureInPictureEnabled == null
-                    || pictureInPictureEnabled);
+                    || pictureInPictureEnabled.booleanValue());
     }
 
     /**
@@ -198,7 +404,7 @@ public class JitsiMeetView
      * @return {@code true} if the Welcome page is enabled; otherwise,
      * {@code false}.
      */
-    public boolean isWelcomePageEnabled() {
+    public boolean getWelcomePageEnabled() {
         return welcomePageEnabled;
     }
 
@@ -232,22 +438,13 @@ public class JitsiMeetView
             props.putString("defaultURL", defaultURL.toString());
         }
 
-        // inviteController
-        InviteController inviteController = getInviteController();
-
-        if (inviteController != null) {
-            props.putBoolean(
-                "addPeopleEnabled",
-                inviteController.isAddPeopleEnabled());
-            props.putBoolean(
-                "dialOutEnabled",
-                inviteController.isDialOutEnabled());
-        }
+        // externalAPIScope
+        props.putString("externalAPIScope", externalAPIScope);
 
         // pictureInPictureEnabled
         props.putBoolean(
             "pictureInPictureEnabled",
-            isPictureInPictureEnabled());
+            getPictureInPictureEnabled());
 
         // url
         if (urlObject != null) {
@@ -268,7 +465,17 @@ public class JitsiMeetView
         // per loadURLObject: invocation.
         props.putLong("timestamp", System.currentTimeMillis());
 
-        createReactRootView("App", props);
+        if (reactRootView == null) {
+            reactRootView = new ReactRootView(getContext());
+            reactRootView.startReactApplication(
+                reactInstanceManager,
+                "App",
+                props);
+            reactRootView.setBackgroundColor(BACKGROUND_COLOR);
+            addView(reactRootView);
+        } else {
+            reactRootView.setAppProperties(props);
+        }
     }
 
     /**
@@ -292,48 +499,40 @@ public class JitsiMeetView
     }
 
     /**
-     * The internal processing for the URL of the current conference set on the
-     * associated {@link JitsiMeetView}.
+     * Called when the window containing this view gains or loses focus.
      *
-     * @param eventName the name of the external API event to be processed
-     * @param eventData the details/specifics of the event to process determined
-     * by/associated with the specified {@code eventName}.
-     */
-    private void maybeSetViewURL(String eventName, ReadableMap eventData) {
-        switch(eventName) {
-        case "CONFERENCE_WILL_JOIN":
-            setURL(eventData.getString("url"));
-            break;
-
-        case "CONFERENCE_FAILED":
-        case "CONFERENCE_WILL_LEAVE":
-        case "LOAD_CONFIG_ERROR":
-            String url = eventData.getString("url");
-
-            if (url != null && url.equals(getURL())) {
-                setURL(null);
-            }
-            break;
-        }
-    }
-
-    /**
-     * Handler for {@link ExternalAPIModule} events.
-     *
-     * @param name The name of the event.
-     * @param data The details/specifics of the event to send determined
-     * by/associated with the specified {@code name}.
+     * @param hasFocus If the window of this view now has focus, {@code true};
+     * otherwise, {@code false}.
      */
     @Override
-    public void onExternalAPIEvent(String name, ReadableMap data) {
-        // XXX The JitsiMeetView property URL was introduced in order to address
-        // an exception in the Picture-in-Picture functionality which arose
-        // because of delays related to bridging between JavaScript and Java. To
-        // reduce these delays do not wait for the call to be transferred to the
-        // UI thread.
-        maybeSetViewURL(name, data);
+    public void onWindowFocusChanged(boolean hasFocus) {
+        super.onWindowFocusChanged(hasFocus);
 
-        onExternalAPIEvent(LISTENER_METHODS, name, data);
+        // 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);
+            }
+        }
     }
 
     /**
@@ -349,6 +548,17 @@ public class JitsiMeetView
         this.defaultURL = defaultURL;
     }
 
+    /**
+     * Sets a specific {@link JitsiMeetViewListener} on this
+     * {@code JitsiMeetView}.
+     *
+     * @param listener The {@code JitsiMeetViewListener} to set on this
+     * {@code JitsiMeetView}.
+     */
+    public void setListener(JitsiMeetViewListener listener) {
+        this.listener = listener;
+    }
+
     /**
      * Sets whether Picture-in-Picture is enabled. Because Picture-in-Picture is
      * natively supported only since certain platform versions, specifying
@@ -358,20 +568,7 @@ public class JitsiMeetView
      * {@code true}; otherwise, {@code false}.
      */
     public void setPictureInPictureEnabled(boolean pictureInPictureEnabled) {
-        this.pictureInPictureEnabled = pictureInPictureEnabled;
-    }
-
-    /**
-     * Sets the URL of the current conference.
-     *
-     * XXX The method is meant for internal purposes only. It does not
-     * {@code loadURL}, it merely remembers the specified URL.
-     *
-     * @param url the URL {@code String} which to be set as the URL of the
-     * current conference.
-     */
-    void setURL(String url) {
-        this.url = url;
+        this.pictureInPictureEnabled = Boolean.valueOf(pictureInPictureEnabled);
     }
 
     /**

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

@@ -22,9 +22,7 @@ import java.util.Map;
  * Implements {@link JitsiMeetViewListener} so apps don't have to add stubs for
  * all methods in the interface if they are only interested in some.
  */
-public abstract class JitsiMeetViewAdapter
-    implements JitsiMeetViewListener {
-
+public abstract class JitsiMeetViewAdapter implements JitsiMeetViewListener {
     @Override
     public void onConferenceFailed(Map<String, Object> data) {
     }

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

@@ -1,166 +0,0 @@
-/*
- * Copyright @ 2018-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 com.facebook.react.bridge.ReadableMap;
-import com.facebook.react.bridge.ReadableMapKeySetIterator;
-import com.facebook.react.bridge.UiThreadUtil;
-
-import java.lang.reflect.InvocationTargetException;
-import java.lang.reflect.Method;
-import java.lang.reflect.Modifier;
-import java.util.HashMap;
-import java.util.Locale;
-import java.util.Map;
-import java.util.regex.Pattern;
-
-/**
- * Utility methods for helping with transforming {@link ExternalAPIModule}
- * events into listener methods. Used with descendants of {@link BaseReactView}.
- */
-public final class ListenerUtils {
-    /**
-     * Extracts the methods defined in a listener and creates a mapping of this
-     * form: event name -> method.
-     *
-     * @param listener - The listener whose methods we want to slurp.
-     * @return A mapping with event names - methods.
-     */
-    public static Map<String, Method> mapListenerMethods(Class listener) {
-        Map<String, Method> methods = new HashMap<>();
-
-        // Figure out the mapping between the listener methods
-        // and the events i.e. redux action types.
-        Pattern onPattern = Pattern.compile("^on[A-Z]+");
-        Pattern camelcasePattern = Pattern.compile("([a-z0-9]+)([A-Z0-9]+)");
-
-        for (Method method : listener.getDeclaredMethods()) {
-            // * The method must be public (because it is declared by an
-            //   interface).
-            // * The method must be/return void.
-            if (!Modifier.isPublic(method.getModifiers())
-                    || !Void.TYPE.equals(method.getReturnType())) {
-                continue;
-            }
-
-            // * The method name must start with "on" followed by a
-            //   capital/uppercase letter (in agreement with the camelcase
-            //   coding style customary to Java in general and the projects of
-            //   the Jitsi community in particular).
-            String name = method.getName();
-
-            if (!onPattern.matcher(name).find()) {
-                continue;
-            }
-
-            // * The method must accept/have exactly 1 parameter of a type
-            //   assignable from HashMap.
-            Class<?>[] parameterTypes = method.getParameterTypes();
-
-            if (parameterTypes.length != 1
-                    || !parameterTypes[0].isAssignableFrom(HashMap.class)) {
-                continue;
-            }
-
-            // Convert the method name to an event name.
-            name
-                = camelcasePattern.matcher(name.substring(2))
-                    .replaceAll("$1_$2")
-                    .toUpperCase(Locale.ROOT);
-            methods.put(name, method);
-        }
-
-        return methods;
-    }
-
-    /**
-     * Executes the right listener method for the given event.
-     * NOTE: This function will run asynchronously on the UI thread.
-     *
-     * @param listener - The listener on which the method will be called.
-     * @param listenerMethods - Mapping with event names and the matching
-     *                        methods.
-     * @param eventName - Name of the event.
-     * @param eventData - Data associated with the event.
-     */
-    public static void runListenerMethod(
-            final Object listener,
-            final Map<String, Method> listenerMethods,
-            final String eventName,
-            final ReadableMap eventData) {
-        // Make sure listener methods are invoked on the UI thread. It
-        // was requested by SDK consumers.
-        if (UiThreadUtil.isOnUiThread()) {
-            runListenerMethodOnUiThread(
-                listener, listenerMethods, eventName, eventData);
-        } else {
-            UiThreadUtil.runOnUiThread(new Runnable() {
-                @Override
-                public void run() {
-                    runListenerMethodOnUiThread(
-                        listener, listenerMethods, eventName, eventData);
-                }
-            });
-        }
-    }
-
-    /**
-     * Helper companion for {@link ListenerUtils#runListenerMethod} which runs
-     * in the UI thread.
-     */
-    private static void runListenerMethodOnUiThread(
-            Object listener,
-            Map<String, Method> listenerMethods,
-            String eventName,
-            ReadableMap eventData) {
-        UiThreadUtil.assertOnUiThread();
-
-        Method method = listenerMethods.get(eventName);
-        if (method != null) {
-            try {
-                method.invoke(listener, toHashMap(eventData));
-            } catch (IllegalAccessException e) {
-                throw new RuntimeException(e);
-            } catch (InvocationTargetException e) {
-                throw new RuntimeException(e);
-            }
-        }
-    }
-
-    /**
-     * Initializes a new {@code HashMap} instance with the key-value
-     * associations of a specific {@code ReadableMap}.
-     *
-     * @param readableMap the {@code ReadableMap} specifying the key-value
-     * associations with which the new {@code HashMap} instance is to be
-     * initialized.
-     * @return a new {@code HashMap} instance initialized with the key-value
-     * associations of the specified {@code readableMap}.
-     */
-    private static HashMap<String, Object> toHashMap(ReadableMap readableMap) {
-        HashMap<String, Object> hashMap = new HashMap<>();
-
-        for (ReadableMapKeySetIterator i = readableMap.keySetIterator();
-                i.hasNextKey();) {
-            String key = i.nextKey();
-
-            hashMap.put(key, readableMap.getString(key));
-        }
-
-        return hashMap;
-    }
-}

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

@@ -1,19 +1,3 @@
-/*
- * 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.app.Activity;
@@ -27,9 +11,7 @@ import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
 
-class PictureInPictureModule
-    extends ReactContextBaseJavaModule {
-
+public class PictureInPictureModule extends ReactContextBaseJavaModule {
     private final static String TAG = "PictureInPicture";
 
     static boolean isPictureInPictureSupported() {
@@ -40,46 +22,6 @@ class PictureInPictureModule
         super(reactContext);
     }
 
-    /**
-     * Enters Picture-in-Picture (mode) for the current {@link Activity}.
-     * Supported on Android API >= 26 (Oreo) only.
-     *
-     * @throws IllegalStateException if {@link #isPictureInPictureSupported()}
-     * returns {@code false} or if {@link #getCurrentActivity()} returns
-     * {@code null}.
-     * @throws RuntimeException if
-     * {@link Activity#enterPictureInPictureMode(PictureInPictureParams)} fails.
-     * That method can also throw a {@link RuntimeException} in various cases,
-     * including when the activity is not visible (paused or stopped), if the
-     * screen is locked or if the user has an activity pinned.
-     */
-    public void enterPictureInPicture() {
-        if (!isPictureInPictureSupported()) {
-            throw new IllegalStateException("Picture-in-Picture not supported");
-        }
-
-        Activity currentActivity = getCurrentActivity();
-
-        if (currentActivity == null) {
-            throw new IllegalStateException("No current Activity!");
-        }
-
-        Log.d(TAG, "Entering Picture-in-Picture");
-
-        PictureInPictureParams.Builder builder
-            = new PictureInPictureParams.Builder()
-                .setAspectRatio(new Rational(1, 1));
-
-        // https://developer.android.com/reference/android/app/Activity.html#enterPictureInPictureMode(android.app.PictureInPictureParams)
-        //
-        // The system may disallow entering picture-in-picture in various cases,
-        // including when the activity is not visible, if the screen is locked
-        // or if the user has an activity pinned.
-        if (!currentActivity.enterPictureInPictureMode(builder.build())) {
-            throw new RuntimeException("Failed to enter Picture-in-Picture");
-        }
-    }
-
     /**
      * Enters Picture-in-Picture (mode) for the current {@link Activity}.
      * Supported on Android API >= 26 (Oreo) only.
@@ -89,12 +31,33 @@ class PictureInPictureModule
      */
     @ReactMethod
     public void enterPictureInPicture(Promise promise) {
-        try {
-            enterPictureInPicture();
-            promise.resolve(null);
-        } catch (RuntimeException re) {
-            promise.reject(re);
+        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

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

@@ -31,9 +31,7 @@ import com.facebook.react.bridge.UiThreadUtil;
  * object it will dim the screen and disable touch controls. The functionality
  * is used with the conference audio-only mode.
  */
-class ProximityModule
-    extends ReactContextBaseJavaModule {
-
+class ProximityModule extends ReactContextBaseJavaModule {
     /**
      * The name of {@code ProximityModule} to be used in the React Native
      * bridge.

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

@@ -1,195 +0,0 @@
-/*
- * Copyright @ 2018-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.annotation.TargetApi;
-import android.app.Activity;
-import android.content.Intent;
-import android.os.Build;
-
-import com.calendarevents.CalendarEventsPackage;
-import com.facebook.react.ReactInstanceManager;
-import com.facebook.react.bridge.Callback;
-import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
-import com.facebook.react.modules.core.PermissionListener;
-
-/**
- * Helper class to encapsulate the work which needs to be done on
- * {@link Activity} lifecycle methods in order for the React side to be aware of
- * it.
- */
-public class ReactActivityLifecycleCallbacks {
-
-    /**
-     * {@link Activity} lifecycle method which should be called from
-     * {@code Activity#onActivityResult} so we are notified about results of external intents
-     * started/finished.
-     *
-     * @param activity {@code Activity} activity from where the result comes from.
-     * @param requestCode {@code int} code of the request.
-     * @param resultCode {@code int} code of the result.
-     * @param data {@code Intent} the intent of the activity.
-     */
-    public static void onActivityResult(
-            Activity activity,
-            int requestCode,
-            int resultCode,
-            Intent data) {
-        ReactInstanceManager reactInstanceManager
-                = ReactInstanceManagerHolder.getReactInstanceManager();
-
-        if (reactInstanceManager != null) {
-            reactInstanceManager.onActivityResult(activity, requestCode, resultCode, data);
-        }
-    }
-
-    /**
-     * Needed for making sure this class working with the "PermissionsAndroid"
-     * React Native module.
-     */
-    private static PermissionListener permissionListener;
-    private static Callback permissionsCallback;
-
-    /**
-     * {@link Activity} lifecycle method which should be called from
-     * {@link Activity#onBackPressed} so we can do the required internal
-     * processing.
-     *
-     * @return {@code true} if the back-press was processed; {@code false},
-     * otherwise. If {@code false}, the application should call the
-     * {@code super}'s implementation.
-     */
-    public static boolean onBackPressed() {
-        ReactInstanceManager reactInstanceManager
-            = ReactInstanceManagerHolder.getReactInstanceManager();
-
-        if (reactInstanceManager == null) {
-            return false;
-        } else {
-            reactInstanceManager.onBackPressed();
-            return true;
-        }
-    }
-
-    /**
-     * {@link Activity} lifecycle method which should be called from
-     * {@code Activity#onDestroy} so we can do the required internal
-     * processing.
-     *
-     * @param activity {@code Activity} being destroyed.
-     */
-    public static void onHostDestroy(Activity activity) {
-        ReactInstanceManager reactInstanceManager
-            = ReactInstanceManagerHolder.getReactInstanceManager();
-
-        if (reactInstanceManager != null) {
-            reactInstanceManager.onHostDestroy(activity);
-        }
-    }
-
-    /**
-     * {@link Activity} lifecycle method which should be called from
-     * {@code Activity#onPause} so we can do the required internal processing.
-     *
-     * @param activity {@code Activity} being paused.
-     */
-    public static void onHostPause(Activity activity) {
-        ReactInstanceManager reactInstanceManager
-            = ReactInstanceManagerHolder.getReactInstanceManager();
-
-        if (reactInstanceManager != null) {
-            reactInstanceManager.onHostPause(activity);
-        }
-    }
-
-    /**
-     * {@link Activity} lifecycle method which should be called from
-     * {@code Activity#onResume} so we can do the required internal processing.
-     *
-     * @param activity {@code Activity} being resumed.
-     */
-    public static void onHostResume(Activity activity) {
-        onHostResume(activity, new DefaultHardwareBackBtnHandlerImpl(activity));
-    }
-
-    /**
-     * {@link Activity} lifecycle method which should be called from
-     * {@code Activity#onResume} so we can do the required internal processing.
-     *
-     * @param activity {@code Activity} being resumed.
-     * @param defaultBackButtonImpl a {@link DefaultHardwareBackBtnHandler} to
-     * handle invoking the back button if no {@link BaseReactView} handles it.
-     */
-    public static void onHostResume(
-            Activity activity,
-            DefaultHardwareBackBtnHandler defaultBackButtonImpl) {
-        ReactInstanceManager reactInstanceManager
-            = ReactInstanceManagerHolder.getReactInstanceManager();
-
-        if (reactInstanceManager != null) {
-            reactInstanceManager.onHostResume(activity, defaultBackButtonImpl);
-        }
-
-        if (permissionsCallback != null) {
-            permissionsCallback.invoke();
-            permissionsCallback = null;
-        }
-    }
-
-    /**
-     * {@link Activity} lifecycle method which should be called from
-     * {@code Activity#onNewIntent} so we can do the required internal
-     * processing. Note that this is only needed if the activity's "launchMode"
-     * was set to "singleTask". This is required for deep linking to work once
-     * the application is already running.
-     *
-     * @param intent {@code Intent} instance which was received.
-     */
-    public static void onNewIntent(Intent intent) {
-        ReactInstanceManager reactInstanceManager
-            = ReactInstanceManagerHolder.getReactInstanceManager();
-
-        if (reactInstanceManager != null) {
-            reactInstanceManager.onNewIntent(intent);
-        }
-    }
-
-    public static void onRequestPermissionsResult(
-        final int requestCode,
-        final String[] permissions,
-        final int[] grantResults) {
-        CalendarEventsPackage.onRequestPermissionsResult(
-            requestCode,
-            permissions,
-            grantResults);
-        permissionsCallback = new Callback() {
-            @Override
-            public void invoke(Object... args) {
-                if (permissionListener != null
-                        && permissionListener.onRequestPermissionsResult(requestCode, permissions, grantResults)) {
-                    permissionListener = null;
-                }
-            }
-        };
-    }
-
-    @TargetApi(Build.VERSION_CODES.M)
-    public static void requestPermissions(Activity activity, String[] permissions, int requestCode, PermissionListener listener) {
-        permissionListener = listener;
-        activity.requestPermissions(permissions, requestCode);
-    }
-}

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

@@ -1,43 +0,0 @@
-/*
- * 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.support.annotation.Nullable;
-
-import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.modules.core.DeviceEventManagerModule;
-
-public class ReactContextUtils {
-    public static boolean emitEvent(
-            ReactContext reactContext,
-            String eventName,
-            @Nullable Object data) {
-        if (reactContext == null) {
-            // XXX If no ReactContext is specified, emit through the
-            // ReactContext of ReactInstanceManager. ReactInstanceManager
-            // cooperates with ReactContextUtils i.e. ReactInstanceManager will
-            // not invoke ReactContextUtils without a ReactContext.
-            return ReactInstanceManagerHolder.emitEvent(eventName, data);
-        }
-
-        reactContext
-            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
-            .emit(eventName, data);
-
-        return true;
-    }
-}

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

@@ -1,148 +0,0 @@
-/*
- * 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.app.Application;
-import android.support.annotation.Nullable;
-
-import com.facebook.react.ReactInstanceManager;
-import com.facebook.react.bridge.NativeModule;
-import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.common.LifecycleState;
-
-import java.util.Arrays;
-import java.util.List;
-
-class ReactInstanceManagerHolder {
-    /**
-     * React Native bridge. The instance manager allows embedding applications
-     * to create multiple root views off the same JavaScript bundle.
-     */
-    private static ReactInstanceManager reactInstanceManager;
-
-    private static List<NativeModule> createNativeModules(
-            ReactApplicationContext reactContext) {
-        return Arrays.<NativeModule>asList(
-            new AndroidSettingsModule(reactContext),
-            new AppInfoModule(reactContext),
-            new AudioModeModule(reactContext),
-            new ExternalAPIModule(reactContext),
-            new PictureInPictureModule(reactContext),
-            new ProximityModule(reactContext),
-            new WiFiStatsModule(reactContext),
-            new org.jitsi.meet.sdk.dropbox.Dropbox(reactContext),
-            new org.jitsi.meet.sdk.invite.InviteModule(reactContext),
-            new org.jitsi.meet.sdk.net.NAT64AddrInfoModule(reactContext)
-        );
-    }
-
-    /**
-     * Helper function to send an event to JavaScript.
-     *
-     * @param eventName {@code String} containing the event name.
-     * @param data {@code Object} optional ancillary data for the event.
-     */
-    public static boolean emitEvent(
-            String eventName,
-            @Nullable Object data) {
-        ReactInstanceManager reactInstanceManager
-            = ReactInstanceManagerHolder.getReactInstanceManager();
-
-        if (reactInstanceManager != null) {
-            ReactContext reactContext
-                = reactInstanceManager.getCurrentReactContext();
-
-            return
-                reactContext != null
-                    && ReactContextUtils.emitEvent(
-                        reactContext,
-                        eventName,
-                        data);
-        }
-
-        return false;
-    }
-
-    /**
-     * Finds a native React module for given class.
-     *
-     * @param nativeModuleClass the native module's class for which an instance
-     * is to be retrieved from the {@link #reactInstanceManager}.
-     * @param <T> the module's type.
-     * @return {@link NativeModule} instance for given interface type or
-     * {@code null} if no instance for this interface is available, or if
-     * {@link #reactInstanceManager} has not been initialized yet.
-     */
-    static <T extends NativeModule> T getNativeModule(
-            Class<T> nativeModuleClass) {
-        ReactContext reactContext
-            = reactInstanceManager != null
-                ? reactInstanceManager.getCurrentReactContext() : null;
-
-        return reactContext != null
-                ? reactContext.getNativeModule(nativeModuleClass) : null;
-    }
-
-    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
-     * time. All {@code ReactRootView} instances will be tied to the one and
-     * only {@code ReactInstanceManager}.
-     *
-     * @param application {@code Application} instance which is running.
-     */
-    static void initReactInstanceManager(Application application) {
-        if (reactInstanceManager != null) {
-            return;
-        }
-
-        reactInstanceManager
-            = ReactInstanceManager.builder()
-                .setApplication(application)
-                .setBundleAssetName("index.android.bundle")
-                .setJSMainModulePath("index.android")
-                .addPackage(new co.apptailor.googlesignin.RNGoogleSigninPackage())
-                .addPackage(new com.BV.LinearGradient.LinearGradientPackage())
-                .addPackage(new com.calendarevents.CalendarEventsPackage())
-                .addPackage(new com.corbt.keepawake.KCKeepAwakePackage())
-                .addPackage(new com.dylanvann.fastimage.FastImageViewPackage())
-                .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.rnimmersive.RNImmersivePackage())
-                .addPackage(new com.zmxv.RNSound.RNSoundPackage())
-                .addPackage(new ReactPackageAdapter() {
-                    @Override
-                    public List<NativeModule> createNativeModules(
-                            ReactApplicationContext reactContext) {
-                        return
-                            ReactInstanceManagerHolder.createNativeModules(
-                                reactContext);
-                    }
-                })
-                .setUseDeveloperSupport(BuildConfig.DEBUG)
-                .setInitialLifecycleState(LifecycleState.RESUMED)
-                .build();
-    }
-}

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

@@ -25,9 +25,7 @@ import com.facebook.react.uimanager.ViewManager;
 import java.util.Collections;
 import java.util.List;
 
-class ReactPackageAdapter
-    implements ReactPackage {
-
+public class ReactPackageAdapter implements ReactPackage {
     @Override
     public List<NativeModule> createNativeModules(
             ReactApplicationContext reactContext) {

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

@@ -19,6 +19,8 @@ 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;
@@ -34,18 +36,14 @@ import java.net.NetworkInterface;
 import java.net.SocketException;
 import java.net.UnknownHostException;
 import java.util.Enumeration;
-import java.util.concurrent.ExecutorService;
-import java.util.concurrent.Executors;
 
 /**
  * Module exposing WiFi statistics.
  *
- * Gathers rssi, signal in percentage, timestamp and the addresses of the wifi
- * device.
+ * Gathers rssi, signal in percentage, timestamp and the addresses
+ * of the wifi device.
  */
-class WiFiStatsModule
-    extends ReactContextBaseJavaModule {
-
+class WiFiStatsModule extends ReactContextBaseJavaModule {
     /**
      * The name of {@code WiFiStatsModule} to be used in the React Native
      * bridge.
@@ -58,16 +56,17 @@ class WiFiStatsModule
     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).
+     * 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 ExecutorService} for running all operations on a dedicated thread.
+     * {@link Handler} for running all operations on the main thread.
      */
-    private static final ExecutorService executor
-        = Executors.newSingleThreadExecutor();
+    private final Handler mainThreadHandler
+            = new Handler(Looper.getMainLooper());
 
     /**
      * Initializes a new module instance. There shall be a single instance of
@@ -120,6 +119,7 @@ class WiFiStatsModule
             @Override
             public void run() {
                 try {
+
                     Context context
                         = getReactApplicationContext().getApplicationContext();
                     WifiManager wifiManager
@@ -203,6 +203,6 @@ class WiFiStatsModule
                 }
             }
         };
-        executor.execute(r);
+        mainThreadHandler.post(r);
     }
 }

android/sdk/src/main/java/org/jitsi/meet/sdk/dropbox/Dropbox.java

@@ -1,184 +0,0 @@
-package org.jitsi.meet.sdk.dropbox;
-
-import android.content.Context;
-import android.content.pm.ApplicationInfo;
-import android.content.pm.PackageInfo;
-import android.content.pm.PackageManager;
-import android.text.TextUtils;
-
-import com.dropbox.core.DbxException;
-import com.dropbox.core.DbxRequestConfig;
-import com.dropbox.core.v2.DbxClientV2;
-import com.dropbox.core.v2.users.FullAccount;
-import com.dropbox.core.v2.users.SpaceAllocation;
-import com.dropbox.core.v2.users.SpaceUsage;
-import com.facebook.react.bridge.Arguments;
-import com.facebook.react.bridge.LifecycleEventListener;
-import com.facebook.react.bridge.Promise;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContextBaseJavaModule;
-import com.dropbox.core.android.Auth;
-import com.facebook.react.bridge.ReactMethod;
-import com.facebook.react.bridge.WritableMap;
-
-import java.util.HashMap;
-import java.util.Map;
-
-/**
- * Implements the react-native module for the dropbox integration.
- */
-public class Dropbox
-        extends ReactContextBaseJavaModule
-        implements LifecycleEventListener {
-    private String appKey;
-
-    private String clientId;
-
-    private final boolean isEnabled;
-
-    private Promise promise;
-
-    public Dropbox(ReactApplicationContext reactContext) {
-        super(reactContext);
-
-        appKey
-            = reactContext.getString(
-                org.jitsi.meet.sdk.R.string.dropbox_app_key);
-        isEnabled = !TextUtils.isEmpty(appKey);
-
-        clientId = generateClientId();
-
-        reactContext.addLifecycleEventListener(this);
-    }
-
-    /**
-     * Executes the dropbox auth flow.
-     *
-     * @param promise The promise used to return the result of the auth flow.
-     */
-    @ReactMethod
-    public void authorize(final Promise promise) {
-        if (isEnabled) {
-            Auth.startOAuth2Authentication(this.getCurrentActivity(), appKey);
-            this.promise = promise;
-        } else {
-            promise.reject(
-                new Exception("Dropbox integration isn't configured."));
-        }
-    }
-
-    /**
-     * Generate a client identifier for the dropbox sdk.
-     *
-     * @returns a client identifier for the dropbox sdk.
-     * @see {https://dropbox.github.io/dropbox-sdk-java/api-docs/v3.0.x/com/dropbox/core/DbxRequestConfig.html#getClientIdentifier--}
-     */
-    private String generateClientId() {
-        Context context = getReactApplicationContext();
-        PackageManager packageManager = context.getPackageManager();
-        ApplicationInfo applicationInfo = null;
-        PackageInfo packageInfo = null;
-
-        try {
-            String packageName = context.getPackageName();
-
-            applicationInfo = packageManager.getApplicationInfo(packageName, 0);
-            packageInfo = packageManager.getPackageInfo(packageName, 0);
-        } catch (PackageManager.NameNotFoundException e) {
-        }
-
-        String applicationLabel
-            = applicationInfo == null
-                ? "JitsiMeet"
-                : packageManager.getApplicationLabel(applicationInfo).toString()
-                    .replaceAll("\\s", "");
-        String version = packageInfo == null ? "dev" : packageInfo.versionName;
-
-        return applicationLabel + "/" + version;
-    }
-
-    @Override
-    public Map<String, Object> getConstants() {
-        Map<String, Object> constants = new HashMap<>();
-
-        constants.put("ENABLED", isEnabled);
-
-        return constants;
-    }
-
-    /**
-     * Resolves the current user dropbox display name.
-     *
-     * @param token A dropbox access token.
-     * @param promise The promise used to return the result of the auth flow.
-     */
-    @ReactMethod
-    public void getDisplayName(final String token, final Promise promise) {
-        DbxRequestConfig config = DbxRequestConfig.newBuilder(clientId).build();
-        DbxClientV2 client = new DbxClientV2(config, token);
-
-        // Get current account info
-        try {
-            FullAccount account = client.users().getCurrentAccount();
-
-            promise.resolve(account.getName().getDisplayName());
-        } catch (DbxException e) {
-            promise.reject(e);
-        }
-    }
-
-    @Override
-    public String getName() {
-        return "Dropbox";
-    }
-
-    /**
-     * Resolves the current user space usage.
-     *
-     * @param token A dropbox access token.
-     * @param promise The promise used to return the result of the auth flow.
-     */
-    @ReactMethod
-    public void getSpaceUsage(final String token, final Promise promise) {
-        DbxRequestConfig config = DbxRequestConfig.newBuilder(clientId).build();
-        DbxClientV2 client = new DbxClientV2(config, token);
-
-        try {
-            SpaceUsage spaceUsage = client.users().getSpaceUsage();
-            WritableMap map = Arguments.createMap();
-
-            map.putString("used", String.valueOf(spaceUsage.getUsed()));
-
-            SpaceAllocation allocation = spaceUsage.getAllocation();
-            long allocated = 0;
-
-            if (allocation.isIndividual()) {
-                allocated += allocation.getIndividualValue().getAllocated();
-            }
-            if (allocation.isTeam()) {
-                allocated += allocation.getTeamValue().getAllocated();
-            }
-            map.putString("allocated", String.valueOf(allocated));
-
-            promise.resolve(map);
-        } catch (DbxException e) {
-            promise.reject(e);
-        }
-    }
-
-    @Override
-    public void onHostDestroy() {}
-
-    @Override
-    public void onHostPause() {}
-
-    @Override
-    public void onHostResume() {
-        String token = Auth.getOAuth2Token();
-
-        if (token != null && this.promise != null) {
-            this.promise.resolve(token);
-            this.promise = null;
-        }
-    }
-}

android/sdk/src/main/java/org/jitsi/meet/sdk/incoming_call/IncomingCallInfo.java

@@ -1,72 +0,0 @@
-/*
- * Copyright @ 2018-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.incoming_call;
-
-import android.support.annotation.NonNull;
-
-public class IncomingCallInfo {
-    /**
-     * URL for the caller avatar.
-     */
-    private final String callerAvatarURL;
-
-    /**
-     * Caller's name.
-     */
-    private final String callerName;
-
-    /**
-     * Whether this is a regular call or a video call.
-     */
-    private final boolean hasVideo;
-
-    public IncomingCallInfo(
-            @NonNull String callerName,
-            @NonNull String callerAvatarURL,
-            boolean hasVideo) {
-        this.callerName = callerName;
-        this.callerAvatarURL = callerAvatarURL;
-        this.hasVideo = hasVideo;
-    }
-
-    /**
-     * Gets the caller's avatar URL.
-     * 
-     * @return - The URL as a string.
-     */
-    public String getCallerAvatarURL() {
-        return callerAvatarURL;
-    }
-
-    /**
-     * Gets the caller's name.
-     *
-     * @return - The caller's name.
-     */
-    public String getCallerName() {
-        return callerName;
-    }
-
-    /**
-     * Gets whether the call is a video call or not.
-     *
-     * @return - {@code true} if this call has video; {@code false}, otherwise.
-     */
-    public boolean hasVideo() {
-        return hasVideo;
-    }
-}

android/sdk/src/main/java/org/jitsi/meet/sdk/incoming_call/IncomingCallView.java

@@ -1,73 +0,0 @@
-/*
- * Copyright @ 2018-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.incoming_call;
-
-import android.content.Context;
-import android.os.Bundle;
-import android.support.annotation.NonNull;
-
-import com.facebook.react.bridge.ReadableMap;
-
-import org.jitsi.meet.sdk.BaseReactView;
-import org.jitsi.meet.sdk.ListenerUtils;
-
-import java.lang.reflect.Method;
-import java.util.Map;
-
-public class IncomingCallView
-    extends BaseReactView<IncomingCallViewListener> {
-
-    /**
-     * The {@code Method}s of {@code JitsiMeetViewListener} by event name i.e.
-     * redux action types.
-     */
-    private static final Map<String, Method> LISTENER_METHODS
-        = ListenerUtils.mapListenerMethods(IncomingCallViewListener.class);
-
-    public IncomingCallView(@NonNull Context context) {
-        super(context);
-    }
-
-    /**
-     * Handler for {@link ExternalAPIModule} events.
-     *
-     * @param name The name of the event.
-     * @param data The details/specifics of the event to send determined
-     * by/associated with the specified {@code name}.
-     */
-    @Override
-    public void onExternalAPIEvent(String name, ReadableMap data) {
-        onExternalAPIEvent(LISTENER_METHODS, name, data);
-    }
-
-    /**
-     * Sets the information for the incoming call this {@code IncomingCallView}
-     * represents.
-     *
-     * @param callInfo - {@link IncomingCallInfo} object representing the caller
-     * information.
-     */
-    public void setIncomingCallInfo(IncomingCallInfo callInfo) {
-        Bundle props = new Bundle();
-
-        props.putString("callerAvatarURL", callInfo.getCallerAvatarURL());
-        props.putString("callerName", callInfo.getCallerName());
-        props.putBoolean("hasVideo", callInfo.hasVideo());
-
-        createReactRootView("IncomingCallApp", props);
-    }
-}

android/sdk/src/main/java/org/jitsi/meet/sdk/incoming_call/IncomingCallViewListener.java

@@ -1,41 +0,0 @@
-/*
- * Copyright @ 2018-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.incoming_call;
-
-import java.util.Map;
-
-/**
- * Interface for listening to events coming from Jitsi Meet, related to
- * {@link IncomingCallView}.
- */
-public interface IncomingCallViewListener {
-    /**
-     * Called when the user presses the "Answer" button on the
-     * {@link IncomingCallView}.
-     *
-     * @param data - Unused at the moment.
-     */
-    void onIncomingCallAnswered(Map<String, Object> data);
-
-    /**
-     * Called when the user presses the "Decline" button on the
-     * {@link IncomingCallView}.
-     *
-     * @param data - Unused at the moment.
-     */
-    void onIncomingCallDeclined(Map<String, Object> data);
-}

android/sdk/src/main/java/org/jitsi/meet/sdk/invite/AddPeopleController.java

@@ -1,211 +0,0 @@
-/*
- * 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.invite;
-
-import android.util.Log;
-
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReadableArray;
-import com.facebook.react.bridge.ReadableMap;
-import com.facebook.react.bridge.WritableArray;
-import com.facebook.react.bridge.WritableNativeArray;
-import com.facebook.react.bridge.WritableNativeMap;
-
-import java.lang.ref.WeakReference;
-import java.util.ArrayList;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-import java.util.UUID;
-
-/**
- * Controller object used by native code to query and submit user selections for
- * the user invitation flow.
- */
-public class AddPeopleController {
-
-    /**
-     * The AddPeopleControllerListener for this controller, used to pass query
-     * results back to the native code that initiated the query.
-     */
-    private AddPeopleControllerListener listener;
-
-    /**
-     * Local cache of search query results. Used to re-hydrate the list of
-     * selected items based on their ids passed to inviteById in order to pass
-     * the full item maps back to the JitsiMeetView during submission.
-     */
-    private final Map<String, ReadableMap> items = new HashMap<>();
-
-    private final WeakReference<InviteController> owner;
-
-    private final WeakReference<ReactApplicationContext> reactContext;
-
-    /**
-     * Randomly generated UUID, used for identification in the InviteModule.
-     */
-    private final String uuid = UUID.randomUUID().toString();
-
-    public AddPeopleController(
-            InviteController owner,
-            ReactApplicationContext reactContext) {
-        this.owner = new WeakReference<>(owner);
-        this.reactContext = new WeakReference<>(reactContext);
-    }
-
-    /**
-     * Cancel the invitation flow and free memory allocated to the
-     * AddPeopleController. After calling this method, this object is invalid -
-     * a new AddPeopleController will be passed to the caller through
-     * beginAddPeople.
-     */
-    public void endAddPeople() {
-        InviteController owner = this.owner.get();
-
-        if (owner != null) {
-            owner.endAddPeople(this);
-        }
-    }
-
-    /**
-     *
-     * @return the AddPeopleControllerListener for this controller, used to pass
-     * query results back to the native code that initiated the query.
-     */
-    public AddPeopleControllerListener getListener() {
-        return listener;
-    }
-
-    final ReactApplicationContext getReactApplicationContext() {
-        return reactContext.get();
-    }
-
-    /**
-     *
-     * @return the unique identifier for this AddPeopleController
-     */
-    public String getUuid() {
-        return uuid;
-    }
-
-    /**
-     * Send invites to selected users based on their item ids
-     *
-     * @param ids
-     */
-    public void inviteById(List<String> ids) {
-        InviteController owner = this.owner.get();
-
-        if (owner != null) {
-            WritableArray invitees = new WritableNativeArray();
-
-            for(int i = 0, size = ids.size(); i < size; i++) {
-                String id = ids.get(i);
-
-                if(items.containsKey(id)) {
-                    WritableNativeMap map = new WritableNativeMap();
-                    map.merge(items.get(id));
-                    invitees.pushMap(map);
-                } else {
-                    // If the id doesn't exist in the map, we can't do anything,
-                    // so just skip it.
-                }
-            }
-
-            owner.invite(this, invitees);
-        }
-    }
-
-    void inviteSettled(ReadableArray failedInvitees) {
-        AddPeopleControllerListener listener = getListener();
-
-        if (listener != null) {
-            ArrayList<Map<String, Object>> jFailedInvitees = new ArrayList<>();
-
-            for (int i = 0, size = failedInvitees.size(); i < size; ++i) {
-                jFailedInvitees.add(failedInvitees.getMap(i).toHashMap());
-            }
-
-            listener.onInviteSettled(this, jFailedInvitees);
-        }
-    }
-
-    /**
-     * Start a search for entities to invite with the given query. Results will
-     * be returned through the associated AddPeopleControllerListener's
-     * onReceivedResults method.
-     *
-     * @param query
-     */
-    public void performQuery(String query) {
-        InviteController owner = this.owner.get();
-
-        if (owner != null) {
-            owner.performQuery(this, query);
-        }
-    }
-
-    /**
-     * Caches results received by the search into a local map for use later when
-     * the items are submitted.  Submission requires the full map of
-     * information, but only the IDs are returned back to the delegate. Using
-     * this map means we don't have to send the whole map back to the delegate.
-     *
-     * @param results
-     * @param query
-     */
-    void receivedResultsForQuery(ReadableArray results, String query) {
-        AddPeopleControllerListener listener = getListener();
-
-        if (listener != null) {
-            List<Map<String, Object>> jvmResults = new ArrayList<>();
-
-            // cache results for use in submission later
-            // convert to jvm array
-            for(int i = 0; i < results.size(); i++) {
-                ReadableMap map = results.getMap(i);
-
-                if(map.hasKey("id")) {
-                    items.put(map.getString("id"), map);
-                } else if(map.hasKey("type")
-                        && map.getString("type").equals("phone")
-                        && map.hasKey("number")) {
-                    items.put(map.getString("number"), map);
-                } else {
-                    Log.w(
-                        "AddPeopleController",
-                        "Received result without id and that was not a phone number, so not adding it to suggestions: "
-                            + map);
-                }
-
-                jvmResults.add(map.toHashMap());
-            }
-
-            listener.onReceivedResults(this, jvmResults, query);
-        }
-    }
-
-    /**
-     * Sets the AddPeopleControllerListener for this controller, used to pass
-     * query results back to the native code that initiated the query.
-     *
-     * @param listener
-     */
-    public void setListener(AddPeopleControllerListener listener) {
-        this.listener = listener;
-    }
-}

android/sdk/src/main/java/org/jitsi/meet/sdk/invite/AddPeopleControllerListener.java

@@ -1,56 +0,0 @@
-/*
- * 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.invite;
-
-import java.util.List;
-import java.util.Map;
-
-public interface AddPeopleControllerListener {
-    /**
-     * Called when the call to {@link AddPeopleController#inviteById(List)}
-     * completes.
-     *
-     * @param addPeopleController the active {@link AddPeopleController} for
-     * this invite flow.  This object should be cleaned up by calling
-     * {@link AddPeopleController#endAddPeople()} if the user exits the invite
-     * flow. Otherwise, it can stay active if the user will attempt to invite
-     * @param failedInvitees a {@code List} of {@code Map<String, Object>}
-     * dictionaries that represent the invitations that failed. The data type of
-     * the objects is identical to the results returned in onReceivedResuls.
-     */
-    void onInviteSettled(
-        AddPeopleController addPeopleController,
-        List<Map<String, Object>> failedInvitees);
-
-    /**
-     * Called when results are received for a query called through
-     * AddPeopleController.query().
-     *
-     * @param addPeopleController
-     * @param results a List of Map<String, Object> objects that represent items
-     * returned by the query. The object at key "type" describes the type of
-     * item: "user", "videosipgw" (conference room), or "phone". "user" types
-     * have properties at "id", "name", and "avatar". "videosipgw" types have
-     * properties at "id" and "name". "phone" types have properties at "number",
-     * "title", "and "subtitle"
-     * @param query the query that generated the given results
-     */
-    void onReceivedResults(
-        AddPeopleController addPeopleController,
-        List<Map<String, Object>> results,
-        String query);
-}

android/sdk/src/main/java/org/jitsi/meet/sdk/invite/InviteController.java

@@ -1,265 +0,0 @@
-/*
- * 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.invite;
-
-import com.facebook.react.bridge.Arguments;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.bridge.ReadableArray;
-import com.facebook.react.bridge.WritableArray;
-import com.facebook.react.bridge.WritableNativeMap;
-
-import org.jitsi.meet.sdk.ReactContextUtils;
-
-import java.util.Collections;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-import java.util.UUID;
-import java.util.concurrent.Callable;
-import java.util.concurrent.Future;
-import java.util.concurrent.FutureTask;
-
-/**
- * Represents the entry point into the invite feature of Jitsi Meet and is the
- * Java counterpart of the JavaScript {@code InviteButton}.
- */
-public class InviteController {
-    private AddPeopleController addPeopleController;
-
-    /**
-     * Whether adding/inviting people by name (as opposed to phone number) is
-     * enabled.
-     */
-    private Boolean addPeopleEnabled;
-
-    /**
-     * Whether adding/inviting people by phone number (as opposed to name) is
-     * enabled.
-     */
-    private Boolean dialOutEnabled;
-
-    private final String externalAPIScope;
-
-    private InviteControllerListener listener;
-
-    public InviteController(String externalAPIScope) {
-        this.externalAPIScope = externalAPIScope;
-    }
-
-    void beginAddPeople(ReactApplicationContext reactContext) {
-        InviteControllerListener listener = getListener();
-
-        if (listener != null) {
-            // XXX For the sake of simplicity and in order to reduce the risk of
-            // memory leaks, allow a single AddPeopleController at a time.
-            AddPeopleController addPeopleController = this.addPeopleController;
-
-            if (addPeopleController != null) {
-                return;
-            }
-
-            // Initialize a new AddPeopleController to represent the click/tap
-            // on the InviteButton and notify the InviteControllerListener
-            // about the event.
-            addPeopleController = new AddPeopleController(this, reactContext);
-
-            boolean success = false;
-
-            this.addPeopleController = addPeopleController;
-            try {
-                listener.beginAddPeople(addPeopleController);
-                success = true;
-            } finally {
-                if (!success) {
-                    endAddPeople(addPeopleController);
-                }
-            }
-        }
-    }
-
-    void endAddPeople(AddPeopleController addPeopleController) {
-        if (this.addPeopleController == addPeopleController) {
-            this.addPeopleController = null;
-        }
-    }
-
-    public InviteControllerListener getListener() {
-        return listener;
-    }
-
-    /**
-     * Sends JavaScript event to submit invitations to the given item ids
-     *
-     * @param invitees a WritableArray of WritableNativeMaps representing
-     * selected items. Each map representing a selected item should match the
-     * data passed back in the return from a query.
-     */
-    boolean invite(
-            AddPeopleController addPeopleController,
-            WritableArray invitees) {
-        return
-            invite(
-                addPeopleController.getUuid(),
-                addPeopleController.getReactApplicationContext(),
-                invitees);
-    }
-
-    public Future<List<Map<String, Object>>> invite(
-            final List<Map<String, Object>> invitees) {
-        final boolean inviteBegan
-            = invite(
-                UUID.randomUUID().toString(),
-                /* reactContext */ null,
-                Arguments.makeNativeArray(invitees));
-        FutureTask futureTask
-            = new FutureTask(new Callable() {
-                @Override
-                public List<Map<String, Object>> call() {
-                    if (inviteBegan) {
-                        // TODO Complete the returned Future when the invite
-                        // settles.
-                        return Collections.emptyList();
-                    } else {
-                        // The invite failed to even begin so report that all
-                        // invitees failed.
-                        return invitees;
-                    }
-                }
-            });
-
-        // If the invite failed to even begin, complete the returned Future
-        // already and the Future implementation will report that all invitees
-        // failed.
-        if (!inviteBegan) {
-            futureTask.run();
-        }
-
-        return futureTask;
-    }
-
-    private boolean invite(
-            String addPeopleControllerScope,
-            ReactContext reactContext,
-            WritableArray invitees) {
-        WritableNativeMap data = new WritableNativeMap();
-
-        data.putString("addPeopleControllerScope", addPeopleControllerScope);
-        data.putString("externalAPIScope", externalAPIScope);
-        data.putArray("invitees", invitees);
-
-        return
-            ReactContextUtils.emitEvent(
-                reactContext,
-                "org.jitsi.meet:features/invite#invite",
-                data);
-    }
-
-    void inviteSettled(
-            String addPeopleControllerScope,
-            ReadableArray failedInvitees) {
-        AddPeopleController addPeopleController = this.addPeopleController;
-
-        if (addPeopleController != null
-                && addPeopleController.getUuid().equals(
-                    addPeopleControllerScope)) {
-            try {
-                addPeopleController.inviteSettled(failedInvitees);
-            } finally {
-                if (failedInvitees.size() == 0) {
-                    endAddPeople(addPeopleController);
-                }
-            }
-        }
-    }
-
-    public boolean isAddPeopleEnabled() {
-        Boolean b = this.addPeopleEnabled;
-
-        return
-            (b == null || b.booleanValue()) ? (getListener() != null) : false;
-    }
-
-    public boolean isDialOutEnabled() {
-        Boolean b = this.dialOutEnabled;
-
-        return
-            (b == null || b.booleanValue()) ? (getListener() != null) : false;
-    }
-
-    /**
-     * Starts a query for users to invite to the conference. Results will be
-     * returned through
-     * {@link AddPeopleControllerListener#onReceivedResults(AddPeopleController, List, String)}.
-     *
-     * @param query {@code String} to use for the query
-     */
-    void performQuery(AddPeopleController addPeopleController, String query) {
-        WritableNativeMap params = new WritableNativeMap();
-
-        params.putString("addPeopleControllerScope", addPeopleController.getUuid());
-        params.putString("externalAPIScope", externalAPIScope);
-        params.putString("query", query);
-        ReactContextUtils.emitEvent(
-            addPeopleController.getReactApplicationContext(),
-            "org.jitsi.meet:features/invite#performQuery",
-            params);
-    }
-
-    void receivedResultsForQuery(
-            String addPeopleControllerScope,
-            String query,
-            ReadableArray results) {
-        AddPeopleController addPeopleController = this.addPeopleController;
-
-        if (addPeopleController != null
-                && addPeopleController.getUuid().equals(
-                    addPeopleControllerScope)) {
-            addPeopleController.receivedResultsForQuery(results, query);
-        }
-    }
-
-    /**
-     * Sets whether the ability to add users to the call is enabled. If this is
-     * enabled, an add user button will appear on the {@link JitsiMeetView}. If
-     * enabled, and the user taps the add user button,
-     * {@link InviteControllerListener#beginAddPeople(AddPeopleController)}
-     * will be called.
-     *
-     * @param addPeopleEnabled {@code true} to enable the add people button;
-     * otherwise, {@code false}
-     */
-    public void setAddPeopleEnabled(boolean addPeopleEnabled) {
-        this.addPeopleEnabled = Boolean.valueOf(addPeopleEnabled);
-    }
-
-    /**
-     * Sets whether the ability to add phone numbers to the call is enabled.
-     * Must be enabled along with {@link #setAddPeopleEnabled(boolean)} to be
-     * effective.
-     *
-     * @param dialOutEnabled {@code true} to enable the ability to add phone
-     * numbers to the call; otherwise, {@code false}
-     */
-    public void setDialOutEnabled(boolean dialOutEnabled) {
-        this.dialOutEnabled = Boolean.valueOf(dialOutEnabled);
-    }
-
-    public void setListener(InviteControllerListener listener) {
-        this.listener = listener;
-    }
-}

android/sdk/src/main/java/org/jitsi/meet/sdk/invite/InviteControllerListener.java

@@ -1,29 +0,0 @@
-/*
- * 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.invite;
-
-public interface InviteControllerListener {
-    /**
-     * Called when the add user button is tapped.
-     *
-     * @param addPeopleController {@code AddPeopleController} scoped for this
-     * user invite flow. The {@code AddPeopleController} is used to start user
-     * queries and accepts an {@code AddPeopleControllerListener} for receiving
-     * user query responses.
-     */
-    void beginAddPeople(AddPeopleController addPeopleController);
-}

android/sdk/src/main/java/org/jitsi/meet/sdk/invite/InviteModule.java

@@ -1,171 +0,0 @@
-/*
- * 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.invite;
-
-import android.util.Log;
-
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContextBaseJavaModule;
-import com.facebook.react.bridge.ReactMethod;
-import com.facebook.react.bridge.ReadableArray;
-import com.facebook.react.bridge.UiThreadUtil;
-
-import org.jitsi.meet.sdk.BaseReactView;
-import org.jitsi.meet.sdk.JitsiMeetView;
-
-/**
- * Implements the react-native module of the feature invite.
- */
-public class InviteModule
-    extends ReactContextBaseJavaModule {
-
-    public InviteModule(ReactApplicationContext reactContext) {
-        super(reactContext);
-    }
-
-    /**
-     * Signals that a click/tap has been performed on {@code InviteButton} and
-     * that the execution flow for adding/inviting people to the current
-     * conference/meeting is to begin
-     *
-     * @param externalAPIScope the unique identifier of the
-     * {@code JitsiMeetView} whose {@code InviteButton} was clicked/tapped.
-     */
-    @ReactMethod
-    public void beginAddPeople(final String externalAPIScope) {
-        // Make sure InviteControllerListener (like all other listeners of the
-        // SDK) is invoked on the UI thread. It was requested by SDK consumers.
-        if (!UiThreadUtil.isOnUiThread()) {
-            UiThreadUtil.runOnUiThread(new Runnable() {
-                @Override
-                public void run() {
-                    beginAddPeople(externalAPIScope);
-                }
-            });
-            return;
-        }
-
-        InviteController inviteController
-            = findInviteControllerByExternalAPIScope(externalAPIScope);
-
-        if (inviteController != null) {
-            inviteController.beginAddPeople(getReactApplicationContext());
-        }
-    }
-
-    private InviteController findInviteControllerByExternalAPIScope(
-            String externalAPIScope) {
-        JitsiMeetView view
-            = (JitsiMeetView)
-                BaseReactView.findViewByExternalAPIScope(externalAPIScope);
-
-        return view == null ? null : view.getInviteController();
-    }
-
-    @Override
-    public String getName() {
-        return "Invite";
-    }
-
-    /**
-     * Callback for invitation failures
-     *
-     * @param failedInvitees the items for which the invitation failed
-     * @param addPeopleControllerScope a string that represents a connection to
-     * a specific AddPeopleController
-     */
-    @ReactMethod
-    public void inviteSettled(
-            final String externalAPIScope,
-            final String addPeopleControllerScope,
-            final ReadableArray failedInvitees) {
-        // Make sure AddPeopleControllerListener (like all other listeners of
-        // the SDK) is invoked on the UI thread. It was requested by SDK
-        // consumers.
-        if (!UiThreadUtil.isOnUiThread()) {
-            UiThreadUtil.runOnUiThread(new Runnable() {
-                @Override
-                public void run() {
-                    inviteSettled(
-                        externalAPIScope, 
-                        addPeopleControllerScope,
-                        failedInvitees);
-                }
-            });
-            return;
-        }
-
-        InviteController inviteController
-            = findInviteControllerByExternalAPIScope(externalAPIScope);
-
-        if (inviteController == null) {
-            Log.w(
-                "InviteModule",
-                "Invite settled, but failed to find active controller to notify");
-        } else {
-            inviteController.inviteSettled(
-                addPeopleControllerScope,
-                failedInvitees);
-        }
-    }
-
-    /**
-     * Callback for results received from the JavaScript invite search call
-     *
-     * @param results the results in a ReadableArray of ReadableMap objects
-     * @param query the query associated with the search
-     * @param addPeopleControllerScope a string that represents a connection to
-     * a specific AddPeopleController
-     */
-    @ReactMethod
-    public void receivedResults(
-            final String externalAPIScope,
-            final String addPeopleControllerScope,
-            final String query,
-            final ReadableArray results) {
-        // Make sure AddPeopleControllerListener (like all other listeners of
-        // the SDK) is invoked on the UI thread. It was requested by SDK
-        // consumers.
-        if (!UiThreadUtil.isOnUiThread()) {
-            UiThreadUtil.runOnUiThread(new Runnable() {
-                @Override
-                public void run() {
-                    receivedResults(
-                        externalAPIScope,
-                        addPeopleControllerScope,
-                        query,
-                        results);
-                }
-            });
-            return;
-        }
-
-        InviteController inviteController
-            = findInviteControllerByExternalAPIScope(externalAPIScope);
-
-        if (inviteController == null) {
-            Log.w(
-                "InviteModule",
-                "Received results, but failed to find active controller to send results back");
-        } else {
-            inviteController.receivedResultsForQuery(
-                addPeopleControllerScope,
-                query,
-                results);
-        }
-    }
-}

android/sdk/src/main/java/org/jitsi/meet/sdk/net/NAT64AddrInfo.java

@@ -1,238 +0,0 @@
-/*
- * Copyright @ 2018-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.net;
-
-import java.net.InetAddress;
-import java.net.UnknownHostException;
-
-/**
- * Constructs IPv6 addresses for IPv4 addresses in the NAT64 environment.
- *
- * NAT64 translates IPv4 to IPv6 addresses by adding "well known" prefix and
- * suffix configured by the administrator. Those are figured out by discovering
- * both IPv6 and IPv4 addresses of a host and then trying to find a place where
- * the IPv4 address fits into the format described here:
- * https://tools.ietf.org/html/rfc6052#section-2.2
- */
-public class NAT64AddrInfo {
-    /**
-     * Coverts bytes array to upper case HEX string.
-     *
-     * @param bytes an array of bytes to be converted
-     * @return ex. "010AFF" for an array of {1, 10, 255}.
-     */
-    static String bytesToHexString(byte[] bytes) {
-        StringBuilder hexStr = new StringBuilder();
-
-        for (byte b : bytes) {
-            hexStr.append(String.format("%02X", b));
-        }
-
-        return hexStr.toString();
-    }
-
-    /**
-     * Tries to discover the NAT64 prefix/suffix based on the IPv4 and IPv6
-     * addresses resolved for given {@code host}.
-     *
-     * @param host the host for which the code will try to discover IPv4 and
-     * IPv6 addresses which then will be used to figure out the NAT64 prefix.
-     * @return {@link NAT64AddrInfo} instance if the NAT64 prefix/suffix was
-     * successfully discovered or {@code null} if it failed for any reason.
-     * @throws UnknownHostException thrown by {@link InetAddress#getAllByName}.
-     */
-    public static NAT64AddrInfo discover(String host)
-            throws UnknownHostException {
-        InetAddress ipv4 = null;
-        InetAddress ipv6 = null;
-
-        for(InetAddress addr : InetAddress.getAllByName(host)) {
-            byte[] bytes = addr.getAddress();
-
-            if (bytes.length == 4) {
-                ipv4 = addr;
-            } else if (bytes.length == 16) {
-                ipv6 = addr;
-            }
-        }
-
-        if (ipv4 != null && ipv6 != null) {
-            return figureOutNAT64AddrInfo(ipv4.getAddress(), ipv6.getAddress());
-        }
-
-        return null;
-    }
-
-    /**
-     * Based on IPv4 and IPv6 addresses of the same host, the method will make
-     * an attempt to figure out what are the NAT64 prefix and suffix.
-     *
-     * @param ipv4AddrBytes the IPv4 address of the same host in NAT64 network,
-     * as returned by {@link InetAddress#getAddress()}.
-     * @param ipv6AddrBytes the IPv6 address of the same host in NAT64 network,
-     * as returned by {@link InetAddress#getAddress()}.
-     * @return {@link NAT64AddrInfo} instance which contains the prefix/suffix
-     * of the current NAT64 network or {@code null} if the prefix could not be
-     * found.
-     */
-    static NAT64AddrInfo figureOutNAT64AddrInfo(
-            byte[] ipv4AddrBytes,
-            byte[] ipv6AddrBytes) {
-        String ipv6Str = bytesToHexString(ipv6AddrBytes);
-        String ipv4Str = bytesToHexString(ipv4AddrBytes);
-
-        // NAT64 address format:
-        // +--+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+
-        // |PL| 0-------------32--40--48--56--64--72--80--88--96--104---------|
-        // +--+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+
-        // |32|     prefix    |v4(32)         | u | suffix                    |
-        // +--+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+
-        // |40|     prefix        |v4(24)     | u |(8)| suffix                |
-        // +--+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+
-        // |48|     prefix            |v4(16) | u | (16)  | suffix            |
-        // +--+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+
-        // |56|     prefix                |(8)| u |  v4(24)   | suffix        |
-        // +--+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+
-        // |64|     prefix                    | u |   v4(32)      | suffix    |
-        // +--+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+
-        // |96|     prefix                                    |    v4(32)     |
-        // +--+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+
-        int prefixLength = 96;
-        int suffixLength = 0;
-        String prefix = null;
-        String suffix = null;
-
-        if (ipv4Str.equalsIgnoreCase(ipv6Str.substring(prefixLength / 4))) {
-            prefix = ipv6Str.substring(0, prefixLength / 4);
-        } else {
-            // Cut out the 'u' octet
-            ipv6Str = ipv6Str.substring(0, 16) + ipv6Str.substring(18);
-
-            for (prefixLength = 64, suffixLength = 6; prefixLength >= 32; ) {
-                if (ipv4Str.equalsIgnoreCase(
-                        ipv6Str.substring(
-                                prefixLength / 4, prefixLength / 4 + 8))) {
-                    prefix = ipv6Str.substring(0, prefixLength / 4);
-                    suffix = ipv6Str.substring(ipv6Str.length() - suffixLength);
-                    break;
-                }
-
-                prefixLength -= 8;
-                suffixLength += 2;
-            }
-        }
-
-        return prefix != null ? new NAT64AddrInfo(prefix, suffix) : null;
-    }
-
-    /**
-     * An overload for {@link #hexStringToIPv6String(StringBuilder)}.
-     *
-     * @param hexStr a hex representation of IPv6 address bytes.
-     * @return an IPv6 address string.
-     */
-    static String hexStringToIPv6String(String hexStr) {
-        return hexStringToIPv6String(new StringBuilder(hexStr));
-    }
-
-    /**
-     * Converts from HEX representation of IPv6 address bytes into IPv6 address
-     * string which includes the ':' signs.
-     *
-     * @param str a hex representation of IPv6 address bytes.
-     * @return eg. FE80:CD00:0000:0CDA:1357:0000:212F:749C
-     */
-    static String hexStringToIPv6String(StringBuilder str) {
-        for (int i = 32 - 4; i > 0; i -= 4) {
-            str.insert(i, ":");
-        }
-
-        return str.toString().toUpperCase();
-    }
-
-    /**
-     * Parses an IPv4 address string and returns it's byte array representation.
-     *
-     * @param ipv4Address eg. '192.168.3.23'
-     * @return byte representation of given IPv4 address string.
-     * @throws IllegalArgumentException if the address is not in valid format.
-     */
-    static byte[] ipv4AddressStringToBytes(String ipv4Address) {
-        InetAddress address;
-
-        try {
-            address = InetAddress.getByName(ipv4Address);
-        } catch (UnknownHostException e) {
-            throw new IllegalArgumentException(
-                    "Invalid IP address: " + ipv4Address, e);
-        }
-
-        byte[] bytes = address.getAddress();
-
-        if (bytes.length != 4) {
-            throw new IllegalArgumentException(
-                    "Not an IPv4 address: " + ipv4Address);
-        }
-
-        return bytes;
-    }
-
-    /**
-     * The NAT64 prefix added to construct IPv6 from an IPv4 address.
-     */
-    private final String prefix;
-
-    /**
-     * The NAT64 suffix (if any) used to construct IPv6 from an IPv4 address.
-     */
-    private final String suffix;
-
-    /**
-     * Creates new instance of {@link NAT64AddrInfo}.
-     *
-     * @param prefix the NAT64 prefix.
-     * @param suffix the NAT64 suffix.
-     */
-    private NAT64AddrInfo(String prefix, String suffix) {
-        this.prefix = prefix;
-        this.suffix = suffix;
-    }
-
-    /**
-     * Based on the NAT64 prefix and suffix will create an IPv6 representation
-     * of the given IPv4 address.
-     *
-     * @param ipv4Address eg. '192.34.2.3'
-     * @return IPv6 address string eg. FE80:CD00:0000:0CDA:1357:0000:212F:749C
-     * @throws IllegalArgumentException if given string is not a valid IPv4
-     * address.
-     */
-    public String getIPv6Address(String ipv4Address) {
-        byte[] ipv4AddressBytes = ipv4AddressStringToBytes(ipv4Address);
-        StringBuilder newIPv6Str = new StringBuilder();
-
-        newIPv6Str.append(prefix);
-        newIPv6Str.append(bytesToHexString(ipv4AddressBytes));
-
-        if (suffix != null) {
-            // Insert the 'u' octet.
-            newIPv6Str.insert(16, "00");
-            newIPv6Str.append(suffix);
-        }
-
-        return hexStringToIPv6String(newIPv6Str);
-    }
-}

android/sdk/src/main/java/org/jitsi/meet/sdk/net/NAT64AddrInfoModule.java

@@ -1,124 +0,0 @@
-/*
- * Copyright @ 2018-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.net;
-
-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 java.net.UnknownHostException;
-
-/**
- * This module exposes the functionality of creating an IPv6 representation
- * of IPv4 addresses in NAT64 environment.
- *
- * See[1] and [2] for more info on what NAT64 is.
- * [1]: https://tools.ietf.org/html/rfc6146
- * [2]: https://tools.ietf.org/html/rfc6052
- */
-public class NAT64AddrInfoModule
-    extends ReactContextBaseJavaModule {
-
-    /**
-     * The host for which the module wil try to resolve both IPv4 and IPv6
-     * addresses in order to figure out the NAT64 prefix.
-     */
-    private final static String HOST = "nat64.jitsi.net";
-
-    /**
-     * How long is the {@link NAT64AddrInfo} instance valid.
-     */
-    private final static long INFO_LIFETIME = 60 * 1000;
-
-    /**
-     * The name of this module.
-     */
-    private final static String MODULE_NAME = "NAT64AddrInfo";
-
-    /**
-     * The {@code Log} tag {@code NAT64AddrInfoModule} is to log messages with.
-     */
-    private final static String TAG = MODULE_NAME;
-
-    /**
-     * The {@link NAT64AddrInfo} instance which holds NAT64 prefix/suffix.
-     */
-    private NAT64AddrInfo info;
-
-    /**
-     * When {@link #info} was created.
-     */
-    private long infoTimestamp;
-
-    /**
-     * Creates new {@link NAT64AddrInfoModule}.
-     *
-     * @param reactContext the react context to be used by the new module
-     * instance.
-     */
-    public NAT64AddrInfoModule(ReactApplicationContext reactContext) {
-        super(reactContext);
-    }
-
-    /**
-     * Tries to obtain IPv6 address for given IPv4 address in NAT64 environment.
-     *
-     * @param ipv4Address IPv4 address string.
-     * @param promise a {@link Promise} which will be resolved either with IPv6
-     * address for given IPv4 address or with {@code null} if no
-     * {@link NAT64AddrInfo} was resolved for the current network. Will be
-     * rejected if given {@code ipv4Address} is not a valid IPv4 address.
-     */
-    @ReactMethod
-    public void getIPv6Address(String ipv4Address, final Promise promise) {
-        // Reset if cached for too long.
-        if (System.currentTimeMillis() - infoTimestamp > INFO_LIFETIME) {
-            info = null;
-        }
-
-        if (info == null) {
-            String host = HOST;
-
-            try {
-                info = NAT64AddrInfo.discover(host);
-            } catch (UnknownHostException e) {
-                Log.e(TAG, "NAT64AddrInfo.discover: " + host, e);
-            }
-            infoTimestamp = System.currentTimeMillis();
-        }
-
-        String result;
-
-        try {
-            result = info == null ? null : info.getIPv6Address(ipv4Address);
-        } catch (IllegalArgumentException exc) {
-            Log.e(TAG, "Failed to get IPv6 address for: " + ipv4Address, exc);
-
-            // We don't want to reject. It's not a big deal if there's no IPv6
-            // address resolved.
-            result = null;
-        }
-        promise.resolve(result);
-    }
-
-    @Override
-    public String getName() {
-        return MODULE_NAME;
-    }
-}

android/sdk/src/main/res/values/strings.xml

@@ -1,4 +1,3 @@
 <resources>
     <string name="app_name">Jitsi Meet SDK</string>
-    <string name="dropbox_app_key"></string>
 </resources>

android/sdk/src/test/java/org/jitsi/meet/sdk/net/NAT64AddrInfoTest.java

@@ -1,150 +0,0 @@
-/*
- * 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.net;
-
-import org.junit.Test;
-
-import java.math.BigInteger;
-import java.net.UnknownHostException;
-
-import static org.junit.Assert.*;
-
-/**
- * Tests for {@link NAT64AddrInfo} class.
- */
-public class NAT64AddrInfoTest {
-    /**
-     * Test case for the 96 prefix length.
-     */
-    @Test
-    public void test96Prefix() {
-        testPrefixSuffix(
-                "260777000000000400000000", "", "203.0.113.1", "23.17.23.3");
-    }
-
-    /**
-     * Test case for the 64 prefix length.
-     */
-    @Test
-    public void test64Prefix() {
-        String prefix = "1FF2A227B3AAF3D2";
-        String suffix = "BB87C8";
-
-        testPrefixSuffix(prefix, suffix, "48.46.87.34", "23.87.145.4");
-    }
-
-    /**
-     * Test case for the 56 prefix length.
-     */
-    @Test
-    public void test56Prefix() {
-        String prefix = "1FF2A227B3AAF3";
-        String suffix = "A2BB87C8";
-
-        testPrefixSuffix(prefix, suffix, "34.72.234.255", "1.235.3.65");
-    }
-
-    /**
-     * Test case for the 48 prefix length.
-     */
-    @Test
-    public void test48Prefix() {
-        String prefix = "1FF2A227B3AA";
-        String suffix = "72A2BB87C8";
-
-        testPrefixSuffix(prefix, suffix, "97.54.3.23", "77.49.0.33");
-    }
-
-    /**
-     * Test case for the 40 prefix length.
-     */
-    @Test
-    public void test40Prefix() {
-        String prefix = "1FF2A227B3";
-        String suffix = "D972A2BB87C8";
-
-        testPrefixSuffix(prefix, suffix, "10.23.56.121", "97.65.32.21");
-    }
-
-    /**
-     * Test case for the 32 prefix length.
-     */
-    @Test
-    public void test32Prefix()
-        throws UnknownHostException {
-        String prefix = "1FF2A227";
-        String suffix = "20D972A2BB87C8";
-
-        testPrefixSuffix(prefix, suffix, "162.63.65.189", "135.222.84.206");
-    }
-
-    private static String buildIPv6Addr(
-            String prefix, String suffix, String ipv4Hex) {
-        String ipv6Str = prefix + ipv4Hex + suffix;
-
-        if (suffix.length() > 0) {
-            ipv6Str = new StringBuilder(ipv6Str).insert(16, "00").toString();
-        }
-
-        return ipv6Str;
-    }
-
-    private void testPrefixSuffix(
-            String prefix, String suffix, String ipv4, String otherIPv4) {
-        byte[] ipv4Bytes = NAT64AddrInfo.ipv4AddressStringToBytes(ipv4);
-        String ipv4String = NAT64AddrInfo.bytesToHexString(ipv4Bytes);
-        String ipv6Str = buildIPv6Addr(prefix, suffix, ipv4String);
-
-        BigInteger ipv6Address = new BigInteger(ipv6Str, 16);
-
-        NAT64AddrInfo nat64AddrInfo
-            = NAT64AddrInfo.figureOutNAT64AddrInfo(
-                    ipv4Bytes, ipv6Address.toByteArray());
-
-        assertNotNull("Failed to figure out NAT64 info", nat64AddrInfo);
-
-        String newIPv6 = nat64AddrInfo.getIPv6Address(ipv4);
-
-        assertEquals(
-                NAT64AddrInfo.hexStringToIPv6String(ipv6Address.toString(16)),
-                newIPv6);
-
-        byte[] ipv4Addr2 = NAT64AddrInfo.ipv4AddressStringToBytes(otherIPv4);
-        String ipv4Addr2Hex = NAT64AddrInfo.bytesToHexString(ipv4Addr2);
-
-        newIPv6 = nat64AddrInfo.getIPv6Address(otherIPv4);
-
-        assertEquals(
-                NAT64AddrInfo.hexStringToIPv6String(
-                        buildIPv6Addr(prefix, suffix, ipv4Addr2Hex)),
-                newIPv6);
-    }
-
-    @Test
-    public void testInvalidIPv4Format() {
-        testInvalidIPv4Format("256.1.2.3");
-        testInvalidIPv4Format("FE80:CD00:0000:0CDA:1357:0000:212F:749C");
-    }
-
-    private void testInvalidIPv4Format(String ipv4Str) {
-        try {
-            NAT64AddrInfo.ipv4AddressStringToBytes(ipv4Str);
-            fail("Did not throw IllegalArgumentException");
-        } catch (IllegalArgumentException exc) {
-            /* OK */
-        }
-    }
-}

android/settings.gradle

@@ -3,16 +3,12 @@ rootProject.name = 'jitsi-meet'
 include ':app', ':sdk'
 include ':react-native-background-timer'
 project(':react-native-background-timer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-background-timer/android')
-include ':react-native-fast-image'
-project(':react-native-fast-image').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fast-image/android')
-include ':react-native-google-signin'
-project(':react-native-google-signin').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-google-signin/android')
+include ':react-native-fetch-blob'
+project(':react-native-fetch-blob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fetch-blob/android')
 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-linear-gradient'
-project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/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'

app.js

@@ -15,6 +15,7 @@ import conference from './conference';
 import API from './modules/API';
 import keyboardshortcut from './modules/keyboardshortcut/keyboardshortcut';
 import remoteControl from './modules/remotecontrol/RemoteControl';
+import settings from './modules/settings/Settings';
 import translation from './modules/translation/translation';
 import UI from './modules/UI/UI';
 
@@ -40,6 +41,7 @@ window.APP = {
 
     keyboardshortcut,
     remoteControl,
+    settings,
     translation,
     UI
 };

config.js

@@ -18,6 +18,9 @@ var config = {
         // XMPP domain.
         domain: 'jitsi-meet.example.com',
 
+        // XMPP MUC domain. FIXME: use XEP-0030 to discover it.
+        muc: 'conference.jitsi-meet.example.com'
+
         // When using authentication, domain for guest users.
         // anonymousdomain: 'guest.example.com',
 
@@ -32,9 +35,6 @@ var config = {
 
         // Focus component domain. Defaults to focus.<domain>.
         // focus: 'focus.jitsi-meet.example.com',
-
-        // XMPP MUC domain. FIXME: use XEP-0030 to discover it.
-        muc: 'conference.jitsi-meet.example.com'
     },
 
     // BOSH URL. FIXME: use XEP-0156 to discover it.
@@ -57,9 +57,6 @@ var config = {
         // P2P test mode disables automatic switching to P2P when there are 2
         // participants in the conference.
         p2pTestMode: false
-
-        // Enables the test specific features consumed by jitsi-meet-torture
-        // testMode: false
     },
 
     // Disables ICE/UDP by filtering out local and remote UDP candidates in
@@ -99,13 +96,13 @@ var config = {
     // 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 720.
+    // ratio of 16:9 with an ideal resolution of 1080p.
     // constraints: {
     //     video: {
     //         aspectRatio: 16 / 9,
     //         height: {
-    //             ideal: 720,
-    //             max: 720,
+    //             ideal: 1080,
+    //             max: 1080,
     //             min: 240
     //         }
     //     }
@@ -114,11 +111,6 @@ var config = {
     // Enable / disable simulcast support.
     // disableSimulcast: false,
 
-    // Enable / disable layer suspension.  If enabled, endpoints whose HD
-    // layers are not in use will be suspended (no longer sent) until they
-    // are requested again.
-    // enableLayerSuspension: false,
-
     // Suspend sending video if bandwidth estimation is too low. This may cause
     // problems with audio playback. Disabled until these are fixed.
     disableSuspendVideo: true,
@@ -142,6 +134,9 @@ var config = {
 
     // Desktop sharing
 
+    // Enable / disable desktop sharing
+    // disableDesktopSharing: false,
+
     // The ID of the jidesha extension for Chrome.
     desktopSharingChromeExtId: null,
 
@@ -169,19 +164,11 @@ var config = {
 
     // Recording
 
-    // Whether to enable file recording or not.
-    // fileRecordingsEnabled: false,
-    // Enable the dropbox integration.
-    // dropbox: {
-    //     appKey: '<APP_KEY>' // Specify your app key here.
-    // },
+    // Whether to enable recording or not.
+    // enableRecording: false,
 
-    // Whether to enable live streaming or not.
-    // liveStreamingEnabled: false,
-
-    // Transcription (in interface_config,
-    // subtitles and buttons can be configured)
-    // transcribingEnabled: false,
+    // Type for recording: one of jibri or jirecon.
+    // recordingType: 'jibri',
 
     // Misc
 
@@ -191,23 +178,6 @@ var config = {
     // Disables or enables RTX (RFC 4588) (defaults to false).
     // disableRtx: false,
 
-    // Disables or enables TCC (the default is in Jicofo and set to true)
-    // (draft-holmer-rmcat-transport-wide-cc-extensions-01). This setting
-    // affects congestion control, it practically enables send-side bandwidth
-    // estimations.
-    // enableTcc: true,
-
-    // Disables or enables REMB (the default is in Jicofo and set to false)
-    // (draft-alvestrand-rmcat-remb-03). This setting affects congestion
-    // control, it practically enables recv-side bandwidth estimations. When
-    // both TCC and REMB are enabled, TCC takes precedence. When both are
-    // disabled, then bandwidth estimations are disabled.
-    // enableRemb: false,
-
-    // Defines the minimum number of participants to start a call (the default
-    // is set in Jicofo and set to 2).
-    // minParticipants: 2,
-
     // Use XEP-0215 to fetch STUN and TURN servers.
     // useStunTurn: true,
 
@@ -241,6 +211,10 @@ var config = {
     // Disable hiding of remote thumbnails when in a 1-on-1 conference call.
     // 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',
 
@@ -249,16 +223,10 @@ var config = {
     // edit their profile.
     enableUserRolesBasedOnToken: false,
 
-    // Whether or not some features are checked based on token.
-    // enableFeaturesBasedOnToken: false,
-
     // Message to show the users. Example: 'The service will be down for
     // maintenance at 01:00 AM GMT,
     // noticeMessage: '',
 
-    // Enables calendar integration, depends on googleApiApplicationClientID
-    // and microsoftApiApplicationClientID
-    // enableCalendarIntegration: false,
 
     // Stats
     //
@@ -351,39 +319,10 @@ var config = {
         // userRegion: "asia"
     }
 
-    // Local Recording
-    //
-
-    // localRecording: {
-    // Enables local recording.
-    // Additionally, 'localrecording' (all lowercase) needs to be added to
-    // TOOLBAR_BUTTONS in interface_config.js for the Local Recording
-    // button to show up on the toolbar.
-    //
-    //     enabled: true,
-    //
-
-    // The recording format, can be one of 'ogg', 'flac' or 'wav'.
-    //     format: 'flac'
-    //
-
-    // }
-
-    // Options related to end-to-end (participant to participant) ping.
-    // e2eping: {
-    //   // The interval in milliseconds at which pings will be sent.
-    //   // Defaults to 10000, set to <= 0 to disable.
-    //   pingInterval: 10000,
-    //
-    //   // The interval in milliseconds at which analytics events
-    //   // with the measured RTT will be sent. Defaults to 60000, set
-    //   // to <= 0 to disable.
-    //   analyticsInterval: 60000,
-    //   }
-
     // List of undocumented settings used in jitsi-meet
     /**
-     _immediateReloadThreshold
+     alwaysVisibleToolbar
+     autoEnableDesktopSharing
      autoRecord
      autoRecordToken
      debug
@@ -400,10 +339,8 @@ var config = {
      externalConnectUrl
      firefox_fake_device
      googleApiApplicationClientID
-     googleApiIOSClientID
      iAmRecorder
      iAmSipGateway
-     microsoftApiApplicationClientID
      peopleSearchQueryTypes
      peopleSearchUrl
      requireDisplayName
@@ -432,7 +369,6 @@ var config = {
      nick
      startBitrate
      */
-
 };
 
 /* eslint-enable no-unused-vars, no-var */

connection.js

@@ -102,12 +102,7 @@ function connect(id, password, roomName) {
         /* eslint-enable max-params */
             APP.store.dispatch(
                 connectionFailed(
-                    connection, {
-                        credentials,
-                        details,
-                        message,
-                        name: error
-                    }));
+                    connection, error, message, credentials, details));
 
             if (isFatalJitsiConnectionError(error)) {
                 connection.removeEventListener(
@@ -132,7 +127,7 @@ function connect(id, password, roomName) {
          *
          */
         function handleConnectionEstablished() {
-            APP.store.dispatch(connectionEstablished(connection, Date.now()));
+            APP.store.dispatch(connectionEstablished(connection));
             unsubscribe();
             resolve(connection);
         }

css/_animations.scss

@@ -0,0 +1,69 @@
+/**
+* Project animations
+**/
+
+/**
+ *   Slide in animation for extended toolbar.
+ */
+@include keyframes(slideInX) {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(0%); }
+}
+
+@include keyframes(slideOutX) {
+    0% { transform: translateX(0%); }
+    100% { transform: translateX(-100%); }
+}
+
+@include keyframes(slideInExtX) {
+    0% { transform: translateX(-500%); }
+    100% { transform: translateX(0%); }
+}
+
+@include keyframes(slideOutExtX) {
+    0% { transform: translateX(0%); }
+    100% { transform: translateX(-500%); }
+}
+
+/**
+ *   Slide in / out animation for main toolbar.
+ */
+
+@include keyframes(slideInY) {
+    100% { transform: translateY(0%); }
+}
+
+@include keyframes(slideOutY) {
+    0% { transform: translateY(0%); }
+    100% { transform: translateY(-100%); }
+}
+
+/**
+ *   Slide in animation for extended toolbar (inner) panel.
+ */
+
+// FIX: Can't use percentage because of breaking animation when width is changed
+// (100% of 0 is also zero) Extracted this to config variable.
+@include keyframes(slideInExt) {
+    from { left: -$sidebarWidth; }
+    to   { left: 0; }
+}
+
+@include keyframes(slideOutExt) {
+    from { left: 0; }
+    to   { left: -$sidebarWidth; }
+}
+
+/**
+*   Slide in animation for extended toolbar container
+**/
+
+@include keyframes(slideOutExtContainer) {
+    from { width: $sidebarWidth; }
+    to { width: 0; }
+}
+
+@include keyframes(slideInExtContainer) {
+    from { width: 0; }
+    to { width: $sidebarWidth; }
+}

css/_atlaskit_overrides.scss

@@ -1,57 +0,0 @@
-/**
- * Move Atlaskit Flag up a little bit so it does not cover the toolbar with the
- * first notification.
- */
-.cxGWJB{
-    bottom: calc(#{$newToolbarSizeWithPadding}) !important;
-}
-.gXSEsl:nth-child(n+2) {
-    transform: translateX(0) translateY(100%) translateY(16px) !important;
-    -ms-transform: translateX(0) translateY(100%) translateY(16px) !important;
-    -webkit-transform: translateX(0) translateY(100%) translateY(16px) !important;
-}
-
-/**
- * Welcome page tab color adjustments.
- */
-.welcome {
-    /**
-     * The text color of the selected tab and hovered tabs.
-     */
-    .bVobOt,
-    .bVobOt:hover,
-    .ebveIl:hover {
-        color: #172B4D;
-    }
-
-    /**
-     * The color of the inactive tab text.
-     */
-    .ebveIl {
-        color: #FFFFFF;
-    }
-
-    /**
-     * The color of the underline of a selected tab.
-     */
-    .kByArU {
-        background-color: #172B4D;
-    }
-}
-
-.modal-dialog-form {
-    /**
-     * Update the dropdown trigger wrapper to make sure it looks click-able.
-     */
-    .gwEjuO {
-        cursor: pointer;
-    }
-
-    /**
-     * Override Atlaskit dropdown styling when in a modal because the dropdown
-     * backgrounds clash with the modal backgrounds.
-     */
-    .gBLqhw[data-role=droplistContent] {
-        border: 1px solid #455166;
-    }
-}

css/_base.scss

@@ -3,22 +3,11 @@
  * none is applied. Other browsers already support selecting within inputs while
  * user-select is none. As such, disallow user-select except on inputs.
  */
-* {
+*:not(input) {
     -webkit-user-select: none;
     user-select: none;
 }
 
-input,
-textarea {
-    -webkit-user-select: text;
-    user-select: text;
-}
-
-html {
-    height: 100%;
-    width: 100%;
-}
-
 body {
     margin: 0px;
     width: 100%;
@@ -33,16 +22,6 @@ body {
     }
 }
 
-/**
- * AtlasKitThemeProvider sets a background color on an app-wrapping div, thereby
- * preventing transparency in filmstrip-only mode. The selector chosen to
- * override this behavior is specific to where the AtlasKitThemeProvider might
- * be placed within the app hierarchy.
- */
-.filmstrip-only #react > .ckAJgx {
-    background: transparent;
-}
-
 p {
     margin: 0;
 }
@@ -71,6 +50,7 @@ input[type="reset"], input[type="submit"] {
 }
 
 textarea {
+    overflow: hidden;
     word-wrap: break-word;
     resize: none;
     line-height: 1.5em;
@@ -108,15 +88,14 @@ form {
 }
 
 .leftwatermark {
-    left: 32px;
-    top: 32px;
+    left: $defaultToolbarSize;
+    margin-left: 10px;
     background-image: url($defaultWatermarkLink);
     background-position: center left;
 }
 
 .rightwatermark {
-    right: 32px;
-    top: 32px;
+    right: 15;
     background-position: center right;
 }
 

css/_chat.scss

@@ -1,58 +1,21 @@
-#sideToolbarContainer {
-    background-color: $newToolbarBackgroundColor;
-    display: flex;
-    /**
-     * Make the sidebar flush with the top of the toolbar. Take the size of
-     * the toolbar and subtract from 100%.
-     */
-    height: calc(100% - #{$newToolbarSizeWithPadding});
-    left: -$sidebarWidth;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    transition: left 0.5s;
-    width: $sidebarWidth;
-    z-index: $sideToolbarContainerZ;
-
-    /**
-     * The sidebar (chat) is off-screen when hidden. Move it flush to the left
-     * side of the window when it should be visible.
-     */
-    &.slideInExt {
-        left: 0;
-    }
-
-    .sideToolbarContainer__inner {
-        box-sizing: border-box;
-        color: #FFF;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        width: $sidebarWidth;
-    }
-}
-
 #chat_container * {
     -webkit-user-select: text;
     user-select: text;
 }
 
 #chatconversation {
-    box-sizing: border-box;
-    flex: 1;
-    font-size: 10pt;
-    line-height: 20px;
-    margin-top: 15px;
-    overflow: auto;
+    visibility: hidden;
+    position: relative;
+    top: 5px;
     padding: 5px;
     text-align: left;
-    width: $sidebarWidth;
+    line-height: 20px;
+    font-size: 10pt;
+    width: 100%;
+    height: 90%;
+    overflow: auto;
     word-wrap: break-word;
 
-    a {
-        display: block;
-    }
-
     a:link {
         color: rgb(184, 184, 184);
     }
@@ -92,52 +55,41 @@
     }
 }
 
-.chat-close {
-    background: gray;
-    border: 3px solid rgba(255, 255, 255, 0.1);
-    border-radius: 100%;
-    color: white;
-    cursor:pointer;
-    height: 10px;
-    line-height: 10px;
-    padding: 4px;
-    position: absolute;
-    right: 5px;
-    text-align: center;
-    top: 5px;
-    width: 10px;
-    z-index: 1;
+#chat_container.is-conversation-mode #chatconversation {
+    visibility: visible;
 }
 
-#chat-input {
-    background-color: $newToolbarBackgroundColor;
-    display: flex;
+.localuser {
+    color: #087dba;
+}
+
+.errorMessage {
+    color: red;
 }
 
 .remoteuser {
-    color: #B8C7E0;
-}
-
-.usrmsg-form {
-    flex: 1;
-    margin-left: 5px;
+    color: white;
 }
 
 #usermsg {
-    background-color: $newToolbarBackgroundColor;
-    border: 0px none;
-    border-radius:0;
-    box-shadow: none;
-    color: white;
-    font-size: 10pt;
-    line-height: 30px;
+    visibility:hidden;
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    width: 83%;
+    height: 30px;
     padding: 5px 5px 5px 0px;
     max-height:150px;
     min-height:35px;
-    overflow-y: auto;
+    border: 0px none;
+    background: #3a3a3a;
+    color: #a7a7a7;
+    box-shadow: none;
+    border-radius:0;
+    font-size: 10pt;
+    line-height: 30px;
+    overflow: hidden;
     resize: none;
-    width: 100%;
-    word-break: break-word;
 }
 
 #usermsg:hover {
@@ -145,6 +97,10 @@
     box-shadow: none;
 }
 
+#chat_container.is-conversation-mode #usermsg {
+    visibility: visible;
+}
+
 #nickname {
     position: absolute;
     text-align: center;
@@ -156,7 +112,20 @@
     width: 95%;
 }
 
-#chat_container .display-name {
+#chat_container.is-conversation-mode #nickname {
+    visibility: hidden;
+}
+
+#nickinput {
+    margin-top: 20px;
+    font-size: 14px;
+    background: #3a3a3a;
+    box-shadow: inset 0 0 3px 2px #a7a7a7;
+    border: 1px solid #a7a7a7;
+    color: #a7a7a7;
+}
+
+#chat_container .username {
     float: left;
     padding-left: 5px;
     font-weight: bold;
@@ -172,45 +141,29 @@
     font-size: 11px;
 }
 
-.usermessage {
+#chat_container .usermessage {
     padding-top: 20px;
     padding-left: 5px;
 }
 
 .chatArrow {
-    height: 15px;
-    left: -10px;
     position: absolute;
+    height: 15px;
+    left: 5px;
 }
 
 .chatmessage {
-    background-color: $newToolbarBackgroundColor;
+    background: #3a3a3a;
     width: 93%;
     margin-left: 9px;
     margin-right: auto;
     border-radius: 5px;
     border-top-left-radius: 0px;
     margin-top: 3px;
-    color: white;
+    left: 5px;
+    color: #a7a7a7;
+    overflow: hidden;
     padding-bottom: 3px;
-    position: relative;
-
-    &.localuser .display-name {
-        color: #4C9AFF
-    }
-
-    &.error {
-        .chatArrow,
-        .timestamp,
-        .display-name {
-            display: none;
-        }
-
-        .usermessage {
-            color: red;
-            padding: 0;
-        }
-    }
 }
 
 .smiley {
@@ -218,9 +171,11 @@
 }
 
 #smileys {
+    position: absolute;
+    bottom: 7px;
+    right: 5px;
     background: white;
-    border-radius: 50%;
-    display: inline-block;
+    border-radius: 50px;
     height: 26px;
     margin: auto;
     cursor: pointer;
@@ -232,40 +187,33 @@
 }
 
 #smileysarea {
-    background-color: $newToolbarBackgroundColor;
-    border: 0px none;
-    display: flex;
-    height: 70px;
-    max-height: 150px;
-    min-height: 35px;
-    min-width: 31px;
-    padding: 0px;
-    overflow: hidden;
-    width: 17%;
-}
-
-.smiley-input {
-    position: relative;
-}
-
-.smileys-panel {
-    bottom: 100%;
-    box-sizing: border-box;
-    height: 0;
-    overflow: hidden;
     position: absolute;
-    transition: height 0.3s;
-    width: $sidebarWidth;
+    bottom: 0px;
+    left: 0px;
+    width: 17%;
+    min-width: 31px;
+    height: 40px;
+    padding: 0px;
+    max-height:150px;
+    min-height:35px;
+    border: 0px none;
+    background: #3a3a3a;
+    overflow: hidden;
+    visibility: hidden;
+}
 
-    &.show-smileys {
-        height: 202px;
-    }
+#chat_container.is-conversation-mode #smileysarea {
+    visibility: visible;
+}
 
-    #smileysContainer {
-        background-color: $newToolbarBackgroundColor;
-        border-bottom: 1px solid;
-        border-top: 1px solid;
-    }
+#smileysContainer {
+    display: none;
+    position: absolute;
+    background: #3a3a3a;
+    border-bottom: 1px solid;
+    border-top: 1px solid;
+    width: 100%;
+    bottom: 10%;
 }
 
 #smileysContainer .smiley {
@@ -279,9 +227,7 @@
 }
 
 .smileyContainer:hover {
-    background-color: $newToolbarButtonToggleColor;
-    border-radius: 5px;
-    cursor: pointer;
+    background: #3e3e3e;
 }
 
 #usermsg::-webkit-input-placeholder {

css/_contact_list.scss

@@ -0,0 +1,59 @@
+#contacts_container {
+    cursor: default;
+
+    #contacts {
+        font-size: 12px;
+        bottom: 0px;
+        margin: 0;
+        margin-top: 12px;
+        padding: 0px;
+        width: 100%;
+    }
+
+    .clickable {
+        cursor: pointer;
+    }
+}
+
+#contacts {
+    .contact-list-item {
+        align-items: center;
+        border-radius: 3px;
+        color: $baseLight;
+        display: flex;
+        font-size: 14px;
+        height: 36px;
+        list-style-type: none;
+        padding: 0 10%;
+        text-align: left;
+        white-space: nowrap;
+
+        &:hover,
+        &:active {
+            background: $toolbarSelectBackground;
+        }
+
+        .contact-list-item-name {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .avatar {
+            cursor: pointer;
+            height: 24px;
+            margin: 0 8px 0 4px;
+            width: 24px;
+        }
+    }
+}
+
+
+.avatar {
+    padding: 0px;
+    margin-right: 10px;
+    vertical-align: middle;
+    font-size: 22pt;
+    border-radius: 20px;
+    max-height: 30px;
+    max-width: 30px;
+}

css/_filmstrip.scss

@@ -0,0 +1,208 @@
+%align-right {
+    @include flex();
+    flex-direction: row-reverse;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+}
+
+.filmstrip {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding: 10px 5px;
+    @extend %align-right;
+    z-index: $filmstripVideosZ;
+
+    &__toolbar {
+        @include flex();
+        flex-direction: column-reverse;
+        flex-wrap: nowrap;
+        position: relative;
+        width: $filmstripToggleButtonWidth;
+
+        button {
+            font-size: 14px;
+            line-height: 1.2;
+            text-align: center;
+            background: transparent;
+            opacity: 0.7;
+            height: auto;
+            width: 100%;
+            padding: 0;
+            margin: 0;
+            border: none;
+            outline: none;
+
+            -webkit-appearance: none;
+
+            &:hover {
+                opacity: 1;
+            }
+
+            i {
+                cursor: pointer;
+            }
+        }
+    }
+
+    &__videos {
+        @extend %align-right;
+        position:relative;
+        padding: 0;
+        /* The filmstrip should not be covered by the left toolbar. */
+        bottom: 0;
+        width:auto;
+        overflow: visible !important;
+
+        &#remoteVideos {
+            border: $thumbnailsBorder solid transparent;
+            padding-left: $defaultToolbarSize + 5;
+            transition: bottom 2s;
+        }
+
+        /**
+         * The local video identifier.
+         */
+        &#filmstripLocalVideo {
+            align-self: flex-end;
+            display: block;
+
+            /**
+             * The invite button style.
+             */
+            .filmstrip__invite {
+                padding-bottom: 5px;
+                margin-left: 2px;
+            }
+
+            /**
+             * The invite button group style.
+             * TOFIX: use AtlasKit.ButtonGroup if it starts supporting different
+             * flex grow options for the buttons.
+             */
+            .invite-button-group {
+                display: inline-flex;
+                justify-content: space-between;
+                width: 100%;
+
+                & button {
+                    flex-grow: 1;
+                    flex-shrink: 1;
+                    overflow: hidden;
+                }
+
+                & > * {
+                    flex-grow: 0;
+                    flex-shrink: 0;
+                    margin-left: 2px;
+                }
+            }
+        }
+
+        &.hidden {
+            bottom: -196px;
+        }
+
+        .remote-videos-container {
+            display: flex;
+        }
+
+        .videocontainer {
+            display: none;
+            position: relative;
+            background-size: contain;
+            border: $thumbnailVideoBorder solid transparent;
+            border-radius: $borderRadius;
+            margin: 0 $thumbnailVideoMargin;
+
+            &.videoContainerFocused, &:hover {
+                cursor: hand;
+            }
+
+            /**
+             * Focused video thumbnail.
+             */
+            &.videoContainerFocused {
+                transition-duration: 0.5s;
+                -webkit-transition-duration: 0.5s;
+                -webkit-animation-name: greyPulse;
+                -webkit-animation-duration: 2s;
+                -webkit-animation-iteration-count: 1;
+                border: $thumbnailVideoBorder solid $videoThumbnailSelected !important;
+                box-shadow: inset 0 0 3px $videoThumbnailSelected,
+                0 0 3px $videoThumbnailSelected !important;
+            }
+
+            .remotevideomenu > .icon-menu {
+                display: none;
+            }
+
+            .presence-label {
+                color: $participantNameColor;
+                font-size: 12px;
+                font-weight: 100;
+                left: 0;
+                margin: 0 auto;
+                overflow: hidden;
+                pointer-events: none;
+                position: absolute;
+                right: 0;
+                text-align: center;
+                text-overflow: ellipsis;
+                top: calc(50% + 30px);
+                white-space: nowrap;
+                width: 100%;
+                z-index: $zindex3;
+            }
+
+            /**
+             * Hovered video thumbnail.
+             */
+            &:hover {
+                cursor: hand;
+                border: $thumbnailVideoBorder solid $videoThumbnailHovered;
+                box-shadow: inset 0 0 3px $videoThumbnailHovered,
+                0 0 3px $videoThumbnailHovered;
+
+                .remotevideomenu > .icon-menu {
+                    display: inline-block;
+                }
+            }
+
+            /* With the TemasysWebRTC plugin <object/> element is used
+            instead of <video/> */
+            & > video,
+            & > object {
+                cursor: hand;
+                border-radius: $borderRadius;
+                object-fit: cover;
+                overflow: hidden;
+            }
+        }
+    }
+
+    /**
+     * Style the filmstrip videos in filmstrip-only mode.
+     */
+    &__videos-filmstripOnly {
+        margin-top: auto;
+        margin-bottom: auto;
+
+        .filmstrip__videos {
+            &#filmstripLocalVideo {
+                bottom: 0px;
+            }
+        }
+    }
+
+    .remote-videos-container {
+        transition: opacity 1s;
+    }
+
+    &.hide-videos {
+        .remote-videos-container {
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+}

css/_font.scss

@@ -24,13 +24,9 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
-
 .icon-arrow_back:before {
   content: "\e5c4";
 }
-.icon-close:before {
-  content: "\e5cd";
-}
 .icon-event_note:before {
     content: "\e616";
 }
@@ -184,39 +180,3 @@
 .icon-gsm-bars:before {
     content: "\e926";
 }
-.icon-open_in_new:before {
-  content: "\e89e";
-}
-.icon-AUD:before {
-  content: "\e900";
-}
-.icon-HD:before {
-  content: "\e927";
-}
-.icon-LD:before {
-  content: "\e928";
-}
-.icon-SD:before {
-  content: "\e929";
-}
-.icon-camera-take-picture:before {
-  content: "\e92a";
-}
-.icon-rec:before {
-  content: "\e92b";
-}
-.icon-live:before {
-  content: "\e92c";
-}
-.icon-speaker:before {
-    content: "\e92d";
-}
-.icon-tiles-many:before {
-  content: "\e92e";
-}
-.icon-tiles-one:before {
-  content: "\e92f";
-}
-.icon-closed_caption:before {
-    content: "\e930";
-}

css/_meetings_list.scss

@@ -1,117 +0,0 @@
-.meetings-list {
-    font-size: 14px;
-    color: #253858;
-    line-height: 20px;
-    text-align: left;
-    text-overflow: ellipsis;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-
-    .meetings-list-empty {
-        text-align: center;
-        align-items: center;
-        justify-content: center;
-        display: flex;
-        flex-grow: 1;
-        flex-direction: column;
-
-        .description {
-            font-size: 16px;
-            padding: 20px;
-        }
-    }
-
-    .button {
-        background: #0074E0;
-        border-radius: 4px;
-        color: #FFFFFF;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 5px 10px;
-        cursor: pointer;
-    }
-
-    .item {
-        background: rgba(255,255,255,0.50);
-        box-sizing: border-box;
-        display: inline-flex;
-        margin-top: 5px;
-        min-height: 92px;
-        width: 100%;
-        word-break: break-word;
-        display: flex;
-        flex-direction: row;
-        text-align: left;
-
-        &:first-child {
-            margin-top: 0px;
-        }
-
-        .left-column {
-            display: flex;
-            flex-direction: column;
-            width: 140px;
-            flex-grow: 0;
-            padding-left: 30px;
-            padding-top: 25px;
-
-            .date {
-                font-weight: bold;
-                padding-bottom: 5px;
-            }
-        }
-
-        .right-column {
-            display: flex;
-            flex-direction: column;
-            flex-grow: 1;
-            padding-left: 30px;
-            padding-top: 25px;
-
-            .title {
-                font-size: 16px;
-                font-weight: bold;
-                padding-bottom: 5px;
-            }
-        }
-
-        .actions {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-grow: 0;
-            padding-right: 30px;
-        }
-
-        &.with-click-handler {
-            cursor: pointer;
-        }
-
-        &.with-click-handler:hover {
-            background-color: #75A7E7;
-        }
-
-        .add-button {
-            width: 30px;
-            height: 30px;
-            padding: 0px;
-        }
-
-        i {
-            cursor: inherit;
-        }
-
-        .join-button {
-            display: none;
-        }
-
-        &:hover .join-button {
-            display: block
-        }
-    }
-}

css/_navigate_section_list.scss

@@ -1,80 +0,0 @@
-%navigate-section-list-text {
-    width: 100%;
-    font-size: 14px;
-    line-height: 20px;
-    color: $welcomePageTitleColor;
-    text-align: left;
-    font-family: 'open_sanslight', Helvetica, sans-serif;
-}
-%navigate-section-list-tile-text {
-    @extend %navigate-section-list-text;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    float: left;
-}
-.navigate-section-list-tile {
-    background-color: #1754A9;
-    border-radius: 4px;
-    box-sizing: border-box;
-    display: inline-flex;
-    margin-bottom: 8px;
-    margin-right: 8px;
-    min-height: 100px;
-    padding: 16px;
-    width: 100%;
-
-    &.with-click-handler {
-        cursor: pointer;
-    }
-
-    &.with-click-handler:hover {
-        background-color: #1a5dbb;
-    }
-
-    i {
-        cursor: inherit;
-    }
-
-    .element-after {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .join-button {
-        display: none;
-    }
-
-    &:hover .join-button {
-        display: block
-    }
-}
-.navigate-section-tile-body {
-    @extend %navigate-section-list-tile-text;
-    font-weight: normal;
-    line-height: 24px;
-}
-.navigate-section-list-tile-info {
-    flex: 1;
-    word-break: break-word;
-}
-.navigate-section-tile-title {
-    @extend %navigate-section-list-tile-text;
-    font-weight: bold;
-    line-height: 24px;
-}
-.navigate-section-section-header {
-    @extend %navigate-section-list-text;
-    font-weight: bold;
-    margin-bottom: 16px;
-    display: block;
-}
-.navigate-section-list {
-    position: relative;
-    margin-top: 36px;
-    margin-bottom: 36px;
-    width: 100%;
-}
-.navigate-section-list-empty {
-    text-align: center;
-}

css/_popover.scss

@@ -10,24 +10,14 @@
     right: 0;
     width: 100%;
 }
-
-%vertical-popover-padding {
+.popover-mousemove-padding-right {
     height: 100%;
     position: absolute;
+    right: -20;
     top: 0;
     width: 40px;
 }
 
-.popover-mousemove-padding-left {
-    @extend %vertical-popover-padding;
-    left: -20px;
-}
-
-.popover-mousemove-padding-right {
-    @extend %vertical-popover-padding;
-    right: -20px;
-}
-
 /**
  * An invisible element is added to the top of the popover to ensure the mouse
  * stays over the popover when the popover's height is shrunk, which would then

css/_recording.scss

@@ -2,57 +2,6 @@
     vertical-align: top;
 }
 
-.recording-dialog {
-    flex: 0;
-    flex-direction: column;
-
-    .recording-header {
-        display: flex;
-        flex: 0;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-
-        .recording-title {
-            font-size: 16px;
-            font-weight: bold;
-        }
-    }
-
-    .authorization-panel {
-        display: flex;
-        flex-direction: column;
-        margin-bottom: 10px;
-        padding-bottom: 10px;
-
-        .dropbox-sign-in {
-            align-items: center;
-            border: 1px solid #4285f4;
-            background-color: white;
-            border-radius: 2px;
-            cursor: pointer;
-            display: inline-flex;
-            padding: 10px;
-            font-size: 18px;
-            font-weight: 600;
-            margin: 10px 0px;
-            color: #4285f4;
-
-            .dropbox-logo {
-                background-color: white;
-                border-radius: 2px;
-                display: inline-block;
-                padding-right: 5px;
-                height: 18px;
-            }
-        }
-
-        .logged-in-panel {
-            padding: 10px;
-        }
-    }
-}
-
 .live-stream-dialog {
     /**
      * Set font-size to be consistent with Atlaskit FieldText.
@@ -81,8 +30,37 @@
         width: 100%;
     }
 
-    .google-error {
-        color: $errorColor;
+    /**
+     * 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 {

css/_side_toolbar_container.scss

@@ -0,0 +1,133 @@
+/**
+ * Toolbar side panel main container element.
+ */
+#sideToolbarContainer {
+    background-color: $sideToolbarContainerBg;
+    height: 100%;
+    left: $defaultToolbarSize;
+    max-width: $sidebarWidth;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    width: 0;
+    z-index: $sideToolbarContainerZ;
+
+    /**
+     * Labels inside the side panel.
+     */
+    label {
+        color: $baseLight;
+    }
+
+    /**
+     * Form elements and blocks.
+     */
+    input,
+    a,
+    .sideToolbarBlock,
+    .form-control {
+        display: block;
+        margin-top: 15px;
+        margin-left: 10%;
+        width: 80%;
+    }
+
+    /**
+     * Specify styling of elements inside a block.
+     */
+    .sideToolbarBlock {
+        input, a {
+            margin-left: 0;
+            margin-top: 5px;
+            width: 100%;
+        }
+    }
+
+    /**
+     * Inner container, for example contact list, settings or profile.
+     */
+    .sideToolbarContainer__inner {
+        display: none;
+        height: 100%;
+        width: $sidebarWidth;
+        position: absolute;
+        box-sizing: border-box;
+        color: #FFF;
+
+        .input-control {
+            border: 0;
+        }
+
+        /**
+         * Titles and subtitles of inner containers.
+         */
+        div.title, div.subTitle {
+            margin: 24px 0 11px;
+        }
+
+        /**
+         * Main title size.
+         */
+        div.title {
+            color: $toolbarTitleColor;
+            text-align: center;
+            font-size: $toolbarTitleFontSize;
+        }
+
+        /**
+         * First element after a title.
+         */
+        .first {
+            margin-top: 0 !important;
+        }
+    }
+
+    .settings-menu {
+        display: flex;
+        flex-direction: column;
+        padding-left: 10%;
+        padding-right: 10%;
+
+        .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;
+        }
+    }
+}
+
+/**
+ * Profile
+ */
+.auth_container {
+    ul {
+        padding: 0;
+
+        li {
+            list-style-type: none;
+
+            a.authButton {
+                width: 160px;
+                margin: 10px 20px;
+                padding: 3px 29px;
+                box-sizing: border-box;
+                background-color: #06a5df;
+                border-radius: 4px;
+                cursor: pointer;
+                color: $defaultColor;
+                text-decoration: none;
+                text-align: center;
+            }
+        }
+    }
+}

css/_toolbars.scss

@@ -19,288 +19,380 @@
     vertical-align: middle;
 }
 
-/**
- * TODO: when the old filmstrip has been removed, remove the "new-" prefix.
- */
-.new-toolbox {
-    background-color: $newToolbarBackgroundColor;
-    bottom: calc((#{$newToolbarSize} * 2) * -1);
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
-    left: 0;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 12px 8px;
+.toolbar-container {
+    display: block;
+    left:0;
+    min-height: 100px;
+    opacity: 0;
+    pointer-events: none;
     position: absolute;
-    right: 0;
-    transition: bottom .3s ease-in;
-    width: 100%;
+    right:0;
+    text-align: center;
+    top:0;
+    z-index: $toolbarZ;
+}
+
+/**
+ * Common toolbar styles.
+ */
+.toolbar {
+    height: 100%;
+    pointer-events: auto;
+    position: relative;
     z-index: $toolbarZ;
 
-    &.visible {
-        bottom: 0;
+    /**
+     * Ensure nested elements that don't have a button class, maybe because they
+     * are wrapped in a React Element, still display in a line.
+     */
+    > div {
+        display: inline-block;
     }
 
-    &.no-buttons {
-        display: none;
-    }
-
-    .button-group-center,
-    .button-group-left,
-    .button-group-right {
-        display: flex;
-        width: 33%;
-    }
-
-    .button-group-center {
-        justify-content: center;
-    }
-
-    .button-group-right {
-        justify-content: flex-end;
-    }
-
-    i {
-        border-radius: 5px;
-        cursor: pointer;
-        display: block;
-        font-size: inherit;
-        height: 100%;
-        line-height: inherit;
-        width: 100%;
-    }
-
-    i:hover {
-        background-color: $newToolbarButtonHoverColor;
-    }
-
-    i.toggled {
-        background: $newToolbarButtonToggleColor;
-    }
-
-    i.toggled:hover {
-        background-color: $newToolbarButtonHoverColor;
-    }
-
-    i.disabled {
-        cursor: initial;
-        color: #3b475c;
-    }
-
-    .disabled i {
-        cursor: initial;
-        color: #3b475c;
-    }
-
-    i.disabled:hover {
-        background-color: initial;
-    }
-
-    .icon-hangup {
-        color: $hangupColor;
-        font-size: $newToolbarHangupFontSize;
-    }
-
-    .overflow-menu {
-        font-size: 1.2em;
-        list-style-type: none;
+    /**
+     * Always on top overrides.
+     */
+    &.always-on-top {
         /**
-         * Undo atlaskit padding by reducing margins.
+         * Toolbar button styles for always on top.
          */
-        margin: -15px -24px;
-        padding: 4px 0;
+        .button {
+            font-size: $alwaysOnTopToolbarFontSize;
+            height: $alwaysOnTopToolbarSize;
+            line-height: $alwaysOnTopToolbarSize;
+            width: $alwaysOnTopToolbarSize;
+            &_hangup, &_hangup:hover {
+                font-size: $alwaysOnTopToolbarFontSize;
+            }
+        }
+    }
 
-        .overflow-menu-item {
-            align-items: center;
-            color: #B8C7E0;
+    /**
+     * Toolbar button styles.
+     */
+    .button {
+        color: $toolbarButtonColor;
+        cursor: pointer;
+        z-index: $zindex1;
+        display: inline-block;
+        font-size: $toolbarFontSize;
+        height: $defaultToolbarSize;
+        line-height: $defaultToolbarSize;
+        position: relative;
+        text-align: center;
+        top:0px;
+        vertical-align: middle;
+        width: $defaultToolbarSize;
+
+        &[disabled] {
+            opacity: 0.5;
+        }
+
+        &:hover, &:active {
+            color: $toolbarButtonColor;
             cursor: pointer;
-            display: flex;
-            font-size: 14px;
-            height: 22px;
-            padding: 5px 12px;
+            text-decoration: none;
+        }
 
-            div {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
+        &_hangup, &_hangup:hover {
+            color: $hangupColor;
+            font-size: $hangupFontSize;
+        }
+
+        &:not(.toggled) {
+            &:hover, &:active {
+                // sum opacity with background layer should give us 0.8
+                background: $toolbarSelectBackground;
+            }
+        }
+
+        &.toggled {
+            background: $toolbarToggleBackground;
+
+            &.icon-camera {
+                @extend .icon-camera-disabled;
             }
 
-            &:hover {
-                background: #313D52;
+            &.icon-full-screen {
+                @extend .icon-exit-full-screen;
             }
 
+            &.icon-microphone {
+                @extend .icon-mic-disabled;
+            }
+        }
+
+        &.unclickable {
+            cursor: default;
+
+            &:hover, &:active, &.selected {
+                background: none;
+                cursor: default;
+            }
+        }
+    }
+
+    /**
+     * Primary toolbar styles.
+     */
+    &_primary {
+        background-color: $toolbarBackground;
+        position: absolute;
+        left: 50%;
+        top: 30px;
+        display: inline-block;
+        width: auto;
+        height: $defaultToolbarSize;
+        border-radius: 3px;
+        opacity: 0;
+
+        &.always-on-top {
+            height: $alwaysOnTopToolbarSize;
+            top: 10px;
+        }
+
+        @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;
+        }
+    }
+
+    &_primary a.button:last-child::after {
+        content: none;
+    }
+
+    /**
+     * Secondary toolbar styles.
+     */
+    &_secondary {
+        background-color: $secondaryToolbarBg;
+        position: absolute;
+        align-items: center;
+        box-sizing: border-box;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: 100%;
+        justify-content: flex-start;
+        left: 0;
+        padding-top: 24px;
+        pointer-events: none;
+        top: 0;
+        transform: translateX(-100%);
+        width: $defaultToolbarSize;
+        -webkit-transform: translateX(-100%);
+
+        .button {
+            font-size: $secToolbarFontSize;
+            height: $secToolbarLineHeight;
+            line-height: $secToolbarLineHeight;
+        }
+
+        > * {
+            pointer-events: auto
+        }
+
+        .button.toggled:not(.icon-raised-hand):not(.button-active) {
+            background: $secondaryToolbarBg;
+            cursor: pointer;
+            text-decoration: none;
+
             &.unclickable {
                 cursor: default;
-            }
-            &.unclickable:hover {
-                background: inherit;
-            }
-            &.disabled {
-                cursor: initial;
-                color: #3b475c;
-            }
-        }
 
-        .beta-tag {
-            background: #B8C7E0;
-            border-radius: 2px;
-            color: $newToolbarBackgroundColor;
-            font-size: 11px;
-            font-weight: bold;
-            margin-left: 8px;
-            padding: 0 6px;
-        }
-
-        .overflow-menu-item-icon {
-            margin-right: 10px;
-
-            i {
-                display: inline;
-                font-size: 24px;
+                &:hover, &:active, &.selected {
+                    background: none;
+                    cursor: default;
+                }
             }
-
-            i:hover {
-                background-color: initial;
-            }
-
-            img {
-                max-width: 24px;
-                max-height: 24px;
-            }
-        }
-
-        .profile-text {
-            max-width: 150px;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
         }
     }
 
-    .toolbox-button {
-        color: $toolbarButtonColor;
-        cursor: pointer;
+    /**
+     * Styles the toolbar in filmstrip-only mode.
+     */
+    &_filmstrip-only {
+        background-color: $toolbarBackground;
+        border-radius: 3px;
         display: inline-block;
-        line-height: $newToolbarSize;
-        margin: 0 4px;
-        text-align: center;
-    }
+        height: auto;
+        width: $defaultFilmStripOnlyToolbarSize;
 
-    .toolbar-button-with-badge {
-        position: relative;
+        .button {
+            height: 37px;
+            line-height: 37px !important;
+            width: 37px;
+        }
 
-        .badge-round {
-            bottom: -5px;
-            font-size: 12px;
-            line-height: 20px;
-            min-width: 20px;
-            pointer-events: none;
-            position: absolute;
-            right: -5px;
+        .button-popover-message {
+            width: 100px;
+        }
+
+        .toolbar-button-wrapper:first-child .button {
+            border-top-left-radius: 3px;
+            border-top-right-radius: 3px;
+        }
+        .toolbar-button-wrapper:last-child .button {
+            border-bottom-right-radius: 3px;
+            border-bottom-left-radius: 3px;
         }
     }
 
-    .toolbox-button-wth-dialog {
-        display: inline-block;
-    }
-
-    .toolbox-icon {
-        height: $newToolbarSize;
-        font-size: 24px;
-        width: $newToolbarSize;
+    /**
+     * Toolbar specific round badge.
+     */
+    .badge-round {
+        bottom: 9px;
+        position: absolute;
+        right: 9px;
     }
 }
 
-.always-on-top-toolbox,
-.filmstrip-toolbox {
-    background-color: $newToolbarBackgroundColor;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    z-index: $toolbarZ;
-
-    i {
-        cursor: pointer;
-        display: block;
-    }
-
-    i:hover {
-        background-color: $newToolbarButtonHoverColor;
-    }
-
-    i.toggled {
-        background: $newToolbarButtonToggleColor;
-    }
-
-    i.toggled:hover:not(.disabled) {
-        background-color: $newToolbarButtonHoverColor;
-    }
-
-    .icon-hangup {
-        color: $hangupColor;
-    }
-
-    .toolbox-button {
-        color: $toolbarButtonColor;
-        cursor: pointer;
-        text-align: center;
-    }
-
-    border-radius: 3px;
-}
-
-.always-on-top-toolbox {
-    flex-direction: row;
-    left: 50%;
-    position: absolute;
-    top: 10px;
-    transform: translateX(-50%);
-    z-index: $toolbarZ;
-
-    i {
-        font-size: $newToolbarFontSize;
-        height: $newToolbarSize;
-        line-height: $newToolbarSize;
-        width: $newToolbarSize;
-    }
-
-    .icon-hangup {
-        font-size: $newToolbarHangupFontSize;
-    }
-
-    .disabled {
-        cursor: initial;
-    }
-
-    .toolbox-button:first-child i {
-        border-top-left-radius: 3px;
-        border-bottom-left-radius: 3px;
-    }
-
-    .toolbox-button:last-child i {
-        border-top-right-radius: 3px;
-        border-bottom-right-radius: 3px;
+.filmstrip-only {
+    .toolbox,
+    .toolbox-toolbars {
+        align-items: center;
+        display: flex;
     }
 }
 
-.filmstrip-toolbox {
-    i {
-        font-size: 1.9em;
-        height: 37px;
-        line-height: 37px;
-        width: 37px;
+.subject {
+    background: linear-gradient(to bottom, rgba(255,255,255,.85) , rgba(255,255,255,.35));
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+    box-shadow: 0 0 2px #000000, 0 0 10px #000000;
+    margin-left: 40%;
+    margin-right: 40%;
+    padding: 5px;
+    position: relative;
+    text-align: center;
+    width: auto;
+    z-index: $zindex3;
+
+    &.subject_slide-in {
+        top: 80px;
+        @include transition(top .3s ease-in);
     }
 
-    .toolbox-button:first-child i {
-        border-top-left-radius: 3px;
-        border-top-right-radius: 3px;
+    &.subject_slide-out {
+        top: 0;
+        @include transition(top .3s ease-out);
     }
+}
 
-    .toolbox-button:last-child i {
-        border-bottom-left-radius: 3px;
-        border-bottom-right-radius: 3px;
-    }
+#toolbar_button_profile {
+    height: $toolbarAvatarSize + 2*$toolbarAvatarPadding;
+}
+
+a.button>#avatar {
+    border-radius: 50%;
+    padding-bottom: $toolbarAvatarPadding;
+    padding-top: $toolbarAvatarPadding;
+    width: $toolbarAvatarSize;
+}
+
+#feedbackButton {
+    margin-top: auto;
+}
+
+/**
+ * START of slide in animation for extended toolbar.
+ */
+@include keyframes(slideInX) {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(0%); }
+}
+
+.slideInX {
+  @include animation('slideInX .5s forwards');
+}
+
+@include keyframes(slideOutX) {
+  0% { transform: translateX(0%); }
+  100% { transform: translateX(-100%); }
+}
+
+.slideOutX {
+  @include animation('slideOutX .5s forwards');
+}
+
+@include keyframes(slideInExtX) {
+    0% { transform: translateX(-500%); }
+    100% { transform: translateX(0%); }
+}
+
+.slideInExtX {
+  @include animation('slideInExtX .5s forwards');
+}
+
+@include keyframes(slideOutExtX) {
+    0% { transform: translateX(0%); }
+    100% { transform: translateX(-500%); }
+}
+
+.slideOutExtX {
+  @include animation('slideOutExtX .5s forwards');
+}
+
+/**
+ * END of slide out animation for extended toolbar.
+ */
+
+/**
+ * START of slide in / out animation for main toolbar.
+ */
+@include keyframes(slideInY) {
+    100% { transform: translateY(0%); }
+}
+
+.slideInY {
+  @include animation('slideInY .5s forwards');
+}
+
+@include keyframes(slideOutY) {
+    0% { transform: translateY(0%); }
+    100% { transform: translateY(-100%); }
+}
+
+.slideOutY {
+    @include animation('slideOutY .5s forwards');
+}
+/**
+ * END of slide in / out animation for main toolbar.
+ */
+
+/**
+ * START of slide in animation for extended toolbar panel.
+ */
+@include keyframes(slideInExt) {
+    from { width: 0px; }
+    to   { width: $sidebarWidth; } // TO FIX: Make this value a percentage.
+}
+
+.slideInExt {
+    @include animation("slideInExt .5s forwards");
+}
+
+@include keyframes(slideOutExt) {
+  from { width: $sidebarWidth; } // TO FIX: Make this value a percentage.
+  to   { width: 0px; }
+}
+
+.slideOutExt {
+  @include animation("slideOutExt .5s forwards");
 }
 
 /**

css/_transcription-subtitles.scss

@@ -1,20 +0,0 @@
-.transcription-subtitles{
-    bottom: 10%;
-    font-size: 16px;
-    font-weight: 1000;
-    left: 50%;
-    max-width: 50vw;
-    opacity: 0.80;
-    pointer-events: none;
-    position: absolute;
-    text-shadow: 0px 0px 1px rgba(0,0,0,0.3),
-    0px 1px 1px rgba(0,0,0,0.3),
-    1px 0px 1px rgba(0,0,0,0.3),
-    0px 0px 1px rgba(0,0,0,0.3);
-    transform: translateX(-50%);
-    z-index: $filmstripVideosZ + 1;
-
-    span {
-        background: black;
-    }
-}

css/_variables.scss

@@ -3,7 +3,7 @@
 /**
  * Style variables
  */
-$baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$baseFontFamily: 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $hangupColor: #bf2117;
 $hangupFontSize: 2em;
 
@@ -32,16 +32,24 @@ $defaultDarkColor: #2b3d5c;
 /**
  * Toolbar
  */
+$alwaysOnTopToolbarFontSize: 1em;
+$alwaysOnTopToolbarSize: 30px;
 $defaultToolbarSize: 50px;
-$newToolbarBackgroundColor: rgba(22, 38, 55, 0.8);
-$newToolbarButtonHoverColor: rgba(14, 20, 35, 0.6);
-$newToolbarButtonToggleColor: rgba(14, 20, 35, 1);
-$newToolbarFontSize: 24px;
-$newToolbarHangupFontSize: 32px;
-$newToolbarSize: 40px;
-$newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px);
+$defaultFilmStripOnlyToolbarSize: 37px;
+$secToolbarFontSize: 1.9em;
+$secToolbarLineHeight: 45px;
+$toolbarAvatarPadding: 10px;
+$toolbarAvatarSize: 40px;
+$toolbarFontSize: 1.9em;
 $toolbarTitleFontSize: 19px;
 
+/**
+ * Main controls
+ * TODO: looks like we don't use it
+ */
+$inputSemiBackground: rgba(132, 132, 132, .8);
+$inputLightBackground: #EBEBEB;
+
 /**
  * Video layout
  */
@@ -66,6 +74,10 @@ $feedbackInputBg: #fff;
 $feedbackTextColor: #000;
 $feedbackInputTextColor: #333;
 $feedbackInputPlaceholderColor: #777;
+$rateStarLabelColor: #333;
+$rateStarDefault: #ccc;
+$rateStarActivity: #165ecc;
+$rateStarSize: 34px;
 
 /**
  * Modals
@@ -146,5 +158,5 @@ $watermarkHeight: 74px;
  */
 $welcomePageDescriptionColor: #fff;
 $welcomePageFontFamily: inherit;
-$welcomePageHeaderBackground: linear-gradient(-90deg, #1251AE 0%, #0074FF 50%, #1251AE 100%);
+$welcomePageHeaderBackground: linear-gradient(#165ecc, #44A5FF);
 $welcomePageTitleColor: #fff;

css/_vertical_filmstrip_overrides.scss

@@ -0,0 +1,285 @@
+/**
+ * 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;
+        display: flex;
+        flex-direction: column-reverse;
+        height: 100%;
+        /**
+         * fixed positioning is necessary for remote menus and tooltips to pop
+         * out of the scrolling filmstrip. AtlasKit dialogs and tooltips use
+         * a library called popper which will position its elements fixed if
+         * any parent is also fixed.
+         */
+        position: fixed;
+
+        /**
+         * z-index adjusting is needed because the video state indicator has to
+         * display over the filmstrip when no videos are displayed but still be
+         * clickable but its inline dialogs must display over the video state
+         * indicator when videos are displayed.
+         */
+        z-index: #{$tooltipsZ + 1};
+
+        /**
+         * Hide videos by making them slight to the right.
+         */
+        .filmstrip__videos {
+            right: 0;
+
+            &.hidden {
+                bottom: auto;
+                right: -196px;
+            }
+
+            /**
+             * 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;
+            }
+        }
+
+        /**
+         * Re-styles the local Video and invite button to better fit the
+         * vertical filmstrip layout.
+         */
+        #filmstripLocalVideo {
+            align-self: initial;
+            bottom: 5px;
+            display: flex;
+            flex-direction: column-reverse;
+            height: auto;
+            justify-content: flex-start;
+
+            .filmstrip__invite {
+                padding-bottom: 0px;
+                padding-top: 5px;
+                z-index: $dropdownZ;
+            }
+        }
+
+        /**
+         * Remove unnecssary padding that is normally used to prevent horizontal
+         * filmstrip from overlapping the left edge of the screen.
+         */
+        #filmstripLocalVideo,
+        #filmstripRemoteVideos {
+            padding: 0;
+        }
+
+        #filmstripRemoteVideos {
+            @include minHWAutoFix();
+
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            height: auto;
+            justify-content: flex-end;
+
+            #filmstripRemoteVideosContainer {
+                flex-direction: column-reverse;
+                /**
+                 * Add padding as a hack for Firefox not to show scrollbars when
+                 * unnecessary.
+                 */
+                padding: 1px 0;
+                overflow-x: hidden;
+            }
+        }
+
+        /**
+         * Rotate the hide filmstrip icon so it points towards the right edge
+         * of the screen.
+         */
+        &__toolbar {
+            transform: rotate(-90deg);
+        }
+
+        /**
+         * Move the remote video menu trigger to the bottom left of the
+         * video thumbnail.
+         */
+        .remotevideomenu,
+        .remote-video-menu-trigger {
+            bottom: 0;
+            left: 0;
+            top: auto;
+            right: auto;
+        }
+
+        .remote-video-menu-trigger {
+            margin-bottom: 7px;
+        }
+
+        #remoteVideos {
+            @include minHWAutoFix();
+
+            flex-direction: column;
+            flex-grow: 1;
+        }
+
+        .videocontainer {
+            /**
+             * Move status icons to the bottom right of the thumbnail.
+             */
+            &__toolbar {
+                text-align: right;
+
+                .right {
+                    float: none;
+                    margin: auto;
+                }
+            }
+        }
+    }
+
+    &.filmstrip-only {
+        .filmstrip {
+            flex-direction: row-reverse;
+        }
+        .filmstrip__videos-filmstripOnly {
+            height: 100%;
+        }
+
+        /**
+         * In filmstrip only mode, the toolbar is normally displayed in the
+         * vertical center of the filmstrip strip. In vertical filmstrip mode,
+         * that alignment makes the toolbar appear floating and detached from
+         * the filmstrip. So, instead anchor the toolbar next to the local
+         * video.
+         */
+        .toolbar_filmstrip-only {
+            bottom: 0;
+            top: auto;
+            transform: none;
+        }
+
+    }
+
+    /**
+     * These styles are for the video labels that display on the top right. The
+     * styles adjust the labels' positioning as the filmstrip itself or
+     * filmstrip's remote videos appear and disappear.
+     *
+     * The class with-filmstrip is for when the filmstrip is visible.
+     * The class without-filmstrip is for when the filmstrip has been toggled to
+     * be hidden.
+     * The class opening is for when the filmstrip is transitioning from hidden
+     * to visible.
+     */
+    .video-state-indicator.moveToCorner {
+        transition: right 0.5s;
+
+        &.with-filmstrip {
+            &#recordingLabel {
+                right: 200px;
+            }
+
+            &#videoResolutionLabel {
+                right: 150px;
+            }
+        }
+
+        &.with-filmstrip.opening {
+            transition: 0.9s;
+            transition-timing-function: ease-in-out;
+        }
+
+        &.without-filmstrip {
+            transition: 1.2s ease-in-out;
+            transition-delay: 0.1s;
+        }
+    }
+
+    /**
+     * Apply hardware acceleration to prevent flickering on scroll. The
+     * selectors are specific to icon wrappers to prevent fixed position dialogs
+     * and tooltips from getting a new location context due to translate3d.
+     */
+    .connection-indicator,
+    .remote-video-menu-trigger,
+    .indicator-icon-container {
+        transform: translate3d(0, 0, 0);
+    }
+
+    .indicator-container {
+        float: none;
+    }
+
+    /**
+     * FIXME: disable pointer to allow any elements moved below to still be
+     * clickable. The real fix would to make sure those moved elements are
+     * actually part of the toolbar instead of positioning being faked.
+     */
+    .videocontainer__toolbar {
+        pointer-events: none;
+
+        > div {
+            pointer-events: none;
+        }
+
+        .toolbar-icon {
+            pointer-events: all;
+        }
+    }
+}
+
+/**
+ * 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

@@ -4,8 +4,6 @@
 
 #videospace {
     display: block;
-    height: 100%;
-    width: 100%;
     min-height: 100%;
     position: absolute;
     top: 0px;
@@ -17,6 +15,7 @@
 #largeVideoBackgroundContainer,
 .large-video-background {
     height: 100%;
+    filter: blur(40px);
     left: 0;
     overflow: hidden;
     position: absolute;
@@ -33,9 +32,6 @@
         width: 100%;
     }
 }
-#largeVideoBackgroundContainer {
-    filter: blur(40px);
-}
 
 .videocontainer {
     position: relative;
@@ -86,7 +82,7 @@
          * wrapper needed before we're able to move all top toolbar indicators
          * creation to react.
          */
-        .sc-ifAKCX {
+        .ckAJgx {
             background: none;
         }
     }
@@ -226,11 +222,6 @@
     text-align: center;
 }
 
-#largeVideoContainer {
-    height: 100%;
-    width: 100%;
-}
-
 #largeVideoWrapper {
     box-shadow: 0 0 20px -2px #444;
 }
@@ -557,6 +548,30 @@
     object-fit: cover;
 }
 
+.noMic {
+    position: absolute;
+    border-radius: 8px;
+    z-index: $zindex1;
+    width: 100%;
+    height: 100%;
+    background-image: url("../images/noMic.png");
+    background-color: #000;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.noVideo {
+    position: absolute;
+    border-radius: 8px;
+    z-index: $zindex1;
+    width: 100%;
+    height: 100%;
+    background-image: url("../images/noVideo.png");
+    background-color: #000;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
 .videoMessageFilter {
     -webkit-filter: grayscale(.5) opacity(0.8);
     filter: grayscale(.5) opacity(0.8);
@@ -603,6 +618,7 @@
     padding-left: 10px;
     padding-right: 10px;
 }
+#remotePresenceMessage .no-presence,
 #remoteConnectionMessage {
     display: none;
 }
@@ -624,110 +640,3 @@
                     1px 0px 1px rgba(0,0,0,0.3),
                     0px 0px 1px rgba(0,0,0,0.3);
 }
-
-.display-avatar-with-name {
-    .avatar-container {
-        visibility: visible;
-    }
-
-    .displayNameContainer {
-        visibility: visible;
-    }
-
-    .videocontainer__hoverOverlay {
-        visibility: visible;
-    }
-
-    video {
-        visibility: hidden;
-    }
-}
-
-.display-name-on-black {
-    .avatar-container {
-        visibility: hidden;
-    }
-
-    .displayNameContainer {
-        visibility: visible;
-    }
-
-    .videocontainer__hoverOverlay {
-        visibility: hidden;
-    }
-
-    video {
-        opacity: 0.2;
-        visibility: visible;
-    }
-}
-
-.display-video {
-    .avatar-container {
-        visibility: hidden;
-    }
-
-    .displayNameContainer {
-        visibility: hidden;
-    }
-
-    .videocontainer__hoverOverlay {
-        visibility: hidden;
-    }
-
-    video {
-        visibility: visible;
-    }
-}
-
-.display-name-on-video {
-    .avatar-container {
-        visibility: hidden;
-    }
-
-    .displayNameContainer {
-        visibility: visible;
-    }
-
-    .videocontainer__hoverOverlay {
-        visibility: visible;
-    }
-
-    video {
-        visibility: visible;
-    }
-}
-
-.display-avatar-only {
-    .avatar-container {
-        visibility: visible;
-    }
-
-    .displayNameContainer {
-        visibility: hidden;
-    }
-
-    .videocontainer__hoverOverlay {
-        visibility: hidden;
-    }
-
-    video {
-        visibility: hidden;
-    }
-}
-
-.presence-label {
-    color: $participantNameColor;
-    font-size: 12px;
-    font-weight: 100;
-    left: 0;
-    margin: 0 auto;
-    overflow: hidden;
-    pointer-events: none;
-    right: 0;
-    text-align: center;
-    text-overflow: ellipsis;
-    top: calc(50% + 30px);
-    white-space: nowrap;
-    width: 100%;
-}

css/_welcome_page.scss

@@ -1,22 +1,14 @@
-body.welcome-page {
-    background: inherit;
-    overflow: auto;
-}
-
 .welcome {
-    background-image: $welcomePageHeaderBackground;
-    display: flex;
-    flex-direction: column;
     font-family: $welcomePageFontFamily;
-    justify-content: space-between;
-    min-height: 100vh;
+    height: 100%;
+    overflow: auto;
     position: relative;
 
     .header {
         align-items: center;
+        background: $welcomePageHeaderBackground;
         display: flex;
         flex-direction: column;
-        min-height: fit-content;
         overflow: hidden;
         position: relative;
         text-align: center;
@@ -24,148 +16,72 @@ body.welcome-page {
         .header-text {
             display: flex;
             flex-direction: column;
-            margin-top: $watermarkHeight + 35;
-            margin-bottom: 35px;
-            max-width: calc(100% - 40px);
-            width: 650px;
-            z-index: $zindex2;
+            justify-content: space-around;
+            margin-top: 120px;
+            margin-bottom: 20px;
+            min-height: 286px;
+            width: 645px;
         }
 
         .header-text-title {
             color: $welcomePageTitleColor;
-            font-size: 2.5rem;
-            font-weight: 500;
-            line-height: 1.18;
-            margin-bottom: 16px;
+            font-size: 48px;
+            letter-spacing: -1px;
+            line-height: 58px;
+            margin-bottom: 20px;
         }
 
         .header-text-description {
             color: $welcomePageDescriptionColor;
-            font-size: 1rem;
-            font-weight: 400;
-            line-height: 24px;
-            margin-bottom: 20px;
+            font-size: 20px;
+            line-height: 28px;
+            opacity: 0.8;
         }
 
-        #enter_room {
-            display: flex;
+        .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;
-            max-width: calc(100% - 40px);
-            width: 680px;
-            z-index: $zindex2;
-            background-color: #fff;
-            padding: 25px 30px;
-
-            .enter-room-input-container {
-                width: 100%;
-                padding-right: 8px;
-                padding-bottom: 5px;
-                text-align: left;
-                color: #253858;
-                height: fit-content;
-                border-width: 0px 0px 2px 0px;
-                border-style: solid;
-                border-image: linear-gradient(to right, #dee1e6, #fff) 1;
-
-                .enter-room-title {
-                    font-size: 18px;
-                    font-weight: bold;
-                    padding-bottom: 5px;
-                }
-
-                .enter-room-input {
-                    border: none;
-                    display: inline-block;
-                    width: 100%;
-                    font-size: 14px;
-                }
-
-                ::placeholder {
-                    color: #253858;
-                }
-            }
-
-        }
-
-        .tab-container {
-            font-size: 16px;
-            position: relative;
-            text-align: left;
-            min-height: 354px;
-            width: 710px;
-            background: #75A7E7;
             display: flex;
-            flex-direction: column;
+            margin-bottom: 20px;
+            position: relative;
+            z-index: 2;
 
-            .tab-content{
-                margin: 5px 0px;
-                overflow: hidden;
-                flex-grow: 1;
-                position: relative;
-
-                > * {
-                    position: absolute;
-                }
-            }
-
-            .tab-buttons {
-                font-size: 18px;
-                color: #FFFFFF;
-                display: flex;
-                flex-grow: 0;
-                flex-direction: row;
-                min-height: 54px;
-                width: 100%;
-
-                .tab {
-                    text-align: center;
-                    background: rgba(9,30,66,0.37);
-                    height: 55px;
-                    line-height: 54px;
-                    flex-grow: 1;
-                    cursor: pointer;
-
-                    &.selected, &:hover {
-                        background: rgba(9,30,66,0.71);
-                    }
-
-                    &:last-child {
-                        margin-left: 1px;
-                    }
-                }
+            .enter-room-input {
+                display: inline-block;
+                margin-right: 15px;
+                width: 350px;
             }
         }
     }
 
     .welcome-page-button {
-        width: 51px;
-        height: 35px;
-        font-size: 14px;
-        background: #0074E0;
-        border-radius: 4px;
-        color: #FFFFFF;
-        text-align: center;
-        vertical-align: middle;
-        line-height: 35px;
-        cursor: pointer;
-    }
-
-    .welcome-page-settings {
-        color: $welcomePageDescriptionColor;
-        position: absolute;
-        top: 32px;
-        right: 32px;
-        z-index: $zindex2;
-
-        * {
-            cursor: pointer;
-            font-size: 32px;
-        }
-    }
-
-    .welcome-watermark {
-        position: absolute;
-        width: 100%;
-        height: 100%;
+        font-size: 16px;
+    }
+}
+
+.welcome.with-content {
+    .header {
+        min-height: 552px;
+    }
+    .header-image {
+        left: -61px;
+        top: 401px;
+    }
+}
+
+.welcome.without-content {
+    .header {
+        height: 100%;
+    }
+    .header-image {
+        bottom: -20px;
+        left: 0;
     }
 }

css/deep-linking/_desktop.scss

@@ -1,75 +0,0 @@
-.deep-linking-desktop {
-    background-color: #fff;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-flow: column;
-    .header {
-        width: 100%;
-        height: 55px;
-        background-color: #f1f2f5;
-        padding-top: 15px;
-        padding-left: 50px;
-        display: flex;
-        flex-flow: row;
-        flex: 0 0 55px;
-        .logo {
-            height: 40px;
-        }
-    }
-    .content {
-        padding-top: 40px;
-        padding-bottom: 40px;
-        left: 0px;
-        right: 0px;
-        display: flex;
-        width: 100%;
-        height: 100%;
-        flex-flow: row;
-        .leftColumn {
-            left: 0px;
-            width: 50%;
-            min-height: 156px;
-            display: flex;
-            flex-flow: column;
-            .leftColumnContent{
-                padding: 20px;
-                display: flex;
-                flex-flow: column;
-                height: 100%;
-                .image {
-                    background-image: url('../images/deep-linking-image.png');
-                    background-repeat: no-repeat;
-                    background-position: center;
-                    background-size: contain;
-                    height: 100%;
-                    width: 100%;
-                }
-            }
-
-        }
-        .rightColumn {
-            top: 0px;
-            width: 50%;
-            min-height: 156px;
-            display: flex;
-            flex-flow: row;
-            align-items: center;
-            .rightColumnContent {
-                display: flex;
-                flex-flow: column;
-                padding: 20px 20px 20px 60px;
-                .title {
-                    color: #1c2946;
-                }
-                .description {
-                    color: #606a80;
-                    margin-top: 8px;
-                }
-                .buttons {
-                    margin-top: 16px;
-                }
-            }
-        }
-    }
-}

css/deep-linking/_main.scss

@@ -1,3 +0,0 @@
-@import 'desktop';
-@import 'mobile';
-@import 'no-mobile-app';

css/filmstrip/_filmstrip_toolbar.scss

@@ -1,31 +0,0 @@
-.filmstrip__toolbar {
-    @include flex();
-    flex-direction: column-reverse;
-    flex-wrap: nowrap;
-    position: relative;
-    width: $filmstripToggleButtonWidth;
-
-    button {
-        font-size: 14px;
-        line-height: 1.2;
-        text-align: center;
-        background: transparent;
-        opacity: 0.7;
-        height: auto;
-        width: 100%;
-        padding: 0;
-        margin: 0;
-        border: none;
-        outline: none;
-
-        -webkit-appearance: none;
-
-        &:hover {
-            opacity: 1;
-        }
-
-        i {
-            cursor: pointer;
-        }
-    }
-}

css/filmstrip/_horizontal_filmstrip.scss

@@ -1,77 +0,0 @@
-%align-right {
-    @include flex();
-    flex-direction: row-reverse;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-}
-
-.horizontal-filmstrip .filmstrip {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    padding: 10px 5px;
-    @extend %align-right;
-    transition: bottom .3s;
-    z-index: $filmstripVideosZ;
-
-    &.reduce-height {
-        bottom: $newToolbarSizeWithPadding;
-    }
-
-    &__videos {
-        @extend %align-right;
-        position:relative;
-        padding: 0;
-        /* The filmstrip should not be covered by the left toolbar. */
-        bottom: 0;
-        width:auto;
-        overflow: visible !important;
-
-        &#remoteVideos {
-            border: $thumbnailsBorder solid transparent;
-            padding-left: $defaultToolbarSize + 5;
-            transition: bottom 2s;
-        }
-
-        /**
-         * The local video identifier.
-         */
-        &#filmstripLocalVideo {
-            align-self: flex-end;
-            display: block;
-        }
-
-        &.hidden {
-            bottom: calc(-196px - #{$newToolbarSizeWithPadding});
-        }
-
-        .remote-videos-container {
-            display: flex;
-        }
-    }
-
-    /**
-     * Style the filmstrip videos in filmstrip-only mode.
-     */
-    &__videos-filmstripOnly {
-        margin-top: auto;
-        margin-bottom: auto;
-
-        .filmstrip__videos {
-            &#filmstripLocalVideo {
-                bottom: 0px;
-            }
-        }
-    }
-
-    .remote-videos-container {
-        transition: opacity 1s;
-    }
-
-    &.hide-videos {
-        .remote-videos-container {
-            opacity: 0;
-            pointer-events: none;
-        }
-    }
-}

css/filmstrip/_small_video.scss

@@ -1,51 +0,0 @@
-.filmstrip__videos .videocontainer {
-    display: none;
-    position: relative;
-    background-size: contain;
-    border: $thumbnailVideoBorder solid transparent;
-    border-radius: $borderRadius;
-    margin: 0 $thumbnailVideoMargin;
-
-    &.videoContainerFocused, &:hover {
-        cursor: hand;
-    }
-
-    /**
-     * Focused video thumbnail.
-     */
-    &.videoContainerFocused {
-        border: $thumbnailVideoBorder solid $videoThumbnailSelected;
-        box-shadow: inset 0 0 3px $videoThumbnailSelected,
-        0 0 3px $videoThumbnailSelected;
-    }
-
-    .remotevideomenu > .icon-menu {
-        display: none;
-    }
-
-    /**
-     * Hovered video thumbnail.
-     */
-    &:hover:not(.videoContainerFocused):not(.active-speaker) {
-        cursor: hand;
-        border: $thumbnailVideoBorder solid $videoThumbnailHovered;
-        box-shadow: inset 0 0 3px $videoThumbnailHovered,
-        0 0 3px $videoThumbnailHovered;
-
-        .remotevideomenu > .icon-menu {
-            display: inline-block;
-        }
-    }
-
-    & > video {
-        cursor: hand;
-        border-radius: $borderRadius;
-        object-fit: cover;
-        overflow: hidden;
-    }
-
-    .presence-label {
-        position: absolute;
-        z-index: $zindex3;
-    }
-}

css/filmstrip/_tile_view.scss

@@ -1,113 +0,0 @@
-/**
- * CSS styles that are specific to the filmstrip that shows the thumbnail tiles.
- */
-.tile-view {
-    /**
-     * Add a border around the active speaker to make the thumbnail easier to
-     * see.
-     */
-    .active-speaker {
-        box-shadow: 0 0 5px 3px $videoThumbnailSelected
-    }
-
-    #filmstripRemoteVideos {
-        align-items: center;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        height: 100vh;
-        width: 100vw;
-    }
-
-    .filmstrip__videos .videocontainer {
-        &:not(.active-speaker),
-        &:hover:not(.active-speaker) {
-            border: none;
-            box-shadow: none;
-        }
-    }
-
-    #remoteVideos {
-        /**
-         * Height is modified with an inline style in horizontal filmstrip mode
-         * so !important is used to override that.
-         */
-        height: 100% !important;
-        width: 100%;
-    }
-
-    .filmstrip {
-        align-items: center;
-        display: flex;
-        height: 100%;
-        justify-content: center;
-        left: 0;
-        position: fixed;
-        top: 0;
-        width: 100%;
-        z-index: $filmstripVideosZ
-    }
-
-    /**
-     * Regardless of the user setting, do not let the filmstrip be in a hidden
-     * state.
-     */
-    .filmstrip__videos.hidden {
-        display: block;
-    }
-
-    #filmstripRemoteVideos {
-        box-sizing: border-box;
-
-        /**
-         * Allow vertical scrolling of the thumbnails.
-         */
-        overflow-x: hidden;
-        overflow-y: auto;
-    }
-
-    /**
-     * The size of the thumbnails should be set with javascript, based on
-     * desired column count and window width. The rows are created using flex
-     * and allowing the thumbnails to wrap.
-     */
-    #filmstripRemoteVideosContainer {
-        align-content: center;
-        align-items: center;
-        box-sizing: border-box;
-        display: flex;
-        flex-wrap: wrap;
-        height: 100vh;
-        justify-content: center;
-        padding: 100px 0;
-
-        .videocontainer {
-            border: 0;
-            box-sizing: border-box;
-            display: block;
-            margin: 5px;
-        }
-
-        video {
-            object-fit: contain;
-        }
-    }
-
-    .has-overflow#filmstripRemoteVideosContainer {
-        align-content: baseline;
-    }
-
-    .has-overflow .videocontainer {
-        align-self: baseline;
-    }
-
-    /**
-     * Firefox flex acts a little differently. To make sure the bottom row of
-     * thumbnails is not overlapped by the horizontal toolbar, margin is added
-     * to the local thumbnail to keep it from the bottom of the screen. It is
-     * assumed the local thumbnail will always be on the bottom row.
-     */
-    .has-overflow #localVideoContainer {
-        margin-bottom: 100px !important;
-    }
-}

css/filmstrip/_tile_view_overrides.scss

@@ -1,47 +0,0 @@
-/**
- * Various overrides outside of the filmstrip to style the app to support a
- * tiled thumbnail experience.
- */
-.tile-view {
-    /**
-     * Let the avatar grow with the tile.
-     */
-    .userAvatar {
-        max-height: initial;
-        max-width: initial;
-    }
-
-    /**
-     * Hide various features that should not be displayed while in tile view.
-     */
-    #dominantSpeaker,
-    #filmstripLocalVideoThumbnail,
-    #largeVideoElementsContainer,
-    #sharedVideo,
-    .filmstrip__toolbar {
-        display: none;
-    }
-
-    #localConnectionMessage,
-    #remoteConnectionMessage,
-    .watermark {
-        z-index: $filmstripVideosZ + 1;
-    }
-
-    /**
-     * The follow styling uses !important to override inline styles set with
-     * javascript.
-     *
-     * TODO: These overrides should be more easy to remove and should be removed
-     * when the components are in react so their rendering done declaratively,
-     * making conditional styling easier to apply.
-     */
-    #largeVideoElementsContainer,
-    #remoteConnectionMessage,
-    #remotePresenceMessage {
-        display: none !important;
-    }
-    #largeVideoContainer {
-        background-color: $defaultBackground !important;
-    }
-}

css/filmstrip/_vertical_filmstrip.scss

@@ -1,171 +0,0 @@
-.vertical-filmstrip .filmstrip {
-    &.hide-videos {
-        .remote-videos-container {
-            opacity: 0;
-            pointer-events: none;
-        }
-    }
-
-    /*
-     * 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;
-    }
-
-    @extend %align-right;
-    align-items: flex-end;
-    bottom: 0;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column-reverse;
-    height: 100%;
-    padding: 10px 5px;
-    /**
-     * fixed positioning is necessary for remote menus and tooltips to pop
-     * out of the scrolling filmstrip. AtlasKit dialogs and tooltips use
-     * a library called popper which will position its elements fixed if
-     * any parent is also fixed.
-     */
-    position: fixed;
-    top: 0;
-    transition: height .3s ease-in;
-    right: 0;
-    z-index: $filmstripVideosZ;
-
-    &.reduce-height {
-        height: calc(100% - #{$newToolbarSizeWithPadding});
-    }
-
-    /**
-     * Hide videos by making them slight to the right.
-     */
-    .filmstrip__videos {
-        @extend %align-right;
-        bottom: 0;
-        overflow: visible !important;
-        padding: 0;
-        position:relative;
-        right: 0;
-        width: auto;
-
-        &.hidden {
-            bottom: auto;
-            right: -196px;
-        }
-
-        /**
-         * An id selector is used to match id specificity with existing
-         * filmstrip styles.
-         */
-        &#remoteVideos {
-            border: $thumbnailsBorder solid transparent;
-            padding-left: 0;
-            transition: right 2s;
-        }
-    }
-
-    /**
-     * Re-styles the local Video to better fit vertical filmstrip layout.
-     */
-    #filmstripLocalVideo {
-        align-self: initial;
-        bottom: 5px;
-        display: flex;
-        flex-direction: column-reverse;
-        height: auto;
-        justify-content: flex-start;
-    }
-
-    /**
-     * Remove unnecssary padding that is normally used to prevent horizontal
-     * filmstrip from overlapping the left edge of the screen.
-     */
-    #filmstripLocalVideo,
-    #filmstripRemoteVideos {
-        padding: 0;
-    }
-
-    #filmstripRemoteVideos {
-        @include minHWAutoFix();
-
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        height: auto;
-        justify-content: flex-end;
-
-        #filmstripRemoteVideosContainer {
-            flex-direction: column-reverse;
-            /**
-             * Add padding as a hack for Firefox not to show scrollbars when
-             * unnecessary.
-             */
-            padding: 1px 0;
-            overflow-x: hidden;
-        }
-    }
-
-    #remoteVideos {
-        @include minHWAutoFix();
-
-        flex-direction: column;
-        flex-grow: 1;
-    }
-
-    .remote-videos-container {
-        display: flex;
-        transition: opacity 1s;
-    }
-}
-
-/**
- * Override other styles to support vertical filmstrip mode.
- */
-.filmstrip-only .vertical-filmstrip {
-    .filmstrip {
-        flex-direction: row-reverse;
-    }
-    .filmstrip__videos-filmstripOnly {
-        margin-top: auto;
-        margin-bottom: auto;
-        height: 100%;
-    }
-
-    .filmstrip__videos {
-        &#filmstripLocalVideo {
-            bottom: 0px;
-        }
-    }
-}
-
-/**
- * Workarounds for Edge 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();
-}
-
-/** Edge detection hack **/
-@supports (-ms-ime-align:auto) {
-    @include undoColumnReverseVideos();
-}

css/filmstrip/_vertical_filmstrip_overrides.scss

@@ -1,105 +0,0 @@
-/**
- * Rotate the hide filmstrip icon so it points towards the right edge
- * of the screen.
- */
-.vertical-filmstrip .filmstrip__toolbar {
-    transform: rotate(-90deg);
-}
-
-/**
- * Overrides for video containers that should not be centered aligned to avoid=
- * clashing with the filmstrip.
- */
-.vertical-filmstrip #etherpad,
-.vertical-filmstrip #sharedvideo {
-    text-align: left;
-}
-
-/**
- * Overrides for small videos in vertical filmstrip mode.
- */
-.vertical-filmstrip .filmstrip__videos .videocontainer {
-    /**
-     * Move status icons to the bottom right of the thumbnail.
-     */
-    .videocontainer__toolbar {
-        /**
-         * FIXME: disable pointer to allow any elements moved below to still
-         * be clickable. The real fix would to make sure those moved elements
-         * are actually part of the toolbar instead of positioning being faked.
-         */
-        pointer-events: none;
-        text-align: right;
-
-        > div {
-            pointer-events: none;
-        }
-
-        .right {
-            float: none;
-            margin: auto;
-        }
-
-        .toolbar-icon {
-            pointer-events: all;
-        }
-    }
-
-    /**
-     * Apply hardware acceleration to prevent flickering on scroll. The
-     * selectors are specific to icon wrappers to prevent fixed position dialogs
-     * and tooltips from getting a new location context due to translate3d.
-     */
-    .connection-indicator,
-    .remote-video-menu-trigger,
-    .indicator-icon-container {
-        transform: translate3d(0, 0, 0);
-    }
-
-    .indicator-container {
-        float: none;
-    }
-
-    /**
-     * Move the remote video menu trigger to the bottom left of the video
-     * thumbnail.
-     */
-    .remotevideomenu,
-    .remote-video-menu-trigger {
-        bottom: 0;
-        left: 0;
-        top: auto;
-        right: auto;
-    }
-
-    .remote-video-menu-trigger {
-        margin-bottom: 7px;
-    }
-}
-
-/**
- * Overrides for quality labels in filmstrip only mode. The styles adjust the
- * labels' positioning as the filmstrip itself or filmstrip's remote videos
- * appear and disappear.
- *
- * The class with-filmstrip is for when the filmstrip is visible.
- * The class without-filmstrip is for when the filmstrip has been toggled to
- * be hidden.
- * The class opening is for when the filmstrip is transitioning from hidden
- * to visible.
- */
-.vertical-filmstrip .large-video-labels {
-    &.with-filmstrip {
-        right: 150px;
-    }
-
-    &.with-filmstrip.opening {
-        transition: 0.9s;
-        transition-timing-function: ease-in-out;
-    }
-
-    &.without-filmstrip {
-        transition: 1.2s ease-in-out;
-        transition-delay: 0.1s;
-    }
-}

css/main.scss

@@ -16,6 +16,10 @@
 
 /* Mixins END */
 
+/* Animations BEGIN */
+
+@import "animations";
+
 /* Animations END */
 
 /* Fonts BEGIN */
@@ -27,7 +31,6 @@
 /* Modules BEGIN */
 
 @import 'aui_reset';
-@import 'atlaskit_overrides';
 @import 'base';
 @import 'utils';
 @import 'overlay/overlay';
@@ -38,20 +41,20 @@
 @import 'modals/dialog';
 @import 'modals/feedback/feedback';
 @import 'modals/invite/info';
-@import 'modals/settings/settings';
 @import 'modals/speaker_stats/speaker_stats';
 @import 'modals/video-quality/video-quality';
-@import 'modals/local-recording/local-recording';
 @import 'videolayout_default';
 @import 'notice';
 @import 'popup_menu';
 @import 'recording';
 @import 'login_menu';
+@import 'contact_list';
 @import 'chat';
 @import 'ringing/ringing';
 @import 'welcome_page';
 @import 'welcome_page_content';
 @import 'toolbars';
+@import 'side_toolbar_container';
 @import 'jquery.contextMenu';
 @import 'keyboard-shortcuts';
 @import 'redirect_page';
@@ -65,20 +68,9 @@
 @import '404';
 @import 'policy';
 @import 'popover';
-@import 'filmstrip/filmstrip_toolbar';
-@import 'filmstrip/horizontal_filmstrip';
-@import 'filmstrip/small_video';
-@import 'filmstrip/tile_view';
-@import 'filmstrip/tile_view_overrides';
-@import 'filmstrip/vertical_filmstrip';
-@import 'filmstrip/vertical_filmstrip_overrides';
+@import 'filmstrip';
 @import 'unsupported-browser/main';
 @import 'modals/invite/add-people';
-@import 'deep-linking/main';
-@import 'transcription-subtitles';
-@import '_meetings_list.scss';
-@import 'navigate_section_list';
-@import 'third-party-branding/google';
-@import 'third-party-branding/microsoft';
+@import 'vertical_filmstrip_overrides';
 
 /* Modules END */

css/modals/_dialog.scss

@@ -154,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/device-selection/_device-selection.scss

@@ -4,7 +4,11 @@
 
         > div {
             display: block;
-            margin-bottom: 4px;
+            margin-bottom: 10px;
+        }
+
+        > div:last-child {
+            margin-bottom: 5px;
         }
 
         .device-selector-icon {
@@ -14,10 +18,6 @@
             margin-left: 3px;
         }
 
-        .device-selector-label {
-            margin-bottom: 1px;
-        }
-
         /* device-selector-trigger stylings attempt to mimic AtlasKit button */
         .device-selector-trigger {
             background-color: #0E1624;
@@ -101,22 +101,19 @@
 
     .audio-output-preview {
         font-size: 14px;
+        margin-top: 10px;
 
         a {
-            color: #2684FF;
+            color: 4C9AFF;
             cursor: pointer;
             text-decoration: none;
         }
-
-        a:hover {
-            color: #B3D4FF;
-        }
     }
 
     .audio-input-preview {
-        background: #1B2638;
+        background: #7b7b7b;
         border-radius: 5px;
-        height: 8px;
+        height: 6px;
 
         .audio-input-preview-level {
             background: #4C9AFF;

css/modals/feedback/_feedback.scss

@@ -47,6 +47,10 @@
 
 .feedback-dialog {
     .details {
+        margin-top: 20px;
+        padding-left: 60px;
+        padding-right: 60px;
+
         textarea {
             min-height: 100px;
         }
@@ -73,15 +77,16 @@
         text-align: center;
 
         .star-label {
+            color: $rateStarLabelColor;
             font-size: 14px;
             height: 16px;
         }
 
         .star-btn {
-            color: inherit;
+            color: $rateStarDefault;
             cursor: pointer;
             display: inline-block;
-            font-size: 34px;
+            font-size: $rateStarSize;
             outline: none;
             position: relative;
             text-decoration: none;
@@ -90,7 +95,7 @@
             &.active,
             &:hover,
             &.starHover {
-                color: #36B37E;
+                color: $rateStarActivity;
             };
 
         }

css/modals/invite/_add-people.scss

@@ -13,30 +13,7 @@
         }
 
         .add-telephone-icon {
-            display: flex;
-            height: 28px;
             transform: scaleX(-1);
-            width: 28px;
-
-            i {
-                line-height: 28px;
-                margin: auto;
-            }
-        }
-
-        .footer-text-wrap {
-            display: flex;
-        }
-
-        .footer-telephone-icon {
-            display: flex;
-            transform: scaleX(-1);
-            padding-left: 10px;
-
-            i {
-                line-height: 20px;
-                margin: auto;
-            }
         }
     }
 }

css/modals/invite/_info.scss

@@ -1,7 +1,6 @@
 .info-dialog {
     cursor: default;
     display: flex;
-    font-size: 14px;
 
     .info-dialog-action-link {
         display: inline-block;
@@ -39,7 +38,7 @@
     .info-dialog-copy-element {
         opacity: 0;
         pointer-events: none;
-        position: absolute;
+        position: fixed;
         -webkit-user-select: text;
         user-select: text;
     }
@@ -56,13 +55,12 @@
         }
     }
 
-    .info-dialog-conference-url,
-    .info-dialog-live-stream-url {
-        width: max-content;
-        width: -moz-max-content;
-        width: -webkit-max-content;
-        word-break: break-all;
-        max-width: 400px;
+    .info-dialog-conference-url {
+        max-width: 250px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        user-select: text;
+        white-space: nowrap;
     }
 
     .info-dialog-dial-in {
@@ -79,29 +77,19 @@
         font-size: 16px;
     }
 
-    .info-dialog-url-text,
-    .info-dialog-url-text:hover {
-        color: inherit;
-        cursor: inherit;
-    }
-
     .info-dialog-title {
         font-weight: bold;
         margin-bottom: 10px;
     }
 
-    .info-dialog-password,
     .info-password,
+    .info-dialog-password,
     .info-password-form {
-        align-items: baseline;
         display: flex;
     }
 
-    .info-label {
-        font-weight: bold;
-    }
-
     .info-password-field {
+        margin-left: 2px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -122,22 +110,25 @@
     .info-password-local {
         user-select: text;
     }
+
+    .conference-id {
+        margin-left: 5px;
+    }
 }
 
 .dial-in-page {
     align-items: center;
-    box-sizing: border-box;
     display: flex;
     flex-direction: column;
     font-size: 24px;
-    max-height: 100%;
-    overflow: auto;
-    padding: 25px;
-    position: absolute;
-    transform: translateY(-50%);
-    top: 50%;
+    height: 100%;
+    justify-content: center;
     width: 100%;
 
+    * {
+        user-select: text;
+    }
+
     .dial-in-numbers-list {
         font-size: 24px;
         margin-top: 20px;
@@ -145,16 +136,6 @@
 
     .dial-in-conference-id {
         text-align: center;
-        min-width: 200px;
         width: 30%;
     }
 }
-
-.info-dialog,
-.dial-in-page {
-    * {
-        user-select: text;
-        -moz-user-select: text;
-        -webkit-user-select: text;
-    }
-}

css/modals/local-recording/_local-recording.scss

@@ -1,92 +0,0 @@
-.localrec-participant-stats {
-    list-style: none;
-    padding: 0;
-    width: 100%;
-    font-weight: 500;
-
-    .localrec-participant-stats-item__status-dot {
-        position: relative;
-        display: block;
-        width: 9px;
-        height: 9px;
-        border-radius: 50%;
-        margin: 0 auto;
-
-        &.status-on {
-            background: green;
-        }
-
-        &.status-off {
-            background: gray;
-        }
-
-        &.status-unknown {
-            background: darkgoldenrod;
-        }
-
-        &.status-error {
-            background: darkred;
-        }
-    }
-
-    .localrec-participant-stats-item__status,
-    .localrec-participant-stats-item__name,
-    .localrec-participant-stats-item__sessionid {
-        display: inline-block;
-        margin: 5px 0;
-        vertical-align: middle;
-    }
-    .localrec-participant-stats-item__status {
-        width: 5%;
-    }
-    .localrec-participant-stats-item__name {
-        width: 40%;
-    }
-    .localrec-participant-stats-item__sessionid {
-        width: 55%;
-    }
-
-    .localrec-participant-stats-item__name,
-    .localrec-participant-stats-item__sessionid {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-}
-
-.localrec-control-info-label {
-    font-weight: bold;
-}
-
-.localrec-control-info-label:after {
-    content: ' ';
-}
-
-.localrec-control-action-link {
-    display: inline-block;
-    line-height: 1.5em;
-
-    a {
-        cursor: pointer;
-        vertical-align: middle;
-    }
-}
-
-.localrec-control-action-link:before {
-    color: $linkFontColor;
-    content: '\2022';
-    font-size: 1.5em;
-    padding: 0 10px;
-    vertical-align: middle;
-}
-
-.localrec-control-action-link:first-child:before {
-    content: '';
-    padding: 0;
-}
-
-.localrec-control-action-links {
-    font-weight: bold;
-    margin-top: 10px;
-    white-space: nowrap;
-}

css/modals/settings/_settings.scss

@@ -1,61 +0,0 @@
-.settings-pane {
-    display: flex;
-    width: 100%;
-
-    &.profile-pane {
-        flex-direction: column;
-    }
-
-    .auth-name {
-        margin-bottom: 4px;
-    }
-
-    .calendar-tab,
-    .device-selection {
-        margin-top: 20px;
-    }
-
-    .mock-atlaskit-label {
-        color: #56637A;
-        font-size: 12px;
-        font-weight: 600;
-        line-height: 1.33;
-        padding: 20px 0px 4px 0px;
-    }
-
-    .calendar-tab,
-    .more-tab,
-    .profile-edit {
-        display: flex;
-        width: 100%;
-    }
-
-    .profile-edit-field,
-    .settings-sub-pane {
-        flex: 1;
-    }
-
-    .profile-edit-field {
-        margin-right: 20px;
-    }
-
-    .language-settings {
-        max-width: 50%;
-    }
-
-    .calendar-tab {
-        align-items: center;
-        flex-direction: column;
-        font-size: 14px;
-        min-height: 100px;
-        text-align: center;
-    }
-
-    .calendar-tab-sign-in {
-        margin-top: 20px;
-    }
-
-    .sign-out-cta {
-        margin-bottom: 20px;
-    }
-}

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

@@ -135,67 +135,62 @@
     }
 }
 
-.modal-dialog-form {
-    .video-quality-dialog-title {
-        display: none;
-    }
-}
-
-#videoResolutionLabel {
-    z-index: $zindex3 + 1;
-}
-
-.large-video-labels {
-    display: flex;
-    position: absolute;
-    top: 30px;
-    right: 30px;
-    transition: right 0.5s;
-    z-index: $zindex3;
-
-    .circular-label {
-        color: white;
-        font-weight: bold;
-        margin-left: 8px;
-        opacity: 0.8;
-    }
-
-    .circular-label {
-        background: #B8C7E0;
-    }
-
-    .circular-label.file {
-        background: #FF5630;
-    }
-
-    .circular-label.local-rec {
-        background: #FF5630;
-    }
-
-    .circular-label.stream {
-        background: #0065FF;
-    }
-
-    .recording-label.center-message {
-        background: $videoStateIndicatorBackground;
-        bottom: 50%;
-        display: block;
-        left: 50%;
-        padding: 10px;
-        position: fixed;
-        transform: translate(-50%, -50%);
-        z-index: $centeredVideoLabelZ;
-    }
-}
-
-.circular-label {
+.video-state-indicator {
     background: $videoStateIndicatorBackground;
-    border-radius: 50%;
-    box-sizing: border-box;
     cursor: default;
     font-size: 13px;
     height: $videoStateIndicatorSize;
-    line-height: $videoStateIndicatorSize;
-    text-align: center;
+    line-height: 20px;
+    text-align: left;
     min-width: $videoStateIndicatorSize;
+    border-radius: 50%;
+    position: absolute;
+    box-sizing: border-box;
+
+    i {
+        line-height: $videoStateIndicatorSize;
+    }
+
+    /**
+     * Give the label padding so it has more volume and can be easily clicked.
+     */
+    .video-quality-label-status {
+        line-height: $videoStateIndicatorSize;
+        min-width: $videoStateIndicatorSize;
+        text-align: center;
+    }
 }
+
+.centeredVideoLabel.moveToCorner {
+    z-index: $tooltipsZ;
+}
+
+#videoResolutionLabel {
+    z-index: #{$tooltipsZ + 1};
+}
+
+.centeredVideoLabel {
+    bottom: 45%;
+    border-radius: 2px;
+    display: none;
+    padding: 10px;
+    transform: translate(-50%, 0);
+    z-index: $centeredVideoLabelZ;
+
+    &.moveToCorner {
+        bottom: auto;
+        transform: none;
+        -webkit-transition: all 2s 2s linear;
+        transition: all 2s 2s linear;
+    }
+}
+
+.moveToCorner {
+    position: absolute;
+    top: 30px;
+    right: 30px;
+}
+
+.moveToCorner + .moveToCorner {
+    right: 80px;
+}

css/ringing/_ringing.scss

@@ -6,10 +6,12 @@
     height: 100%;
     position: fixed;
     z-index: $ringingZ;
-    @include transparentBg(#283447, 0.95);
+    background: linear-gradient(transparent, #000);
+    opacity: 0.8;
 
     &.solidBG {
         background: $defaultBackground;
+        opacity: 1;
     }
 
     &__content {
@@ -20,26 +22,20 @@
         top: 50%;
         margin-left: -200px;
         margin-top: -125px;
+        font-weight: 400;
+        font-size: 14px;
         text-align: center;
-        font-weight: normal;
-        color: #FFFFFF;
     }
 
     &__avatar {
-        width: 128px;
-        height: 128px;
+        width: 100px;
+        height: 100px;
         border-radius: 50%;
-        border: 2px solid #1B2638;
     }
 
-    &__status{
-        margin-top: 15px;
-        font-size: 14px;
-        line-height: 20px;
-    }
-
-    &__name {
-        font-size: 24px;
-        line-height: 32px;
+    &__caller-info {
+        .mention {
+            color: #333;
+        }
     }
 }

css/third-party-branding/google.scss

@@ -1,32 +0,0 @@
-/**
- * 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;
-    }
-}

css/third-party-branding/microsoft.scss

@@ -1,28 +0,0 @@
-/**
- * The Microsoft sign in button must follow Microsoft's brand guidelines.
- * See: https://docs.microsoft.com/en-us/azure/active-directory/
- *     develop/active-directory-branding-guidelines
- */
-.microsoft-sign-in {
-    align-items: center;
-    background: #FFFFFF;
-    border: 1px solid #8C8C8C;
-    box-sizing: border-box;
-    cursor: pointer;
-    display: inline-flex;
-    font-family: Segoe UI, Roboto, arial, sans-serif;
-    height: 41px;
-    padding: 12px;
-
-    .microsoft-cta {
-        display: inline-block;
-        color: #5E5E5E;
-        font-size: 15px;
-        line-height: 41px;
-    }
-
-    .microsoft-logo {
-        display: inline-block;
-        margin-right: 12px;
-    }
-}

css/unsupported-browser/_main.scss

@@ -1 +1,3 @@
+@import 'no-mobile-app';
 @import 'unsupported-desktop-browser';
+@import 'unsupported-mobile-browser';

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

@@ -1,23 +1,10 @@
-.deep-linking-mobile {
+.unsupported-mobile-browser {
     background-color: #fff;
     height: 100vh;
     overflow: auto;
     position: relative;
     width: 100vw;
 
-    .header {
-        width: 100%;
-        height: 70px;
-        background-color: #f1f2f5;
-        text-align: center;
-        .logo {
-            margin-top: 15px;
-            margin-left: auto;
-            margin-right: auto;
-            height: 40px;
-        }
-    }
-
     a {
         text-decoration: none
     }
@@ -33,19 +20,10 @@
         a:active {
             text-decoration: none;
         }
-
-        .image {
-            max-width: 80%;
-        }
-    }
-
-    &__text {
-        font-weight: bolder;
-        padding: 10px 10px 0px 10px;
     }
 
     &__text,
-    .deep-linking-dial-in  {
+    .unsupported-dial-in  {
         font-size: 1.2em;
         line-height: em(29px, 21px);
         margin-bottom: 0.65em;
@@ -61,27 +39,21 @@
         }
     }
 
-    &__href {
-        height: 2.2857142857142856em;
-        line-height: 2.2857142857142856em;
-        margin: 18px auto 20px;
-        max-width: 300px;
-        width: auto;
-        font-weight: bolder;
+    &__logo {
+        height: 108px;
+        width: 77px;
     }
 
     &__button {
         border: 0;
         height: 2.2857142857142856em;
         line-height: 2.2857142857142856em;
-        margin: 18px auto 10px;
-        padding: 0px 10px 0px 10px;
+        margin: 18px auto 20px;
         max-width: 300px;
         width: auto;
         @include border-radius(3px);
         background-color: $unsupportedBrowserButtonBgColor;
         color: #505F79;
-        font-weight: bold;
 
         &:active {
             background-color: $unsupportedBrowserButtonBgColor;
@@ -97,7 +69,7 @@
         }
     }
 
-    .deep-linking-dial-in {
+    .unsupported-dial-in {
         display: none;
 
         &.has-numbers {