feat(rn,filmstrip) add 1on1 mode

When there are only 2 participants in a call, don't show the remote thumbnail,
unless the `disable1On1Mode` config option is set or the local participant pin
themselves.

.eslintignore

@@ -5,6 +5,9 @@ build/*
 # modify as little as possible.
 flow-typed/*
 libs/*
+resources/*
+react/features/stream-effects/virtual-background/vendor/*
+load-test/*
 
 # ESLint will by default ignore its own configuration file. However, there does
 # not seem to be a reason why we will want to risk being inconsistent with our

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

@@ -1,7 +1,9 @@
 ---
 name: "Feature request"
 about: Suggest an idea for this project
-
+title: ''
+labels: 'feature-request'
+assignees: ''
 ---
 
 <!--

.github/workflows/ci.yml

@@ -12,5 +12,7 @@ jobs:
       with:
         node-version: '12.x'
     - run: npm install
+    - name: Check if the git repository is clean
+      run: exit $( git status --porcelain --untracked-files=no | head -255 | wc -l )
     - run: npm run lint
     - run: make

.gitignore

@@ -69,6 +69,7 @@ buck-out/
 *.framework
 android/app/debug
 android/app/release
+ios/sdk/out
 
 # precommit-hook
 .jshintignore
@@ -84,3 +85,10 @@ android/app/google-services.json
 ios/app/dropbox.key
 ios/app/GoogleService-Info.plist
 
+.vscode
+
+# TWA
+twa/*.apk
+twa/*.aab
+twa/assetlinks.json
+

CONTRIBUTING.md

@@ -152,3 +152,20 @@ this model but new features should follow this new layout.
 
 When working on an old feature, adding the necessary changes to migrate to the new
 model is encouraged.
+
+
+### Avoiding bundle bloat
+
+When adding a new feature it's possible that it triggers a build failure due to the increased bundle size. We have safeguards inplace to avoid bundles growing disproportionatelly. While there are legit reasons for increasing the limits, please analyze the bundle first to make sure no unintended dependencies have been included, causing the increase in size.
+
+First, make a production build with bundle-analysis enabled:
+
+```
+npx webpack -p --analyze-bundle
+```
+
+Then open the interactive bundle analyzer tool:
+
+```
+npx webpack-bundle-analyzer build/app-stats.json
+```

ConferenceEvents.js

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

Makefile

@@ -3,8 +3,11 @@ CLEANCSS = ./node_modules/.bin/cleancss
 DEPLOY_DIR = libs
 LIBJITSIMEET_DIR = node_modules/lib-jitsi-meet/
 LIBFLAC_DIR = node_modules/libflacjs/dist/min/
+OLM_DIR = node_modules/olm
 RNNOISE_WASM_DIR = node_modules/rnnoise-wasm/dist/
-NODE_SASS = ./node_modules/.bin/node-sass
+TFLITE_WASM = react/features/stream-effects/virtual-background/vendor/tflite
+MEET_MODELS_DIR  = react/features/stream-effects/virtual-background/vendor/models/
+NODE_SASS = ./node_modules/.bin/sass
 NPM = npm
 OUTPUT_DIR = .
 STYLES_BUNDLE = css/all.bundle.css
@@ -15,14 +18,17 @@ WEBPACK_DEV_SERVER = ./node_modules/.bin/webpack-dev-server
 
 all: compile deploy clean
 
-compile:
+compile: compile-load-test
 	$(WEBPACK) -p
 
+compile-load-test:
+	${NPM} install --prefix resources/load-test && ${NPM} run build --prefix resources/load-test
+
 clean:
 	rm -fr $(BUILD_DIR)
 
 .NOTPARALLEL:
-deploy: deploy-init deploy-appbundle deploy-rnnoise-binary deploy-lib-jitsi-meet deploy-libflac deploy-css deploy-local
+deploy: deploy-init deploy-appbundle deploy-rnnoise-binary deploy-tflite deploy-meet-models deploy-lib-jitsi-meet deploy-libflac deploy-olm deploy-css deploy-local
 
 deploy-init:
 	rm -fr $(DEPLOY_DIR)
@@ -38,8 +44,6 @@ deploy-appbundle:
 		$(BUILD_DIR)/external_api.min.map \
 		$(BUILD_DIR)/flacEncodeWorker.min.js \
 		$(BUILD_DIR)/flacEncodeWorker.min.map \
-		$(BUILD_DIR)/device_selection_popup_bundle.min.js \
-		$(BUILD_DIR)/device_selection_popup_bundle.min.map \
 		$(BUILD_DIR)/dial_in_info_bundle.min.js \
 		$(BUILD_DIR)/dial_in_info_bundle.min.map \
 		$(BUILD_DIR)/alwaysontop.min.js \
@@ -47,16 +51,15 @@ deploy-appbundle:
 		$(OUTPUT_DIR)/analytics-ga.js \
 		$(BUILD_DIR)/analytics-ga.min.js \
 		$(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 \
+		$(BUILD_DIR)/close3.min.js \
+		$(BUILD_DIR)/close3.min.map \
 		$(DEPLOY_DIR)
 
 deploy-lib-jitsi-meet:
 	cp \
 		$(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.js \
 		$(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.map \
+		$(LIBJITSIMEET_DIR)/lib-jitsi-meet.e2ee-worker.js \
 		$(LIBJITSIMEET_DIR)/connection_optimization/external_connect.js \
 		$(LIBJITSIMEET_DIR)/modules/browser/capabilities.json \
 		$(DEPLOY_DIR)
@@ -67,21 +70,36 @@ deploy-libflac:
 		$(LIBFLAC_DIR)/libflac4-1.3.2.min.js.mem \
 		$(DEPLOY_DIR)
 
+deploy-olm:
+	cp \
+		$(OLM_DIR)/olm.wasm \
+		$(DEPLOY_DIR)
+
 deploy-rnnoise-binary:
 	cp \
 		$(RNNOISE_WASM_DIR)/rnnoise.wasm \
 		$(DEPLOY_DIR)
 
+deploy-tflite:
+	cp \
+		$(TFLITE_WASM)/*.wasm \
+		$(DEPLOY_DIR)		
+
+deploy-meet-models:
+	cp \
+		$(MEET_MODELS_DIR)/*.tflite \
+		$(DEPLOY_DIR)	
+
 deploy-css:
 	$(NODE_SASS) $(STYLES_MAIN) $(STYLES_BUNDLE) && \
-	$(CLEANCSS) $(STYLES_BUNDLE) > $(STYLES_DESTINATION) ; \
+	$(CLEANCSS) --skip-rebase $(STYLES_BUNDLE) > $(STYLES_DESTINATION) ; \
 	rm $(STYLES_BUNDLE)
 
 deploy-local:
 	([ ! -x deploy-local.sh ] || ./deploy-local.sh)
 
 .NOTPARALLEL:
-dev: deploy-init deploy-css deploy-rnnoise-binary deploy-lib-jitsi-meet deploy-libflac
+dev: deploy-init deploy-css deploy-rnnoise-binary deploy-tflite deploy-meet-models deploy-lib-jitsi-meet deploy-libflac deploy-olm
 	$(WEBPACK_DEV_SERVER) --detect-circular-deps
 
 source-package:

README.md

@@ -2,9 +2,11 @@
 
 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 else on your computer. You can try it out at https://meet.jit.si.
+The Jitsi Meet client runs in your browser, without installing anything 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.
+Jitsi Meet allows for very efficient collaboration. Users can stream their desktop or only some windows. It also supports shared document editing with Etherpad.
+
+**NOTE:** If you are looking for Jitsi as a Service (JaaS) please start [here](https://jaas.8x8.vc).
 
 ## Installation
 

SECURITY.md

@@ -1,9 +1,9 @@
 # Security
 
-## Reporting security issuess
+## Reporting security issues
 
 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.
+If you find (or simply suspect) a security issue in any of the Jitsi projects, please report it to us via [HackerOne](https://hackerone.com/8x8) or 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/app/build.gradle

@@ -3,7 +3,7 @@ apply plugin: 'com.android.application'
 // Crashlytics integration is done as part of Firebase now, so it gets
 // automagically activated with google-services.json
 if (googleServicesEnabled) {
-    apply plugin: 'io.fabric'
+    apply plugin: 'com.google.firebase.crashlytics'
 }
 
 // Use the number of seconds/10 since Jan 1 2019 as the versionCode.
@@ -16,6 +16,10 @@ android {
     compileSdkVersion rootProject.ext.compileSdkVersion
     buildToolsVersion rootProject.ext.buildToolsVersion
 
+    packagingOptions {
+        exclude 'lib/*/libhermes*.so'
+    }
+
     defaultConfig {
         applicationId 'org.jitsi.meet'
         versionCode vcode
@@ -70,16 +74,11 @@ android {
     }
 }
 
