rn,responsive-ui: refactor dimensions detection

Use a dimensions detecting root component. The Dimensions module does not
measure the app's view size, but the Window, which may not be the same, for
example on iOS when PiP is used.

Also refactor the aspect ratio wrap component since it can be taken directly
from the store.

Last, remove the use of DimensionsDetector on LargeVideo and TileView since they
occupy the full-screen anyway.

Fixes PiP mode on iOS.

.flowconfig

@@ -11,6 +11,9 @@ node_modules/react-native/Libraries/react-native/React.js
 ; "node_modules/react-native" but in the source repo it is in the root
 node_modules/react-native/Libraries/react-native/React.js
 
+; Flow doesn't support platforms
+.*/Libraries/Utilities/LoadingView.js
+
 ; Ignore polyfills
 node_modules/react-native/Libraries/polyfills/.*
 
@@ -112,4 +115,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.98.0
+^0.104.0

.github/ISSUE_TEMPLATE/1-bug-report.md

@@ -4,25 +4,45 @@ about: Create a report to help us improve
 
 ---
 
-*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.
+This issue tracker is only for reporting bugs and tracking issues related to the source code.
 
-## Description
----
+Before posting, please make sure to check if the same or similar bugs have already been discussed: https://github.com/jitsi/jitsi-meet/issues
 
-## Current behavior
----
+General questions regarding usage, installation, etc. should be posted at https://community.jitsi.org. They will be closed if posted here.
 
-## Expected Behavior
----
+-->
 
-## Possible Solution
----
+### Description:
 
-## Steps to reproduce
----
+<!-- Please describe the bug clearly and concisely. -->
 
-# Environment details
----
+### Steps to reproduce:
+
+1. <!-- Open '...' -->
+2. <!-- Click on '...' -->
+3. <!-- and so on... -->
+
+### Expected behavior:
+
+<!-- Please describe what should happen. -->
+
+### Actual behavior:
+
+<!-- Please describe what actually happens. -->
+<!-- Please attach screenshot if possible. -->
+
+### Server information:
+
+- Jitsi Meet version:
+- Operating System:
+
+### Client information:
+
+- Browser / app version:
+- Operating System:
+
+### Additional information:
+
+<!-- Please provide additional information about the bug, if any. -->

.github/ISSUE_TEMPLATE/2-feature-request.md

@@ -9,7 +9,7 @@ Thank you for suggesting an idea to make Jitsi Meet better.
 
 Please fill in as much of the template below as you're able.
 
-Note that the ultimate decission for implementing features lies on the Jitsi team, not all feature requests shall be accepted.
+Note that the ultimate decision for implementing features lies on the Jitsi team, not all feature requests shall be accepted.
 -->
 
 **Is your feature request related to a problem you are facing?**

.github/ISSUE_TEMPLATE/2-help.md

@@ -1,10 +0,0 @@
----
-name: Need help with Jitsi Meet?
-about: Please ask it in our community at https://community.jitsi.org
-
----
-
-If you have a question about Jitsi Meet that is not a bug report or feature
-request, please post it in https://community.jitsi.org
-
-Questions posted to this repository will be closed.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Need help with Jitsi Meet?
+    url: https://community.jitsi.org
+    about: Please ask it in our community.

.github/workflows/ci.yml

@@ -0,0 +1,16 @@
+name: Simple CI
+
+on: [pull_request]
+
+jobs:
+  run-ci:
+    name: Build Frontend
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '12.x'
+    - run: npm install
+    - run: npm run lint
+    - run: make

.gitignore

@@ -61,14 +61,8 @@ buck-out/
 
 # fastlane
 #
-# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
-# screenshots whenever they are needed.
-# For more information about the recommended setup visit:
-# https://docs.fastlane.tools/best-practices/source-control/
-
 */fastlane/report.xml
 */fastlane/Preview.html
-*/fastlane/screenshots
 
 # Build artifacts
 *.jsbundle

.npmrc

@@ -0,0 +1 @@
+package-lock=true

.travis.yml

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

CONTRIBUTING.md

@@ -27,3 +27,99 @@ in the agreement, unfortunately, we cannot accept your contribution.
 - Maintain a clean list of commits, squash them if necessary.
 - Rebase your topic branch on top of the master branch before creating the pull
  request.
+
+## Coding style
+
+### Comments
+
+* Comments documenting the source code are required.
+
+  * Comments from which documentation is automatically generated are **not**
+    subject to case-by-case decisions. Such comments are used, for example, on
+    types and their members. Examples of tools which automatically generate
+    documentation from such comments include JSDoc, Javadoc, Doxygen.
+
+  * Comments which are not automatically processed are strongly encouraged. They
+    are subject to case-by-case decisions. Such comments are often observed in
+    function bodies.
+
+* Comments should be formatted as proper English sentences. Such formatting pays
+  attention to, for example, capitalization and punctuation.
+
+### Duplication
+
+* Don't copy-paste source code. Reuse it.
+
+### Formatting
+
+* Line length is limited to 120 characters.
+
+* Sort by alphabetical order in order to make the addition of new entities as
+  easy as looking a word up in a dictionary. Otherwise, one risks duplicate
+  entries (with conflicting values in the cases of key-value pairs). For
+  example:
+
+  * Within an `import` of multiple names from a module, sort the names in
+    alphabetical order. (Of course, the default name stays first as required by
+    the `import` syntax.)
+
+    ````javascript
+    import {
+        DOMINANT_SPEAKER_CHANGED,
+        JITSI_CLIENT_CONNECTED,
+        JITSI_CLIENT_CREATED,
+        JITSI_CLIENT_DISCONNECTED,
+        JITSI_CLIENT_ERROR,
+        JITSI_CONFERENCE_JOINED,
+        MODERATOR_CHANGED,
+        PEER_JOINED,
+        PEER_LEFT,
+        RTC_ERROR
+    } from './actionTypes';
+    ````
+
+  * Within a group of imports (e.g. groups of imports delimited by an empty line
+    may be: third-party modules, then project modules, and eventually the
+    private files of a module), sort the module names in alphabetical order.
+
+    ````javascript
+    import React, { Component } from 'react';
+    import { connect } from 'react-redux';
+    ````
+
+### Indentation
+
+* Align `switch` and `case`/`default`. Don't indent the `case`/`default` more
+  than its `switch`.
+
+  ````javascript
+  switch (i) {
+  case 0:
+      ...
+      break;
+  default:
+      ...
+  }
+  ````
+
+### Naming
+
+* An abstraction should have one name within the project and across multiple
+  projects. For example:
+
+  * The instance of lib-jitsi-meet's `JitsiConnection` type should be named
+    `connection` or `jitsiConnection` in jitsi-meet, not `client`.
+
+  * The class `ReducerRegistry` should be defined in ReducerRegistry.js and its
+    imports in other files should use the same name. Don't define the class
+    `Registry` in ReducerRegistry.js and then import it as `Reducers` in other
+    files.
+
+* The names of global constants (including ES6 module-global constants) should
+  be written in uppercase with underscores to separate words. For example,
+  `BACKGROUND_COLOR`.
+
+* The underscore character at the beginning of a name signals that the
+  respective variable, function, property is non-public i.e. private, protected,
+  or internal. In contrast, the lack of an underscore at the beginning of a name
+  signals public API.

Makefile

@@ -3,6 +3,7 @@ CLEANCSS = ./node_modules/.bin/cleancss
 DEPLOY_DIR = libs
 LIBJITSIMEET_DIR = node_modules/lib-jitsi-meet/
 LIBFLAC_DIR = node_modules/libflacjs/dist/min/
+RNNOISE_WASM_DIR = node_modules/rnnoise-wasm/dist/
 NODE_SASS = ./node_modules/.bin/node-sass
 NPM = npm
 OUTPUT_DIR = .
@@ -20,7 +21,8 @@ compile:
 clean:
 	rm -fr $(BUILD_DIR)
 
-deploy: deploy-init deploy-appbundle deploy-lib-jitsi-meet deploy-libflac deploy-css deploy-local
+.NOTPARALLEL:
+deploy: deploy-init deploy-appbundle deploy-rnnoise-binary deploy-lib-jitsi-meet deploy-libflac deploy-css deploy-local
 
 deploy-init:
 	rm -fr $(DEPLOY_DIR)
@@ -47,6 +49,8 @@ deploy-appbundle:
 		$(BUILD_DIR)/analytics-ga.min.map \
 		$(BUILD_DIR)/video-blur-effect.min.js \
 		$(BUILD_DIR)/video-blur-effect.min.map \
+		$(BUILD_DIR)/rnnoise-processor.min.js \
+		$(BUILD_DIR)/rnnoise-processor.min.map \
 		$(DEPLOY_DIR)
 
 deploy-lib-jitsi-meet:
@@ -63,6 +67,11 @@ deploy-libflac:
 		$(LIBFLAC_DIR)/libflac4-1.3.2.min.js.mem \
 		$(DEPLOY_DIR)
 
+deploy-rnnoise-binary:
+	cp \
+		$(RNNOISE_WASM_DIR)/rnnoise.wasm \
+		$(DEPLOY_DIR)
+
 deploy-css:
 	$(NODE_SASS) $(STYLES_MAIN) $(STYLES_BUNDLE) && \
 	$(CLEANCSS) $(STYLES_BUNDLE) > $(STYLES_DESTINATION) ; \
@@ -71,12 +80,13 @@ deploy-css:
 deploy-local:
 	([ ! -x deploy-local.sh ] || ./deploy-local.sh)
 