-repositories {
-    maven { url 'https://maven.fabric.io/public' }
-}
-
 dependencies {
     implementation fileTree(dir: 'libs', include: ['*.jar'])
-    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
-    implementation 'androidx.appcompat:appcompat:1.1.0'
+    implementation 'androidx.appcompat:appcompat:1.2.0'
 
-    debugImplementation 'com.squareup.leakcanary:leakcanary-android:2.0-beta-5'
+    debugImplementation 'com.squareup.leakcanary:leakcanary-android:2.2'
 
     if (!rootProject.ext.libreBuild) {
         implementation 'com.google.android.gms:play-services-auth:16.0.1'
@@ -87,9 +86,9 @@ dependencies {
         // Firebase
         //  - Crashlytics
         //  - Dynamic Links
-        implementation 'com.google.firebase:firebase-core:16.0.6'
-        implementation 'com.crashlytics.sdk.android:crashlytics:2.9.8'
-        implementation 'com.google.firebase:firebase-dynamic-links:16.1.5'
+        implementation 'com.google.firebase:firebase-analytics:17.5.0'
+        implementation 'com.google.firebase:firebase-crashlytics:17.2.1'
+        implementation 'com.google.firebase:firebase-dynamic-links:19.1.0'
     }
 
     implementation project(':sdk')
@@ -123,7 +122,7 @@ gradle.projectsEvaluated {
         android.applicationVariants.all { variant ->
             variant.outputs.each { output ->
                 output.getProcessManifestProvider().get().doLast {
-                    def outputDir = manifestOutputDirectory.get().asFile
+                    def outputDir = multiApkManifestOutputDirectory.get().asFile
                     def manifestPath = new File(outputDir, 'AndroidManifest.xml')
                     def charset = 'UTF-8'
                     def text

android/app/proguard-rules.pro

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

android/app/src/main/AndroidManifest.xml

@@ -1,6 +1,7 @@
 <manifest
     xmlns:android="http://schemas.android.com/apk/res/android"
-    package="org.jitsi.meet">
+    package="org.jitsi.meet"
+    android:installLocation="auto">
   <application
       android:allowBackup="true"
       android:icon="@mipmap/ic_launcher"

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

@@ -3,9 +3,8 @@ package org.jitsi.meet;
 import android.net.Uri;
 import android.util.Log;
 
-import com.crashlytics.android.Crashlytics;
+import com.google.firebase.crashlytics.FirebaseCrashlytics;
 import com.google.firebase.dynamiclinks.FirebaseDynamicLinks;
-import io.fabric.sdk.android.Fabric;
 
 import org.jitsi.meet.sdk.JitsiMeet;
 import org.jitsi.meet.sdk.JitsiMeetActivity;
@@ -22,10 +21,7 @@ final class GoogleServicesHelper {
         if (BuildConfig.GOOGLE_SERVICES_ENABLED) {
             Log.d(activity.getClass().getSimpleName(), "Initializing Google Services");
 
-            if (!JitsiMeet.isCrashReportingDisabled(activity)) {
-                Fabric.with(activity, new Crashlytics());
-            }
-
+            FirebaseCrashlytics.getInstance().setCrashlyticsCollectionEnabled(!JitsiMeet.isCrashReportingDisabled(activity));
             FirebaseDynamicLinks.getInstance().getDynamicLink(activity.getIntent())
                 .addOnSuccessListener(activity, pendingDynamicLinkData -> {
                     Uri dynamicLink = null;

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

@@ -23,11 +23,11 @@ import android.content.IntentFilter;
 import android.content.RestrictionEntry;
 import android.content.RestrictionsManager;
 import android.net.Uri;
-import android.os.Build;
 import android.os.Bundle;
 import android.provider.Settings;
 import android.util.Log;
 import android.view.KeyEvent;
+
 import androidx.annotation.Nullable;
 
 import org.jitsi.meet.sdk.JitsiMeet;
@@ -38,7 +38,7 @@ import java.lang.reflect.Method;
 import java.net.MalformedURLException;
 import java.net.URL;
 import java.util.Collection;
-import java.util.Map;
+import java.util.HashMap;
 
 /**
  * The one and only Activity that the Jitsi Meet app needs. The
@@ -79,6 +79,12 @@ public class MainActivity extends JitsiMeetActivity {
     // JitsiMeetActivity overrides
     //
 
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        JitsiMeet.showSplashScreen(this);
+        super.onCreate(savedInstanceState);
+    }
+
     @Override
     protected boolean extraInitialize() {
         Log.d(this.getClass().getSimpleName(), "LIBRE_BUILD="+BuildConfig.LIBRE_BUILD);
@@ -96,7 +102,7 @@ public class MainActivity extends JitsiMeetActivity {
         // In Debug builds React needs permission to write over other apps in
         // order to display the warning and error overlays.
         if (BuildConfig.DEBUG) {
-            if (canRequestOverlayPermission() && !Settings.canDrawOverlays(this)) {
+            if (!Settings.canDrawOverlays(this)) {
                 Intent intent
                     = new Intent(
                     Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
@@ -147,6 +153,7 @@ public class MainActivity extends JitsiMeetActivity {
             .setWelcomePageEnabled(true)
             .setServerURL(buildURL(defaultURL))
             .setFeatureFlag("call-integration.enabled", false)
+            .setFeatureFlag("resolution", 360)
             .setFeatureFlag("server-url-change.enabled", !configurationByRestrictions)
             .build();
         JitsiMeet.setDefaultConferenceOptions(defaultOptions);
@@ -176,8 +183,8 @@ public class MainActivity extends JitsiMeetActivity {
     }
 
     @Override
-    public void onConferenceTerminated(Map<String, Object> data) {
-        Log.d(TAG, "Conference terminated: " + data);
+    protected void onConferenceTerminated(HashMap<String, Object> extraData) {
+        Log.d(TAG, "Conference terminated: " + extraData);
     }
 
     // Activity lifecycle method overrides
@@ -185,8 +192,7 @@ public class MainActivity extends JitsiMeetActivity {
 
     @Override
     public void onActivityResult(int requestCode, int resultCode, Intent data) {
-        if (requestCode == OVERLAY_PERMISSION_REQUEST_CODE
-                && canRequestOverlayPermission()) {
+        if (requestCode == OVERLAY_PERMISSION_REQUEST_CODE) {
             if (Settings.canDrawOverlays(this)) {
                 initialize();
                 return;
@@ -209,6 +215,18 @@ public class MainActivity extends JitsiMeetActivity {
         return super.onKeyUp(keyCode, event);
     }
 
+    @Override
+    public void onPictureInPictureModeChanged(boolean isInPictureInPictureMode) {
+        super.onPictureInPictureModeChanged(isInPictureInPictureMode);
+
+        Log.d(TAG, "Is in picture-in-picture mode: " + isInPictureInPictureMode);
+
+        if (!isInPictureInPictureMode) {
+            this.startActivity(new Intent(this, getClass())
+                .addFlags(Intent.FLAG_ACTIVITY_REORDER_TO_FRONT));
+        }
+    }
+
     // Helper methods
     //
 
@@ -219,10 +237,4 @@ public class MainActivity extends JitsiMeetActivity {
             return null;
         }
     }
-
-    private boolean canRequestOverlayPermission() {
-        return
-            Build.VERSION.SDK_INT >= Build.VERSION_CODES.M
-                && getApplicationInfo().targetSdkVersion >= Build.VERSION_CODES.M;
-    }
 }

android/app/src/main/res/drawable/ic_jitsi_logosvg.xml

@@ -0,0 +1,70 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="262.91376dp"
+    android:height="262.91376dp"
+    android:viewportWidth="262.91376"
+    android:viewportHeight="262.91376">
+  <group>
+    <clip-path
+        android:pathData="m0,0 l262.914,-0L262.914,262.914 0,262.914 0,0Z"/>
+    <path
+        android:pathData="m142.646,105.099c0.117,0.026 0.255,0.036 0.406,0.036 3.186,-0 10.297,-4.615 11.617,-6.721l0.1,-0.17 0.153,-0.135c0.451,-0.441 1.746,-2.773 2.374,-4.17 -6.751,-2.023 -7.49,-5.677 -8.153,-8.919 -0.069,-0.376 -0.138,-0.717 -0.204,-1.019 -0.074,-0.397 -0.153,-0.8 -0.226,-1.112C138.668,86.221 135.593,88.094 133.921,89.483 133.056,90.201 132.542,92.251 135.042,97.926 136.323,100.816 140.727,104.733 142.646,105.099"
+        android:fillColor="#ffffff"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m115.413,146.042c5.934,-0 18.464,-3.543 26.748,-5.887 1.21,-0.336 2.33,-0.66 3.351,-0.944 0.166,-0.046 0.321,-0.091 0.472,-0.124 -0.463,-0.461 -1.239,-1.159 -2.497,-2.216 -5.521,-3.741 -10.736,-5.484 -16.403,-5.484 -1.237,-0 -2.522,0.071 -3.923,0.231 -4.801,0.55 -8.8,1.69 -10.722,2.237 -0.967,0.284 -1.263,0.366 -1.567,0.366 -0.58,-0 -1.079,-0.341 -1.273,-0.878 -0.194,-0.534 -0.027,-1.121 0.425,-1.507l0.024,-0.011c3.316,-2.784 9.489,-7.951 21.198,-10.256 2.027,-0.401 4.202,-0.605 6.454,-0.605 5.242,-0 10.67,1.086 16.125,3.219 7.436,2.899 12.521,6.625 16.602,9.62 2.199,1.609 4.105,3.007 5.755,3.771 0.421,0.2 0.637,0.255 0.746,0.265 0.074,-0.095 0.23,-0.365 0.474,-1.069 0.066,-0.185 0.529,-2.161 -2.806,-13.374 -1.931,-6.51 -4.264,-13.156 -5.479,-16.104 -2.356,-5.711 -1.778,-9.76 -1.051,-12.125 -1.999,0.735 -4.033,1.87 -6.174,3.446L161.758,98.711C160.694,99.506 159.599,100.404 158.426,101.454 151.517,107.64 146.344,110.864 143.035,111.04l-0.093,0.004 -0.093,-0.009c-2.912,-0.245 -7.324,-4.489 -9.133,-6.634 -0.373,-0.251 -0.8,-0.366 -1.366,-0.366 -0.564,-0 -1.202,0.116 -1.82,0.235C130.086,104.354 129.623,104.441 129.167,104.489 127.708,104.632 125.668,105.106 123.694,105.561 122.746,105.777 121.762,106.005 120.864,106.189 120.851,106.19 120.463,106.272 119.774,106.454 114.903,107.891 111.228,109.55 109.432,111.111 109.414,111.127 109.352,111.174 109.266,111.242 108.048,112.105 105.124,114.567 104.248,118.762L104.237,118.795C102.398,126.516 105.187,136.087 108.892,141.554 110.636,144.125 112.513,145.727 114.048,145.959 114.437,146.015 114.891,146.042 115.413,146.042"
+        android:fillColor="#ffffff"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m90.093,173.175c-1.252,-1.472 -1.783,-3.324 -1.574,-5.521 0.884,-10.642 -0.329,-13.215 -0.891,-13.829 -0.131,-0.144 -0.207,-0.144 -0.265,-0.144 -0.022,-0 -0.041,0.003 -0.064,0.003 -1.044,0.248 -8.066,5.002 -9.615,19.171 -0.749,6.845 0.561,15.63 1.679,20.974 0.897,-3.155 2.314,-6.624 5.057,-10.204 2.556,-3.326 5.345,-5.955 8.801,-8.253C92.143,174.93 90.991,174.235 90.093,173.175"
+        android:fillColor="#ffffff"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m94.906,156.389c-0.03,2.229 -0.326,4.36 -0.61,6.445 -0.151,1.119 -0.314,2.286 -0.434,3.46 -0.161,2.341 0.346,3.166 0.571,3.406 0.127,0.136 0.326,0.287 0.76,0.287 0.339,-0 0.741,-0.091 1.161,-0.268 4.202,-1.756 8.195,-4.815 10.115,-6.515C103.522,161.892 98.995,159.058 94.906,156.389"
+        android:fillColor="#ffffff"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m154.002,81.595c-0.031,0.074 -0.065,0.148 -0.101,0.216 -0.821,2.403 0.306,5.664 2.419,6.898 0.561,0.327 1.106,0.526 1.624,0.596 0.072,0.006 0.148,0.009 0.219,0.009 1.645,-0 2.971,-1.199 3.961,-3.561C162.752,83.959 162.836,81.827 162.37,79.904 162.003,78.409 161.057,76.627 160.453,75.738 159.332,76.509 157.111,78.207 155.585,79.553 154.518,80.582 154.136,81.229 154.002,81.595"
+        android:fillColor="#ffffff"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="M148.97,77.699C153.957,73.194 156.988,65.754 158.253,61.334 153.915,65.513 148.633,67.758 145.25,69.198 144.084,69.695 143.08,70.124 142.477,70.476 142.224,70.623 141.965,70.77 141.708,70.919 139.654,72.109 136.55,73.905 136.1,75.011l-0.012,0.036 -0.012,0.034c-1.406,2.956 -2.199,7.401 -2.457,9.95 3.266,-1.99 6.625,-3.322 9.416,-4.42C145.628,79.585 147.863,78.703 148.97,77.699"
+        android:fillColor="#ffffff"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m164.464,51.921c-0.84,5.539 -2.205,10.799 -4.751,16.347 2.781,-3.144 4.396,-6.568 4.941,-10.401C164.886,56.275 165.097,54.756 164.464,51.921"
+        android:fillColor="#ffffff"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="M148.749,142.639C148.718,142.598 148.684,142.56 148.658,142.519 148.523,142.539 148.307,142.584 147.972,142.683l-0.14,0.04c-1.726,0.644 -4.899,1.708 -8.556,2.946 -4.396,1.479 -9.365,3.154 -13.526,4.649 -5.297,1.975 -7.021,2.755 -7.557,3.024 -0.098,0.266 -0.203,0.599 -0.327,0.965 -1.254,3.816 -4.125,12.541 -18.276,18.653 2.928,2.956 9.289,8.27 21.809,8.27 1.082,-0 2.21,-0.036 3.341,-0.12 9.451,-0.666 18.342,-4.855 25.026,-11.78 6.087,-6.291 9.538,-14.136 9.585,-21.7C157.876,147.509 155.367,147.135 153.043,146.033 153.014,146.02 150.361,144.745 148.749,142.639"
+        android:fillColor="#ffffff"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m189.478,117.853c-0.523,9.749 -2.122,18.424 -4.744,25.8 -2.128,5.988 -4.94,11.134 -8.356,15.316 -5.676,6.931 -11.555,9.256 -12.804,9.304 -0.866,-0 -1.313,-0.309 -3.046,-1.528 -0.17,-0.114 -0.37,-0.252 -0.581,-0.4 -3.313,5.953 -8.505,11.097 -15.065,14.959 -7.079,4.144 -15.297,6.423 -23.157,6.423 -9.078,-0 -17.13,-2.924 -23.341,-8.456 -7.467,4.799 -12.31,9.074 -16.267,27.005l-1.363,6.17 -2.971,-5.564c-0.424,-0.786 -1.929,-3.731 -3.332,-8.887 -1.934,-7.104 -2.86,-15.181 -2.758,-24.01 0.117,-10.049 3.154,-16.526 5.68,-20.186 2.98,-4.314 6.837,-6.994 10.076,-6.994 0.216,-0 0.428,0.006 0.616,0.035 5.159,0.575 8.435,2.75 14.396,6.686l1.899,1.252c2.059,1.344 4.481,2.7 5.259,2.989 0.54,-0.284 1.749,-2.3 2.155,-5.271l0.069,-0.451c0.005,-0.045 0.009,-0.091 0.014,-0.131 -0.036,-0.02 -0.065,-0.029 -0.094,-0.041 -4.008,-1.375 -9.539,-7.7 -12.364,-17.134 -2.684,-9.382 -2.129,-17.185 1.644,-23.193 6.12,-9.736 19.198,-11.974 23.466,-12.702 1.331,-0.266 2.716,-0.511 4.041,-0.717 0.255,-0.061 0.469,-0.121 0.642,-0.168 -0.031,-0.126 -0.071,-0.265 -0.114,-0.43 -0.108,-0.417 -0.23,-0.891 -0.354,-1.447 -1.345,-6.035 -0.664,-11.069 0.181,-15.193 0.928,-4.546 1.489,-7.287 3.747,-9.936 3.029,-4.165 8.319,-5.936 11.479,-6.991 0.746,-0.249 1.511,-0.509 1.894,-0.689 8.988,-4.31 11.82,-8.739 12.615,-11.694 0.656,-2.451 1.699,-8.884 1.251,-13.335 -0.085,-0.805 0.129,-1.521 0.621,-2.065 0.45,-0.505 1.101,-0.794 1.778,-0.794 1.515,-0 2.82,-0 7.511,14.598 2.481,7.698 0.645,14.903 -5.45,21.424l-0.226,0.231c0.024,0.044 0.049,0.09 0.08,0.144 2.57,4.236 3.963,9.54 3.553,13.51 -0.099,0.906 -0.265,1.775 -0.419,2.549 -0.003,0.01 -0.003,0.016 -0.004,0.029 0.516,-0.032 1.119,-0.055 1.775,-0.055 3.052,-0 7.435,0.474 10.989,2.735 2.135,1.352 4.845,3.439 6.835,7.615C189.223,102.942 190.076,109.575 189.478,117.853m4.77,-23.191c-2.916,-6.1 -6.989,-9.177 -9.793,-10.96 -2.355,-1.494 -5.064,-2.584 -8.077,-3.24l-0.676,-0.146 -0.111,-0.689c-0.339,-2.119 -0.918,-4.275 -1.715,-6.406l-0.185,-0.49 0.292,-0.434c5.095,-7.594 6.323,-16.17 3.54,-24.802 -2.191,-6.824 -3.895,-11.211 -5.341,-13.799 -2.954,-5.305 -7.006,-6.417 -9.891,-6.417 -2.964,-0 -5.8,1.261 -7.789,3.457 -2.043,2.254 -2.993,5.207 -2.678,8.31 0.316,3.134 -0.494,8.516 -1.014,10.439 -0.04,0.117 -0.975,2.929 -8.201,6.428 -0.162,0.056 -0.512,0.179 -1.053,0.359 -3.729,1.246 -10.666,3.571 -15.258,9.64 -3.465,4.205 -4.332,8.441 -5.338,13.346 -0.586,2.865 -1.236,6.744 -1.079,11.344l0.026,0.841 -0.824,0.188c-11.646,2.585 -20.025,7.835 -24.909,15.605 -5.054,8.04 -5.919,18.055 -2.543,29.853 0.063,0.204 0.126,0.407 0.189,0.615l0.527,1.608 -1.665,-0.286c-0.561,-0.101 -1.135,-0.18 -1.729,-0.241 -0.493,-0.06 -1.001,-0.082 -1.509,-0.082 -5.633,-0 -11.663,3.585 -16.128,9.592 -3.451,4.641 -7.588,12.849 -7.735,25.601 -0.114,9.573 0.906,18.401 3.038,26.228 1.581,5.795 3.326,9.329 4.004,10.577l13.306,24.94 6.096,-27.619c2.454,-11.09 4.864,-15.262 7.725,-18.111l0.561,-0.563 0.679,0.411c6.605,3.977 14.466,6.084 22.73,6.084 9.286,-0 18.965,-2.682 27.259,-7.551 5.38,-3.16 9.974,-7.036 13.649,-11.531l0.45,-0.369 0.85,-0.02c2.156,-0.068 5.16,-1.164 8.222,-3.004 2.6,-1.555 6.543,-4.428 10.501,-9.262 3.997,-4.884 7.274,-10.854 9.716,-17.734 2.876,-8.073 4.625,-17.489 5.204,-28.004 0.689,-9.668 -0.434,-17.641 -3.327,-23.704"
+        android:fillColor="#ffffff"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m180.026,98.414c-1.67,-2.596 -3.771,-4.206 -5.475,-4.206 -0.313,-0 -0.613,0.051 -0.895,0.161 -0.911,0.361 -2.356,4.532 -1.714,7.566 0.434,2.066 2.938,9.04 4.151,12.394 0.456,1.281 0.68,1.91 0.754,2.142 0.064,0.183 0.145,0.448 0.256,0.774 0.97,2.971 3.467,10.586 4.206,16.761 1.549,-6.579 2.424,-14.512 2.085,-23.997C183.235,105.662 182.04,101.538 180.026,98.414"
+        android:fillColor="#ffffff"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="M168.088,142.604C169.896,142.111 171.33,141.705 172.398,141.395 170.213,139.874 167.689,137.979 164.247,135.304c-8.418,-6.546 -17.449,-9.87 -26.839,-9.87 -5.135,-0 -9.611,0.991 -13.156,2.186 0.882,-0.05 1.779,-0.079 2.7,-0.079 1.1,-0 2.247,0.04 3.411,0.119 3.652,0.246 13.061,1.901 21.565,12.047 1.714,2.039 3.559,3.73 8.794,3.73 1.873,-0 4.051,-0.207 6.662,-0.645C167.544,142.751 167.793,142.678 168.088,142.604"
+        android:fillColor="#ffffff"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m164.3,147.583c-0.122,1.563 -0.376,4.509 -0.782,6.76 -0.495,2.719 -1.31,5.02 -1.791,6.226 0.85,0.786 1.694,1.553 2.247,2.043 2.214,-1.447 9.47,-6.96 14.483,-19.474C176.847,144.229 174.59,145.178 171.671,146.018 168.701,146.861 165.82,147.357 164.3,147.583"
+        android:fillColor="#ffffff"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+  </group>
+</vector>

android/app/src/main/res/layout/launch_screen.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@color/colorPrimary">
+    <ImageView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_centerInParent="true"
+        android:src="@drawable/ic_jitsi_logosvg"/>
+</RelativeLayout>

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

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="colorPrimary">#17A0DB</color>
+    <color name="colorPrimaryDark">#1081B2</color>
+</resources>

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

@@ -2,6 +2,6 @@
     <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <!-- Customize your theme here. -->
-        <item name="android:navigationBarColor">#1081B2</item>
+        <item name="android:navigationBarColor">@color/colorPrimaryDark</item>
     </style>
 </resources>

android/app/src/main/res/xml/network_security_config.xml

@@ -1,6 +1,12 @@
-<network-security-config>
-    <domain-config cleartextTrafficPermitted="true">
-        <domain includeSubdomains="false">localhost</domain>
-        <domain includeSubdomains="false">10.0.2.2</domain>
-    </domain-config>
+<network-security-config> 
+   <base-config> 
+      <trust-anchors> 
+         <certificates src="system" /> 
+         <certificates src="user" /> 
+      </trust-anchors> 
+   </base-config> 
+   <domain-config cleartextTrafficPermitted="true"> 
+      <domain includeSubdomains="false">localhost</domain> 
+      <domain includeSubdomains="false">10.0.2.2</domain> 
+   </domain-config> 
 </network-security-config>

android/build.gradle

@@ -1,4 +1,5 @@
 import groovy.json.JsonSlurper
+import org.gradle.util.VersionNumber
 
 // Top-level build file where you can add configuration options common to all
 // sub-projects/modules.
@@ -7,26 +8,46 @@ buildscript {
     repositories {
         google()
         jcenter()
-        repositories {
-            maven { url 'https://maven.fabric.io/public' }
-        }
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:3.3.2'
-        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.
+        classpath 'com.android.tools.build:gradle:4.1.2'
+        classpath 'com.google.gms:google-services:4.3.4'
+        classpath 'com.google.firebase:firebase-crashlytics-gradle:2.4.1'
     }
 }
 
+ext {
+    buildToolsVersion = "30.0.3"
+    compileSdkVersion = 30
+    minSdkVersion    = 23
+    targetSdkVersion = 30
+    supportLibVersion = "28.0.0"
+
+    // The Maven artifact groupdId of the third-party react-native modules which
+    // Jitsi Meet SDK for Android depends on and which are not available in
+    // third-party Maven repositories so we have to deploy to a Maven repository
+    // of ours.
+    moduleGroupId = 'com.facebook.react'
+
+    // Maven repo where artifacts will be published
+    mavenRepo = System.env.MVN_REPO ?: ""
+    mavenUser = System.env.MVN_USER ?: ""
+    mavenPassword = System.env.MVN_PASSWORD ?: ""
+
+    // Libre build
+    libreBuild = (System.env.LIBRE_BUILD ?: "false").toBoolean()
+
+    googleServicesEnabled = project.file('app/google-services.json').exists() && !libreBuild
+}
+
 allprojects {
     repositories {
         google()
         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
@@ -141,30 +162,6 @@ allprojects {
     }
 }
 
-ext {
-    buildToolsVersion = "28.0.3"
-    compileSdkVersion = 28
-    minSdkVersion    = 21
-    targetSdkVersion = 28
-    supportLibVersion = "28.0.0"
-
-    // The Maven artifact groupdId of the third-party react-native modules which
-    // Jitsi Meet SDK for Android depends on and which are not available in
-    // third-party Maven repositories so we have to deploy to a Maven repository
-    // of ours.
-    moduleGroupId = 'com.facebook.react'
-
-    // Maven repo where artifacts will be published
-    mavenRepo = System.env.MVN_REPO ?: ""
-    mavenUser = System.env.MVN_USER ?: ""
-    mavenPassword = System.env.MVN_PASSWORD ?: ""
-
-    // Libre build
-    libreBuild = (System.env.LIBRE_BUILD ?: "false").toBoolean()
-
-    googleServicesEnabled = project.file('app/google-services.json').exists() && !libreBuild
-}
-
 // Force the version of the Android build tools we have chosen on all
 // subprojects. The forcing was introduced for react-native and the third-party
 // modules that we utilize such as react-native-background-timer.

android/gradle.properties

@@ -10,15 +10,20 @@
 # Specifies the JVM arguments used for the daemon process.
 # The setting is particularly useful for tweaking memory settings.
 # Default value: -Xmx10248m -XX:MaxPermSize=256m
-# org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
+
+org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
 
 # When configured, Gradle will run in incubating parallel mode.
 # This option should only be used with decoupled projects. More details, visit
 # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
 # org.gradle.parallel=true
 
+# This one fixes a weird WebRTC runtime problem on some devices.
+# https://github.com/jitsi/jitsi-meet/issues/7911#issuecomment-714323255
+android.enableDexingArtifactTransform.desugaring=false
+
 android.useAndroidX=true
 android.enableJetifier=true
 
-appVersion=20.3.0
-sdkVersion=2.9.0
+appVersion=21.3.0
+sdkVersion=3.8.0

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
-#Fri Mar 08 13:36:51 CET 2019
+#Wed Sep 23 11:48:00 EEST 2020
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.6.1-all.zip

android/scripts/release-sdk.sh

@@ -10,7 +10,7 @@ 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 '.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-)
+JSC_VERSION="r"$(jq -r '.dependencies."jsc-android"' ${THIS_DIR}/../../node_modules/react-native/package.json | cut -d . -f 1 | cut -c 2-)
 DO_GIT_TAG=${GIT_TAG:-0}
 
 if [[ $THE_MVN_REPO == http* ]]; then
@@ -38,19 +38,17 @@ if [[ $MVN_HTTP == 1 ]]; then
         -DgeneratePom=false \
         -DpomFile=react-native-${RN_VERSION}.pom || true
     popd
-    # Push Hermes
-    echo "Pushing Hermes ${HERMES_VERSION} to the Maven repo"
-    pushd ${THIS_DIR}/../../node_modules/hermes-engine/android/
+    # 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}
     mvn \
         deploy:deploy-file \
         -Durl=${MVN_REPO} \
         -DrepositoryId=${MVN_REPO_ID} \
-        -Dfile=hermes-release.aar \
+        -Dfile=android-jsc-${JSC_VERSION}.aar \
         -Dpackaging=aar \
-        -DgroupId=com.facebook \
-        -DartifactId=hermes \
-        -Dversion=${HERMES_VERSION} \
-        -DgeneratePom=true || true
+        -DgeneratePom=false \
+        -DpomFile=android-jsc-${JSC_VERSION}.pom || true
     popd
 else
     # Push React Native, if necessary
@@ -67,19 +65,17 @@ else
         popd
     fi
 
-    # 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/
+    # 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}
         mvn \
             deploy:deploy-file \
             -Durl=${MVN_REPO} \
-            -Dfile=hermes-release.aar \
+            -Dfile=android-jsc-${JSC_VERSION}.aar \
             -Dpackaging=aar \
-            -DgroupId=com.facebook \
-            -DartifactId=hermes \
-            -Dversion=${HERMES_VERSION} \
-            -DgeneratePom=true
+            -DgeneratePom=false \
+            -DpomFile=android-jsc-${JSC_VERSION}.pom
         popd
     fi
 
@@ -93,7 +89,9 @@ fi
 # Now build and publish the Jitsi Meet SDK and its dependencies
 echo "Building and publishing the Jitsi Meet SDK"
 pushd ${THIS_DIR}/../
-./gradlew clean assembleRelease publish
+./gradlew clean 
+./gradlew assembleRelease 
+./gradlew publish
 popd
 
 if [[ $DO_GIT_TAG == 1 ]]; then

android/scripts/run-packager-helper.command

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+THIS_DIR=$(cd -P "$(dirname "$(readlink "${BASH_SOURCE[0]}" || echo "${BASH_SOURCE[0]}")")" && pwd)
+
+exec ${THIS_DIR}/../../node_modules/react-native/scripts/launchPackager.command --reset-cache

android/scripts/run-packager.sh

@@ -8,7 +8,7 @@ THIS_DIR=$(cd -P "$(dirname "$(readlink "${BASH_SOURCE[0]}" || echo "${BASH_SOUR
 export RCT_METRO_PORT="${RCT_METRO_PORT:=8081}"
 echo "export RCT_METRO_PORT=${RCT_METRO_PORT}" > "${THIS_DIR}/../../node_modules/react-native/scripts/.packager.env"
 
-adb reverse tcp:8081 tcp:8081
+adb reverse tcp:$RCT_METRO_PORT tcp:$RCT_METRO_PORT
 
 if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then
   if ! curl -s "http://localhost:${RCT_METRO_PORT}/status" | grep -q "packager-status:running" ; then
@@ -16,11 +16,10 @@ if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then
     exit 2
   fi
 else
-    CMD="${THIS_DIR}/../../node_modules/react-native/scripts/launchPackager.command"
+    CMD="$THIS_DIR/run-packager-helper.command"
     if [[ `uname` == "Darwin"  ]]; then
         open -g "${CMD}" || echo "Can't start packager automatically"
     else
         xdg-open "${CMD}" || echo "Can't start packager automatically"
     fi
 fi
-

android/sdk/build.gradle

@@ -1,5 +1,3 @@
-import groovy.json.JsonSlurper
-
 apply plugin: 'com.android.library'
 apply plugin: 'maven-publish'
 
@@ -27,57 +25,56 @@ android {
     sourceSets {
         main {
             java {
-                if (rootProject.ext.libreBuild) {
-                    srcDir "src"
-                    exclude "**/AmplitudeModule.java"
-                }
                 exclude "test/"
             }
         }
     }
-
-    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.1.0'
-    implementation 'androidx.fragment:fragment:1.2.0'
+    implementation 'androidx.appcompat:appcompat:1.2.0'
+    implementation 'androidx.fragment:fragment:1.2.5'
+    implementation 'androidx.localbroadcastmanager:localbroadcastmanager:1.0.0'
+    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'
 
     //noinspection GradleDynamicVersion
     api 'com.facebook.react:react-native:+'
-
-    // Hermes JS engine
-    def hermesPath = "../../node_modules/hermes-engine/android/"
-    debugImplementation files(hermesPath + "hermes-debug.aar")
-    releaseImplementation files(hermesPath + "hermes-release.aar")
+    //noinspection GradleDynamicVersion
+    implementation 'org.webkit:android-jsc:+'
 
     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'
+    implementation 'com.google.code.gson:gson:2.8.6'
 
-    if (!rootProject.ext.libreBuild) {
-        implementation 'com.amplitude:android-sdk:2.14.1'
+    if (rootProject.ext.libreBuild) {
+        implementation(project(':react-native-device-info')) {
+            exclude group: 'com.google.firebase'
+            exclude group: 'com.google.android.gms'
+            exclude group: 'com.android.installreferrer'
+        }
+    } else {
+        implementation project(':react-native-device-info')
         implementation(project(":react-native-google-signin")) {
             exclude group: 'com.google.android.gms'
             exclude group: 'androidx'
         }
     }
 
+    implementation project(':react-native-async-storage')
     implementation project(':react-native-background-timer')
     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')
+    implementation project(':react-native-slider')
     implementation project(':react-native-sound')
+    implementation project(':react-native-splash-screen')
     implementation project(':react-native-svg')
+    implementation project(':react-native-video')
     implementation project(':react-native-webrtc')
     implementation project(':react-native-webview')
 
@@ -153,7 +150,7 @@ android.libraryVariants.all { def variant ->
     mergeResourcesTask.dependsOn(currentBundleTask)
 
     mergeAssetsTask.doLast {
-        def assetsDir = mergeAssetsTask.outputDir
+        def assetsDir = mergeAssetsTask.outputDir.get()
 
         // Bundle sounds
         //
@@ -187,7 +184,7 @@ android.libraryVariants.all { def variant ->
         if (currentBundleTask.enabled) {
             copy {
                 from(resourcesDir)
-                into(mergeResourcesTask.outputDir)
+                into(mergeResourcesTask.outputDir.get())
             }
         }
     }
@@ -227,14 +224,6 @@ 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/AndroidManifest.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
     package="org.jitsi.meet.sdk">
     <!-- XXX ACCESS_NETWORK_STATE is required by WebRTC. -->
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
@@ -12,7 +13,7 @@
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
     <uses-permission android:name="android.permission.WAKE_LOCK" />
     <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
-    <uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
 
     <uses-feature
         android:glEsVersion="0x00020000"
@@ -34,19 +35,28 @@
             android:launchMode="singleTask"
             android:resizeableActivity="true"
             android:supportsPictureInPicture="true"
-            android:windowSoftInputMode="adjustResize">
-        </activity>
+            android:windowSoftInputMode="adjustResize"/>
         <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
 
         <service
             android:name=".ConnectionService"
-            android:permission="android.permission.BIND_TELECOM_CONNECTION_SERVICE">
+            android:permission="android.permission.BIND_TELECOM_CONNECTION_SERVICE"
+            android:exported="true">
             <intent-filter>
                 <action android:name="android.telecom.ConnectionService" />
             </intent-filter>
         </service>
 
-        <service android:name="org.jitsi.meet.sdk.JitsiMeetOngoingConferenceService" />
+        <service
+            android:name="org.jitsi.meet.sdk.JitsiMeetOngoingConferenceService"
+            android:foregroundServiceType="mediaProjection" />
+
+        <provider
+            android:name="com.reactnativecommunity.webview.RNCWebViewFileProvider"
+            android:authorities="${applicationId}.fileprovider"
+            android:enabled="false"
+            tools:replace="android:authorities">
+        </provider>
     </application>
 
 </manifest>

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

@@ -1,122 +0,0 @@
-/*
- * 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 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;
-import com.facebook.react.bridge.ReadableMap;
-
-import com.amplitude.api.Amplitude;
-import com.facebook.react.module.annotations.ReactModule;
-
-import org.jitsi.meet.sdk.log.JitsiMeetLogger;
-import org.json.JSONException;
-import org.json.JSONObject;
-
-/**
- * Implements the react-native module for the Amplitude integration.
- */
-@ReactModule(name = AmplitudeModule.NAME)
-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);
-    }
-
-    /**
-     * Initializes the Amplitude SDK.
-     *
-     * @param instanceName The name of the Amplitude instance. Should
-     * be used only for multi-project logging.
-     * @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();
-        }
-    }
-
-    /**
-     * Sets the user ID for an Amplitude instance.
-     *
-     * @param instanceName The name of the Amplitude instance.
-     * @param userId The new value for the user ID.
-     */
-    @ReactMethod
-    public void setUserId(String instanceName, String userId) {
-            Amplitude.getInstance(instanceName).setUserId(userId);
-    }
-
-    /**
-     * Sets the user properties for an Amplitude instance.
-     *
-     * @param instanceName The name of the Amplitude instance.
-     * @param userProps JSON string with user properties to be set.
-     */
-    @ReactMethod
-    public void setUserProperties(String instanceName, ReadableMap userProps) {
-        if (userProps != null) {
-            Amplitude.getInstance(instanceName).setUserProperties(
-                    new JSONObject(userProps.toHashMap()));
-        }
-    }
-
-    /**
-     * Log an analytics event.
-     *
-     * @param instanceName The name of the Amplitude instance.
-     * @param eventType The event type.
-     * @param eventPropsString JSON string with the event properties.
-     */
-    @ReactMethod
-    public void logEvent(String instanceName, String eventType, String eventPropsString) {
-        try {
-            JSONObject eventProps = new JSONObject(eventPropsString);
-            Amplitude.getInstance(instanceName).logEvent(eventType, eventProps);
-        } catch (JSONException e) {
-            JitsiMeetLogger.e(e, "Error logging event");
-        }
-    }
-
-    @Override
-    public String getName() {
-        return NAME;
-    }
-}

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

@@ -16,11 +16,11 @@
 
 package org.jitsi.meet.sdk;
 
-import android.content.Context;
+import android.media.AudioAttributes;
 import android.media.AudioDeviceInfo;
+import android.media.AudioFocusRequest;
 import android.media.AudioManager;
 import android.os.Build;
-import androidx.annotation.RequiresApi;
 
 import java.util.HashSet;
 import java.util.Set;
@@ -34,7 +34,6 @@ import org.jitsi.meet.sdk.log.JitsiMeetLogger;
  * 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 {
@@ -64,7 +63,7 @@ class AudioDeviceHandlerGeneric implements
     private AudioManager audioManager;
 
     /**
-     * {@link Runnable} for running audio device detection the main thread.
+     * {@link Runnable} for running audio device detection in the audio thread.
      * This is only used on Android >= M.
      */
     private final Runnable onAudioDeviceChangeRunner = new Runnable() {
@@ -146,7 +145,7 @@ class AudioDeviceHandlerGeneric implements
                         // Some other application potentially stole our audio focus
                         // temporarily. Restore our mode.
                         if (audioFocusLost) {
-                            module.updateAudioRoute();
+                            module.resetAudioRoute();
                         }
                         audioFocusLost = false;
                         break;
@@ -220,8 +219,24 @@ class AudioDeviceHandlerGeneric implements
         audioManager.setMode(AudioManager.MODE_IN_COMMUNICATION);
         audioManager.setMicrophoneMute(false);
 
-        if (audioManager.requestAudioFocus(this, AudioManager.STREAM_VOICE_CALL, AudioManager.AUDIOFOCUS_GAIN)
-            == AudioManager.AUDIOFOCUS_REQUEST_FAILED) {
+        int gotFocus;
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+            gotFocus = audioManager.requestAudioFocus(new AudioFocusRequest.Builder(AudioManager.AUDIOFOCUS_GAIN)
+                .setAudioAttributes(
+                    new AudioAttributes.Builder()
+                        .setUsage(AudioAttributes.USAGE_VOICE_COMMUNICATION)
+                        .setContentType(AudioAttributes.CONTENT_TYPE_SPEECH)
+                        .build()
+                )
+                .setAcceptsDelayedFocusGain(true)
+                .setOnAudioFocusChangeListener(this)
+                .build()
+            );
+        } else {
+            gotFocus = audioManager.requestAudioFocus(this, AudioManager.STREAM_VOICE_CALL, AudioManager.AUDIOFOCUS_GAIN);
+        }
+
+        if (gotFocus == AudioManager.AUDIOFOCUS_REQUEST_FAILED) {
             JitsiMeetLogger.w(TAG + " Audio focus request failed");
             return false;
         }

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

@@ -1,230 +0,0 @@
-/*
- * 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

@@ -16,6 +16,7 @@
 
 package org.jitsi.meet.sdk;
 
+import android.app.Activity;
 import android.content.Context;
 import android.media.AudioManager;
 import android.os.Build;
@@ -222,10 +223,8 @@ class AudioModeModule extends ReactContextBaseJavaModule {
 
         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 = new AudioDeviceHandlerGeneric(audioManager);
         }
 
         audioDeviceHandler.start(this);
@@ -258,7 +257,7 @@ class AudioModeModule extends ReactContextBaseJavaModule {
                 if (mode != -1) {
                     JitsiMeetLogger.i(TAG + " User selected device set to: " + device);
                     userSelectedDevice = device;
-                    updateAudioRoute(mode);
+                    updateAudioRoute(mode, false);
                 }
             }
         });
@@ -278,13 +277,22 @@ class AudioModeModule extends ReactContextBaseJavaModule {
             return;
         }
 
+        Activity currentActivity = getCurrentActivity();
+        if (currentActivity != null) {
+            if (mode == DEFAULT) {
+                currentActivity.setVolumeControlStream(AudioManager.USE_DEFAULT_STREAM_TYPE);
+            } else {
+                currentActivity.setVolumeControlStream(AudioManager.STREAM_VOICE_CALL);
+            }
+        }
+
         runInAudioThread(new Runnable() {
             @Override
             public void run() {
                 boolean success;
 
                 try {
-                    success = updateAudioRoute(mode);
+                    success = updateAudioRoute(mode, false);
                 } catch (Throwable e) {
                     success = false;
                     JitsiMeetLogger.e(e, TAG + " Failed to update audio route for mode: " + mode);
@@ -323,7 +331,7 @@ class AudioModeModule extends ReactContextBaseJavaModule {
      * @return {@code true} if the audio route was updated successfully;
      * {@code false}, otherwise.
      */
-    private boolean updateAudioRoute(int mode) {
+    private boolean updateAudioRoute(int mode, boolean force) {
         JitsiMeetLogger.i(TAG + " Update audio route for mode: " + mode);
 
         if (!audioDeviceHandler.setMode(mode)) {
@@ -358,7 +366,7 @@ class AudioModeModule extends ReactContextBaseJavaModule {
 
         // If the previously selected device and the current default one
         // match, do nothing.
-        if (selectedDevice != null && selectedDevice.equals(audioDevice)) {
+        if (!force && selectedDevice != null && selectedDevice.equals(audioDevice)) {
             return true;
         }
 
@@ -423,17 +431,17 @@ class AudioModeModule extends ReactContextBaseJavaModule {
      */
     void updateAudioRoute() {
         if (mode != -1) {
-            updateAudioRoute(mode);
+            updateAudioRoute(mode, false);
         }
     }
 
     /**
-     * Needed on the legacy handler...
-     *
-     * @return Context for the application.
+     * Re-sets the current audio route. Needed when focus is lost and regained.
      */
-    Context getContext() {
-        return getReactApplicationContext();
+    void resetAudioRoute() {
+        if (mode != -1) {
+            updateAudioRoute(mode, true);
+        }
     }
 
     /**

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

@@ -99,6 +99,7 @@ public abstract class BaseReactView<ListenerT>
      * The listener (e.g. {@link JitsiMeetViewListener}) instance for reporting
      * events occurring in Jitsi Meet.
      */
+    @Deprecated
     private ListenerT listener;
 
     /**
@@ -167,6 +168,7 @@ public abstract class BaseReactView<ListenerT>
      *
      * @return The listener set on this {@code BaseReactView}.
      */
+    @Deprecated
     public ListenerT getListener() {
         return listener;
     }
@@ -179,8 +181,10 @@ public abstract class BaseReactView<ListenerT>
      * @param data - The details of the event associated with/specific to the
      * specified {@code name}.
      */
+    @Deprecated
     protected abstract void onExternalAPIEvent(String name, ReadableMap data);
 
+    @Deprecated
     protected void onExternalAPIEvent(
             Map<String, Method> listenerMethods,
             String name, ReadableMap data) {
@@ -215,6 +219,7 @@ public abstract class BaseReactView<ListenerT>
      *
      * @param listener The listener to set on this {@code BaseReactView}.
      */
+    @Deprecated
     public void setListener(ListenerT listener) {
         this.listener = listener;
     }

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

@@ -1,191 +0,0 @@
-/*
- * 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.bluetooth.BluetoothAdapter;
-import android.bluetooth.BluetoothHeadset;
-import android.bluetooth.BluetoothProfile;
-import android.content.BroadcastReceiver;
-import android.content.Context;
-import android.content.Intent;
-import android.content.IntentFilter;
-import android.media.AudioManager;
-
-import org.jitsi.meet.sdk.log.JitsiMeetLogger;
-
-/**
- * Helper class to detect and handle Bluetooth device changes.  It monitors
- * Bluetooth headsets being connected / disconnected and notifies the module
- * about device changes when this occurs.
- */
-class BluetoothHeadsetMonitor {
-    private final static String TAG = BluetoothHeadsetMonitor.class.getSimpleName();
-
-    /**
-     * 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;
-
-    /**
-     * receiver registered for receiving Bluetooth connection state changes.
-     */
-    private BroadcastReceiver receiver;
-
-    /**
-     * Listener for receiving Bluetooth device change events.
-     */
-    private Listener listener;
-
-    public BluetoothHeadsetMonitor(Context context, Listener listener) {
-        this.context = context;
-        this.listener = listener;
-    }
-
-    private boolean getBluetoothHeadsetProfileProxy() {
-        adapter = BluetoothAdapter.getDefaultAdapter();
-
-        if (adapter == null) {
-            JitsiMeetLogger.w(TAG + " Device doesn't support Bluetooth");
-            return false;
-        }
-
-        // XXX: The profile listener listens for system services of the given
-        // type being available to the application. That is, if our Bluetooth
-        // adapter has the "headset" profile.
-        BluetoothProfile.ServiceListener listener
-            = new BluetoothProfile.ServiceListener() {
-                @Override
-                public void onServiceConnected(int profile, BluetoothProfile proxy) {
-                    if (profile == BluetoothProfile.HEADSET) {
-                        headset = (BluetoothHeadset) proxy;
-                        updateDevices();
-                    }
-                }
-
-                @Override
-                public void onServiceDisconnected(int profile) {
-                    // The logic is the same as the logic of onServiceConnected.
-                    onServiceConnected(profile, /* proxy */ null);
-                }
-            };
-
-        return adapter.getProfileProxy(context, listener, BluetoothProfile.HEADSET);
-    }
-
-    private void onBluetoothReceiverReceive(Context context, Intent intent) {
-        final String action = intent.getAction();
-
-        if (action.equals(BluetoothHeadset.ACTION_CONNECTION_STATE_CHANGED)) {
-            // XXX: This action will be fired when a Bluetooth headset is
-            // connected or disconnected to the system. This is not related to
-            // audio routing.
-            int state = intent.getIntExtra(BluetoothHeadset.EXTRA_STATE, -99);
-
-            switch (state) {
-            case BluetoothHeadset.STATE_CONNECTED:
-            case BluetoothHeadset.STATE_DISCONNECTED:
-                JitsiMeetLogger.d(TAG + " BT headset connection state changed: " + state);
-                updateDevices();
-                break;
-            }
-        } else if (action.equals(AudioManager.ACTION_SCO_AUDIO_STATE_UPDATED)) {
-            // 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);
-
-            switch (state) {
-            case AudioManager.SCO_AUDIO_STATE_CONNECTED:
-            case AudioManager.SCO_AUDIO_STATE_DISCONNECTED:
-                JitsiMeetLogger.d(TAG + " BT SCO connection state changed: " + state);
-                updateDevices();
-                break;
-            }
-        }
-    }
-
-    private void registerBluetoothReceiver() {
-        receiver = new BroadcastReceiver() {
-            @Override
-            public void onReceive(Context context, Intent intent) {
-                onBluetoothReceiverReceive(context, intent);
-            }
-        };
-
-        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 Listener} registered event.
-     */
-    private void updateDevices() {
-        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/BroadcastAction.java

@@ -0,0 +1,100 @@
+package org.jitsi.meet.sdk;
+
+import android.content.Intent;
+import android.os.Bundle;
+
+import com.facebook.react.bridge.WritableNativeMap;
+
+import org.jitsi.meet.sdk.log.JitsiMeetLogger;
+
+import java.util.HashMap;
+
+/**
+ * Wraps the name and extra data for events that were broadcasted locally.
+ */
+public class BroadcastAction {
+    private static final String TAG = BroadcastAction.class.getSimpleName();
+
+    private final Type type;
+    private final HashMap<String, Object> data;
+
+    public BroadcastAction(Intent intent) {
+        this.type = Type.buildTypeFromAction(intent.getAction());
+        this.data = buildDataFromBundle(intent.getExtras());
+    }
+
+    public Type getType() {
+        return this.type;
+    }
+
+    public HashMap<String, Object> getData() {
+        return this.data;
+    }
+
+    public WritableNativeMap getDataAsWritableNativeMap() {
+        WritableNativeMap nativeMap = new WritableNativeMap();
+
+        for (String key : this.data.keySet()) {
+            try {
+                if (this.data.get(key) instanceof Boolean) {
+                    nativeMap.putBoolean(key, (Boolean) this.data.get(key));
+                } else if (this.data.get(key) instanceof Integer) {
+                    nativeMap.putInt(key, (Integer) this.data.get(key));
+                } else if (this.data.get(key) instanceof Double) {
+                    nativeMap.putDouble(key, (Double) this.data.get(key));
+                } else if (this.data.get(key) instanceof String) {
+                    nativeMap.putString(key, (String) this.data.get(key));
+                } else {
+                    throw new Exception("Unsupported extra data type");
+                }
+            } catch (Exception e) {
+                JitsiMeetLogger.w(TAG + " invalid extra data in event", e);
+            }
+        }
+
+        return nativeMap;
+    }
+
+    private static HashMap<String, Object> buildDataFromBundle(Bundle bundle) {
+        HashMap<String, Object> map = new HashMap<>();
+
+        if (bundle != null) {
+            for (String key : bundle.keySet()) {
+                map.put(key, bundle.get(key));
+            }
+        }
+
+        return map;
+    }
+
+    enum Type {
+        SET_AUDIO_MUTED("org.jitsi.meet.SET_AUDIO_MUTED"),
+        HANG_UP("org.jitsi.meet.HANG_UP"),
+        SEND_ENDPOINT_TEXT_MESSAGE("org.jitsi.meet.SEND_ENDPOINT_TEXT_MESSAGE"),
+        TOGGLE_SCREEN_SHARE("org.jitsi.meet.TOGGLE_SCREEN_SHARE"),
+        RETRIEVE_PARTICIPANTS_INFO("org.jitsi.meet.RETRIEVE_PARTICIPANTS_INFO"),
+        OPEN_CHAT("org.jitsi.meet.OPEN_CHAT"),
+        CLOSE_CHAT("org.jitsi.meet.CLOSE_CHAT"),
+        SEND_CHAT_MESSAGE("org.jitsi.meet.SEND_CHAT_MESSAGE"),
+        SET_VIDEO_MUTED("org.jitsi.meet.SET_VIDEO_MUTED");
+
+        private final String action;
+
+        Type(String action) {
+            this.action = action;
+        }
+
+        public String getAction() {
+            return action;
+        }
+
+        private static Type buildTypeFromAction(String action) {
+            for (Type type : Type.values()) {
+                if (type.action.equalsIgnoreCase(action)) {
+                    return type;
+                }
+            }
+            return null;
+        }
+    }
+}

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

@@ -0,0 +1,30 @@
+package org.jitsi.meet.sdk;
+
+import android.content.Context;
+import android.content.Intent;
+
+import androidx.localbroadcastmanager.content.LocalBroadcastManager;
+
+import com.facebook.react.bridge.ReadableMap;
+
+/**
+ * Class used to emit events through the LocalBroadcastManager, called when events
+ * from JS occurred. Takes an action name from JS, builds and broadcasts the {@link BroadcastEvent}
+ */
+public class BroadcastEmitter {
+    private final LocalBroadcastManager localBroadcastManager;
+
+    public BroadcastEmitter(Context context) {
+        localBroadcastManager = LocalBroadcastManager.getInstance(context);
+    }
+
+    public void sendBroadcast(String name, ReadableMap data) {
+        BroadcastEvent event = new BroadcastEvent(name, data);
+
+        Intent intent = event.buildIntent();
+
+        if (intent != null) {
+            localBroadcastManager.sendBroadcast(intent);
+        }
+    }
+}

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

@@ -0,0 +1,155 @@
+package org.jitsi.meet.sdk;
+
+import android.content.Intent;
+import android.os.Bundle;
+
+import com.facebook.react.bridge.ReadableMap;
+
+import org.jitsi.meet.sdk.log.JitsiMeetLogger;
+
+import java.util.HashMap;
+
+/**
+ * Wraps the name and extra data for the events that occur on the JS side and are
+ * to be broadcasted.
+ */
+public class BroadcastEvent {
+
+    private static final String TAG = BroadcastEvent.class.getSimpleName();
+
+    private final Type type;
+    private final HashMap<String, Object> data;
+
+    public BroadcastEvent(String name, ReadableMap data) {
+        this.type = Type.buildTypeFromName(name);
+        this.data = data.toHashMap();
+    }
+
+    public BroadcastEvent(Intent intent) {
+        this.type = Type.buildTypeFromAction(intent.getAction());
+        this.data = buildDataFromBundle(intent.getExtras());
+    }
+
+    public Type getType() {
+        return this.type;
+    }
+
+    public HashMap<String, Object> getData() {
+        return this.data;
+    }
+
+    public Intent buildIntent() {
+        if (type != null && type.action != null) {
+            Intent intent = new Intent(type.action);
+
+            for (String key : this.data.keySet()) {
+                try {
+                    intent.putExtra(key, this.data.get(key).toString());
+                } catch (Exception e) {
+                    JitsiMeetLogger.w(TAG + " invalid extra data in event", e);
+                }
+            }
+
+            return intent;
+        }
+
+        return null;
+    }
+
+    private static HashMap<String, Object> buildDataFromBundle(Bundle bundle) {
+        if (bundle != null) {
+            try {
+                HashMap<String, Object> map = new HashMap<>();
+
+                for (String key : bundle.keySet()) {
+                    map.put(key, bundle.get(key));
+                }
+
+                return map;
+            } catch (Exception e) {
+                JitsiMeetLogger.w(TAG + " invalid extra data", e);
+            }
+        }
+
+        return null;
+    }
+
+    public enum Type {
+        CONFERENCE_JOINED("org.jitsi.meet.CONFERENCE_JOINED"),
+        CONFERENCE_TERMINATED("org.jitsi.meet.CONFERENCE_TERMINATED"),
+        CONFERENCE_WILL_JOIN("org.jitsi.meet.CONFERENCE_WILL_JOIN"),
+        AUDIO_MUTED_CHANGED("org.jitsi.meet.AUDIO_MUTED_CHANGED"),
+        PARTICIPANT_JOINED("org.jitsi.meet.PARTICIPANT_JOINED"),
+        PARTICIPANT_LEFT("org.jitsi.meet.PARTICIPANT_LEFT"),
+        ENDPOINT_TEXT_MESSAGE_RECEIVED("org.jitsi.meet.ENDPOINT_TEXT_MESSAGE_RECEIVED"),
+        SCREEN_SHARE_TOGGLED("org.jitsi.meet.SCREEN_SHARE_TOGGLED"),
+        PARTICIPANTS_INFO_RETRIEVED("org.jitsi.meet.PARTICIPANTS_INFO_RETRIEVED"),
+        CHAT_MESSAGE_RECEIVED("org.jitsi.meet.CHAT_MESSAGE_RECEIVED"),
+        CHAT_TOGGLED("org.jitsi.meet.CHAT_TOGGLED"),
+        VIDEO_MUTED_CHANGED("org.jitsi.meet.VIDEO_MUTED_CHANGED");
+
+
+        private static final String CONFERENCE_WILL_JOIN_NAME = "CONFERENCE_WILL_JOIN";
+        private static final String CONFERENCE_JOINED_NAME = "CONFERENCE_JOINED";
+        private static final String CONFERENCE_TERMINATED_NAME = "CONFERENCE_TERMINATED";
+        private static final String AUDIO_MUTED_CHANGED_NAME = "AUDIO_MUTED_CHANGED";
+        private static final String PARTICIPANT_JOINED_NAME = "PARTICIPANT_JOINED";
+        private static final String PARTICIPANT_LEFT_NAME = "PARTICIPANT_LEFT";
+        private static final String ENDPOINT_TEXT_MESSAGE_RECEIVED_NAME = "ENDPOINT_TEXT_MESSAGE_RECEIVED";
+        private static final String SCREEN_SHARE_TOGGLED_NAME = "SCREEN_SHARE_TOGGLED";
+        private static final String PARTICIPANTS_INFO_RETRIEVED_NAME = "PARTICIPANTS_INFO_RETRIEVED";
+        private static final String CHAT_MESSAGE_RECEIVED_NAME = "CHAT_MESSAGE_RECEIVED";
+        private static final String CHAT_TOGGLED_NAME = "CHAT_TOGGLED";
+        private static final String VIDEO_MUTED_CHANGED_NAME = "VIDEO_MUTED_CHANGED";
+
+        private final String action;
+
+        Type(String action) {
+            this.action = action;
+        }
+
+        public String getAction() {
+            return action;
+        }
+
+        private static Type buildTypeFromAction(String action) {
+            for (Type type : Type.values()) {
+                if (type.action.equalsIgnoreCase(action)) {
+                    return type;
+                }
+            }
+            return null;
+        }
+
+        private static Type buildTypeFromName(String name) {
+            switch (name) {
+                case CONFERENCE_WILL_JOIN_NAME:
+                    return CONFERENCE_WILL_JOIN;
+                case CONFERENCE_JOINED_NAME:
+                    return CONFERENCE_JOINED;
+                case CONFERENCE_TERMINATED_NAME:
+                    return CONFERENCE_TERMINATED;
+                case AUDIO_MUTED_CHANGED_NAME:
+                    return AUDIO_MUTED_CHANGED;
+                case PARTICIPANT_JOINED_NAME:
+                    return PARTICIPANT_JOINED;
+                case PARTICIPANT_LEFT_NAME:
+                    return PARTICIPANT_LEFT;
+                case ENDPOINT_TEXT_MESSAGE_RECEIVED_NAME:
+                    return ENDPOINT_TEXT_MESSAGE_RECEIVED;
+                case SCREEN_SHARE_TOGGLED_NAME:
+                    return SCREEN_SHARE_TOGGLED;
+                case PARTICIPANTS_INFO_RETRIEVED_NAME:
+                    return PARTICIPANTS_INFO_RETRIEVED;
+                case CHAT_MESSAGE_RECEIVED_NAME:
+                    return CHAT_MESSAGE_RECEIVED;
+                case CHAT_TOGGLED_NAME:
+                    return CHAT_TOGGLED;
+                case VIDEO_MUTED_CHANGED_NAME:
+                    return VIDEO_MUTED_CHANGED;
+            }
+
+            return null;
+        }
+    }
+}

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

@@ -0,0 +1,51 @@
+package org.jitsi.meet.sdk;
+
+import android.content.Intent;
+
+public class BroadcastIntentHelper {
+    public static Intent buildSetAudioMutedIntent(boolean muted) {
+        Intent intent = new Intent(BroadcastAction.Type.SET_AUDIO_MUTED.getAction());
+        intent.putExtra("muted", muted);
+        return intent;
+    }
+
+    public static Intent buildHangUpIntent() {
+        return new Intent(BroadcastAction.Type.HANG_UP.getAction());
+    }
+
+    public static Intent buildSendEndpointTextMessageIntent(String to, String message) {
+        Intent intent = new Intent(BroadcastAction.Type.SEND_ENDPOINT_TEXT_MESSAGE.getAction());
+        intent.putExtra("to", to);
+        intent.putExtra("message", message);
+        return intent;
+    }
+
+    public static Intent buildToggleScreenShareIntent(boolean enabled) {
+        Intent intent = new Intent(BroadcastAction.Type.TOGGLE_SCREEN_SHARE.getAction());
+        intent.putExtra("enabled", enabled);
+        return intent;
+    }
+
+    public static Intent buildOpenChatIntent(String participantId) {
+        Intent intent = new Intent(BroadcastAction.Type.OPEN_CHAT.getAction());
+        intent.putExtra("to", participantId);
+        return intent;
+    }
+
+    public static Intent buildCloseChatIntent() {
+        return new Intent(BroadcastAction.Type.CLOSE_CHAT.getAction());
+    }
+
+    public static Intent buildSendChatMessageIntent(String participantId, String message) {
+        Intent intent = new Intent(BroadcastAction.Type.SEND_CHAT_MESSAGE.getAction());
+        intent.putExtra("to", participantId);
+        intent.putExtra("message", message);
+        return intent;
+    }
+
+    public static Intent buildSetVideoMutedIntent(boolean muted) {
+        Intent intent = new Intent(BroadcastAction.Type.SET_VIDEO_MUTED.getAction());
+        intent.putExtra("muted", muted);
+        return intent;
+    }
+}

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

@@ -0,0 +1,34 @@
+package org.jitsi.meet.sdk;
+
+import android.content.Context;
+import android.content.Intent;
+import android.content.IntentFilter;
+
+import androidx.localbroadcastmanager.content.LocalBroadcastManager;
+
+/**
+ * Listens for {@link BroadcastAction}s on LocalBroadcastManager. When one occurs,
+ * it emits it to JS.
+ */
+public class BroadcastReceiver extends android.content.BroadcastReceiver {
+
+    public BroadcastReceiver(Context context) {
+        LocalBroadcastManager localBroadcastManager = LocalBroadcastManager.getInstance(context);
+
+        IntentFilter intentFilter = new IntentFilter();
+
+        for (BroadcastAction.Type type : BroadcastAction.Type.values()) {
+            intentFilter.addAction(type.getAction());
+        }
+
+        localBroadcastManager.registerReceiver(this, intentFilter);
+    }
+
+    @Override
+    public void onReceive(Context context, Intent intent) {
+        BroadcastAction action = new BroadcastAction(intent);
+        String actionName = action.getType().getAction();
+
+        ReactInstanceManagerHolder.emitEvent(actionName, action.getDataAsWritableNativeMap());
+    }
+}

android/sdk/src/main/java/org/jitsi/meet/sdk/ExternalAPIModule.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.
@@ -24,6 +24,9 @@ import com.facebook.react.module.annotations.ReactModule;
 
 import org.jitsi.meet.sdk.log.JitsiMeetLogger;
 
+import java.util.HashMap;
+import java.util.Map;
+
 /**
  * Module implementing an API for sending events from JavaScript to native code.
  */
@@ -35,6 +38,9 @@ class ExternalAPIModule
 
     private static final String TAG = NAME;
 
+    private final BroadcastEmitter broadcastEmitter;
+    private final BroadcastReceiver broadcastReceiver;
+
     /**
      * Initializes a new module instance. There shall be a single instance of
      * this module throughout the lifetime of the app.
@@ -44,6 +50,11 @@ class ExternalAPIModule
      */
     public ExternalAPIModule(ReactApplicationContext reactContext) {
         super(reactContext);
+
+        broadcastEmitter = new BroadcastEmitter(reactContext);
+        broadcastReceiver = new BroadcastReceiver(reactContext);
+
+        ParticipantsService.init(reactContext);
     }
 
     /**
@@ -56,6 +67,29 @@ class ExternalAPIModule
         return NAME;
     }
 
+    /**
+     * Gets a mapping with the constants this module is exporting.
+     *
+     * @return a {@link Map} mapping the constants to be exported with their
+     * values.
+     */
+    @Override
+    public Map<String, Object> getConstants() {
+        Map<String, Object> constants = new HashMap<>();
+
+        constants.put("SET_AUDIO_MUTED", BroadcastAction.Type.SET_AUDIO_MUTED.getAction());
+        constants.put("HANG_UP", BroadcastAction.Type.HANG_UP.getAction());
+        constants.put("SEND_ENDPOINT_TEXT_MESSAGE", BroadcastAction.Type.SEND_ENDPOINT_TEXT_MESSAGE.getAction());
+        constants.put("TOGGLE_SCREEN_SHARE", BroadcastAction.Type.TOGGLE_SCREEN_SHARE.getAction());
+        constants.put("RETRIEVE_PARTICIPANTS_INFO", BroadcastAction.Type.RETRIEVE_PARTICIPANTS_INFO.getAction());
+        constants.put("OPEN_CHAT", BroadcastAction.Type.OPEN_CHAT.getAction());
+        constants.put("CLOSE_CHAT", BroadcastAction.Type.CLOSE_CHAT.getAction());
+        constants.put("SEND_CHAT_MESSAGE", BroadcastAction.Type.SEND_CHAT_MESSAGE.getAction());
+        constants.put("SET_VIDEO_MUTED", BroadcastAction.Type.SET_VIDEO_MUTED.getAction());
+
+        return constants;
+    }
+
     /**
      * Dispatches an event that occurred on the JavaScript side of the SDK to
      * the specified {@link BaseReactView}'s listener.
@@ -79,7 +113,8 @@ class ExternalAPIModule
             JitsiMeetLogger.d(TAG + " Sending event: " + name + " with data: " + data);
             try {
                 view.onExternalAPIEvent(name, data);
-            } catch(Exception e) {
+                broadcastEmitter.sendBroadcast(name, data);
+            } catch (Exception e) {
                 JitsiMeetLogger.e(e, TAG + " onExternalAPIEvent: error sending event");
             }
         }

android/sdk/src/main/java/org/jitsi/meet/sdk/JitsiMeet.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.
@@ -16,12 +15,16 @@
  */
 package org.jitsi.meet.sdk;
 
+import android.app.Activity;
 import android.content.Context;
 import android.content.SharedPreferences;
 import android.os.Bundle;
 
 import com.facebook.react.ReactInstanceManager;
 
+import org.devio.rn.splashscreen.SplashScreen;
+import org.jitsi.meet.sdk.log.JitsiMeetLogger;
+
 public class JitsiMeet {
 
     /**
@@ -81,4 +84,17 @@ public class JitsiMeet {
         String value = preferences.getString("isCrashReportingDisabled", "");
         return Boolean.parseBoolean(value);
     }
+
+    /**
+     * Helper method to show the SplashScreen.
+     *
+     * @param activity - The activity on which to show the SplashScreen {@link Activity}.
+     */
+    public static void showSplashScreen(Activity activity) {
+        try {
+            SplashScreen.show(activity);
+        } catch (Exception e) {
+            JitsiMeetLogger.e(e, "Failed to show splash screen");
+        }
+    }
 }

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

@@ -16,33 +16,42 @@
 
 package org.jitsi.meet.sdk;
 
+import android.content.BroadcastReceiver;
 import android.content.Context;
 import android.content.Intent;
+import android.content.IntentFilter;
 import android.net.Uri;
 import android.os.Bundle;
 
 import androidx.annotation.Nullable;
 import androidx.fragment.app.FragmentActivity;
+import androidx.localbroadcastmanager.content.LocalBroadcastManager;
 
 import com.facebook.react.modules.core.PermissionListener;
 
 import org.jitsi.meet.sdk.log.JitsiMeetLogger;
 
-import java.util.Map;
-
+import java.util.HashMap;
+import android.app.Activity;
 
 /**
  * A base activity for SDK users to embed. It uses {@link JitsiMeetFragment} to do the heavy
  * lifting and wires the remaining Activity lifecycle methods so it works out of the box.
  */
 public class JitsiMeetActivity extends FragmentActivity
-        implements JitsiMeetActivityInterface, JitsiMeetViewListener {
+    implements JitsiMeetActivityInterface {
 
     protected static final String TAG = JitsiMeetActivity.class.getSimpleName();
 
     private static final String ACTION_JITSI_MEET_CONFERENCE = "org.jitsi.meet.CONFERENCE";
     private static final String JITSI_MEET_CONFERENCE_OPTIONS = "JitsiMeetConferenceOptions";
 
+    private final BroadcastReceiver broadcastReceiver = new BroadcastReceiver() {
+        @Override
+        public void onReceive(Context context, Intent intent) {
+            onBroadcastReceived(intent);
+        }
+    };
     // Helpers for starting the activity
     //
 
@@ -50,6 +59,9 @@ public class JitsiMeetActivity extends FragmentActivity
         Intent intent = new Intent(context, JitsiMeetActivity.class);
         intent.setAction(ACTION_JITSI_MEET_CONFERENCE);
         intent.putExtra(JITSI_MEET_CONFERENCE_OPTIONS, options);
+        if (!(context instanceof Activity)) {
+            intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
+        }
         context.startActivity(intent);
     }
 
@@ -68,8 +80,7 @@ public class JitsiMeetActivity extends FragmentActivity
 
         setContentView(R.layout.activity_jitsi_meet);
 
-        // Listen for conference events.
-        getJitsiView().setListener(this);
+        registerForBroadcastMessages();
 
         if (!extraInitialize()) {
             initialize();
@@ -91,6 +102,8 @@ public class JitsiMeetActivity extends FragmentActivity
         }
         JitsiMeetOngoingConferenceService.abort(this);
 
+        LocalBroadcastManager.getInstance(this).unregisterReceiver(broadcastReceiver);
+
         super.onDestroy();
     }
 
@@ -107,26 +120,39 @@ public class JitsiMeetActivity extends FragmentActivity
     protected JitsiMeetView getJitsiView() {
         JitsiMeetFragment fragment
             = (JitsiMeetFragment) getSupportFragmentManager().findFragmentById(R.id.jitsiFragment);
-        return fragment.getJitsiView();
+        return fragment != null ? fragment.getJitsiView() : null;
     }
 
     public void join(@Nullable String url) {
         JitsiMeetConferenceOptions options
             = new JitsiMeetConferenceOptions.Builder()
-                .setRoom(url)
-                .build();
+            .setRoom(url)
+            .build();
         join(options);
     }
 
     public void join(JitsiMeetConferenceOptions options) {
-        getJitsiView().join(options);
+        JitsiMeetView view = getJitsiView();
+
+        if (view != null) {
+            view.join(options);
+        } else {
+            JitsiMeetLogger.w("Cannot join, view is null");
+        }
     }
 
     public void leave() {
-        getJitsiView().leave();
+        JitsiMeetView view = getJitsiView();
+
+        if (view != null) {
+            view.leave();
+        } else {
+            JitsiMeetLogger.w("Cannot leave, view is null");
+        }
     }
 
-    private @Nullable JitsiMeetConferenceOptions getConferenceOptions(Intent intent) {
+    private @Nullable
+    JitsiMeetConferenceOptions getConferenceOptions(Intent intent) {
         String action = intent.getAction();
 
         if (Intent.ACTION_VIEW.equals(action)) {
@@ -145,7 +171,7 @@ public class JitsiMeetActivity extends FragmentActivity
      * Helper function called during activity initialization. If {@code true} is returned, the
      * initialization is delayed and the {@link JitsiMeetActivity#initialize()} method is not
      * called. In this case, it's up to the subclass to call the initialize method when ready.
-     *
+     * <p>
      * This is mainly required so we do some extra initialization in the Jitsi Meet app.
      *
      * @return {@code true} if the initialization will be delayed, {@code false} otherwise.
@@ -160,6 +186,37 @@ public class JitsiMeetActivity extends FragmentActivity
         join(getConferenceOptions(getIntent()));
     }
 
+    protected void onConferenceJoined(HashMap<String, Object> extraData) {
+        JitsiMeetLogger.i("Conference joined: " + extraData);
+        // Launch the service for the ongoing notification.
+        JitsiMeetOngoingConferenceService.launch(this);
+    }
+
+    protected void onConferenceTerminated(HashMap<String, Object> extraData) {
+        JitsiMeetLogger.i("Conference terminated: " + extraData);
+        finish();
+    }
+
+    protected void onConferenceWillJoin(HashMap<String, Object> extraData) {
+        JitsiMeetLogger.i("Conference will join: " + extraData);
+    }
+
+    protected void onParticipantJoined(HashMap<String, Object> extraData) {
+        try {
+            JitsiMeetLogger.i("Participant joined: ", extraData);
+        } catch (Exception e) {
+            JitsiMeetLogger.w("Invalid participant joined extraData", e);
+        }
+    }
+
+    protected void onParticipantLeft(HashMap<String, Object> extraData) {
+        try {
+            JitsiMeetLogger.i("Participant left: ", extraData);
+        } catch (Exception e) {
+            JitsiMeetLogger.w("Invalid participant left extraData", e);
+        }
+    }
+
     // Activity lifecycle methods
     //
 
@@ -191,7 +248,11 @@ public class JitsiMeetActivity extends FragmentActivity
 
     @Override
     protected void onUserLeaveHint() {
-        getJitsiView().enterPictureInPicture();
+        JitsiMeetView view = getJitsiView();
+
+        if (view != null) {
+            view.enterPictureInPicture();
+        }
     }
 
     // JitsiMeetActivityInterface
@@ -207,24 +268,37 @@ public class JitsiMeetActivity extends FragmentActivity
         JitsiMeetActivityDelegate.onRequestPermissionsResult(requestCode, permissions, grantResults);
     }
 
-    // JitsiMeetViewListener
-    //
+    private void registerForBroadcastMessages() {
+        IntentFilter intentFilter = new IntentFilter();
 
-    @Override
-    public void onConferenceJoined(Map<String, Object> data) {
-        JitsiMeetLogger.i("Conference joined: " + data);
-        // Launch the service for the ongoing notification.
-        JitsiMeetOngoingConferenceService.launch(this);
+        for (BroadcastEvent.Type type : BroadcastEvent.Type.values()) {
+            intentFilter.addAction(type.getAction());
+        }
+
+        LocalBroadcastManager.getInstance(this).registerReceiver(broadcastReceiver, intentFilter);
     }
 
-    @Override
-    public void onConferenceTerminated(Map<String, Object> data) {
-        JitsiMeetLogger.i("Conference terminated: " + data);
-        finish();
-    }
+    private void onBroadcastReceived(Intent intent) {
+        if (intent != null) {
+            BroadcastEvent event = new BroadcastEvent(intent);
 
-    @Override
-    public void onConferenceWillJoin(Map<String, Object> data) {
-        JitsiMeetLogger.i("Conference will join: " + data);
+            switch (event.getType()) {
+                case CONFERENCE_JOINED:
+                    onConferenceJoined(event.getData());
+                    break;
+                case CONFERENCE_WILL_JOIN:
+                    onConferenceWillJoin(event.getData());
+                    break;
+                case CONFERENCE_TERMINATED:
+                    onConferenceTerminated(event.getData());
+                    break;
+                case PARTICIPANT_JOINED:
+                    onParticipantJoined(event.getData());
+                    break;
+                case PARTICIPANT_LEFT:
+                    onParticipantLeft(event.getData());
+                    break;
+            }
+        }
     }
 }

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

@@ -1,6 +1,5 @@
 /*
- * Copyright @ 2019-present 8x8, Inc.
- * Copyright @ 2018 Atlassian Pty Ltd
+ * Copyright @ 2018-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.
@@ -17,16 +16,16 @@
 
 package org.jitsi.meet.sdk;
 
-import android.annotation.TargetApi;
 import android.app.Activity;
 import android.content.Intent;
-import android.os.Build;
 
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.bridge.Callback;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.modules.core.PermissionListener;
 
+import org.jitsi.meet.sdk.log.JitsiMeetLogger;
+
 /**
  * Helper class to encapsulate the work which needs to be done on
  * {@link Activity} lifecycle methods in order for the React side to be aware of
@@ -178,9 +177,18 @@ public class JitsiMeetActivityDelegate {
         };
     }
 
-    @TargetApi(Build.VERSION_CODES.M)
     public static void requestPermissions(Activity activity, String[] permissions, int requestCode, PermissionListener listener) {
         permissionListener = listener;
-        activity.requestPermissions(permissions, requestCode);
+
+        // The RN Permissions module calls this in a non-UI thread. What we observe is a crash in ViewGroup.dispatchCancelPendingInputEvents,
+        // which is called on the calling (ie, non-UI) thread. This doesn't look very safe, so try to avoid a crash by pretending the permission
+        // was denied.
+
+        try {
+            activity.requestPermissions(permissions, requestCode);
+        } catch (Exception e) {
+            JitsiMeetLogger.e(e, "Error requesting permissions");
+            onRequestPermissionsResult(requestCode, permissions, new int[0]);
+        }
     }
 }

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

@@ -21,11 +21,13 @@ import android.app.Service;
 import android.content.ComponentName;
 import android.content.Context;
 import android.content.Intent;
+import android.content.IntentFilter;
 import android.os.Build;
 import android.os.IBinder;
 
-import org.jitsi.meet.sdk.log.JitsiMeetLogger;
+import androidx.localbroadcastmanager.content.LocalBroadcastManager;
 
+import org.jitsi.meet.sdk.log.JitsiMeetLogger;
 
 /**
  * This class implements an Android {@link Service}, a foreground one specifically, and it's
@@ -35,19 +37,18 @@ import org.jitsi.meet.sdk.log.JitsiMeetLogger;
  * See: https://developer.android.com/guide/components/services
  */
 public class JitsiMeetOngoingConferenceService extends Service
-        implements OngoingConferenceTracker.OngoingConferenceListener {
+    implements OngoingConferenceTracker.OngoingConferenceListener {
     private static final String TAG = JitsiMeetOngoingConferenceService.class.getSimpleName();
 
-    static final class Actions {
-        static final String START = TAG + ":START";
-        static final String HANGUP = TAG + ":HANGUP";
-    }
+    private final BroadcastReceiver broadcastReceiver = new BroadcastReceiver();
+
+    private boolean isAudioMuted;
 
     static void launch(Context context) {
         OngoingNotification.createOngoingConferenceNotificationChannel();
 
         Intent intent = new Intent(context, JitsiMeetOngoingConferenceService.class);
-        intent.setAction(Actions.START);
+        intent.setAction(Action.START.getName());
 
         ComponentName componentName;
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
@@ -70,11 +71,16 @@ public class JitsiMeetOngoingConferenceService extends Service
         super.onCreate();
 
         OngoingConferenceTracker.getInstance().addListener(this);
+
+        IntentFilter intentFilter = new IntentFilter();
+        intentFilter.addAction(BroadcastEvent.Type.AUDIO_MUTED_CHANGED.getAction());
+        LocalBroadcastManager.getInstance(getApplicationContext()).registerReceiver(broadcastReceiver, intentFilter);
     }
 
     @Override
     public void onDestroy() {
         OngoingConferenceTracker.getInstance().removeListener(this);
+        LocalBroadcastManager.getInstance(getApplicationContext()).unregisterReceiver(broadcastReceiver);
 
         super.onDestroy();
     }
@@ -86,26 +92,37 @@ public class JitsiMeetOngoingConferenceService extends Service
 
     @Override
     public int onStartCommand(Intent intent, int flags, int startId) {
-        final String action = intent.getAction();
-        if (Actions.START.equals(action)) {
-            Notification notification = OngoingNotification.buildOngoingConferenceNotification();
-            if (notification == null) {
+        final String actionName = intent.getAction();
+        final Action action = Action.fromName(actionName);
+
+        switch (action) {
+            case UNMUTE:
+            case MUTE:
+                Intent muteBroadcastIntent = BroadcastIntentHelper.buildSetAudioMutedIntent(action == Action.MUTE);
+                LocalBroadcastManager.getInstance(getApplicationContext()).sendBroadcast(muteBroadcastIntent);
+                break;
+            case START:
+                Notification notification = OngoingNotification.buildOngoingConferenceNotification(isAudioMuted);
+                if (notification == null) {
+                    stopSelf();
+                    JitsiMeetLogger.w(TAG + " Couldn't start service, notification is null");
+                } else {
+                    startForeground(OngoingNotification.NOTIFICATION_ID, notification);
+                    JitsiMeetLogger.i(TAG + " Service started");
+                }
+                break;
+            case HANGUP:
+                JitsiMeetLogger.i(TAG + " Hangup requested");
+
+                Intent hangupBroadcastIntent = BroadcastIntentHelper.buildHangUpIntent();
+                LocalBroadcastManager.getInstance(getApplicationContext()).sendBroadcast(hangupBroadcastIntent);
+
                 stopSelf();
-                JitsiMeetLogger.w(TAG + " Couldn't start service, notification is null");
-            } else {
-                startForeground(OngoingNotification.NOTIFICATION_ID, notification);
-                JitsiMeetLogger.i(TAG + " Service started");
-            }
-        } else if (Actions.HANGUP.equals(action)) {
-            JitsiMeetLogger.i(TAG + " Hangup requested");
-            // Abort all ongoing calls
-            if (AudioModeModule.useConnectionService()) {
-                ConnectionService.abortConnections();
-            }
-            stopSelf();
-        } else {
-            JitsiMeetLogger.w(TAG + " Unknown action received: " + action);
-            stopSelf();
+                break;
+            default:
+                JitsiMeetLogger.w(TAG + " Unknown action received: " + action);
+                stopSelf();
+                break;
         }
 
         return START_NOT_STICKY;
@@ -115,7 +132,50 @@ public class JitsiMeetOngoingConferenceService extends Service
     public void onCurrentConferenceChanged(String conferenceUrl) {
         if (conferenceUrl == null) {
             stopSelf();
+            OngoingNotification.resetStartingtime();
             JitsiMeetLogger.i(TAG + "Service stopped");
         }
     }
+
+    public enum Action {
+        START(TAG + ":START"),
+        HANGUP(TAG + ":HANGUP"),
+        MUTE(TAG + ":MUTE"),
+        UNMUTE(TAG + ":UNMUTE");
+
+        private final String name;
+
+        Action(String name) {
+            this.name = name;
+        }
+
+        public static Action fromName(String name) {
+            for (Action action : Action.values()) {
+                if (action.name.equalsIgnoreCase(name)) {
+                    return action;
+                }
+            }
+            return null;
+        }
+
+        public String getName() {
+            return name;
+        }
+    }
+
+    private class BroadcastReceiver extends android.content.BroadcastReceiver {
+
+        @Override
+        public void onReceive(Context context, Intent intent) {
+            isAudioMuted = Boolean.parseBoolean(intent.getStringExtra("muted"));
+            Notification notification = OngoingNotification.buildOngoingConferenceNotification(isAudioMuted);
+            if (notification == null) {
+                stopSelf();
+                JitsiMeetLogger.w(TAG + " Couldn't start service, notification is null");
+            } else {
+                startForeground(OngoingNotification.NOTIFICATION_ID, notification);
+                JitsiMeetLogger.i(TAG + " Service started");
+            }
+        }
+    }
 }

android/sdk/src/main/java/org/jitsi/meet/sdk/JitsiMeetView.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.
@@ -126,7 +125,7 @@ public class JitsiMeetView extends BaseReactView<JitsiMeetViewListener>
             = ReactInstanceManagerHolder.getNativeModule(
                 PictureInPictureModule.class);
         if (pipModule != null
-                && PictureInPictureModule.isPictureInPictureSupported()
+                && pipModule.isPictureInPictureSupported()
                 && !JitsiMeetActivityDelegate.arePermissionsBeingRequested()
                 && this.url != null) {
             try {
@@ -198,6 +197,7 @@ public class JitsiMeetView extends BaseReactView<JitsiMeetViewListener>
      * by/associated with the specified {@code name}.
      */
     @Override
+    @Deprecated
     protected void onExternalAPIEvent(String name, ReadableMap data) {
         onExternalAPIEvent(LISTENER_METHODS, name, data);
     }

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

@@ -21,6 +21,7 @@ import java.util.Map;
 /**
  * Interface for listening to events coming from Jitsi Meet.
  */
+@Deprecated
 public interface JitsiMeetViewListener {
     /**
      * Called when a conference was joined.

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

@@ -32,6 +32,7 @@ import java.util.regex.Pattern;
  * Utility methods for helping with transforming {@link ExternalAPIModule}
  * events into listener methods. Used with descendants of {@link BaseReactView}.
  */
+@Deprecated
 public final class ListenerUtils {
     /**
      * Extracts the methods defined in a listener and creates a mapping of this

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

@@ -47,7 +47,7 @@ class LocaleDetector extends ReactContextBaseJavaModule {
     public Map<String, Object> getConstants() {
         Context context = getReactApplicationContext();
         HashMap<String,Object> constants = new HashMap<>();
-        constants.put("locale", context.getResources().getConfiguration().locale.toString());
+        constants.put("locale", context.getResources().getConfiguration().locale.toLanguageTag());
         return constants;
     }
 
@@ -55,4 +55,4 @@ class LocaleDetector extends ReactContextBaseJavaModule {
     public String getName() {
         return "LocaleDetector";
     }
-}
+}

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

@@ -23,13 +23,14 @@ import android.app.PendingIntent;
 import android.content.Context;
 import android.content.Intent;
 import android.os.Build;
+
+import androidx.annotation.StringRes;
 import androidx.core.app.NotificationCompat;
 
 import org.jitsi.meet.sdk.log.JitsiMeetLogger;
 
 import java.util.Random;
 
-
 /**
  * Helper class for creating the ongoing notification which is used with
  * {@link JitsiMeetOngoingConferenceService}. It allows the user to easily get back to the app
@@ -42,7 +43,7 @@ class OngoingNotification {
     private static final String CHANNEL_NAME = "Ongoing Conference Notifications";
 
     static final int NOTIFICATION_ID = new Random().nextInt(99999) + 10000;
-
+    private static long startingTime = 0;
 
     static void createOngoingConferenceNotificationChannel() {
         if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {
@@ -56,7 +57,7 @@ class OngoingNotification {
         }
 
         NotificationManager notificationManager
-            = (NotificationManager)context.getSystemService(Context.NOTIFICATION_SERVICE);
+            = (NotificationManager) context.getSystemService(Context.NOTIFICATION_SERVICE);
 
         NotificationChannel channel
             = notificationManager.getNotificationChannel(CHANNEL_ID);
@@ -73,7 +74,7 @@ class OngoingNotification {
         notificationManager.createNotificationChannel(channel);
     }
 
-    static Notification buildOngoingConferenceNotification() {
+    static Notification buildOngoingConferenceNotification(boolean isMuted) {
         Context context = ReactInstanceManagerHolder.getCurrentActivity();
         if (context == null) {
             JitsiMeetLogger.w(TAG + " Cannot create notification: no current context");
@@ -83,11 +84,10 @@ class OngoingNotification {
         Intent notificationIntent = new Intent(context, context.getClass());
         PendingIntent pendingIntent = PendingIntent.getActivity(context, 0, notificationIntent, 0);
 
-        NotificationCompat.Builder builder;
-        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
-            builder = new NotificationCompat.Builder(context, CHANNEL_ID);
-        } else {
-            builder = new NotificationCompat.Builder(context);
+        NotificationCompat.Builder builder = new NotificationCompat.Builder(context, CHANNEL_ID);
+
+        if (startingTime == 0) {
+            startingTime = System.currentTimeMillis();
         }
 
         builder
@@ -97,23 +97,36 @@ class OngoingNotification {
             .setPriority(NotificationCompat.PRIORITY_DEFAULT)
             .setContentIntent(pendingIntent)
             .setOngoing(true)
+            .setWhen(startingTime)
+            .setUsesChronometer(true)
             .setAutoCancel(false)
             .setVisibility(NotificationCompat.VISIBILITY_PUBLIC)
-            .setUsesChronometer(true)
             .setOnlyAlertOnce(true)
             .setSmallIcon(context.getResources().getIdentifier("ic_notification", "drawable", context.getPackageName()));
 
-        // Add a "hang-up" action only if we are using ConnectionService.
-        if (AudioModeModule.useConnectionService()) {
-            Intent hangupIntent = new Intent(context, JitsiMeetOngoingConferenceService.class);
-            hangupIntent.setAction(JitsiMeetOngoingConferenceService.Actions.HANGUP);
-            PendingIntent hangupPendingIntent
-                = PendingIntent.getService(context, 0, hangupIntent, PendingIntent.FLAG_UPDATE_CURRENT);
-            NotificationCompat.Action hangupAction = new NotificationCompat.Action(0, "Hang up", hangupPendingIntent);
+        NotificationCompat.Action hangupAction = createAction(context, JitsiMeetOngoingConferenceService.Action.HANGUP, R.string.ongoing_notification_action_hang_up);
 
-            builder.addAction(hangupAction);
-        }
+        JitsiMeetOngoingConferenceService.Action toggleAudioAction = isMuted
+            ? JitsiMeetOngoingConferenceService.Action.UNMUTE : JitsiMeetOngoingConferenceService.Action.MUTE;
+        int toggleAudioTitle = isMuted ? R.string.ongoing_notification_action_unmute : R.string.ongoing_notification_action_mute;
+        NotificationCompat.Action audioAction = createAction(context, toggleAudioAction, toggleAudioTitle);
+
+        builder.addAction(hangupAction);
+        builder.addAction(audioAction);
 
         return builder.build();
     }
+
+    static void resetStartingtime() {
+        startingTime = 0;
+    }
+
+    private static NotificationCompat.Action createAction(Context context, JitsiMeetOngoingConferenceService.Action action, @StringRes int titleId) {
+        Intent intent = new Intent(context, JitsiMeetOngoingConferenceService.class);
+        intent.setAction(action.getName());
+        PendingIntent pendingIntent
+            = PendingIntent.getService(context, 0, intent, PendingIntent.FLAG_UPDATE_CURRENT);
+        String title = context.getString(titleId);
+        return new NotificationCompat.Action(0, title, pendingIntent);
+    }
 }

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

@@ -0,0 +1,27 @@
+package org.jitsi.meet.sdk;
+
+import com.google.gson.annotations.SerializedName;
+
+public class ParticipantInfo {
+
+    @SerializedName("participantId")
+    public String id;
+
+    @SerializedName("displayName")
+    public String displayName;
+
+    @SerializedName("avatarUrl")
+    public String avatarUrl;
+
+    @SerializedName("email")
+    public String email;
+
+    @SerializedName("name")
+    public String name;
+
+    @SerializedName("isLocal")
+    public boolean isLocal;
+
+    @SerializedName("role")
+    public String role;
+}

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

@@ -0,0 +1,90 @@
+package org.jitsi.meet.sdk;
+
+import android.content.Context;
+import android.content.Intent;
+import android.content.IntentFilter;
+
+import androidx.localbroadcastmanager.content.LocalBroadcastManager;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.google.gson.Gson;
+import com.google.gson.reflect.TypeToken;
+
+import org.jitsi.meet.sdk.log.JitsiMeetLogger;
+
+import java.lang.ref.WeakReference;
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.UUID;
+
+import javax.annotation.Nullable;
+
+public class ParticipantsService extends android.content.BroadcastReceiver {
+
+    private static final String TAG = ParticipantsService.class.getSimpleName();
+    private static final String REQUEST_ID = "requestId";
+
+    private final Map<String, WeakReference<ParticipantsInfoCallback>> participantsInfoCallbackMap = new HashMap<>();
+
+    private static ParticipantsService instance;
+
+    @Nullable
+    public static ParticipantsService getInstance() {
+        return instance;
+    }
+
+    private ParticipantsService(Context context) {
+        LocalBroadcastManager localBroadcastManager = LocalBroadcastManager.getInstance(context);
+
+        IntentFilter intentFilter = new IntentFilter();
+        intentFilter.addAction(BroadcastEvent.Type.PARTICIPANTS_INFO_RETRIEVED.getAction());
+        localBroadcastManager.registerReceiver(this, intentFilter);
+    }
+
+    static void init(Context context) {
+        instance = new ParticipantsService(context);
+    }
+
+    public void retrieveParticipantsInfo(ParticipantsInfoCallback participantsInfoCallback) {
+        String callbackKey = UUID.randomUUID().toString();
+        this.participantsInfoCallbackMap.put(callbackKey, new WeakReference<>(participantsInfoCallback));
+
+        String actionName = BroadcastAction.Type.RETRIEVE_PARTICIPANTS_INFO.getAction();
+        WritableMap data = Arguments.createMap();
+        data.putString(REQUEST_ID, callbackKey);
+        ReactInstanceManagerHolder.emitEvent(actionName, data);
+    }
+
+    @Override
+    public void onReceive(Context context, Intent intent) {
+        BroadcastEvent event = new BroadcastEvent(intent);
+
+        switch (event.getType()) {
+            case PARTICIPANTS_INFO_RETRIEVED:
+                try {
+                    List<ParticipantInfo> participantInfoList = new Gson().fromJson(
+                        event.getData().get("participantsInfo").toString(),
+                        new TypeToken<ArrayList<ParticipantInfo>>() {
+                        }.getType());
+
+                    ParticipantsInfoCallback participantsInfoCallback = this.participantsInfoCallbackMap.get(event.getData().get(REQUEST_ID).toString()).get();
+
+                    if (participantsInfoCallback != null) {
+                        participantsInfoCallback.onReceived(participantInfoList);
+                        this.participantsInfoCallbackMap.remove(participantsInfoCallback);
+                    }
+                } catch (Exception e) {
+                    JitsiMeetLogger.w(TAG + "error parsing participantsList", e);
+                }
+
+                break;
+        }
+    }
+
+    public interface ParticipantsInfoCallback {
+        void onReceived(List<ParticipantInfo> participantInfoList);
+    }
+}

android/sdk/src/main/java/org/jitsi/meet/sdk/PictureInPictureModule.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.
@@ -18,6 +18,7 @@ package org.jitsi.meet.sdk;
 
 import android.annotation.TargetApi;
 import android.app.Activity;
+import android.app.ActivityManager;
 import android.app.PictureInPictureParams;
 import android.os.Build;
 import android.util.Rational;
@@ -30,20 +31,42 @@ import com.facebook.react.module.annotations.ReactModule;
 
 import org.jitsi.meet.sdk.log.JitsiMeetLogger;
 
+import java.util.HashMap;
+import java.util.Map;
+
+import static android.content.Context.ACTIVITY_SERVICE;
+
 @ReactModule(name = PictureInPictureModule.NAME)
-class PictureInPictureModule
-    extends ReactContextBaseJavaModule {
+class PictureInPictureModule extends ReactContextBaseJavaModule {
 
     public static final String NAME = "PictureInPicture";
-
     private static final String TAG = NAME;
 
-    static boolean isPictureInPictureSupported() {
-        return Build.VERSION.SDK_INT >= Build.VERSION_CODES.O;
-    }
+    private static boolean isSupported;
+    private boolean isDisabled;
 
     public PictureInPictureModule(ReactApplicationContext reactContext) {
         super(reactContext);
+
+        ActivityManager am = (ActivityManager) reactContext.getSystemService(ACTIVITY_SERVICE);
+
+        // Android Go devices don't support PiP. There doesn't seem to be a better way to detect it than
+        // to use ActivityManager.isLowRamDevice().
+        // https://stackoverflow.com/questions/58340558/how-to-detect-android-go
+        isSupported = Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && !am.isLowRamDevice();
+    }
+
+    /**
+     * Gets a {@code Map} of constants this module exports to JS. Supports JSON
+     * types.
+     *
+     * @return a {@link Map} of constants this module exports to JS
+     */
+    @Override
+    public Map<String, Object> getConstants() {
+        Map<String, Object> constants = new HashMap<>();
+        constants.put("SUPPORTED", isSupported);
+        return constants;
     }
 
     /**
@@ -61,7 +84,11 @@ class PictureInPictureModule
      */
     @TargetApi(Build.VERSION_CODES.O)
     public void enterPictureInPicture() {
-        if (!isPictureInPictureSupported()) {
+        if (isDisabled) {
+            return;
+        }
+
+        if (!isSupported) {
             throw new IllegalStateException("Picture-in-Picture not supported");
         }
 
@@ -104,6 +131,15 @@ class PictureInPictureModule
         }
     }
 
+    @ReactMethod
+    public void setPictureInPictureDisabled(Boolean disabled) {
+        this.isDisabled = disabled;
+    }
+
+    public boolean isPictureInPictureSupported() {
+        return isSupported;
+    }
+
     @Override
     public String getName() {
         return NAME;

android/sdk/src/main/java/org/jitsi/meet/sdk/ProximityModule.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,21 +33,10 @@ import com.facebook.react.module.annotations.ReactModule;
  * is used with the conference audio-only mode.
  */
 @ReactModule(name = ProximityModule.NAME)
-class ProximityModule
-    extends ReactContextBaseJavaModule {
+class ProximityModule extends ReactContextBaseJavaModule {
 
     public static final String NAME = "Proximity";
 
-    /**
-     * This type of wake lock (the one activated by the proximity sensor) has
-     * been available for a while, but the constant was only exported in API
-     * level 21 (Android Marshmallow) so make no assumptions and use its value
-     * directly.
-     *
-     * TODO: Remove when we bump the API level to 21.
-     */
-    private static final int PROXIMITY_SCREEN_OFF_WAKE_LOCK = 32;
-
     /**
      * {@link WakeLock} instance.
      */
@@ -71,7 +60,7 @@ class ProximityModule
         try {
             wakeLock
                 = powerManager.newWakeLock(
-                        PROXIMITY_SCREEN_OFF_WAKE_LOCK,
+                        PowerManager.PROXIMITY_SCREEN_OFF_WAKE_LOCK,
                         "jitsi:"+NAME);
         } catch (Throwable ignored) {
             wakeLock = null;

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

@@ -20,21 +20,21 @@ 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;
-import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContext;
 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.devio.rn.splashscreen.SplashScreenModule;
 import org.webrtc.SoftwareVideoDecoderFactory;
 import org.webrtc.SoftwareVideoEncoderFactory;
 import org.webrtc.audio.AudioDeviceModule;
@@ -68,6 +68,7 @@ class ReactInstanceManagerHolder {
                 new JavaScriptSandboxModule(reactContext),
                 new LocaleDetector(reactContext),
                 new LogBridgeModule(reactContext),
+                new SplashScreenModule(reactContext),
                 new PictureInPictureModule(reactContext),
                 new ProximityModule(reactContext),
                 new WiFiStatsModule(reactContext),
@@ -90,14 +91,6 @@ class ReactInstanceManagerHolder {
 
         nativeModules.add(new WebRTCModule(reactContext, options));
 
-        try {
-            Class<?> amplitudeModuleClass = Class.forName("org.jitsi.meet.sdk.AmplitudeModule");
-            Constructor constructor = amplitudeModuleClass.getConstructor(ReactApplicationContext.class);
-            nativeModules.add((NativeModule)constructor.newInstance(reactContext));
-        } catch (Exception e) {
-            // Ignore any error, the module is not compiled when LIBRE_BUILD is enabled.
-        }
-
         return nativeModules;
     }
 
@@ -185,18 +178,20 @@ class ReactInstanceManagerHolder {
 
         List<ReactPackage> packages
             = new ArrayList<>(Arrays.asList(
-                new com.BV.LinearGradient.LinearGradientPackage(),
                 new com.calendarevents.CalendarEventsPackage(),
                 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.learnium.RNDeviceInfo.RNDeviceInfo(),
                 new com.ocetnik.timer.BackgroundTimerPackage(),
                 new com.reactnativecommunity.asyncstorage.AsyncStoragePackage(),
                 new com.reactnativecommunity.netinfo.NetInfoPackage(),
+                new com.reactnativecommunity.slider.ReactSliderPackage(),
                 new com.reactnativecommunity.webview.RNCWebViewPackage(),
                 new com.rnimmersive.RNImmersivePackage(),
                 new com.zmxv.RNSound.RNSoundPackage(),
+                new com.brentvatne.react.ReactVideoPackage(),
                 new ReactPackageAdapter() {
                     @Override
                     public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
@@ -216,8 +211,9 @@ class ReactInstanceManagerHolder {
             // Ignore any error, the module is not compiled when LIBRE_BUILD is enabled.
         }
 
-        // Use the Hermes JavaScript engine.
-        HermesExecutorFactory jsFactory = new HermesExecutorFactory();
+        // Keep on using JSC, the jury is out on Hermes.
+        JSCExecutorFactory jsFactory
+            = new JSCExecutorFactory("", "");
 
         reactInstanceManager
             = ReactInstanceManager.builder()

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

@@ -3,4 +3,7 @@
     <string name="dropbox_app_key"></string>
     <string name="ongoing_notification_title">Ongoing meeting</string>
     <string name="ongoing_notification_text">You are currently in a meeting. Tap to return to it.</string>
+    <string name="ongoing_notification_action_hang_up">Hang up</string>
+    <string name="ongoing_notification_action_mute">Mute</string>
+    <string name="ongoing_notification_action_unmute">Unmute</string>
 </resources>

android/settings.gradle

@@ -1,29 +1,35 @@
 rootProject.name = 'jitsi-meet'
 
 include ':app', ':sdk'
+include ':react-native-async-storage'
+project(':react-native-async-storage').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-async-storage/async-storage/android')
 include ':react-native-background-timer'
 project(':react-native-background-timer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-background-timer/android')
 include ':react-native-calendar-events'
 project(':react-native-calendar-events').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-calendar-events/android')
-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-device-info'
+project(':react-native-device-info').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-device-info/android')
 include ':react-native-google-signin'
 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'
 project(':react-native-keep-awake').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keep-awake/android')
-include ':react-native-linear-gradient'
-project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
+include ':react-native-slider'
+project(':react-native-slider').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/slider/android')
 include ':react-native-sound'
 project(':react-native-sound').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sound/android')
+include ':react-native-splash-screen'
+project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
 include ':react-native-svg'
 project(':react-native-svg').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-svg/android')
+include ':react-native-video'
+project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
 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

@@ -1,16 +1,30 @@
 /* application specific logic */
 
 import 'jquery';
-import 'jquery-contextmenu';
-import 'jQuery-Impromptu';
 
+import 'olm';
+
+import 'focus-visible';
+
+// We need to setup the jitsi-local-storage as early as possible so that we can start using it.
+// NOTE: If jitsi-local-storage is used before the initial setup is performed this will break the use case when we use
+// the  local storage from the parent page when the localStorage is disabled. Also the setup is relying that
+// window.location is not changed and still has all URL parameters.
+import './react/features/base/jitsi-local-storage/setup';
 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';
 
+// Initialize Olm as early as possible.
+if (window.Olm) {
+    window.Olm.init().catch(e => {
+        console.error('Failed to initialize Olm, E2EE will be disabled', e);
+        delete window.Olm;
+    });
+}
+
 window.APP = {
     API,
     conference,
@@ -32,7 +46,6 @@ window.APP = {
     },
 
     keyboardshortcut,
-    remoteControl,
     translation,
     UI
 };

babel.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+    presets: [ 'module:metro-react-native-babel-preset' ],
+    env: {
+        production: {
+            plugins: [ 'react-native-paper/babel' ]
+        }
+    },
+    plugins: [ 'optional-require' ]
+};

config.js

@@ -14,12 +14,6 @@ var config = {
         // Domain for authenticated users. Defaults to <domain>.
         // authdomain: 'jitsi-meet.example.com',
 
-        // Jirecon recording component domain.
-        // jirecon: 'jirecon.jitsi-meet.example.com',
-
-        // Call control component (Jigasi).
-        // call_control: 'callcontrol.jitsi-meet.example.com',
-
         // Focus component domain. Defaults to focus.<domain>.
         // focus: 'focus.jitsi-meet.example.com',
 
@@ -37,6 +31,8 @@ var config = {
     clientNode: 'http://jitsi.org/jitsimeet',
 
     // The real JID of focus participant - can be overridden here
+    // Do not change username - FIXME: Make focus username configurable
+    // https://github.com/jitsi/jitsi-meet/issues/7376
     // focusUserJid: 'focus@auth.jitsi-meet.example.com',
 
 
@@ -44,6 +40,10 @@ var config = {
     //
 
     testing: {
+        // Disables the End to End Encryption feature. Useful for debugging
+        // issues related to insertable streams.
+        // disableE2EE: false,
+
         // P2P test mode disables automatic switching to P2P when there are 2
         // participants in the conference.
         p2pTestMode: false
@@ -59,10 +59,20 @@ var config = {
         // 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
+        // the probability for this to be enabled. This setting has been deprecated.
+        // desktopSharingFrameRate.max now determines whether simulcast will be enabled
+        // or disabled for the screenshare.
+        // capScreenshareBitrate: 1 // 0 to disable - deprecated.
+
+        // Enable callstats only for a percentage of users.
+        // This takes a value between 0 and 100 which determines the probability for
+        // the callstats to be enabled.
+        // callStatsThreshold: 5 // enable callstats for 5% of the users.
     },
 
+    // Enables reactions feature.
+    // enableReactions: false,
+
     // Disables ICE/UDP by filtering out local and remote UDP candidates in
     // signalling.
     // webrtcIceUdpDisable: false,
@@ -75,6 +85,9 @@ var config = {
     // Media
     //
 
+    // Enable unified plan implementation support on Chromium based browsers.
+    // enableUnifiedOnChrome: false,
+
     // Audio
 
     // Disable measuring of audio levels.
@@ -86,6 +99,15 @@ var config = {
     // input and will suggest another valid device if one is present.
     enableNoAudioDetection: true,
 
+    // Enabling this will show a "Save Logs" link in the GSM popover that can be
+    // used to collect debug information (XMPP IQs, SDP offer/answer cycles)
+    // about the call.
+    // enableSaveLogs: false,
+
+    // Enabling this will hide the "Show More" link in the GSM popover that can be
+    // used to display more statistics about the connection (IP, Port, protocol, etc).
+    // disableShowMoreStats: 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
@@ -107,11 +129,25 @@ var config = {
     // participants and to enable it back a reload is needed.
     // startSilent: false
 
+    // Enables support for opus-red (redundancy for Opus).
+    // enableOpusRed: false,
+
+    // Specify audio quality stereo and opusMaxAverageBitrate values in order to enable HD audio.
+    // Beware, by doing so, you are disabling echo cancellation, noise suppression and AGC.
+    // audioQuality: {
+    //     stereo: false,
+    //     opusMaxAverageBitrate: null // Value to fit the 6000 to 510000 range.
+    // },
+
     // Video
 
     // Sets the preferred resolution (height) for local video. Defaults to 720.
     // resolution: 720,
 
+    // How many participants while in the tile view mode, before the receiving video quality is reduced from HD to SD.
+    // Use -1 to disable.
+    // maxFullResolutionParticipants: 2,
+
     // 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 independent from
@@ -146,6 +182,7 @@ var config = {
     // Note that it's not recommended to do this because simulcast is not
     // supported when  using H.264. For 1-to-1 calls this setting is enabled by
     // default and can be toggled in the p2p section.
+    // This option has been deprecated, use preferredCodec under videoQuality section instead.
     // preferH264: true,
 
     // If set to true, disable H.264 video codec by stripping it out of the
@@ -201,6 +238,98 @@ var config = {
     // Default value for the channel "last N" attribute. -1 for unlimited.
     channelLastN: -1,
 
+    // Provides a way for the lastN value to be controlled through the UI.
+    // When startLastN is present, conference starts with a last-n value of startLastN and channelLastN
+    // value will be used when the quality level is selected using "Manage Video Quality" slider.
+    // startLastN: 1,
+
+    // Provides a way to use different "last N" values based on the number of participants in the conference.
+    // The keys in an Object represent number of participants and the values are "last N" to be used when number of
+    // participants gets to or above the number.
+    //
+    // For the given example mapping, "last N" will be set to 20 as long as there are at least 5, but less than
+    // 29 participants in the call and it will be lowered to 15 when the 30th participant joins. The 'channelLastN'
+    // will be used as default until the first threshold is reached.
+    //
+    // lastNLimits: {
+    //     5: 20,
+    //     30: 15,
+    //     50: 10,
+    //     70: 5,
+    //     90: 2
+    // },
+
+    // Provides a way to translate the legacy bridge signaling messages, 'LastNChangedEvent',
+    // 'SelectedEndpointsChangedEvent' and 'ReceiverVideoConstraint' into the new 'ReceiverVideoConstraints' message
+    // that invokes the new bandwidth allocation algorithm in the bridge which is described here
+    // - https://github.com/jitsi/jitsi-videobridge/blob/master/doc/allocation.md.
+    // useNewBandwidthAllocationStrategy: false,
+
+    // Specify the settings for video quality optimizations on the client.
+    // videoQuality: {
+    //    // Provides a way to prevent a video codec from being negotiated on the JVB connection. The codec specified
+    //    // here will be removed from the list of codecs present in the SDP answer generated by the client. If the
+    //    // same codec is specified for both the disabled and preferred option, the disable settings will prevail.
+    //    // Note that 'VP8' cannot be disabled since it's a mandatory codec, the setting will be ignored in this case.
+    //    disabledCodec: 'H264',
+    //
+    //    // Provides a way to set a preferred video codec for the JVB connection. If 'H264' is specified here,
+    //    // simulcast will be automatically disabled since JVB doesn't support H264 simulcast yet. This will only
+    //    // rearrange the the preference order of the codecs in the SDP answer generated by the browser only if the
+    //    // preferred codec specified here is present. Please ensure that the JVB offers the specified codec for this
+    //    // to take effect.
+    //    preferredCodec: 'VP8',
+    //
+    //    // Provides a way to enforce the preferred codec for the conference even when the conference has endpoints
+    //    // that do not support the preferred codec. For example, older versions of Safari do not support VP9 yet.
+    //    // This will result in Safari not being able to decode video from endpoints sending VP9 video.
+    //    // When set to false, the conference falls back to VP8 whenever there is an endpoint that doesn't support the
+    //    // preferred codec and goes back to the preferred codec when that endpoint leaves.
+    //    // enforcePreferredCodec: false,
+    //
+    //    // Provides a way to configure the maximum bitrates that will be enforced on the simulcast streams for
+    //    // video tracks. The keys in the object represent the type of the stream (LD, SD or HD) and the values
+    //    // are the max.bitrates to be set on that particular type of stream. The actual send may vary based on
+    //    // the available bandwidth calculated by the browser, but it will be capped by the values specified here.
+    //    // This is currently not implemented on app based clients on mobile.
+    //    maxBitratesVideo: {
+    //          H264: {
+    //              low: 200000,
+    //              standard: 500000,
+    //              high: 1500000
+    //          },
+    //          VP8 : {
+    //              low: 200000,
+    //              standard: 500000,
+    //              high: 1500000
+    //          },
+    //          VP9: {
+    //              low: 100000,
+    //              standard: 300000,
+    //              high:  1200000
+    //          }
+    //    },
+    //
+    //    // The options can be used to override default thresholds of video thumbnail heights corresponding to
+    //    // the video quality levels used in the application. At the time of this writing the allowed levels are:
+    //    //     'low' - for the low quality level (180p at the time of this writing)
+    //    //     'standard' - for the medium quality level (360p)
+    //    //     'high' - for the high quality level (720p)
+    //    // The keys should be positive numbers which represent the minimal thumbnail height for the quality level.
+    //    //
+    //    // With the default config value below the application will use 'low' quality until the thumbnails are
+    //    // at least 360 pixels tall. If the thumbnail height reaches 720 pixels then the application will switch to
+    //    // the high quality.
+    //    minHeightForQualityLvl: {
+    //        360: 'standard',
+    //        720: 'high'
+    //    },
+    //
+    //    // Provides a way to resize the desktop track to 720p (if it is greater than 720p) before creating a canvas
+    //    // for the presenter mode (camera picture-in-picture mode with screenshare).
+    //    resizeDesktopForPresenter: false
+    // },
+
     // // Options for the recording limit notification.
     // recordingLimit: {
     //
@@ -219,18 +348,11 @@ var config = {
     // Disables or enables RTX (RFC 4588) (defaults to false).
     // disableRtx: false,
 
-    // Disables or enables TCC (the default is in Jicofo and set to true)
-    // (draft-holmer-rmcat-transport-wide-cc-extensions-01). This setting
-    // affects congestion control, it practically enables send-side bandwidth
-    // estimations.
+    // Disables or enables TCC support in this client (default: enabled).
     // enableTcc: true,
 
-    // Disables or enables REMB (the default is in Jicofo and set to false)
-    // (draft-alvestrand-rmcat-remb-03). This setting affects congestion
-    // control, it practically enables recv-side bandwidth estimations. When
-    // both TCC and REMB are enabled, TCC takes precedence. When both are
-    // disabled, then bandwidth estimations are disabled.
-    // enableRemb: false,
+    // Disables or enables REMB support in this client (default: enabled).
+    // enableRemb: true,
 
     // 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
@@ -240,29 +362,24 @@ var config = {
     // 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,
-
-    // Use the TURN servers discovered via XEP-0215 for the jitsi-videobridge
-    // connection
-    // useStunTurn: true,
+    // Enables forced reload of the client when the call is migrated as a result of
+    // the bridge going down.
+    // enableForcedReload: true,
 
     // Use TURN/UDP servers for the jitsi-videobridge connection (by default
     // we filter out TURN/UDP because it is usually not needed since the
     // bridge itself is reachable via UDP)
     // useTurnUdp: false
 
-    // Enables / disables a data communication channel with the Videobridge.
-    // Values can be 'datachannel', 'websocket', true (treat it as
-    // 'datachannel'), undefined (treat it as 'datachannel') and false (don't
-    // open any channel).
-    // openBridgeChannel: true,
-
-
     // UI
     //
 
+    // Disables responsive tiles.
+    // disableResponsiveTiles: false,
+
+    // Hides lobby button
+    // hideLobbyButton: false,
+
     // Require users to always specify a display name.
     // requireDisplayName: true,
 
@@ -270,27 +387,31 @@ var config = {
     // will be joined when no room is specified.
     enableWelcomePage: true,
 
+    // Disable app shortcuts that are registered upon joining a conference
+    // disableShortcuts: false,
+
+    // Disable initial browser getUserMedia requests.
+    // This is useful for scenarios where users might want to start a conference for screensharing only
+    // disableInitialGUM: false,
+
     // Enabling the close page will ignore the welcome page redirection when
     // a call is hangup.
     // enableClosePage: false,
 
     // Disable hiding of remote thumbnails when in a 1-on-1 conference call.
-    // disable1On1Mode: false,
+    // Setting this to null, will also disable showing the remote videos
+    // when the toolbar is shown on mouse movements
+    // disable1On1Mode: null | false | true,
 
     // Default language for the user interface.
     // defaultLanguage: 'en',
 
-    // If true all users without a token will be considered guests and all users
-    // with token will be considered non-guests. Only guests will be allowed to
-    // edit their profile.
-    enableUserRolesBasedOnToken: false,
+    // Disables profile and the edit of all fields from the profile settings (display name and email)
+    // disableProfile: false,
 
     // Whether or not some features are checked based on token.
     // enableFeaturesBasedOnToken: false,
 
-    // Enable lock room for all moderators, even when userRolesBasedOnToken is enabled and participants are guests.
-    // lockRoomGuestEnabled: false,
-
     // When enabled the password used for locking a room is restricted to up to the number of digits specified
     // roomPasswordNumberOfDigits: 10,
     // default: roomPasswordNumberOfDigits: false,
@@ -303,14 +424,78 @@ var config = {
     // and microsoftApiApplicationClientID
     // enableCalendarIntegration: false,
 
-    // When 'true', it shows an intermediate page before joining, where the user can  configure its devices.
+    // When 'true', it shows an intermediate page before joining, where the user can configure their devices.
     // prejoinPageEnabled: false,
 
-    // If true, shows the unsafe roon name warning label when a room name is
+    // If etherpad integration is enabled, setting this to true will
+    // automatically open the etherpad when a participant joins.  This
+    // does not affect the mobile app since opening an etherpad
+    // obscures the conference controls -- it's better to let users
+    // choose to open the pad on their own in that case.
+    // openSharedDocumentOnJoin: false,
+
+    // If true, shows the unsafe room name warning label when a room name is
     // deemed unsafe (due to the simplicity in the name) and a password is not
     // set or the lobby is not enabled.
     // enableInsecureRoomNameWarning: false,
 
+    // Whether to automatically copy invitation URL after creating a room.
+    // Document should be focused for this option to work
+    // enableAutomaticUrlCopy: false,
+
+    // Base URL for a Gravatar-compatible service. Defaults to libravatar.
+    // gravatarBaseURL: 'https://seccdn.libravatar.org/avatar/',
+
+    // App name to be displayed in the invitation email subject, as an alternative to
+    // interfaceConfig.APP_NAME.
+    // inviteAppName: null,
+
+    // Moved from interfaceConfig(TOOLBAR_BUTTONS).
+    // The name of the toolbar buttons to display in the toolbar, including the
+    // "More actions" menu. If present, the button will display. Exceptions are
+    // "livestreaming" and "recording" which also require being a moderator and
+    // some other values in config.js to be enabled. Also, the "profile" button will
+    // not display for users with a JWT.
+    // Notes:
+    // - it's impossible to choose which buttons go in the "More actions" menu
+    // - it's impossible to control the placement of buttons
+    // - 'desktop' controls the "Share your screen" button
+    // - if `toolbarButtons` is undefined, we fallback to enabling all buttons on the UI
+    // toolbarButtons: [
+    //    'camera',
+    //    'chat',
+    //    'closedcaptions',
+    //    'desktop',
+    //    'download',
+    //    'embedmeeting',
+    //    'etherpad',
+    //    'feedback',
+    //    'filmstrip',
+    //    'fullscreen',
+    //    'hangup',
+    //    'help',
+    //    'invite',
+    //    'livestreaming',
+    //    'microphone',
+    //    'mute-everyone',
+    //    'mute-video-everyone',
+    //    'participants-pane',
+    //    'profile',
+    //    'raisehand',
+    //    'recording',
+    //    'security',
+    //    'select-background',
+    //    'settings',
+    //    'shareaudio',
+    //    'sharedvideo',
+    //    'shortcuts',
+    //    'stats',
+    //    'tileview',
+    //    'toggle-camera',
+    //    'videoquality',
+    //    '__end'
+    // ],
+
     // Stats
     //
 
@@ -328,12 +513,16 @@ var config = {
     // callStatsID: '',
     // callStatsSecret: '',
 
-    // enables sending participants display name to callstats
+    // Enables sending participants' display names to callstats
     // enableDisplayNameInStats: false,
 
-    // enables sending participants email if available to callstats and other analytics
+    // Enables sending participants' emails (if available) to callstats and other analytics
     // enableEmailInStats: false,
 
+    // Controls the percentage of automatic feedback shown to participants when callstats is enabled.
+    // The default value is 100%. If set to 0, no automatic feedback will be requested
+    // feedbackPercentage: 100,
+
     // Privacy
     //
 
@@ -355,15 +544,8 @@ var config = {
         // connection.
         enabled: true,
 
-        // Use XEP-0215 to fetch STUN and TURN servers.
-        // useStunTurn: true,
-
-        // The STUN servers that will be used in the peer to peer connections
-        stunServers: [
-
-            // { urls: 'stun:jitsi-meet.example.com:4446' },
-            { urls: 'stun:meet-jit-si-turnrelay.jitsi.net:443' }
-        ]
+        // Enable unified plan implementation support on Chromium for p2p connection.
+        // enableUnifiedOnChrome: false,
 
         // Sets the ICE transport policy for the p2p connection. At the time
         // of this writing the list of possible values are 'all' and 'relay',
@@ -374,16 +556,30 @@ var config = {
         // iceTransportPolicy: 'all',
 
         // If set to true, it will prefer to use H.264 for P2P calls (if H.264
-        // is supported).
-        // preferH264: true
+        // is supported). This setting is deprecated, use preferredCodec instead.
+        // preferH264: true,
+
+        // Provides a way to set the video codec preference on the p2p connection. Acceptable
+        // codec values are 'VP8', 'VP9' and 'H264'.
+        // preferredCodec: 'H264',
 
         // If set to true, disable H.264 video codec by stripping it out of the
-        // SDP.
+        // SDP. This setting is deprecated, use disabledCodec instead.
         // disableH264: false,
 
+        // Provides a way to prevent a video codec from being negotiated on the p2p connection.
+        // disabledCodec: '',
+
         // How long we're going to wait, before going back to P2P after the 3rd
         // participant has left the conference (to filter out page reload).
-        // backToP2PDelay: 5
+        // backToP2PDelay: 5,
+
+        // The STUN servers that will be used in the peer to peer connections
+        stunServers: [
+
+            // { urls: 'stun:jitsi-meet.example.com:3478' },
+            { urls: 'stun:meet-jit-si-turnrelay.jitsi.net:443' }
+        ]
     },
 
     analytics: {
@@ -397,6 +593,21 @@ var config = {
         // The Amplitude APP Key:
         // amplitudeAPPKey: '<APP_KEY>'
 
+        // Configuration for the rtcstats server:
+        // By enabling rtcstats server every time a conference is joined the rtcstats
+        // module connects to the provided rtcstatsEndpoint and sends statistics regarding
+        // PeerConnection states along with getStats metrics polled at the specified
+        // interval.
+        // rtcstatsEnabled: true,
+
+        // In order to enable rtcstats one needs to provide a endpoint url.
+        // rtcstatsEndpoint: wss://rtcstats-server-pilot.jitsi.net/,
+
+        // The interval at which rtcstats will poll getStats, defaults to 1000ms.
+        // If the value is set to 0 getStats won't be polled and the rtcstats client
+        // will only send data related to RTCPeerConnection events.
+        // rtcstatsPolIInterval: 1000,
+
         // Array of script URLs to load as lib-jitsi-meet "analytics handlers".
         // scriptURLs: [
         //      "libs/analytics-ga.min.js", // google-analytics
@@ -404,6 +615,9 @@ var config = {
         // ],
     },
 
+    // Logs that should go be passed through the 'log' event if a handler is defined for it
+    // apiLogLevels: ['warn', 'log', 'error', 'info', 'debug'],
+
     // Information about the jitsi-meet instance we are connecting to, including
     // the user region as seen by the server.
     deploymentInfo: {
@@ -415,6 +629,13 @@ var config = {
     // Decides whether the start/stop recording audio notifications should play on record.
     // disableRecordAudioNotification: false,
 
+    // Disables the sounds that play when other participants join or leave the
+    // conference (if set to true, these sounds will not be played).
+    // disableJoinLeaveSounds: false,
+
+    // Disables the sounds that play when a chat message is received.
+    // disableIncomingMessageSound: false,
+
     // Information for the chrome extension banner
     // chromeExtensionBanner: {
     //     // The chrome extension to be installed address
@@ -435,8 +656,8 @@ var config = {
     // localRecording: {
     // Enables local recording.
     // Additionally, 'localrecording' (all lowercase) needs to be added to
-    // TOOLBAR_BUTTONS in interface_config.js for the Local Recording
-    // button to show up on the toolbar.
+    // the `toolbarButtons`-array for the Local Recording button to show up
+    // on the toolbar.
     //
     //     enabled: true,
     //
@@ -474,6 +695,10 @@ var config = {
     // the menu has option to flip the locally seen video for local presentations
     // disableLocalVideoFlip: false,
 
+    // A property used to unset the default flip state of the local video.
+    // When it is set to 'true', the local(self) video will not be mirrored anymore.
+    // doNotFlipLocalVideo: false,
+
     // Mainly privacy related settings
 
     // Disables all invite functions from the app (share, invite, dial out...etc)
@@ -495,17 +720,25 @@ var config = {
     // Options related to the remote participant menu.
     // remoteVideoMenu: {
     //     // If set to true the 'Kick out' button will be disabled.
-    //     disableKick: true
+    //     disableKick: true,
+    //     // If set to true the 'Grant moderator' button will be disabled.
+    //     disableGrantModerator: true
     // },
 
     // If set to true all muting operations of remote participants will be disabled.
     // disableRemoteMute: true,
 
+    // Enables support for lip-sync for this client (if the browser supports it).
+    // enableLipSync: false
+
     /**
      External API url used to receive branding specific information.
      If there is no url set or there are missing fields, the defaults are applied.
-     None of the fieds are mandatory and the response must have the shape:
+     The config file should be in JSON.
+     None of the fields are mandatory and the response must have the shape:
      {
+         // The domain url to apply (will replace the domain in the sharing conference link/embed section)
+         inviteDomain: 'example-company.org,
          // The hex value for the colour used as background
          backgroundColor: '#fff',
          // The url for the image used as background
@@ -516,13 +749,54 @@ var config = {
          logoImageUrl: 'https://example.com/logo-img.png'
      }
     */
-    // brandingDataUrl: '',
+    // dynamicBrandingUrl: '',
+
+    // Sets the background transparency level. '0' is fully transparent, '1' is opaque.
+    // backgroundAlpha: 1,
+
+    // The URL of the moderated rooms microservice, if available. If it
+    // is present, a link to the service will be rendered on the welcome page,
+    // otherwise the app doesn't render it.
+    // moderatedRoomServiceUrl: 'https://moderated.jitsi-meet.example.com',
+
+    // If true, tile view will not be enabled automatically when the participants count threshold is reached.
+    // disableTileView: true,
+
+    // Hides the conference subject
+    // hideConferenceSubject: true,
+
+    // Hides the recording label
+    // hideRecordingLabel: false,
+
+    // Hides the conference timer.
+    // hideConferenceTimer: true,
+
+    // Hides the participants stats
+    // hideParticipantsStats: true,
+
+    // Sets the conference subject
+    // subject: 'Conference Subject',
+
+    // This property is related to the use case when jitsi-meet is used via the IFrame API. When the property is true
+    // jitsi-meet will use the local storage of the host page instead of its own. This option is useful if the browser
+    // is not persisting the local storage inside the iframe.
+    // useHostPageLocalStorage: true,
+
+    // etherpad ("shared document") integration.
+    //
+
+    // If set, add a "Open shared document" link to the bottom right menu that
+    // will open an etherpad document.
+    // etherpad_base: 'https://your-etherpad-installati.on/p/',
+
+    // If etherpad_base is set, and useRoomAsSharedDocumentName is set to true,
+    // open a pad with the name of the room (lowercased) instead of a pad with a
+    // random UUID.
+    // useRoomAsSharedDocumentName: true,
 
     // List of undocumented settings used in jitsi-meet
     /**
      _immediateReloadThreshold
-     autoRecord
-     autoRecordToken
      debug
      debugAudioLevels
      deploymentInfo
@@ -532,7 +806,6 @@ var config = {
      dialOutCodesUrl
      disableRemoteControl
      displayJids
-     etherpad_base
      externalConnectUrl
      firefox_fake_device
      googleApiApplicationClientID
@@ -545,6 +818,13 @@ var config = {
      tokenAuthUrl
      */
 
+    /**
+     * This property can be used to alter the generated meeting invite links (in combination with a branding domain
+     * which is retrieved internally by jitsi meet) (e.g. https://meet.jit.si/someMeeting
+     * can become https://brandedDomain/roomAlias)
+     */
+    // brandingRoomAlias: null,
+
     // List of undocumented settings used in lib-jitsi-meet
     /**
      _peerConnStatusOutOfLastNTimeout
@@ -559,15 +839,83 @@ var config = {
      disableAP
      disableHPF
      disableNS
-     enableLipSync
      enableTalkWhileMuted
      forceJVB121Ratio
+     forceTurnRelay
      hiddenDomain
      ignoreStartMuted
-     nick
-     startBitrate
+     websocketKeepAlive
+     websocketKeepAliveUrl
      */
 
+    /**
+     * Default interval (milliseconds) for triggering mouseMoved iframe API event
+     */
+    mouseMoveCallbackInterval: 1000,
+
+    /**
+        Use this array to configure which notifications will be shown to the user
+        The items correspond to the title or description key of that notification
+        Some of these notifications also depend on some other internal logic to be displayed or not,
+        so adding them here will not ensure they will always be displayed
+
+        A falsy value for this prop will result in having all notifications enabled (e.g null, undefined, false)
+    */
+    // notifications: [
+    //     'connection.CONNFAIL', // shown when the connection fails,
+    //     'dialog.cameraNotSendingData', // shown when there's no feed from user's camera
+    //     'dialog.kickTitle', // shown when user has been kicked
+    //     'dialog.liveStreaming', // livestreaming notifications (pending, on, off, limits)
+    //     'dialog.lockTitle', // shown when setting conference password fails
+    //     'dialog.maxUsersLimitReached', // shown when maximmum users limit has been reached
+    //     'dialog.micNotSendingData', // shown when user's mic is not sending any audio
+    //     'dialog.passwordNotSupportedTitle', // shown when setting conference password fails due to password format
+    //     'dialog.recording', // recording notifications (pending, on, off, limits)
+    //     'dialog.remoteControlTitle', // remote control notifications (allowed, denied, start, stop, error)
+    //     'dialog.reservationError',
+    //     'dialog.serviceUnavailable', // shown when server is not reachable
+    //     'dialog.sessTerminated', // shown when there is a failed conference session
+    //     'dialog.sessionRestarted', // show when a client reload is initiated because of bridge migration
+    //     'dialog.tokenAuthFailed', // show when an invalid jwt is used
+    //     'dialog.transcribing', // transcribing notifications (pending, off)
+    //     'dialOut.statusMessage', // shown when dial out status is updated.
+    //     'liveStreaming.busy', // shown when livestreaming service is busy
+    //     'liveStreaming.failedToStart', // shown when livestreaming fails to start
+    //     'liveStreaming.unavailableTitle', // shown when livestreaming service is not reachable
+    //     'lobby.joinRejectedMessage', // shown when while in a lobby, user's request to join is rejected
+    //     'lobby.notificationTitle', // shown when lobby is toggled and when join requests are allowed / denied
+    //     'localRecording.localRecording', // shown when a local recording is started
+    //     'notify.disconnected', // shown when a participant has left
+    //     'notify.grantedTo', // shown when moderator rights were granted to a participant
+    //     'notify.invitedOneMember', // shown when 1 participant has been invited
+    //     'notify.invitedThreePlusMembers', // shown when 3+ participants have been invited
+    //     'notify.invitedTwoMembers', // shown when 2 participants have been invited
+    //     'notify.kickParticipant', // shown when a participant is kicked
+    //     'notify.mutedRemotelyTitle', // shown when user is muted by a remote party
+    //     'notify.mutedTitle', // shown when user has been muted upon joining,
+    //     'notify.newDeviceAudioTitle', // prompts the user to use a newly detected audio device
+    //     'notify.newDeviceCameraTitle', // prompts the user to use a newly detected camera
+    //     'notify.passwordRemovedRemotely', // shown when a password has been removed remotely
+    //     'notify.passwordSetRemotely', // shown when a password has been set remotely
+    //     'notify.raisedHand', // shown when a partcipant used raise hand,
+    //     'notify.startSilentTitle', // shown when user joined with no audio
+    //     'prejoin.errorDialOut',
+    //     'prejoin.errorDialOutDisconnected',
+    //     'prejoin.errorDialOutFailed',
+    //     'prejoin.errorDialOutStatus',
+    //     'prejoin.errorStatusCode',
+    //     'prejoin.errorValidation',
+    //     'recording.busy', // shown when recording service is busy
+    //     'recording.failedToStart', // shown when recording fails to start
+    //     'recording.unavailableTitle', // shown when recording service is not reachable
+    //     'toolbar.noAudioSignalTitle', // shown when a broken mic is detected
+    //     'toolbar.noisyAudioInputTitle', // shown when noise is detected for the current microphone
+    //     'toolbar.talkWhileMutedPopup', // shown when user tries to speak while muted
+    //     'transcribing.failedToStart' // shown when transcribing fails to start
+    // ],
+
+    // Prevent the filmstrip from autohiding when screen width is under a certain threshold
+    // disableFilmstripAutohiding: false,
 
     // Allow all above example options to include a trailing comma and
     // prevent fear when commenting out the last value.

connection.js

@@ -1,19 +1,24 @@
 /* global APP, JitsiMeetJS, config */
 
+import { jitsiLocalStorage } from '@jitsi/js-utils';
 import Logger from 'jitsi-meet-logger';
-import { jitsiLocalStorage } from 'js-utils';
 
-import AuthHandler from './modules/UI/authentication/AuthHandler';
+import { redirectToTokenAuthService } from './modules/UI/authentication/AuthHandler';
+import { LoginDialog } from './react/features/authentication/components';
+import { isTokenAuthEnabled } from './react/features/authentication/functions';
 import {
     connectionEstablished,
     connectionFailed
 } from './react/features/base/connection/actions';
+import { openDialog } from './react/features/base/dialog/actions';
+import { setJWT } from './react/features/base/jwt';
 import {
     isFatalJitsiConnectionError,
     JitsiConnectionErrors,
     JitsiConnectionEvents
 } from './react/features/base/lib-jitsi-meet';
-
+import { isVpaasMeeting, getJaasJWT } from './react/features/jaas/functions';
+import { setPrejoinDisplayNameRequired } from './react/features/prejoin/actions';
 const logger = Logger.getLogger(__filename);
 
 /**
@@ -79,9 +84,16 @@ function checkForAttachParametersAndConnect(id, password, connection) {
  * @returns {Promise<JitsiConnection>} connection if
  * everything is ok, else error.
  */
-function connect(id, password, roomName) {
+export async function connect(id, password, roomName) {
     const connectionConfig = Object.assign({}, config);
-    const { issuer, jwt } = APP.store.getState()['features/base/jwt'];
+    const state = APP.store.getState();
+    let { jwt } = state['features/base/jwt'];
+    const { iAmRecorder, iAmSipGateway } = state['features/base/config'];
+
+    if (!iAmRecorder && !iAmSipGateway && !jwt && isVpaasMeeting(state)) {
+        jwt = await getJaasJWT(state);
+        APP.store.dispatch(setJWT(jwt));
+    }
 
     // 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.
@@ -93,11 +105,11 @@ function connect(id, password, roomName) {
     //  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(
-            null,
-            jwt && issuer && issuer !== 'anonymous' ? jwt : undefined,
-            connectionConfig);
+    if (connectionConfig.websocketKeepAliveUrl) {
+        connectionConfig.websocketKeepAliveUrl += `?room=${roomName}`;
+    }
+
+    const connection = new JitsiMeetJS.JitsiConnection(null, jwt, connectionConfig);
 
     if (config.iAmRecorder) {
         connection.addFeature(DISCO_JIBRI_FEATURE);
@@ -113,6 +125,10 @@ function connect(id, password, roomName) {
         connection.addEventListener(
             JitsiConnectionEvents.CONNECTION_FAILED,
             connectionFailedHandler);
+        connection.addEventListener(
+            JitsiConnectionEvents.DISPLAY_NAME_REQUIRED,
+            displayNameRequiredHandler
+        );
 
         /* eslint-disable max-params */
         /**
@@ -166,6 +182,14 @@ function connect(id, password, roomName) {
             reject(err);
         }
 
+        /**
+         * Marks the display name for the prejoin screen as required.
+         * This can happen if a user tries to join a room with lobby enabled.
+         */
+        function displayNameRequiredHandler() {
+            APP.store.dispatch(setPrejoinDisplayNameRequired());
+        }
+
         checkForAttachParametersAndConnect(id, password, connection);
     });
 }
@@ -198,14 +222,41 @@ export function openConnection({ id, password, retry, roomName }) {
 
     return connect(id, password, roomName).catch(err => {
         if (retry) {
-            const { issuer, jwt } = APP.store.getState()['features/base/jwt'];
+            const { jwt } = APP.store.getState()['features/base/jwt'];
 
-            if (err === JitsiConnectionErrors.PASSWORD_REQUIRED
-                    && (!jwt || issuer === 'anonymous')) {
-                return AuthHandler.requestAuth(roomName, connect);
+            if (err === JitsiConnectionErrors.PASSWORD_REQUIRED && !jwt) {
+                return requestAuth(roomName);
             }
         }
 
         throw err;
     });
 }
+
+/**
+ * Show Authentication Dialog and try to connect with new credentials.
+ * If failed to connect because of PASSWORD_REQUIRED error
+ * then ask for password again.
+ * @param {string} [roomName] name of the conference room
+ *
+ * @returns {Promise<JitsiConnection>}
+ */
+function requestAuth(roomName) {
+    const config = APP.store.getState()['features/base/config'];
+
+    if (isTokenAuthEnabled(config)) {
+        // This Promise never resolves as user gets redirected to another URL
+        return new Promise(() => redirectToTokenAuthService(roomName));
+    }
+
+    return new Promise(resolve => {
+        const onSuccess = connection => {
+            resolve(connection);
+        };
+
+        APP.store.dispatch(
+            openDialog(LoginDialog, { onSuccess,
+                roomName })
+        );
+    });
+}

css/_atlaskit_overrides.scss

@@ -1,50 +1,160 @@
+/**
+ * Mixins that mimic the way Atlaskit fills the screen with modals at low screen widths.
+ */
+@mixin full-size-modal-positioner() {
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    max-width: 100%;
+    width: 100%;
+}
+
+@mixin full-size-modal-dialog() {
+    height: 100%;
+    max-height: 100%;
+    border-radius: 0;
+}
+
 /**
  * Move the @atlaskit/flag container up a little bit so it does not cover the
  * toolbar with the first notification.
  */
-.cjMOOK{
+.atlaskit-portal > #notifications-container {
     bottom: calc(#{$newToolbarSizeWithPadding}) !important;
 }
 
-/**
- * Disable the slide-in animation for @atlaskit/flag due to the animation
- * repeating for each queued flag once it becomes the top flag.
- */
- .mIBKA:first-child {
-    animation: cbfRuT 0s !important;
-    -webkit-animation: cbfRuT 0s !important;
-}
-
 .modal-dialog-form {
-    /**
-     * Update the @atlaskit/dropdown-menu trigger wrapper to make sure it looks
-     * click-able.
-     */
-    .cjJUnw {
-        cursor: pointer;
-    }
-
     /**
      * Override @atlaskit/dropdown-menu styling when in a modal because the
      * dropdown backgrounds clash with the modal backgrounds.
      */
-    .cksvax[data-role=droplistContent] {
-        border: 1px solid #455166;
+    .dropdown-menu div[style*="transform"] {
+        outline: 1px solid #455166;
     }
+    .dropdown-menu button:not(:active):not(:hover) > span {
+        color: #B8C7E0;
+    }
+
+    /**
+    * Override @atlaskit/tab styling when in a modal because the
+    * tab text color clash with the modal backgrounds.
+    */
+    div[role="tablist"] > div:not([data-selected]):not(:hover),
+    label > div > span {
+        color: #B8C7E0 !important;
+    }
+}
+
+/**
+ * Override @atlaskit/modal-dialog header styling
+ */
+.atlaskit-portal [role="dialog"] header {
+    box-shadow: none;
+    .jitsi-icon {
+        cursor: pointer;
+    }
+
+    .jitsi-icon svg {
+        fill: #B8C7E0;
+    }
+}
+
+/**
+ * Override @atlaskit/modal-dialog footer styling.
+ */
+ .atlaskit-portal [role="dialog"] footer {
+     box-shadow: none;
+ }
+
+/**
+ * Make header close button more easily tappable on mobile.
+ */
+.mobile-browser .atlaskit-portal [role="dialog"] header .jitsi-icon {
+    display: grid;
+    place-items: center;
+    height: 48px;
+    width: 48px;
+    background: #2a3a4b;
+    border-radius: 3px;
 }
 
 /**
  * Override @atlaskit/theme styling for the top toolbar so it displays over
  * the video thumbnail while obscuring as little as possible.
  */
-.videocontainer .tOoji {
+.videocontainer__toptoolbar > div > div {
     background: none;
 }
 
+
 /**
- * Override @atlaskit/InlineDialog styling for the overflowmenu so it displays
- * with the correct height.
+ * Keep overflow menu within screen vertical bounds and make it scrollable.
  */
-.toolbox-button-wth-dialog .eYJELv {
-    max-height: initial;
+ .toolbox-button-wth-dialog > div:nth-child(2) {
+    background: $menuBG;
+    max-height: calc(100vh - #{$newToolbarSizeWithPadding} - 46px);
+    margin-bottom: 4px;
+    padding: 0;
+    overflow-y: auto;
+}
+
+.audio-preview > div:nth-child(2),
+.video-preview > div:nth-child(2),
+.reactions-menu-popup > div:nth-child(2) {
+    margin-bottom: 4px;
+    outline: none;
+    padding: 0;
+}
+
+.reactions-menu-popup > div:nth-child(2) {
+    margin-bottom: 6px;
+    box-shadow: none;
+}
+
+/**
+ * The following selectors keep the chat modal full-size anywhere between 100px
+ * and 580px for desktop or 680px for mobile.
+ */
+@media (min-width: 100px) and (max-width: 320px) {
+    .smiley-input {
+        display: none;
+    }
+    .shift-right .focus-lock > div > div {
+        @include full-size-modal-positioner();
+    }
+
+    .shift-right .focus-lock [role="dialog"] {
+        @include full-size-modal-dialog();
+    }
+}
+
+@media (min-width: 480px) and (max-width: 580px) {
+    .shift-right .focus-lock > div > div {
+        @include full-size-modal-positioner();
+    }
+
+    .shift-right .focus-lock [role="dialog"] {
+        @include full-size-modal-dialog();
+    }
+}
+
+@media (max-width: 580px) {
+    // Override Atlaskit inline style for the modal background.
+    // Important is unfortunately needed for that.
+    .shift-right .focus-lock [role="dialog"][style] {
+        background-color: $chatBackgroundColor !important;
+    }
+
+    // Remove Atlaskit padding from the chat dialog.
+    .shift-right .focus-lock [role="dialog"] > div:first-child > div:nth-child(2) {
+        padding: 0;
+    }
+}
+
+div.Tooltip {
+    color: #fff;
+    font-size: 12px;
+    line-height: 14px;
+    padding: 8px;
 }

css/_audio-preview.scss

@@ -1,26 +1,42 @@
 .audio-preview {
+    display: inline-block;
+
     &-content {
-        background: #2A3A4B;
-        font-size: 15px;
+        background: $menuBG;
+        border-radius: 3px;
+        font-size: 14px;
         line-height: 24px;
         max-height: 456px;
         overflow: auto;
-        width: 328px;
+        width: 300px;
+        &-ul {
+            margin:0;
+            padding:0;
+            list-style-type: none;
+        }
     }
 
     &-header {
         color: #fff;
+        align-items: center;
         display: flex;
-        padding: 16px;
+        margin-top: 8px;
+        padding: 8px 16px;
 
         &-icon {
-            color: #A4B8D1;
             display: inline-block;
+
+            svg {
+                fill: #fff;
+            }
+        }
+
+        &--bordered {
+            border-bottom: 1px solid #4C4D50;
         }
 
         &-text {
-            font-weight: bold;
-            margin-left: 8px;
+            margin-left: 12px;
         }
     }
 
@@ -29,19 +45,18 @@
         color: #fff;
         cursor: pointer;
         display: flex;
-        padding: 12px 0;
+        padding: 8px 0;
         margin-left: 48px;
 
         &--selected {
-            background: #1C2025;
+            background: #131519;
             cursor: initial;
             margin-left: 0;
-            padding-left: 21px;
+            padding-left: 18px;
         }
 
         &-text {
             color: #fff;
-            font-size: 15px;
             display: inline-block;
             line-height: 24px;
             text-overflow: ellipsis;
@@ -54,14 +69,21 @@
     &-speaker {
         position: relative;
 
-        &:hover {
+        &-ul {
+            margin:0;
+            padding:0;
+            list-style-type: none;
+        }
+
+        &:hover, &:focus-within, &:focus {
             .audio-preview-entry {
-                background: #3F4E5E;
+                background: #36383C;
                 margin-left: 0;
                 padding-left: 48px;
 
                 &--selected {
-                    padding-left: 21px;
+                    padding-left: 18px;
+                    background: $newToolbarBackgroundColor;
                 }
             }
 
@@ -70,12 +92,16 @@
             }
 
             .audio-preview-entry-text {
-                max-width: 196px;
+                max-width: 178px;
             }
         }
 
+        &:last-child {
+            padding-bottom: 8px;
+        }
+
         .audio-preview-entry-text {
-            max-width: 256px;
+            max-width: 238px;
         }
     }
 
@@ -84,18 +110,19 @@
 
         &:hover {
             .audio-preview-entry {
-                background: #3F4E5E;
+                background: #36383C;
                 margin-left: 0;
                 padding-left: 48px;
 
                 &--selected {
-                    padding-left: 21px;
+                    background: $newToolbarBackgroundColor;
+                    padding-left: 18px;
                 }
             }
         }
 
         .audio-preview-entry-text {
-            max-width: 196px;
+            max-width: 178px;
         }
     }
 
@@ -110,7 +137,7 @@
 
         &--check {
             background: #31B76A;
-            margin-right: 13px;
+            margin-right: 16px;
         }
 
         &--exclamation {
@@ -121,6 +148,11 @@
         }
     }
 
+    &-hr {
+        border-top: 1px solid #4C4D50;
+        border-bottom: 0;
+    }
+
     &-test-button {
         display: none;
         background: #FFF;
@@ -129,22 +161,22 @@
         color: #1C2025;
         cursor: pointer;
         font-weight: 600;
-        font-size: 15px;
+        font-size: 0.8rem;
         line-height: 24px;
-        padding: 4px 16px;
+        padding: 2px 8px;
         position: absolute;
         right: 16px;
-        top: 8px;
+        top: 5px;
     }
 
     &-meter-mic {
         position: absolute;
         right: 16px;
-        top: 18px;
+        top: 14px;
     }
 
-   // Override @atlaskit/InlineDialog container which is made with styled components
-    & > div > div:nth-child(2) > div > div {
+    // Override @atlaskit/InlineDialog container which is made with styled components
+    & > div:nth-child(2) {
         outline: none;
         padding: 0;
     }

css/_aui_reset.scss

@@ -219,8 +219,9 @@ abbr {
 }
 
 a {
-  color: #3572b0;
+  color: #44A5FF;
   text-decoration: none;
+  font-weight: bold;
 }
 a:focus,
 a:hover,

css/_avatar.scss

@@ -1,7 +1,7 @@
 .avatar {
     background-color: #AAA;
     border-radius: 50%;
-    color: rgba(255, 255, 255, 0.6);
+    color: rgba(255, 255, 255, 1);
     font-weight: 100;
     object-fit: cover;
 
@@ -25,10 +25,6 @@
     width: 100%;
 }
 
-.defaultAvatar {
-    opacity: 0.6
-}
-
 .avatar-badge {
     position: relative;
 

css/_base.scss

@@ -17,6 +17,7 @@ textarea {
 html {
     height: 100%;
     width: 100%;
+    overflow: hidden;
 }
 
 body {
@@ -28,8 +29,25 @@ body {
     overflow: hidden;
     color: $defaultColor;
     background: $defaultBackground;
-    &.filmstrip-only {
-        background: transparent;
+}
+
+/**
+ * This will hide the focus indicator if an element receives focus via the mouse,
+ * but it will still show up on keyboard focus, thus preserving accessibility.
+ */
+.js-focus-visible :focus:not(.focus-visible) {
+  outline: none;
+}
+
+/**
+ * AtlasKit sets a default margin on the rendered modals, so
+ * when the shift-right class is set when the chat opens, we
+ * pad the modal container in order for the modals to be centered
+ * while also taking the chat size into consideration.
+*/
+@media (min-width: 581px) {
+    .shift-right .atlaskit-portal > div:not(.Tooltip) {
+        padding-left: $sidebarWidth;
     }
 }
 
@@ -37,21 +55,15 @@ body {
     fill: white;
 }
 
+.disabled .jitsi-icon svg {
+    fill: #929292;
+}
+
 .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
- * override this behavior is specific to where the AtlasKitThemeProvider might
- * be placed within the app hierarchy.
- */
-.filmstrip-only #react > .ckAJgx {
-    background: transparent;
-}
-
 p {
     margin: 0;
 }

css/_chat.scss

@@ -1,19 +1,14 @@
 #sideToolbarContainer {
-    background-color: $newToolbarBackgroundColor;
+    background-color: $chatBackgroundColor;
     box-sizing: border-box;
     color: #FFF;
     display: flex;
     flex-direction: column;
-    /**
-     * Make the sidebar flush with the top of the toolbar. Take the size of
-     * the toolbar and subtract from 100%.
-     */
-    height: calc(100% - #{$newToolbarSizeWithPadding});
+    height: 100%;
     left: -$sidebarWidth;
     overflow: hidden;
     position: absolute;
     top: 0;
-    transition: left 0.5s;
     width: $sidebarWidth;
     z-index: $sideToolbarContainerZ;
 
@@ -37,6 +32,13 @@
     width: $sidebarWidth;
     word-wrap: break-word;
 
+    display: flex;
+    flex-direction: column;
+
+    & > :first-child {
+        margin-top: auto;
+    }
+
     a {
         display: block;
     }
@@ -97,49 +99,111 @@
     div {
         svg {
             cursor: pointer;
-            fill: white
+            fill: white;
         }
     }
 }
 
+
 .chat-header {
-    background-color: $chatHeaderBackgroundColor;
     height: 70px;
     position: relative;
     width: 100%;
     z-index: 1;
+    display: flex;
+    justify-content: space-between;
+    padding: 16px;
+    align-items: center;
+    box-sizing: border-box;
+    color: #fff;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 32px;
 
-    .chat-close {
-        align-items: center;
-        bottom: 8px;
-        color: white;
+    .jitsi-icon {
         cursor: pointer;
-        display: flex;
-        font-size: 18px;
-        height: 40px;
-        justify-content: center;
-        line-height: 15px;
-        padding: 4px;
-        position: absolute;
-        right: 5px;
-        width: 40px;
+    }
+}
 
-        &:hover {
-            color: rgba(255, 255, 255, 0.8);
+.chat-input-container {
+    padding: 0 16px 16px;
+
+    &.populated {
+        #chat-input {
+            .send-button {
+                background: #1B67EC;
+                cursor: pointer;
+                margin-left: 0.3rem;
+
+                @media (hover: hover) and (pointer: fine) {
+                    &:hover {
+                        background: #3D82FB;
+                    }
+                }
+
+                &:active {
+                    background: #0852D4;
+                }
+
+                path {
+                    fill: #fff;
+                }
+            }
         }
     }
 }
 
 #chat-input {
-    border-top: 1px solid $chatInputSeparatorColor;
+    border: 1px solid $chatInputSeparatorColor;
     display: flex;
-    padding: 5px 10px;
+    padding: 4px;
+    border-radius: 3px;
+
+    &:focus-within {
+        border: 1px solid #619CF4;
+    }
 
     * {
         background-color: transparent;
     }
 }
 
+.send-button-container {
+    display: flex;
+    align-items: center;
+}
+
+.send-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    width: 40px;
+    border-radius: 3px;
+
+    path {
+        fill: $chatInputSeparatorColor;
+    }
+}
+
+.smiley-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 38px;
+    width: 38px;
+    margin: 2px;
+    border-radius: 3px;
+}
+
+#chat-input .smiley-button {
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            background-color: #484A4F;
+        }
+    }
+}
+
 .remoteuser {
     color: #B8C7E0;
 }
@@ -153,7 +217,7 @@
     border-radius:0;
     box-shadow: none;
     color: white;
-    font-size: 15px;
+    font-size: 14px;
     padding: 10px;
     overflow-y: auto;
     resize: none;
@@ -165,14 +229,74 @@
     border: 0px none;
     box-shadow: none;
 }
+#usermsg:focus,
+#usermsg:active {
+    border-bottom: 1px solid white;
+    padding-bottom: 8px;
+ }
 
 #nickname {
     text-align: center;
     color: #9d9d9d;
-    font-size: 18px;
-    margin-top: 30px;
-    left: 5px;
-    right: 5px;
+    font-size: 16px;
+    margin: auto 0;
+    padding: 0 16px;
+
+    #nickname-title {
+        margin-bottom: 5px;
+        display: block;
+    }
+
+    label[for="nickinput"] {
+        > div > span {
+            color: #B8C7E0;
+        }
+    }
+    input {
+        height: 40px;
+    }
+
+    label {
+        line-height: 24px;
+    }
+
+    .enter-chat {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 16px;
+        height: 40px;
+        background: #1B67EC;
+        border-radius: 3px;
+        color: #fff;
+        cursor: pointer;
+
+        &.disabled {
+            color: #AFB6BC;
+            background: #11336E;
+            pointer-events: none;
+        }
+    }
+}
+
+.mobile-browser {
+    #nickname {
+        input {
+            height: 48px;
+        }
+
+        .enter-chat {
+            height: 48px;
+        }
+    }
+
+    #usermsg {
+        font-size: 16px;
+    }
+
+    .chatmessage .usermessage {
+        font-size: 16px;
+    }
 }
 
 .sideToolbarContainer {
@@ -182,13 +306,30 @@
     }
 
     .display-name {
-        font-size: 13px;
-        font-weight: bold;
+        font-size: 12px;
+        font-weight: 600;
         margin-bottom: 5px;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
     }
+
+    @media (max-width: 580px) {
+        display: none !important;
+    }
+}
+
+.sr-only {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    clip-path: inset(50%) !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important;
 }
 
 .chatmessage {
@@ -207,6 +348,7 @@
 
     .usermessage {
         white-space: pre-wrap;
+        font-size: 14px;
     }
 
     &.error {
@@ -229,14 +371,14 @@
     }
 
     .messagecontent {
-        margin: 5px 10px;
+        margin: 8px;
         max-width: 100%;
         overflow: hidden;
     }
 }
 
-.smiley {
-    font-size: 14pt;
+.timestamp {
+    color: #757575;
 }
 
 #smileys {
@@ -267,10 +409,12 @@
     box-sizing: border-box;
     background-color: rgba(0, 0, 0, .6) !important;
     height: auto;
-    max-height: 0;
+    display: none;
     overflow: hidden;
     position: absolute;
-    width: $sidebarWidth;
+    width: calc(#{$sidebarWidth} - 32px);
+    margin-bottom: 5px;
+    margin-left: -5px;
 
     /**
      * CSS transitions do not apply for auto dimensions. So to produce the css
@@ -281,13 +425,13 @@
     transition: max-height 0.3s;
 
     &.show-smileys {
+        display: flex;
         max-height: 500%;
     }
 
     #smileysContainer {
-        background-color: $newToolbarBackgroundColor;
-        border-bottom: 1px solid;
-        border-top: 1px solid;
+        background-color: $chatBackgroundColor;
+        border-top: 1px solid $chatInputSeparatorColor;
     }
 }
 
@@ -297,7 +441,7 @@
 
 .smileyContainer {
     width: 40px;
-    height: 36px;
+    height: 40px;
     display: inline-block;
     text-align: center;
 }
@@ -384,3 +528,49 @@
         }
     }
 }
+
+.chat-dialog {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    margin-top: -5px; // Margin set by atlaskit.
+
+    &-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 16px;
+        width: calc(100% - 32px);
+        box-sizing: border-box;
+        color: #fff;
+        font-weight: 600;
+        font-size: 24px;
+        line-height: 32px;
+
+        .jitsi-icon {
+            cursor: pointer;
+        }
+    }
+
+    #chatconversation {
+        width: 100%;
+    }
+}
+
+.touchmove-hack {
+    display: flex;
+    flex: 1;
+    overflow: auto;
+}
+
+/**
+ * Make header close button more easily tappable on mobile.
+ */
+.mobile-browser .chat-dialog-header .jitsi-icon {
+    display: grid;
+    place-items: center;
+    height: 48px;
+    width: 48px;
+    background: #36383C;
+    border-radius: 3px;
+}

css/_connection-info.scss

@@ -45,10 +45,12 @@
         @extend .connection-info__icon;
     }
 
-    .showmore {
-        display: block;
+    &__mobile {
+      margin: 15px;
+    }
+
+    .connection-actions {
         margin: 10px auto;
         text-align: center;
-        width: 90px;
     }
 }

css/_connection-status.scss

@@ -0,0 +1,86 @@
+.con-status {
+    position: absolute;
+    top: 24px;
+    width: 100%;
+    z-index: $toolbarZ + 3;
+
+    &-container {
+        border-radius: 3px;
+        color: #fff;
+        font-size: 13px;
+        line-height: 13px;
+        margin: 0 auto;
+        width: 320px;
+
+        @include adjust-for-max-width(320px, 8px);
+    }
+
+    &-header {
+        background: rgba(28, 32, 37, .5);
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    &-circle {
+        border-radius: 50%;
+        display: inline-block;
+        padding: 4px;
+        margin: 8px;
+    }
+
+    &--good {
+        background: #31B76A;
+    }
+
+    &--poor {
+        background: #E12D2D;
+    }
+
+    &--non-optimal {
+        background: #E39623;
+    }
+
+    &-arrow {
+        height: 36px;
+        width: 36px;
+        border-radius: 3px;
+        margin-left: 8px;
+        margin-right: 2px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: background-color 0.16s ease-out;
+
+        &--up {
+            transform: rotate(180deg);
+        }
+
+        &>svg {
+            cursor: pointer;
+        }
+
+        &:hover {
+            background-color: rgba(1,1,1, 0.1);
+        }
+    }
+
+    &-text {
+        text-align: center;
+    }
+
+    &-details {
+        background: rgba(28, 32, 37, .5);
+        border-top: 1px solid #5E6D7A;
+        padding: 16px;
+        transition: opacity 0.16s ease-out;
+
+        &-visible {
+            opacity: 1;
+        }
+
+        &-hidden {
+            opacity: 0;
+        }
+    }
+}

css/_country-picker.scss

@@ -69,7 +69,7 @@
 }
 
 // Override @Atlaskit/inline-dialog styles
-.cpick-container > div > div:nth-child(2) > div > div {
+.cpick-container > div:nth-child(2) {
     outline: none;
     padding: 8px 0 0 0;
 }

css/_drawer.scss

@@ -0,0 +1,97 @@
+.drawer-portal {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: $drawerZ;
+    border-radius: 16px 16px 0 0;
+}
+
+.drawer-portal::after {
+    content: '';
+    background-color: $participantsPaneBgColor;
+    margin-bottom: env(safe-area-inset-bottom, 0);
+}
+
+.drawer-menu-container {
+    height: 100vh;
+    display: flex;
+    align-items: flex-end;
+}
+
+.drawer-menu {
+    max-height: calc(80vh - 64px);
+    background: #242528;
+    border-radius: 16px 16px 0 0;
+    overflow-y: hidden;
+    margin-bottom: env(safe-area-inset-bottom, 0);
+    width: 100%;
+
+    .drawer-toggle {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 44px;
+        cursor: pointer;
+
+        svg {
+            fill: none;
+        }
+    }
+
+    .popupmenu {
+        margin: auto;
+        width: 100%;
+    }
+
+    .popupmenu__item {
+        height: 48px;
+    }
+
+    &#{&} .overflow-menu {
+        margin: auto;
+        font-size: 1.2em;
+        list-style-type: none;
+        padding: 0;
+        height: calc(80vh - 144px - 64px);
+        overflow-y: auto;
+
+        .overflow-menu-item {
+            box-sizing: border-box;
+            height: 48px;
+            padding: 12px 16px;
+
+            align-items: center;
+            color: $overflowMenuItemColor;
+            cursor: pointer;
+            display: flex;
+            font-size: 16px;
+
+            div {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+            }
+
+            &.unclickable {
+                cursor: default;
+            }
+            @media (hover: hover) and (pointer: fine) {
+                &.unclickable:hover {
+                    background: inherit;
+                }
+            }
+            &.disabled {
+                cursor: initial;
+                color: #3b475c;
+            }
+        }
+
+        .profile-text {
+            max-width: 100%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+    }
+}

css/_e2ee.scss

@@ -1,7 +1,6 @@
 #e2ee-section {
-    .title {
-        font-weight: 700;
-    }
+    display: flex;
+    flex-direction: column;
 
     .description {
         font-size: 13px;
@@ -9,33 +8,22 @@
 
         .read-more {
             cursor: pointer;
-            opacity: .7;
+            opacity: .9;
+            color: #fff;
+            font-size: 0.8rem;
+            font-weight: bold;
         }
     }
 
-    .key-field {
-        align-items: center;
+    .control-row {
         display: flex;
         flex-direction: row;
+        justify-content: space-between;
+        margin-top: 15px;
 
         label {
             font-size: 14px;
-            font-weight: 700;
-        }
-
-        input {
-            background-color: inherit;
-            border: none;
-            color: inherit;
-            flex: 1;
-            padding: 0 5px;
-        }
-
-        a {
-            color: #6FB1EA;
-            cursor: pointer;
-            font-size: 14px;
-            text-decoration: none;
+            font-weight: bold;
         }
     }
 }

css/_inlay.scss

@@ -27,84 +27,4 @@
         font-size: 50px;
     }
 
-    &-filmstrip-only {
-        background-color: $inlayFilmstripOnlyBg;
-        color: $inlayFilmstripOnlyColor;
-        margin-left: 20px;
-        margin-right: 20px;
-        margin-top: 20px;
-        bottom: 30px;
-        position: absolute;
-        display: flex;
-        max-height: 120px;
-        height: 80%;
-        right: 0px;
-        border-radius: 4px;
-        overflow: hidden;
-        &__content {
-            padding: 20px;
-            display: flex;
-            justify-content: center;
-            position: relative;
-            > .button-control {
-                align-self: center;
-            }
-            > #reloadProgressBar {
-                position: absolute;
-                left: 0px;
-                bottom: 0px;
-                margin-bottom: 0px;
-                width: 100%;
-                border-radius: 0px;
-            }
-        }
-        &__title {
-            font-size: 18px;
-            font-weight: 600;
-        }
-
-        &__container {
-            align-self: center;
-        }
-
-        &__text {
-            margin-top: 10px;
-            font-size: 14px;
-            font-weight: 600;
-        }
-
-        &__icon {
-            font-size: 50px;
-            align-self: center;
-            color: $inlayIconColor;
-            opacity: 0.6;
-        }
-        &__icon-container {
-            text-align: center;
-            display: flex;
-            justify-content: center;
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            top: 0px;
-        }
-
-        &__avatar-container {
-            height: 100%;
-            position: relative;
-            > img {
-                height: 100%;
-            }
-        }
-
-        &__icon-background {
-            background: $inlayIconBg;
-            opacity: 0.6;
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            top: 0px;
-        }
-    }
-
 }

css/_jquery-impromptu.scss

@@ -1,129 +0,0 @@
-/*
-------------------------------
-	Impromptu
-------------------------------
-*/
-.jqifade{
-	position: absolute; 
-	background-color: #000;
-}
-div.jqi{ 
-	width: 400px;
-	position: absolute;
-    color: #3a3a3a;
-	background-color: #ffffff; 
-	font-size: 11px; 
-	text-align: left; 
-	border: solid 1px #eeeeee;
-	border-radius: 6px;
-	-moz-border-radius: 6px;
-	-webkit-border-radius: 6px;
-	padding: 7px;
-}
-div.jqi .jqicontainer{ 
-}
-div.jqi .jqiclose{ 
-	position: absolute;
-	top: 4px; right: -2px; 
-	width: 18px; 
-	cursor: default; 
-	color: #bbbbbb; 
-	font-weight: bold; 
-}
-div.jqi .jqistate{
-	background-color: #fff;
-}
-div.jqi .jqititle{
-	padding: 5px 10px;
-	font-size: 16px; 
-	line-height: 20px; 
-	border-bottom: solid 1px #eeeeee;
-}
-div.jqi .jqimessage{ 
-	padding: 10px; 
-	line-height: 20px; 
-	color: #444444; 
-}
-div.jqi .jqibuttons{ 
-	text-align: right; 
-	margin: 0 -7px -7px -7px;
-	border-top: solid 1px #e4e4e4; 
-	background-color: #f4f4f4;
-	border-radius: 0 0 6px 6px;
-	-moz-border-radius: 0 0 6px 6px;
-	-webkit-border-radius: 0 0 6px 6px;
-}
-div.jqi .jqibuttons button{ 
-	margin: 0;
-	padding: 5px 20px;
-	background-color: transparent !important;
-	font-weight: normal; 
-	border: none;
-	border-left: solid 1px #e4e4e4; 
-	color: #777; 
-	font-weight: bold; 
-	font-size: 12px; 
-}
-div.jqi .jqibuttons button.jqidefaultbutton{
-	color: #489afe;
-}
-
-div.jqi .jqibuttons button:disabled {
-    color: #b6b6b6 !important;
-}
-div.jqi .jqibuttons button:hover,
-div.jqi .jqibuttons button:focus{
-	color: #287ade;
-	outline: none;
-}
-.jqiwarning .jqi .jqibuttons{ 
-	background-color: #b95656;
-}
-
-/* sub states */
-div.jqi .jqiparentstate::after{ 
-	background-color: #777;
-	opacity: 0.6;
-	filter: alpha(opacity=60);
-	content: '';
-	position: absolute;
-	top:0;left:0;bottom:0;right:0;
-	border-radius: 6px;
-	-moz-border-radius: 6px;
-	-webkit-border-radius: 6px;
-}
-div.jqi .jqisubstate{
-	position: absolute;
-	top:0;
-	left: 20%;
-	width: 60%;
-	padding: 7px;
-	border: solid 1px #eeeeee;
-	border-top: none;
-	border-radius: 0 0 6px 6px;
-	-moz-border-radius: 0 0 6px 6px;
-	-webkit-border-radius: 0 0 6px 6px;
-}
-div.jqi .jqisubstate .jqibuttons button{
-	padding: 10px 18px;
-}
-
-/* arrows for tooltips/tours */
-.jqi .jqiarrow{ position: absolute; height: 0; width:0; line-height: 0; font-size: 0; border: solid 10px transparent;}
-
-.jqi .jqiarrowtl{ left: 10px; top: -20px; border-bottom-color: #ffffff; }
-.jqi .jqiarrowtc{ left: 50%; top: -20px; border-bottom-color: #ffffff; margin-left: -10px; }
-.jqi .jqiarrowtr{ right: 10px; top: -20px; border-bottom-color: #ffffff; }
-
-.jqi .jqiarrowbl{ left: 10px; bottom: -20px; border-top-color: #ffffff; }
-.jqi .jqiarrowbc{ left: 50%; bottom: -20px; border-top-color: #ffffff; margin-left: -10px; }
-.jqi .jqiarrowbr{ right: 10px; bottom: -20px; border-top-color: #ffffff; }
-
-.jqi .jqiarrowlt{ left: -20px; top: 10px; border-right-color: #ffffff; }
-.jqi .jqiarrowlm{ left: -20px; top: 50%; border-right-color: #ffffff; margin-top: -10px; }
-.jqi .jqiarrowlb{ left: -20px; bottom: 10px; border-right-color: #ffffff; }
-
-.jqi .jqiarrowrt{ right: -20px; top: 10px; border-left-color: #ffffff; }
-.jqi .jqiarrowrm{ right: -20px; top: 50%; border-left-color: #ffffff; margin-top: -10px; }
-.jqi .jqiarrowrb{ right: -20px; bottom: 10px; border-left-color: #ffffff; }
-

css/_jquery.contextMenu.scss

@@ -1,206 +0,0 @@
-@charset "UTF-8";
-/*!
- * jQuery contextMenu - Plugin for simple contextMenu handling
- *
- * Version: v2.1.1
- *
- * Authors: Björn Brala (SWIS.nl), Rodney Rehm, Addy Osmani (patches for FF)
- * Web: http://swisnl.github.io/jQuery-contextMenu/
- *
- * Copyright (c) 2011-2016 SWIS BV and contributors
- *
- * Licensed under
- *   MIT License http://www.opensource.org/licenses/mit-license
- *
- * Date: 2016-02-28T09:53:18.890Z
- */
-@font-face {
-  font-family: "context-menu-icons";
-  font-style: normal; 
-  font-weight: normal;
-
-  src: url("font/context-menu-icons.eot?2qmzf");
-  src: url("font/context-menu-icons.eot?2qmzf#iefix") format("embedded-opentype"), url("font/context-menu-icons.woff2?2qmzf") format("woff2"), url("font/context-menu-icons.woff?2qmzf") format("woff"), url("font/context-menu-icons.ttf?2qmzf") format("truetype");
-}
-
-.context-menu-icon:before {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 28px; 
-  font-family: "context-menu-icons";
-  font-size: 16px;
-  font-style: normal;
-  font-weight: normal;
-  line-height: 1;
-  color: #2980b9;
-  text-align: center;
-  -webkit-transform: translateY(-50%);
-      -ms-transform: translateY(-50%);
-       -o-transform: translateY(-50%);
-          transform: translateY(-50%);
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.context-menu-icon-add:before {
-  content: "";
-}
-
-.context-menu-icon-copy:before {
-  content: "";
-}
-
-.context-menu-icon-cut:before {
-  content: "";
-}
-
-.context-menu-icon-delete:before {
-  content: "";
-}
-
-.context-menu-icon-edit:before {
-  content: "";
-}
-
-.context-menu-icon-paste:before {
-  content: "";
-}
-
-.context-menu-icon-quit:before {
-  content: "";
-}
-
-.context-menu-icon.context-menu-hover:before {
-  color: #fff;
-}
-
-.context-menu-list {
-  position: absolute; 
-  display: inline-block;
-  min-width: 180px;
-  max-width: 360px;
-  padding: 4px 0;
-  margin: 5px;
-  font-family: inherit;
-  font-size: inherit;
-  list-style-type: none;
-  background: #fff;
-  border: 1px solid #bebebe;
-  border-radius: $borderRadius;
-  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
-          box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
-}
-
-.context-menu-item {
-  position: relative;
-  padding: 3px 28px;
-  color: #2f2f2f;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none; 
-  background-color: #fff;
-}
-
-.context-menu-separator {
-  padding: 0; 
-  margin: 5px 0;
-  border-bottom: 1px solid #e6e6e6;
-}
-
-.context-menu-item > label > input,
-.context-menu-item > label > textarea {
-  -webkit-user-select: text;
-     -moz-user-select: text;
-      -ms-user-select: text;
-          user-select: text;
-}
-
-.context-menu-item.context-menu-hover {
-  color: #fff;
-  cursor: pointer; 
-  background-color: #2980b9;
-}
-
-.context-menu-item.context-menu-disabled {
-  color: #626262; 
-  background-color: #fff;
-}
-
-.context-menu-item.context-menu-disabled {
-  color: #626262;
-}
-
-.context-menu-input.context-menu-hover,
-.context-menu-item.context-menu-disabled.context-menu-hover {
-  cursor: default; 
-  background-color: #eee;
-}
-
-.context-menu-submenu:after {
-  position: absolute;
-  top: 50%;
-  right: 8px;
-  z-index: $zindex1;
-  width: 0;
-  height: 0;
-  content: '';
-  border-color: transparent transparent transparent #2f2f2f;
-  border-style: solid;
-  border-width: 4px 0 4px 4px;
-  -webkit-transform: translateY(-50%);
-      -ms-transform: translateY(-50%);
-       -o-transform: translateY(-50%);
-          transform: translateY(-50%);
-}
-
-/**
- * Inputs
- */
-.context-menu-item.context-menu-input {
-  padding: 5px 10px;
-}
-
-/* vertically align inside labels */
-.context-menu-input > label > * {
-  vertical-align: top;
-}
-
-/* position checkboxes and radios as icons */
-.context-menu-input > label > input[type="checkbox"],
-.context-menu-input > label > input[type="radio"] {
-  position: relative;
-  top: 3px;
-}
-
-.context-menu-input > label,
-.context-menu-input > label > input[type="text"],
-.context-menu-input > label > textarea,
-.context-menu-input > label > select {
-  display: block;
-  width: 100%; 
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
-}
-
-.context-menu-input > label > textarea {
-  height: 100px;
-}
-
-.context-menu-item > .context-menu-list {
-  top: 5px; 
-  /* re-positioned by js */
-  right: -5px;
-  display: none;
-}
-
-.context-menu-item.context-menu-visible > .context-menu-list {
-  display: block;
-}
-
-.context-menu-accesskey {
-  text-decoration: underline;
-}

css/_labels.scss

@@ -1,68 +1,37 @@
-.large-video-labels {
+.label {
+    align-items: center;
+    background: #36383C;
+    border-radius: 3px;
+    color: #fff;
     display: flex;
-    position: absolute;
-    top: 30px;
-    right: 30px;
-    transition: right 0.5s;
-    z-index: $filmstripVideosZ + 1;
+    font-size: 12px;
+    font-weight: 600;
+    height: 28px;
+    margin: 0 0 4px 4px;
+    padding: 0 8px;
 
-    .circular-label {
-        align-items: center;
-        color: white;
-        display: flex;
-        font-weight: bold;
-        justify-content: center;
-        margin-left: 8px;
-        opacity: 0.8;
+    &--green {
+        background: #31B76A;
     }
 
-    .circular-label {
-        background: #B8C7E0;
+    &--red {
+        background: #E34F56
     }
 
-    .circular-label.e2ee {
-        align-items: center;
-        background: #76CF9C;
-        display: flex;
-        justify-content: center;
-    }
+    &--white {
+        background: #fff;
+        color: #5e6d7a;
 
-    .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;
+        svg {
+            fill: #5e6d7a;
+        }
     }
 }
 
-.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;
-}
+.label-text-with-icon {
+    margin-left: 8px;
+}
+
+.participants-count {
+    cursor: pointer;
+}

css/_lobby.scss

@@ -9,24 +9,11 @@
             .spinner {
                 margin: 30px;
             }
-    
+
             .joining-message {
                 margin: 10px;
             }
         }
-
-        .form {
-            align-items: stretch;
-            display: flex;
-            flex-direction: column;
-            min-width: 400px;
-        }
-
-        .participant-info {
-            align-items: center;
-            display: flex;
-            flex-direction: column;
-        }
     }
 }
 
@@ -51,18 +38,18 @@
     }
 }
 
-#knocking-participant-list {
+#notification-participant-list {
     background-color: $newToolbarBackgroundColor;
     border: 1px solid rgba(255, 255, 255, .4);
     border-radius: 8px;
-    display: flex;
-    flex-direction: column;
     left: 0;
     margin: 20px;
+    max-height: 600px;
+    overflow: hidden;
+    overflow-y: auto;
     position: fixed;
-    top: 20;
-    transition: top 1s ease;
-    z-index: 100;
+    top: 30px;
+    z-index: $toolbarZ + 1;
 
     &.toolbox-visible {
         // Same as toolbox subject position
@@ -75,44 +62,6 @@
         padding: 15px
     }
 
-    ul {
-        list-style-type: none;
-        padding: 0 15px 15px 15px;
-
-        li {
-            align-items: center;
-            display: flex;
-            flex-direction: row;
-            margin: 8px 0;
-
-            .details {
-                display: flex;
-                flex: 1;
-                flex-direction: column;
-                justify-content: space-evenly;
-                margin: 0 30px 0 10px;
-            }
-
-            button {
-                align-self: unset;
-                margin: 0 5px;
-            }
-        }
-    }
-
-    input {
-        align-self: stretch;
-        background-color: transparent;
-        border: 1px solid #B8C7E0;
-        border-radius: 4px;
-        color: white;
-        padding: 12px 8px;
-
-        &:focus {
-            border-color: rgb(3, 118, 218);
-        }
-    }
-
     button {
         align-self: stretch;
         margin: 8px 0;
@@ -142,3 +91,48 @@
         }
     }
 }
+
+.knocking-participants-container {
+    list-style-type: none;
+    padding: 0 15px 15px 15px;
+}
+
+.knocking-participant {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    margin: 8px 0;
+
+    .details {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        justify-content: space-evenly;
+        margin: 0 30px 0 10px;
+    }
+
+    button {
+        align-self: unset;
+        margin: 0 5px;
+    }
+}
+
+@media (max-width: 300px) {
+    #knocking-participant-list {
+        margin: 0;
+        text-align: center;
+        width: 100%;
+
+        .avatar {
+            display: none;
+        }
+    }
+
+    .knocking-participant {
+        flex-direction: column;
+
+        .details {
+            margin: 0;
+        }
+    }
+}

css/_meetings_list.scss

@@ -7,9 +7,8 @@
     display: flex;
     flex-direction: column;
     position: relative;
-    width: 100%;
-    height: 100%;
     overflow: auto;
+    width: 100%;
 
     .meetings-list-empty {
         text-align: center;
@@ -20,11 +19,34 @@
         flex-direction: column;
 
         .description {
-            font-size: 16px;
-            padding: 20px;
+           color: #2f3237;
+           font-size: 14px;
+           line-height: 18px;
+           margin-bottom: 16px;
+           max-width: 436px;
         }
     }
 
+    .meetings-list-empty-image {
+        text-align: center;
+        margin: 24px 0 20px 0;
+    }
+
+    .meetings-list-empty-button {
+        align-items: center;
+        color: #0163FF;
+        cursor: pointer;
+        display: flex;
+        font-size: 14px;
+        line-height: 18px;
+        margin: 24px 0 32px 0;
+    }
+
+    .meetings-list-empty-icon {
+        display: inline-block;
+        margin-right: 8px;
+    }
+
     .button {
         background: #0074E0;
         border-radius: 4px;
@@ -32,7 +54,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        padding: 5px 10px;
+        padding: 8px;
         cursor: pointer;
     }
 
@@ -43,12 +65,13 @@
     }
 
     .item {
-        background: rgba(255,255,255,0.50);
+        background: #fff;
         box-sizing: border-box;
+        border-radius: 4px;
         display: inline-flex;
-        margin-top: 5px;
-        min-height: 92px;
-        width: 100%;
+        margin: 4px 4px 0 4px;
+        min-height: 60px;
+        width: calc(100% - 8px);
         word-break: break-word;
         display: flex;
         flex-direction: row;
@@ -61,45 +84,50 @@
         .left-column {
             display: flex;
             flex-direction: column;
-            width: 140px;
             flex-grow: 0;
-            padding-left: 30px;
-            padding-top: 25px;
-
-            .date {
-                font-weight: bold;
-                padding-bottom: 5px;
-            }
+            padding-left: 16px;
+            padding-top: 13px;
         }
 
         .right-column {
             display: flex;
             flex-direction: column;
             flex-grow: 1;
-            padding-left: 30px;
-            padding-top: 25px;
-
-            .title {
-                font-size: 16px;
-                font-weight: bold;
-                padding-bottom: 5px;
-            }
+            padding-left: 16px;
+            padding-top: 13px;
+            position: relative;
         }
 
+        .title {
+                font-size: 12px;
+                font-weight: 600;
+                line-height: 16px;
+                padding-bottom: 4px;
+            }
+
+        .subtitle {
+            color: #5E6D7A;
+            font-weight: normal;
+            font-size: 12px;
+            line-height: 16px;
+        }
+
+
         .actions {
             display: flex;
             align-items: center;
             justify-content: center;
             flex-grow: 0;
-            padding-right: 30px;
+            margin-right: 16px;
         }
 
         &.with-click-handler {
             cursor: pointer;
         }
 
-        &.with-click-handler:hover {
-            background-color: #75A7E7;
+        &.with-click-handler:hover,
+        &.with-click-handler:focus {
+            background-color: #c7ddff;
         }
 
         .add-button {
@@ -120,4 +148,20 @@
             display: block
         }
     }
+
+    .delete-meeting {
+        display: none;
+        margin-right: 16px;
+        position: absolute;
+
+        &> svg {
+            fill: #0074e0;
+        }
+    }
+
+    .item:hover, .item:focus, .item:focus-within {
+        .delete-meeting {
+            display: block;
+        }
+    }
 }

css/_mini_toolbox.scss

@@ -8,9 +8,11 @@
     .toolbox-icon {
         cursor: pointer;
         padding: 7px;
+        width: 22px;
+        height : 22px;
 
         &.toggled {
-            background: $AOTToolbarButtonToggleColor;
+            background: none;
         }
 
         &.disabled {
@@ -23,44 +25,11 @@
     flex-direction: row;
     left: 50%;
     position: absolute;
-    top: 10px;
+    bottom: 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;
-            }
-        }
-    }
+    padding: 3px !important;
 }
 
 .filmstrip-toolbox {
     flex-direction: column;
-
-    .toolbox-button {
-        &:nth-child(1) {
-            svg {
-                fill: $hangupColor;
-            }
-        }
-
-        .toolbox-icon {
-            border-radius: 3px;
-        }
-    }
-}
+}

css/_mixins.scss

@@ -206,3 +206,13 @@
     bottom: 0;
     width: 35%;
 }
+
+/**
+ * Resizes elements width to fill the whole screen width with some margin
+ */
+@mixin adjust-for-max-width($width, $margin) {
+    @media (max-width: $width) {
+        margin: 0 $margin;
+        width: $width - 2 * $margin;
+    }
+}

css/_participants-count.scss

@@ -1,26 +0,0 @@
-.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/_participants-pane.scss

@@ -0,0 +1,51 @@
+.participants_pane {
+    background-color: $participantsPaneBgColor;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    transition: width .16s ease-in-out;
+    width: 315px;
+    z-index: $zindex0;
+
+    &--closed {
+        width: 0;
+    }
+}
+
+.participants_pane-content {
+    display: flex;
+    flex-direction: column;
+    font-weight: 600;
+    height: 100%;
+    width: 315px;
+
+    & > *:first-child,
+    & > *:last-child {
+        flex-shrink: 0;
+    }
+}
+
+.participant-avatar {
+    margin: 8px 16px 8px 0;
+}
+
+@media (max-width: 375px) {
+    .participants_pane {
+        height: 100vh;
+        height: -webkit-fill-available;
+        left: 0;
+        position: fixed;
+        right: 0;
+        top: 0;
+        width: auto;
+
+        &--closed {
+            display: none;
+            width: auto;
+        }
+    }
+
+    .participants_pane-content {
+        width: 100%;
+    }
+}

css/_popover.scss

@@ -47,4 +47,5 @@
     border-radius: 3px;
     margin: -16px -24px;
     padding: 16px 24px;
+    z-index: $popoverZ;
 }

css/_popup_menu.scss

@@ -3,10 +3,11 @@
 **/
 
 .popupmenu {
-    min-width: 75px;
+    background-color: $menuBG;
+    border-radius: 3px;
+    min-width: 150px;
     text-align: left;
     padding: 0px;
-    width: 180px;
     white-space: nowrap;
 
     &__item {
@@ -39,6 +40,7 @@
 
     &__text {
         display: inline-block;
+        margin-left: 8px;
         vertical-align: middle;
     }
 
@@ -110,6 +112,6 @@ ul.popupmenu {
     margin: -16px -24px;
 }
 
-span.remotevideomenu:hover ul.popupmenu, ul.popupmenu:hover {
+span.localvideomenu:hover ul.popupmenu, span.remotevideomenu:hover ul.popupmenu, ul.popupmenu:hover {
     display:block !important;
 }

css/_prejoin-dialog.scss

@@ -96,6 +96,11 @@
             padding: 0 8px;
         }
     }
+
+    .prejoin-dialog-btn.primary,
+    .action-btn.prejoin-dialog-btn.text {
+        width: 310px;
+    }
 }
 
 .prejoin-dialog-callout {

css/_prejoin.scss

@@ -3,7 +3,15 @@
     &-input-area {
         margin: 0 auto;
         text-align: center;
-        width: 320px;
+
+       &-label {
+           display: block;
+           margin-bottom: 5px;
+           color: #ffffff;
+           font-weight: 300;
+           font-size: 15px;
+           line-height: 24px;
+       }
     }
 
     &-title {
@@ -36,15 +44,21 @@
     }
 
     &-checkbox-container {
-        align-items: center;
-        color: #fff;
-        display: none;
-        font-size: 13px;
-        justify-content: center;
-        line-height: 20px;
-        margin-top: 16px;
+        margin-bottom: 14px;
         width: 100%;
     }
+
+    &-error {
+        color: white;
+        background-color: rgba(225, 45, 45, 0.6);
+        border-radius: 3px;
+        width: 100%;
+        padding: 2px;
+        box-sizing: border-box;
+        margin-top: 4px;
+        font-size: 13px;
+        text-align: center;
+    }
 }
 
 @mixin name-placeholder {
@@ -54,91 +68,25 @@
 }
 
 .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;
-    }
-
-    &-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;
         align-self: stretch;
+        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.7)
+            background: rgba(241, 173, 51, 1);
         }
         &--ok {
-            background: rgba(49, 183, 106, 0.7);
+            background: rgba(49, 183, 106, 1);
         }
     }
 
@@ -153,6 +101,8 @@
 
     &-error-desc {
         margin-right: 4px;
+        color: #fff;
+        font-weight: bold;
     }
 
     .settings-button-container {
@@ -163,6 +113,8 @@
     &-dropdown-btns {
         width: 320px;
         padding: 8px 0;
+
+        @include adjust-for-max-width(320px, 8px);
     }
 
     &-dropdown-btn {
@@ -190,7 +142,9 @@
     }
 
     &-dropdown-container {
-        & > div > div:nth-child(2) > div > div {
+        margin-top: 16px;
+
+        & > div:nth-child(2) {
             background: #fff;
             padding: 0;
         }

css/_premeeting-screens.scss

@@ -1,26 +1,106 @@
 /**
  * Shared style for full screen local track based dialogs/modals.
  */
+ .premeeting-screen {
+     position: absolute;
+     left: 0;
+     right: 0;
+     top: 0;
+     bottom: 0;
+  }
+
  .premeeting-screen {
     align-items: stretch;
-    background: #1C2025;
-    bottom: 0;
+    background: radial-gradient(50% 50% at 50% 50%, #2A3A4B 20.83%, #1E2A36 100%);
     display: flex;
     flex-direction: column;
     font-size: 1.3em;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
     z-index: $toolbarZ + 1;
 
+    &-avatar {
+        background-color: #A4B8D1;
+        margin-bottom: 24px;
+
+        text {
+            fill: black;
+            font-size: 26px;
+            font-weight: 400;
+        }
+    }
+
+    .action-btn {
+        border-radius: 3px;
+        box-sizing: border-box;
+        color: #fff;
+        cursor: pointer;
+        display: inline-block;
+        font-size: 15px;
+        line-height: 24px;
+        padding: 7px 16px;
+        position: relative;
+        text-align: center;
+        width: 320px;
+
+        @include adjust-for-max-width(320px, 8px);
+
+        &.primary {
+            background: #0376DA;
+            border: 1px solid #0376DA;
+        }
+
+        &.secondary {
+            background: transparent;
+            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;
+
+            .icon {
+                & > svg {
+                    fill: #AFB6BC;
+                }
+            }
+        }
+
+        .options {
+            border-radius: 3px;
+            align-items: center;
+            display: flex;
+            height: 100%;
+            justify-content: center;
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 36px;
+
+            &:hover {
+                background-color: #0262B6;
+            }
+
+            svg {
+                pointer-events: none;
+            }
+        }
+    }
+
     .content {
         align-items: center;
-        background-image: linear-gradient(transparent, black);
         display: flex;
         flex: 1;
         flex-direction: column;
         justify-content: flex-end;
+        padding-bottom: 24px;
         z-index: $toolbarZ + 2;
 
         .title {
@@ -35,7 +115,7 @@
             cursor: pointer;
             color: #fff;
             display: flex;
-            flex-direction: row;
+            flex-direction: column;
             font-size: 15px;
             font-weight: 300;
             justify-content: center;
@@ -43,12 +123,14 @@
             margin-bottom: 16px;
 
             .url {
+                background: rgba(28, 32, 37, 0.5);
+                border-radius: 4px;
                 display: flex;
                 padding: 8px 10px;
+                transition: background 0.16s ease-out;
 
                 &:hover {
                     background: #1C2025;
-                    border-radius: 4px;
                 }
 
                 &.done {
@@ -59,6 +141,9 @@
                     margin-left: 10px;
                 }
             }
+            .copy-button{
+                width: 298px;
+             }
 
             .copy-meeting-text {
                 width: 266px;
@@ -81,80 +166,25 @@
         }
 
         input.field {
-            background-color: transparent;
-            border: 1px solid transparent;
-            color: white;
-            outline-width: 0;
-            padding: 8px 0;
-            text-align: center;
-            width: 100%;
-
-            &.focused {
-                border-bottom: 1px solid white;
-            }
-
-            &.error::placeholder {
-                color: $defaultWarningColor;
-            }
-        }
-
-        .action-btn {
+            background-color: white;
+            border: none;
+            outline: none;
             border-radius: 3px;
-            color: #fff;
-            cursor: pointer;
-            display: inline-block;
             font-size: 15px;
             line-height: 24px;
-            margin-top: 16px;
-            padding: 7px 16px;
-            position: relative;
+            color: #1C2025;
+            padding: 8px 0;
             text-align: center;
-            width: 286px;
+            width: 320px;
 
-            &.primary {
-                background: #0376DA;
-                border: 1px solid #0376DA;
+            @include adjust-for-max-width(320px, 8px);
+
+            &.error {
+                box-shadow: 0px 0px 4px 3px rgba(225, 45, 45, 0.4);
             }
 
-            &.secondary {
-                background: transparent;
-                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;
-
-                .icon {
-                    & > svg {
-                        fill: #AFB6BC;
-                    }
-                }
-
-                .options {
-                    border-left: 1px solid #AFB6BC;
-                }
-            }
-
-            .options {
-                align-items: center;
-                border-left: 1px solid #fff;
-                display: flex;
-                height: 100%;
-                justify-content: center;
-                position: absolute;
-                right: 0;
-                top: 0;
-                width: 40px;
+            &.focused {
+                box-shadow: 0px 0px 1px 1.5px black, 0px 0px 1.3px 4px white;
             }
         }
     }
@@ -162,20 +192,12 @@
     .media-btn-container {
         display: flex;
         justify-content: center;
-        margin: 32px 0;
+        margin: 24px 0 16px 0;
         width: 100%;
 
         &> div {
             margin: 0 12px;
         }
-
-        .settings-button-small-icon {
-            right: -8px;
-
-            &--hovered {
-                right: -10px;
-            }
-        }
     }
 }
 
@@ -191,7 +213,7 @@
 
     .avatar {
         background: #A4B8D1;
-        margin: 200px auto 0 auto;
+        margin: 0 auto;
     }
 
     video {
@@ -201,3 +223,76 @@
         width: 100%;
     }
 }
+
+@mixin flex-centered() {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+
+@mixin icon-container($bg, $fill) {
+    .toggle-button-icon-container {
+        background: $bg;
+
+        svg {
+            fill: $fill
+        }
+    }
+}
+
+.toggle-button {
+    border-radius: 3px;
+    cursor: pointer;
+    color: #fff;
+    font-size: 13px;
+    height: 40px;
+    margin: 0 auto;
+    transition: background 0.16s ease-out;
+    width: 320px;
+
+    @include adjust-for-max-width(320px, 8px);
+    @include flex-centered();
+
+    svg {
+        fill: transparent;
+    }
+
+    label {
+        cursor: pointer;
+    }
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.1);
+
+        .toggle-button-icon-container {
+            display: none;
+        }
+    }
+
+    &-container {
+        position: relative;
+
+        @include flex-centered();
+    }
+
+    &-icon-container {
+        border-radius: 50%;
+        left: -22px;
+        padding: 2px;
+        position: absolute;
+    }
+
+    &--toggled {
+        @include icon-container(white, #1C2025);
+
+        &:hover {
+            .toggle-button-icon-container {
+                display: block;
+            }
+        }
+
+        .toggle-button-icon-container {
+            display: block;
+        }
+    }
+}

css/_reactions-menu.scss

@@ -0,0 +1,189 @@
+@use 'sass:math';
+
+.reactions-menu {
+	width: 280px;
+	background: #292929;
+	box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.6), 0px 0px 4px 1px rgba(0, 0, 0, 0.25);
+	border-radius: 3px;
+	padding: 16px;
+
+	&.overflow {
+		width: auto;
+		padding-bottom: max(env(safe-area-inset-bottom, 0), 16px);
+		background-color: #141414;
+		box-shadow: none;
+		border-radius: 0;
+		position: relative;
+
+		.toolbox-icon {
+			width: 48px;
+			height: 48px;
+
+			span.emoji {
+				width: 48px;
+				height: 48px;
+			}
+		}
+
+		.reactions-row {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-around;
+
+			.toolbox-button {
+				margin-right: 0;
+			}
+		}
+	}
+
+	.toolbox-icon {
+		width: 40px;
+		height: 40px;
+		border-radius: 6px;
+
+		span.emoji {
+			width: 40px;
+			height: 40px;
+			font-size: 22px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+
+	.reactions-row {
+		.toolbox-button {
+			margin-right: 8px;
+			touch-action: manipulation;
+		}
+
+		.toolbox-button:last-of-type {
+			margin-right: 0;
+		}
+	}
+
+	.raise-hand-row {
+		margin-top: 16px;
+
+		.toolbox-button {
+			width: 100%;
+		}
+
+		.toolbox-icon {
+			width: 100%;
+			flex-direction: row;
+			align-items: center;
+
+			span.text {
+				font-style: normal;
+				font-weight: 600;
+				font-size: 14px;
+				line-height: 24px;
+				margin-left: 8px;
+			}
+		}
+	}
+}
+
+.reactions-animations-container {
+	position: absolute;
+	width: 20%;
+	bottom: 0;
+	left: 40%;
+	height: 0;
+}
+
+.reactions-menu-popup-container,
+.reactions-menu-popup {
+	display: inline-block;
+	position: relative;
+}
+
+$reactionCount: 20;
+
+@function random($min, $max) {
+  @return math.random() * ($max - $min) + $min;
+}
+
+.reaction-emoji {
+	position: absolute;
+	font-size: 24px;
+	line-height: 32px;
+	width: 32px;
+	height: 32px;
+	top: 0;
+	left: 20px;
+	opacity: 0;
+	z-index: 1;
+
+	&.reaction-0 {
+		animation: flowToRight 5s forwards ease-in-out;
+	}
+
+	@for $i from 1 through $reactionCount {
+	&.reaction-#{$i} {
+		animation: animation-#{$i} 5s forwards ease-in-out;
+		top: #{random(-40, 10)}px;
+		left: #{random(0, 30)}px;
+	}
+}
+}
+
+@keyframes flowToRight {
+	0% {
+		transform: translate(0px, 0px) scale(0.6);
+		opacity: 1;
+	}
+
+	70% {
+		transform: translate(40px, -70vh) scale(1.5);
+		opacity: 1;
+	}
+
+	75% {
+		transform: translate(40px, -70vh) scale(1.5);
+		opacity: 1;
+	}
+
+	100% {
+		transform: translate(140px, -50vh) scale(1);
+		opacity: 0;
+	}
+}
+
+@mixin animation-list {
+	@for $i from 1 through $reactionCount {
+		$topX: random(-100, 100);
+		$topY: random(65, 75);
+		$bottomX: random(150, 200);
+		$bottomY: random(40, 50);
+
+		@if $topX < 0 {
+			$bottomX: -$bottomX;
+		}
+
+		@keyframes animation-#{$i} {
+			0% {
+				transform: translate(0, 0) scale(0.6);
+				opacity: 1;
+			}
+
+			70% {
+				transform: translate(#{$topX}px, -#{$topY}vh) scale(1.5);
+				opacity: 1;
+			}
+
+			75% {
+				transform: translate(#{$topX}px, -#{$topY}vh) scale(1.5);
+				opacity: 1;
+			}
+
+			100% {
+				transform: translate(#{$bottomX}px, -#{$bottomY}vh) scale(1);
+				opacity: 0;
+			}
+		}
+	}
+}
+
+@include animation-list;

css/_recording.scss

@@ -105,6 +105,7 @@
 
     .helper-link {
         cursor: pointer;
+        font-weight: bold;
         display: inline-block;
         flex-shrink: 0;
         margin-left: auto;

css/_responsive.scss

@@ -0,0 +1,85 @@
+@media only screen and (max-width: $verySmallScreen) {
+    .welcome {
+        display: block;
+
+        #enter_room {
+            position: relative;
+            height: 42px;
+
+            .welcome-page-button {
+            font-size: 16px;
+            left: 0;
+            position: absolute;
+            top: 68px;
+            text-align: center;
+            width: 100%;
+            }
+        }
+
+        .header {
+            background-color: #002637;
+
+            #enter_room {
+                .enter-room-input-container {
+                    padding-right: 0;
+                }
+
+                .warning-without-link,
+                .warning-with-link {
+                    top: 120px;
+                }
+            }
+        }
+
+        .welcome-tabs {
+            display: none;
+        }
+
+        .header-text-title {
+            text-align: center;
+        }
+
+        .welcome-cards-container {
+            padding: 0;
+        }
+
+        &.without-content {
+            .header {
+            height: 100%;
+            }
+        }
+
+        #moderated-meetings {
+            display: none;
+        }
+
+        .welcome-footer-row-block {
+            display: block;
+        }
+        .welcome-badge {
+            margin-right: 16px;
+        }
+
+        .welcome-footer {
+            display: none;
+        }
+    }
+}
+
+.desktop-browser {
+    &.shift-right {
+
+        @media only screen and (max-width: $verySmallScreen + $sidebarWidth) {
+
+            #videoResolutionLabel {
+                display: none;
+            }
+            .vertical-filmstrip .filmstrip {
+                display: none;
+            }
+            .chrome-extension-banner {
+                display: none;
+            }
+        }
+    }
+}

css/_settings-button.scss

@@ -1,84 +1,62 @@
-.settings-button {
-    &-container {
-        position: relative;
+.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;
+    .toolbox-icon {
+        align-items: center;
+        border-radius: 3px;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+
+        &.disabled, .disabled & {
+            cursor: initial;
+            color: #929292;
+            background-color: #36383c;
 
             &: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;
-
-                &:hover {
-                    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;
+                background-color: #36383c;
             }
         }
     }
 }
+
+.settings-button-small-icon {
+    background: #36383C;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+    cursor: pointer;
+    padding: 4px;
+    position: absolute;
+    right: -4px;
+    top: -3px;
+
+   &:hover {
+        background: #F2F3F4;
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+
+        &> svg {
+            fill: #000;
+        }
+
+        &.settings-button-small-icon--disabled {
+            background: #36383C;
+
+            &> svg {
+               fill: #929292;
+           }
+        }
+    }
+
+    &> svg {
+        fill: #fff;
+    }
+
+    &--disabled {
+        background-color: #36383c;
+        cursor: default;
+
+        &> svg {
+            fill: #929292;
+        }
+    }
+}

css/_subject.scss

@@ -1,32 +1,83 @@
 .subject {
+    box-sizing: border-box;
+    color: #fff;
+    margin-top: 20px;
+    position: absolute;
     top: -120px;
     transition: top .3s ease-in;
-    height: 95px;
     width: 100%;
-    pointer-events: none;
-    position: absolute;
-    padding: 25px 140px 0 140px;
-    text-align: center;
-    font-size: 17px;
-    color: #fff;
-    z-index: $zindex10;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    box-sizing: border-box;
-    white-space: nowrap;
-    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    z-index: $zindex3;
 
     &.visible {
-        top: 0px;
+        top: 0;
     }
 
-    &-text {
-        vertical-align: middle;
-    }
+    &.recording {
+        top: 0;
 
-    &-conference-timer {
-        display: block;
-        font-size: 15px;
-        opacity: 0.6;
+        .subject-details-container {
+            opacity: 0;
+            transition: opacity .3s ease-in;
+        }
+
+        .subject-info-container .show-always {
+            transition: margin-left .3s ease-in;
+        }
+
+        &.visible {
+            .subject-details-container {
+                opacity: 1;
+            }
+        }
     }
 }
+
+.subject-details-container {
+    display: flex;
+}
+
+.subject-info-container {
+    display: flex;
+    justify-content: center;
+    max-width: calc(100% - 280px);
+    margin: 0 auto;
+
+    &--full-width {
+        max-width: 100%;
+    }
+
+    @media (max-width: 500px) {
+        flex-wrap: wrap;
+        max-width: 100%;
+    }
+}
+
+.subject-info {
+    align-items: center;
+    display: flex;
+    margin-bottom: 4px;
+    max-width: 80%;
+    height: 28px;
+}
+
+.subject-text {
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 3px 0px 0px 3px;
+    font-size: 14px;
+    line-height: 24px;
+    padding: 2px 16px;
+    height: 24px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.subject-timer {
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: 0px 3px 3px 0px;
+    display: inline-block;
+    font-size: 12px;
+    line-height: 16px;
+    min-width: 34px;
+    padding: 6px 8px;
+}

css/_toolbars.scss

@@ -33,243 +33,262 @@
 
     &.visible {
         bottom: 0;
-        .toolbox-background {
-            bottom: 0px;
-        }
     }
 
     &.no-buttons {
         display: none;
     }
 
-    .toolbox-background {
-        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
-        transition: bottom .3s ease-in;
-        height: 160px;
-        width: 100%;
-        bottom: -160px;
+    @media (min-width: 581px) {
+        &.shift-right {
+            margin-left: $sidebarWidth;
+            width: calc(100% - #{$sidebarWidth});
+        }
+    }
+}
+
+.toolbox-content {
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    margin-bottom: 16px;
+    position: relative;
+    z-index: $toolbarZ;
+    pointer-events: none;
+
+    .button-group-center,
+    .button-group-left,
+    .button-group-right {
+        display: flex;
+        width: 33%;
+    }
+
+    .button-group-center {
+        justify-content: center;
+    }
+
+    .button-group-right {
+        justify-content: flex-end;
+    }
+
+    .toolbox-button-wth-dialog {
+        display: inline-block;
+    }
+}
+
+.toolbox-button {
+    color: $toolbarButtonColor;
+    cursor: pointer;
+    display: inline-block;
+    line-height: $newToolbarSize;
+    text-align: center;
+}
+
+.toolbar-button-with-badge {
+    display: inline-block;
+    position: relative;
+
+    .badge-round {
+        bottom: -5px;
+        font-size: 12px;
+        line-height: 20px;
+        min-width: 20px;
         pointer-events: none;
         position: absolute;
-        z-index: $toolbarBackgroundZ;
+        right: -5px;
+    }
+}
+
+.toolbox-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    max-width: 100%;
+    pointer-events: all;
+    border-radius: 6px;
+}
+
+.toolbox-content-wrapper::after {
+    content: '';
+    background: $newToolbarBackgroundColor;
+    padding-bottom: env(safe-area-inset-bottom, 0);
+}
+
+.toolbox-content-items {
+    background: $newToolbarBackgroundColor;
+    border-radius: 6px;
+    margin: 0 auto;
+    padding: 6px;
+    text-align: center;
+    pointer-events: all;
+    box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
+
+    >div {
+        margin-left: 8px;
+
+        &:first-child {
+            margin-left: 0;
+        }
+    }
+}
+
+.overflow-menu {
+    font-size: 14px;
+    list-style-type: none;
+    padding: 8px 0;
+    background-color: $menuBG;
+
+    .profile-text {
+        max-width: 150px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+}
+
+.overflow-menu-item {
+    align-items: center;
+    color: $overflowMenuItemColor;
+    cursor: pointer;
+    display: flex;
+    font-size: 14px;
+    font-weight: 400;
+    height: 40px;
+    line-height: 24px;
+    padding: 8px 16px;
+    box-sizing: border-box;
+
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            background: $overflowMenuItemBackground;
+        }
     }
 
-    .toolbox-content {
-        box-sizing: border-box;
+    div {
         display: flex;
-        justify-content: space-between;
-        margin-left: auto;
-        margin-right: auto;
-        padding: 20px 16px;
-        position: relative;
-        width: 100%;
-        z-index: $toolbarZ;
+        flex-direction: row;
+        align-items: center;
+    }
 
-        .button-group-center,
-        .button-group-left,
-        .button-group-right {
-            display: flex;
-            width: 33%;
+    &.unclickable {
+        cursor: default;
+    }
+    &.disabled {
+        cursor: initial;
+        color: #929292;
+
+        &:hover {
+            background: none;
         }
 
-        .button-group-center {
-            justify-content: center;
-
-            .toolbox-button {
-
-                .toolbox-icon {
-                    background-color: #fff;
-                    border-radius: 50%;
-                    border: 1px solid #d1dbe8;
-                    margin: 0px 4px;
-                    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;
-                    }
-                }
-
-                &:nth-child(2) {
-                    .toolbox-icon {
-                        background-color: $hangupColor;
-                        border: 1px solid $hangupColor;
-                        width: 40px;
-                        height: 40px;
-                
-                        &:hover {
-                            background-color: $hangupColor;
-                        }
-
-                        svg {
-                            fill: #fff;
-                        }
-                    }
-                }
-            }
+        svg {
+            fill: #929292;
         }
 
-        .button-group-right {
-            justify-content: flex-end;
-        }
+    }
 
-        .overflow-menu {
-            font-size: 1.2em;
-            list-style-type: none;
-            background-color: $overflowMenuBG;
-            /**
-             * Undo atlaskit padding by reducing margins.
-             */
-            margin: -16px -24px;
-            padding: 4px 0;
-
-            .overflow-menu-item {
-                align-items: center;
-                color: $overflowMenuItemColor;
-                cursor: pointer;
-                display: flex;
-                font-size: 14px;
-                height: 22px;
-                padding: 5px 12px;
-
-                div {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-                }
-
-                &:hover {
-                    background-color: $overflowMenuItemHoverBG;
-                    color: $overflowMenuItemHoverColor;
-                }
-
-                &.unclickable {
-                    cursor: default;
-                }
-                &.unclickable:hover {
-                    background: inherit;
-                }
-                &.disabled {
-                    cursor: initial;
-                    color: #3b475c;
-                }
-            }
-
-            .beta-tag {
-                background: $overflowMenuItemColor;
-                border-radius: 2px;
-                color: $overflowMenuBG;
-                font-size: 11px;
-                font-weight: bold;
-                margin-left: 8px;
-                padding: 0 6px;
-            }
-
-            .overflow-menu-item-icon {
-                margin-right: 10px;
-
-                i {
-                    display: inline;
-                    font-size: 24px;
-                }
-
-                i:hover {
-                    background-color: initial;
-                }
-
-                img {
-                    max-width: 24px;
-                    max-height: 24px;
-                }
-
-                svg {
-                    fill: #B8C7E0 !important;
-                }
-            }
-
-            .profile-text {
-                max-width: 150px;
-                text-overflow: ellipsis;
-                overflow: hidden;
-                white-space: nowrap;
-            }
-        }
-
-        .toolbox-button {
-            color: $toolbarButtonColor;
-            cursor: pointer;
-            display: inline-block;
-            line-height: $newToolbarSize;
-            margin: 0 8px;
-            text-align: center;
-        }
-
-        .toolbar-button-with-badge {
-            position: relative;
-
-            .badge-round {
-                bottom: -5px;
-                font-size: 12px;
-                line-height: 20px;
-                min-width: 20px;
-                pointer-events: none;
-                position: absolute;
-                right: -5px;
-            }
-        }
-
-        .toolbox-button-wth-dialog {
-            display: inline-block;
-        }
-
-        .toolbox-icon {
-            display: flex;
-            border-radius: 5px;
-            flex-direction: column;
-            font-size: 24px;
-            height: $newToolbarSize;
-            justify-content: center;
-            width: $newToolbarSize;
-
-            &:hover, &.toggled {
-                background: $newToolbarButtonHoverColor;
-            }
-    
-            &.disabled {
-                cursor: initial !important;
-                background-color: #a4b8d1 !important;
-
-                svg {
-                    fill: #fff !important;
-                }
-            }
+    @media (hover: hover) and (pointer: fine) {
+        &.unclickable:hover {
+            background: inherit;
         }
     }
 }
 
+.beta-tag {
+    background: #36383C;
+    border-radius: 3px;
+    color: #fff;
+    font-size: 12px;
+    margin-left: 8px;
+    padding: 0 4px;
+    text-transform: uppercase;
+}
+
+.overflow-menu-item-icon {
+    margin-right: 16px;
+
+    i {
+        display: inline;
+        font-size: 24px;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+        i:hover {
+            background-color: initial;
+        }
+    }
+
+    img {
+        max-width: 24px;
+        max-height: 24px;
+    }
+
+    svg {
+        fill: #fff;
+        height: 20px;
+        width: 20px;
+    }
+}
+
+
+.overflow-menu-hr {
+    border-top: 1px solid #4C4D50;
+    border-bottom: 0;
+    margin: 8px 0;
+}
+
+.toolbox-icon {
+    display: flex;
+    border-radius: 3px;
+    flex-direction: column;
+    font-size: 24px;
+    height: $newToolbarSize;
+    justify-content: center;
+    width: $newToolbarSize;
+
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            background: $newToolbarButtonHoverColor;
+        }
+    }
+
+    @media (max-width: 320px) {
+        height: 36px;
+        width: 36px;
+    }
+
+    &.toggled {
+        background: $newToolbarButtonToggleColor;
+    }
+
+    &.disabled {
+        cursor: initial !important;
+        background-color: #36383c !important;
+
+        svg {
+            fill: #929292 !important;
+        }
+    }
+}
+
+.hangup-button {
+    background-color: $hangupColor;
+
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            background-color: $hangupHoverColor;
+        }
+    }
+
+    svg {
+        fill: #fff;
+    }
+}
+
+.profile-button-avatar {
+    align-items: center;
+}
+
 /**
  * START of fade in animation for main toolbar
  */
@@ -284,3 +303,47 @@
 
     @include transition(all .3s ease-out);
 }
+
+/**
+ * Audio and video buttons do not have toggled state.
+ */
+.audio-preview,
+.video-preview {
+    .toolbox-icon.toggled {
+        background: none;
+
+        &:hover {
+            background: $newToolbarButtonHoverColor;
+        }
+    }
+
+}
+
+/**
+ * On small mobile devices make the toolbar full width and pad the invite prompt.
+ */
+.toolbox-content-mobile {
+    @media (max-width: 500px) {
+        margin-bottom: 0;
+
+        .toolbox-content-wrapper {
+            width: 100%;
+        }
+
+        .toolbox-content-items {
+            border-radius: 0;
+            display: flex;
+            justify-content: space-evenly;
+            padding: 6px 0;
+            width: 100%;
+        }
+
+        .invite-more-container {
+            margin: 0 16px 8px;
+        }
+
+        .invite-more-container.elevated {
+            margin-bottom: 52px;
+        }
+    }
+}

css/_transcription-subtitles.scss

@@ -1,10 +1,11 @@
-.transcription-subtitles{
-    bottom: 10%;
+.transcription-subtitles {
+    bottom: $newToolbarSize + 40px;
     font-size: 16px;
     font-weight: 1000;
     left: 50%;
     max-width: 50vw;
     opacity: 0.80;
+    overflow-wrap: break-word;
     pointer-events: none;
     position: absolute;
     text-shadow: 0px 0px 1px rgba(0,0,0,0.3),
@@ -12,7 +13,12 @@
     1px 0px 1px rgba(0,0,0,0.3),
     0px 0px 1px rgba(0,0,0,0.3);
     transform: translateX(-50%);
-    z-index: $filmstripVideosZ + 1;
+    z-index: $subtitlesZ;
+
+    &.lifted {
+        // Lift subtitle above toolbar+dominant speaker box.
+        bottom: $newToolbarSize + 36px + 40px;
+    }
 
     span {
         background: black;

css/_variables.scss

@@ -4,7 +4,8 @@
  * Style variables
  */
 $baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$hangupColor: #bf2117;
+$hangupColor:#DD3849;
+$hangupHoverColor: #F25363;
 $hangupFontSize: 2em;
 
 /**
@@ -29,6 +30,7 @@ $defaultSideBarFontColor: #44A5FF;
 $defaultSemiDarkColor: #ACACAC;
 $defaultDarkColor: #2b3d5c;
 $defaultWarningColor: rgb(215, 121, 118);
+$participantsPaneBgColor: #141414;
 $presence-available: rgb(110, 176, 5);
 $presence-away: rgb(250, 201, 20);
 $presence-busy: rgb(233, 0, 27);
@@ -37,20 +39,19 @@ $presence-idle: rgb(172, 172, 172);
 /**
  * Toolbar
  */
-$newToolbarBackgroundColor: rgba(22, 38, 55, 0.8);
-$newToolbarButtonHoverColor: rgba(255, 255, 255, 0.15);
-$newToolbarButtonToggleColor: rgba(255, 255, 255, 0.2);
-$AOTToolbarButtonHoverColor: rgba(14, 20, 35, 0.6);
-$AOTToolbarButtonToggleColor: rgba(14, 20, 35, 1);
+$newToolbarBackgroundColor: #131519;
+$newToolbarButtonHoverColor: rgba(255, 255, 255, 0.2);
+$newToolbarButtonToggleColor: rgba(255, 255, 255, 0.15);
+$menuBG:#242528;
 $newToolbarFontSize: 24px;
 $newToolbarHangupFontSize: 32px;
-$newToolbarSize: 40px;
+$newToolbarSize: 48px;
+$newToolbarSizeMobile: 60px;
 $newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px);
 $toolbarTitleFontSize: 19px;
-$overflowMenuBG: initial;
-$overflowMenuItemHoverBG: #313D52;
-$overflowMenuItemHoverColor: #B8C7E0;
-$overflowMenuItemColor: #B8C7E0;
+$overflowMenuItemColor: #fff;
+$overflowMenuItemBackground: #36383C;
+
 
 /**
  * Video layout
@@ -90,12 +91,12 @@ $modalTextColor: #333;
  * Chat
  */
 $chatActionsSeparatorColor: rgb(173, 105, 112);
-$chatHeaderBackgroundColor: rgba(42, 58, 75, 0.9);
+$chatBackgroundColor: #131519;
 $chatInputSeparatorColor: #A4B8D1;
-$chatLocalMessageBackgroundColor: rgb(4, 98, 178);
+$chatLocalMessageBackgroundColor: #484A4F;
 $chatPrivateMessageBackgroundColor: rgb(153, 69, 77);
-$chatRemoteMessageBackgroundColor:  rgb(86, 101, 114);
-$sidebarWidth: 375px;
+$chatRemoteMessageBackgroundColor:  #242528;
+$sidebarWidth: 315px;
 
  /**
  * Misc.
@@ -114,19 +115,24 @@ $zindex1: 1;
 $zindex2: 2;
 $zindex3: 3;
 $toolbarBackgroundZ: 4;
-$filmstripVideosZ: 5;
+$labelsZ: 5;
+$subtitlesZ: 7;
+$popoverZ: 8;
 $zindex10: 10;
 $reloadZ: 20;
 $poweredByZ: 100;
 $ringingZ: 300;
-$sideToolbarContainerZ: 300;
-$toolbarZ: 350;
+$sideToolbarContainerZ: 200;
+$toolbarZ: 250;
+$drawerZ: 351;
 $tooltipsZ: 401;
 $dropdownMaskZ: 900;
 $dropdownZ: 901;
 $centeredVideoLabelZ: 1010;
-$popoverZ: 1015;
 $overlayZ: 1016;
+// Place filmstrip videos over toolbar in order
+// to make connection info visible.
+$filmstripVideosZ: $toolbarZ + 1;
 
 
 /**
@@ -161,64 +167,47 @@ $unsupportedDesktopBrowserTextFontSize: 21px;
 /**
  * The size of the default watermark.
  */
-$watermarkWidth: 186px;
-$watermarkHeight: 74px;
+$watermarkWidth: 71px;
+$watermarkHeight: 32px;
+
+$welcomePageWatermarkWidth: 71px;
+$welcomePageWatermarkHeight: 32px;
 
 /**
  * Welcome page variables.
  */
 $welcomePageDescriptionColor: #fff;
 $welcomePageFontFamily: inherit;
-$welcomePageBackground: linear-gradient(-90deg, #1251AE 0%, #0074FF 50%, #1251AE 100%);
+$welcomePageBackground: none;
 $welcomePageTitleColor: #fff;
 
-$welcomePageHeaderBackground: none;
-$welcomePageHeaderBackgroundSmall: none;
-$welcomePageHeaderBackgroundPosition: none;
+$welcomePageHeaderBackground: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../images/welcome-background.png');
+$welcomePageHeaderBackgroundPosition: center;
 $welcomePageHeaderBackgroundRepeat: none;
-$welcomePageHeaderBackgroundSize: none;
+$welcomePageHeaderBackgroundSize: cover;
 $welcomePageHeaderPaddingBottom: 0px;
+$welcomePageHeaderTitleMaxWidth: initial;
+$welcomePageHeaderTextAlign: center;
 
-$welcomePageHeaderTextMarginTop: 35px;
-$welcomePageHeaderTextMarginBottom: 35px;
+$welcomePageHeaderContainerDisplay: flex;
+$welcomePageHeaderContainerMargin: 104px 32px 0 32px;
 
-$welcomePageHeaderTextTitleMarginBottom: 16px;
-$welcomePageHeaderTextTitleFontSize: 2.5rem;
-$welcomePageHeaderTextTitleFontWeight: 500;
-$welcomePageHeaderTextTitleLineHeight: 1.18;
+$welcomePageHeaderTextTitleMarginBottom: 0;
+$welcomePageHeaderTextTitleFontSize: 42px;
+$welcomePageHeaderTextTitleFontWeight: normal;
+$welcomePageHeaderTextTitleLineHeight: 50px;
 $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;
+$welcomePageEnterRoomDisplay: flex;
+$welcomePageEnterRoomWidth: calc(100% - 32px);
+$welcomePageEnterRoomPadding: 4px;
+$welcomePageEnterRoomMargin: 0 auto;
 
 $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.
  */
@@ -269,3 +258,9 @@ $chromeExtensionBannerTop: 80px;
 $chromeExtensionBannerRight: 16px;
 $chromeExtensionBannerTopInMeeting: 10px;
 $chromeExtensionBannerRightInMeeeting: 10px;
+
+/**
+* media type thresholds
+*/
+$smallScreen: 700px;
+$verySmallScreen: 500px;

css/_video-preview.scss

@@ -1,18 +1,21 @@
 .video-preview {
     background: none;
-    max-height: 290px;
+    display: inline-block;
+    max-height: 344px;
 
     &-container {
+        background: $menuBG;
+        border-radius: 3px;
         overflow: auto;
-        padding: 16px;
+        padding: 8px;
     }
 
     &-entry {
         cursor: pointer;
-        height: 135px;
-        margin-bottom: 16px;
+        height: 168px;
+        margin-bottom: 8px;
         position: relative;
-        width: 240px;
+        width: 284px;
 
         &:last-child {
             margin-bottom: 0;
@@ -20,13 +23,15 @@
 
         &--selected {
             border: 3px solid #31B76A;
+            border-radius: 3px;
             cursor: default;
-            height: 129px;
-            width: 234px;
+            height: 162px;
+            width: 278px;
         }
     }
 
     &-video {
+        border-radius: 3px;
         height: 100%;
         object-fit: cover;
         width: 100%;
@@ -50,21 +55,32 @@
     }
 
     &-label {
+        bottom: 8px;
         color: #fff;
-        font-size: 13px;
-        line-height: 20px;
-        overflow: hidden;
-        padding: 8px;
         position: absolute;
-        text-align: center;
-        text-overflow: ellipsis;
-        width: 220px;
+        width: 100%;
         z-index: 2;
-    }
 
+        &-container {
+            margin: 0 16px;
+        }
+
+        &-text {
+            background-color: #131519;
+            border-radius: 3px;
+            padding: 2px 8px;
+            font-size: 13px;
+            line-height: 20px;
+            margin: 0 auto;
+            max-width: calc(100% - 16px);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            width: fit-content;
+            white-space: nowrap;
+        }
+    }
     // Override @atlaskit/InlineDialog container which is made with styled components
-    & > div > div:nth-child(2) > div > div {
-        outline: none;
+    & > div:nth-child(2) {
         padding: 0;
     }
 }

css/_videolayout_default.scss

@@ -1,5 +1,13 @@
 #videoconference_page {
     min-height: 100%;
+    position: relative;
+    transform: translate3d(0, 0, 0);
+    width: 100%;
+}
+
+#layout_wrapper {
+    display: flex;
+    height: 100%;
 }
 
 #videospace {
@@ -181,6 +189,15 @@
         visibility: hidden;
         z-index: $zindex2;
     }
+
+    @media (min-width: 581px) {
+        &.shift-right {
+            &#largeVideoContainer {
+                margin-left: $sidebarWidth;
+                width: calc(100% - #{$sidebarWidth});
+            }
+        }
+    }
 }
 
 #localVideoWrapper {
@@ -223,6 +240,15 @@
     object-fit: cover;
 }
 
+#sharedVideo video {
+    width: 100%;
+    height: 100%;
+}
+
+#sharedVideo.disable-pointer {
+    pointer-events: none;
+}
+
 #sharedVideo,
 #etherpad,
 #localVideoWrapper video,
@@ -391,7 +417,9 @@
     }
 }
 
+.local-video-menu-trigger,
 .remote-video-menu-trigger,
+.localvideomenu,
 .remotevideomenu
 {
     display: inline-block;
@@ -400,7 +428,7 @@
     right: 0;
     z-index: $zindex2;
     width: 18px;
-    height: 13px;
+    height: 18px;
     color: #FFF;
     font-size: 10pt;
     margin-right: $remoteVideoMenuIconMargin;
@@ -409,6 +437,7 @@
         cursor: hand;
     }
 }
+.local-video-menu-trigger,
 .remote-video-menu-trigger {
     margin-top: 7px;
 }
@@ -471,14 +500,6 @@
     z-index: $reloadZ; /*The reload button should appear on top of the header!*/
 }
 
-.audiolevel {
-    display: inline-block;
-    position: absolute;
-    z-index: $zindex0;
-    border-radius:1px;
-    pointer-events: none;
-}
-
 #dominantSpeaker {
     visibility: hidden;
     width: 300px;

css/_welcome_page.scss

@@ -5,6 +5,7 @@ body.welcome-page {
 
 .welcome {
     background-image: $welcomePageBackground;
+    background-color: #fff;
     display: flex;
     flex-direction: column;
     font-family: $welcomePageFontFamily;
@@ -18,21 +19,15 @@ body.welcome-page {
         background-repeat: $welcomePageHeaderBackgroundRepeat;
         background-size: $welcomePageHeaderBackgroundSize;
         padding-bottom: $welcomePageHeaderPaddingBottom;
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        min-height: fit-content;
+        background-color: #131519;
+        height: 400px;
         overflow: hidden;
         position: relative;
-        text-align: center;
 
-        .header-text {
-            display: flex;
+        .header-container {
+            display: $welcomePageHeaderContainerDisplay;
             flex-direction: column;
-            margin-top: $watermarkHeight + $welcomePageHeaderTextMarginTop;
-            margin-bottom: $welcomePageHeaderTextMarginBottom;
-            max-width: calc(100% - 40px);
-            width: 650px;
+            margin: $welcomePageHeaderContainerMargin;
             z-index: $zindex2;
         }
 
@@ -42,50 +37,52 @@ body.welcome-page {
             font-weight: $welcomePageHeaderTextTitleFontWeight;
             line-height: $welcomePageHeaderTextTitleLineHeight;
             margin-bottom: $welcomePageHeaderTextTitleMarginBottom;
+            max-width: $welcomePageHeaderTitleMaxWidth;
             opacity: $welcomePageHeaderTextTitleOpacity;
+            text-align: $welcomePageHeaderTextAlign;
         }
 
-        .header-text-description {
-            display: $welcomePageHeaderTextDescriptionDisplay;
-            color: $welcomePageDescriptionColor;
-            font-size: $welcomePageHeaderTextDescriptionFontSize;
-            font-weight: $welcomePageHeaderTextDescriptionFontWeight;
-            line-height: $welcomePageHeaderTextDescriptionLineHeight;
-            margin-bottom: $welcomePageHeaderTextDescriptionMarginBottom;
-            align-self: $welcomePageHeaderTextDescriptionAlignSelf;
+        .header-text-subtitle {
+            color: #fff;
+            font-size: 20px;
+            font-weight: 600;
+            line-height: 26px;
+            margin: 16px 0 32px 0;
+            text-align: $welcomePageHeaderTextAlign;
+
         }
 
         #enter_room {
-            display: flex;
+            display: $welcomePageEnterRoomDisplay;
             align-items: center;
-            max-width: calc(100% - 40px);
+            max-width: 480px;
             width: $welcomePageEnterRoomWidth;
             z-index: $zindex2;
             background-color: #fff;
             padding: $welcomePageEnterRoomPadding;
-            border-radius: $welcomePageEnterRoomBorderRadius;
+            border-radius: 4px;
+            margin: $welcomePageEnterRoomMargin;
 
             .enter-room-input-container {
-                width: 100%;
-                padding: $welcomePageEnterRoomInputContainerPadding;
                 text-align: left;
                 color: #253858;
+                flex-grow: 1;
                 height: fit-content;
-
-                .enter-room-title {
-                    display: $welcomePageEnterRoomTitleDisplay;
-                    font-size: 18px;
-                    font-weight: bold;
-                    padding-bottom: 5px;
-                }
+                padding-right: 4px;
+                position: relative;
 
                 .enter-room-input {
-                    border-width: $welcomePageEnterRoomInputContainerBorderWidth;
-                    border-style: $welcomePageEnterRoomInputContainerBorderStyle;
-                    border-image: $welcomePageEnterRoomInputContainerBorderImage;
+                    border: 0;
+                    background: #fff;
                     display: inline-block;
+                    height: 50px;
                     width: 100%;
                     font-size: 14px;
+                    padding-left: 10px;
+
+                    &:focus {
+                        outline: auto 2px #005fcc;
+                    }
                 }
 
                 .insecure-room-name-warning {
@@ -93,7 +90,7 @@ body.welcome-page {
                     color: $defaultWarningColor;
                     display: flex;
                     flex-direction: row;
-                    margin-top: 5px;
+                    margin-top: 15px;
 
                     .jitsi-icon {
                         margin-right: 15px;
@@ -109,77 +106,99 @@ body.welcome-page {
                 }
             }
 
+            .warning-without-link {
+                position: absolute;
+                top: 44px;
+                left: -10px;
+            }
+
+            .warning-with-link {
+                position: absolute;
+                top: 84px;
+            }
+
         }
 
-        .tab-container {
-            font-size: 16px;
+        #moderated-meetings {
+            max-width: calc(100% - 40px);
+            padding: 16px 0 39px 0;
+            width: $welcomePageEnterRoomWidth;
+
+            p {
+                color: $welcomePageDescriptionColor;
+                float: left;
+                text-align: $welcomePageHeaderTextAlign;
+
+                a {
+                    color: inherit;
+                    font-weight: 600;
+                }
+            }
+        }
+    }
+
+    .tab-container {
+        font-size: 16px;
+        position: relative;
+        text-align: left;
+        display: $welcomePageTabContainerDisplay;
+        flex-direction: column;
+
+        .tab-content{
+            display: $welcomePageTabContentDisplay;
+            height: 250px;
+            margin: 5px 0px;
+            overflow: hidden;
+            flex-grow: 1;
             position: relative;
-            text-align: left;
-            min-height: 354px;
-            width: 710px;
-            background: #75A7E7;
-            display: $welcomePageTabContainerDisplay;
-            flex-direction: column;
+        }
 
-            .tab-content{
-                display: $welcomePageTabContentDisplay;
-                margin: 5px 0px;
-                overflow: hidden;
+        .tab-buttons {
+            background-color: #c7ddff;
+            border-radius: 6px;
+            color: #0163FF;
+            font-size: 14px;
+            line-height: 18px;
+            margin: 4px;
+            display: $welcomePageTabButtonsDisplay;
+
+            .tab {
+                background-color: #c7ddff;
+                border-radius: 7px;
+                cursor: pointer;
+                display: $welcomePageTabDisplay;
                 flex-grow: 1;
-                position: relative;
+                margin: 2px;
+                padding: 7px 0;
+                text-align: center;
 
-                > * {
-                    position: absolute;
+                &.selected {
+                    background-color: #FFF;
                 }
             }
 
-            .tab-buttons {
-                font-size: 18px;
-                color: #FFFFFF;
-                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;
-                    line-height: 54px;
-                    flex-grow: 1;
-                    cursor: pointer;
-
-                    &.selected, &:hover {
-                        background: rgba(9,30,66,0.71);
-                    }
-
-                    &:last-child {
-                        margin-left: 1px;
-                    }
-                }
-            }
         }
     }
 
     .welcome-page-button {
-        width: $welcomePageButtonWidth;
-        min-width: $welcomePageButtonMinWidth;
-        height: $welcomePageButtonHeight;
-        font-size: $welcomePageButtonFontSize;
-        font-weight: $welcomePageButtonFontWeight;
+        border: 0;
+        font-size: 14px;
         background: #0074E0;
-        border-radius: $welcomePageButtonBorderRadius;
+        border-radius: 3px;
         color: #FFFFFF;
-        text-align: center;
-        vertical-align: middle;
-        line-height: $welcomePageButtonLineHeight;
         cursor: pointer;
+        padding: 16px 20px;
+
+        &:focus-within {
+            outline: auto 2px #022e61;
+        }
     }
 
     .welcome-page-settings {
+        background: rgba(255, 255, 255, 0.38);
+        border-radius: 3px;
         color: $welcomePageDescriptionColor;
+        padding: 4px;
         position: absolute;
         top: 32px;
         right: 32px;
@@ -189,11 +208,105 @@ body.welcome-page {
             cursor: pointer;
             font-size: 32px;
         }
+
+        .toolbox-icon {
+            height: 24px;
+            width: 24px;
+        }
     }
 
     .welcome-watermark {
         position: absolute;
         width: 100%;
         height: 100%;
+
+        .watermark.leftwatermark {
+            width: $welcomePageWatermarkWidth;
+            height: $welcomePageWatermarkHeight;
+        }
+    }
+
+    &.without-content {
+        .welcome-card {
+            min-width: 500px;
+            max-width: 580px;
+        }
+    }
+
+    &.without-footer {
+        justify-content: start;
+    }
+
+    .welcome-cards-container {
+        color:#131519;
+        padding-top: 40px;
+    }
+
+    .welcome-card-row {
+        display: flex;
+        justify-content: center;
+        padding: 0 32px;
+    }
+
+    .welcome-card-text {
+        padding: 32px;
+    }
+
+    .welcome-card {
+        width: 49%;
+        border-radius: 8px;
+
+        &--dark {
+            background: #444447;
+            color: #fff;
+        }
+
+        &--blue {
+            background: #D5E5FF;
+        }
+
+        &--grey {
+            background: #F2F3F4;
+        }
+
+        &--shadow {
+            box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.15);
+        }
+    }
+
+    .welcome-footer {
+        background: #131519;
+        color: #fff;
+        margin-top: 40px;
+        position: relative;
+    }
+
+    .welcome-footer-centered {
+        max-width: 688px;
+        margin: 0 auto;
+    }
+
+    .welcome-footer-padded {
+        padding: 0px 16px;
+    }
+
+    .welcome-footer-row-block {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid #424447;
+
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+    .welcome-footer--row-1 {
+        padding: 40px 0 24px 0;
+    }
+
+    .welcome-footer-row-1-text {
+        max-width: 200px;
+        margin-right: 16px;
     }
 }

css/buttons/copy.scss

@@ -0,0 +1,38 @@
+.copy-button {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 8px 8px 16px;
+    margin-top: 5px;
+    width: calc(100% - 24px);
+    height: 24px;
+
+    background: #0376DA;
+    border-radius: 4px;
+    cursor: pointer;
+
+    &:hover {
+        background: #278ADF;
+        font-weight: 600;
+    }
+
+    &-content {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 292px;
+        margin-right: 16px;
+
+        &.selected {
+            font-weight: 600;
+        }
+    }
+
+    &.clicked {
+        background: #31B76A;
+    }
+
+    & > div > svg > path {
+        fill: #fff;
+    }
+}