-dev: deploy-init deploy-css deploy-lib-jitsi-meet deploy-libflac
+.NOTPARALLEL:
+dev: deploy-init deploy-css deploy-rnnoise-binary 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 && \
+	cp -r *.js *.html resources/*.txt connection_optimization favicon.ico fonts images libs static sounds LICENSE lang source_package/jitsi-meet && \
 	cp css/all.css source_package/jitsi-meet/css && \
 	(cd source_package ; tar cjf ../jitsi-meet.tar.bz2 jitsi-meet) && \
 	rm -rf source_package

README.md

@@ -1,8 +1,8 @@
 # Jitsi Meet - Secure, Simple and Scalable Video Conferences
 
-Jitsi Meet is an open-source (Apache) WebRTC JavaScript application that uses [Jitsi Videobridge](https://jitsi.org/videobridge) to provide high quality, [secure](#security) and scalable video conferences. Jitsi Meet in action can be seen at [here at the session #482 of the VoIP Users Conference](http://youtu.be/7vFUVClsNh0).
+Jitsi Meet is an open-source (Apache) WebRTC JavaScript application that uses [Jitsi Videobridge](https://jitsi.org/videobridge) to provide high quality, [secure](https://jitsi.org/security) and scalable video conferences. Jitsi Meet in action can be seen at [here at the session #482 of the VoIP Users Conference](http://youtu.be/7vFUVClsNh0).
 
-The Jitsi Meet client runs in your browser, without installing anything on your computer. You can try it out at https://meet.jit.si .
+The Jitsi Meet client runs in your browser, without installing anything else on your computer. You can try it out at https://meet.jit.si.
 
 Jitsi Meet allows very efficient collaboration. Users can stream their desktop or only some windows. It also supports shared document editing with Etherpad.
 
@@ -10,9 +10,11 @@ Jitsi Meet allows very efficient collaboration. Users can stream their desktop o
 
 On the client side, no installation is necessary. You just point your browser to the URL of your deployment. This section is about installing a Jitsi Meet suite on your server and hosting your own conferencing service.
 
-Installing Jitsi Meet is a simple experience. For Debian-based system, 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 a simple experience. For Debian-based system, following the [quick install](https://jitsi.github.io/handbook/docs/devops-guide/devops-guide-quickstart) document, which uses the package system. You can also see a demonstration of the process in [this tutorial video](https://jitsi.org/tutorial).
 
-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).
+For other systems, or if you wish to install all components manually, see the [detailed manual installation instructions](https://jitsi.github.io/handbook/docs/devops-guide/devops-guide-manual).
+
+Installation with Docker is also available. Please see the [instruction](https://jitsi.github.io/handbook/docs/devops-guide/devops-guide-docker).
 
 ## Download
 
@@ -27,86 +29,32 @@ You can download Debian/Ubuntu binaries:
 You can download source archives (produced by ```make source-package```):
 * [source builds](https://download.jitsi.org/jitsi-meet/src/)
 
-You can get our mobile versions from here:
+### Mobile apps
+
 * [Android](https://play.google.com/store/apps/details?id=org.jitsi.meet)
+
+[<img src="resources/img/google-play-badge.png" height="50">](https://play.google.com/store/apps/details?id=org.jitsi.meet)
+
+* [Android (F-Droid)](https://f-droid.org/en/packages/org.jitsi.meet/)
+
+[<img src="resources/img/f-droid-badge.png" height="50">](https://f-droid.org/en/packages/org.jitsi.meet/)
+
 * [iOS](https://itunes.apple.com/us/app/jitsi-meet/id1165103905)
 
-## Building the sources
+[<img src="resources/img/appstore-badge.png" height="50">](https://itunes.apple.com/us/app/jitsi-meet/id1165103905)
 
-Node.js >= 10 and npm >= 6 are required.
+You can also sign up for our open beta testing here:
 
-On Debian/Ubuntu systems, the required packages can be installed with:
-```
-sudo apt-get install npm nodejs
-cd jitsi-meet
-npm install
-```
+* [Android](https://play.google.com/apps/testing/org.jitsi.meet)
+* [iOS](https://testflight.apple.com/join/isy6ja7S)
 
-To build the Jitsi Meet application, just type
-```
-make
-```
+## Release notes
 
-### Working with the library sources (lib-jitsi-meet)
+Release notes for Jitsi Meet are maintained on [this repository](https://github.com/jitsi/jitsi-meet-release-notes).
 
-By default the library is build from its git repository sources. The default dependency path in package.json is :
-```json
-"lib-jitsi-meet": "jitsi/lib-jitsi-meet",
-```
+## Development
 
-To work with local copy you must change the path to:
-```json
-"lib-jitsi-meet": "file:///Users/name/local-lib-jitsi-meet-copy",
-```
-
-To make the project you must force it to take the sources as 'npm update':
-```
-npm install lib-jitsi-meet --force && make
-```
-
-Or if you are making only changes to the library:
-```
-npm install lib-jitsi-meet --force && make deploy-lib-jitsi-meet
-```
-
-Alternative way is to use [npm link](https://docs.npmjs.com/cli/link).
-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
-npm link
-
-cd ../jitsi-meet
-
-#### create symlink from the local node_modules folder to the global lib-jitsi-meet symlink
-npm link lib-jitsi-meet
-```
-
- After changes in local `lib-jitsi-meet` repository, you can rebuild it with `npm run install` and your `jitsi-meet` repository will use that modified library.
-Note: when using node version 4.x, the make file of jitsi-meet do npm update which will delete the link. It is no longer the case with version 6.x.
-
-If you do not want to use local repository anymore you should run
-```bash
-cd jitsi-meet
-npm unlink lib-jitsi-meet
-npm install
-```
-### Running with webpack-dev-server for development
-
-Use it at the CLI, type
-```
-make dev
-```
-
-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:
-```
-export WEBPACK_DEV_SERVER_PROXY_TARGET=https://your-example-server.com
-make dev
-```
-
-The app should be running at https://localhost:8080/
+For web development see [here](https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-web), and for mobile see [here](https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-mobile).
 
 ## Contributing
 
@@ -118,21 +66,14 @@ see our [guidelines for contributing](CONTRIBUTING.md).
 Jitsi Meet provides a very flexible way of embedding in external applications by using the [Jitsi Meet API](doc/api.md).
 
 ## Security
-WebRTC does not provide a way of conducting multi-party conversations with end-to-end encryption. 
-Unless you consistently compare DTLS fingerprints with your peers vocally, the same goes for one-to-one calls.
-As a result, your stream is encrypted on the network but decrypted on the machine that hosts the bridge when using Jitsi Meet.
 
-The Jitsi Meet architecture allows you to deploy your own version, including
-all server components. In that case, your security guarantees will be roughly
-equivalent to a direct one-to-one WebRTC call. This is the uniqueness of
-Jitsi Meet in terms of security.
+The security section here was starting to feel a bit too succinct for the complexity of the topic, so we created a post that covers the topic much more broadly here: https://jitsi.org/security
 
-The [meet.jit.si](https://meet.jit.si) service is maintained by the Jitsi team
-at [8x8](https://8x8.com).
+The section on end-to-end encryption in that document is likely going to be one of the key points of interest: https://jitsi.org/security/#e2ee
 
-## Mobile app
-Jitsi Meet is also available as a React Native app for Android and iOS.
-Instructions on how to build it can be found [here](doc/mobile.md).
+## Security issues
+
+For information on reporting security vulnerabilities in Jitsi Meet, see [SECURITY.md](./SECURITY.md).
 
 ## Acknowledgements
 

SECURITY.md

@@ -0,0 +1,9 @@
+# Security
+
+## Reporting security issuess
+
+We take security very seriously and develop all Jitsi projects to be secure and safe.
+
+If you find (or simply suspect) a security issue in any of the Jitsi projects, please send us an email to security@jitsi.org.
+
+**We encourage responsible disclosure for the sake of our users, so please reach out before posting in a public space.**

android/README.md

@@ -1,380 +1,3 @@
 # Jitsi Meet SDK for Android
 
-## Sample applications using the SDK
-
-If you want to see how easy integrating the Jitsi Meet SDK into a native application is, take a look at the
-[sample applications repository](https://github.com/jitsi/jitsi-meet-sdk-samples).
-
-## 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 or any of its dependencies, 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:2.+') { transitive = true }
-}
-```
-
-### Build and use your own SDK artifacts/binaries
-
-<details>
-<summary>Show building instructions</summary>
-
-Start by making sure that your development environment [is set up correctly](https://github.com/jitsi/jitsi-meet/blob/master/doc/mobile.md).
-
-A note on dependencies: Apart from the SDK, Jitsi also publishes a binary Maven artifact for some of the SDK dependencies (that are not otherwise publicly available) to the Jitsi Maven repository. When you're planning to use a SDK that is built from source, you'll likely use a version of the source code that is newer (or at least _different_) than the version of the source that was used to create the binary SDK artifact. As a consequence, the dependencies that your project will need, might also be different from those that are published in the Jitsi Maven repository. This might lead to build problems, caused by dependencies that are unavailable.
-
-If you want to use a SDK that is built from source, you will likely benefit from composing a local Maven repository that contains these dependencies. The text below describes how you create a repository that includes both the SDK as well as these dependencies. For illustration purposes, we'll define the location of this local Maven repository as `/tmp/repo`
-
-In source code form, the Android SDK dependencies are locked/pinned by package.json and package-lock.json of the Jitsi Meet project. To obtain the data, execute NPM in the jitsi-meet project directory:
-
-    npm install
-
-This will pull in the dependencies in either binary format, or in source code format, somewhere under /node_modules/
-
-Third-party React Native _modules_, which Jitsi Meet SDK for Android depends on, are download by NPM in source code 
-or binary form. These need to be assembled into Maven artifacts, and then published to your local Maven repository.
-A script is provided to facilitate this. From the root of the jitsi-meet project repository, run:
-
-    ./android/scripts/release-sdk.sh /tmp/repo
-
-This will build and publish the SDK, and all of its dependencies to the specified Maven repository (`/tmp/repo`) in
-this example.
-
-You're now ready to use the artifacts. In _your_ project, add the Maven repository that you used above (`/tmp/repo`) into your top-level `build.gradle` file:
-
-    allprojects {
-        repositories {
-            maven { url "file:/tmp/repo" }
-            google()
-            jcenter()
-        }
-    }
-
-You can use your local repository to replace the Jitsi repository (`maven { url "https://github.com/jitsi/jitsi-maven-repository/raw/master/releases" }`) when you published _all_ subprojects. If you didn't do that, you'll have to add both repositories. Make sure your local repository is listed first!
-
-Then, define the dependency `org.jitsi.react:jitsi-meet-sdk` into the `build.gradle` file of your module:
-
-    implementation ('org.jitsi.react:jitsi-meet-sdk:+') { transitive = true }
-
-Note that there should not be a need to explicitly add the other dependencies, as they will be pulled in as transitive
-dependencies of `jitsi-meet-sdk`.
-
-</details>
-
-## Using the 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`:
-
-```java
-package org.jitsi.example;
-
-import org.jitsi.meet.sdk.JitsiMeetActivity;
-
-public class MainActivity extends JitsiMeetActivity {
-}
-```
-
-Alternatively, you can use the `org.jitsi.meet.sdk.JitsiMeetView` class which
-extends `android.view.View`.
-
-Note that this should only be needed when `JitsiMeetActivity` cannot be used for
-some reason. Extending `JitsiMeetView` requires manual wiring of the view to
-the activity, using a lot of boilerplate code. Using the Activity instead of the
-View is strongly recommended.
-
-<details>
-<summary>Show example</summary>
-
-```java
-package org.jitsi.example;
-
-import android.os.Bundle;
-import android.support.v4.app.FragmentActivity;
-
-import org.jitsi.meet.sdk.JitsiMeetView;
-import org.jitsi.meet.sdk.ReactActivityLifecycleCallbacks;
-
-// Example
-//
-public class MainActivity extends FragmentActivity implements JitsiMeetActivityInterface {
-    private JitsiMeetView view;
-
-    @Override
-    protected void onActivityResult(
-            int requestCode,
-            int resultCode,
-            Intent data) {
-        JitsiMeetActivityDelegate.onActivityResult(
-                this, requestCode, resultCode, data);
-    }
-
-    @Override
-    public void onBackPressed() {
-        JitsiMeetActivityDelegate.onBackPressed();
-    }
-
-    @Override
-    protected void onCreate(Bundle savedInstanceState) {
-        super.onCreate(savedInstanceState);
-
-        view = new JitsiMeetView(this);
-        JitsiMeetConferenceOptions options = new JitsiMeetConferenceOptions.Builder()
-            .setRoom("https://meet.jit.si/test123")
-            .build();
-        view.join(options);
-
-        setContentView(view);
-    }
-
-    @Override
-    protected void onDestroy() {
-        super.onDestroy();
-
-        view.dispose();
-        view = null;
-
-        JitsiMeetActivityDelegate.onHostDestroy(this);
-    }
-
-    @Override
-    public void onNewIntent(Intent intent) {
-        JitsiMeetActivityDelegate.onNewIntent(intent);
-    }
-
-    @Override
-    public void onRequestPermissionsResult(
-            final int requestCode,
-            final String[] permissions,
-            final int[] grantResults) {
-        JitsiMeetActivityDelegate.onRequestPermissionsResult(requestCode, permissions, grantResults);
-    }
-
-    @Override
-    protected void onResume() {
-        super.onResume();
-
-        JitsiMeetActivityDelegate.onHostResume(this);
-    }
-
-    @Override
-    protected void onStop() {
-        super.onStop();
-
-        JitsiMeetActivityDelegate.onHostPause(this);
-    }
-}
-```
-
-</details>
-
-### JitsiMeetActivity
-
-This class encapsulates a high level API in the form of an Android `FragmentActivity`
-which displays a single `JitsiMeetView`. You can pass a URL as a `ACTION_VIEW`
-on the Intent when starting it and it will join the conference, and will be
-automatically terminated (finish() will be called on the activity) when the
-conference ends or fails.
-
-### JitsiMeetView
-
-The `JitsiMeetView` class is the core of Jitsi Meet SDK. It's designed to
-display a Jitsi Meet conference (or a welcome page).
-
-#### join(options)
-
-Joins the conference specified by the given `JitsiMeetConferenceOptions`.
-
-#### leave()
-
-Leaves the currently active conference. If the welcome page is enabled it will
-go back to it, otherwise a black window will be shown.
-
-#### dispose()
-
-Releases all resources associated with this view. This method MUST be called
-when the Activity holding this view is going to be destroyed, usually in the
-`onDestroy()` method.
-
-#### getListener()
-
-Returns the `JitsiMeetViewListener` instance attached to the view.
-
-#### setListener(listener)
-
-Sets the given listener (class implementing the `JitsiMeetViewListener`
-interface) on the view.
-
-### JitsiMeetConferenceOptions
-
-This object encapsulates all the options that can be tweaked when joining
-a conference.
-
-Example:
-
-```java
-JitsiMeetConferenceOptions options = new JitsiMeetConferenceOptions.Builder()
-    .setServerURL(new URL("https://meet.jit.si"))
-    .setRoom("test123")
-    .setAudioMuted(false)
-    .setVideoMuted(false)
-    .setAudioOnly(false)
-    .setWelcomePageEnabled(false)
-    .build();
-```
-
-See the `JitsiMeetConferenceOptions` implementation for all available options.
-
-### JitsiMeetActivityDelegate
-
-This class handles the interaction between `JitsiMeetView` and its enclosing
-`Activity`. Generally this shouldn't be consumed by users, because they'd be
-using `JitsiMeetActivity` instead, which is already completely integrated.
-
-All its methods are static.
-
-#### onActivityResult(...)
-
-Helper method to handle results of auxiliary activities launched by the SDK.
-Should be called from the activity method of the same name.
-
-#### onBackPressed()
-
-Helper method which should be called from the activity's `onBackPressed` method.
-If this function returns `true`, it means the action was handled and thus no
-extra processing is required; otherwise the app should call the parent's
-`onBackPressed` method.
-
-#### onHostDestroy(...)
-
-Helper method which should be called from the activity's `onDestroy` method.
-
-#### onHostResume(...)
-
-Helper method which should be called from the activity's `onResume` or `onStop`
-method.
-
-#### onHostStop(...)
-
-Helper method which should be called from the activity's `onSstop` method.
-
-#### onNewIntent(...)
-
-Helper method for integrating the *deep linking* functionality. If your app's
-activity is launched in "singleTask" mode this method should be called from the
-activity's `onNewIntent` method.
-
-#### onRequestPermissionsResult(...)
-
-Helper method to handle permission requests inside the SDK. It should be called
-from the activity method of the same name.
-
-#### onUserLeaveHint()
-
-Helper method for integrating automatic Picture-in-Picture. It should be called
-from the activity's `onUserLeaveHint` method.
-
-This is a static method.
-
-#### JitsiMeetViewListener
-
-`JitsiMeetViewListener` provides an interface apps can implement to listen to
-the state of the Jitsi Meet conference displayed in a `JitsiMeetView`.
-
-#### onConferenceJoined
-
-Called when a conference was joined.
-
-The `data` `Map` contains a "url" key with the conference URL.
-
-#### onConferenceTerminated
-
-Called when a conference was terminated either by user choice or due to a
-failure.
-
-The `data` `Map` contains an "error" key with the error and a "url" key
-with the conference URL. If the conference finished gracefully no `error`
-key will be present.
-
-#### onConferenceWillJoin
-
-Called before a conference is joined.
-
-The `data` `Map` contains a "url" key with the conference URL.
-
-## ProGuard rules
-
-When using the SDK on a project some proguard rules have to be added in order
-to avoid necessary code being stripped. Add the following to your project's
-rules file: https://github.com/jitsi/jitsi-meet/blob/master/android/app/proguard-rules.pro
-
-## Picture-in-Picture
-
-`JitsiMeetView` will automatically adjust its UI when presented in a
-Picture-in-Picture style scenario, in a rectangle too small to accommodate its
-"full" UI.
-
-## 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>
-```
+This document has been moved to [The Handbook](https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-android-sdk).

android/app/build.gradle

@@ -1,8 +1,5 @@
 apply plugin: 'com.android.application'
 
-boolean googleServicesEnabled \
-    = project.file('google-services.json').exists() && !rootProject.ext.libreBuild
-
 // Crashlytics integration is done as part of Firebase now, so it gets
 // automagically activated with google-services.json
 if (googleServicesEnabled) {
@@ -13,7 +10,7 @@ if (googleServicesEnabled) {
 // This lets us upload a new build at most every 10 seconds for the
 // next ~680 years.
 // https://stackoverflow.com/a/38643838
-def vcode = (int)(((new Date().getTime()/1000) - 1546297200) / 10)
+def vcode = (int) (((new Date().getTime() / 1000) - 1546297200) / 10)
 
 android {
     compileSdkVersion rootProject.ext.compileSdkVersion
@@ -32,12 +29,23 @@ android {
         }
     }
 
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
+
     buildTypes {
         debug {
             buildConfigField "boolean", "GOOGLE_SERVICES_ENABLED", "${googleServicesEnabled}"
             buildConfigField "boolean", "LIBRE_BUILD", "${rootProject.ext.libreBuild}"
         }
         release {
+            // Uncomment the following line for singing a test release build.
+            //signingConfig signingConfigs.debug
             minifyEnabled true
             proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules-release.pro'
             buildConfigField "boolean", "GOOGLE_SERVICES_ENABLED", "${googleServicesEnabled}"
@@ -69,7 +77,9 @@ repositories {
 dependencies {
     implementation fileTree(dir: 'libs', include: ['*.jar'])
     implementation 'androidx.legacy:legacy-support-v4:1.0.0'
-    implementation 'androidx.appcompat:appcompat:1.0.2'
+    implementation 'androidx.appcompat:appcompat:1.1.0'
+
+    debugImplementation 'com.squareup.leakcanary:leakcanary-android:2.0-beta-5'
 
     if (!rootProject.ext.libreBuild) {
         implementation 'com.google.android.gms:play-services-auth:16.0.1'
@@ -83,9 +93,6 @@ dependencies {
     }
 
     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 {
@@ -133,8 +140,8 @@ gradle.projectsEvaluated {
         def targetName = variant.name.capitalize()
 
         def currentRunPackagerTask = tasks.create(
-                name: "run${targetName}ReactPackager",
-                type: Exec) {
+            name: "run${targetName}ReactPackager",
+            type: Exec) {
             group = "react"
             description = "Run the React packager."
 
@@ -165,5 +172,5 @@ gradle.projectsEvaluated {
 }
 
 if (googleServicesEnabled) {
-   apply plugin: 'com.google.gms.google-services'
+    apply plugin: 'com.google.gms.google-services'
 }

android/app/proguard-rules.pro

@@ -85,4 +85,8 @@
 # ^^^ We added the above when we switched minifyEnabled on.
 
 # Rule to avoid build errors related to SVGs.
--keep public class com.horcrux.svg.** {*;}
+-keep public class com.horcrux.svg.** {*;}
+
+# Hermes
+-keep class com.facebook.hermes.unicode.** { *; }
+

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:networkSecurityConfig="@xml/network_security_config"
       android:theme="@style/AppTheme">
     <activity

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

@@ -7,6 +7,7 @@ import com.crashlytics.android.Crashlytics;
 import com.google.firebase.dynamiclinks.FirebaseDynamicLinks;
 import io.fabric.sdk.android.Fabric;
 
+import org.jitsi.meet.sdk.JitsiMeet;
 import org.jitsi.meet.sdk.JitsiMeetActivity;
 
 /**
@@ -21,7 +22,9 @@ final class GoogleServicesHelper {
         if (BuildConfig.GOOGLE_SERVICES_ENABLED) {
             Log.d(activity.getClass().getSimpleName(), "Initializing Google Services");
 
-            Fabric.with(activity, new Crashlytics());
+            if (!JitsiMeet.isCrashReportingDisabled(activity)) {
+                Fabric.with(activity, new Crashlytics());
+            }
 
             FirebaseDynamicLinks.getInstance().getDynamicLink(activity.getIntent())
                 .addOnSuccessListener(activity, pendingDynamicLinkData -> {

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

@@ -1,6 +1,5 @@
 /*
- * Copyright @ 2018-present 8x8, Inc.
- * Copyright @ 2017-2018 Atlassian Pty Ltd
+ * Copyright @ 2017-present 8x8, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -91,6 +90,7 @@ public class MainActivity extends JitsiMeetActivity {
             = new JitsiMeetConferenceOptions.Builder()
                 .setWelcomePageEnabled(true)
                 .setServerURL(buildURL("https://meet.jit.si"))
+                .setFeatureFlag("call-integration.enabled", false)
                 .build();
         JitsiMeet.setDefaultConferenceOptions(defaultOptions);
 

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

@@ -13,8 +13,8 @@ buildscript {
     }
     dependencies {
         classpath 'com.android.tools.build:gradle:3.3.2'
-        classpath 'com.google.gms:google-services:4.2.0'
-        classpath 'io.fabric.tools:gradle:1.27.0'
+        classpath 'com.google.gms:google-services:4.3.3'
+        classpath 'io.fabric.tools:gradle:1.28.1'
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files.
@@ -27,8 +27,6 @@ allprojects {
         jcenter()
         // React Native (JS, Obj-C sources, Android binaries) is installed from npm.
         maven { url "$rootDir/../node_modules/react-native/android" }
-        // Android JSC is installed from npm.
-        maven { url("$rootDir/../node_modules/jsc-android/dist") }
     }
 
     // Make sure we use the react-native version in node_modules and not the one
@@ -163,50 +161,8 @@ ext {
 
     // Libre build
     libreBuild = (System.env.LIBRE_BUILD ?: "false").toBoolean()
-}
 
-// If Android SDK is not installed, accept its license so that it
-// is automatically downloaded.
-afterEvaluate { project ->
-    // Either the environment variable ANDROID_HOME or the property sdk.dir in
-    // local.properties identifies where Android SDK is installed.
-    def androidHome = System.env.ANDROID_HOME
-    if (!androidHome) {
-        // ANDROID_HOME is not set. Is sdk.dir set?
-        def file = file("${project.rootDir}/local.properties")
-        def props = new Properties()
-        if (file.canRead()) {
-            file.withInputStream {
-                props.load(it)
-                androidHome = props.'sdk.dir'
-            }
-        }
-        if (!androidHome && (!file.exists() || file.canWrite())) {
-            // Neither ANDROID_HOME nor sdk.dir is set. Set sdk.dir (because
-            // environment variables cannot be set).
-            props.'sdk.dir' = "${project.buildDir}/android-sdk".toString()
-            file.withOutputStream {
-                props.store(it, null)
-                androidHome = props.'sdk.dir'
-            }
-        }
-    }
-    // If the license is not accepted, accept it so that automatic downloading
-    // kicks in.
-    // The license hash can be taken from the accepted licenses, by doing this
-    // on your local machine the file is
-    // ${androidHome}/licenses/android-sdk-license
-    if (androidHome) {
-        def dir = file("${androidHome}/licenses")
-        dir.mkdirs()
-        def file = file("${dir.path}/android-sdk-license")
-        if (!file.exists()) {
-            file.withWriter {
-                def hash = 'd56f5187479451eabf01fb78af6dfcb131a6481e'
-                it.write(hash, 0, hash.length())
-            }
-        }
-    }
+    googleServicesEnabled = project.file('app/google-services.json').exists() && !libreBuild
 }
 
 // Force the version of the Android build tools we have chosen on all

android/fastlane/Fastfile

@@ -24,7 +24,7 @@ platform :android do
 
         # Upload built artifact to the Closed Beta track
         upload_to_play_store(
-            track: "Closed Beta",
+            track: "beta",
             json_key: ENV["JITSI_JSON_KEY_FILE"],
             skip_upload_metadata: true,
             skip_upload_images: true,

android/gradle.properties

@@ -20,5 +20,5 @@
 android.useAndroidX=true
 android.enableJetifier=true
 
-appVersion=19.3.0
-sdkVersion=2.3.0
+appVersion=20.3.0
+sdkVersion=2.9.0

android/scripts/release-sdk.sh

@@ -9,8 +9,8 @@ THE_MVN_REPO=${MVN_REPO:-${1:-$DEFAULT_MVN_REPO}}
 MVN_HTTP=0
 DEFAULT_SDK_VERSION=$(grep sdkVersion ${THIS_DIR}/../gradle.properties | cut -d"=" -f2)
 SDK_VERSION=${OVERRIDE_SDK_VERSION:-${DEFAULT_SDK_VERSION}}
-RN_VERSION=$(jq -r '.dependencies."react-native"' ${THIS_DIR}/../../package.json)
-JSC_VERSION="r"$(jq -r '.dependencies."jsc-android"' ${THIS_DIR}/../../node_modules/react-native/package.json | cut -d . -f 1)
+RN_VERSION=$(jq -r '.version' ${THIS_DIR}/../../node_modules/react-native/package.json)
+HERMES_VERSION=$(jq -r '.dependencies."hermes-engine"' ${THIS_DIR}/../../node_modules/react-native/package.json | cut -c 2-)
 DO_GIT_TAG=${GIT_TAG:-0}
 
 if [[ $THE_MVN_REPO == http* ]]; then
@@ -38,17 +38,19 @@ if [[ $MVN_HTTP == 1 ]]; then
         -DgeneratePom=false \
         -DpomFile=react-native-${RN_VERSION}.pom || true
     popd
-    # Push JSC
-    echo "Pushing JSC ${JSC_VERSION} to the Maven repo"
-    pushd ${THIS_DIR}/../../node_modules/jsc-android/dist/org/webkit/android-jsc/${JSC_VERSION}
+    # Push Hermes
+    echo "Pushing Hermes ${HERMES_VERSION} to the Maven repo"
+    pushd ${THIS_DIR}/../../node_modules/hermes-engine/android/
     mvn \
         deploy:deploy-file \
         -Durl=${MVN_REPO} \
         -DrepositoryId=${MVN_REPO_ID} \
-        -Dfile=android-jsc-${JSC_VERSION}.aar \
+        -Dfile=hermes-release.aar \
         -Dpackaging=aar \
-        -DgeneratePom=false \
-        -DpomFile=android-jsc-${JSC_VERSION}.pom || true
+        -DgroupId=com.facebook \
+        -DartifactId=hermes \
+        -Dversion=${HERMES_VERSION} \
+        -DgeneratePom=true || true
     popd
 else
     # Push React Native, if necessary
@@ -65,17 +67,19 @@ else
         popd
     fi
 
-    # Push JSC, if necessary
-    if [[ ! -d ${MVN_REPO}/org/webkit/android-jsc/${JSC_VERSION} ]]; then
-        echo "Pushing JSC ${JSC_VERSION} to the Maven repo"
-        pushd ${THIS_DIR}/../../node_modules/jsc-android/dist/org/webkit/android-jsc/${JSC_VERSION}
+    # Push Hermes, if necessary
+    if [[ ! -d ${MVN_REPO}/com/facebook/hermes/${HERMES_VERSION} ]]; then
+        echo "Pushing Hermes ${HERMES_VERSION} to the Maven repo"
+        pushd ${THIS_DIR}/../../node_modules/hermes-engine/android/
         mvn \
             deploy:deploy-file \
             -Durl=${MVN_REPO} \
-            -Dfile=android-jsc-${JSC_VERSION}.aar \
+            -Dfile=hermes-release.aar \
             -Dpackaging=aar \
-            -DgeneratePom=false \
-            -DpomFile=android-jsc-${JSC_VERSION}.pom
+            -DgroupId=com.facebook \
+            -DartifactId=hermes \
+            -Dversion=${HERMES_VERSION} \
+            -DgeneratePom=true
         popd
     fi
 

android/sdk/build.gradle

@@ -1,3 +1,5 @@
+import groovy.json.JsonSlurper
+
 apply plugin: 'com.android.library'
 apply plugin: 'maven-publish'
 
@@ -12,11 +14,13 @@ android {
     buildTypes {
         debug {
             buildConfigField "boolean", "LIBRE_BUILD", "${rootProject.ext.libreBuild}"
+            buildConfigField "boolean", "GOOGLE_SERVICES_ENABLED", "${rootProject.ext.googleServicesEnabled}"
         }
         release {
             minifyEnabled false
             proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
             buildConfigField "boolean", "LIBRE_BUILD", "${rootProject.ext.libreBuild}"
+            buildConfigField "boolean", "GOOGLE_SERVICES_ENABLED", "${rootProject.ext.googleServicesEnabled}"
         }
     }
 
@@ -31,20 +35,30 @@ android {
             }
         }
     }
+
+    packagingOptions {
+        pickFirst '**/libc++_shared.so'
+    }
 }
 
 dependencies {
     implementation fileTree(dir: 'libs', include: ['*.jar'])
 
     implementation 'androidx.legacy:legacy-support-v4:1.0.0'
-    implementation 'androidx.appcompat:appcompat:1.0.2'
-    implementation 'androidx.fragment:fragment:1.0.0'
+    implementation 'androidx.appcompat:appcompat:1.1.0'
+    implementation 'androidx.fragment:fragment:1.2.0'
 
+    //noinspection GradleDynamicVersion
     api 'com.facebook.react:react-native:+'
-    implementation 'org.webkit:android-jsc:+'
+
+    // Hermes JS engine
+    def hermesPath = "../../node_modules/hermes-engine/android/"
+    debugImplementation files(hermesPath + "hermes-debug.aar")
+    releaseImplementation files(hermesPath + "hermes-release.aar")
 
     implementation 'com.dropbox.core:dropbox-core-sdk:3.0.8'
     implementation 'com.jakewharton.timber:timber:4.7.1'
+    implementation 'com.squareup.duktape:duktape-android:1.3.0'
 
     if (!rootProject.ext.libreBuild) {
         implementation 'com.amplitude:android-sdk:2.14.1'
@@ -58,6 +72,7 @@ dependencies {
     implementation project(':react-native-calendar-events')
     implementation project(':react-native-community-async-storage')
     implementation project(':react-native-community_netinfo')
+    implementation project(':react-native-default-preference')
     implementation project(':react-native-immersive')
     implementation project(':react-native-keep-awake')
     implementation project(':react-native-linear-gradient')
@@ -212,6 +227,14 @@ publishing {
                     dependency.appendNode('artifactId', artifactId)
                     dependency.appendNode('version', it.moduleVersion)
                 }
+
+                // Add Hermes dependency.
+                def hermesPkg = new File("$rootDir/../node_modules/hermes-engine/package.json")
+                def hermesVersion = new JsonSlurper().parseText(hermesPkg.text).version
+                def hermesDependency = dependencies.appendNode('dependency')
+                hermesDependency.appendNode('groupId', "com.facebook")
+                hermesDependency.appendNode('artifactId', "hermes")
+                hermesDependency.appendNode('version', hermesVersion)
             }
         }
 

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

@@ -16,6 +16,12 @@
 
 package org.jitsi.meet.sdk;
 
+import android.annotation.SuppressLint;
+import android.content.Context;
+import android.content.SharedPreferences;
+import android.provider.Settings;
+import android.text.TextUtils;
+
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
@@ -36,6 +42,8 @@ class AmplitudeModule
         extends ReactContextBaseJavaModule {
 
     public static final String NAME = "Amplitude";
+    public static final String JITSI_PREFERENCES = "jitsi-preferences";
+    public static final String AMPLITUDE_DEVICE_ID_KEY = "amplitudeDeviceId";
 
     public AmplitudeModule(ReactApplicationContext reactContext) {
         super(reactContext);
@@ -49,8 +57,20 @@ class AmplitudeModule
      * @param apiKey The API_KEY of the Amplitude project.
      */
     @ReactMethod
+    @SuppressLint("HardwareIds")
     public void init(String instanceName, String apiKey) {
         Amplitude.getInstance(instanceName).initialize(getCurrentActivity(), apiKey);
+
+        // Set the device ID to something consistent.
+        SharedPreferences sharedPreferences = getReactApplicationContext().getSharedPreferences(JITSI_PREFERENCES, Context.MODE_PRIVATE);
+        String android_id = sharedPreferences.getString(AMPLITUDE_DEVICE_ID_KEY, "");
+        if (!TextUtils.isEmpty(android_id)) {
+            Amplitude.getInstance(instanceName).setDeviceId(android_id);
+        } else {
+            String amplitudeId = Amplitude.getInstance(instanceName).getDeviceId();
+            SharedPreferences.Editor editor = sharedPreferences.edit();
+            editor.putString(JITSI_PREFERENCES, amplitudeId).apply();
+        }
     }
 
     /**

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

@@ -76,6 +76,7 @@ class AppInfoModule
             "version",
             packageInfo == null ? "" : packageInfo.versionName);
         constants.put("LIBRE_BUILD", BuildConfig.LIBRE_BUILD);
+        constants.put("GOOGLE_SERVICES_ENABLED", BuildConfig.GOOGLE_SERVICES_ENABLED);
 
         return constants;
     }

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

@@ -0,0 +1,183 @@
+/*
+ * Copyright @ 2017-present 8x8, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package org.jitsi.meet.sdk;
+
+import android.content.Context;
+import android.media.AudioManager;
+import android.os.Build;
+import android.telecom.CallAudioState;
+import androidx.annotation.RequiresApi;
+
+import java.util.HashSet;
+import java.util.Set;
+
+import org.jitsi.meet.sdk.log.JitsiMeetLogger;
+
+
+/**
+ * {@link AudioModeModule.AudioDeviceHandlerInterface} module implementing device handling for
+ * Android versions >= O when ConnectionService is enabled.
+ */
+@RequiresApi(Build.VERSION_CODES.O)
+class AudioDeviceHandlerConnectionService implements
+        AudioModeModule.AudioDeviceHandlerInterface,
+        RNConnectionService.CallAudioStateListener {
+
+    private final static String TAG = AudioDeviceHandlerConnectionService.class.getSimpleName();
+
+    /**
+     * {@link AudioManager} instance used to interact with the Android audio subsystem.
+     */
+    private AudioManager audioManager;
+
+    /**
+     * Reference to the main {@code AudioModeModule}.
+     */
+    private AudioModeModule module;
+
+    /**
+     * Converts any of the "DEVICE_" constants into the corresponding
+     * {@link android.telecom.CallAudioState} "ROUTE_" number.
+     *
+     * @param audioDevice one of the "DEVICE_" constants.
+     * @return a route number {@link android.telecom.CallAudioState#ROUTE_EARPIECE} if
+     * no match is found.
+     */
+    private static int audioDeviceToRouteInt(String audioDevice) {
+        if (audioDevice == null) {
+            return CallAudioState.ROUTE_SPEAKER;
+        }
+        switch (audioDevice) {
+            case AudioModeModule.DEVICE_BLUETOOTH:
+                return CallAudioState.ROUTE_BLUETOOTH;
+            case AudioModeModule.DEVICE_EARPIECE:
+                return CallAudioState.ROUTE_EARPIECE;
+            case AudioModeModule.DEVICE_HEADPHONES:
+                return CallAudioState.ROUTE_WIRED_HEADSET;
+            case AudioModeModule.DEVICE_SPEAKER:
+                return CallAudioState.ROUTE_SPEAKER;
+            default:
+                JitsiMeetLogger.e(TAG + " Unsupported device name: " + audioDevice);
+                return CallAudioState.ROUTE_SPEAKER;
+        }
+    }
+
+    /**
+     * Populates given route mask into the "DEVICE_" list.
+     *
+     * @param supportedRouteMask an integer coming from
+     * {@link android.telecom.CallAudioState#getSupportedRouteMask()}.
+     * @return a list of device names.
+     */
+    private static Set<String> routesToDeviceNames(int supportedRouteMask) {
+        Set<String> devices = new HashSet<>();
+        if ((supportedRouteMask & CallAudioState.ROUTE_EARPIECE) == CallAudioState.ROUTE_EARPIECE) {
+            devices.add(AudioModeModule.DEVICE_EARPIECE);
+        }
+        if ((supportedRouteMask & CallAudioState.ROUTE_BLUETOOTH) == CallAudioState.ROUTE_BLUETOOTH) {
+            devices.add(AudioModeModule.DEVICE_BLUETOOTH);
+        }
+        if ((supportedRouteMask & CallAudioState.ROUTE_SPEAKER) == CallAudioState.ROUTE_SPEAKER) {
+            devices.add(AudioModeModule.DEVICE_SPEAKER);
+        }
+        if ((supportedRouteMask & CallAudioState.ROUTE_WIRED_HEADSET) == CallAudioState.ROUTE_WIRED_HEADSET) {
+            devices.add(AudioModeModule.DEVICE_HEADPHONES);
+        }
+        return devices;
+    }
+
+    /**
+     * Used to store the most recently reported audio devices.
+     * Makes it easier to compare for a change, because the devices are stored
+     * as a mask in the {@link android.telecom.CallAudioState}. The mask is populated into
+     * the {@code availableDevices} on each update.
+     */
+    private int supportedRouteMask = -1;
+
+    public AudioDeviceHandlerConnectionService(AudioManager audioManager) {
+        this.audioManager = audioManager;
+    }
+
+    @Override
+    public void onCallAudioStateChange(final CallAudioState state) {
+        module.runInAudioThread(new Runnable() {
+            @Override
+            public void run() {
+                boolean audioRouteChanged
+                    = audioDeviceToRouteInt(module.getSelectedDevice()) != state.getRoute();
+                int newSupportedRoutes = state.getSupportedRouteMask();
+                boolean audioDevicesChanged = supportedRouteMask != newSupportedRoutes;
+                if (audioDevicesChanged) {
+                    supportedRouteMask = newSupportedRoutes;
+                    Set<String> devices = routesToDeviceNames(supportedRouteMask);
+                    module.replaceDevices(devices);
+                    JitsiMeetLogger.i(TAG + " Available audio devices: " + devices.toString());
+                }
+
+                if (audioRouteChanged || audioDevicesChanged) {
+                    module.resetSelectedDevice();
+                    module.updateAudioRoute();
+                }
+            }
+        });
+    }
+
+    @Override
+    public void start(AudioModeModule audioModeModule) {
+        JitsiMeetLogger.i("Using " + TAG + " as the audio device handler");
+
+        module = audioModeModule;
+
+        RNConnectionService rcs = ReactInstanceManagerHolder.getNativeModule(RNConnectionService.class);
+        if (rcs != null) {
+            rcs.setCallAudioStateListener(this);
+        } else {
+            JitsiMeetLogger.w(TAG + " Couldn't set call audio state listener, module is null");
+        }
+    }
+
+    @Override
+    public void stop() {
+        RNConnectionService rcs = ReactInstanceManagerHolder.getNativeModule(RNConnectionService.class);
+        if (rcs != null) {
+            rcs.setCallAudioStateListener(null);
+        } else {
+            JitsiMeetLogger.w(TAG + " Couldn't set call audio state listener, module is null");
+        }
+    }
+
+    public void setAudioRoute(String audioDevice) {
+        int newAudioRoute = audioDeviceToRouteInt(audioDevice);
+
+        RNConnectionService.setAudioRoute(newAudioRoute);
+    }
+
+    @Override
+    public boolean setMode(int mode) {
+        if (mode != AudioModeModule.DEFAULT) {
+            // This shouldn't be needed when using ConnectionService, but some devices have been
+            // observed not doing it.
+            try {
+                audioManager.setMicrophoneMute(false);
+            } catch (Throwable tr) {
+                JitsiMeetLogger.w(tr, TAG + " Failed to unmute the microphone");
+            }
+        }
+
+        return true;
+    }
+}

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

@@ -0,0 +1,231 @@
+/*
+ * Copyright @ 2017-present 8x8, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package org.jitsi.meet.sdk;
+
+import android.content.Context;
+import android.media.AudioDeviceInfo;
+import android.media.AudioManager;
+import android.os.Build;
+import androidx.annotation.RequiresApi;
+
+import java.util.HashSet;
+import java.util.Set;
+
+import org.jitsi.meet.sdk.log.JitsiMeetLogger;
+
+
+/**
+ * {@link AudioModeModule.AudioDeviceHandlerInterface} module implementing device handling for
+ * all post-M Android versions. This handler can be used on any Android versions >= M, but by
+ * default it's only used on versions < O, since versions >= O use ConnectionService, but it
+ * can be disabled.
+ */
+@RequiresApi(Build.VERSION_CODES.M)
+class AudioDeviceHandlerGeneric implements
+        AudioModeModule.AudioDeviceHandlerInterface,
+        AudioManager.OnAudioFocusChangeListener {
+
+    private final static String TAG = AudioDeviceHandlerGeneric.class.getSimpleName();
+
+    /**
+     * Reference to the main {@code AudioModeModule}.
+     */
+    private AudioModeModule module;
+
+    /**
+     * 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;
+
+    /**
+     * Indicator that we have lost audio focus.
+     */
+    private boolean audioFocusLost = false;
+
+    /**
+     * {@link AudioManager} instance used to interact with the Android audio
+     * subsystem.
+     */
+    private AudioManager audioManager;
+
+    /**
+     * {@link Runnable} for running audio device detection the main thread.
+     * This is only used on Android >= M.
+     */
+    private final Runnable onAudioDeviceChangeRunner = new Runnable() {
+        @Override
+        public void run() {
+            Set<String> devices = new HashSet<>();
+            AudioDeviceInfo[] deviceInfos = audioManager.getDevices(AudioManager.GET_DEVICES_ALL);
+
+            for (AudioDeviceInfo info: deviceInfos) {
+                switch (info.getType()) {
+                    case AudioDeviceInfo.TYPE_BLUETOOTH_SCO:
+                        devices.add(AudioModeModule.DEVICE_BLUETOOTH);
+                        break;
+                    case AudioDeviceInfo.TYPE_BUILTIN_EARPIECE:
+                        devices.add(AudioModeModule.DEVICE_EARPIECE);
+                        break;
+                    case AudioDeviceInfo.TYPE_BUILTIN_SPEAKER:
+                        devices.add(AudioModeModule.DEVICE_SPEAKER);
+                        break;
+                    case AudioDeviceInfo.TYPE_WIRED_HEADPHONES:
+                    case AudioDeviceInfo.TYPE_WIRED_HEADSET:
+                    case TYPE_USB_HEADSET:
+                        devices.add(AudioModeModule.DEVICE_HEADPHONES);
+                        break;
+                }
+            }
+
+            module.replaceDevices(devices);
+
+            JitsiMeetLogger.i(TAG + " Available audio devices: " + devices.toString());
+
+            module.updateAudioRoute();
+        }
+    };
+
+    private final android.media.AudioDeviceCallback audioDeviceCallback =
+        new android.media.AudioDeviceCallback() {
+            @Override
+            public void onAudioDevicesAdded(
+                AudioDeviceInfo[] addedDevices) {
+                JitsiMeetLogger.d(TAG + " Audio devices added");
+                onAudioDeviceChange();
+            }
+
+            @Override
+            public void onAudioDevicesRemoved(
+                AudioDeviceInfo[] removedDevices) {
+                JitsiMeetLogger.d(TAG + " Audio devices removed");
+                onAudioDeviceChange();
+            }
+        };
+
+    public AudioDeviceHandlerGeneric(AudioManager audioManager) {
+        this.audioManager = audioManager;
+    }
+
+    /**
+     * Helper method to trigger an audio route update when devices change. It
+     * makes sure the operation is performed on the audio thread.
+     */
+    private void onAudioDeviceChange() {
+        module.runInAudioThread(onAudioDeviceChangeRunner);
+    }
+
+    /**
+     * {@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(final int focusChange) {
+        module.runInAudioThread(new Runnable() {
+            @Override
+            public void run() {
+                switch (focusChange) {
+                    case AudioManager.AUDIOFOCUS_GAIN: {
+                        JitsiMeetLogger.d(TAG + " Audio focus gained");
+                        // Some other application potentially stole our audio focus
+                        // temporarily. Restore our mode.
+                        if (audioFocusLost) {
+                            module.updateAudioRoute();
+                        }
+                        audioFocusLost = false;
+                        break;
+                    }
+                    case AudioManager.AUDIOFOCUS_LOSS:
+                    case AudioManager.AUDIOFOCUS_LOSS_TRANSIENT:
+                    case AudioManager.AUDIOFOCUS_LOSS_TRANSIENT_CAN_DUCK: {
+                        JitsiMeetLogger.d(TAG + " Audio focus lost");
+                        audioFocusLost = true;
+                        break;
+                    }
+                }
+            }
+        });
+    }
+
+    /**
+     * Helper method to set the output route to a Bluetooth device.
+     *
+     * @param enabled true if Bluetooth should use used, false otherwise.
+     */
+    private void setBluetoothAudioRoute(boolean enabled) {
+        if (enabled) {
+            audioManager.startBluetoothSco();
+            audioManager.setBluetoothScoOn(true);
+        } else {
+            audioManager.setBluetoothScoOn(false);
+            audioManager.stopBluetoothSco();
+        }
+    }
+
+    @Override
+    public void start(AudioModeModule audioModeModule) {
+        JitsiMeetLogger.i("Using " + TAG + " as the audio device handler");
+
+        module = audioModeModule;
+
+        // Setup runtime device change detection.
+        audioManager.registerAudioDeviceCallback(audioDeviceCallback, null);
+
+        // Do an initial detection.
+        onAudioDeviceChange();
+    }
+
+    @Override
+    public void stop() {
+        audioManager.unregisterAudioDeviceCallback(audioDeviceCallback);
+    }
+
+    @Override
+    public void setAudioRoute(String device) {
+        // Turn speaker on / off
+        audioManager.setSpeakerphoneOn(device.equals(AudioModeModule.DEVICE_SPEAKER));
+
+        // Turn bluetooth on / off
+        setBluetoothAudioRoute(device.equals(AudioModeModule.DEVICE_BLUETOOTH));
+    }
+
+    @Override
+    public boolean setMode(int mode) {
+        if (mode == AudioModeModule.DEFAULT) {
+            audioFocusLost = false;
+            audioManager.setMode(AudioManager.MODE_NORMAL);
+            audioManager.abandonAudioFocus(this);
+            audioManager.setSpeakerphoneOn(false);
+            setBluetoothAudioRoute(false);
+
+            return true;
+        }
+
+        audioManager.setMode(AudioManager.MODE_IN_COMMUNICATION);
+        audioManager.setMicrophoneMute(false);
+
+        if (audioManager.requestAudioFocus(this, AudioManager.STREAM_VOICE_CALL, AudioManager.AUDIOFOCUS_GAIN)
+            == AudioManager.AUDIOFOCUS_REQUEST_FAILED) {
+            JitsiMeetLogger.w(TAG + " Audio focus request failed");
+            return false;
+        }
+
+        return true;
+    }
+}

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

@@ -0,0 +1,230 @@
+/*
+ * Copyright @ 2017-present 8x8, Inc.
+ *
+ * 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.BroadcastReceiver;
+import android.content.Context;
+import android.content.Intent;
+import android.content.IntentFilter;
+import android.content.pm.PackageManager;
+import android.media.AudioManager;
+
+import org.jitsi.meet.sdk.log.JitsiMeetLogger;
+
+
+/**
+ * {@link AudioModeModule.AudioDeviceHandlerInterface} module implementing device handling for
+ * legacy (pre-M) Android versions.
+ */
+class AudioDeviceHandlerLegacy implements
+        AudioModeModule.AudioDeviceHandlerInterface,
+        AudioManager.OnAudioFocusChangeListener,
+        BluetoothHeadsetMonitor.Listener {
+
+    private final static String TAG = AudioDeviceHandlerLegacy.class.getSimpleName();
+
+    /**
+     * Reference to the main {@code AudioModeModule}.
+     */
+    private AudioModeModule module;
+
+    /**
+     * Indicator that we have lost audio focus.
+     */
+    private boolean audioFocusLost = false;
+
+    /**
+     * {@link AudioManager} instance used to interact with the Android audio
+     * subsystem.
+     */
+    private AudioManager audioManager;
+
+    /**
+     * {@link BluetoothHeadsetMonitor} for detecting Bluetooth device changes in
+     * old (< M) Android versions.
+     */
+    private BluetoothHeadsetMonitor bluetoothHeadsetMonitor;
+
+    public AudioDeviceHandlerLegacy(AudioManager audioManager) {
+        this.audioManager = audioManager;
+    }
+
+    /**
+     * Helper method to trigger an audio route update when Bluetooth devices are
+     * connected / disconnected.
+     */
+    @Override
+    public void onBluetoothDeviceChange(final boolean deviceAvailable) {
+        module.runInAudioThread(new Runnable() {
+            @Override
+            public void run() {
+                if (deviceAvailable) {
+                    module.addDevice(AudioModeModule.DEVICE_BLUETOOTH);
+                } else {
+                    module.removeDevice(AudioModeModule.DEVICE_BLUETOOTH);
+                }
+
+                module.updateAudioRoute();
+            }
+        });
+    }
+
+    /**
+     * Helper method to trigger an audio route update when a headset is plugged
+     * or unplugged.
+     */
+    private void onHeadsetDeviceChange() {
+        module.runInAudioThread(new Runnable() {
+            @Override
+            public void run() {
+                // XXX: isWiredHeadsetOn is not deprecated when used just for
+                // knowing if there is a wired headset connected, regardless of
+                // audio being routed to it.
+                //noinspection deprecation
+                if (audioManager.isWiredHeadsetOn()) {
+                    module.addDevice(AudioModeModule.DEVICE_HEADPHONES);
+                } else {
+                    module.removeDevice(AudioModeModule.DEVICE_HEADPHONES);
+                }
+
+                module.updateAudioRoute();
+            }
+        });
+    }
+
+    /**
+     * {@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(final int focusChange) {
+        module.runInAudioThread(new Runnable() {
+            @Override
+            public void run() {
+                switch (focusChange) {
+                    case AudioManager.AUDIOFOCUS_GAIN: {
+                        JitsiMeetLogger.d(TAG + " Audio focus gained");
+                        // Some other application potentially stole our audio focus
+                        // temporarily. Restore our mode.
+                        if (audioFocusLost) {
+                            module.updateAudioRoute();
+                        }
+                        audioFocusLost = false;
+                        break;
+                    }
+                    case AudioManager.AUDIOFOCUS_LOSS:
+                    case AudioManager.AUDIOFOCUS_LOSS_TRANSIENT:
+                    case AudioManager.AUDIOFOCUS_LOSS_TRANSIENT_CAN_DUCK: {
+                        JitsiMeetLogger.d(TAG + " Audio focus lost");
+                        audioFocusLost = true;
+                        break;
+                    }
+                }
+            }
+        });
+    }
+
+    /**
+     * Helper method to set the output route to a Bluetooth device.
+     *
+     * @param enabled true if Bluetooth should use used, false otherwise.
+     */
+    private void setBluetoothAudioRoute(boolean enabled) {
+        if (enabled) {
+            audioManager.startBluetoothSco();
+            audioManager.setBluetoothScoOn(true);
+        } else {
+            audioManager.setBluetoothScoOn(false);
+            audioManager.stopBluetoothSco();
+        }
+    }
+
+    @Override
+    public void start(AudioModeModule audioModeModule) {
+        JitsiMeetLogger.i("Using " + TAG + " as the audio device handler");
+
+        module = audioModeModule;
+        Context context = module.getContext();
+
+        // Setup runtime device change detection.
+        //
+
+        // Detect changes in wired headset connections.
+        IntentFilter wiredHeadSetFilter = new IntentFilter(AudioManager.ACTION_HEADSET_PLUG);
+        BroadcastReceiver wiredHeadsetReceiver = new BroadcastReceiver() {
+            @Override
+            public void onReceive(Context context, Intent intent) {
+                JitsiMeetLogger.d(TAG + " Wired headset added / removed");
+                onHeadsetDeviceChange();
+            }
+        };
+        context.registerReceiver(wiredHeadsetReceiver, wiredHeadSetFilter);
+
+        // Detect Bluetooth device changes.
+        bluetoothHeadsetMonitor = new BluetoothHeadsetMonitor(context, this);
+
+        // On Android < M, detect if we have an earpiece.
+        PackageManager pm = context.getPackageManager();
+        if (pm.hasSystemFeature(PackageManager.FEATURE_TELEPHONY)) {
+            module.addDevice(AudioModeModule.DEVICE_EARPIECE);
+        }
+
+        // Always assume there is a speaker.
+        module.addDevice(AudioModeModule.DEVICE_SPEAKER);
+    }
+
+    @Override
+    public void stop() {
+        bluetoothHeadsetMonitor.stop();
+        bluetoothHeadsetMonitor = null;
+    }
+
+    @Override
+    public void setAudioRoute(String device) {
+        // Turn speaker on / off
+        audioManager.setSpeakerphoneOn(device.equals(AudioModeModule.DEVICE_SPEAKER));
+
+        // Turn bluetooth on / off
+        setBluetoothAudioRoute(device.equals(AudioModeModule.DEVICE_BLUETOOTH));
+    }
+
+    @Override
+    public boolean setMode(int mode) {
+        if (mode == AudioModeModule.DEFAULT) {
+            audioFocusLost = false;
+            audioManager.setMode(AudioManager.MODE_NORMAL);
+            audioManager.abandonAudioFocus(this);
+            audioManager.setSpeakerphoneOn(false);
+            setBluetoothAudioRoute(false);
+
+            return true;
+        }
+
+        audioManager.setMode(AudioManager.MODE_IN_COMMUNICATION);
+        audioManager.setMicrophoneMute(false);
+
+        if (audioManager.requestAudioFocus(this, AudioManager.STREAM_VOICE_CALL, AudioManager.AUDIOFOCUS_GAIN)
+                == AudioManager.AUDIOFOCUS_REQUEST_FAILED) {
+            JitsiMeetLogger.w(TAG + " Audio focus request failed");
+            return false;
+        }
+
+        return true;
+    }
+}

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

@@ -1,5 +1,5 @@
 /*
- * Copyright @ 2017-present Atlassian Pty Ltd
+ * Copyright @ 2017-present 8x8, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -16,16 +16,9 @@
 
 package org.jitsi.meet.sdk;
 
-import android.annotation.TargetApi;
-import android.content.BroadcastReceiver;
 import android.content.Context;
-import android.content.Intent;
-import android.content.IntentFilter;
-import android.content.pm.PackageManager;
-import android.media.AudioDeviceInfo;
 import android.media.AudioManager;
 import android.os.Build;
-import androidx.annotation.RequiresApi;
 
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.Promise;
@@ -61,9 +54,7 @@ import java.util.concurrent.Executors;
  * {@code AudioModeModule.DEFAULT} mode should be used.
  */
 @ReactModule(name = AudioModeModule.NAME)
-class AudioModeModule extends ReactContextBaseJavaModule
-    implements AudioManager.OnAudioFocusChangeListener {
-
+class AudioModeModule extends ReactContextBaseJavaModule {
     public static final String NAME = "AudioMode";
 
     /**
@@ -75,161 +66,39 @@ class AudioModeModule extends ReactContextBaseJavaModule
      * - VIDEO_CALL: Used for video calls. It will use the speaker by default,
      *   unless a wired or Bluetooth headset is connected.
      */
-    private static final int DEFAULT    = 0;
-    private static final int AUDIO_CALL = 1;
-    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;
+    static final int DEFAULT    = 0;
+    static final int AUDIO_CALL = 1;
+    static final int VIDEO_CALL = 2;
 
     /**
      * The {@code Log} tag {@code AudioModeModule} is to log messages with.
      */
     static final String TAG = NAME;
 
-    /**
-     * Converts any of the "DEVICE_" constants into the corresponding
-     * {@link android.telecom.CallAudioState} "ROUTE_" number.
-     *
-     * @param audioDevice one of the "DEVICE_" constants.
-     * @return a route number {@link android.telecom.CallAudioState#ROUTE_EARPIECE} if
-     * no match is found.
-     */
-    @RequiresApi(api = Build.VERSION_CODES.M)
-    private static int audioDeviceToRouteInt(String audioDevice) {
-        if (audioDevice == null) {
-            return android.telecom.CallAudioState.ROUTE_EARPIECE;
-        }
-        switch (audioDevice) {
-            case DEVICE_BLUETOOTH:
-                return android.telecom.CallAudioState.ROUTE_BLUETOOTH;
-            case DEVICE_EARPIECE:
-                return android.telecom.CallAudioState.ROUTE_EARPIECE;
-            case DEVICE_HEADPHONES:
-                return android.telecom.CallAudioState.ROUTE_WIRED_HEADSET;
-            case DEVICE_SPEAKER:
-                return android.telecom.CallAudioState.ROUTE_SPEAKER;
-            default:
-                JitsiMeetLogger.e(TAG + " Unsupported device name: " + audioDevice);
-                return android.telecom.CallAudioState.ROUTE_EARPIECE;
-        }
-    }
-
-    /**
-     * Populates given route mask into the "DEVICE_" list.
-     *
-     * @param supportedRouteMask an integer coming from
-     * {@link android.telecom.CallAudioState#getSupportedRouteMask()}.
-     * @return a list of device names.
-     */
-    @RequiresApi(api = Build.VERSION_CODES.M)
-    private static Set<String> routesToDeviceNames(int supportedRouteMask) {
-        Set<String> devices = new HashSet<>();
-        if ((supportedRouteMask & android.telecom.CallAudioState.ROUTE_EARPIECE)
-                == android.telecom.CallAudioState.ROUTE_EARPIECE) {
-            devices.add(DEVICE_EARPIECE);
-        }
-        if ((supportedRouteMask & android.telecom.CallAudioState.ROUTE_BLUETOOTH)
-                == android.telecom.CallAudioState.ROUTE_BLUETOOTH) {
-            devices.add(DEVICE_BLUETOOTH);
-        }
-        if ((supportedRouteMask & android.telecom.CallAudioState.ROUTE_SPEAKER)
-                == android.telecom.CallAudioState.ROUTE_SPEAKER) {
-            devices.add(DEVICE_SPEAKER);
-        }
-        if ((supportedRouteMask & android.telecom.CallAudioState.ROUTE_WIRED_HEADSET)
-                == android.telecom.CallAudioState.ROUTE_WIRED_HEADSET) {
-            devices.add(DEVICE_HEADPHONES);
-        }
-        return devices;
-    }
-
     /**
      * Whether or not the ConnectionService is used for selecting audio devices.
      */
-    static boolean useConnectionService() {
-        return Build.VERSION.SDK_INT >= Build.VERSION_CODES.O;
-    }
 
-    /**
-     * Indicator that we have lost audio focus.
-     */
-    private boolean audioFocusLost = false;
+    private static final boolean supportsConnectionService = Build.VERSION.SDK_INT >= Build.VERSION_CODES.O;
+    private static boolean useConnectionService_ = supportsConnectionService;
+
+    static boolean useConnectionService() {
+        return supportsConnectionService && useConnectionService_;
+    }
 
     /**
      * {@link AudioManager} instance used to interact with the Android audio
      * subsystem.
      */
-    private final AudioManager audioManager;
+    private AudioManager audioManager;
 
-    /**
-     * {@link BluetoothHeadsetMonitor} for detecting Bluetooth device changes in
-     * old (< M) Android versions.
-     */
-    private BluetoothHeadsetMonitor bluetoothHeadsetMonitor;
+    private AudioDeviceHandlerInterface audioDeviceHandler;
 
     /**
      * {@link ExecutorService} for running all audio operations on a dedicated
      * thread.
      */
-    private static final ExecutorService executor
-        = Executors.newSingleThreadExecutor();
-
-    /**
-     * {@link Runnable} for running audio device detection the main thread.
-     * This is only used on Android >= M.
-     */
-    private final Runnable onAudioDeviceChangeRunner = new Runnable() {
-        @TargetApi(Build.VERSION_CODES.M)
-        @Override
-        public void run() {
-            Set<String> devices = new HashSet<>();
-            AudioDeviceInfo[] deviceInfos
-                = audioManager.getDevices(AudioManager.GET_DEVICES_ALL);
-
-            for (AudioDeviceInfo info: deviceInfos) {
-                switch (info.getType()) {
-                case AudioDeviceInfo.TYPE_BLUETOOTH_SCO:
-                    devices.add(DEVICE_BLUETOOTH);
-                    break;
-                case AudioDeviceInfo.TYPE_BUILTIN_EARPIECE:
-                    devices.add(DEVICE_EARPIECE);
-                    break;
-                case AudioDeviceInfo.TYPE_BUILTIN_SPEAKER:
-                    devices.add(DEVICE_SPEAKER);
-                    break;
-                case AudioDeviceInfo.TYPE_WIRED_HEADPHONES:
-                case AudioDeviceInfo.TYPE_WIRED_HEADSET:
-                case TYPE_USB_HEADSET:
-                    devices.add(DEVICE_HEADPHONES);
-                    break;
-                }
-            }
-
-            availableDevices = devices;
-            JitsiMeetLogger.i(TAG + " Available audio devices: " +
-                availableDevices.toString());
-
-            // Reset user selection
-            userSelectedDevice = null;
-
-            if (mode != -1) {
-                updateAudioRoute(mode);
-            }
-        }
-    };
+    private static final ExecutorService executor = Executors.newSingleThreadExecutor();
 
     /**
      * Audio mode currently in use.
@@ -239,10 +108,10 @@ class AudioModeModule extends ReactContextBaseJavaModule
     /**
      * Audio device types.
      */
-    private static final String DEVICE_BLUETOOTH  = "BLUETOOTH";
-    private static final String DEVICE_EARPIECE   = "EARPIECE";
-    private static final String DEVICE_HEADPHONES = "HEADPHONES";
-    private static final String DEVICE_SPEAKER    = "SPEAKER";
+    static final String DEVICE_BLUETOOTH  = "BLUETOOTH";
+    static final String DEVICE_EARPIECE   = "EARPIECE";
+    static final String DEVICE_HEADPHONES = "HEADPHONES";
+    static final String DEVICE_SPEAKER    = "SPEAKER";
 
     /**
      * Device change event.
@@ -259,15 +128,6 @@ class AudioModeModule extends ReactContextBaseJavaModule
      */
     private String selectedDevice;
 
-    /**
-     * Used on API >= 26 to store the most recently reported audio devices.
-     * Makes it easier to compare for a change, because the devices are stored
-     * as a mask in the {@link android.telecom.CallAudioState}. The mask is populated into
-     * the {@link #availableDevices} on each update.
-     */
-    @RequiresApi(api = Build.VERSION_CODES.O)
-    private int supportedRouteMask;
-
     /**
      * User selected device. When null the default is used depending on the
      * mode.
@@ -284,30 +144,7 @@ class AudioModeModule extends ReactContextBaseJavaModule
     public AudioModeModule(ReactApplicationContext reactContext) {
         super(reactContext);
 
-        audioManager
-            = (AudioManager)
-                reactContext.getSystemService(Context.AUDIO_SERVICE);
-
-        // Starting Oreo the ConnectionImpl from ConnectionService is used to
-        // detect the available devices.
-        if (!useConnectionService()) {
-            // Setup runtime device change detection.
-            setupAudioRouteChangeDetection();
-
-            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
-                // Do an initial detection on Android >= M.
-                onAudioDeviceChange();
-            } else {
-                // On Android < M, detect if we have an earpiece.
-                PackageManager pm = reactContext.getPackageManager();
-                if (pm.hasSystemFeature(PackageManager.FEATURE_TELEPHONY)) {
-                    availableDevices.add(DEVICE_EARPIECE);
-                }
-
-                // Always assume there is a speaker.
-                availableDevices.add(DEVICE_SPEAKER);
-            }
-        }
+        audioManager = (AudioManager)reactContext.getSystemService(Context.AUDIO_SERVICE);
     }
 
     /**
@@ -364,132 +201,41 @@ class AudioModeModule extends ReactContextBaseJavaModule
     }
 
     /**
-     * Helper method to trigger an audio route update when devices change. It
-     * makes sure the operation is performed on the main thread.
-     *
-     * Only used on Android >= M.
-     */
-    void onAudioDeviceChange() {
-        runInAudioThread(onAudioDeviceChangeRunner);
-    }
-
-    /**
-     * Helper method to trigger an audio route update when Bluetooth devices are
-     * connected / disconnected.
-     *
-     * Only used on Android < M. Runs on the main thread.
-     */
-    void onBluetoothDeviceChange() {
-        if (bluetoothHeadsetMonitor != null && bluetoothHeadsetMonitor.isHeadsetAvailable()) {
-            availableDevices.add(DEVICE_BLUETOOTH);
-        } else {
-            availableDevices.remove(DEVICE_BLUETOOTH);
-        }
-
-        if (mode != -1) {
-            updateAudioRoute(mode);
-        }
-    }
-
-    /**
-     * Helper method to trigger an audio route update when a headset is plugged
-     * or unplugged.
-     *
-     * Only used on Android < M.
-     */
-    void onHeadsetDeviceChange() {
-        runInAudioThread(new Runnable() {
-            @Override
-            public void run() {
-                // XXX: isWiredHeadsetOn is not deprecated when used just for
-                // knowing if there is a wired headset connected, regardless of
-                // audio being routed to it.
-                //noinspection deprecation
-                if (audioManager.isWiredHeadsetOn()) {
-                    availableDevices.add(DEVICE_HEADPHONES);
-                } else {
-                    availableDevices.remove(DEVICE_HEADPHONES);
-                }
-
-                if (mode != -1) {
-                    updateAudioRoute(mode);
-                }
-            }
-        });
-    }
-
-    @RequiresApi(api = Build.VERSION_CODES.O)
-    void onCallAudioStateChange(Object callAudioState_) {
-        final android.telecom.CallAudioState callAudioState
-            = (android.telecom.CallAudioState)callAudioState_;
-        runInAudioThread(new Runnable() {
-            @Override
-            public void run() {
-                int newSupportedRoutes = callAudioState.getSupportedRouteMask();
-                boolean audioDevicesChanged
-                        = supportedRouteMask != newSupportedRoutes;
-                if (audioDevicesChanged) {
-                    supportedRouteMask = newSupportedRoutes;
-                    availableDevices = routesToDeviceNames(supportedRouteMask);
-                    JitsiMeetLogger.i(TAG + " Available audio devices: "
-                                  + availableDevices.toString());
-                }
-
-                boolean audioRouteChanged
-                    = audioDeviceToRouteInt(selectedDevice)
-                            != callAudioState.getRoute();
-
-                if (audioRouteChanged || audioDevicesChanged) {
-                    // Reset user selection
-                    userSelectedDevice = null;
-
-                    // If the OS changes the Audio Route or Devices we could have lost
-                    // the selected audio device
-                    selectedDevice = null;
-
-                    if (mode != -1) {
-                        updateAudioRoute(mode);
-                    }
-                }
-            }
-        });
-    }
-
-    /**
-     * {@link AudioManager.OnAudioFocusChangeListener} interface method. Called
-     * when the audio focus of the system is updated.
-     *
-     * @param focusChange - The type of focus change.
+     * Initializes the audio device handler module. This function is called *after* all Catalyst
+     * modules have been created, and that's why we use it, because {@link AudioDeviceHandlerConnectionService}
+     * needs access to another Catalyst module, so doing this in the constructor would be too early.
      */
     @Override
-    public void onAudioFocusChange(int focusChange) {
-        switch (focusChange) {
-        case AudioManager.AUDIOFOCUS_GAIN: {
-            JitsiMeetLogger.d(TAG + " Audio focus gained");
-            // Some other application potentially stole our audio focus
-            // temporarily. Restore our mode.
-            if (audioFocusLost) {
-                updateAudioRoute(mode);
+    public void initialize() {
+        runInAudioThread(new Runnable() {
+            @Override
+            public void run() {
+                setAudioDeviceHandler();
             }
-            audioFocusLost = false;
-            break;
-        }
-        case AudioManager.AUDIOFOCUS_LOSS:
-        case AudioManager.AUDIOFOCUS_LOSS_TRANSIENT:
-        case AudioManager.AUDIOFOCUS_LOSS_TRANSIENT_CAN_DUCK: {
-            JitsiMeetLogger.d(TAG + " Audio focus lost");
-            audioFocusLost = true;
-            break;
+        });
+    }
+
+    private void setAudioDeviceHandler() {
+        if (audioDeviceHandler != null) {
+            audioDeviceHandler.stop();
         }
 
+        if (useConnectionService()) {
+            audioDeviceHandler = new AudioDeviceHandlerConnectionService(audioManager);
+        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+            audioDeviceHandler = new AudioDeviceHandlerGeneric(audioManager);
+        } else {
+            audioDeviceHandler = new AudioDeviceHandlerLegacy(audioManager);
         }
+
+        audioDeviceHandler.start(this);
     }
 
     /**
      * Helper function to run operations on a dedicated thread.
      * @param runnable
      */
-    public void runInAudioThread(Runnable runnable) {
+    void runInAudioThread(Runnable runnable) {
         executor.execute(runnable);
     }
 
@@ -518,46 +264,6 @@ class AudioModeModule extends ReactContextBaseJavaModule
         });
     }
 
-    /**
-     * The API >= 26 way of adjusting the audio route.
-     *
-     * @param audioDevice one of the "DEVICE_" names to set as the audio route.
-     */
-    @RequiresApi(api = Build.VERSION_CODES.O)
-    private void setAudioRoute(String audioDevice) {
-        int newAudioRoute = audioDeviceToRouteInt(audioDevice);
-
-        RNConnectionService.setAudioRoute(newAudioRoute);
-    }
-
-    /**
-     * The API < 26 way of adjusting the audio route.
-     *
-     * @param audioDevice one of the "DEVICE_" names to set as the audio route.
-     */
-    private void setAudioRoutePreO(String audioDevice) {
-        // Turn bluetooth on / off
-        setBluetoothAudioRoute(audioDevice.equals(DEVICE_BLUETOOTH));
-
-        // Turn speaker on / off
-        audioManager.setSpeakerphoneOn(audioDevice.equals(DEVICE_SPEAKER));
-    }
-
-    /**
-     * Helper method to set the output route to a Bluetooth device.
-     *
-     * @param enabled true if Bluetooth should use used, false otherwise.
-     */
-    private void setBluetoothAudioRoute(boolean enabled) {
-        if (enabled) {
-            audioManager.startBluetoothSco();
-            audioManager.setBluetoothScoOn(true);
-        } else {
-            audioManager.setBluetoothScoOn(false);
-            audioManager.stopBluetoothSco();
-        }
-    }
-
     /**
      * Public method to set the current audio mode.
      *
@@ -587,70 +293,27 @@ class AudioModeModule extends ReactContextBaseJavaModule
                     AudioModeModule.this.mode = mode;
                     promise.resolve(null);
                 } else {
-                    promise.reject(
-                            "setMode",
-                            "Failed to set audio mode to " + mode);
+                    promise.reject("setMode", "Failed to set audio mode to " + mode);
                 }
             }
         });
     }
 
     /**
-     * Setup the audio route change detection mechanism. We use the
-     * {@link android.media.AudioDeviceCallback} on 23 >= Android API < 26.
+     * Sets whether ConnectionService should be used (if available) for setting the audio mode
+     * or not.
+     *
+     * @param use Boolean indicator of where it should be used or not.
      */
-    private void setupAudioRouteChangeDetection() {
-        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
-            setupAudioRouteChangeDetectionM();
-        } else {
-            setupAudioRouteChangeDetectionPreM();
-        }
-    }
-
-    /**
-     * Audio route change detection mechanism for 23 >= Android API < 26.
-     */
-    @TargetApi(Build.VERSION_CODES.M)
-    private void setupAudioRouteChangeDetectionM() {
-        android.media.AudioDeviceCallback audioDeviceCallback =
-                new android.media.AudioDeviceCallback() {
-                    @Override
-                    public void onAudioDevicesAdded(
-                            AudioDeviceInfo[] addedDevices) {
-                        JitsiMeetLogger.d(TAG + " Audio devices added");
-                        onAudioDeviceChange();
-                    }
-
-                    @Override
-                    public void onAudioDevicesRemoved(
-                            AudioDeviceInfo[] removedDevices) {
-                        JitsiMeetLogger.d(TAG + " Audio devices removed");
-                        onAudioDeviceChange();
-                    }
-                };
-
-        audioManager.registerAudioDeviceCallback(audioDeviceCallback, null);
-    }
-
-    /**
-     * Audio route change detection mechanism for Android API < 23.
-     */
-    private void setupAudioRouteChangeDetectionPreM() {
-        Context context = getReactApplicationContext();
-
-        // Detect changes in wired headset connections.
-        IntentFilter wiredHeadSetFilter = new IntentFilter(ACTION_HEADSET_PLUG);
-        BroadcastReceiver wiredHeadsetReceiver = new BroadcastReceiver() {
+    @ReactMethod
+    public void setUseConnectionService(final boolean use) {
+        runInAudioThread(new Runnable() {
             @Override
-            public void onReceive(Context context, Intent intent) {
-                JitsiMeetLogger.d(TAG + " Wired headset added / removed");
-                onHeadsetDeviceChange();
+            public void run() {
+                useConnectionService_ = use;
+                setAudioDeviceHandler();
             }
-        };
-        context.registerReceiver(wiredHeadsetReceiver, wiredHeadSetFilter);
-
-        // Detect Bluetooth device changes.
-        bluetoothHeadsetMonitor = new BluetoothHeadsetMonitor(this, context);
+        });
     }
 
     /**
@@ -663,14 +326,11 @@ class AudioModeModule extends ReactContextBaseJavaModule
     private boolean updateAudioRoute(int mode) {
         JitsiMeetLogger.i(TAG + " Update audio route for mode: " + mode);
 
+        if (!audioDeviceHandler.setMode(mode)) {
+            return false;
+        }
+
         if (mode == DEFAULT) {
-            if (!useConnectionService()) {
-                audioFocusLost = false;
-                audioManager.setMode(AudioManager.MODE_NORMAL);
-                audioManager.abandonAudioFocus(this);
-                audioManager.setSpeakerphoneOn(false);
-                setBluetoothAudioRoute(false);
-            }
             selectedDevice = null;
             userSelectedDevice = null;
 
@@ -678,20 +338,6 @@ class AudioModeModule extends ReactContextBaseJavaModule
             return true;
         }
 
-        if (!useConnectionService()) {
-            audioManager.setMode(AudioManager.MODE_IN_COMMUNICATION);
-            audioManager.setMicrophoneMute(false);
-
-            if (audioManager.requestAudioFocus(
-                    this,
-                    AudioManager.STREAM_VOICE_CALL,
-                    AudioManager.AUDIOFOCUS_GAIN)
-                    == AudioManager.AUDIOFOCUS_REQUEST_FAILED) {
-                JitsiMeetLogger.w(TAG + " Audio focus request failed");
-                return false;
-            }
-        }
-
         boolean bluetoothAvailable = availableDevices.contains(DEVICE_BLUETOOTH);
         boolean headsetAvailable = availableDevices.contains(DEVICE_HEADPHONES);
 
@@ -706,8 +352,7 @@ class AudioModeModule extends ReactContextBaseJavaModule
         }
 
         // Consider the user's selection
-        if (userSelectedDevice != null
-                && availableDevices.contains(userSelectedDevice)) {
+        if (userSelectedDevice != null && availableDevices.contains(userSelectedDevice)) {
             audioDevice = userSelectedDevice;
         }
 
@@ -720,13 +365,105 @@ class AudioModeModule extends ReactContextBaseJavaModule
         selectedDevice = audioDevice;
         JitsiMeetLogger.i(TAG + " Selected audio device: " + audioDevice);
 
-        if (useConnectionService()) {
-            setAudioRoute(audioDevice);
-        } else {
-            setAudioRoutePreO(audioDevice);
-        }
+        audioDeviceHandler.setAudioRoute(audioDevice);
 
         notifyDevicesChanged();
         return true;
     }
+
+    /**
+     * Gets the currently selected audio device.
+     *
+     * @return The selected audio device.
+     */
+    String getSelectedDevice() {
+        return selectedDevice;
+    }
+
+    /**
+     * Resets the current device selection.
+     */
+    void resetSelectedDevice() {
+        selectedDevice = null;
+        userSelectedDevice = null;
+    }
+
+    /**
+     * Adds a new device to the list of available devices.
+     *
+     * @param device The new device.
+     */
+    void addDevice(String device) {
+        availableDevices.add(device);
+        resetSelectedDevice();
+    }
+
+    /**
+     * Removes a device from the list of available devices.
+     *
+     * @param device The old device to the removed.
+     */
+    void removeDevice(String device) {
+        availableDevices.remove(device);
+        resetSelectedDevice();
+    }
+
+    /**
+     * Replaces the current list of available devices with a new one.
+     *
+     * @param devices The new devices list.
+     */
+    void replaceDevices(Set<String> devices) {
+        availableDevices = devices;
+        resetSelectedDevice();
+    }
+
+    /**
+     * Re-sets the current audio route. Needed when devices changes have happened.
+     */
+    void updateAudioRoute() {
+        if (mode != -1) {
+            updateAudioRoute(mode);
+        }
+    }
+
+    /**
+     * Needed on the legacy handler...
+     *
+     * @return Context for the application.
+     */
+    Context getContext() {
+        return getReactApplicationContext();
+    }
+
+    /**
+     * Interface for the modules implementing the actual audio device management.
+     */
+    interface AudioDeviceHandlerInterface {
+        /**
+         * Start detecting audio device changes.
+         * @param audioModeModule Reference to the main {@link AudioModeModule}.
+         */
+        void start(AudioModeModule audioModeModule);
+
+        /**
+         * Stop audio device detection.
+         */
+        void stop();
+
+        /**
+         * Set the appropriate route for the given audio device.
+         *
+         * @param device Audio device for which the route must be set.
+         */
+        void setAudioRoute(String device);
+
+        /**
+         * Set the given audio mode.
+         *
+         * @param mode The new audio mode to be used.
+         * @return Whether the operation was successful or not.
+         */
+        boolean setMode(int mode);
+    }
 }

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

@@ -1,5 +1,5 @@
 /*
- * Copyright @ 2017-present Atlassian Pty Ltd
+ * Copyright @ 2017-present 8x8, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -33,68 +33,43 @@ import org.jitsi.meet.sdk.log.JitsiMeetLogger;
  * about device changes when this occurs.
  */
 class BluetoothHeadsetMonitor {
-    /**
-     * {@link AudioModeModule} where this monitor reports.
-     */
-    private final AudioModeModule audioModeModule;
+    private final static String TAG = BluetoothHeadsetMonitor.class.getSimpleName();
 
     /**
-     * The {@link Context} in which {@link #audioModeModule} executes.
+     * The {@link Context} in which this module executes.
      */
     private final Context context;
 
+    /**
+     * Reference to the {@link BluetoothAdapter} object, used to access Bluetooth functionality.
+     */
+    private BluetoothAdapter adapter;
+
     /**
      * Reference to a proxy object which allows us to query connected devices.
      */
     private BluetoothHeadset headset;
 
     /**
-     * Flag indicating if there are any Bluetooth headset devices currently
-     * available.
+     * receiver registered for receiving Bluetooth connection state changes.
      */
-    private boolean headsetAvailable = false;
+    private BroadcastReceiver receiver;
 
     /**
-     * Helper for running Bluetooth operations on the main thread.
+     * Listener for receiving Bluetooth device change events.
      */
-    private final Runnable updateDevicesRunnable
-        = new Runnable() {
-            @Override
-            public void run() {
-                headsetAvailable
-                    = (headset != null)
-                        && !headset.getConnectedDevices().isEmpty();
-                audioModeModule.onBluetoothDeviceChange();
-            }
-        };
+    private Listener listener;
 
-    public BluetoothHeadsetMonitor(
-            AudioModeModule audioModeModule,
-            Context context) {
-        this.audioModeModule = audioModeModule;
+    public BluetoothHeadsetMonitor(Context context, Listener listener) {
         this.context = context;
-
-        AudioManager audioManager
-            = (AudioManager) context.getSystemService(Context.AUDIO_SERVICE);
-
-        if (!audioManager.isBluetoothScoAvailableOffCall()) {
-            JitsiMeetLogger.w(AudioModeModule.TAG + " Bluetooth SCO is not available");
-            return;
-        }
-
-        if (getBluetoothHeadsetProfileProxy()) {
-            registerBluetoothReceiver();
-
-            // Initial detection.
-            updateDevices();
-        }
+        this.listener = listener;
     }
 
     private boolean getBluetoothHeadsetProfileProxy() {
-        BluetoothAdapter adapter = BluetoothAdapter.getDefaultAdapter();
+        adapter = BluetoothAdapter.getDefaultAdapter();
 
         if (adapter == null) {
-            JitsiMeetLogger.w(AudioModeModule.TAG + " Device doesn't support Bluetooth");
+            JitsiMeetLogger.w(TAG + " Device doesn't support Bluetooth");
             return false;
         }
 
@@ -104,9 +79,7 @@ class BluetoothHeadsetMonitor {
         BluetoothProfile.ServiceListener listener
             = new BluetoothProfile.ServiceListener() {
                 @Override
-                public void onServiceConnected(
-                        int profile,
-                        BluetoothProfile proxy) {
+                public void onServiceConnected(int profile, BluetoothProfile proxy) {
                     if (profile == BluetoothProfile.HEADSET) {
                         headset = (BluetoothHeadset) proxy;
                         updateDevices();
@@ -120,21 +93,7 @@ class BluetoothHeadsetMonitor {
                 }
             };
 
-        return
-            adapter.getProfileProxy(
-                    context,
-                    listener,
-                    BluetoothProfile.HEADSET);
-    }
-
-    /**
-     * Returns the current headset availability.
-     *
-     * @return {@code true} if there is a Bluetooth headset connected;
-     * {@code false}, otherwise.
-     */
-    public boolean isHeadsetAvailable() {
-        return headsetAvailable;
+        return adapter.getProfileProxy(context, listener, BluetoothProfile.HEADSET);
     }
 
     private void onBluetoothReceiverReceive(Context context, Intent intent) {
@@ -149,7 +108,7 @@ class BluetoothHeadsetMonitor {
             switch (state) {
             case BluetoothHeadset.STATE_CONNECTED:
             case BluetoothHeadset.STATE_DISCONNECTED:
-                JitsiMeetLogger.d(AudioModeModule.TAG + " BT headset connection state changed: " + state);
+                JitsiMeetLogger.d(TAG + " BT headset connection state changed: " + state);
                 updateDevices();
                 break;
             }
@@ -157,13 +116,12 @@ class BluetoothHeadsetMonitor {
             // XXX: This action will be fired when the connection established
             // with a Bluetooth headset (called a SCO connection) changes state.
             // When the SCO connection is active we route audio to it.
-            int state
-                = intent.getIntExtra(AudioManager.EXTRA_SCO_AUDIO_STATE, -99);
+            int state = intent.getIntExtra(AudioManager.EXTRA_SCO_AUDIO_STATE, -99);
 
             switch (state) {
             case AudioManager.SCO_AUDIO_STATE_CONNECTED:
             case AudioManager.SCO_AUDIO_STATE_DISCONNECTED:
-                JitsiMeetLogger.d(AudioModeModule.TAG + " BT SCO connection state changed: " + state);
+                JitsiMeetLogger.d(TAG + " BT SCO connection state changed: " + state);
                 updateDevices();
                 break;
             }
@@ -171,24 +129,63 @@ class BluetoothHeadsetMonitor {
     }
 
     private void registerBluetoothReceiver() {
-        BroadcastReceiver receiver = new BroadcastReceiver() {
+        receiver = new BroadcastReceiver() {
             @Override
             public void onReceive(Context context, Intent intent) {
                 onBluetoothReceiverReceive(context, intent);
             }
         };
-        IntentFilter filter = new IntentFilter();
 
+        IntentFilter filter = new IntentFilter();
         filter.addAction(AudioManager.ACTION_SCO_AUDIO_STATE_UPDATED);
         filter.addAction(BluetoothHeadset.ACTION_CONNECTION_STATE_CHANGED);
+
         context.registerReceiver(receiver, filter);
     }
 
     /**
      * Detects if there are new devices connected / disconnected and fires the
-     * {@link AudioModeModule#onAudioDeviceChange()} callback.
+     * {@link Listener} registered event.
      */
     private void updateDevices() {
-        audioModeModule.runInAudioThread(updateDevicesRunnable);
+        boolean headsetAvailable = (headset != null) && !headset.getConnectedDevices().isEmpty();
+        listener.onBluetoothDeviceChange(headsetAvailable);
+    }
+
+    public void start() {
+        AudioManager audioManager = (AudioManager) context.getSystemService(Context.AUDIO_SERVICE);
+
+        if (!audioManager.isBluetoothScoAvailableOffCall()) {
+            JitsiMeetLogger.w(TAG + " Bluetooth SCO is not available");
+            return;
+        }
+
+        if (!getBluetoothHeadsetProfileProxy()) {
+            JitsiMeetLogger.w(TAG + " Couldn't get BT profile proxy");
+            return;
+        }
+
+        registerBluetoothReceiver();
+
+        // Initial detection.
+        updateDevices();
+    }
+
+    public void stop() {
+        if (receiver != null) {
+            context.unregisterReceiver(receiver);
+        }
+
+        if (adapter != null && headset != null) {
+            adapter.closeProfileProxy(BluetoothProfile.HEADSET, headset);
+        }
+
+        receiver = null;
+        headset = null;
+        adapter = null;
+    }
+
+    interface Listener {
+        void onBluetoothDeviceChange(boolean deviceAvailable);
     }
 }

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

@@ -123,14 +123,17 @@ public class ConnectionService extends android.telecom.ConnectionService {
      * {@link android.telecom.Connection#STATE_ACTIVE}.
      *
      * @param callUUID the call UUID which identifies the connection.
+     * @return Whether the connection was set as active or not.
      */
-    static void setConnectionActive(String callUUID) {
+    static boolean setConnectionActive(String callUUID) {
         ConnectionImpl connection = connections.get(callUUID);
 
         if (connection != null) {
             connection.setActive();
+            return true;
         } else {
-            JitsiMeetLogger.e("%s setConnectionActive - no connection for UUID: %s", TAG, callUUID);
+            JitsiMeetLogger.w("%s setConnectionActive - no connection for UUID: %s", TAG, callUUID);
+            return false;
         }
     }
 
@@ -403,11 +406,9 @@ public class ConnectionService extends android.telecom.ConnectionService {
         @Override
         public void onCallAudioStateChanged(CallAudioState state) {
             JitsiMeetLogger.d(TAG + " onCallAudioStateChanged: " + state);
-            AudioModeModule audioModeModule
-                    = ReactInstanceManagerHolder
-                    .getNativeModule(AudioModeModule.class);
-            if (audioModeModule != null) {
-                audioModeModule.onCallAudioStateChange(state);
+            RNConnectionService module = ReactInstanceManagerHolder.getNativeModule(RNConnectionService.class);
+            if (module != null) {
+                module.onCallAudioStateChange(state);
             }
         }
 

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

@@ -0,0 +1,57 @@
+/*
+ * Copyright @ 2019-present 8x8, Inc.
+ *
+ * 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.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.module.annotations.ReactModule;
+import com.squareup.duktape.Duktape;
+
+@ReactModule(name = JavaScriptSandboxModule.NAME)
+class JavaScriptSandboxModule extends ReactContextBaseJavaModule {
+    public static final String NAME = "JavaScriptSandbox";
+
+    public JavaScriptSandboxModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+    }
+
+    /**
+     * Evaluates the given code in a Duktape VM.
+     * @param code - The code that needs to evaluated.
+     * @param promise - Resolved with the output in case of success or rejected with an exception
+     *                in case of failure.
+     */
+    @ReactMethod
+    public void evaluate(String code, Promise promise) {
+        Duktape vm = Duktape.create();
+        try {
+            Object res = vm.evaluate(code);
+            promise.resolve(res.toString());
+        } catch (Throwable tr) {
+            promise.reject(tr);
+        } finally {
+            vm.close();
+        }
+    }
+
+    @Override
+    public String getName() {
+        return NAME;
+    }
+}

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

@@ -16,11 +16,14 @@
  */
 package org.jitsi.meet.sdk;
 
+import android.content.Context;
+import android.content.SharedPreferences;
 import android.os.Bundle;
 
 import com.facebook.react.ReactInstanceManager;
 
 public class JitsiMeet {
+
     /**
      * Default {@link JitsiMeetConferenceOptions} which will be used for all conferences. When
      * joining a conference these options will be merged with the ones passed to
@@ -33,6 +36,9 @@ public class JitsiMeet {
     }
 
     public static void setDefaultConferenceOptions(JitsiMeetConferenceOptions options) {
+        if (options != null && options.getRoom() != null) {
+            throw new RuntimeException("'room' must be null in the default conference options");
+        }
         defaultConferenceOptions = options;
     }
 
@@ -69,4 +75,10 @@ public class JitsiMeet {
             reactInstanceManager.showDevOptionsDialog();
         }
     }
-}
+
+    public static boolean isCrashReportingDisabled(Context context) {
+        SharedPreferences preferences = context.getSharedPreferences("jitsi-default-preferences", Context.MODE_PRIVATE);
+        String value = preferences.getString("isCrashReportingDisabled", "");
+        return Boolean.parseBoolean(value);
+    }
+}

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

@@ -20,6 +20,7 @@ import android.content.Context;
 import android.content.Intent;
 import android.net.Uri;
 import android.os.Bundle;
+
 import androidx.annotation.Nullable;
 import androidx.fragment.app.FragmentActivity;
 
@@ -67,6 +68,9 @@ public class JitsiMeetActivity extends FragmentActivity
 
         setContentView(R.layout.activity_jitsi_meet);
 
+        // Listen for conference events.
+        getJitsiView().setListener(this);
+
         if (!extraInitialize()) {
             initialize();
         }
@@ -151,9 +155,6 @@ public class JitsiMeetActivity extends FragmentActivity
     }
 
     protected void initialize() {
-        // Listen for conference events.
-        getJitsiView().setListener(this);
-
         // Join the room specified by the URL the app was launched with.
         // Joining without the room option displays the welcome page.
         join(getConferenceOptions(getIntent()));
@@ -164,6 +165,8 @@ public class JitsiMeetActivity extends FragmentActivity
 
     @Override
     public void onActivityResult(int requestCode, int resultCode, Intent data) {
+        super.onActivityResult(requestCode, resultCode, data);
+
         JitsiMeetActivityDelegate.onActivityResult(this, requestCode, resultCode, data);
     }
 

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

@@ -22,7 +22,6 @@ 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.bridge.ReactContext;
@@ -122,7 +121,7 @@ public class JitsiMeetActivityDelegate {
             // https://github.com/facebook/react-native/blob/df4e67fe75d781d1eb264128cadf079989542755/ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManager.java#L512
             // Why this happens is a mystery wrapped in an enigma.
             ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
-            if (activity == reactContext.getCurrentActivity()) {
+            if (reactContext != null && activity == reactContext.getCurrentActivity()) {
                 reactInstanceManager.onHostPause(activity);
             }
         }
@@ -167,13 +166,7 @@ public class JitsiMeetActivityDelegate {
     }
 
     public static void onRequestPermissionsResult(
-        final int requestCode,
-        final String[] permissions,
-        final int[] grantResults) {
-        CalendarEventsPackage.onRequestPermissionsResult(
-            requestCode,
-            permissions,
-            grantResults);
+            final int requestCode, final String[] permissions, final int[] grantResults) {
         permissionsCallback = new Callback() {
             @Override
             public void invoke(Object... args) {

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

@@ -72,6 +72,46 @@ public class JitsiMeetConferenceOptions implements Parcelable {
      */
     private JitsiMeetUserInfo userInfo;
 
+    public URL getServerURL() {
+        return serverURL;
+    }
+
+    public String getRoom() {
+        return room;
+    }
+
+    public String getSubject() {
+        return subject;
+    }
+
+    public String getToken() {
+        return token;
+    }
+
+    public Bundle getColorScheme() {
+        return colorScheme;
+    }
+
+    public Bundle getFeatureFlags() {
+        return featureFlags;
+    }
+
+    public boolean getAudioMuted() {
+        return audioMuted;
+    }
+
+    public boolean getAudioOnly() {
+        return audioOnly;
+    }
+
+    public boolean getVideoMuted() {
+        return videoMuted;
+    }
+
+    public JitsiMeetUserInfo getUserInfo() {
+        return userInfo;
+    }
+
     /**
      * Class used to build the immutable {@link JitsiMeetConferenceOptions} object.
      */
@@ -248,6 +288,7 @@ public class JitsiMeetConferenceOptions implements Parcelable {
     }
 
     private JitsiMeetConferenceOptions(Parcel in) {
+        serverURL = (URL) in.readSerializable();
         room = in.readString();
         subject = in.readString();
         token = in.readString();
@@ -309,7 +350,7 @@ public class JitsiMeetConferenceOptions implements Parcelable {
             urlProps.putString("jwt", token);
         }
 
-        if (token == null && userInfo != null) {
+        if (userInfo != null) {
             props.putBundle("userInfo", userInfo.asBundle());
         }
 
@@ -336,6 +377,7 @@ public class JitsiMeetConferenceOptions implements Parcelable {
 
     @Override
     public void writeToParcel(Parcel dest, int flags) {
+        dest.writeSerializable(serverURL);
         dest.writeString(room);
         dest.writeString(subject);
         dest.writeString(token);

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

@@ -57,22 +57,6 @@ public class JitsiMeetFragment extends Fragment {
         return view;
     }
 
-    @Override
-    public void onActivityResult(int requestCode, int resultCode, Intent data) {
-        JitsiMeetActivityDelegate.onActivityResult(
-                getActivity(), requestCode, resultCode, data);
-    }
-
-    @Override
-    public void onDestroyView() {
-        if (view != null) {
-            view.dispose();
-            view = null;
-        }
-
-        super.onDestroyView();
-    }
-
     @Override
     public void onDestroy() {
         super.onDestroy();

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

@@ -87,7 +87,7 @@ public class JitsiMeetOngoingConferenceService extends Service
     @Override
     public int onStartCommand(Intent intent, int flags, int startId) {
         final String action = intent.getAction();
-        if (action.equals(Actions.START)) {
+        if (Actions.START.equals(action)) {
             Notification notification = OngoingNotification.buildOngoingConferenceNotification();
             if (notification == null) {
                 stopSelf();
@@ -96,7 +96,7 @@ public class JitsiMeetOngoingConferenceService extends Service
                 startForeground(OngoingNotification.NOTIFICATION_ID, notification);
                 JitsiMeetLogger.i(TAG + " Service started");
             }
-        } else if (action.equals(Actions.HANGUP)) {
+        } else if (Actions.HANGUP.equals(action)) {
             JitsiMeetLogger.i(TAG + " Hangup requested");
             // Abort all ongoing calls
             if (AudioModeModule.useConnectionService()) {

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

@@ -201,4 +201,10 @@ public class JitsiMeetView extends BaseReactView<JitsiMeetViewListener>
     protected void onExternalAPIEvent(String name, ReadableMap data) {
         onExternalAPIEvent(LISTENER_METHODS, name, data);
     }
+
+    @Override
+    protected void onDetachedFromWindow() {
+        dispose();
+        super.onDetachedFromWindow();
+    }
 }

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

@@ -29,13 +29,18 @@ import org.jitsi.meet.sdk.log.JitsiMeetLogger;
  */
 @RequiresApi(api = Build.VERSION_CODES.O)
 @ReactModule(name = RNConnectionService.NAME)
-class RNConnectionService
-    extends ReactContextBaseJavaModule {
+class RNConnectionService extends ReactContextBaseJavaModule {
 
     public static final String NAME = "ConnectionService";
 
     private static final String TAG = ConnectionService.TAG;
 
+    /**
+     * Handler for dealing with call state changes. We are acting as a proxy between ConnectionService
+     * and other modules such as {@link AudioModeModule}.
+     */
+    private CallAudioStateListener callAudioStateListener;
+
     /**
      * Sets the audio route on all existing {@link android.telecom.Connection}s
      *
@@ -84,9 +89,17 @@ class RNConnectionService
         ReactApplicationContext ctx = getReactApplicationContext();
 
         Uri address = Uri.fromParts(PhoneAccount.SCHEME_SIP, handle, null);
-        PhoneAccountHandle accountHandle
-            = ConnectionService.registerPhoneAccount(
-                    getReactApplicationContext(), address, callUUID);
+        PhoneAccountHandle accountHandle;
+
+        try {
+            accountHandle
+                = ConnectionService.registerPhoneAccount(getReactApplicationContext(), address, callUUID);
+        } catch (Throwable tr) {
+            JitsiMeetLogger.e(tr, TAG + " error in startCall");
+
+            promise.reject(tr);
+            return;
+        }
 
         Bundle extras = new Bundle();
         extras.putParcelable(
@@ -100,15 +113,23 @@ class RNConnectionService
 
         ConnectionService.registerStartCallPromise(callUUID, promise);
 
-        try {
-            TelecomManager tm
-                = (TelecomManager) ctx.getSystemService(
-                        Context.TELECOM_SERVICE);
+        TelecomManager tm = null;
 
+        try {
+            tm = (TelecomManager) ctx.getSystemService(Context.TELECOM_SERVICE);
             tm.placeCall(address, extras);
-        } catch (Exception e) {
+        } catch (Throwable tr) {
+            JitsiMeetLogger.e(tr, TAG + " error in startCall");
+            if (tm != null) {
+                try {
+                    tm.unregisterPhoneAccount(accountHandle);
+                } catch (Throwable tr1) {
+                    // UnsupportedOperationException: System does not support feature android.software.connectionservice
+                    // was observed here. Ignore.
+                }
+            }
             ConnectionService.unregisterStartCallPromise(callUUID);
-            promise.reject(e);
+            promise.reject(tr);
         }
     }
 
@@ -144,9 +165,13 @@ class RNConnectionService
      * @param callUUID - the call's UUID.
      */
     @ReactMethod
-    public void reportConnectedOutgoingCall(String callUUID) {
+    public void reportConnectedOutgoingCall(String callUUID, Promise promise) {
         JitsiMeetLogger.d(TAG + " reportConnectedOutgoingCall " + callUUID);
-        ConnectionService.setConnectionActive(callUUID);
+        if (ConnectionService.setConnectionActive(callUUID)) {
+            promise.resolve(null);
+        } else {
+            promise.reject("CONNECTION_NOT_FOUND_ERROR", "Connection wasn't found.");
+        }
     }
 
     @Override
@@ -167,4 +192,28 @@ class RNConnectionService
     public void updateCall(String callUUID, ReadableMap callState) {
         ConnectionService.updateCall(callUUID, callState);
     }
+
+    public CallAudioStateListener getCallAudioStateListener() {
+        return callAudioStateListener;
+    }
+
+    public void setCallAudioStateListener(CallAudioStateListener callAudioStateListener) {
+        this.callAudioStateListener = callAudioStateListener;
+    }
+
+    /**
+     * Handler for call state changes. {@code ConnectionServiceImpl} will call this handler when the
+     * call audio state changes.
+     *
+     * @param callAudioState The current call's audio state.
+     */
+    void onCallAudioStateChange(android.telecom.CallAudioState callAudioState) {
+        if (callAudioStateListener != null) {
+            callAudioStateListener.onCallAudioStateChange(callAudioState);
+        }
+    }
+
+    interface CallAudioStateListener {
+        void onCallAudioStateChange(android.telecom.CallAudioState callAudioState);
+    }
 }

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

@@ -1,6 +1,5 @@
 /*
- * Copyright @ 2019-present 8x8, Inc.
- * Copyright @ 2017-2018 Atlassian Pty Ltd
+ * Copyright @ 2017-present 8x8, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,8 +17,10 @@
 package org.jitsi.meet.sdk;
 
 import android.app.Activity;
+
 import androidx.annotation.Nullable;
 
+import com.facebook.hermes.reactexecutor.HermesExecutorFactory;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.bridge.NativeModule;
@@ -27,18 +28,15 @@ import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.common.LifecycleState;
 import com.facebook.react.devsupport.DevInternalSettings;
-import com.facebook.react.jscexecutor.JSCExecutorFactory;
 import com.facebook.react.modules.core.DeviceEventManagerModule;
 import com.facebook.react.uimanager.ViewManager;
 import com.facebook.soloader.SoLoader;
+
 import com.oney.WebRTCModule.RTCVideoViewManager;
 import com.oney.WebRTCModule.WebRTCModule;
 
-import org.jitsi.meet.sdk.log.JitsiMeetLogger;
 import org.webrtc.SoftwareVideoDecoderFactory;
 import org.webrtc.SoftwareVideoEncoderFactory;
-import org.webrtc.VideoDecoderFactory;
-import org.webrtc.VideoEncoderFactory;
 import org.webrtc.audio.AudioDeviceModule;
 import org.webrtc.audio.JavaAudioDeviceModule;
 
@@ -67,6 +65,7 @@ class ReactInstanceManagerHolder {
                 new AudioModeModule(reactContext),
                 new DropboxModule(reactContext),
                 new ExternalAPIModule(reactContext),
+                new JavaScriptSandboxModule(reactContext),
                 new LocaleDetector(reactContext),
                 new LogBridgeModule(reactContext),
                 new PictureInPictureModule(reactContext),
@@ -84,12 +83,10 @@ class ReactInstanceManagerHolder {
 
         AudioDeviceModule adm = JavaAudioDeviceModule.builder(reactContext)
             .createAudioDeviceModule();
-        VideoDecoderFactory videoDecoderFactory = new SoftwareVideoDecoderFactory();
-        VideoEncoderFactory videoEncoderFactory = new SoftwareVideoEncoderFactory();
-
         options.setAudioDeviceModule(adm);
-        options.setVideoDecoderFactory(videoDecoderFactory);
-        options.setVideoEncoderFactory(videoEncoderFactory);
+
+        options.setVideoDecoderFactory(new SoftwareVideoDecoderFactory());
+        options.setVideoEncoderFactory(new SoftwareVideoEncoderFactory());
 
         nativeModules.add(new WebRTCModule(reactContext, options));
 
@@ -193,6 +190,7 @@ class ReactInstanceManagerHolder {
                 new com.corbt.keepawake.KCKeepAwakePackage(),
                 new com.facebook.react.shell.MainReactPackage(),
                 new com.horcrux.svg.SvgPackage(),
+                new com.kevinresol.react_native_default_preference.RNDefaultPreferencePackage(),
                 new com.ocetnik.timer.BackgroundTimerPackage(),
                 new com.reactnativecommunity.asyncstorage.AsyncStoragePackage(),
                 new com.reactnativecommunity.netinfo.NetInfoPackage(),
@@ -218,9 +216,8 @@ class ReactInstanceManagerHolder {
             // Ignore any error, the module is not compiled when LIBRE_BUILD is enabled.
         }
 
-        // Keep on using JSC, the jury is out on Hermes.
-        JSCExecutorFactory jsFactory
-            = new JSCExecutorFactory("", "");
+        // Use the Hermes JavaScript engine.
+        HermesExecutorFactory jsFactory = new HermesExecutorFactory();
 
         reactInstanceManager
             = ReactInstanceManager.builder()

android/sdk/src/main/java/org/jitsi/meet/sdk/log/JitsiMeetLogger.java

@@ -24,11 +24,24 @@ public class JitsiMeetLogger {
     }
 
     public static void addHandler(JitsiMeetBaseLogHandler handler) {
-        Timber.plant(handler);
+        if (!Timber.forest().contains(handler)) {
+            try {
+                Timber.plant(handler);
+            } catch (Throwable t) {
+                Timber.w(t, "Couldn't add log handler");
+            }
+
+        }
     }
 
     public static void removeHandler(JitsiMeetBaseLogHandler handler) {
-        Timber.uproot(handler);
+        if (Timber.forest().contains(handler)) {
+            try {
+                Timber.uproot(handler);
+            } catch (Throwable t) {
+                Timber.w(t, "Couldn't remove log handler");
+            }
+        }
     }
 
     public static void v(String message, Object... args) {

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

@@ -43,7 +43,7 @@ public class NAT64AddrInfoModule
      * 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";
+    private final static String HOST = "ipv4only.arpa";
 
     /**
      * How long is the {@link NAT64AddrInfo} instance valid.

android/settings.gradle

@@ -9,8 +9,10 @@ include ':react-native-community-async-storage'
 project(':react-native-community-async-storage').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/async-storage/android')
 include ':react-native-community_netinfo'
 project(':react-native-community_netinfo').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/netinfo/android')
+include ':react-native-default-preference'
+project(':react-native-default-preference').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-default-preference/android')
 include ':react-native-google-signin'
-project(':react-native-google-signin').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-google-signin/android')
+project(':react-native-google-signin').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/google-signin/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'
@@ -24,4 +26,4 @@ project(':react-native-svg').projectDir = new File(rootProject.projectDir, 	'../
 include ':react-native-webrtc'
 project(':react-native-webrtc').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webrtc/android')
 include ':react-native-webview'
-project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
+project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')

app.js

@@ -6,10 +6,10 @@ import 'jQuery-Impromptu';
 
 import conference from './conference';
 import API from './modules/API';
+import UI from './modules/UI/UI';
 import keyboardshortcut from './modules/keyboardshortcut/keyboardshortcut';
 import remoteControl from './modules/remotecontrol/RemoteControl';
 import translation from './modules/translation/translation';
-import UI from './modules/UI/UI';
 
 window.APP = {
     API,

base.html

@@ -0,0 +1 @@
+<base href="/" />

config.js

@@ -1,16 +1,6 @@
 /* eslint-disable no-unused-vars, no-var */
 
 var config = {
-    // Configuration
-    //
-
-    // Alternative location for the configuration.
-    // configLocation: './config.json',
-
-    // Custom function which given the URL path should return a room name.
-    // getroomnode: function (path) { return 'someprefixpossiblybasedonpath'; },
-
-
     // Connection
     //
 
@@ -40,6 +30,9 @@ var config = {
     // BOSH URL. FIXME: use XEP-0156 to discover it.
     bosh: '//jitsi-meet.example.com/http-bind',
 
+    // Websocket URL
+    // websocket: 'wss://jitsi-meet.example.com/xmpp-websocket',
+
     // The name of client node advertised in XEP-0115 'c' stanza
     clientNode: 'http://jitsi.org/jitsimeet',
 
@@ -51,15 +44,23 @@ var config = {
     //
 
     testing: {
-        // Enables experimental simulcast support on Firefox.
-        enableFirefoxSimulcast: false,
-
         // P2P test mode disables automatic switching to P2P when there are 2
         // participants in the conference.
         p2pTestMode: false
 
         // Enables the test specific features consumed by jitsi-meet-torture
         // testMode: false
+
+        // Disables the auto-play behavior of *all* newly created video element.
+        // This is useful when the client runs on a host with limited resources.
+        // noAutoPlayVideo: false
+
+        // Enable / disable 500 Kbps bitrate cap on desktop tracks. When enabled,
+        // simulcast is turned off for the desktop share. If presenter is turned
+        // on while screensharing is in progress, the max bitrate is automatically
+        // adjusted to 2.5 Mbps. This takes a value between 0 and 1 which determines
+        // the probability for this to be enabled.
+        // capScreenshareBitrate: 1 // 0 to disable
     },
 
     // Disables ICE/UDP by filtering out local and remote UDP candidates in
@@ -78,6 +79,18 @@ var config = {
 
     // Disable measuring of audio levels.
     // disableAudioLevels: false,
+    // audioLevelsInterval: 200,
+
+    // Enabling this will run the lib-jitsi-meet no audio detection module which
+    // will notify the user if the current selected microphone has no audio
+    // input and will suggest another valid device if one is present.
+    enableNoAudioDetection: true,
+
+    // Enabling this will run the lib-jitsi-meet noise detection module which will
+    // notify the user if there is noise, other than voice, coming from the current
+    // selected microphone. The purpose it to let the user know that the input could
+    // be potentially unpleasant for other meeting participants.
+    enableNoisyMicDetection: true,
 
     // Start the conference in audio only mode (no video is being received nor
     // sent).
@@ -101,12 +114,11 @@ var config = {
 
     // w3c spec-compliant video constraints to use for video capture. Currently
     // used by browsers that return true from lib-jitsi-meet's
-    // util#browser#usesNewGumFlow. The constraints are independency from
-    // this config's resolution value. Defaults to requesting an ideal aspect
-    // ratio of 16:9 with an ideal resolution of 720.
+    // util#browser#usesNewGumFlow. The constraints are independent from
+    // this config's resolution value. Defaults to requesting an ideal
+    // resolution of 720p.
     // constraints: {
     //     video: {
-    //         aspectRatio: 16 / 9,
     //         height: {
     //             ideal: 720,
     //             max: 720,
@@ -221,6 +233,14 @@ var config = {
     // disabled, then bandwidth estimations are disabled.
     // enableRemb: false,
 
+    // Enables ICE restart logic in LJM and displays the page reload overlay on
+    // ICE failure. Current disabled by default because it's causing issues with
+    // signaling when Octo is enabled. Also when we do an "ICE restart"(which is
+    // not a real ICE restart), the client maintains the TCC sequence number
+    // counter, but the bridge resets it. The bridge sends media packets with
+    // TCC sequence numbers starting from 0.
+    // enableIceRestart: false,
+
     // Defines the minimum number of participants to start a call (the default
     // is set in Jicofo and set to 2).
     // minParticipants: 2,
@@ -284,6 +304,9 @@ var config = {
     // and microsoftApiApplicationClientID
     // enableCalendarIntegration: false,
 
+    // When 'true', it shows an intermediate page before joining, where the user can  configure its devices.
+    // prejoinPageEnabled: false,
+
     // Stats
     //
 
@@ -293,18 +316,19 @@ var config = {
     // estimation tests.
     // gatherStats: false,
 
+    // The interval at which PeerConnection.getStats() is called. Defaults to 10000
+    // pcStatsInterval: 10000,
+
     // To enable sending statistics to callstats.io you must provide the
     // Application ID and Secret.
     // callStatsID: '',
     // callStatsSecret: '',
 
-    // enables callstatsUsername to be reported as statsId and used
-    // by callstats as repoted remote id
-    // enableStatsID: false
-
     // enables sending participants display name to callstats
-    // enableDisplayNameInStats: false
+    // enableDisplayNameInStats: false,
 
+    // enables sending participants email if available to callstats and other analytics
+    // enableEmailInStats: false,
 
     // Privacy
     //
@@ -332,10 +356,10 @@ var config = {
 
         // The STUN servers that will be used in the peer to peer connections
         stunServers: [
-            { urls: 'stun:stun.l.google.com:19302' },
-            { urls: 'stun:stun1.l.google.com:19302' },
-            { urls: 'stun:stun2.l.google.com:19302' }
-        ],
+
+            // { urls: 'stun:jitsi-meet.example.com:4446' },
+            { urls: 'stun:meet-jit-si-turnrelay.jitsi.net:443' }
+        ]
 
         // Sets the ICE transport policy for the p2p connection. At the time
         // of this writing the list of possible values are 'all' and 'relay',
@@ -347,7 +371,7 @@ var config = {
 
         // If set to true, it will prefer to use H.264 for P2P calls (if H.264
         // is supported).
-        preferH264: true
+        // preferH264: true
 
         // If set to true, disable H.264 video codec by stripping it out of the
         // SDP.
@@ -362,6 +386,10 @@ var config = {
         // The Google Analytics Tracking ID:
         // googleAnalyticsTrackingId: 'your-tracking-id-UA-123456-1'
 
+        // Matomo configuration:
+        // matomoEndpoint: 'https://your-matomo-endpoint/',
+        // matomoSiteID: '42',
+
         // The Amplitude APP Key:
         // amplitudeAPPKey: '<APP_KEY>'
 
@@ -378,7 +406,24 @@ var config = {
         // shard: "shard1",
         // region: "europe",
         // userRegion: "asia"
-    }
+    },
+
+    // Decides whether the start/stop recording audio notifications should play on record.
+    // disableRecordAudioNotification: false,
+
+    // Information for the chrome extension banner
+    // chromeExtensionBanner: {
+    //     // The chrome extension to be installed address
+    //     url: 'https://chrome.google.com/webstore/detail/jitsi-meetings/kglhbbefdnlheedjiejgomgmfplipfeb',
+
+    //     // Extensions info which allows checking if they are installed or not
+    //     chromeExtensionsInfo: [
+    //         {
+    //             id: 'kglhbbefdnlheedjiejgomgmfplipfeb',
+    //             path: 'jitsi-logo-48x48.png'
+    //         }
+    //     ]
+    // },
 
     // Local Recording
     //
@@ -396,7 +441,7 @@ var config = {
     //     format: 'flac'
     //
 
-    // }
+    // },
 
     // Options related to end-to-end (participant to participant) ping.
     // e2eping: {
@@ -408,22 +453,49 @@ var config = {
     //   // with the measured RTT will be sent. Defaults to 60000, set
     //   // to <= 0 to disable.
     //   analyticsInterval: 60000,
-    //   }
+    //   },
 
     // If set, will attempt to use the provided video input device label when
     // triggering a screenshare, instead of proceeding through the normal flow
     // for obtaining a desktop stream.
     // NOTE: This option is experimental and is currently intended for internal
     // use only.
-    // _desktopSharingSourceDevice: 'sample-id-or-label'
+    // _desktopSharingSourceDevice: 'sample-id-or-label',
 
     // If true, any checks to handoff to another application will be prevented
     // and instead the app will continue to display in the current browser.
-    // disableDeepLinking: false
+    // disableDeepLinking: false,
 
     // A property to disable the right click context menu for localVideo
     // the menu has option to flip the locally seen video for local presentations
-    // disableLocalVideoFlip: false
+    // disableLocalVideoFlip: false,
+
+    // Mainly privacy related settings
+
+    // Disables all invite functions from the app (share, invite, dial out...etc)
+    // disableInviteFunctions: true,
+
+    // Disables storing the room name to the recents list
+    // doNotStoreRoom: true,
+
+    // Deployment specific URLs.
+    // deploymentUrls: {
+    //    // If specified a 'Help' button will be displayed in the overflow menu with a link to the specified URL for
+    //    // user documentation.
+    //    userDocumentationURL: 'https://docs.example.com/video-meetings.html',
+    //    // If specified a 'Download our apps' button will be displayed in the overflow menu with a link
+    //    // to the specified URL for an app download page.
+    //    downloadAppsUrl: 'https://docs.example.com/our-apps.html'
+    // },
+
+    // Options related to the remote participant menu.
+    // remoteVideoMenu: {
+    //     // If set to true the 'Kick out' button will be disabled.
+    //     disableKick: true
+    // },
+
+    // If set to true all muting operations of remote participants will be disabled.
+    // disableRemoteMute: true,
 
     // List of undocumented settings used in jitsi-meet
     /**
@@ -475,6 +547,12 @@ var config = {
      startBitrate
      */
 
+
+    // Allow all above example options to include a trailing comma and
+    // prevent fear when commenting out the last value.
+    makeJsonParserHappy: 'even if last key had a trailing comma'
+
+    // no configuration value should follow this line.
 };
 
 /* eslint-enable no-unused-vars, no-var */

connection.js

@@ -1,8 +1,9 @@
 /* global APP, JitsiMeetJS, config */
 
-import AuthHandler from './modules/UI/authentication/AuthHandler';
-import jitsiLocalStorage from './modules/util/JitsiLocalStorage';
+import Logger from 'jitsi-meet-logger';
+import { jitsiLocalStorage } from 'js-utils';
 
+import AuthHandler from './modules/UI/authentication/AuthHandler';
 import {
     connectionEstablished,
     connectionFailed
@@ -13,7 +14,14 @@ import {
     JitsiConnectionEvents
 } from './react/features/base/lib-jitsi-meet';
 
-const logger = require('jitsi-meet-logger').getLogger(__filename);
+const logger = Logger.getLogger(__filename);
+
+/**
+ * The feature announced so we can distinguish jibri participants.
+ *
+ * @type {string}
+ */
+export const DISCO_JIBRI_FEATURE = 'http://jitsi.org/protocol/jibri';
 
 /**
  * Checks if we have data to use attach instead of connect. If we have the data
@@ -75,7 +83,15 @@ function connect(id, password, roomName) {
     const connectionConfig = Object.assign({}, config);
     const { issuer, jwt } = APP.store.getState()['features/base/jwt'];
 
-    connectionConfig.bosh += `?room=${roomName}`;
+    // Use Websocket URL for the web app if configured. Note that there is no 'isWeb' check, because there's assumption
+    // that this code executes only on web browsers/electron. This needs to be changed when mobile and web are unified.
+    let serviceUrl = connectionConfig.websocket || connectionConfig.bosh;
+
+    serviceUrl += `?room=${roomName}`;
+
+    // FIXME Remove deprecated 'bosh' option assignment at some point(LJM will be accepting only 'serviceUrl' option
+    //  in future). It's included for the time being for Jitsi Meet and lib-jitsi-meet versions interoperability.
+    connectionConfig.serviceUrl = connectionConfig.bosh = serviceUrl;
 
     const connection
         = new JitsiMeetJS.JitsiConnection(
@@ -83,6 +99,10 @@ function connect(id, password, roomName) {
             jwt && issuer && issuer !== 'anonymous' ? jwt : undefined,
             connectionConfig);
 
+    if (config.iAmRecorder) {
+        connection.addFeature(DISCO_JIBRI_FEATURE);
+    }
+
     return new Promise((resolve, reject) => {
         connection.addEventListener(
             JitsiConnectionEvents.CONNECTION_ESTABLISHED,

connection_optimization/do_external_connect.js

@@ -1,7 +1,7 @@
 /* global config, createConnectionExternally */
 
 import getRoomName from '../react/features/base/config/getRoomName';
-import parseURLParams from '../react/features/base/config/parseURLParams';
+import { parseURLParams } from '../react/features/base/util/parseURLParams';
 
 /**
  * Implements external connect using createConnectionExternally function defined
@@ -17,10 +17,11 @@ import parseURLParams from '../react/features/base/config/parseURLParams';
 
 if (typeof createConnectionExternally === 'function') {
     // URL params have higher priority than config params.
+    // Do not use external connect if websocket is enabled.
     let url
         = parseURLParams(window.location, true, 'hash')[
                 'config.externalConnectUrl']
-            || config.externalConnectUrl;
+            || config.websocket ? undefined : config.externalConnectUrl;
     const isRecorder
         = parseURLParams(window.location, true, 'hash')['config.iAmRecorder'];
 

css/_audio-preview.css

@@ -0,0 +1,135 @@
+.audio-preview {
+    &-content {
+        font-size: 15px;
+        line-height: 24px;
+        max-height: 456px;
+        overflow: auto;
+        width: 328px;
+    }
+
+    &-header {
+        color: #fff;
+        display: flex;
+        padding: 16px;
+
+        &-icon {
+            color: #A4B8D1;
+            display: inline-block;
+        }
+
+        &-text {
+            font-weight: bold;
+            margin-left: 8px;
+        }
+    }
+
+    &-entry {
+        align-items: center;
+        color: #fff;
+        cursor: pointer;
+        display: flex;
+        padding: 12px 0;
+        margin-left: 48px;
+
+        &--selected {
+            background: rgba(28,32,37,0.5);
+            cursor: initial;
+            margin-left: 0;
+            padding-left: 21px;
+        }
+
+        &-text {
+            color: #fff;
+            font-size: 15px;
+            display: inline-block;
+            line-height: 24px;
+            text-overflow: ellipsis;
+            max-width: 213px;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+    }
+
+    &-speaker {
+        position: relative;
+
+        &:hover {
+            .audio-preview-entry {
+                background: rgba(255,255,255, 0.2);
+                margin-left: 0;
+                padding-left: 48px;
+
+                &--selected {
+                    padding-left: 21px;
+                }
+            }
+
+            .audio-preview-test-button {
+                display: inline-block;
+            }
+
+            .audio-preview-entry-text {
+                max-width: 196px;
+            }
+        }
+
+        .audio-preview-entry-text {
+            max-width: 256px;
+        }
+    }
+
+    &-microphone {
+        position: relative;
+    }
+
+
+    &-icon {
+        border-radius: 50%;
+        display: inline-block;
+        width: 14px;
+
+        & svg {
+            fill: #1C2025;
+        }
+
+        &--check {
+            background: #31B76A;
+            margin-right: 13px;
+        }
+
+        &--exclamation {
+            margin-left: 6px;
+            & svg {
+                fill: #E54B4B;
+            }
+        }
+    }
+
+    &-test-button {
+        display: none;
+        background: #FFF;
+        border: 1px solid #D1DBE8;
+        border-radius: 3px;
+        color: #1C2025;
+        cursor: pointer;
+        font-weight: 600;
+        font-size: 15px;
+        line-height: 24px;
+        padding: 4px 16px;
+        position: absolute;
+        right: 16px;
+        top: 8px;
+    }
+
+    &-meter-mic {
+        position: absolute;
+        right: 16px;
+        top: 18px;
+    }
+
+   // Override @atlaskit/InlineDialog container which is made with styled components
+    & > div > div:nth-child(2) > div > div {
+        outline: none;
+        padding: 0;
+    }
+}

css/_avatar.scss

@@ -1,24 +1,23 @@
 .avatar {
-    align-items: center;
     background-color: #AAA;
-    display: flex;
     border-radius: 50%;
     color: rgba(255, 255, 255, 0.6);
     font-weight: 100;
-    justify-content: center;
     object-fit: cover;
-}
 
-.avatar-foreign {
-    align-items: center;
-    bottom: 0;
-    display: flex;
-    font-size: 40pt;
-    justify-content: center;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
+    &.avatar-small {
+        height: 28px !important;
+        width: 28px !important;
+    }
+
+    &.avatar-xsmall {
+        height: 16px !important;
+        width: 16px !important;
+    }
+
+    .jitsi-icon {
+        transform: translateY(50%);
+    }
 }
 
 .avatar-svg {
@@ -28,4 +27,28 @@
 
 .defaultAvatar {
     opacity: 0.6
-}
+}
+
+.avatar-badge {
+    position: relative;
+
+    &-available::after {
+        @include avatarBadge;
+        background-color: $presence-available;
+    }
+
+    &-away::after {
+        @include avatarBadge;
+        background-color: $presence-away;
+    }
+
+    &-busy::after {
+        @include avatarBadge;
+        background-color: $presence-busy;
+    }
+
+    &-idle::after {
+        @include avatarBadge;
+        background-color: $presence-idle;
+    }
+}

css/_base.scss

@@ -33,10 +33,15 @@ body {
     }
 }
 
-svg {
+.jitsi-icon svg {
     fill: white;
 }
 
+.jitsi-icon.gray svg {
+    fill: #5E6D7A;
+    cursor: pointer;
+}
+
 /**
  * AtlasKitThemeProvider sets a background color on an app-wrapping div, thereby
  * preventing transparency in filmstrip-only mode. The selector chosen to
@@ -161,6 +166,7 @@ form {
 ::-webkit-scrollbar {
     background: transparent;
     width: 7px;
+    height: $scrollHeight;
 }
 
 ::-webkit-scrollbar-button {

css/_chat.scss

@@ -80,6 +80,28 @@
     }
 }
 
+#chat-recipient {
+    align-items: center;
+    background-color: $chatPrivateMessageBackgroundColor;
+    display: flex;
+    flex-direction: row;
+    font-weight: 100;
+    padding: 10px;
+
+    span {
+        color: white;
+        display: flex;
+        flex: 1;
+    }
+
+    div {
+        svg {
+            cursor: pointer;
+            fill: white
+        }
+    }
+}
+
 .chat-header {
     background-color: $chatHeaderBackgroundColor;
     height: 70px;
@@ -111,6 +133,7 @@
 #chat-input {
     border-top: 1px solid $chatInputSeparatorColor;
     display: flex;
+    padding: 5px 10px;
 
     * {
         background-color: transparent;
@@ -131,8 +154,7 @@
     box-shadow: none;
     color: white;
     font-size: 15px;
-    line-height: 30px;
-    padding: 5px;
+    padding: 10px;
     overflow-y: auto;
     resize: none;
     width: 100%;
@@ -162,6 +184,7 @@
     .display-name {
         font-size: 13px;
         font-weight: bold;
+        margin-bottom: 5px;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
@@ -175,7 +198,6 @@
     color: white;
     margin-top: 3px;
     max-width: 100%;
-    padding-bottom: 3px;
     position: relative;
 
     &.localuser {
@@ -183,6 +205,10 @@
         border-radius: 6px 0px 6px 6px;
     }
 
+    .usermessage {
+        white-space: pre-wrap;
+    }
+
     &.error {
         border-radius: 0px;
 
@@ -196,6 +222,17 @@
             padding: 0;
         }
     }
+
+    .privatemessagenotice {
+        font-size: 11px;
+        font-weight: 100;
+    }
+
+    .messagecontent {
+        margin: 5px 10px;
+        max-width: 100%;
+        overflow: hidden;
+    }
 }
 
 .smiley {
@@ -228,6 +265,7 @@
 .smileys-panel {
     bottom: 100%;
     box-sizing: border-box;
+    background-color: rgba(0, 0, 0, .6) !important;
     height: auto;
     max-height: 0;
     overflow: hidden;
@@ -270,10 +308,6 @@
     cursor: pointer;
 }
 
-#usermsg::-webkit-input-placeholder {
-    line-height: 30px;
-}
-
 #usermsg::-webkit-scrollbar-track-piece {
     background: #3a3a3a;
 }
@@ -288,6 +322,10 @@
         .chatmessage {
             background-color: $chatLocalMessageBackgroundColor;
             border-radius: 6px 0px 6px 6px;
+
+            &.privatemessage {
+                background-color: $chatPrivateMessageBackgroundColor;
+            }
         }
 
         .display-name {
@@ -301,8 +339,9 @@
 
     &.error {
         .chatmessage {
+            background-color: $defaultWarningColor;
             border-radius: 0px;
-            color: red;
+            font-weight: 100;
         }
 
         .display-name {
@@ -312,6 +351,25 @@
 
     .chatmessage-wrapper {
         max-width: 100%;
+
+        .replywrapper {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            .messageactions {
+                align-self: stretch;
+                border-left: 1px solid $chatActionsSeparatorColor;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                padding: 5px;
+
+                .toolbox-icon {
+                    cursor: pointer;
+                }
+            }
+        }
     }
 
     .chatmessage {
@@ -320,6 +378,9 @@
         display: inline-block;
         margin-top: 3px;
         color: white;
-        padding: 8px;
+
+        &.privatemessage {
+            background-color: $chatPrivateMessageBackgroundColor;
+        }
     }
 }

css/_chrome-extension-banner.scss

@@ -0,0 +1,93 @@
+.chrome-extension-banner {
+  position: fixed;
+  width: 406px;
+  height: $chromeExtensionBannerHeight;
+  background: #FFF;
+  box-shadow: 0px 2px 48px rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
+  z-index: 1000;
+  float: right;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 20px;
+  top: $chromeExtensionBannerTop;
+  right: $chromeExtensionBannerRight;
+    &__pos_in_meeting {
+      top: $chromeExtensionBannerTopInMeeting;
+      right: $chromeExtensionBannerRightInMeeeting;
+    }
+
+    &__container {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 16px;
+    }
+
+    &__button-container {
+      display: flex;
+    }
+
+    &__checkbox-container {
+        display: $chromeExtensionBannerDontShowAgainDisplay;
+        margin-left: 45px;
+        margin-top: 16px;
+    }
+
+    &__checkbox-label {
+        font-size: 14px;
+        line-height: 18px;
+        display: flex;
+        align-items: center;
+        letter-spacing: -0.006em;
+        color: #1C2025;
+    }
+
+    &__icon-container {
+      display: flex;
+      background: url('../images/chromeLogo.svg');
+      background-repeat: no-repeat;
+      width: 27px;
+      height: 27px;
+    }
+
+    &__text-container {
+      font-size: 14px;
+      line-height: 18px;
+      display: flex;
+      align-items: center;
+      letter-spacing: -0.006em;
+      color: #151531;
+      width: 329px;
+    }
+
+    &__close-container {
+      display: flex;
+      width: 12px;
+      height: 12px;
+    }
+
+    &__gray-close-icon {
+      fill: #5E6D7A;
+      width: 12px;
+      height: 12px;
+      cursor: pointer;
+    }
+
+    &__button-open-url {
+      background: #0A57EB;
+      border-radius: 24px;
+      margin-left: 45px;
+      width: 236px;
+      height: 40px;
+      cursor: pointer;
+    }
+
+    &__button-text {
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 40px;
+      text-align: center;
+      letter-spacing: -0.006em;
+      color: #FFFFFF;
+    }
+}

css/_country-picker.scss

@@ -0,0 +1,75 @@
+.cpick {
+    border: 1px solid #A4B8D1;
+    color: #fff;
+    display: flex;
+    font-size: 15px;
+    height: 38px;
+    line-height: 24px;
+
+    &-selector {
+        align-items: center;
+        background-color: #283447;
+        border-right: 1px solid #A4B8D1;
+        cursor: pointer;
+        display: flex;
+        padding: 8px 10px;
+        position: relative;
+        width: 88px;
+    }
+
+    &-icon {
+        margin-right: 8px;
+        position: absolute;
+        right: 0;
+        top: 12px;
+
+        & > svg {
+            fill: #fff;
+        }
+    }
+
+    &-input {
+        padding: 8px;
+        background: #1C2025;
+        border: 0;
+        margin: 0;
+        color: #fff;
+        caret-color: #0376DA;
+        flex-grow: 1;
+    }
+
+    &-dropdown {
+        height: 190px;
+        overflow-y: auto;
+        width: 343px;
+    }
+
+    &-dropdown-entry {
+        align-items: center;
+        cursor: pointer;
+        display: flex;
+        height: 40px;
+        padding: 0 10px;
+
+        &:hover {
+            background-color: #66768b;
+        }
+
+        &-text {
+            color: #fff;
+            flex-grow: 1;
+            font-size: 15px;
+            line-height: 24px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+        }
+    }
+}
+
+// Override @Atlaskit/inline-dialog styles
+.cpick-container > div > div:nth-child(2) > div > div {
+    outline: none;
+    padding: 8px 0 0 0;
+}

css/_labels.scss

@@ -0,0 +1,68 @@
+.large-video-labels {
+    display: flex;
+    position: absolute;
+    top: 30px;
+    right: 30px;
+    transition: right 0.5s;
+    z-index: $zindex3;
+
+    .circular-label {
+        align-items: center;
+        color: white;
+        display: flex;
+        font-weight: bold;
+        justify-content: center;
+        margin-left: 8px;
+        opacity: 0.8;
+    }
+
+    .circular-label {
+        background: #B8C7E0;
+    }
+
+    .circular-label.e2ee {
+        align-items: center;
+        background: #76CF9C;
+        display: flex;
+        justify-content: center;
+    }
+
+    .circular-label.file {
+        background: #FF5630;
+    }
+
+    .circular-label.local-rec {
+        background: #FF5630;
+    }
+
+    .circular-label.stream {
+        background: #0065FF;
+    }
+
+    .circular-label.insecure {
+        background: $defaultWarningColor;
+    }
+
+    .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 {
+    background: $videoStateIndicatorBackground;
+    border-radius: 50%;
+    box-sizing: border-box;
+    cursor: default;
+    font-size: 13px;
+    height: $videoStateIndicatorSize;
+    line-height: $videoStateIndicatorSize;
+    text-align: center;
+    min-width: $videoStateIndicatorSize;
+}

css/_meter.css

@@ -0,0 +1,30 @@
+.jitsi-icon {
+    &.metr {
+        display: inline-block;
+
+        & > svg {
+            fill: #4E5E6C;
+            width: 38px;
+        }
+    }
+
+    &.metr--disabled {
+        & > svg {
+            fill: #4E5E6C;
+        }
+    }
+}
+
+.metr-l-0 {
+    rect:first-child {
+        fill: #31B76A;
+    }
+}
+
+@for $i from 1 through 7 {
+    .metr-l-#{$i} {
+        rect:nth-child(-n+#{$i+1}) {
+            fill: #31B76A;
+        }
+    }
+}

css/_mini_toolbox.scss

@@ -0,0 +1,66 @@
+.filmstrip-toolbox,
+.always-on-top-toolbox {
+    background-color: $newToolbarBackgroundColor;
+    border-radius: 3px;
+    display: flex;
+    z-index: $toolbarZ;
+
+    .toolbox-icon {
+        cursor: pointer;
+        padding: 7px;
+
+        &.toggled {
+            background: $AOTToolbarButtonToggleColor;
+        }
+
+        &.disabled {
+            cursor: initial;
+        }
+    }
+}
+
+.always-on-top-toolbox {
+    flex-direction: row;
+    left: 50%;
+    position: absolute;
+    top: 10px;
+    transform: translateX(-50%);
+
+    .toolbox-button {
+        &:first-child {
+            .toolbox-icon {
+                border-top-left-radius: 3px;
+                border-bottom-left-radius: 3px;
+            }
+        }
+
+        &:nth-child(2) {
+            svg {
+                fill: $hangupColor;
+            }
+        }
+
+        &:last-child {
+            .toolbox-icon {
+                border-top-right-radius: 3px;
+                border-bottom-right-radius: 3px;
+            }
+        }
+    }
+}
+
+.filmstrip-toolbox {
+    flex-direction: column;
+
+    .toolbox-button {
+        &:nth-child(1) {
+            svg {
+                fill: $hangupColor;
+            }
+        }
+
+        .toolbox-icon {
+            border-radius: 3px;
+        }
+    }
+}

css/_mixins.scss

@@ -192,4 +192,17 @@
  */
 @mixin transparentBg($color, $alpha) {
     background-color: rgba(red($color), green($color), blue($color), $alpha);
-}
+}
+
+/**
+ * Avatar status badge mixin
+ */
+@mixin avatarBadge {
+    border-radius: 50%;
+    content: '';
+    display: block;
+    height: 35%;
+    position: absolute;
+    bottom: 0;
+    width: 35%;
+}

css/_participants-count.scss

@@ -0,0 +1,26 @@
+.participants-count {
+    background: #fff;
+    border-radius: 4px;
+    color: #5e6d7a;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 13px;
+    line-height: 20px;
+    margin-left: 16px;
+    padding: 4px 8px;
+    pointer-events: auto;
+
+    &-number {
+        margin-right: 8px;
+        vertical-align: middle;
+    }
+
+    &-icon {
+        background: url('../images/user-groups.svg');
+        background-repeat: no-repeat;
+        display: inline-block;
+        height: 16px;
+        width: 16px;
+        vertical-align: middle;
+    }
+}

css/_popup_menu.scss

@@ -6,7 +6,7 @@
     min-width: 75px;
     text-align: left;
     padding: 0px;
-    width: 150px;
+    width: 180px;
     white-space: nowrap;
 
     &__item {
@@ -87,6 +87,7 @@
         display: inline-block;
         min-width: 20px;
         height: 100%;
+        padding-right: 10px;
 
         > * {
             @include absoluteAligning();

css/_prejoin-dialog.scss

@@ -0,0 +1,182 @@
+.prejoin-dialog {
+    background: #1C2025;
+    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.5);
+    border-radius: 5px;
+    color: #fff;
+    height: 400px;
+    width: 375px;
+
+    &--small {
+        height: 300;
+        width: 400;
+    }
+
+    &-label {
+        font-size: 15px;
+        line-height: 24px;
+
+        &-num {
+            background: #2b3b4b;
+            border: 1px solid #A4B8D1;
+            border-radius: 50%;
+            color: #fff;
+            display: inline-block;
+            height: 24px;
+            margin-right: 8px;
+            width: 24px;
+        }
+    }
+
+    &-container {
+        align-items: center;
+        background: rgba(0,0,0,0.6);
+        display: flex;
+        height: 100vh;
+        justify-content: center;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100vw;
+        z-index: 3;
+    }
+
+    &-flag {
+        display: inline-block;
+        margin-right: 8px;
+        transform: scale(1.2);
+    }
+
+    &-title {
+        display: inline-block;
+        font-size: 24px;
+        line-height: 32px;
+    }
+
+    &-icon {
+        cursor: pointer;
+
+        > svg {
+            fill: #A4B8D1;
+        }
+    }
+
+    &-btn {
+        width: 309px;
+    }
+
+    &-dialin-container {
+        text-align: center;
+    }
+
+    &-delimiter {
+        background: #5f6266;
+        border: 0;
+        height: 1px;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+
+        &-container {
+            margin: 16px 0 24px 0;
+            position: relative;
+        }
+
+        &-txt-container {
+            position: absolute;
+            text-align: center;
+            top: -8px;
+            width: 100%;
+        }
+
+        &-txt {
+            background: #1C2025;
+            color: #5f6266;
+            font-size: 11px;
+            text-transform: uppercase;
+            padding: 0 8px;
+        }
+    }
+}
+
+.prejoin-dialog-callout {
+    padding: 16px;
+
+    &-header {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 24px;
+    }
+
+    &-picker {
+        margin: 8px 0 16px 0;
+    }
+}
+
+.prejoin-dialog-dialin {
+    text-align: center;
+
+    &-header {
+        align-items: center;
+        margin: 16px 0 32px 16px;
+        display: flex;
+    }
+
+    &-icon {
+        margin-right: 16px;
+    }
+
+    &-num {
+        background: #3e474f;
+        border-radius: 4px;
+        display: inline-block;
+        font-size: 15px;
+        line-height: 24px;
+        margin: 4px;
+        padding: 8px;
+
+        &-container {
+            min-height: 48px;
+            margin: 8px 0;
+        }
+    }
+
+    &-link {
+        color: #6FB1EA;
+        cursor: pointer;
+        display: inline-block;
+        font-size: 13px;
+        line-height: 20px;
+        margin-bottom: 24px;
+    }
+
+    &-spaced-label {
+        margin-bottom: 16px;
+        margin-top: 28px;
+    }
+
+    &-btns {
+        &> div {
+            margin-bottom: 16px;
+        }
+    }
+}
+
+.prejoin-dialog-calling {
+    padding: 16px;
+    text-align: center;
+
+    &-header {
+        text-align: right;
+    }
+
+    &-label {
+        font-size: 15px;
+        margin: 8px 0 16px 0;
+    }
+
+    &-number {
+        font-size: 19px;
+        line-height: 28px;
+        margin: 16px 0;
+    }
+}

css/_prejoin.scss

@@ -0,0 +1,353 @@
+.prejoin {
+    &-full-page {
+        background: #1C2025;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: $toolbarZ + 1;
+    }
+
+    &-input-area-container {
+        position: absolute;
+        bottom: 48px;
+        width: 100%;
+        z-index: 2;
+    }
+
+    &-input-area {
+        margin: 0 auto;
+        text-align: center;
+        width: 320px;
+    }
+
+    &-title {
+        color: #fff;
+        font-size: 24px;
+        line-height: 32px;
+        margin-bottom: 16px;
+    }
+
+    &-btn {
+        border-radius: 3px;
+        color: #fff;
+        cursor: pointer;
+        display: inline-block;
+        font-size: 15px;
+        line-height: 24px;
+        padding: 7px 16px;
+        position: relative;
+        text-align: center;
+        width: 286px;
+
+        &--primary {
+            background: #0376DA;
+            border: 1px solid #0376DA;
+        }
+
+        &--secondary {
+            background: #2A3A4B;
+            border: 1px solid #5E6D7A;
+        }
+
+        &--text {
+            width: auto;
+            font-size: 13px;
+            margin: 0;
+            padding: 0;
+        }
+
+        &--disabled {
+            background: #5E6D7A;
+            border: 1px solid #5E6D7A;
+            color: #AFB6BC;
+            cursor: initial;
+
+            .prejoin-btn-icon {
+                & > svg {
+                    fill: #AFB6BC;
+                }
+            }
+
+            .prejoin-btn-options {
+                border-left: 1px solid #AFB6BC;
+            }
+        }
+    }
+
+    &-btn-options {
+        align-items: center;
+        border-left: 1px solid #fff;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 40px;
+    }
+
+    &-text-btns {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    &-input-label {
+        color: #A4B8D1;
+        font-size: 13px;
+        line-height: 20px;
+        margin-top: 32px 0 8px 0;
+        text-align: center;
+        width: 100%;
+    }
+
+    &-checkbox {
+        border: 0;
+        height: 16px;
+        margin-right: 8px;
+        padding: 0;
+        width: 16px;
+    }
+
+    &-checkbox-container {
+        align-items: center;
+        color: #fff;
+        display: none;
+        font-size: 13px;
+        justify-content: center;
+        line-height: 20px;
+        margin-top: 16px;
+        width: 100%;
+    }
+}
+
+@mixin name-placeholder {
+    color: #fff;
+    font-weight: 300;
+    opacity: 0.6;
+}
+
+.prejoin-preview {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+
+    &--no-video {
+        background: radial-gradient(50% 50% at 50% 50%, #5B6F80 0%, #365067 100%), #FFFFFF;
+        text-align: center;
+    }
+
+    &-video {
+        height: 100%;
+        object-fit: cover;
+        position: absolute;
+        width: 100%;
+    }
+
+    &-name {
+        color: #fff;
+        font-size: 19px;
+        line-height: 28px;
+
+        &--editable {
+            background: none;
+            border: 0;
+            border-bottom: 1px solid #D1DBE8;
+            margin: 24px 0 16px 0;
+            outline: none;
+            text-align: center;
+            width: 100%;
+
+            &::-webkit-input-placeholder {
+                @include name-placeholder;
+            }
+            &::-moz-placeholder {
+                @include name-placeholder;
+            }
+            &:-ms-input-placeholder {
+                @include name-placeholder;
+            }
+        }
+
+        &--text {
+            margin: 16px 0;
+            outline: none;
+        }
+    }
+
+    &-avatar.avatar {
+        background: #A4B8D1;
+        margin: 200px auto 0 auto;
+    }
+
+    &-btn-container {
+        display: flex;
+        justify-content: center;
+        margin-top: 32px;
+        width: 100%;
+
+        &> div {
+            margin: 0 12px;
+        }
+
+        .settings-button-small-icon {
+            right: -8px;
+
+            &--hovered {
+                right: -10px;
+            }
+        }
+    }
+
+    &-overlay {
+        height: 100%;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+        background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
+    }
+
+    &-bottom-overlay {
+        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
+        bottom: 0;
+        height: 50%;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+    }
+
+    &-status {
+        align-items: center;
+        bottom: 0;
+        color: #fff;
+        display: flex;
+        font-size: 13px;
+        min-height: 24px;
+        justify-content: center;
+        position: absolute;
+        text-align: center;
+        width: 100%;
+        z-index: 1;
+
+        &--warning {
+            background: rgba(241, 173, 51, 0.5)
+        }
+        &--ok {
+            background: rgba(49, 183, 106, 0.5);
+        }
+    }
+
+    &-icon {
+        background-position: center;
+        background-repeat: no-repeat;
+        display: inline-block;
+        height: 16px;
+        margin-right: 8px;
+        width: 16px;
+    }
+
+    &-error-desc {
+        margin-right: 4px;
+    }
+
+    .settings-button-container {
+        width: 49px;
+        margin: 0 8px;
+    }
+
+    &-dropdown-btns {
+        width: 320px;
+        padding: 8px 0;
+    }
+
+    &-dropdown-btn {
+        align-items: center;
+        color: #1C2025;
+        cursor: pointer;
+        display: flex;
+        height: 40px;
+        font-size: 15px;
+        line-height: 24px;
+        padding: 0 16px;
+
+        &:hover {
+            background-color: #DAEBFA;
+        }
+    }
+
+    &-dropdown-icon {
+        display: inline-block;
+        margin-right: 16px;
+
+        & > svg {
+            fill:  #1C2025;
+        }
+    }
+
+    &-dropdown-container {
+        & > div > div:nth-child(2) > div > div {
+            background: #fff;
+            padding: 0;
+        }
+    }
+
+}
+
+.prejoin-copy {
+    &-meeting {
+        cursor: pointer;
+        color: #fff;
+        font-size: 15px;
+        font-weight: 300;
+        line-height: 24px;
+        position: relative;
+    }
+
+    &-url {
+        max-width: 278px;
+        padding: 8px 10px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &-badge {
+        border-radius: 4px;
+        height: 100%;
+        line-height: 38px;
+        position: absolute;
+        padding-left: 10px;
+        text-align: left;
+        top: 0;
+        width: 100%;
+
+        &--hover {
+            background: #1C2025;
+        }
+
+        &--done {
+            background: #31B76A;
+        }
+    }
+
+    &-icon {
+        position: absolute;
+        right: 8px;
+        top: 8px;
+
+       &--white {
+           &> svg > path {
+               fill: #fff
+           }
+       }
+
+       &--light {
+           &> svg > path {
+               fill: #D1DBE8;
+           }
+       }
+    }
+
+    &-textarea {
+        position: absolute;
+        left: -9999px;
+    }
+}

css/_promotional-footer.scss

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

css/_recording.scss

@@ -71,6 +71,11 @@
         display: flex;
         margin-top: 5px;
         text-align: right;
+        flex-direction: column;
+
+        .help-container {
+            display: flex;
+        }
     }
 
     .live-stream-cta {

css/_settings-button.scss

@@ -0,0 +1,80 @@
+.settings-button {
+    &-container {
+        position: relative;
+
+        .toolbox-icon {
+            align-items: center;
+            cursor: pointer;
+            display: flex;
+            background-color: #fff;
+            border-radius: 50%;
+            border: 1px solid #d1dbe8;
+            justify-content: center;
+            width: 38px;
+            height: 38px;
+
+            &:hover {
+                background-color: #daebfa;
+                border: 1px solid #daebfa;
+            }
+
+            &.toggled {
+                background: #2a3a4b;
+                border: 1px solid #5e6d7a;
+
+                svg {
+                    fill: #fff;
+                }
+
+                &:hover {
+                    background-color: #5e6d7a;
+                }
+            }
+
+            &.disabled, .disabled & {
+                cursor: initial;
+                color: #fff;
+                background-color: #a4b8d1;
+            }
+
+            svg {
+                fill: #5e6d7a;
+            }
+        }
+    }
+
+    &-small-icon {
+        background: #FFF;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        border-radius: 50%;
+        bottom: 0;
+        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
+        cursor: pointer;
+        height: 16px;
+        position: absolute;
+        text-align: center;
+        right: 4px;
+        width: 16px;
+
+        &> svg {
+            fill: #5e6d7a;
+            margin-top: 5px;
+        }
+
+        &--disabled {
+            background-color: #a4b8d1;
+            cursor: default;
+        }
+
+        &--hovered {
+            bottom: -1px;
+            height: 20px;
+            right: 2px;
+            width: 20px;
+
+            &> svg {
+                margin-top: 6px;
+            }
+        }
+    }
+}

css/_subject.scss

@@ -9,7 +9,7 @@
     text-align: center;
     font-size: 17px;
     color: #fff;
-    z-index: $toolbarBackgroundZ;
+    z-index: $zindex10;
     overflow: hidden;
     text-overflow: ellipsis;
     box-sizing: border-box;
@@ -19,4 +19,14 @@
     &.visible {
         top: 0px;
     }
+
+    &-text {
+        vertical-align: middle;
+    }
+
+    &-conference-timer {
+        display: block;
+        font-size: 15px;
+        opacity: 0.6;
+    }
 }

css/_toolbars.scss

@@ -270,89 +270,6 @@
     }
 }
 
-.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: $AOTToolbarButtonHoverColor;
-    }
-
-    i.toggled {
-        background: $AOTToolbarButtonToggleColor;
-    }
-
-    i.toggled:hover:not(.disabled) {
-        background-color: $AOTToolbarButtonHoverColor;
-    }
-
-    .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;
-    }
-
-    .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-toolbox {
-    i {
-        font-size: 1.9em;
-        height: 37px;
-        line-height: 37px;
-        width: 37px;
-    }
-
-    .toolbox-button:first-child i {
-        border-top-left-radius: 3px;
-        border-top-right-radius: 3px;
-    }
-
-    .toolbox-button:last-child i {
-        border-bottom-left-radius: 3px;
-        border-bottom-right-radius: 3px;
-    }
-}
-
 /**
  * START of fade in animation for main toolbar
  */

css/_utils.scss

@@ -31,13 +31,6 @@
     display: inline-block !important;
 }
 
-/**
-* Shows as a list item
-**/
-.show-list-item {
-    display: list-item !important;
-}
-
 /**
  * Shows a flex element.
  */

css/_variables.scss

@@ -28,11 +28,15 @@ $defaultColor: #F1F1F1;
 $defaultSideBarFontColor: #44A5FF;
 $defaultSemiDarkColor: #ACACAC;
 $defaultDarkColor: #2b3d5c;
+$defaultWarningColor: rgb(215, 121, 118);
+$presence-available: rgb(110, 176, 5);
+$presence-away: rgb(250, 201, 20);
+$presence-busy: rgb(233, 0, 27);
+$presence-idle: rgb(172, 172, 172);
 
 /**
  * Toolbar
  */
-$defaultToolbarSize: 50px;
 $newToolbarBackgroundColor: rgba(22, 38, 55, 0.8);
 $newToolbarButtonHoverColor: rgba(255, 255, 255, 0.15);
 $newToolbarButtonToggleColor: rgba(255, 255, 255, 0.2);
@@ -85,10 +89,12 @@ $modalTextColor: #333;
 /**
  * Chat
  */
+$chatActionsSeparatorColor: rgb(173, 105, 112);
 $chatHeaderBackgroundColor: rgba(42, 58, 75, 0.9);
 $chatInputSeparatorColor: #A4B8D1;
-$chatLocalMessageBackgroundColor: rgba(26, 108, 180, 1);
-$chatRemoteMessageBackgroundColor:  rgba(240, 243, 247, 0.15);
+$chatLocalMessageBackgroundColor: rgb(4, 98, 178);
+$chatPrivateMessageBackgroundColor: rgb(153, 69, 77);
+$chatRemoteMessageBackgroundColor:  rgb(86, 101, 114);
 $sidebarWidth: 375px;
 
  /**
@@ -99,6 +105,7 @@ $defaultWatermarkLink: '../images/watermark.png';
 $popoverMenuPadding: 13px;
 $happySoftwareBackground: transparent;
 $desktopAppDragBarHeight: 25px;
+$scrollHeight: 7px;
 
 /**
  * Z-indexes. TODO: Replace this by a function.
@@ -163,11 +170,104 @@ $watermarkHeight: 74px;
  */
 $welcomePageDescriptionColor: #fff;
 $welcomePageFontFamily: inherit;
-$welcomePageHeaderBackground: linear-gradient(-90deg, #1251AE 0%, #0074FF 50%, #1251AE 100%);
+$welcomePageBackground: linear-gradient(-90deg, #1251AE 0%, #0074FF 50%, #1251AE 100%);
 $welcomePageTitleColor: #fff;
 
+$welcomePageHeaderBackground: none;
+$welcomePageHeaderBackgroundSmall: none;
+$welcomePageHeaderBackgroundPosition: none;
+$welcomePageHeaderBackgroundRepeat: none;
+$welcomePageHeaderBackgroundSize: none;
+$welcomePageHeaderPaddingBottom: 0px;
+
+$welcomePageHeaderTextMarginTop: 35px;
+$welcomePageHeaderTextMarginBottom: 35px;
+
+$welcomePageHeaderTextTitleMarginBottom: 16px;
+$welcomePageHeaderTextTitleFontSize: 2.5rem;
+$welcomePageHeaderTextTitleFontWeight: 500;
+$welcomePageHeaderTextTitleLineHeight: 1.18;
+$welcomePageHeaderTextTitleOpacity: 1;
+
+$welcomePageHeaderTextDescriptionDisplay: inherit;
+$welcomePageHeaderTextDescriptionFontSize: 1rem;
+$welcomePageHeaderTextDescriptionFontWeight: 400;
+$welcomePageHeaderTextDescriptionLineHeight: 24px;
+$welcomePageHeaderTextDescriptionMarginBottom: 20px;
+$welcomePageHeaderTextDescriptionAlignSelf: inherit;
+
+$welcomePageEnterRoomWidth: 680px;
+$welcomePageEnterRoomPadding: 25px 30px;
+$welcomePageEnterRoomBorderRadius: 0px;
+
+$welcomePageEnterRoomInputContainerPadding: 0 8px 5px 0px;
+$welcomePageEnterRoomInputContainerBorderWidth: 0px 0px 2px 0px;
+$welcomePageEnterRoomInputContainerBorderStyle: solid;
+$welcomePageEnterRoomInputContainerBorderImage: linear-gradient(to right, #dee1e6, #fff) 1;
+
+$welcomePageEnterRoomTitleDisplay: inherit;
+
+$welcomePageTabContainerDisplay: flex;
+$welcomePageTabContentDisplay: inherit;
+$welcomePageTabButtonsDisplay: flex;
+$welcomePageTabDisplay: block;
+
+$welcomePageButtonWidth: 51px;
+$welcomePageButtonMinWidth: inherit;
+$welcomePageButtonFontSize: 14px;
+$welcomePageButtonHeight: 35px;
+$welcomePageButtonFontWeight: inherit;
+$welcomePageButtonBorderRadius: 4px;
+$welcomePageButtonLineHeight: 35px;
+
 /**
  * Deep-linking page variables.
  */
 $deepLinkingMobileLogoHeight: 40px;
+
 $deepLinkingMobileHeaderBackground: #f1f2f5;
+
+$deepLinkingMobileLinkColor: inherit;
+$deepLinkingMobileTextFontSize: inherit;
+$deepLinkingMobileTextLineHeight: inherit;
+
+$deepLinkingDialInConferenceIdMargin: 10px 0 10px 0;
+$deepLinkingDialInConferenceIdPadding: inherit;
+$deepLinkingDialInConferenceIdBackgroundColor: inherit;
+$deepLinkingDialInConferenceIdBorderRadius: inherit;
+
+$deepLinkingDialInConferenceNameFontSize: inherit;
+$deepLinkingDialInConferenceNameLineHeight: inherit;
+$deepLinkingDialInConferenceNameMarginBottom: none;
+$deepLinkingDialInConferenceNameFontWeight: inherit;
+
+$deepLinkingDialInConferenceDescriptionFontSize: 0.8em;
+$deepLinkingDialInConferenceDescriptionLineHeight: inherit;
+$deepLinkingDialInConferenceDescriptionMarginBottom: none;
+
+$deepLinkingDialInConferencePinFontSize: inherit;
+$deepLinkingDialInConferencePinLineHeight: inherit;
+
+$depLinkingMobileHrefLineHeight: 2.2857142857142856em;
+$deepLinkingMobileHrefFontWeight: bolder;
+$deepLinkingMobileHrefFontSize: inherit;
+
+$deepLinkingMobileButtonHeight: 2.2857142857142856em;
+$deepLinkingMobileButtonLineHeight: 2.2857142857142856em;
+$deepLinkingMobileButtonMargin: 18px auto 10px;
+$deepLinkingMobileButtonWidth: auto;
+$deepLinkingMobileButtonFontWeight: bold;
+$deepLinkingMobileButtonFontSize: inherit;
+
+$primaryDeepLinkingMobileButtonBorderRadius: inherit;
+
+/**
+* Chrome extension banner variables.
+*/
+$chromeExtensionBannerDontShowAgainDisplay: flex;
+$chromeExtensionBannerHeight: 128px;
+$chromeExtensionBannerTop: 80px;
+$chromeExtensionBannerRight: 16px;
+$chromeExtensionBannerTopInMeeting: 10px;
+$chromeExtensionBannerRightInMeeeting: 10px;
+

css/_video-preview.css

@@ -0,0 +1,70 @@
+.video-preview {
+    background: none;
+    max-height: 290px;
+
+    &-container {
+        overflow: auto;
+        padding: 16px;
+    }
+
+    &-entry {
+        cursor: pointer;
+        height: 135px;
+        margin-bottom: 16px;
+        position: relative;
+        width: 240px;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        &--selected {
+            border: 3px solid #31B76A;
+            cursor: default;
+            height: 129px;
+            width: 234px;
+        }
+    }
+
+    &-video {
+        height: 100%;
+        object-fit: cover;
+        width: 100%;
+    }
+
+    &-overlay {
+        background: rgba(42, 58, 75, 0.6);
+        height: 100%;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+    }
+
+    &-error {
+        align-items: center;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        position: absolute;
+        width: 100%;
+    }
+
+    &-label {
+        color: #fff;
+        font-size: 13px;
+        line-height: 20px;
+        overflow: hidden;
+        padding: 8px;
+        position: absolute;
+        text-align: center;
+        text-overflow: ellipsis;
+        width: 220px;
+        z-index: 2;
+    }
+
+    // Override @atlaskit/InlineDialog container which is made with styled components
+    & > div > div:nth-child(2) > div > div {
+        outline: none;
+        padding: 0;
+    }
+}

css/_videolayout_default.scss

@@ -173,18 +173,14 @@
     &__hoverOverlay {
         background: rgba(0,0,0,.6);
         border-radius: $borderRadius;
-        position: relative;
+        position: absolute;
+        top: 0px;
+        left: 0px;
         width: 100%;
         height: 100%;
         visibility: hidden;
         z-index: $zindex2;
     }
-
-    &.audio-only {
-        .videoThumbnailProblemFilter {
-            filter: none;
-        }
-    }
 }
 
 #localVideoWrapper {
@@ -489,6 +485,8 @@
     height: 300px;
     margin: auto;
     position: relative;
+    top: 50%;
+    transform: translateY(-50%);
 }
 
 #mixedstream {
@@ -524,13 +522,16 @@
     display: flex;
     justify-content: center;
     height: 50%;
-    overflow: hidden;
     width: auto;
+    overflow: hidden;
 
     .userAvatar {
         height: 100%;
         object-fit: cover;
         width: 100%;
+        top: 0px;
+        left: 0px;
+        position: absolute;
     }
 }
 
@@ -553,6 +554,9 @@
 }
 
 .sharedVideoAvatar {
+    position: absolute;
+    left: 0px;
+    top: 0px;
     height: 100%;
     width: 100%;
     object-fit: cover;
@@ -563,21 +567,6 @@
     filter: grayscale(.5) opacity(0.8);
 }
 
-.remoteVideoProblemFilter {
-    -webkit-filter: grayscale(100%);
-    filter: grayscale(100%);
-}
-
-.videoProblemFilter {
-    -webkit-filter: blur(10px) grayscale(.5) opacity(0.8);
-    filter: blur(10px) grayscale(.5) opacity(0.8);
-}
-
-.videoThumbnailProblemFilter {
-    -webkit-filter: grayscale(100%);
-    filter: grayscale(100%);
-}
-
 #remotePresenceMessage,
 #remoteConnectionMessage {
     position: absolute;
@@ -608,24 +597,6 @@
     display: none;
 }
 
-#localConnectionMessage {
-    display: none;
-    position: absolute;
-    left: 0;
-    width: 100%;
-    top:50%;
-    z-index: $zindex2;
-    font-weight: 600;
-    font-size: 14px;
-    text-align: center;
-    color: #FFF;
-    opacity: .80;
-    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);
-}
-
 .display-avatar-with-name {
     .avatar-container {
         visibility: visible;

css/_welcome_page.scss

@@ -4,7 +4,7 @@ body.welcome-page {
 }
 
 .welcome {
-    background-image: $welcomePageHeaderBackground;
+    background-image: $welcomePageBackground;
     display: flex;
     flex-direction: column;
     font-family: $welcomePageFontFamily;
@@ -13,6 +13,11 @@ body.welcome-page {
     position: relative;
 
     .header {
+        background-image: $welcomePageHeaderBackground;
+        background-position: $welcomePageHeaderBackgroundPosition;
+        background-repeat: $welcomePageHeaderBackgroundRepeat;
+        background-size: $welcomePageHeaderBackgroundSize;
+        padding-bottom: $welcomePageHeaderPaddingBottom;
         align-items: center;
         display: flex;
         flex-direction: column;
@@ -24,8 +29,8 @@ body.welcome-page {
         .header-text {
             display: flex;
             flex-direction: column;
-            margin-top: $watermarkHeight + 35;
-            margin-bottom: 35px;
+            margin-top: $watermarkHeight + $welcomePageHeaderTextMarginTop;
+            margin-bottom: $welcomePageHeaderTextMarginBottom;
             max-width: calc(100% - 40px);
             width: 650px;
             z-index: $zindex2;
@@ -33,53 +38,68 @@ body.welcome-page {
 
         .header-text-title {
             color: $welcomePageTitleColor;
-            font-size: 2.5rem;
-            font-weight: 500;
-            line-height: 1.18;
-            margin-bottom: 16px;
+            font-size: $welcomePageHeaderTextTitleFontSize;
+            font-weight: $welcomePageHeaderTextTitleFontWeight;
+            line-height: $welcomePageHeaderTextTitleLineHeight;
+            margin-bottom: $welcomePageHeaderTextTitleMarginBottom;
+            opacity: $welcomePageHeaderTextTitleOpacity;
         }
 
         .header-text-description {
+            display: $welcomePageHeaderTextDescriptionDisplay;
             color: $welcomePageDescriptionColor;
-            font-size: 1rem;
-            font-weight: 400;
-            line-height: 24px;
-            margin-bottom: 20px;
+            font-size: $welcomePageHeaderTextDescriptionFontSize;
+            font-weight: $welcomePageHeaderTextDescriptionFontWeight;
+            line-height: $welcomePageHeaderTextDescriptionLineHeight;
+            margin-bottom: $welcomePageHeaderTextDescriptionMarginBottom;
+            align-self: $welcomePageHeaderTextDescriptionAlignSelf;
         }
 
         #enter_room {
             display: flex;
             align-items: center;
             max-width: calc(100% - 40px);
-            width: 680px;
+            width: $welcomePageEnterRoomWidth;
             z-index: $zindex2;
             background-color: #fff;
-            padding: 25px 30px;
+            padding: $welcomePageEnterRoomPadding;
+            border-radius: $welcomePageEnterRoomBorderRadius;
 
             .enter-room-input-container {
                 width: 100%;
-                padding-right: 8px;
-                padding-bottom: 5px;
+                padding: $welcomePageEnterRoomInputContainerPadding;
                 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 {
+                    display: $welcomePageEnterRoomTitleDisplay;
                     font-size: 18px;
                     font-weight: bold;
                     padding-bottom: 5px;
                 }
 
                 .enter-room-input {
-                    border: none;
+                    border-width: $welcomePageEnterRoomInputContainerBorderWidth;
+                    border-style: $welcomePageEnterRoomInputContainerBorderStyle;
+                    border-image: $welcomePageEnterRoomInputContainerBorderImage;
                     display: inline-block;
                     width: 100%;
                     font-size: 14px;
                 }
 
+                .insecure-room-name-warning {
+                    align-items: center;
+                    color: $defaultWarningColor;
+                    display: flex;
+                    flex-direction: row;
+                    margin-top: 5px;
+
+                    svg {
+                        fill: $defaultWarningColor
+                    }
+                }
+
                 ::placeholder {
                     color: #253858;
                 }
@@ -94,10 +114,11 @@ body.welcome-page {
             min-height: 354px;
             width: 710px;
             background: #75A7E7;
-            display: flex;
+            display: $welcomePageTabContainerDisplay;
             flex-direction: column;
 
             .tab-content{
+                display: $welcomePageTabContentDisplay;
                 margin: 5px 0px;
                 overflow: hidden;
                 flex-grow: 1;
@@ -111,13 +132,14 @@ body.welcome-page {
             .tab-buttons {
                 font-size: 18px;
                 color: #FFFFFF;
-                display: flex;
+                display: $welcomePageTabButtonsDisplay;
                 flex-grow: 0;
                 flex-direction: row;
                 min-height: 54px;
                 width: 100%;
 
                 .tab {
+                    display: $welcomePageTabDisplay;
                     text-align: center;
                     background: rgba(9,30,66,0.37);
                     height: 55px;
@@ -138,15 +160,17 @@ body.welcome-page {
     }
 
     .welcome-page-button {
-        width: 51px;
-        height: 35px;
-        font-size: 14px;
+        width: $welcomePageButtonWidth;
+        min-width: $welcomePageButtonMinWidth;
+        height: $welcomePageButtonHeight;
+        font-size: $welcomePageButtonFontSize;
+        font-weight: $welcomePageButtonFontWeight;
         background: #0074E0;
-        border-radius: 4px;
+        border-radius: $welcomePageButtonBorderRadius;
         color: #FFFFFF;
         text-align: center;
         vertical-align: middle;
-        line-height: 35px;
+        line-height: $welcomePageButtonLineHeight;
         cursor: pointer;
     }
 

css/_welcome_page_settings_toolbar.scss

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

css/deep-linking/_mobile.scss

@@ -19,7 +19,8 @@
     }
 
     a {
-        text-decoration: none
+        text-decoration: none;
+        color: $deepLinkingMobileLinkColor;
     }
 
     &__body {
@@ -41,6 +42,8 @@
 
     &__text {
         font-weight: bolder;
+        font-size: $deepLinkingMobileTextFontSize;
+        line-height: $deepLinkingMobileTextLineHeight;
         padding: 10px 10px 0px 10px;
     }
 
@@ -65,11 +68,28 @@
         }
 
         .dial-in-conference-id {
-            margin: 10px 0 10px 0;
+            margin: $deepLinkingDialInConferenceIdMargin;
+            padding: $deepLinkingDialInConferenceIdPadding;
+            background-color: $deepLinkingDialInConferenceIdBackgroundColor;
+            border-radius: $deepLinkingDialInConferenceIdBorderRadius;
+        }
+
+        .dial-in-conference-name {
+            font-size: $deepLinkingDialInConferenceNameFontSize;
+            line-height: $deepLinkingDialInConferenceNameLineHeight;
+            margin-bottom: $deepLinkingDialInConferenceNameMarginBottom;
+            font-weight: $deepLinkingDialInConferenceNameFontWeight;
         }
 
         .dial-in-conference-description {
-            font-size: 0.8em;
+            font-size: $deepLinkingDialInConferenceDescriptionFontSize;
+            line-height: $deepLinkingDialInConferenceDescriptionLineHeight;
+            margin-bottom: $deepLinkingDialInConferenceDescriptionMarginBottom;
+        }
+
+        .dial-in-conference-pin {
+            font-size: $deepLinkingDialInConferencePinFontSize;
+            line-height: $deepLinkingDialInConferencePinLineHeight;
         }
 
         .toll-free-list {
@@ -88,25 +108,27 @@
 
     &__href {
         height: 2.2857142857142856em;
-        line-height: 2.2857142857142856em;
+        line-height: $depLinkingMobileHrefLineHeight;
         margin: 18px auto 20px;
         max-width: 300px;
         width: auto;
-        font-weight: bolder;
+        font-weight: $deepLinkingMobileHrefFontWeight;
+        font-size: $deepLinkingMobileHrefFontSize;
     }
 
     &__button {
         border: 0;
-        height: 2.2857142857142856em;
-        line-height: 2.2857142857142856em;
-        margin: 18px auto 10px;
+        height: $deepLinkingMobileButtonHeight;
+        line-height: $deepLinkingMobileButtonLineHeight;
+        margin: $deepLinkingMobileButtonMargin;
         padding: 0px 10px 0px 10px;
         max-width: 300px;
-        width: auto;
+        width: $deepLinkingMobileButtonWidth;
         @include border-radius(3px);
         background-color: $unsupportedBrowserButtonBgColor;
         color: #505F79;
-        font-weight: bold;
+        font-weight: $deepLinkingMobileButtonFontWeight;
+        font-size: $deepLinkingMobileButtonFontSize;
 
         &:active {
             background-color: $unsupportedBrowserButtonBgColor;
@@ -115,7 +137,7 @@
         &_primary {
             background-color: $primaryUnsupportedBrowserButtonBgColor;
             color: #FFFFFF;
-
+            border-radius: $primaryDeepLinkingMobileButtonBorderRadius;
             &:active {
                 background-color: $primaryUnsupportedBrowserButtonBgColor;
             }

css/filmstrip/_horizontal_filmstrip.scss

@@ -13,9 +13,24 @@
     @extend %align-right;
     transition: bottom .3s;
     z-index: $filmstripVideosZ;
+    box-sizing: border-box;
+    width: 100%;
+    position: fixed;
+
+    /*
+     * 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;
+    }
 
     &.reduce-height {
-        bottom: $newToolbarSizeWithPadding;
+        bottom: calc(#{$newToolbarSizeWithPadding} + #{$scrollHeight});
     }
 
     &__videos {
@@ -29,8 +44,9 @@
 
         &#remoteVideos {
             border: $thumbnailsBorder solid transparent;
-            padding-left: $defaultToolbarSize + 5;
             transition: bottom 2s;
+            flex-grow: 1;
+            @include minHWAutoFix()
         }
 
         /**
@@ -39,6 +55,7 @@
         &#filmstripLocalVideo {
             align-self: flex-end;
             display: block;
+            margin-bottom: 8px;
         }
 
         &.hidden {
@@ -74,4 +91,52 @@
             pointer-events: none;
         }
     }
+
+    #filmstripRemoteVideos {
+        @include minHWAutoFix();
+
+        display: flex;
+        flex: 1;
+        width: auto;
+        justify-content: flex-end;
+        flex-direction: row;
+
+        #filmstripRemoteVideosContainer {
+            flex-direction: row-reverse;
+            /**
+             * Add padding as a hack for Firefox not to show scrollbars when
+             * unnecessary.
+             */
+            padding: 1px 0;
+            overflow-y: hidden;
+            overflow-x: scroll;
+        }
+    }
+
+    .videocontainer {
+        margin-bottom: 10px;
+    }
+}
+
+
+/**
+ * Workarounds for Edge and Firefox not handling scrolling properly with
+ * flex-direction: row-reverse.
+ */
+ @mixin undoRowReverseVideos() {
+    .horizontal-filmstrip {
+        #remoteVideos #filmstripRemoteVideos #filmstripRemoteVideosContainer {
+            flex-direction: row;
+        }
+    }
+}
+
+/** Firefox detection hack **/
+@-moz-document url-prefix() {
+    @include undoRowReverseVideos();
+}
+
+/** Edge detection hack **/
+@supports (-ms-ime-align:auto) {
+    @include undoRowReverseVideos();
 }