ref(remote-control): Use React/Redux.

.eslintignore

@@ -5,9 +5,6 @@ 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/workflows/ci.yml

@@ -12,7 +12,5 @@ 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,7 +69,6 @@ buck-out/
 *.framework
 android/app/debug
 android/app/release
-ios/sdk/out
 
 # precommit-hook
 .jshintignore

CONTRIBUTING.md

@@ -152,20 +152,3 @@ 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
-```

Makefile

@@ -3,10 +3,8 @@ 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/@matrix-org/olm
+OLM_DIR = node_modules/olm
 RNNOISE_WASM_DIR = node_modules/rnnoise-wasm/dist/
-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 = .
@@ -18,17 +16,14 @@ WEBPACK_DEV_SERVER = ./node_modules/.bin/webpack-dev-server
 
 all: compile deploy clean
 
-compile: compile-load-test
+compile:
 	$(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-tflite deploy-meet-models deploy-lib-jitsi-meet deploy-libflac deploy-olm deploy-css deploy-local
+deploy: deploy-init deploy-appbundle deploy-rnnoise-binary deploy-lib-jitsi-meet deploy-libflac deploy-olm deploy-css deploy-local
 
 deploy-init:
 	rm -fr $(DEPLOY_DIR)
@@ -44,6 +39,8 @@ 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 \
@@ -51,6 +48,10 @@ 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)
@@ -80,16 +81,6 @@ deploy-rnnoise-binary:
 		$(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) --skip-rebase $(STYLES_BUNDLE) > $(STYLES_DESTINATION) ; \
@@ -99,7 +90,7 @@ deploy-local:
 	([ ! -x deploy-local.sh ] || ./deploy-local.sh)
 
 .NOTPARALLEL:
-dev: deploy-init deploy-css deploy-rnnoise-binary deploy-tflite deploy-meet-models deploy-lib-jitsi-meet deploy-libflac deploy-olm
+dev: deploy-init deploy-css deploy-rnnoise-binary deploy-lib-jitsi-meet deploy-libflac deploy-olm
 	$(WEBPACK_DEV_SERVER) --detect-circular-deps
 
 source-package:

README.md

@@ -1,88 +1,80 @@
-# <p align="center">Jitsi Meet</p>
+# Jitsi Meet - Secure, Simple and Scalable Video Conferences
 
-Jitsi Meet is a set of Open Source projects which empower users to use and deploy
-video conferencing platforms with state-of-the-art video quality and features.
+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).
 
-<hr />
+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.
 
-<p align="center">
-<img src="https://raw.githubusercontent.com/jitsi/jitsi-meet/master/readme-img1.png" width="900" />
-</p>
+Jitsi Meet allows very efficient collaboration. Users can stream their desktop or only some windows. It also supports shared document editing with Etherpad.
 
-<hr />
+## Installation
 
-Amongst others here are the main features Jitsi Meet offers:
+On the client side, no installation is necessary. You just point your browser to the URL of your deployment. This section is about installing a Jitsi Meet suite on your server and hosting your own conferencing service.
 
-* Support for all current browsers
-* Mobile applications
-* Web and native SDKs for integration
-* HD audio and video
-* Content sharing
-* End-to-End Encryption
-* Raise hand and reactions
-* Chat with private conversations
-* Polls
-* Virtual backgrounds
+Installing Jitsi Meet is a simple experience. For Debian-based system, following the [quick install](https://jitsi.github.io/handbook/docs/devops-guide/devops-guide-quickstart) document, which uses the package system. You can also see a demonstration of the process in [this tutorial video](https://jitsi.org/tutorial).
 
-And many more!
+For other systems, or if you wish to install all components manually, see the [detailed manual installation instructions](https://jitsi.github.io/handbook/docs/devops-guide/devops-guide-manual).
 
-## Using Jitsi Meet
+Installation with Docker is also available. Please see the [instruction](https://jitsi.github.io/handbook/docs/devops-guide/devops-guide-docker).
 
-Using Jitsi Meet is straightforward, as it's browser based. Head over to [meet.jit.si](https://meet.jit.si) and give it a try. It's anonymous, scalable and free to use. All browsers are supported! 
+## Download
 
-Using mobile? No problem, you can either use your mobile web browser or our fully-featured
-mobile apps:
+| Latest stable release | [![release](https://img.shields.io/badge/release-latest-green.svg)](https://github.com/jitsi/jitsi-meet/releases/latest) |
+|---|---|
 
-| Android | Android (F-Droid) | iOS |
-|:-:|:-:|:-:|
-| [<img src="resources/img/google-play-badge.png" height="50">](https://play.google.com/store/apps/details?id=org.jitsi.meet) | [<img src="resources/img/f-droid-badge.png" height="50">](https://f-droid.org/en/packages/org.jitsi.meet/) | [<img src="resources/img/appstore-badge.png" height="50">](https://itunes.apple.com/us/app/jitsi-meet/id1165103905) |
+You can download Debian/Ubuntu binaries:
+* [stable](https://download.jitsi.org/stable/) ([instructions](https://jitsi.org/downloads/ubuntu-debian-installations-instructions/))
+* [testing](https://download.jitsi.org/testing/) ([instructions](https://jitsi.org/downloads/ubuntu-debian-installations-instructions-for-testing/))
+* [nightly](https://download.jitsi.org/unstable/) ([instructions](https://jitsi.org/downloads/ubuntu-debian-installations-instructions-nightly/))
 
-If you are feeling adventurous and want to get an early scoop of the features as they are being
-developed you can also sign up for our open beta testing here:
+You can download source archives (produced by ```make source-package```):
+* [source builds](https://download.jitsi.org/jitsi-meet/src/)
+
+### Mobile apps
+
+* [Android](https://play.google.com/store/apps/details?id=org.jitsi.meet)
+
+[<img src="resources/img/google-play-badge.png" height="50">](https://play.google.com/store/apps/details?id=org.jitsi.meet)
+
+* [Android (F-Droid)](https://f-droid.org/en/packages/org.jitsi.meet/)
+
+[<img src="resources/img/f-droid-badge.png" height="50">](https://f-droid.org/en/packages/org.jitsi.meet/)
+
+* [iOS](https://itunes.apple.com/us/app/jitsi-meet/id1165103905)
+
+[<img src="resources/img/appstore-badge.png" height="50">](https://itunes.apple.com/us/app/jitsi-meet/id1165103905)
+
+You can also sign up for our open beta testing here:
 
 * [Android](https://play.google.com/apps/testing/org.jitsi.meet)
 * [iOS](https://testflight.apple.com/join/isy6ja7S)
 
-## Running your own instance
+## Release notes
 
-If you'd like to run your own Jitsi Meet installation head over to the [handbook](https://jitsi.github.io/handbook/docs/devops-guide/devops-guide-start) to get started.
+Release notes for Jitsi Meet are maintained on [this repository](https://github.com/jitsi/jitsi-meet-release-notes).
 
-We provide Debian packages and a comprehensive Docker setup to make deployments as simple as possible.
-Advanced users also have the possibility of building all the components from source.
+## Development
 
-You can check the latest releases [[here](https://jitsi.github.io/handbook/docs/releases).
-
-## Jitsi as a Service
-
-If you like the branding capabilities of running your own instance but you'd like
-to avoid dealing with the complexity of monitoring, scaling and updates, JaaS might be
-for you.
-
-[8x8 Jitsi as a Service (JaaS)](https://jaas.8x8.vc) is an enterprise-ready video meeting platform that allows developers, organizations and businesses to easily build and deploy video solutions. With Jitsi as a Service we now give you all the power of Jitsi running on our global platform so you can focus on building secure and branded video experiences.
-
-## Documentation
-
-All the Jitsi Meet documentation is available in [the handbook](https://jitsi.github.io/handbook/).
-
-## Security
-
-For a comprehensive description of all Jitsi Meet's security aspects, please check [this link](https://jitsi.org/security).
-
-For a detailed description of Jitsi Meet's End-to-End Encryption (E2EE) implementation,
-please check [this link](https://jitsi.org/e2ee-whitepaper/).
-
-For information on reporting security vulnerabilities in Jitsi Meet, see [SECURITY.md](./SECURITY.md).
+For web development see [here](https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-web), and for mobile see [here](https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-mobile).
 
 ## Contributing
 
 If you are looking to contribute to Jitsi Meet, first of all, thank you! Please
 see our [guidelines for contributing](CONTRIBUTING.md).
 
-<br />
-<br />
+## Embedding in external applications
 
-<footer>
-<p align="center" style="font-size: smaller;">
-Built with ❤️ by the Jitsi team at <a href="https://8x8.com" target="_blank">8x8</a> and our community.
-</p>
-</footer>
+Jitsi Meet provides a very flexible way of embedding in external applications by using the [Jitsi Meet API](doc/api.md).
+
+## Security
+
+The security section here was starting to feel a bit too succinct for the complexity of the topic, so we created a post that covers the topic much more broadly here: https://jitsi.org/security
+
+The section on end-to-end encryption in that document is likely going to be one of the key points of interest: https://jitsi.org/security/#e2ee
+
+## Security issues
+
+For information on reporting security vulnerabilities in Jitsi Meet, see [SECURITY.md](./SECURITY.md).
+
+## Acknowledgements
+
+Jitsi Meet started out as a sample conferencing application using Jitsi Videobridge. It was originally developed by ESTOS' developer Philipp Hancke who then contributed it to the community where development continues with joint forces!

android/app/build.gradle

@@ -122,7 +122,7 @@ gradle.projectsEvaluated {
         android.applicationVariants.all { variant ->
             variant.outputs.each { output ->
                 output.getProcessManifestProvider().get().doLast {
-                    def outputDir = multiApkManifestOutputDirectory.get().asFile
+                    def outputDir = manifestOutputDirectory.get().asFile
                     def manifestPath = new File(outputDir, 'AndroidManifest.xml')
                     def charset = 'UTF-8'
                     def text

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

@@ -38,7 +38,7 @@ import java.lang.reflect.Method;
 import java.net.MalformedURLException;
 import java.net.URL;
 import java.util.Collection;
-import java.util.HashMap;
+import java.util.Map;
 
 /**
  * The one and only Activity that the Jitsi Meet app needs. The
@@ -183,8 +183,8 @@ public class MainActivity extends JitsiMeetActivity {
     }
 
     @Override
-    protected void onConferenceTerminated(HashMap<String, Object> extraData) {
-        Log.d(TAG, "Conference terminated: " + extraData);
+    public void onConferenceTerminated(Map<String, Object> data) {
+        Log.d(TAG, "Conference terminated: " + data);
     }
 
     // Activity lifecycle method overrides

android/build.gradle

@@ -10,17 +10,17 @@ buildscript {
         jcenter()
     }
     dependencies {
-        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'
+        classpath 'com.android.tools.build:gradle:4.0.2'
+        classpath 'com.google.gms:google-services:4.3.3'
+        classpath 'com.google.firebase:firebase-crashlytics-gradle:2.3.0'
     }
 }
 
 ext {
-    buildToolsVersion = "30.0.3"
-    compileSdkVersion = 30
+    buildToolsVersion = "29.0.3"
+    compileSdkVersion = 29
     minSdkVersion    = 23
-    targetSdkVersion = 30
+    targetSdkVersion = 29
     supportLibVersion = "28.0.0"
 
     // The Maven artifact groupdId of the third-party react-native modules which

android/gradle.properties

@@ -25,5 +25,5 @@ android.enableDexingArtifactTransform.desugaring=false
 android.useAndroidX=true
 android.enableJetifier=true
 
-appVersion=21.4.0
-sdkVersion=3.9.1
+appVersion=20.5.0
+sdkVersion=2.11.0

android/sdk/build.gradle

@@ -25,6 +25,10 @@ android {
     sourceSets {
         main {
             java {
+                if (rootProject.ext.libreBuild) {
+                    srcDir "src"
+                    exclude "**/AmplitudeModule.java"
+                }
                 exclude "test/"
             }
         }
@@ -36,7 +40,6 @@ dependencies {
 
     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
@@ -44,41 +47,31 @@ dependencies {
     //noinspection GradleDynamicVersion
     implementation 'org.webkit:android-jsc:+'
 
-    implementation 'com.dropbox.core:dropbox-core-sdk:4.0.1'
+    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(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-amplitude')
-        implementation project(':react-native-device-info')
+    if (!rootProject.ext.libreBuild) {
+        implementation 'com.amplitude:android-sdk:2.14.1'
         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-performance')
-    implementation project(':react-native-slider')
+    implementation project(':react-native-linear-gradient')
     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')
+    implementation project(':react-native-splash-screen')
 
     testImplementation 'junit:junit:4.12'
 }
@@ -157,9 +150,16 @@ android.libraryVariants.all { def variant ->
         // Bundle sounds
         //
         copy {
-            from("${projectDir}/../../sounds")
-            include("*.wav")
-            include("*.mp3")
+            from("${projectDir}/../../sounds/incomingMessage.wav")
+            from("${projectDir}/../../sounds/joined.wav")
+            from("${projectDir}/../../sounds/left.wav")
+            from("${projectDir}/../../sounds/liveStreamingOn.mp3")
+            from("${projectDir}/../../sounds/liveStreamingOff.mp3")
+            from("${projectDir}/../../sounds/outgoingRinging.wav")
+            from("${projectDir}/../../sounds/outgoingStart.wav")
+            from("${projectDir}/../../sounds/recordingOn.mp3")
+            from("${projectDir}/../../sounds/recordingOff.mp3")
+            from("${projectDir}/../../sounds/rejected.wav")
             into("${assetsDir}/sounds")
         }
 

android/sdk/src/main/AndroidManifest.xml

@@ -1,6 +1,5 @@
 <?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" />
@@ -35,13 +34,12 @@
             android:launchMode="singleTask"
             android:resizeableActivity="true"
             android:supportsPictureInPicture="true"
-            android:windowSoftInputMode="adjustResize"/>
+            android:windowSoftInputMode="adjustResize"></activity>
         <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
 
         <service
             android:name=".ConnectionService"
-            android:permission="android.permission.BIND_TELECOM_CONNECTION_SERVICE"
-            android:exported="true">
+            android:permission="android.permission.BIND_TELECOM_CONNECTION_SERVICE">
             <intent-filter>
                 <action android:name="android.telecom.ConnectionService" />
             </intent-filter>
@@ -50,13 +48,6 @@
         <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

@@ -0,0 +1,122 @@
+/*
+ * 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,8 @@
 
 package org.jitsi.meet.sdk;
 
-import android.media.AudioAttributes;
 import android.media.AudioDeviceInfo;
-import android.media.AudioFocusRequest;
 import android.media.AudioManager;
-import android.os.Build;
 
 import java.util.HashSet;
 import java.util.Set;
@@ -63,7 +60,7 @@ class AudioDeviceHandlerGeneric implements
     private AudioManager audioManager;
 
     /**
-     * {@link Runnable} for running audio device detection in the audio thread.
+     * {@link Runnable} for running audio device detection the main thread.
      * This is only used on Android >= M.
      */
     private final Runnable onAudioDeviceChangeRunner = new Runnable() {
@@ -145,7 +142,7 @@ class AudioDeviceHandlerGeneric implements
                         // Some other application potentially stole our audio focus
                         // temporarily. Restore our mode.
                         if (audioFocusLost) {
-                            module.resetAudioRoute();
+                            module.updateAudioRoute();
                         }
                         audioFocusLost = false;
                         break;
@@ -219,24 +216,8 @@ class AudioDeviceHandlerGeneric implements
         audioManager.setMode(AudioManager.MODE_IN_COMMUNICATION);
         audioManager.setMicrophoneMute(false);
 
-        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) {
+        if (audioManager.requestAudioFocus(this, AudioManager.STREAM_VOICE_CALL, AudioManager.AUDIOFOCUS_GAIN)
+            == AudioManager.AUDIOFOCUS_REQUEST_FAILED) {
             JitsiMeetLogger.w(TAG + " Audio focus request failed");
             return false;
         }

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

@@ -16,7 +16,6 @@
 
 package org.jitsi.meet.sdk;
 
-import android.app.Activity;
 import android.content.Context;
 import android.media.AudioManager;
 import android.os.Build;
@@ -257,7 +256,7 @@ class AudioModeModule extends ReactContextBaseJavaModule {
                 if (mode != -1) {
                     JitsiMeetLogger.i(TAG + " User selected device set to: " + device);
                     userSelectedDevice = device;
-                    updateAudioRoute(mode, false);
+                    updateAudioRoute(mode);
                 }
             }
         });
@@ -277,22 +276,13 @@ 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, false);
+                    success = updateAudioRoute(mode);
                 } catch (Throwable e) {
                     success = false;
                     JitsiMeetLogger.e(e, TAG + " Failed to update audio route for mode: " + mode);
@@ -331,7 +321,7 @@ class AudioModeModule extends ReactContextBaseJavaModule {
      * @return {@code true} if the audio route was updated successfully;
      * {@code false}, otherwise.
      */
-    private boolean updateAudioRoute(int mode, boolean force) {
+    private boolean updateAudioRoute(int mode) {
         JitsiMeetLogger.i(TAG + " Update audio route for mode: " + mode);
 
         if (!audioDeviceHandler.setMode(mode)) {
@@ -366,7 +356,7 @@ class AudioModeModule extends ReactContextBaseJavaModule {
 
         // If the previously selected device and the current default one
         // match, do nothing.
-        if (!force && selectedDevice != null && selectedDevice.equals(audioDevice)) {
+        if (selectedDevice != null && selectedDevice.equals(audioDevice)) {
             return true;
         }
 
@@ -431,16 +421,7 @@ class AudioModeModule extends ReactContextBaseJavaModule {
      */
     void updateAudioRoute() {
         if (mode != -1) {
-            updateAudioRoute(mode, false);
-        }
-    }
-
-    /**
-     * Re-sets the current audio route. Needed when focus is lost and regained.
-     */
-    void resetAudioRoute() {
-        if (mode != -1) {
-            updateAudioRoute(mode, true);
+            updateAudioRoute(mode);
         }
     }
 

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

@@ -99,7 +99,6 @@ public abstract class BaseReactView<ListenerT>
      * The listener (e.g. {@link JitsiMeetViewListener}) instance for reporting
      * events occurring in Jitsi Meet.
      */
-    @Deprecated
     private ListenerT listener;
 
     /**
@@ -168,7 +167,6 @@ public abstract class BaseReactView<ListenerT>
      *
      * @return The listener set on this {@code BaseReactView}.
      */
-    @Deprecated
     public ListenerT getListener() {
         return listener;
     }
@@ -181,10 +179,8 @@ 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) {
@@ -219,7 +215,6 @@ 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/BroadcastAction.java

@@ -1,100 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,155 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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/DropboxModule.java

@@ -8,8 +8,6 @@ import android.text.TextUtils;
 
 import com.dropbox.core.DbxException;
 import com.dropbox.core.DbxRequestConfig;
-import com.dropbox.core.android.Auth;
-import com.dropbox.core.oauth.DbxCredential;
 import com.dropbox.core.v2.DbxClientV2;
 import com.dropbox.core.v2.users.FullAccount;
 import com.dropbox.core.v2.users.SpaceAllocation;
@@ -19,6 +17,7 @@ import com.facebook.react.bridge.LifecycleEventListener;
 import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.dropbox.core.android.Auth;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.module.annotations.ReactModule;
@@ -67,7 +66,7 @@ class DropboxModule
     @ReactMethod
     public void authorize(final Promise promise) {
         if (isEnabled) {
-            Auth.startOAuth2PKCE(this.getCurrentActivity(), appKey, DbxRequestConfig.newBuilder(clientId).build());
+            Auth.startOAuth2Authentication(this.getCurrentActivity(), appKey);
             this.promise = promise;
         } else {
             promise.reject(
@@ -182,15 +181,10 @@ class DropboxModule
 
     @Override
     public void onHostResume() {
-        DbxCredential credential = Auth.getDbxCredential();
+        String token = Auth.getOAuth2Token();
 
-        if (credential != null && this.promise != null) {
-            WritableMap result = Arguments.createMap();
-            result.putString("token", credential.getAccessToken());
-            result.putString("rToken", credential.getRefreshToken());
-            result.putDouble("expireDate", credential.getExpiresAt());
-
-            this.promise.resolve(result);
+        if (token != null && this.promise != null) {
+            this.promise.resolve(token);
             this.promise = null;
         }
     }

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

@@ -1,5 +1,5 @@
 /*
- * Copyright @ 2017-present 8x8, Inc.
+ * Copyright @ 2017-present Atlassian Pty Ltd
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,9 +24,6 @@ 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.
  */
@@ -38,9 +35,6 @@ 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.
@@ -50,11 +44,6 @@ class ExternalAPIModule
      */
     public ExternalAPIModule(ReactApplicationContext reactContext) {
         super(reactContext);
-
-        broadcastEmitter = new BroadcastEmitter(reactContext);
-        broadcastReceiver = new BroadcastReceiver(reactContext);
-
-        ParticipantsService.init(reactContext);
     }
 
     /**
@@ -67,29 +56,6 @@ 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.
@@ -113,8 +79,7 @@ class ExternalAPIModule
             JitsiMeetLogger.d(TAG + " Sending event: " + name + " with data: " + data);
             try {
                 view.onExternalAPIEvent(name, data);
-                broadcastEmitter.sendBroadcast(name, data);
-            } catch (Exception e) {
+            } catch(Exception e) {
                 JitsiMeetLogger.e(e, TAG + " onExternalAPIEvent: error sending event");
             }
         }

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

@@ -16,42 +16,33 @@
 
 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.HashMap;
-import android.app.Activity;
+import java.util.Map;
+
 
 /**
  * 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 {
+        implements JitsiMeetActivityInterface, JitsiMeetViewListener {
 
     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
     //
 
@@ -59,9 +50,6 @@ 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);
     }
 
@@ -80,7 +68,8 @@ public class JitsiMeetActivity extends FragmentActivity
 
         setContentView(R.layout.activity_jitsi_meet);
 
-        registerForBroadcastMessages();
+        // Listen for conference events.
+        getJitsiView().setListener(this);
 
         if (!extraInitialize()) {
             initialize();
@@ -102,8 +91,6 @@ public class JitsiMeetActivity extends FragmentActivity
         }
         JitsiMeetOngoingConferenceService.abort(this);
 
-        LocalBroadcastManager.getInstance(this).unregisterReceiver(broadcastReceiver);
-
         super.onDestroy();
     }
 
@@ -120,39 +107,26 @@ public class JitsiMeetActivity extends FragmentActivity
     protected JitsiMeetView getJitsiView() {
         JitsiMeetFragment fragment
             = (JitsiMeetFragment) getSupportFragmentManager().findFragmentById(R.id.jitsiFragment);
-        return fragment != null ? fragment.getJitsiView() : null;
+        return fragment.getJitsiView();
     }
 
     public void join(@Nullable String url) {
         JitsiMeetConferenceOptions options
             = new JitsiMeetConferenceOptions.Builder()
-            .setRoom(url)
-            .build();
+                .setRoom(url)
+                .build();
         join(options);
     }
 
     public void join(JitsiMeetConferenceOptions options) {
-        JitsiMeetView view = getJitsiView();
-
-        if (view != null) {
-            view.join(options);
-        } else {
-            JitsiMeetLogger.w("Cannot join, view is null");
-        }
+        getJitsiView().join(options);
     }
 
     public void leave() {
-        JitsiMeetView view = getJitsiView();
-
-        if (view != null) {
-            view.leave();
-        } else {
-            JitsiMeetLogger.w("Cannot leave, view is null");
-        }
+        getJitsiView().leave();
     }
 
-    private @Nullable
-    JitsiMeetConferenceOptions getConferenceOptions(Intent intent) {
+    private @Nullable JitsiMeetConferenceOptions getConferenceOptions(Intent intent) {
         String action = intent.getAction();
 
         if (Intent.ACTION_VIEW.equals(action)) {
@@ -171,7 +145,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.
@@ -186,37 +160,6 @@ 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
     //
 
@@ -248,11 +191,7 @@ public class JitsiMeetActivity extends FragmentActivity
 
     @Override
     protected void onUserLeaveHint() {
-        JitsiMeetView view = getJitsiView();
-
-        if (view != null) {
-            view.enterPictureInPicture();
-        }
+        getJitsiView().enterPictureInPicture();
     }
 
     // JitsiMeetActivityInterface
@@ -268,37 +207,24 @@ public class JitsiMeetActivity extends FragmentActivity
         JitsiMeetActivityDelegate.onRequestPermissionsResult(requestCode, permissions, grantResults);
     }
 
-    private void registerForBroadcastMessages() {
-        IntentFilter intentFilter = new IntentFilter();
+    // JitsiMeetViewListener
+    //
 
-        for (BroadcastEvent.Type type : BroadcastEvent.Type.values()) {
-            intentFilter.addAction(type.getAction());
-        }
-
-        LocalBroadcastManager.getInstance(this).registerReceiver(broadcastReceiver, intentFilter);
+    @Override
+    public void onConferenceJoined(Map<String, Object> data) {
+        JitsiMeetLogger.i("Conference joined: " + data);
+        // Launch the service for the ongoing notification.
+        JitsiMeetOngoingConferenceService.launch(this);
     }
 
-    private void onBroadcastReceived(Intent intent) {
-        if (intent != null) {
-            BroadcastEvent event = new BroadcastEvent(intent);
+    @Override
+    public void onConferenceTerminated(Map<String, Object> data) {
+        JitsiMeetLogger.i("Conference terminated: " + data);
+        finish();
+    }
 
-            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;
-            }
-        }
+    @Override
+    public void onConferenceWillJoin(Map<String, Object> data) {
+        JitsiMeetLogger.i("Conference will join: " + data);
     }
 }

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

@@ -116,15 +116,12 @@ public class JitsiMeetActivityDelegate {
             = ReactInstanceManagerHolder.getReactInstanceManager();
 
         if (reactInstanceManager != null) {
-            try {
+            // Try to avoid a crash because some devices trip on this assert:
+            // https://github.com/facebook/react-native/blob/df4e67fe75d781d1eb264128cadf079989542755/ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManager.java#L512
+            // Why this happens is a mystery wrapped in an enigma.
+            ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
+            if (reactContext != null && activity == reactContext.getCurrentActivity()) {
                 reactInstanceManager.onHostPause(activity);
-            } catch (AssertionError e) {
-                // There seems to be a problem in RN when resuming an Activity when
-                // rotation is involved and the planets align. There doesn't seem to
-                // be a proper solution, but since the activity is going away anyway,
-                // we'll YOLO-ignore the exception and hope fo the best.
-                // Ref: https://github.com/facebook/react-native/search?q=Pausing+an+activity+that+is+not+the+current+activity%2C+this+is+incorrect%21&type=issues
-                JitsiMeetLogger.e(e, "Error running onHostPause, ignoring");
             }
         }
     }

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

@@ -40,6 +40,10 @@ public class JitsiMeetConferenceOptions implements Parcelable {
      * Room name.
      */
     private String room;
+    /**
+     * Conference subject.
+     */
+    private String subject;
     /**
      * JWT token used for authentication.
      */
@@ -50,16 +54,19 @@ public class JitsiMeetConferenceOptions implements Parcelable {
      */
     private Bundle colorScheme;
 
-    /**
-     * Config. See: https://github.com/jitsi/jitsi-meet/blob/master/config.js
-     */
-    private Bundle config;
-
     /**
      * Feature flags. See: https://github.com/jitsi/jitsi-meet/blob/master/react/features/base/flags/constants.js
      */
     private Bundle featureFlags;
 
+    /**
+     * Set to {@code true} to join the conference with audio / video muted or to start in audio
+     * only mode respectively.
+     */
+    private Boolean audioMuted;
+    private Boolean audioOnly;
+    private Boolean videoMuted;
+
     /**
      * USer information, to be used when no token is specified.
      */
@@ -73,6 +80,10 @@ public class JitsiMeetConferenceOptions implements Parcelable {
         return room;
     }
 
+    public String getSubject() {
+        return subject;
+    }
+
     public String getToken() {
         return token;
     }
@@ -85,6 +96,18 @@ public class JitsiMeetConferenceOptions implements Parcelable {
         return featureFlags;
     }
 
+    public boolean getAudioMuted() {
+        return audioMuted;
+    }
+
+    public boolean getAudioOnly() {
+        return audioOnly;
+    }
+
+    public boolean getVideoMuted() {
+        return videoMuted;
+    }
+
     public JitsiMeetUserInfo getUserInfo() {
         return userInfo;
     }
@@ -95,16 +118,19 @@ public class JitsiMeetConferenceOptions implements Parcelable {
     public static class Builder {
         private URL serverURL;
         private String room;
+        private String subject;
         private String token;
 
         private Bundle colorScheme;
-        private Bundle config;
         private Bundle featureFlags;
 
+        private Boolean audioMuted;
+        private Boolean audioOnly;
+        private Boolean videoMuted;
+
         private JitsiMeetUserInfo userInfo;
 
         public Builder() {
-            config = new Bundle();
             featureFlags = new Bundle();
         }
 
@@ -136,7 +162,7 @@ public class JitsiMeetConferenceOptions implements Parcelable {
          * @return - The {@link Builder} object itself so the method calls can be chained.
          */
         public Builder setSubject(String subject) {
-            setConfigOverride("subject", subject);
+            this.subject = subject;
 
             return this;
         }
@@ -167,11 +193,11 @@ public class JitsiMeetConferenceOptions implements Parcelable {
 
         /**
          * Indicates the conference will be joined with the microphone muted.
-         * @param audioMuted - Muted indication.
+         * @param muted - Muted indication.
          * @return - The {@link Builder} object itself so the method calls can be chained.
          */
-        public Builder setAudioMuted(boolean audioMuted) {
-            setConfigOverride("startWithAudioMuted", audioMuted);
+        public Builder setAudioMuted(boolean muted) {
+            this.audioMuted = muted;
 
             return this;
         }
@@ -183,7 +209,7 @@ public class JitsiMeetConferenceOptions implements Parcelable {
          * @return - The {@link Builder} object itself so the method calls can be chained.
          */
         public Builder setAudioOnly(boolean audioOnly) {
-            setConfigOverride("startAudioOnly", audioOnly);
+            this.audioOnly = audioOnly;
 
             return this;
         }
@@ -193,7 +219,7 @@ public class JitsiMeetConferenceOptions implements Parcelable {
          * @return - The {@link Builder} object itself so the method calls can be chained.
          */
         public Builder setVideoMuted(boolean videoMuted) {
-            setConfigOverride("startWithVideoMuted", videoMuted);
+            this.videoMuted = videoMuted;
 
             return this;
         }
@@ -235,36 +261,6 @@ public class JitsiMeetConferenceOptions implements Parcelable {
             return this;
         }
 
-        public Builder setConfigOverride(String config, String value) {
-            this.config.putString(config, value);
-
-            return this;
-        }
-
-        public Builder setConfigOverride(String config, int value) {
-            this.config.putInt(config, value);
-
-            return this;
-        }
-
-        public Builder setConfigOverride(String config, boolean value) {
-            this.config.putBoolean(config, value);
-
-            return this;
-        }
-
-        public Builder setConfigOverride(String config, Bundle bundle) {
-            this.config.putBundle(config, bundle);
-
-            return this;
-        }
-
-        public Builder setConfigOverride(String config, String[] list) {
-            this.config.putStringArray(config, list);
-
-            return this;
-        }
-
         /**
          * Builds the immutable {@link JitsiMeetConferenceOptions} object with the configuration
          * that this {@link Builder} instance specified.
@@ -275,10 +271,13 @@ public class JitsiMeetConferenceOptions implements Parcelable {
 
             options.serverURL = this.serverURL;
             options.room = this.room;
+            options.subject = this.subject;
             options.token = this.token;
             options.colorScheme = this.colorScheme;
-            options.config = this.config;
             options.featureFlags = this.featureFlags;
+            options.audioMuted = this.audioMuted;
+            options.audioOnly = this.audioOnly;
+            options.videoMuted = this.videoMuted;
             options.userInfo = this.userInfo;
 
             return options;
@@ -291,12 +290,17 @@ public class JitsiMeetConferenceOptions implements Parcelable {
     private JitsiMeetConferenceOptions(Parcel in) {
         serverURL = (URL) in.readSerializable();
         room = in.readString();
+        subject = in.readString();
         token = in.readString();
         colorScheme = in.readBundle();
-        config = in.readBundle();
         featureFlags = in.readBundle();
         userInfo = new JitsiMeetUserInfo(in.readBundle());
         byte tmpAudioMuted = in.readByte();
+        audioMuted = tmpAudioMuted == 0 ? null : tmpAudioMuted == 1;
+        byte tmpAudioOnly = in.readByte();
+        audioOnly = tmpAudioOnly == 0 ? null : tmpAudioOnly == 1;
+        byte tmpVideoMuted = in.readByte();
+        videoMuted = tmpVideoMuted == 0 ? null : tmpVideoMuted == 1;
     }
 
     Bundle asProps() {
@@ -313,6 +317,21 @@ public class JitsiMeetConferenceOptions implements Parcelable {
             props.putBundle("colorScheme", colorScheme);
         }
 
+        Bundle config = new Bundle();
+
+        if (audioMuted != null) {
+            config.putBoolean("startWithAudioMuted", audioMuted);
+        }
+        if (audioOnly != null) {
+            config.putBoolean("startAudioOnly", audioOnly);
+        }
+        if (videoMuted != null) {
+            config.putBoolean("startWithVideoMuted", videoMuted);
+        }
+        if (subject != null) {
+            config.putString("subject", subject);
+        }
+
         Bundle urlProps = new Bundle();
 
         // The room is fully qualified
@@ -360,11 +379,14 @@ public class JitsiMeetConferenceOptions implements Parcelable {
     public void writeToParcel(Parcel dest, int flags) {
         dest.writeSerializable(serverURL);
         dest.writeString(room);
+        dest.writeString(subject);
         dest.writeString(token);
         dest.writeBundle(colorScheme);
-        dest.writeBundle(config);
         dest.writeBundle(featureFlags);
         dest.writeBundle(userInfo != null ? userInfo.asBundle() : new Bundle());
+        dest.writeByte((byte) (audioMuted == null ? 0 : audioMuted ? 1 : 2));
+        dest.writeByte((byte) (audioOnly == null ? 0 : audioOnly ? 1 : 2));
+        dest.writeByte((byte) (videoMuted == null ? 0 : videoMuted ? 1 : 2));
     }
 
     @Override

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

@@ -21,14 +21,12 @@ 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 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
  * responsible for presenting an ongoing notification when a conference is in progress.
@@ -37,18 +35,19 @@ 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();
 
-    private final BroadcastReceiver broadcastReceiver = new BroadcastReceiver();
-
-    private boolean isAudioMuted;
+    static final class Actions {
+        static final String START = TAG + ":START";
+        static final String HANGUP = TAG + ":HANGUP";
+    }
 
     static void launch(Context context) {
         OngoingNotification.createOngoingConferenceNotificationChannel();
 
         Intent intent = new Intent(context, JitsiMeetOngoingConferenceService.class);
-        intent.setAction(Action.START.getName());
+        intent.setAction(Actions.START);
 
         ComponentName componentName;
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
@@ -71,16 +70,11 @@ 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();
     }
@@ -92,37 +86,26 @@ public class JitsiMeetOngoingConferenceService extends Service
 
     @Override
     public int onStartCommand(Intent intent, int flags, int startId) {
-        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);
-
+        final String action = intent.getAction();
+        if (Actions.START.equals(action)) {
+            Notification notification = OngoingNotification.buildOngoingConferenceNotification();
+            if (notification == null) {
                 stopSelf();
-                break;
-            default:
-                JitsiMeetLogger.w(TAG + " Unknown action received: " + action);
-                stopSelf();
-                break;
+                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();
         }
 
         return START_NOT_STICKY;
@@ -132,50 +115,7 @@ 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

@@ -197,7 +197,6 @@ 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,7 +21,6 @@ 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,7 +32,6 @@ 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.toLanguageTag());
+        constants.put("locale", context.getResources().getConfiguration().locale.toString());
         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,14 +23,13 @@ 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
@@ -43,7 +42,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) {
@@ -57,7 +56,7 @@ class OngoingNotification {
         }
 
         NotificationManager notificationManager
-            = (NotificationManager) context.getSystemService(Context.NOTIFICATION_SERVICE);
+            = (NotificationManager)context.getSystemService(Context.NOTIFICATION_SERVICE);
 
         NotificationChannel channel
             = notificationManager.getNotificationChannel(CHANNEL_ID);
@@ -74,7 +73,7 @@ class OngoingNotification {
         notificationManager.createNotificationChannel(channel);
     }
 
-    static Notification buildOngoingConferenceNotification(boolean isMuted) {
+    static Notification buildOngoingConferenceNotification() {
         Context context = ReactInstanceManagerHolder.getCurrentActivity();
         if (context == null) {
             JitsiMeetLogger.w(TAG + " Cannot create notification: no current context");
@@ -84,10 +83,11 @@ class OngoingNotification {
         Intent notificationIntent = new Intent(context, context.getClass());
         PendingIntent pendingIntent = PendingIntent.getActivity(context, 0, notificationIntent, 0);
 
-        NotificationCompat.Builder builder = new NotificationCompat.Builder(context, CHANNEL_ID);
-
-        if (startingTime == 0) {
-            startingTime = System.currentTimeMillis();
+        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);
         }
 
         builder
@@ -97,36 +97,23 @@ 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()));
 
-        NotificationCompat.Action hangupAction = createAction(context, JitsiMeetOngoingConferenceService.Action.HANGUP, R.string.ongoing_notification_action_hang_up);
+        // 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);
 
-        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);
+            builder.addAction(hangupAction);
+        }
 
         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

@@ -1,27 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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/ReactInstanceManagerHolder.java

@@ -91,6 +91,14 @@ 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;
     }
 
@@ -178,21 +186,18 @@ 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.oblador.performance.PerformancePackage(),
                 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) {
@@ -204,16 +209,6 @@ class ReactInstanceManagerHolder {
                     }
                 }));
 
-        // AmplitudeReactNativePackage
-        try {
-            Class<?> amplitudePackageClass = Class.forName("com.amplitude.reactnative.AmplitudeReactNativePackage");
-            Constructor constructor = amplitudePackageClass.getConstructor();
-            packages.add((ReactPackage)constructor.newInstance());
-        } catch (Exception e) {
-            // Ignore any error, the module is not compiled when LIBRE_BUILD is enabled.
-        }
-
-        // RNGoogleSigninPackage
         try {
             Class<?> googlePackageClass = Class.forName("co.apptailor.googlesignin.RNGoogleSigninPackage");
             Constructor constructor = googlePackageClass.getConstructor();

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

@@ -3,7 +3,4 @@
     <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,39 +1,31 @@
 rootProject.name = 'jitsi-meet'
 
 include ':app', ':sdk'
-include ':react-native-amplitude'
-project(':react-native-amplitude').projectDir = new File(rootProject.projectDir, '../node_modules/@amplitude/react-native//android')
-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-performance'
-project(':react-native-performance').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-performance/android')
-include ':react-native-slider'
-project(':react-native-slider').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/slider/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-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,8 +1,10 @@
 /* application specific logic */
 
 import 'jquery';
+import 'jquery-contextmenu';
+import 'jQuery-Impromptu';
 
-import '@matrix-org/olm';
+import 'olm';
 
 import 'focus-visible';
 

babel.config.js

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

conference.js

@@ -1,12 +1,10 @@
 /* global APP, JitsiMeetJS, config, interfaceConfig */
 
-import { jitsiLocalStorage } from '@jitsi/js-utils';
 import EventEmitter from 'events';
 import Logger from 'jitsi-meet-logger';
 
 import { openConnection } from './connection';
 import { ENDPOINT_TEXT_MESSAGE_NAME } from './modules/API/constants';
-import { AUDIO_ONLY_SCREEN_SHARE_NO_TRACK } from './modules/UI/UIErrors';
 import AuthHandler from './modules/UI/authentication/AuthHandler';
 import UIUtil from './modules/UI/util/UIUtil';
 import mediaDeviceHelper from './modules/devices/mediaDeviceHelper';
@@ -35,18 +33,15 @@ import {
     conferenceLeft,
     conferenceSubjectChanged,
     conferenceTimestampChanged,
-    conferenceUniqueIdSet,
     conferenceWillJoin,
     conferenceWillLeave,
     dataChannelOpened,
-    getConferenceOptions,
     kickedOut,
     lockStateChanged,
     onStartMutedPolicyChanged,
     p2pStatusChanged,
     sendLocalParticipant
 } from './react/features/base/conference';
-import { getReplaceParticipant } from './react/features/base/config/functions';
 import {
     checkAndNotifyForNewDevice,
     getAvailableDevices,
@@ -56,7 +51,6 @@ import {
     setAudioOutputDeviceId,
     updateDeviceList
 } from './react/features/base/devices';
-import { isIosMobileBrowser } from './react/features/base/environment/utils';
 import {
     browser,
     isFatalJitsiConnectionError,
@@ -104,7 +98,6 @@ import {
     destroyLocalTracks,
     getLocalJitsiAudioTrack,
     getLocalJitsiVideoTrack,
-    getLocalTracks,
     isLocalCameraTrackMuted,
     isLocalTrackMuted,
     isUserInteractionRequiredForUnmute,
@@ -113,6 +106,7 @@ import {
     trackRemoved
 } from './react/features/base/tracks';
 import { downloadJSON } from './react/features/base/util/downloadJSON';
+import { getConferenceOptions } from './react/features/conference/functions';
 import { showDesktopPicker } from './react/features/desktop-picker';
 import { appendSuffix } from './react/features/display-name';
 import {
@@ -120,7 +114,7 @@ import {
     submitFeedback
 } from './react/features/feedback';
 import { showNotification } from './react/features/notifications';
-import { mediaPermissionPromptVisibilityChanged, toggleSlowGUMOverlay } from './react/features/overlay';
+import { mediaPermissionPromptVisibilityChanged } from './react/features/overlay';
 import { suspendDetected } from './react/features/power-monitor';
 import {
     initPrejoin,
@@ -129,11 +123,10 @@ import {
     makePrecallTest
 } from './react/features/prejoin';
 import { disableReceiver, stopReceiver } from './react/features/remote-control';
-import { setScreenAudioShareState, isScreenAudioShared } from './react/features/screen-share/';
 import { toggleScreenshotCaptureEffect } from './react/features/screenshot-capture';
+import { setSharedVideoStatus } from './react/features/shared-video';
 import { AudioMixerEffect } from './react/features/stream-effects/audio-mixer/AudioMixerEffect';
 import { createPresenterEffect } from './react/features/stream-effects/presenter';
-import { createRnnoiseProcessor } from './react/features/stream-effects/rnnoise';
 import { endpointMessageReceived } from './react/features/subtitles';
 import UIEvents from './service/UI/UIEvents';
 
@@ -179,7 +172,8 @@ const commands = {
     AVATAR_URL: AVATAR_URL_COMMAND,
     CUSTOM_ROLE: 'custom-role',
     EMAIL: EMAIL_COMMAND,
-    ETHERPAD: 'etherpad'
+    ETHERPAD: 'etherpad',
+    SHARED_VIDEO: 'shared-video'
 };
 
 /**
@@ -307,13 +301,10 @@ class ConferenceConnector {
 
         // not enough rights to create conference
         case JitsiConferenceErrors.AUTHENTICATION_REQUIRED: {
-
-            const replaceParticipant = getReplaceParticipant(APP.store.getState());
-
             // Schedule reconnect to check if someone else created the room.
             this.reconnectTimeout = setTimeout(() => {
                 APP.store.dispatch(conferenceWillJoin(room));
-                room.join(null, replaceParticipant);
+                room.join();
             }, 5000);
 
             const { password }
@@ -385,6 +376,7 @@ class ConferenceConnector {
         if (this.reconnectTimeout !== null) {
             clearTimeout(this.reconnectTimeout);
         }
+        AuthHandler.closeAuth();
     }
 
     /**
@@ -399,10 +391,7 @@ class ConferenceConnector {
      *
      */
     connect() {
-        const replaceParticipant = getReplaceParticipant(APP.store.getState());
-
-        // the local storage overrides here and in connection.js can be used by jibri
-        room.join(jitsiLocalStorage.getItem('xmpp_conference_password_override'), replaceParticipant);
+        room.join();
     }
 }
 
@@ -483,42 +472,34 @@ export default {
      */
     createInitialLocalTracks(options = {}) {
         const errors = {};
-
-        // Always get a handle on the audio input device so that we have statistics (such as "No audio input" or
-        // "Are you trying to speak?" ) even if the user joins the conference muted.
-        const initialDevices = config.disableInitialGUM ? [] : [ 'audio' ];
-        const requestedAudio = !config.disableInitialGUM;
+        const initialDevices = [ 'audio' ];
+        const requestedAudio = true;
         let requestedVideo = false;
 
-        if (!config.disableInitialGUM
-                && !options.startWithVideoMuted
+        // Always get a handle on the audio input device so that we have statistics even if the user joins the
+        // conference muted. Previous implementation would only acquire the handle when the user first unmuted,
+        // which would results in statistics ( such as "No audio input" or "Are you trying to speak?") being available
+        // only after that point.
+        if (options.startWithAudioMuted) {
+            this.muteAudio(true, true);
+        }
+
+        if (!options.startWithVideoMuted
                 && !options.startAudioOnly
                 && !options.startScreenSharing) {
             initialDevices.push('video');
             requestedVideo = true;
         }
 
-        if (!config.disableInitialGUM) {
-            JitsiMeetJS.mediaDevices.addEventListener(
-                JitsiMediaDevicesEvents.PERMISSION_PROMPT_IS_SHOWN,
-                browserName =>
-                    APP.store.dispatch(
-                        mediaPermissionPromptVisibilityChanged(true, browserName))
-            );
-        }
-
         JitsiMeetJS.mediaDevices.addEventListener(
-            JitsiMediaDevicesEvents.SLOW_GET_USER_MEDIA,
-            () => APP.store.dispatch(toggleSlowGUMOverlay(true))
+            JitsiMediaDevicesEvents.PERMISSION_PROMPT_IS_SHOWN,
+            browserName =>
+                APP.store.dispatch(
+                    mediaPermissionPromptVisibilityChanged(true, browserName))
         );
 
         let tryCreateLocalTracks;
 
-        // On Electron there is no permission prompt for granting permissions. That's why we don't need to
-        // spend much time displaying the overlay screen. If GUM is not resolved within 15 seconds it will
-        // probably never resolve.
-        const timeout = browser.isElectron() ? 15000 : 60000;
-
         // FIXME is there any simpler way to rewrite this spaghetti below ?
         if (options.startScreenSharing) {
             tryCreateLocalTracks = this._createDesktopTrack()
@@ -527,12 +508,7 @@ export default {
                         return [ desktopStream ];
                     }
 
-                    return createLocalTracksF({
-                        devices: [ 'audio' ],
-                        timeout,
-                        firePermissionPromptIsShownEvent: true,
-                        fireSlowPromiseEvent: true
-                    })
+                    return createLocalTracksF({ devices: [ 'audio' ] }, true)
                         .then(([ audioStream ]) =>
                             [ desktopStream, audioStream ])
                         .catch(error => {
@@ -546,12 +522,7 @@ export default {
                     errors.screenSharingError = error;
 
                     return requestedAudio
-                        ? createLocalTracksF({
-                            devices: [ 'audio' ],
-                            timeout,
-                            firePermissionPromptIsShownEvent: true,
-                            fireSlowPromiseEvent: true
-                        })
+                        ? createLocalTracksF({ devices: [ 'audio' ] }, true)
                         : [];
                 })
                 .catch(error => {
@@ -563,37 +534,15 @@ export default {
             // Resolve with no tracks
             tryCreateLocalTracks = Promise.resolve([]);
         } else {
-            tryCreateLocalTracks = createLocalTracksF({
-                devices: initialDevices,
-                timeout,
-                firePermissionPromptIsShownEvent: true,
-                fireSlowPromiseEvent: true
-            })
+            tryCreateLocalTracks = createLocalTracksF({ devices: initialDevices }, true)
                 .catch(err => {
                     if (requestedAudio && requestedVideo) {
 
                         // Try audio only...
                         errors.audioAndVideoError = err;
 
-                        if (err.name === JitsiTrackErrors.TIMEOUT && !browser.isElectron()) {
-                            // In this case we expect that the permission prompt is still visible. There is no point of
-                            // executing GUM with different source. Also at the time of writing the following
-                            // inconsistency have been noticed in some browsers - if the permissions prompt is visible
-                            // and another GUM is executed the prompt does not change its content but if the user
-                            // clicks allow the user action isassociated with the latest GUM call.
-                            errors.audioOnlyError = err;
-                            errors.videoOnlyError = err;
-
-                            return [];
-                        }
-
                         return (
-                            createLocalTracksF({
-                                devices: [ 'audio' ],
-                                timeout,
-                                firePermissionPromptIsShownEvent: true,
-                                fireSlowPromiseEvent: true
-                            }));
+                            createLocalTracksF({ devices: [ 'audio' ] }, true));
                     } else if (requestedAudio && !requestedVideo) {
                         errors.audioOnlyError = err;
 
@@ -614,11 +563,7 @@ export default {
 
                     // Try video only...
                     return requestedVideo
-                        ? createLocalTracksF({
-                            devices: [ 'video' ],
-                            firePermissionPromptIsShownEvent: true,
-                            fireSlowPromiseEvent: true
-                        })
+                        ? createLocalTracksF({ devices: [ 'video' ] }, true)
                         : [];
                 })
                 .catch(err => {
@@ -634,11 +579,10 @@ export default {
 
         // Hide the permissions prompt/overlay as soon as the tracks are
         // created. Don't wait for the connection to be made, since in some
-        // cases, when auth is required, for instance, that won't happen until
+        // cases, when auth is rquired, for instance, that won't happen until
         // the user inputs their credentials, but the dialog would be
         // overshadowed by the overlay.
         tryCreateLocalTracks.then(tracks => {
-            APP.store.dispatch(toggleSlowGUMOverlay(false));
             APP.store.dispatch(mediaPermissionPromptVisibilityChanged(false));
 
             return tracks;
@@ -650,42 +594,6 @@ export default {
         };
     },
 
-    /**
-     * Displays error notifications according to the state carried by {@code errors} object returned
-     * by {@link createInitialLocalTracks}.
-     * @param {Object} errors - the errors (if any) returned by {@link createInitialLocalTracks}.
-     *
-     * @returns {void}
-     * @private
-     */
-    _displayErrorsForCreateInitialLocalTracks(errors) {
-        const {
-            audioAndVideoError,
-            audioOnlyError,
-            screenSharingError,
-            videoOnlyError
-        } = errors;
-
-        // FIXME If there will be microphone error it will cover any screensharing dialog, but it's still better than in
-        // the reverse order where the screensharing dialog will sometimes be closing the microphone alert
-        // ($.prompt.close(); is called). Need to figure out dialogs chaining to fix that.
-        if (screenSharingError) {
-            this._handleScreenSharingError(screenSharingError);
-        }
-        if (audioAndVideoError || audioOnlyError) {
-            if (audioOnlyError || videoOnlyError) {
-                // If both requests for 'audio' + 'video' and 'audio' only failed, we assume that there are some
-                // problems with user's microphone and show corresponding dialog.
-                APP.store.dispatch(notifyMicError(audioOnlyError));
-                APP.store.dispatch(notifyCameraError(videoOnlyError));
-            } else {
-                // If request for 'audio' + 'video' failed, but request for 'audio' only was OK, we assume that we had
-                // problems with camera and show corresponding dialog.
-                APP.store.dispatch(notifyCameraError(audioAndVideoError));
-            }
-        }
-    },
-
     /**
      * Creates local media tracks and connects to a room. Will show error
      * dialogs in case accessing the local microphone and/or camera failed. Will
@@ -706,11 +614,38 @@ export default {
      */
     createInitialLocalTracksAndConnect(roomName, options = {}) {
         const { tryCreateLocalTracks, errors } = this.createInitialLocalTracks(options);
+        const {
+            audioAndVideoError,
+            audioOnlyError,
+            screenSharingError,
+            videoOnlyError
+        } = errors;
 
         return Promise.all([ tryCreateLocalTracks, connect(roomName) ])
             .then(([ tracks, con ]) => {
-
-                this._displayErrorsForCreateInitialLocalTracks(errors);
+                // FIXME If there will be microphone error it will cover any
+                // screensharing dialog, but it's still better than in
+                // the reverse order where the screensharing dialog will
+                // sometimes be closing the microphone alert ($.prompt.close();
+                // is called). Need to figure out dialogs chaining to fix that.
+                if (screenSharingError) {
+                    this._handleScreenSharingError(screenSharingError);
+                }
+                if (audioAndVideoError || audioOnlyError) {
+                    if (audioOnlyError || videoOnlyError) {
+                        // If both requests for 'audio' + 'video' and 'audio'
+                        // only failed, we assume that there are some problems
+                        // with user's microphone and show corresponding dialog.
+                        APP.store.dispatch(notifyMicError(audioOnlyError));
+                        APP.store.dispatch(notifyCameraError(videoOnlyError));
+                    } else {
+                        // If request for 'audio' + 'video' failed, but request
+                        // for 'audio' only was OK, we assume that we had
+                        // problems with camera and show corresponding dialog.
+                        APP.store.dispatch(
+                            notifyCameraError(audioAndVideoError));
+                    }
+                }
 
                 return [ tracks, con ];
             });
@@ -745,7 +680,7 @@ export default {
         }
 
         if (!tracks.find(t => t.isVideoTrack())) {
-            this.setVideoMuteStatus();
+            this.setVideoMuteStatus(true);
         }
 
         if (config.iAmRecorder) {
@@ -818,33 +753,15 @@ export default {
             // they may remain as empty strings.
             this._initDeviceList(true);
 
-            if (isPrejoinPageVisible(APP.store.getState())) {
-                return APP.store.dispatch(initPrejoin(tracks, errors));
-            }
-
-            logger.debug('Prejoin screen no longer displayed at the time when tracks were created');
-
-            this._displayErrorsForCreateInitialLocalTracks(errors);
-
-            return this._setLocalAudioVideoStreams(tracks);
+            return APP.store.dispatch(initPrejoin(tracks, errors));
         }
 
-        const [ tracks, con ] = await this.createInitialLocalTracksAndConnect(roomName, initialOptions);
-        let localTracks = tracks;
+        const [ tracks, con ] = await this.createInitialLocalTracksAndConnect(
+            roomName, initialOptions);
 
         this._initDeviceList(true);
 
-        if (initialOptions.startWithAudioMuted) {
-            // Always add the audio track to the peer connection and then mute the track on mobile Safari
-            // because of a known issue where audio playout doesn't happen if the user joins audio and video muted.
-            if (isIosMobileBrowser()) {
-                this.muteAudio(true, true);
-            } else {
-                localTracks = localTracks.filter(track => track.getType() !== MEDIA_TYPE.AUDIO);
-            }
-        }
-
-        return this.startConference(con, localTracks);
+        return this.startConference(con, tracks);
     },
 
     /**
@@ -912,7 +829,7 @@ export default {
                 showUI && APP.store.dispatch(notifyMicError(error));
             };
 
-            createLocalTracksF({ devices: [ 'audio' ] })
+            createLocalTracksF({ devices: [ 'audio' ] }, false)
                 .then(([ audioTrack ]) => audioTrack)
                 .catch(error => {
                     maybeShowErrorDialog(error);
@@ -1005,7 +922,7 @@ export default {
             // This will only modify base/media.video.muted which is then synced
             // up with the track at the end of local tracks initialization.
             muteLocalVideo(mute);
-            this.setVideoMuteStatus();
+            this.setVideoMuteStatus(mute);
 
             return;
         } else if (this.isLocalVideoMuted() === mute) {
@@ -1026,7 +943,7 @@ export default {
             //
             // FIXME when local track creation is moved to react/redux
             // it should take care of the use case described above
-            createLocalTracksF({ devices: [ 'video' ] })
+            createLocalTracksF({ devices: [ 'video' ] }, false)
                 .then(([ videoTrack ]) => videoTrack)
                 .catch(error => {
                     // FIXME should send some feedback to the API on error ?
@@ -1035,11 +952,7 @@ export default {
                     // Rollback the video muted status by using null track
                     return null;
                 })
-                .then(videoTrack => {
-                    logger.debug(`muteVideo: calling useVideoStream for track: ${videoTrack}`);
-
-                    return this.useVideoStream(videoTrack);
-                });
+                .then(videoTrack => this.useVideoStream(videoTrack));
         } else {
             // FIXME show error dialog if it fails (should be handled by react)
             muteLocalVideo(mute);
@@ -1099,6 +1012,17 @@ export default {
         return room && room.isCallstatsEnabled();
     },
 
+    /**
+     * Sends the given feedback through CallStats if enabled.
+     *
+     * @param overallFeedback an integer between 1 and 5 indicating the
+     * user feedback
+     * @param detailedFeedback detailed feedback from the user. Not yet used
+     */
+    sendFeedback(overallFeedback, detailedFeedback) {
+        return room.sendFeedback(overallFeedback, detailedFeedback);
+    },
+
     /**
      * Get speaker stats that track total dominant speaker time.
      *
@@ -1328,11 +1252,7 @@ export default {
                 this._getConferenceOptions());
 
         APP.store.dispatch(conferenceWillJoin(room));
-
-        // Filter out the tracks that are muted (except on mobile Safari).
-        const tracks = isIosMobileBrowser() ? localTracks : localTracks.filter(track => !track.isMuted());
-
-        this._setLocalAudioVideoStreams(tracks);
+        this._setLocalAudioVideoStreams(localTracks);
         this._room = room; // FIXME do not use this
 
         sendLocalParticipant(APP.store, room);
@@ -1351,11 +1271,8 @@ export default {
             if (track.isAudioTrack()) {
                 return this.useAudioStream(track);
             } else if (track.isVideoTrack()) {
-                logger.debug(`_setLocalAudioVideoStreams is calling useVideoStream with track: ${track}`);
-
                 return this.useVideoStream(track);
             }
-
             logger.error(
                     'Ignored not an audio nor a video track: ', track);
 
@@ -1365,11 +1282,7 @@ export default {
     },
 
     _getConferenceOptions() {
-        const options = getConferenceOptions(APP.store.getState());
-
-        options.createVADProcessor = createRnnoiseProcessor;
-
-        return options;
+        return getConferenceOptions(APP.store.getState());
     },
 
     /**
@@ -1379,8 +1292,6 @@ export default {
      * @returns {Promise}
      */
     useVideoStream(newTrack) {
-        logger.debug(`useVideoStream: ${newTrack}`);
-
         return new Promise((resolve, reject) => {
             _replaceLocalVideoTrackQueue.enqueue(onFinish => {
                 const state = APP.store.getState();
@@ -1390,30 +1301,24 @@ export default {
                 if (isPrejoinPageVisible(state)) {
                     const oldTrack = getLocalJitsiVideoTrack(state);
 
-                    logger.debug(`useVideoStream on the prejoin screen: Replacing ${oldTrack} with ${newTrack}`);
-
                     return APP.store.dispatch(replaceLocalTrack(oldTrack, newTrack))
                         .then(resolve)
-                        .catch(error => {
-                            logger.error(`useVideoStream failed on the prejoin screen: ${error}`);
-                            reject(error);
-                        })
+                        .catch(reject)
                         .then(onFinish);
                 }
 
-                logger.debug(`useVideoStream: Replacing ${this.localVideo} with ${newTrack}`);
                 APP.store.dispatch(
-                    replaceLocalTrack(this.localVideo, newTrack, room))
+                replaceLocalTrack(this.localVideo, newTrack, room))
                     .then(() => {
                         this.localVideo = newTrack;
                         this._setSharingScreen(newTrack);
-                        this.setVideoMuteStatus();
+                        if (newTrack) {
+                            APP.UI.addLocalVideoStream(newTrack);
+                        }
+                        this.setVideoMuteStatus(this.isLocalVideoMuted());
                     })
                     .then(resolve)
-                    .catch(error => {
-                        logger.error(`useVideoStream failed: ${error}`);
-                        reject(error);
-                    })
+                    .catch(reject)
                     .then(onFinish);
             });
         });
@@ -1558,15 +1463,9 @@ export default {
             this._desktopAudioStream = undefined;
         }
 
-        APP.store.dispatch(setScreenAudioShareState(false));
-
         if (didHaveVideo) {
             promise = promise.then(() => createLocalTracksF({ devices: [ 'video' ] }))
-                .then(([ stream ]) => {
-                    logger.debug(`_turnScreenSharingOff using ${stream} for useVideoStream`);
-
-                    return this.useVideoStream(stream);
-                })
+                .then(([ stream ]) => this.useVideoStream(stream))
                 .catch(error => {
                     logger.error('failed to switch back to local video', error);
 
@@ -1577,11 +1476,7 @@ export default {
                     );
                 });
         } else {
-            promise = promise.then(() => {
-                logger.debug('_turnScreenSharingOff using null for useVideoStream');
-
-                return this.useVideoStream(null);
-            });
+            promise = promise.then(() => this.useVideoStream(null));
         }
 
         return promise.then(
@@ -1592,8 +1487,6 @@ export default {
             },
             error => {
                 this.videoSwitchInProgress = false;
-                logger.error(`_turnScreenSharingOff failed: ${error}`);
-
                 throw error;
             });
     },
@@ -1614,7 +1507,6 @@ export default {
      * @return {Promise.<T>}
      */
     async toggleScreenSharing(toggle = !this._untoggleScreenSharing, options = {}) {
-        logger.debug(`toggleScreenSharing: ${toggle}`);
         if (this.videoSwitchInProgress) {
             return Promise.reject('Switch in progress.');
         }
@@ -1676,30 +1568,11 @@ export default {
                 = this._turnScreenSharingOff.bind(this, didHaveVideo);
 
             const desktopVideoStream = desktopStreams.find(stream => stream.getType() === MEDIA_TYPE.VIDEO);
-            const dekstopAudioStream = desktopStreams.find(stream => stream.getType() === MEDIA_TYPE.AUDIO);
-
-            if (dekstopAudioStream) {
-                dekstopAudioStream.on(
-                    JitsiTrackEvents.LOCAL_TRACK_STOPPED,
-                    () => {
-                        logger.debug(`Local screensharing audio track stopped. ${this.isSharingScreen}`);
-
-                        // Handle case where screen share was stopped from  the browsers 'screen share in progress'
-                        // window. If audio screen sharing is stopped via the normal UX flow this point shouldn't
-                        // be reached.
-                        isScreenAudioShared(APP.store.getState())
-                            && this._untoggleScreenSharing
-                            && this._untoggleScreenSharing();
-                    }
-                );
-            }
 
             if (desktopVideoStream) {
                 desktopVideoStream.on(
                     JitsiTrackEvents.LOCAL_TRACK_STOPPED,
                     () => {
-                        logger.debug(`Local screensharing track stopped. ${this.isSharingScreen}`);
-
                         // If the stream was stopped during screen sharing
                         // session then we should switch back to video.
                         this.isSharingScreen
@@ -1776,12 +1649,16 @@ export default {
             const isPortrait = height >= width;
             const DESKTOP_STREAM_CAP = 720;
 
+            // Config.js setting for resizing high resolution desktop tracks to 720p when presenter is turned on.
+            const resizeEnabled = config.videoQuality && config.videoQuality.resizeDesktopForPresenter;
             const highResolutionTrack
                 = (isPortrait && width > DESKTOP_STREAM_CAP) || (!isPortrait && height > DESKTOP_STREAM_CAP);
 
             // Resizing the desktop track for presenter is causing blurriness of the desktop share on chrome.
             // Disable resizing by default, enable it only when config.js setting is enabled.
-            const resizeDesktopStream = highResolutionTrack && config.videoQuality?.resizeDesktopForPresenter;
+            // Firefox doesn't return width and height for desktop tracks. Therefore, track needs to be resized
+            // for creating the canvas for presenter.
+            const resizeDesktopStream = browser.isFirefox() || (highResolutionTrack && resizeEnabled);
 
             if (resizeDesktopStream) {
                 let desktopResizeConstraints = {};
@@ -1799,7 +1676,7 @@ export default {
                     };
                 }
 
-                // Apply the constraints on the desktop track.
+                // Apply the contraints on the desktop track.
                 try {
                     await this.localVideo.track.applyConstraints(desktopResizeConstraints);
                 } catch (err) {
@@ -1826,7 +1703,7 @@ export default {
             try {
                 await this.localVideo.setEffect(effect);
                 APP.store.dispatch(setVideoMuted(mute, MEDIA_TYPE.PRESENTER));
-                this.setVideoMuteStatus();
+                this.setVideoMuteStatus(mute);
             } catch (err) {
                 logger.error('Failed to apply the Presenter effect', err);
             }
@@ -1857,28 +1734,14 @@ export default {
 
         return this._createDesktopTrack(options)
             .then(async streams => {
-                let desktopVideoStream = streams.find(stream => stream.getType() === MEDIA_TYPE.VIDEO);
-
-                this._desktopAudioStream = streams.find(stream => stream.getType() === MEDIA_TYPE.AUDIO);
-
-                const { audioOnly = false } = options;
-
-                // If we're in audio only mode dispose of the video track otherwise the screensharing state will be
-                // inconsistent.
-                if (audioOnly) {
-                    desktopVideoStream.dispose();
-                    desktopVideoStream = undefined;
-
-                    if (!this._desktopAudioStream) {
-                        return Promise.reject(AUDIO_ONLY_SCREEN_SHARE_NO_TRACK);
-                    }
-                }
+                const desktopVideoStream = streams.find(stream => stream.getType() === MEDIA_TYPE.VIDEO);
 
                 if (desktopVideoStream) {
-                    logger.debug(`_switchToScreenSharing is using ${desktopVideoStream} for useVideoStream`);
                     await this.useVideoStream(desktopVideoStream);
                 }
 
+                this._desktopAudioStream = streams.find(stream => stream.getType() === MEDIA_TYPE.AUDIO);
+
                 if (this._desktopAudioStream) {
                     // If there is a localAudio stream, mix in the desktop audio stream captured by the screen sharing
                     // api.
@@ -1890,9 +1753,7 @@ export default {
                         // If no local stream is present ( i.e. no input audio devices) we use the screen share audio
                         // stream as we would use a regular stream.
                         await this.useAudioStream(this._desktopAudioStream);
-
                     }
-                    APP.store.dispatch(setScreenAudioShareState(true));
                 }
             })
             .then(() => {
@@ -1960,9 +1821,6 @@ export default {
         } else if (error.name === JitsiTrackErrors.SCREENSHARING_GENERIC_ERROR) {
             descriptionKey = 'dialog.screenSharingFailed';
             titleKey = 'dialog.screenSharingFailedTitle';
-        } else if (error === AUDIO_ONLY_SCREEN_SHARE_NO_TRACK) {
-            descriptionKey = 'notify.screenShareNoAudio';
-            titleKey = 'notify.screenShareNoAudioTitle';
         }
 
         APP.UI.messageHandler.showError({
@@ -1987,15 +1845,6 @@ export default {
                 APP.store.dispatch(conferenceLeft(room, ...args));
             });
 
-        room.on(
-            JitsiConferenceEvents.CONFERENCE_UNIQUE_ID_SET,
-            (...args) => {
-                // Preserve the sessionId so that the value is accessible even after room
-                // is disconnected.
-                room.sessionId = room.getMeetingUniqueId();
-                APP.store.dispatch(conferenceUniqueIdSet(room, ...args));
-            });
-
         room.on(
             JitsiConferenceEvents.AUTH_STATUS_CHANGED,
             (authEnabled, authLogin) =>
@@ -2013,7 +1862,7 @@ export default {
             }
 
             APP.store.dispatch(updateRemoteParticipantFeatures(user));
-            logger.log(`USER ${id} connected:`, user);
+            logger.log(`USER ${id} connnected:`, user);
             APP.UI.addUser(user);
         });
 
@@ -2026,6 +1875,8 @@ export default {
             }
 
             logger.log(`USER ${id} LEFT:`, user);
+
+            APP.UI.onSharedVideoStop(id);
         });
 
         room.on(JitsiConferenceEvents.USER_STATUS_CHANGED, (id, status) => {
@@ -2085,11 +1936,7 @@ export default {
 
         room.on(JitsiConferenceEvents.TRACK_MUTE_CHANGED, (track, participantThatMutedUs) => {
             if (participantThatMutedUs) {
-                APP.store.dispatch(participantMutedUs(participantThatMutedUs, track));
-                if (this.isSharingScreen && track.isVideoTrack()) {
-                    logger.debug('TRACK_MUTE_CHANGED while screen sharing');
-                    this._turnScreenSharingOff(false);
-                }
+                APP.store.dispatch(participantMutedUs(participantThatMutedUs));
             }
         });
 
@@ -2113,7 +1960,7 @@ export default {
 
         room.on(
             JitsiConferenceEvents.DOMINANT_SPEAKER_CHANGED,
-            (dominant, previous) => APP.store.dispatch(dominantSpeakerChanged(dominant, previous, room)));
+            id => APP.store.dispatch(dominantSpeakerChanged(id, room)));
 
         room.on(
             JitsiConferenceEvents.CONFERENCE_CREATED_TIMESTAMP,
@@ -2147,6 +1994,7 @@ export default {
                             formattedDisplayName
                                 || interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME)
                 });
+                APP.UI.changeDisplayName(id, formattedDisplayName);
             }
         );
         room.on(
@@ -2184,25 +2032,11 @@ export default {
             JitsiConferenceEvents.LOCK_STATE_CHANGED,
             (...args) => APP.store.dispatch(lockStateChanged(room, ...args)));
 
-        room.on(JitsiConferenceEvents.KICKED, (participant, reason, isReplaced) => {
-            if (isReplaced) {
-                // this event triggers when the local participant is kicked, `participant`
-                // is the kicker. In replace participant case, kicker is undefined,
-                // as the server initiated it. We mark in store the local participant
-                // as being replaced based on jwt.
-                const localParticipant = getLocalParticipant(APP.store.getState());
-
-                APP.store.dispatch(participantUpdated({
-                    conference: room,
-                    id: localParticipant.id,
-                    isReplaced
-                }));
-
-                // we send readyToClose when kicked participant is replace so that
-                // embedding app can choose to dispose the iframe API on the handler.
-                APP.API.notifyReadyToClose();
-            }
+        room.on(JitsiConferenceEvents.KICKED, participant => {
+            APP.UI.hideStats();
             APP.store.dispatch(kickedOut(room, participant));
+
+            // FIXME close
         });
 
         room.on(JitsiConferenceEvents.PARTICIPANT_KICKED, (kicker, kicked) => {
@@ -2258,28 +2092,8 @@ export default {
             }
         );
         room.on(JitsiConferenceEvents.STARTED_MUTED, () => {
-            const audioMuted = room.isStartAudioMuted();
-            const videoMuted = room.isStartVideoMuted();
-            const localTracks = getLocalTracks(APP.store.getState()['features/base/tracks']);
-            const promises = [];
-
-            APP.store.dispatch(setAudioMuted(audioMuted));
-            APP.store.dispatch(setVideoMuted(videoMuted));
-
-            // Remove the tracks from the peerconnection.
-            for (const track of localTracks) {
-                // Always add the track on mobile Safari because of a known issue where audio playout doesn't happen
-                // if the user joins audio and video muted.
-                if (audioMuted && track.jitsiTrack?.getType() === MEDIA_TYPE.AUDIO && !isIosMobileBrowser()) {
-                    promises.push(this.useAudioStream(null));
-                }
-                if (videoMuted && track.jitsiTrack?.getType() === MEDIA_TYPE.VIDEO) {
-                    promises.push(this.useVideoStream(null));
-                }
-            }
-
-            Promise.allSettled(promises)
-                .then(() => APP.UI.notifyInitiallyMuted());
+            (room.isStartAudioMuted() || room.isStartVideoMuted())
+                && APP.UI.notifyInitiallyMuted();
         });
 
         room.on(
@@ -2329,8 +2143,8 @@ export default {
                     return this._createPresenterStreamEffect(height, cameraDeviceId)
                         .then(effect => this.localVideo.setEffect(effect))
                         .then(() => {
-                            this.setVideoMuteStatus();
-                            logger.log('Switched local video device while screen sharing and the video is unmuted');
+                            this.setVideoMuteStatus(false);
+                            logger.log('switched local video device');
                             this._updateVideoDeviceId();
                         })
                         .catch(err => APP.store.dispatch(notifyCameraError(err)));
@@ -2339,7 +2153,7 @@ export default {
                 // id for video, dispose the existing presenter track and create a new effect
                 // that can be applied on un-mute.
                 } else if (this.isSharingScreen && videoWasMuted) {
-                    logger.log('Switched local video device: while screen sharing and the video is muted');
+                    logger.log('switched local video device');
                     const { height } = this.localVideo.track.getSettings();
 
                     this._updateVideoDeviceId();
@@ -2366,20 +2180,12 @@ export default {
 
                         return stream;
                     })
-                    .then(stream => {
-                        logger.log('Switching the local video device.');
-
-                        return this.useVideoStream(stream);
-                    })
+                    .then(stream => this.useVideoStream(stream))
                     .then(() => {
-                        logger.log('Switched local video device.');
+                        logger.log('switched local video device');
                         this._updateVideoDeviceId();
                     })
-                    .catch(error => {
-                        logger.error(`Switching the local video device failed: ${error}`);
-
-                        return APP.store.dispatch(notifyCameraError(error));
-                    });
+                    .catch(err => APP.store.dispatch(notifyCameraError(err)));
                 }
             }
         );
@@ -2426,7 +2232,7 @@ export default {
                     return this.useAudioStream(stream);
                 })
                 .then(() => {
-                    if (this.localAudio && hasDefaultMicChanged) {
+                    if (hasDefaultMicChanged) {
                         // workaround for the default device to be shown as selected in the
                         // settings even when the real device id was passed to gUM because of the
                         // above mentioned chrome bug.
@@ -2468,18 +2274,65 @@ export default {
             // There is no guarantee another event will trigger the update
             // immediately and in all situations, for example because a remote
             // participant is having connection trouble so no status changes.
-            const displayedUserId = APP.UI.getLargeVideoID();
-
-            if (displayedUserId) {
-                APP.UI.updateLargeVideo(displayedUserId, true);
-            }
+            APP.UI.updateAllVideos();
         });
 
         APP.UI.addListener(
-            UIEvents.TOGGLE_SCREENSHARING, ({ enabled, audioOnly }) => {
-                this.toggleScreenSharing(enabled, { audioOnly });
-            }
+            UIEvents.TOGGLE_SCREENSHARING, this.toggleScreenSharing.bind(this)
         );
+
+        /* eslint-disable max-params */
+        APP.UI.addListener(
+            UIEvents.UPDATE_SHARED_VIDEO,
+            (url, state, time, isMuted, volume) => {
+                /* eslint-enable max-params */
+                // send start and stop commands once, and remove any updates
+                // that had left
+                if (state === 'stop'
+                        || state === 'start'
+                        || state === 'playing') {
+                    const localParticipant = getLocalParticipant(APP.store.getState());
+
+                    room.removeCommand(this.commands.defaults.SHARED_VIDEO);
+                    room.sendCommandOnce(this.commands.defaults.SHARED_VIDEO, {
+                        value: url,
+                        attributes: {
+                            state,
+                            time,
+                            muted: isMuted,
+                            volume,
+                            from: localParticipant.id
+                        }
+                    });
+                } else {
+                    // in case of paused, in order to allow late users to join
+                    // paused
+                    room.removeCommand(this.commands.defaults.SHARED_VIDEO);
+                    room.sendCommand(this.commands.defaults.SHARED_VIDEO, {
+                        value: url,
+                        attributes: {
+                            state,
+                            time,
+                            muted: isMuted,
+                            volume
+                        }
+                    });
+                }
+
+                APP.store.dispatch(setSharedVideoStatus(state));
+            });
+        room.addCommandListener(
+            this.commands.defaults.SHARED_VIDEO,
+            ({ value, attributes }, id) => {
+                if (attributes.state === 'stop') {
+                    APP.UI.onSharedVideoStop(id, attributes);
+                } else if (attributes.state === 'start') {
+                    APP.UI.onSharedVideoStart(id, value, attributes);
+                } else if (attributes.state === 'playing'
+                    || attributes.state === 'pause') {
+                    APP.UI.onSharedVideoUpdate(id, value, attributes);
+                }
+            });
     },
 
     /**
@@ -2513,11 +2366,14 @@ export default {
     _onConferenceJoined() {
         APP.UI.initConference();
 
-        if (!config.disableShortcuts) {
-            APP.keyboardshortcut.init();
-        }
+        APP.keyboardshortcut.init();
 
         APP.store.dispatch(conferenceJoined(room));
+
+        const displayName
+            = APP.store.getState()['features/base/settings'].displayName;
+
+        APP.UI.changeDisplayName('localVideoContainer', displayName);
     },
 
     /**
@@ -2684,7 +2540,6 @@ export default {
             delete newDevices.videoinput;
 
             // Removing the current video track in order to force the unmute to select the preferred device.
-            logger.debug('_onDeviceListChanged: Removing the current video track.');
             this.useVideoStream(null);
 
         }
@@ -2720,7 +2575,7 @@ export default {
                                     // Use the new stream or null if we failed to obtain it.
                                     return useStream(tracks.find(track => track.getType() === mediaType) || null)
                                         .then(() => {
-                                            if (this.localAudio && hasDefaultMicChanged) {
+                                            if (hasDefaultMicChanged) {
                                                 // workaround for the default device to be shown as selected in the
                                                 // settings even when the real device id was passed to gUM because of
                                                 // the above mentioned chrome bug.
@@ -2833,11 +2688,14 @@ export default {
             requestFeedbackPromise = Promise.resolve(true);
         }
 
+        // All promises are returning Promise.resolve to make Promise.all to
+        // be resolved when both Promises are finished. Otherwise Promise.all
+        // will reject on first rejected Promise and we can redirect the page
+        // before all operations are done.
         Promise.all([
             requestFeedbackPromise,
             this.leaveRoomAndDisconnect()
-        ])
-        .then(values => {
+        ]).then(values => {
             this._room = undefined;
             room = undefined;
 
@@ -2993,6 +2851,10 @@ export default {
         APP.store.dispatch(updateSettings({
             displayName: formattedNickname
         }));
+
+        if (room) {
+            APP.UI.changeDisplayName(id, formattedNickname);
+        }
     },
 
     /**
@@ -3075,9 +2937,12 @@ export default {
 
     /**
      * Sets the video muted status.
+     *
+     * @param {boolean} muted - New muted status.
      */
-    setVideoMuteStatus() {
+    setVideoMuteStatus(muted) {
         APP.UI.setVideoMuted(this.getMyUserId());
+        APP.API.notifyVideoMutedStatusChanged(muted);
     },
 
     /**

config.js

@@ -14,6 +14,9 @@ var config = {
         // Domain for authenticated users. Defaults to <domain>.
         // authdomain: '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',
 
@@ -27,6 +30,9 @@ var config = {
     // Websocket URL
     // websocket: 'wss://jitsi-meet.example.com/xmpp-websocket',
 
+    // The name of client node advertised in XEP-0115 'c' stanza
+    clientNode: 'http://jitsi.org/jitsimeet',
+
     // 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
@@ -56,10 +62,8 @@ 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. 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.
+        // the probability for this to be enabled.
+        // capScreenshareBitrate: 1 // 0 to disable
 
         // Enable callstats only for a percentage of users.
         // This takes a value between 0 and 100 which determines the probability for
@@ -67,12 +71,6 @@ var config = {
         // callStatsThreshold: 5 // enable callstats for 5% of the users.
     },
 
-    // Enables reactions feature.
-    // enableReactions: false,
-
-    // Disables polls feature.
-    // disablePolls: false,
-
     // Disables ICE/UDP by filtering out local and remote UDP candidates in
     // signalling.
     // webrtcIceUdpDisable: false,
@@ -85,9 +83,6 @@ var config = {
     // Media
     //
 
-    // Enable unified plan implementation support on Chromium based browsers.
-    // enableUnifiedOnChrome: false,
-
     // Audio
 
     // Disable measuring of audio levels.
@@ -99,15 +94,6 @@ 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
@@ -129,27 +115,19 @@ var config = {
     // participants and to enable it back a reload is needed.
     // startSilent: false
 
-    // Enables support for opus-red (redundancy for Opus).
-    // enableOpusRed: false,
+    // Sets the preferred target bitrate for the Opus audio codec by setting its
+    // 'maxaveragebitrate' parameter. Currently not available in p2p mode.
+    // Valid values are in the range 6000 to 510000
+    // opusMaxAverageBitrate: 20000,
 
-    // 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.
-    // },
+    // Enables redundancy for Opus
+    // enableOpusRed: false
 
     // Video
 
     // Sets the preferred resolution (height) for local video. Defaults to 720.
     // resolution: 720,
 
-    // Specifies whether the raised hand will hide when someone becomes a dominant speaker or not
-    // disableRemoveRaisedHandOnFocus: false,
-
-    // Specifies whether there will be a search field in speaker stats or not
-    // disableSpeakerStatsSearch: false,
-
     // 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,
@@ -172,10 +150,9 @@ var config = {
     // Enable / disable simulcast support.
     // disableSimulcast: false,
 
-    // Enable / disable layer suspension.  If enabled, endpoints whose HD layers are not in use will be suspended
-    // (no longer sent) until they are requested again. This is enabled by default. This must be enabled for screen
-    // sharing to work as expected on Chrome. Disabling this might result in low resolution screenshare being sent
-    // by the client.
+    // Enable / disable layer suspension.  If enabled, endpoints whose HD
+    // layers are not in use will be suspended (no longer sent) until they
+    // are requested again.
     // enableLayerSuspension: false,
 
     // Every participant after the Nth will start video muted.
@@ -237,18 +214,6 @@ var config = {
     // subtitles and buttons can be configured)
     // transcribingEnabled: false,
 
-    // If true transcriber will use the application language.
-    // The application language is either explicitly set by participants in their settings or automatically
-    // detected based on the environment, e.g. if the app is opened in a chrome instance which is using french as its
-    // default language then transcriptions for that participant will be in french.
-    // Defaults to true.
-    // transcribeWithAppLanguage: true,
-
-    // Transcriber language. This settings will only work if "transcribeWithAppLanguage" is explicitly set to false.
-    // Available languages can be found in
-    // ./src/react/features/transcribing/transcriber-langs.json.
-    // preferredTranscribeLanguage: 'en-US',
-
     // Enables automatic turning on captions when recording is started
     // autoCaptionOnRecord: false,
 
@@ -257,19 +222,6 @@ var config = {
     // Default value for the channel "last N" attribute. -1 for unlimited.
     channelLastN: -1,
 
-    // Connection indicators
-    // connectionIndicators: {
-    //     autoHide: true,
-    //     autoHideTimeout: 5000,
-    //     disabled: false,
-    //     inactiveDisabled: false
-    // },
-
-    // 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.
@@ -286,12 +238,6 @@ var config = {
     //     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
@@ -307,34 +253,15 @@ var config = {
     //    // 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
-    //          }
+    //        low: 200000,
+    //        standard: 500000,
+    //        high: 1500000
     //    },
     //
     //    // The options can be used to override default thresholds of video thumbnail heights corresponding to
@@ -375,11 +302,18 @@ var config = {
     // Disables or enables RTX (RFC 4588) (defaults to false).
     // disableRtx: false,
 
-    // Disables or enables TCC support in this client (default: enabled).
+    // Disables or enables TCC (the default is in Jicofo and set to true)
+    // (draft-holmer-rmcat-transport-wide-cc-extensions-01). This setting
+    // affects congestion control, it practically enables send-side bandwidth
+    // estimations.
     // enableTcc: true,
 
-    // Disables or enables REMB support in this client (default: enabled).
-    // enableRemb: 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,
 
     // 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
@@ -389,26 +323,26 @@ var config = {
     // TCC sequence numbers starting from 0.
     // enableIceRestart: false,
 
-    // Enables forced reload of the client when the call is migrated as a result of
-    // the bridge going down.
-    // enableForcedReload: true,
+    // Defines the minimum number of participants to start a call (the default
+    // is set in Jicofo and set to 2).
+    // minParticipants: 2,
 
     // 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
 
-    // Enable support for encoded transform in supported browsers. This allows
-    // E2EE to work in Safari if the corresponding flag is enabled in the browser.
-    // Experimental.
-    // enableEncodedTransformSupport: 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,
+    openBridgeChannel: 'websocket',
+
 
     // UI
     //
 
-    // Disables responsive tiles.
-    // disableResponsiveTiles: false,
-
     // Hides lobby button
     // hideLobbyButton: false,
 
@@ -419,21 +353,12 @@ 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.
-    // Setting this to null, will also disable showing the remote videos
-    // when the toolbar is shown on mouse movements
-    // disable1On1Mode: null | false | true,
+    // disable1On1Mode: false,
 
     // Default language for the user interface.
     // defaultLanguage: 'en',
@@ -459,13 +384,6 @@ var config = {
     // When 'true', it shows an intermediate page before joining, where the user can configure their devices.
     // prejoinPageEnabled: false,
 
-    // 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.
@@ -475,63 +393,6 @@ var config = {
     // 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'
-    // ],
-
-    // List of pre meeting screens buttons to hide. The values must be one or more of the 5 allowed buttons:
-    // 'microphone', 'camera', 'select-background', 'invite', 'settings'
-    // hiddenPremeetingButtons: [],
-
     // Stats
     //
 
@@ -549,38 +410,12 @@ var config = {
     // callStatsID: '',
     // callStatsSecret: '',
 
-    // The callstats initialize config params as described in the API:
-    // https://docs.callstats.io/docs/javascript#callstatsinitialize-with-app-secret
-    // callStatsConfigParams: {
-    //     disableBeforeUnloadHandler: true, // disables callstats.js's window.onbeforeunload parameter.
-    //     applicationVersion: "app_version", // Application version specified by the developer.
-    //     disablePrecalltest: true, // disables the pre-call test, it is enabled by default.
-    //     siteID: "siteID", // The name/ID of the site/campus from where the call/pre-call test is made.
-    //     additionalIDs: { // additionalIDs object, contains application related IDs.
-    //         customerID: "Customer Identifier. Example, walmart.",
-    //         tenantID: "Tenant Identifier. Example, monster.",
-    //         productName: "Product Name. Example, Jitsi.",
-    //         meetingsName: "Meeting Name. Example, Jitsi loves callstats.",
-    //         serverName: "Server/MiddleBox Name. Example, jvb-prod-us-east-mlkncws12.",
-    //         pbxID: "PBX Identifier. Example, walmart.",
-    //         pbxExtensionID: "PBX Extension Identifier. Example, 5625.",
-    //         fqExtensionID: "Fully qualified Extension Identifier. Example, +71 (US) +5625.",
-    //         sessionID: "Session Identifier. Example, session-12-34"
-    //     },
-    //     collectLegacyStats: true, //enables the collection of legacy stats in chrome browser
-    //     collectIP: true //enables the collection localIP address
-    // },
-
     // Enables sending participants' display names to callstats
     // enableDisplayNameInStats: false,
 
     // 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
     //
 
@@ -602,8 +437,12 @@ var config = {
         // connection.
         enabled: true,
 
-        // Enable unified plan implementation support on Chromium for p2p connection.
-        // enableUnifiedOnChrome: false,
+        // 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' }
+        ]
 
         // Sets the ICE transport policy for the p2p connection. At the time
         // of this writing the list of possible values are 'all' and 'relay',
@@ -615,7 +454,7 @@ var config = {
 
         // If set to true, it will prefer to use H.264 for P2P calls (if H.264
         // is supported). This setting is deprecated, use preferredCodec instead.
-        // preferH264: true,
+        // preferH264: true
 
         // Provides a way to set the video codec preference on the p2p connection. Acceptable
         // codec values are 'VP8', 'VP9' and 'H264'.
@@ -630,20 +469,10 @@ var config = {
 
         // 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,
-
-        // 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' }
-        ]
+        // backToP2PDelay: 5
     },
 
     analytics: {
-        // True if the analytics should be disabled
-        // disabled: false,
-
         // The Google Analytics Tracking ID:
         // googleAnalyticsTrackingId: 'your-tracking-id-UA-123456-1'
 
@@ -667,7 +496,7 @@ var config = {
         // 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,
+        // rtcstatsPolIInterval: 1000
 
         // Array of script URLs to load as lib-jitsi-meet "analytics handlers".
         // scriptURLs: [
@@ -687,41 +516,9 @@ var config = {
         // userRegion: "asia"
     },
 
-    // Array<string> of disabled sounds.
-    // Possible values:
-    // - 'E2EE_OFF_SOUND'
-    // - 'E2EE_ON_SOUND'
-    // - 'INCOMING_MSG_SOUND'
-    // - 'KNOCKING_PARTICIPANT_SOUND'
-    // - 'LIVE_STREAMING_OFF_SOUND'
-    // - 'LIVE_STREAMING_ON_SOUND'
-    // - 'NO_AUDIO_SIGNAL_SOUND'
-    // - 'NOISY_AUDIO_INPUT_SOUND'
-    // - 'OUTGOING_CALL_EXPIRED_SOUND'
-    // - 'OUTGOING_CALL_REJECTED_SOUND'
-    // - 'OUTGOING_CALL_RINGING_SOUND'
-    // - 'OUTGOING_CALL_START_SOUND'
-    // - 'PARTICIPANT_JOINED_SOUND'
-    // - 'PARTICIPANT_LEFT_SOUND'
-    // - 'RAISE_HAND_SOUND'
-    // - 'RECORDING_OFF_SOUND'
-    // - 'RECORDING_ON_SOUND'
-    // - 'TALK_WHILE_MUTED_SOUND'
-    // disabledSounds: [],
-
-    // DEPRECATED! Use `disabledSounds` instead.
     // Decides whether the start/stop recording audio notifications should play on record.
     // disableRecordAudioNotification: false,
 
-    // DEPRECATED! Use `disabledSounds` instead.
-    // 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,
-
-    // DEPRECATED! Use `disabledSounds` instead.
-    // 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
@@ -742,8 +539,8 @@ var config = {
     // localRecording: {
     // Enables local recording.
     // Additionally, 'localrecording' (all lowercase) needs to be added to
-    // the `toolbarButtons`-array for the Local Recording button to show up
-    // on the toolbar.
+    // TOOLBAR_BUTTONS in interface_config.js for the Local Recording
+    // button to show up on the toolbar.
     //
     //     enabled: true,
     //
@@ -781,10 +578,6 @@ 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)
@@ -806,25 +599,17 @@ var config = {
     // Options related to the remote participant menu.
     // remoteVideoMenu: {
     //     // If set to true the 'Kick out' button will be disabled.
-    //     disableKick: true,
-    //     // If set to true the 'Grant moderator' button will be disabled.
-    //     disableGrantModerator: true
+    //     disableKick: 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.
-     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
@@ -832,58 +617,16 @@ var config = {
          // The anchor url used when clicking the logo image
          logoClickUrl: 'https://example-company.org',
          // The url used for the image used as logo
-         logoImageUrl: 'https://example.com/logo-img.png',
-         // Overwrite for pool of background images for avatars
-         avatarBackgrounds: ['url(https://example.com/avatar-background-1.png)', '#FFF'],
-         // The lobby/prejoin screen background
-         premeetingBackground: 'url(https://example.com/premeeting-background.png)'
+         logoImageUrl: 'https://example.com/logo-img.png'
      }
     */
-    // dynamicBrandingUrl: '',
-
-    // Sets the background transparency level. '0' is fully transparent, '1' is opaque.
-    // backgroundAlpha: 1,
+    // brandingDataUrl: '',
 
     // 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
@@ -896,8 +639,8 @@ var config = {
      dialOutCodesUrl
      disableRemoteControl
      displayJids
+     etherpad_base
      externalConnectUrl
-     e2eeLabels
      firefox_fake_device
      googleApiApplicationClientID
      iAmRecorder
@@ -930,92 +673,14 @@ var config = {
      disableAP
      disableHPF
      disableNS
+     enableLipSync
      enableTalkWhileMuted
      forceJVB121Ratio
-     forceTurnRelay
      hiddenDomain
      ignoreStartMuted
-     websocketKeepAlive
-     websocketKeepAliveUrl
+     startBitrate
      */
 
-    /**
-     * 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.connectedOneMember', // show when a participant joined
-    //     'notify.connectedTwoMembers', // show when two participants joined simultaneously
-    //     'notify.connectedThreePlusMembers', // show when more than 2 participants joined simultaneously
-    //     '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.moderationStartedTitle', // shown when AV moderation is activated
-    //     'notify.moderationStoppedTitle', // shown when AV moderation is deactivated
-    //     'notify.moderationInEffectTitle', // shown when user attempts to unmute audio during AV moderation
-    //     'notify.moderationInEffectVideoTitle', // shown when user attempts to enable video during AV moderation
-    //     'notify.moderationInEffectCSTitle', // shown when user attempts to share content during AV moderation
-    //     '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
-    //     'notify.unmute', // shown to moderator when user raises hand during AV moderation
-    //     '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

@@ -3,23 +3,18 @@
 import { jitsiLocalStorage } from '@jitsi/js-utils';
 import Logger from 'jitsi-meet-logger';
 
-import { redirectToTokenAuthService } from './modules/UI/authentication/AuthHandler';
-import { LoginDialog } from './react/features/authentication/components';
-import { isTokenAuthEnabled } from './react/features/authentication/functions';
+import AuthHandler from './modules/UI/authentication/AuthHandler';
 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 { getCustomerDetails } from './react/features/jaas/actions.any';
-import { isVpaasMeeting, getJaasJWT } from './react/features/jaas/functions';
 import { setPrejoinDisplayNameRequired } from './react/features/prejoin/actions';
+
 const logger = Logger.getLogger(__filename);
 
 /**
@@ -85,20 +80,9 @@ function checkForAttachParametersAndConnect(id, password, connection) {
  * @returns {Promise<JitsiConnection>} connection if
  * everything is ok, else error.
  */
-export async function connect(id, password, roomName) {
+function connect(id, password, roomName) {
     const connectionConfig = Object.assign({}, config);
-    const state = APP.store.getState();
-    let { jwt } = state['features/base/jwt'];
-    const { iAmRecorder, iAmSipGateway } = state['features/base/config'];
-
-    if (!iAmRecorder && !iAmSipGateway && isVpaasMeeting(state)) {
-        await APP.store.dispatch(getCustomerDetails());
-
-        if (!jwt) {
-            jwt = await getJaasJWT(state);
-            APP.store.dispatch(setJWT(jwt));
-        }
-    }
+    const { jwt } = APP.store.getState()['features/base/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.
@@ -110,10 +94,6 @@ export async 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;
 
-    if (connectionConfig.websocketKeepAliveUrl) {
-        connectionConfig.websocketKeepAliveUrl += `?room=${roomName}`;
-    }
-
     const connection = new JitsiMeetJS.JitsiConnection(null, jwt, connectionConfig);
 
     if (config.iAmRecorder) {
@@ -230,38 +210,10 @@ export function openConnection({ id, password, retry, roomName }) {
             const { jwt } = APP.store.getState()['features/base/jwt'];
 
             if (err === JitsiConnectionErrors.PASSWORD_REQUIRED && !jwt) {
-                return requestAuth(roomName);
+                return AuthHandler.requestAuth(roomName, connect);
             }
         }
 
         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,160 +1,50 @@
-/**
- * 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.
  */
-.atlaskit-portal > #notifications-container {
+.jIMojv{
     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 {
     /**
-     * Override @atlaskit/dropdown-menu styling when in a modal because the
-     * dropdown backgrounds clash with the modal backgrounds.
+     * Update the @atlaskit/dropdown-menu trigger wrapper to make sure it looks
+     * click-able.
      */
-    .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 {
+    .cjJUnw {
         cursor: pointer;
     }
 
-    .jitsi-icon svg {
-        fill: #B8C7E0;
+    /**
+     * 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;
     }
 }
 
-/**
- * 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__toptoolbar > div > div {
+.videocontainer .tOoji {
     background: none;
 }
 
-
 /**
- * Keep overflow menu within screen vertical bounds and make it scrollable.
+ * Override @atlaskit/InlineDialog styling for the overflowmenu so it displays
+ * with the correct height.
  */
- .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;
+.toolbox-button-wth-dialog .eYJELv {
+    max-height: initial;
 }

css/_audio-preview.scss

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

css/_aui_reset.scss

@@ -219,9 +219,8 @@ abbr {
 }
 
 a {
-  color: #44A5FF;
+  color: #3572b0;
   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, 1);
+    color: rgba(255, 255, 255, 0.6);
     font-weight: 100;
     object-fit: cover;
 
@@ -25,6 +25,10 @@
     width: 100%;
 }
 
+.defaultAvatar {
+    opacity: 0.6
+}
+
 .avatar-badge {
     position: relative;
 

css/_base.scss

@@ -17,7 +17,6 @@ textarea {
 html {
     height: 100%;
     width: 100%;
-    overflow: hidden;
 }
 
 body {
@@ -45,20 +44,22 @@ body {
  * 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) {
+@media (min-width: 480px + $sidebarWidth) {
+    .shift-right [class^="Modal__FillScreen"] {
         padding-left: $sidebarWidth;
     }
 }
 
-.jitsi-icon {
-    &-default svg {
-        fill: white;
-    }
+/**
+ * Similarly, we offset the notifications when the chat is open by
+ * padding the container.
+*/
+.shift-right [class^="styledFlagGroup-"] {
+    padding-left: $sidebarWidth;
 }
 
-.disabled .jitsi-icon svg {
-    fill: #929292;
+.jitsi-icon svg {
+    fill: white;
 }
 
 .jitsi-icon.gray svg {
@@ -200,3 +201,74 @@ form {
     background: rgba(0, 0, 0, .5);
     border-radius: 4px;
 }
+
+.desktop-browser {
+    @media only screen and (max-width: $smallScreen) {
+        .watermark {
+            width: 20%;
+            height: 20%;
+        }
+
+        .new-toolbox {
+            .toolbox-content {
+                .button-group-center, .button-group-left, .button-group-right {
+                    .toolbox-button {
+                        .toolbox-icon {
+                            width: 28px;
+                            height: 28px;
+                            svg {
+                                width: 18px;
+                                height: 18px;
+                            }
+                        }
+
+                        &:nth-child(2) {
+                            .toolbox-icon {
+                                width: 30px;
+                                height: 30px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    @media only screen and (max-width: $verySmallScreen) {
+        #videoResolutionLabel {
+            display: none;
+        }
+        .vertical-filmstrip .filmstrip {
+            display: none;
+        }
+        .new-toolbox {
+            .toolbox-content {
+                .button-group-center, .button-group-left, .button-group-right {
+                    .settings-button-small-icon {
+                        display: none;
+                    }
+                    .toolbox-button {
+                        .toolbox-icon {
+                            width: 18px;
+                            height: 18px;
+                            svg {
+                                width: 12px;
+                                height: 12px;
+                            }
+                        }
+
+                        &:nth-child(2) {
+                            .toolbox-icon {
+                                width: 20px;
+                                height: 20px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .chrome-extension-banner {
+            display: none;
+        }
+    }
+}

css/_chat.scss

@@ -1,5 +1,5 @@
 #sideToolbarContainer {
-    background-color: $chatBackgroundColor;
+    background-color: $newToolbarBackgroundColor;
     box-sizing: border-box;
     color: #FFF;
     display: flex;
@@ -32,13 +32,6 @@
     width: $sidebarWidth;
     word-wrap: break-word;
 
-    display: flex;
-    flex-direction: column;
-
-    & > :first-child {
-        margin-top: auto;
-    }
-
     a {
         display: block;
     }
@@ -99,111 +92,49 @@
     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;
 
-    .jitsi-icon {
+    .chat-close {
+        align-items: center;
+        bottom: 8px;
+        color: white;
         cursor: pointer;
-    }
-}
+        display: flex;
+        font-size: 18px;
+        height: 40px;
+        justify-content: center;
+        line-height: 15px;
+        padding: 4px;
+        position: absolute;
+        right: 5px;
+        width: 40px;
 
-.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;
-                }
-            }
+        &:hover {
+            color: rgba(255, 255, 255, 0.8);
         }
     }
 }
 
 #chat-input {
-    border: 1px solid $chatInputSeparatorColor;
+    border-top: 1px solid $chatInputSeparatorColor;
     display: flex;
-    padding: 4px;
-    border-radius: 3px;
-
-    &:focus-within {
-        border: 1px solid #619CF4;
-    }
+    padding: 5px 10px;
 
     * {
         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;
 }
@@ -217,7 +148,7 @@
     border-radius:0;
     box-shadow: none;
     color: white;
-    font-size: 14px;
+    font-size: 15px;
     padding: 10px;
     overflow-y: auto;
     resize: none;
@@ -229,74 +160,14 @@
     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: 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;
-    }
+    font-size: 18px;
+    margin-top: 30px;
+    left: 5px;
+    right: 5px;
 }
 
 .sideToolbarContainer {
@@ -306,30 +177,13 @@
     }
 
     .display-name {
-        font-size: 12px;
-        font-weight: 600;
+        font-size: 13px;
+        font-weight: bold;
         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 {
@@ -348,7 +202,6 @@
 
     .usermessage {
         white-space: pre-wrap;
-        font-size: 14px;
     }
 
     &.error {
@@ -371,14 +224,14 @@
     }
 
     .messagecontent {
-        margin: 8px;
+        margin: 5px 10px;
         max-width: 100%;
         overflow: hidden;
     }
 }
 
-.timestamp {
-    color: #757575;
+.smiley {
+    font-size: 14pt;
 }
 
 #smileys {
@@ -409,12 +262,10 @@
     box-sizing: border-box;
     background-color: rgba(0, 0, 0, .6) !important;
     height: auto;
-    display: none;
+    max-height: 0;
     overflow: hidden;
     position: absolute;
-    width: calc(#{$sidebarWidth} - 32px);
-    margin-bottom: 5px;
-    margin-left: -5px;
+    width: $sidebarWidth;
 
     /**
      * CSS transitions do not apply for auto dimensions. So to produce the css
@@ -425,13 +276,13 @@
     transition: max-height 0.3s;
 
     &.show-smileys {
-        display: flex;
         max-height: 500%;
     }
 
     #smileysContainer {
-        background-color: $chatBackgroundColor;
-        border-top: 1px solid $chatInputSeparatorColor;
+        background-color: $newToolbarBackgroundColor;
+        border-bottom: 1px solid;
+        border-top: 1px solid;
     }
 }
 
@@ -441,7 +292,7 @@
 
 .smileyContainer {
     width: 40px;
-    height: 40px;
+    height: 36px;
     display: inline-block;
     text-align: center;
 }
@@ -528,87 +379,3 @@
         }
     }
 }
-
-.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;
-}
-
-.chat-tabs-container {
-    width: 100%;
-    border-bottom: thin solid #292929;
-    display: flex;
-    justify-content: space-around;
-}
-
-.chat-tab {
-    font-size: 1.2em;
-    padding-bottom: 0.5em;
-    width: 50%;
-    text-align: center;
-    color: #8B8B8B;
-    cursor: pointer;
-}
-
-.chat-tab-focus {
-    border-bottom-style: solid;
-    color: #FFF;
-}
-
-.chat-tab-title {
-    margin-right: 8px;
-}
-
-.chat-tab-badge {
-    background-color: #165ecc;
-    border-radius: 50%;
-    box-sizing: border-box;
-    font-weight: 700;
-    overflow: hidden;
-    text-align: center;
-    text-overflow: ellipsis;
-    vertical-align: middle;
-    padding: 0 4px;
-    color: #FFF;
-}

css/_connection-info.scss

@@ -45,10 +45,6 @@
         @extend .connection-info__icon;
     }
 
-    &__mobile {
-      margin: 15px;
-    }
-
     .connection-actions {
         margin: 10px auto;
         text-align: center;

css/_connection-status.scss

@@ -1,24 +1,30 @@
 .con-status {
-    border-radius: 6px;
-    color: #fff;
-    font-size: 12px;
-    letter-spacing: 0.16px;
-    line-height: 16px;
     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;
+    }
 
     &-header {
-        background-color: rgba(0, 0, 0, 0.7);
+        background: rgba(28, 32, 37, .5);
         align-items: center;
         display: flex;
-        padding: 8px 12px;
+        justify-content: space-between;
     }
 
     &-circle {
         border-radius: 50%;
         display: inline-block;
         padding: 4px;
-        margin-right: 16px;
+        margin: 8px;
     }
 
     &--good {
@@ -34,7 +40,14 @@
     }
 
     &-arrow {
-        margin-left: auto;
+        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 {
@@ -55,7 +68,7 @@
     }
 
     &-details {
-        background-color: rgba(0, 0, 0, 0.7);
+        background: rgba(28, 32, 37, .5);
         border-top: 1px solid #5E6D7A;
         padding: 16px;
         transition: opacity 0.16s ease-out;

css/_country-picker.scss

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

css/_drawer.scss

@@ -1,97 +0,0 @@
-.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: scroll;
-    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

@@ -5,6 +5,11 @@
     .description {
         font-size: 13px;
         margin: 15px 0;
+
+        .read-more {
+            cursor: pointer;
+            opacity: .7;
+        }
     }
 
     .control-row {

css/_jquery-impromptu.scss

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

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

css/_lobby.scss

@@ -1,21 +1,18 @@
-.lobby-screen {
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 26px;
+#lobby-screen {
+    .content {
 
-    &-content {
-        align-items: center;
-        display: flex;
-        flex-direction: column;
+        .container {
+            align-items: center;
+            display: flex;
+            flex-direction: column;
 
-        .spinner {
-            margin: 8px;
-        }
-
-        .joining-message {
-            color: white;
-            margin: 24px auto;
-            text-align: center;
+            .spinner {
+                margin: 30px;
+            }
+    
+            .joining-message {
+                margin: 10px;
+            }
         }
     }
 }
@@ -41,22 +38,18 @@
     }
 }
 
-#notification-participant-list {
+#knocking-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: 30px;
-    z-index: $toolbarZ + 1;
-
-    &:empty {
-        border: none;
-    }
+    top: 20;
+    transition: top 1s ease;
+    z-index: 100;
 
     &.toolbox-visible {
         // Same as toolbox subject position
@@ -69,9 +62,34 @@
         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;
+            }
+        }
+    }
+
     button {
         align-self: stretch;
-        margin-bottom: 8px 0;
+        margin: 8px 0;
         padding: 12px;
         transition: .2s transform ease;
 
@@ -98,48 +116,3 @@
         }
     }
 }
-
-.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

@@ -125,8 +125,7 @@
             cursor: pointer;
         }
 
-        &.with-click-handler:hover,
-        &.with-click-handler:focus {
+        &.with-click-handler:hover {
             background-color: #c7ddff;
         }
 
@@ -159,7 +158,7 @@
         }
     }
 
-    .item:hover, .item:focus, .item:focus-within {
+    .item:hover {
         .delete-meeting {
             display: block;
         }

css/_mini_toolbox.scss

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

css/_participants-count.scss

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

css/_participants-pane.scss

@@ -1,58 +0,0 @@
-.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%;
-    }
-}
-
-.jitsi-icon {
-    &-dominant-speaker {
-        background-color: #1EC26A;
-        border-radius: 3px;
-    }
-}

css/_polls.scss

@@ -1,448 +0,0 @@
-.poll-dialog {
-    font-size: 1rem;
-
-    h1, span, li, strong {
-        color: #bce;
-    }
-    ol {
-        margin: 0;
-    }
-}
-
-.poll-question-field {
-    padding: 8px 16px;
-    padding-bottom: 24px;
-    border-bottom: 1px solid #525252;
-}
-
-.poll-header {
-    padding: 8px 16px;
-}
-
-.poll-answer-container{
-    padding: 8px;
-    background: #3D3D3D;
-    border-radius: 3px;
-    margin-bottom: 8px;
-}
-
-.poll-answer-field-list, .poll-answer-list, .poll-result-list {
-    list-style-type: none;
-    padding: 0 16px;
-    margin: 0;
-}
-
-ol.poll-result-list {
-    margin-bottom: 1.5em;
-}
-
-.poll-result-list > li {
-    margin-bottom: 8px;
-}
-
-.poll-answer-field {
-    flex-direction: column;
-    align-items: stretch;
-    margin-bottom: 16;
-
-}
-
-.poll-answer-field:last-child {
-    margin-bottom: 0;
-}
-
-.poll-create-option-row {
-    display: 'flex';
-    margin-bottom: 4;
-}
-
-// Needeed to override atlaskit default blue color
-.poll-create-container .jsYMHu {
-    background: #292929;
-    border-color: #808090;
-    color: white // #808090
-}
-
-.poll-add-button {
-    display: flex;
-    justify-content: center;
-    padding: 8px 16px;
-}
-
-.poll-remove-option-button {
-    background: 0 0;
-    border: none;
-    color: #8B8B8B;
-    padding-left: 0;
-}
-
-.poll-create-add-option {
-    border: none;
-    background-color: #292929;
-    padding: 3px;
-    width: 100%;
-}
-
-.poll-icon-button, .poll-drag-handle {
-    .jitsi-icon svg {
-        fill: #bce;
-    }
-}
-
-.poll-drag-handle {
-    background-color: transparent;
-    border: none;
-    cursor: grab;
-    padding-left: 8;
-    display: flex;
-}
-
-.poll-dragged {
-    opacity: 0.5;
-    * {
-        cursor: grabbing !important;
-    }
-}
-
-.poll-question {
-    font-size: 1.2em;
-    font-weight: 600;
-    margin-bottom: 0.5em;
-}
-
-.poll-answer-voters {
-    font-size: 1em;
-    font-weight: lighter;
-    list-style-type: none;
-    border: #616161 solid 1px;
-    border-radius: 3px;
-    padding: 2px 6px;
-    margin: 4px 0px 12px;
-    background-color: #616161;
-}
-
-.poll-answer-header {
-    display: flex;
-    justify-content: space-between;
-}
-
-.poll-answer-vote-name {
-    flex-shrink: 1;
-    overflow-wrap: anywhere
-}
-
-.poll-answer-vote-count-container{
-    display: flex;
-}
-
-.poll-answer-vote-count {
-    margin-left: 10px;
-    white-space: nowrap;
-    flex: 1;
-    text-align: right;
-}
-
-.poll-answer-short-results{
-    display: flex;
-    min-width: 10em;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.poll-bar-container, .poll-bar {
-    border-radius: 3px;
-    height: 6px;
-}
-
-.poll-bar-container {
-    background-color: #616161;
-    max-width: 160px;
-    margin-top: 3px;
-    flex: 1;
-}
-
-.poll-bar {
-    background-color: #246FE5;
-}
-
-.poll-message-footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 12px;
-    margin-top: 5px;
-}
-
-.poll-notice {
-    font-weight: 100;
-    margin-right: 10px;
-}
-
-.poll-show-details {
-    background-color: transparent;
-    border: none;
-
-    &:hover {
-        text-decoration: underline;
-    }
-}
-
-.poll-result-links {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-a.poll-detail-link, a.poll-change-vote-link {
-    color: #246FE5;
-    cursor: pointer;
-    text-decoration: none;
-}
-
-.polls-pane-content {
-    display: flex;
-    flex-direction: column;
-    font-weight: 600;
-    height: 85%;
-    align-items: stretch;
-}
-
-.pane-content{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-}
-
-.empty-pane-icon {
-    width: 50%;
-    padding: 24px;
-}
-
-.empty-pane-icon svg {
-    fill: #3D3D3D;
-    width: 100%;
-    height: auto;
-}
-
-.empty-pane-message {
-    text-align: center;
-}
-
-.poll-results {
-    color: white;
-}
-
-.poll-answer {
-    h1, strong ,span {
-        color: white;
-    }
-}
-
-.poll-results, .poll-answer {
-    margin-bottom: 16px;
-    background: #292929;
-    border-radius: 8px;
-    padding: 12px 8px;
-    border-width: thin;
-    border-style: solid;
-    border-color: #616161;
-}
-
-.poll-create-label {
-    color: white;
-    margin-bottom: 4;
-    display: flex;
-}
-
-.expandable-input{
-    resize: none;
-    width: 100%;
-    height: 40px;
-    box-sizing: border-box;
-    overflow: hidden;
-    border: 1px solid #666666;
-    background-color: #141414;
-    color: #FFF;
-    border-radius: 6px;
-    padding: 10px 16px;
-}
-
-.poll-container {
-    box-sizing: border-box;
-    flex: 1;
-    overflow-y: auto;
-    position: relative;
-    padding: 16px;
-
-    & > * + *:not(.ignore-child) {
-        margin-top: 16px;
-    }
-
-    &::-webkit-scrollbar {
-        display: none;
-    }
-}
-
-.poll-create-header {
-    font-size: 20px;
-    margin: 20px 16px;
-    font-weight: 600;
-}
-
-.poll-create-container {
-    padding: 8px 0;
-}
-
-.poll-footer {
-    display: flex;
-    justify-content: flex-end;
-    padding: 8px 16px;
-    height: 40px;
-    align-items: stretch;
-
-    & > *:not(:last-child) {
-        margin-right: 16px;
-    }
-}
-
-.poll-primary-button {
-    align-items: center;
-    background-color: #0056E0;
-    border: 0;
-    border-radius: 6px;
-    display: flex;
-    font-weight: unset;
-    justify-content: center;
-    font-size: 15px;
-    flex: 1;
-
-    &:hover {
-        background-color: #246FE5;
-    }
-
-    &:active {
-        background-color: #0045B3;
-    }
-
-    &:focus {
-        background-color: #0045B3;
-        border: 3px solid #99BBF3;
-    }
-
-    &:disabled {
-        background-color: #00225A;
-        color: #858585;
-    }
-
-    & > *:not(:last-child) {
-        margin-right: 8px;
-    }
-}
-
-.poll-secondary-button {
-    align-items: center;
-    background-color: #3D3D3D;
-    border: 0;
-    border-radius: 6px;
-    display: flex;
-    font-weight: unset;
-    justify-content: center;
-    font-size: 15px;
-    height: 40px;
-    width: 100%;
-
-    &:hover {
-        background-color: #525252;
-    }
-
-    &:active {
-        background-color: #292929;
-    }
-
-    &:focus {
-        background-color: #292929;
-        border: 3px solid #858585;
-    }
-
-    &:disabled {
-        background-color: #141414;
-        color: #858585;
-    }
-
-    & > *:not(:last-child) {
-        margin-right: 8px;
-    }
-}
-
-.poll-small-primary-button {
-    align-items: center;
-    background-color: #0056E0;
-    border: 0;
-    border-radius: 6px;
-    display: flex;
-    font-weight: unset;
-    justify-content: center;
-    font-size: 15px;
-    height: 40px;
-    width: 50%;
-
-    &:hover {
-        background-color: #246FE5;
-    }
-
-    &:active {
-        background-color: #0045B3;
-    }
-
-    &:focus {
-        background-color: #0045B3;
-        border: 3px solid #99BBF3;
-    }
-
-    &:disabled {
-        background-color: #00225A;
-        color: #858585;
-    }
-
-    & > *:not(:last-child) {
-        margin-right: 8px;
-    }
-}
-
-.poll-small-secondary-button {
-    align-items: center;
-    background-color: #3D3D3D;
-    border: 0;
-    border-radius: 6px;
-    display: flex;
-    font-weight: unset;
-    justify-content: center;
-    font-size: 15px;
-    height: 40px;
-    width: 50%;
-
-    &:hover {
-        background-color: #525252;
-    }
-
-    &:active {
-        background-color: #292929;
-    }
-
-    &:focus {
-        background-color: #292929;
-        border: 3px solid #858585;
-    }
-
-    &:disabled {
-        background-color: #141414;
-        color: #858585;
-    }
-
-    & > *:not(:last-child) {
-        margin-right: 8px;
-    }
-}

css/_popover.scss

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

css/_popup_menu.scss

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

css/_prejoin.scss

@@ -0,0 +1,138 @@
+.prejoin {
+
+    &-input-area {
+        margin: 0 auto;
+        text-align: center;
+    }
+
+    &-title {
+        color: #fff;
+        font-size: 24px;
+        line-height: 32px;
+        margin-bottom: 16px;
+    }
+
+    &-text-btns {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    &-input-label {
+        color: #A4B8D1;
+        font-size: 13px;
+        line-height: 20px;
+        margin-top: 32px 0 8px 0;
+        text-align: center;
+        width: 100%;
+    }
+
+    &-checkbox {
+        border: 0;
+        height: 16px;
+        margin-right: 8px;
+        padding: 0;
+        width: 16px;
+    }
+
+    &-checkbox-container {
+        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 {
+    color: #fff;
+    font-weight: 300;
+    opacity: 0.6;
+}
+
+.prejoin-preview {
+    &-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)
+        }
+        &--ok {
+            background: rgba(49, 183, 106, 0.7);
+        }
+    }
+
+    &-icon {
+        background-position: center;
+        background-repeat: no-repeat;
+        display: inline-block;
+        height: 16px;
+        margin-right: 8px;
+        width: 16px;
+    }
+
+    &-error-desc {
+        margin-right: 4px;
+    }
+
+    .settings-button-container {
+        width: 49px;
+        margin: 0 8px;
+    }
+
+    &-dropdown-btns {
+        width: 320px;
+        padding: 8px 0;
+    }
+
+    &-dropdown-btn {
+        align-items: center;
+        color: #1C2025;
+        cursor: pointer;
+        display: flex;
+        height: 40px;
+        font-size: 15px;
+        line-height: 24px;
+        padding: 0 16px;
+
+        &:hover {
+            background-color: #DAEBFA;
+        }
+    }
+
+    &-dropdown-icon {
+        display: inline-block;
+        margin-right: 16px;
+
+        & > svg {
+            fill:  #1C2025;
+        }
+    }
+
+    &-dropdown-container {
+        & > div > div:nth-child(2) > div > div {
+            background: #fff;
+            padding: 0;
+        }
+    }
+
+}

css/_premeeting-screens.scss

@@ -0,0 +1,288 @@
+/**
+ * Shared style for full screen local track based dialogs/modals.
+ */
+ .premeeting-screen,
+  .preview-overlay {
+     position: absolute;
+     left: 0;
+     right: 0;
+     top: 0;
+     bottom: 0;
+  }
+
+ .premeeting-screen {
+    align-items: stretch;
+    background: radial-gradient(50% 50% at 50% 50%, #2A3A4B 20.83%, #1E2A36 100%);
+    display: flex;
+    flex-direction: column;
+    font-size: 1.3em;
+    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;
+        color: #fff;
+        cursor: pointer;
+        display: inline-block;
+        font-size: 15px;
+        line-height: 24px;
+        margin-top: 16px;
+        padding: 7px 16px;
+        position: relative;
+        text-align: center;
+        width: 286px;
+
+        &.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;
+            }
+        }
+    }
+
+    .preview-overlay {
+        background-image: linear-gradient(transparent, black);
+        z-index: $toolbarZ + 1;
+    }
+
+    .content {
+        align-items: center;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        justify-content: flex-end;
+        padding-bottom: 24px;
+        z-index: $toolbarZ + 2;
+
+        .title {
+            color: #fff;
+            font-size: 24px;
+            line-height: 32px;
+            margin-bottom: 16px;
+        }
+
+        .copy-meeting {
+            align-items: center;
+            cursor: pointer;
+            color: #fff;
+            display: flex;
+            flex-direction: row;
+            font-size: 15px;
+            font-weight: 300;
+            justify-content: center;
+            line-height: 24px;
+            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;
+                }
+
+                &.done {
+                    background: #31B76A;
+                }
+
+                .jitsi-icon {
+                    margin-left: 10px;
+                }
+            }
+
+            .copy-meeting-text {
+                width: 266px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            &:hover {
+                align-self: stretch;
+            }
+
+            textarea {
+                border-width: 0;
+                height: 0;
+                opacity: 0;
+                padding: 0;
+                width: 0;
+            }
+        }
+
+        input.field {
+            background-color: white;
+            border: none;
+            outline: none;
+            border-radius: 3px;
+            font-size: 15px;
+            line-height: 24px;
+            color: #1C2025;
+            padding: 8px 0;
+            text-align: center;
+            width: 320px;
+
+            &.error {
+                box-shadow: 0px 0px 4px 3px rgba(225, 45, 45, 0.4);
+            }
+
+            &.focused {
+                box-shadow: 0px 0px 4px 3px #0376DA;
+            }
+        }
+    }
+
+    .media-btn-container {
+        display: flex;
+        justify-content: center;
+        margin: 24px 0 16px 0;
+        width: 100%;
+
+        &> div {
+            margin: 0 12px;
+        }
+
+        .settings-button-small-icon {
+            right: -8px;
+
+            &--hovered {
+                right: -10px;
+            }
+        }
+    }
+}
+
+#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;
+    }
+
+    .avatar {
+        background: #A4B8D1;
+        margin: 0 auto;
+    }
+
+    video {
+        height: 100%;
+        object-fit: cover;
+        position: absolute;
+        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 flex-centered();
+
+    svg {
+        fill: transparent;
+    }
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.1);
+
+        @include icon-container(#A4B8D1, #1C2025);
+    }
+
+    &-container {
+        position: relative;
+
+        @include flex-centered();
+    }
+
+    &-icon-container {
+        border-radius: 50%;
+        left: -22px;
+        padding: 2px;
+        position: absolute;
+    }
+
+    &--toggled {
+        @include icon-container(white, #1C2025);
+    }
+}

css/_reactions-menu.scss

@@ -1,196 +0,0 @@
-@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;
-			transition: font-size ease .1s;
-
-			@for $i from 1 through 12 {
-				&.increase-#{$i}{
-					font-size: calc(20px + #{$i}px);
-				}
-			}
-		}
-	}
-
-	.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,7 +105,6 @@
 
     .helper-link {
         cursor: pointer;
-        font-weight: bold;
         display: inline-block;
         flex-shrink: 0;
         margin-left: auto;

css/_responsive.scss

@@ -65,21 +65,3 @@
         }
     }
 }
-
-.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,62 +1,84 @@
-.settings-button-container {
-    position: relative;
+.settings-button {
+    &-container {
+        position: relative;
 
-    .toolbox-icon {
-        align-items: center;
-        border-radius: 3px;
-        cursor: pointer;
-        display: flex;
-        justify-content: center;
-
-        &.disabled, .disabled & {
-            cursor: initial;
-            color: #929292;
-            background-color: #36383c;
+        .toolbox-icon {
+            align-items: center;
+            cursor: pointer;
+            display: flex;
+            background-color: #fff;
+            border-radius: 50%;
+            border: 1px solid #d1dbe8;
+            justify-content: center;
+            width: 38px;
+            height: 38px;
 
             &:hover {
-                background-color: #36383c;
+                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;
             }
         }
     }
 }
-
-.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,83 +1,32 @@
 .subject {
-    box-sizing: border-box;
-    color: #fff;
-    margin-top: 20px;
-    position: absolute;
     top: -120px;
     transition: top .3s ease-in;
+    height: 95px;
     width: 100%;
-    z-index: $zindex3;
-
-    &.visible {
-        top: 0;
-    }
-
-    &.recording {
-        top: 0;
-
-        .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;
+    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));
 
-.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;
+    &.visible {
+        top: 0px;
+    }
+
+    &-text {
+        vertical-align: middle;
+    }
+
+    &-conference-timer {
+        display: block;
+        font-size: 15px;
+        opacity: 0.6;
+    }
 }

css/_toolbars.scss

@@ -33,262 +33,248 @@
 
     &.visible {
         bottom: 0;
+        .toolbox-background {
+            bottom: 0px;
+        }
     }
 
     &.no-buttons {
         display: none;
     }
 
-    @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%;
+    &.shift-right {
+        margin-left: $sidebarWidth;
+        width: calc(100% - #{$sidebarWidth});
     }
 
-    .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;
+    .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;
         pointer-events: none;
         position: absolute;
-        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;
-        }
+        z-index: $toolbarBackgroundZ;
     }
 
-    div {
+    .toolbox-content {
+        box-sizing: border-box;
         display: flex;
-        flex-direction: row;
-        align-items: center;
-    }
+        justify-content: space-between;
+        margin-left: auto;
+        margin-right: auto;
+        padding: 20px 16px;
+        position: relative;
+        width: 100%;
+        z-index: $toolbarZ;
 
-    &.unclickable {
-        cursor: default;
-    }
-    &.disabled {
-        cursor: initial;
-        color: #929292;
-
-        &:hover {
-            background: none;
+        .button-group-center,
+        .button-group-left,
+        .button-group-right {
+            display: flex;
+            width: 33%;
         }
 
-        svg {
-            fill: #929292;
+        .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;
+                        }
+                    }
+                }
+            }
         }
 
-    }
+        .button-group-right {
+            justify-content: flex-end;
+        }
 
-    @media (hover: hover) and (pointer: fine) {
-        &.unclickable:hover {
-            background: inherit;
+        .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;
+                }
+            }
         }
     }
 }
 
-.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
  */
@@ -303,47 +289,3 @@
 
     @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: 8px 0;
-            width: 100%;
-        }
-
-        .invite-more-container {
-            margin: 0 16px 8px;
-        }
-
-        .invite-more-container.elevated {
-            margin-bottom: 52px;
-        }
-    }
-}

css/_transcription-subtitles.scss

@@ -1,11 +1,10 @@
-.transcription-subtitles {
-    bottom: $newToolbarSize + 40px;
+.transcription-subtitles{
+    bottom: 10%;
     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),
@@ -13,12 +12,7 @@
     1px 0px 1px rgba(0,0,0,0.3),
     0px 0px 1px rgba(0,0,0,0.3);
     transform: translateX(-50%);
-    z-index: $subtitlesZ;
-
-    &.lifted {
-        // Lift subtitle above toolbar+dominant speaker box.
-        bottom: $newToolbarSize + 36px + 40px;
-    }
+    z-index: $filmstripVideosZ + 1;
 
     span {
         background: black;

css/_variables.scss

@@ -4,8 +4,7 @@
  * Style variables
  */
 $baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$hangupColor:#DD3849;
-$hangupHoverColor: #F25363;
+$hangupColor: #bf2117;
 $hangupFontSize: 2em;
 
 /**
@@ -30,7 +29,6 @@ $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);
@@ -39,19 +37,20 @@ $presence-idle: rgb(172, 172, 172);
 /**
  * Toolbar
  */
-$newToolbarBackgroundColor: #131519;
-$newToolbarButtonHoverColor: rgba(255, 255, 255, 0.2);
-$newToolbarButtonToggleColor: rgba(255, 255, 255, 0.15);
-$menuBG:#242528;
+$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);
 $newToolbarFontSize: 24px;
 $newToolbarHangupFontSize: 32px;
-$newToolbarSize: 48px;
-$newToolbarSizeMobile: 60px;
+$newToolbarSize: 40px;
 $newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px);
 $toolbarTitleFontSize: 19px;
-$overflowMenuItemColor: #fff;
-$overflowMenuItemBackground: #36383C;
-
+$overflowMenuBG: initial;
+$overflowMenuItemHoverBG: #313D52;
+$overflowMenuItemHoverColor: #B8C7E0;
+$overflowMenuItemColor: #B8C7E0;
 
 /**
  * Video layout
@@ -91,12 +90,12 @@ $modalTextColor: #333;
  * Chat
  */
 $chatActionsSeparatorColor: rgb(173, 105, 112);
-$chatBackgroundColor: #131519;
+$chatHeaderBackgroundColor: rgba(42, 58, 75, 0.9);
 $chatInputSeparatorColor: #A4B8D1;
-$chatLocalMessageBackgroundColor: #484A4F;
+$chatLocalMessageBackgroundColor: rgb(4, 98, 178);
 $chatPrivateMessageBackgroundColor: rgb(153, 69, 77);
-$chatRemoteMessageBackgroundColor:  #242528;
-$sidebarWidth: 315px;
+$chatRemoteMessageBackgroundColor:  rgb(86, 101, 114);
+$sidebarWidth: 375px;
 
  /**
  * Misc.
@@ -115,24 +114,19 @@ $zindex1: 1;
 $zindex2: 2;
 $zindex3: 3;
 $toolbarBackgroundZ: 4;
-$labelsZ: 5;
-$subtitlesZ: 7;
-$popoverZ: 8;
+$filmstripVideosZ: 5;
 $zindex10: 10;
 $reloadZ: 20;
 $poweredByZ: 100;
 $ringingZ: 300;
-$sideToolbarContainerZ: 200;
-$toolbarZ: 250;
-$drawerZ: 351;
+$sideToolbarContainerZ: 300;
+$toolbarZ: 350;
 $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;
 
 
 /**
@@ -264,9 +258,3 @@ $chromeExtensionBannerRightInMeeeting: 10px;
 */
 $smallScreen: 700px;
 $verySmallScreen: 500px;
-
-/**
-* Prejoin / premeeting screen
-*/
-
-$prejoinDefaultContentWidth: 336px;

css/_video-preview.scss

@@ -1,21 +1,18 @@
 .video-preview {
     background: none;
-    display: inline-block;
-    max-height: 344px;
+    max-height: 290px;
 
     &-container {
-        background: $menuBG;
-        border-radius: 3px;
         overflow: auto;
-        padding: 8px;
+        padding: 16px;
     }
 
     &-entry {
         cursor: pointer;
-        height: 168px;
-        margin-bottom: 8px;
+        height: 135px;
+        margin-bottom: 16px;
         position: relative;
-        width: 284px;
+        width: 240px;
 
         &:last-child {
             margin-bottom: 0;
@@ -23,15 +20,13 @@
 
         &--selected {
             border: 3px solid #31B76A;
-            border-radius: 3px;
             cursor: default;
-            height: 162px;
-            width: 278px;
+            height: 129px;
+            width: 234px;
         }
     }
 
     &-video {
-        border-radius: 3px;
         height: 100%;
         object-fit: cover;
         width: 100%;
@@ -55,32 +50,21 @@
     }
 
     &-label {
-        bottom: 8px;
         color: #fff;
+        font-size: 13px;
+        line-height: 20px;
+        overflow: hidden;
+        padding: 8px;
         position: absolute;
-        width: 100%;
+        text-align: center;
+        text-overflow: ellipsis;
+        width: 220px;
         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:nth-child(2) {
+    & > div > div:nth-child(2) > div > div {
+        outline: none;
         padding: 0;
     }
 }

css/_videolayout_default.scss

@@ -1,13 +1,5 @@
 #videoconference_page {
     min-height: 100%;
-    position: relative;
-    transform: translate3d(0, 0, 0);
-    width: 100%;
-}
-
-#layout_wrapper {
-    display: flex;
-    height: 100%;
 }
 
 #videospace {
@@ -190,12 +182,10 @@
         z-index: $zindex2;
     }
 
-    @media (min-width: 581px) {
-        &.shift-right {
-            &#largeVideoContainer {
-                margin-left: $sidebarWidth;
-                width: calc(100% - #{$sidebarWidth});
-            }
+    &.shift-right {
+        &#largeVideoContainer {
+            margin-left: $sidebarWidth;
+            width: calc(100% - #{$sidebarWidth});
         }
     }
 }
@@ -240,15 +230,6 @@
     object-fit: cover;
 }
 
-#sharedVideo video {
-    width: 100%;
-    height: 100%;
-}
-
-#sharedVideo.disable-pointer {
-    pointer-events: none;
-}
-
 #sharedVideo,
 #etherpad,
 #localVideoWrapper video,
@@ -417,9 +398,7 @@
     }
 }
 
-.local-video-menu-trigger,
 .remote-video-menu-trigger,
-.localvideomenu,
 .remotevideomenu
 {
     display: inline-block;
@@ -428,7 +407,7 @@
     right: 0;
     z-index: $zindex2;
     width: 18px;
-    height: 18px;
+    height: 13px;
     color: #FFF;
     font-size: 10pt;
     margin-right: $remoteVideoMenuIconMargin;
@@ -437,7 +416,6 @@
         cursor: hand;
     }
 }
-.local-video-menu-trigger,
 .remote-video-menu-trigger {
     margin-top: 7px;
 }
@@ -500,6 +478,14 @@
     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

@@ -90,7 +90,7 @@ body.welcome-page {
                     color: $defaultWarningColor;
                     display: flex;
                     flex-direction: row;
-                    margin-top: 15px;
+                    margin-top: 5px;
 
                     .jitsi-icon {
                         margin-right: 15px;
@@ -122,11 +122,11 @@ body.welcome-page {
         #moderated-meetings {
             max-width: calc(100% - 40px);
             padding: 16px 0 39px 0;
+            margin: $welcomePageEnterRoomMargin;
             width: $welcomePageEnterRoomWidth;
 
             p {
                 color: $welcomePageDescriptionColor;
-                float: left;
                 text-align: $welcomePageHeaderTextAlign;
 
                 a {
@@ -208,11 +208,6 @@ body.welcome-page {
             cursor: pointer;
             font-size: 32px;
         }
-
-        .toolbox-icon {
-            height: 24px;
-            width: 24px;
-        }
     }
 
     .welcome-watermark {
@@ -233,10 +228,6 @@ body.welcome-page {
         }
     }
 
-    &.without-footer {
-        justify-content: start;
-    }
-
     .welcome-cards-container {
         color:#131519;
         padding-top: 40px;

css/buttons/copy.scss

@@ -3,7 +3,7 @@
     justify-content: space-between;
     align-items: center;
     padding: 8px 8px 8px 16px;
-    margin-top: 5px;
+    margin-top: 8px;
     width: calc(100% - 24px);
     height: 24px;
 

css/components/_input-slider.scss

@@ -1,5 +1,3 @@
-$rangeInputThumbSize: 14;
-
 /**
  * Disable the default webkit styles for range inputs (sliders).
  */
@@ -9,10 +7,10 @@ input[type=range]{
 }
 
 /**
- * Show focus for keyboard accessibility.
+ * Disable the default focus styles for webkit range inputs (sliders).
  */
 input[type=range]:focus {
-    outline: 1px solid white !important;
+    outline: none;
 }
 
 /**

css/filmstrip/_filmstrip_toolbar.scss

@@ -16,6 +16,7 @@
         padding: 0;
         margin: 0;
         border: none;
+        outline: none;
 
         -webkit-appearance: none;
 

css/filmstrip/_horizontal_filmstrip.scss

@@ -6,6 +6,7 @@
 }
 
 .horizontal-filmstrip .filmstrip {
+    position: absolute;
     bottom: 0;
     right: 0;
     padding: 10px 5px;
@@ -33,18 +34,18 @@
     }
 
     &__videos {
+        @extend %align-right;
         position:relative;
         padding: 0;
         /* The filmstrip should not be covered by the left toolbar. */
         bottom: 0;
         width:auto;
+        overflow: visible !important;
 
         &#remoteVideos {
             border: $thumbnailsBorder solid transparent;
             transition: bottom 2s;
             flex-grow: 1;
-            display: flex;
-            flex-direction: row-reverse;
             @include minHWAutoFix()
         }
 
@@ -60,25 +61,41 @@
         &.hidden {
             bottom: calc(-196px - #{$newToolbarSizeWithPadding});
         }
+
+        .remote-videos-container {
+            display: flex;
+        }
     }
 
-    .remote-videos {
-        & > div {
-            transition: opacity 1s;
-            position: absolute;
-        }
-
-        &.is-not-overflowing > div {
-            right: 2px;
-        }
+    .remote-videos-container {
+        transition: opacity 1s;
     }
 
     &.hide-videos {
-        .remote-videos  {
-            & > div {
-                opacity: 0;
-                pointer-events: none;
-            }
+        .remote-videos-container {
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+
+    #filmstripRemoteVideos {
+        @include minHWAutoFix();
+
+        display: flex;
+        flex: 1;
+        width: auto;
+        justify-content: flex-end;
+        flex-direction: row;
+
+        #filmstripRemoteVideosContainer {
+            flex-direction: row-reverse;
+            /**
+             * Add padding as a hack for Firefox not to show scrollbars when
+             * unnecessary.
+             */
+            padding: 1px 0;
+            overflow-y: hidden;
+            overflow-x: scroll;
         }
     }
 
@@ -87,3 +104,25 @@
     }
 }
 
+
+/**
+ * Workarounds for Edge and Firefox not handling scrolling properly with
+ * flex-direction: row-reverse.
+ */
+ @mixin undoRowReverseVideos() {
+    .horizontal-filmstrip {
+        #remoteVideos #filmstripRemoteVideos #filmstripRemoteVideosContainer {
+            flex-direction: row;
+        }
+    }
+}
+
+/** Firefox detection hack **/
+@-moz-document url-prefix() {
+    @include undoRowReverseVideos();
+}
+
+/** Edge detection hack **/
+@supports (-ms-ime-align:auto) {
+    @include undoRowReverseVideos();
+}

css/filmstrip/_small_video.scss

@@ -19,7 +19,7 @@
         0 0 3px $videoThumbnailSelected;
     }
 
-    .remotevideomenu > .icon-menu, .localvideomenu > .icon-menu {
+    .remotevideomenu > .icon-menu {
         display: none;
     }
 
@@ -32,7 +32,7 @@
         box-shadow: inset 0 0 3px $videoThumbnailHovered,
         0 0 3px $videoThumbnailHovered;
 
-        .remotevideomenu > .icon-menu, .localvideomenu > .icon-menu {
+        .remotevideomenu > .icon-menu {
             display: inline-block;
         }
     }

css/filmstrip/_tile_view.scss

@@ -7,14 +7,17 @@
      * see.
      */
     .active-speaker {
-        box-shadow: 0px 0px 1px 1.5px black, 0px 0px 1.3px 4px $videoThumbnailSelected;
+        box-shadow: 0 0 5px 3px $videoThumbnailSelected
     }
 
-    .remote-videos {
+    #filmstripRemoteVideos {
         align-items: center;
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
+        height: calc(100vh - 200px);
+        width: 100vw;
+        margin: 100px 0px;
     }
 
     .filmstrip__videos .videocontainer {
@@ -32,10 +35,6 @@
          */
         height: 100% !important;
         width: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        transition: margin-bottom .3s ease-in;
     }
 
     .filmstrip {
@@ -44,30 +43,17 @@
         height: 100%;
         justify-content: center;
         left: 0;
-        position: absolute;
+        position: fixed;
         top: 0;
         width: 100%;
+        z-index: $filmstripVideosZ;
 
-        @media (min-width: 581px) {
-            &.shift-right {
-                margin-left: $sidebarWidth;
-                width: calc(100% - #{$sidebarWidth});
+        &.shift-right {
+            margin-left: $sidebarWidth;
+            width: calc(100% - #{$sidebarWidth});
 
-                .remote-videos {
-                    width: calc(100vw - #{$sidebarWidth});
-                }
-            }
-        }
-
-        &.collapse {
-            #remoteVideos {
-                height: calc(100% - #{$newToolbarSizeMobile}) !important;
-                margin-bottom: $newToolbarSizeMobile;
-            }
-
-            .remote-videos {
-                // !important is needed here as overflow is set via element.style in a FixedSizeGrid.
-                overflow: hidden auto !important;
+            #filmstripRemoteVideos {
+                width: calc(100vw - #{$sidebarWidth});
             }
         }
     }
@@ -80,60 +66,58 @@
         display: block;
     }
 
-    .remote-videos {
+    #filmstripRemoteVideos {
         box-sizing: border-box;
 
-
         /**
-        * The size of the thumbnails should be set with javascript, based on
-        * desired column count and window width. The rows are created using flex
-        * and allowing the thumbnails to wrap.
-        */
-        & > div {
-            align-content: center;
-            align-items: center;
-            box-sizing: border-box;
-            display: flex;
-            margin-top: auto;
-            margin-bottom: auto;
-            justify-content: center;
-            position: absolute;
-
-            .videocontainer {
-                border: 0;
-                box-sizing: border-box;
-                display: block;
-                margin: 2px;
-            }
-
-            video {
-                object-fit: contain;
-            }
-
-            /**
-            * Max-width corresponding to the ASPECT_RATIO_BREAKPOINT from features/filmstrip/constants.
-            */
-            @media only screen and (max-width: 500px) {
-                video {
-                    object-fit: cover;
-                }
-            }
-        }
+         * Allow vertical scrolling of the thumbnails.
+         */
+        overflow-x: hidden;
+        overflow-y: auto;
     }
-}
 
-.shift-right .remote-videos > div {
     /**
-     * Max-width corresponding to the ASPECT_RATIO_BREAKPOINT from features/filmstrip/constants,
-     * from which we subtract the chat size.
+     * The size of the thumbnails should be set with javascript, based on
+     * desired column count and window width. The rows are created using flex
+     * and allowing the thumbnails to wrap.
      */
-    @media only screen and (max-width: calc(500px + #{$sidebarWidth})) {
+    #filmstripRemoteVideosContainer {
+        align-content: center;
+        align-items: center;
+        box-sizing: border-box;
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: auto;
+        margin-bottom: auto;
+        justify-content: center;
+
+        .videocontainer {
+            border: 0;
+            box-sizing: border-box;
+            display: block;
+            margin: 5px;
+        }
+
         video {
-            object-fit: cover;
+            object-fit: contain;
         }
     }
-}
 
-.indicator-icon-container {
-    display: inline-block;
+    .has-overflow#filmstripRemoteVideosContainer {
+        align-content: baseline;
+    }
+
+    .has-overflow .videocontainer {
+        align-self: baseline;
+    }
+
+    /**
+     * Firefox flex acts a little differently. To make sure the bottom row of
+     * thumbnails is not overlapped by the horizontal toolbar, margin is added
+     * to the local thumbnail to keep it from the bottom of the screen. It is
+     * assumed the local thumbnail will always be on the bottom row.
+     */
+    .has-overflow #localVideoContainer {
+        margin-bottom: 100px !important;
+    }
 }

css/filmstrip/_tile_view_overrides.scss

@@ -22,6 +22,11 @@
         display: none;
     }
 
+    #remoteConnectionMessage,
+    .watermark {
+        z-index: $filmstripVideosZ + 1;
+    }
+
     /**
      * The follow styling uses !important to override inline styles set with
      * javascript.
@@ -43,7 +48,6 @@
      * specifically the various status icons.
      */
     .remotevideomenu,
-    .localvideomenu,
     .videocontainer__toptoolbar {
         z-index: auto;
     }

css/filmstrip/_vertical_filmstrip.scss

@@ -1,10 +1,8 @@
 .vertical-filmstrip .filmstrip {
     &.hide-videos {
-        .remote-videos {
-            & > div {
-                opacity: 0;
-                pointer-events: none;
-            }
+        .remote-videos-container {
+            opacity: 0;
+            pointer-events: none;
         }
     }
 
@@ -28,7 +26,7 @@
     flex-direction: column-reverse;
     height: 100%;
     width: 100%;
-    padding: ($desktopAppDragBarHeight - 5px) 5px calc(env(safe-area-inset-bottom, 0) + 10px);
+    padding: ($desktopAppDragBarHeight - 5px) 5px 10px;
     /**
      * fixed positioning is necessary for remote menus and tooltips to pop
      * out of the scrolling filmstrip. AtlasKit dialogs and tooltips use
@@ -41,6 +39,10 @@
     right: 0;
     z-index: $filmstripVideosZ;
 
+    &.reduce-height {
+        height: calc(100% - #{$newToolbarSizeWithPadding});
+    }
+
     /**
      * Hide videos by making them slight to the right.
      */
@@ -96,10 +98,33 @@
      * filmstrip from overlapping the left edge of the screen.
      */
     #filmstripLocalVideo,
-    .remote-videos {
+    #filmstripRemoteVideos {
         padding: 0;
     }
 
+    #filmstripRemoteVideos {
+        @include minHWAutoFix();
+
+        display: flex;
+        flex: 1;
+        flex-direction: column-reverse;
+        height: auto;
+        overflow-x: hidden;
+        overflow-y: scroll;
+
+        #filmstripRemoteVideosContainer {
+            @include minHWAutoFix();
+            flex-direction: column-reverse;
+            overflow: visible;
+            width: calc(100% - 8px); // 8px for margin + border of the thumbnails
+
+            .videocontainer {
+                height: 0px;
+                width: 100%;
+            }
+        }
+    }
+
     #remoteVideos {
         @include minHWAutoFix();
 
@@ -107,21 +132,56 @@
         flex-grow: 1;
     }
 
-    &.reduce-height {
-        height: calc(100% - calc(#{$newToolbarSizeWithPadding} + #{$scrollHeight}));
+    .remote-videos-container {
+        display: flex;
+        transition: opacity 1s;
     }
 
-    .remote-videos {
-        display: flex;
-        transition: height .3s ease-in;
-
-        & > div {
-            position: absolute;
-            transition: opacity 1s;
-        }
-
-        &.is-not-overflowing > div {
-            bottom: 0px;
+    .hide-scrollbar#filmstripRemoteVideos {
+        margin-right: 7px; // Scrollbar size
+        &::-webkit-scrollbar {
+            display: none;
         }
     }
 }
+
+/**
+ * Workarounds for Edge and Firefox not handling scrolling properly with
+ * flex-direction: column-reverse. The remove videos in filmstrip should
+ * start scrolling from the bottom of the filmstrip, but in those browsers the
+ * scrolling won't happen. Per W3C spec, scrolling should happen from the
+ * bottom. As such, use css hacks to get around the css issue, with the intent
+ * being to remove the hacks as the spec is supported.
+ */
+@mixin undoColumnReverseVideos() {
+    .vertical-filmstrip {
+        #remoteVideos #filmstripRemoteVideos #filmstripRemoteVideosContainer {
+            flex-direction: column;
+        }
+    }
+}
+
+/**
+ * FF does not include the scroll width when calculating the size of the content. That's why we need to include
+ * ourselves the width of the scroll so that the remote videos are aligned with the local one.
+ */
+@mixin filmstripSizeWithoutScroll {
+    .vertical-filmstrip {
+        #remoteVideos #filmstripRemoteVideos {
+            #filmstripRemoteVideosContainer {
+                width: calc(100% - 15px) // 8 px - margins + border of the thumbnails; 7px - for the scroll
+            }
+        }
+    }
+}
+
+/** Firefox detection hack **/
+@-moz-document url-prefix() {
+    @include undoColumnReverseVideos();
+    @include filmstripSizeWithoutScroll();
+}
+
+/** Edge detection hack **/
+@supports (-ms-ime-align:auto) {
+    @include undoColumnReverseVideos();
+}

css/filmstrip/_vertical_filmstrip_overrides.scss

@@ -51,7 +51,6 @@
      * and tooltips from getting a new location context due to translate3d.
      */
     .connection-indicator,
-    .local-video-menu-trigger,
     .remote-video-menu-trigger,
     .indicator-icon-container {
         transform: translate3d(0, 0, 0);
@@ -69,9 +68,7 @@
      * Move the remote video menu trigger to the bottom left of the video
      * thumbnail.
      */
-    .localvideomenu,
     .remotevideomenu,
-    .local-video-menu-trigger,
     .remote-video-menu-trigger {
         bottom: 0;
         left: 0;
@@ -79,9 +76,8 @@
         right: auto;
     }
 
-    .local-video-menu-trigger,
     .remote-video-menu-trigger {
-        margin-bottom: 3px;
+        margin-bottom: 7px;
         margin-left: $remoteVideoMenuIconMargin;
     }
 }

css/main.scss

@@ -41,15 +41,13 @@ $flagsImagePath: "../images/";
 @import 'modals/feedback/feedback';
 @import 'modals/invite/info';
 @import 'modals/settings/settings';
-@import 'modals/screen-share/share-audio';
-@import 'modals/screen-share/share-screen-warning';
 @import 'modals/speaker_stats/speaker_stats';
 @import 'modals/video-quality/video-quality';
-@import 'modals/virtual-background/virtual-background';
 @import 'modals/local-recording/local-recording';
 @import 'videolayout_default';
 @import 'notice';
 @import 'subject';
+@import 'participants-count';
 @import 'popup_menu';
 @import 'recording';
 @import 'login_menu';
@@ -59,6 +57,7 @@ $flagsImagePath: "../images/";
 @import 'welcome_page_content';
 @import 'welcome_page_settings_toolbar';
 @import 'toolbars';
+@import 'jquery.contextMenu';
 @import 'keyboard-shortcuts';
 @import 'redirect_page';
 @import 'components/form-control';
@@ -79,6 +78,7 @@ $flagsImagePath: "../images/";
 @import 'filmstrip/vertical_filmstrip';
 @import 'filmstrip/vertical_filmstrip_overrides';
 @import 'labels';
+@import 'lobby';
 @import 'unsupported-browser/main';
 @import 'modals/invite/add-people';
 @import 'deep-linking/main';
@@ -94,16 +94,14 @@ $flagsImagePath: "../images/";
 @import 'meter';
 @import 'audio-preview';
 @import 'video-preview';
-@import 'premeeting/main';
+@import 'prejoin';
+@import 'prejoin-dialog';
 @import 'country-picker';
 @import 'modals/invite/invite_more';
 @import 'modals/security/security';
+@import 'premeeting-screens';
 @import 'e2ee';
 @import 'responsive';
-@import 'drawer';
-@import 'participants-pane';
-@import 'reactions-menu';
-@import 'plan-limit';
-@import 'polls';
+@import 'connection-status';
 
 /* Modules END */

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

@@ -39,7 +39,7 @@
 
         .device-selector-trigger-text {
             overflow: hidden;
-            text-align: center;
+            margin-left: 8px;
             text-overflow: ellipsis;
             white-space: nowrap;
             width: 100%;
@@ -103,7 +103,7 @@
         font-size: 14px;
 
         a {
-            color: #6FB1EA;
+            color: #2684FF;
             cursor: pointer;
             text-decoration: none;
         }
@@ -119,7 +119,7 @@
         height: 8px;
 
         .audio-input-preview-level {
-            background: #75B1FF;
+            background: #4C9AFF;
             border-radius: 5px;
             height: 100%;
             -webkit-transition: width .1s ease-in-out;
@@ -129,20 +129,3 @@
         }
     }
 }
-
-.device-selection.video-hidden {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-
-    .column-selectors {
-        width: 100%;
-        margin-left: 0;
-    }
-
-    .column-video {
-        order: 1;
-        width: 100%;
-        margin-top: 8px;
-    }
-}

css/modals/embed-meeting/_embed-meeting.scss

@@ -2,6 +2,22 @@
     &-dialog {
         display: flex;
         flex-direction: column;
+
+        &-header {
+            display: flex;
+            justify-content: space-between;
+            margin: 16px 16px 24px;
+            width: calc(100% - 32px);
+            color: #fff;
+            font-weight: 600;
+            font-size: 24px;
+            line-height: 32px;
+
+            & > div > svg {
+                cursor: pointer;
+                fill: #A4B8D1;
+            }
+        }
     }
 
     &-copy {

css/modals/feedback/_feedback.scss

@@ -94,9 +94,5 @@
             };
 
         }
-        .star-btn:focus,
-        .star-btn:active {
-            outline: 1px solid #B8C7E0;
-        }
     }
 }

css/modals/invite/_info.scss

@@ -30,38 +30,26 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        margin-right: 5px;
     }
 
     .info-password-none,
     .info-password-remote {
-        color: #fff;
+        opacity: 0.5;
     }
 
     .info-password-input {
         width: 100%;
-        background-color: #0E1624;
-        border-radius: 3px;
-        border: 2px solid #202B3D;
+        background-color: transparent;
+        border: none;
         color: inherit;
         padding-left: 0;
     }
-    .info-password-input:focus ,
-    .info-password-input:active {
-       border: 2px solid #B8C7E0;
-    }
 
     .info-password-local {
         user-select: text;
     }
 }
 
-.dial-in-number {
-    display: flex;
-    justify-content: space-between;
-    padding-right: 8px;
-}
-
 .dial-in-numbers-list {
     margin-top: 20px;
     font-size: 12px;

css/modals/invite/_invite_more.scss

@@ -1,55 +1,45 @@
 .invite-more {
     &-container {
-        margin-bottom: 8px;
-        transition: margin-bottom 0.3s;
+        color: #fff;
+        font-weight: 600;
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        z-index: $zindex2;
+        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
 
         &.elevated {
-            margin-bottom: 36px;
+            z-index: $filmstripVideosZ + 1;
         }
     }
 
-    &-content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: 16px;
-        background: rgba(0, 0, 0, 0.7);
-        border-radius: 8px;
-        color: #fff;
-        font-size: 14px;
-        line-height: 24px;
-        font-weight: 600;
-    }
-
     &-header {
-        max-width: 100%;
-        margin-bottom: 16px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
+        font-size: 19px;
+        line-height: 28px;
+        margin: 24px 0 16px 0;
     }
 
     &-button {
         display: flex;
-        max-width: 100%;
-        height: 40px;
-        box-sizing: border-box;
+        margin: auto;
         padding: 8px 16px;
+        width: fit-content;
+        width: -moz-fit-content;
+        height: 24px;
         background: #0376DA;
         border-radius: 3px;
+        font-size: 14px;
+        line-height: 24px;
         cursor: pointer;
 
-        @media (hover: hover) and (pointer: fine) {
-            &:hover {
-                background: #278ADF;
-            }
+        &:hover {
+            background: #278ADF;
         }
 
         &-text {
             margin-left: 8px;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
+            font-size: 15px;
+            line-height: 24px;
         }
     }
     &-dialog {
@@ -57,6 +47,22 @@
         font-size: 15px;
         line-height: 24px;
 
+        &.header {
+            display: flex;
+            justify-content: space-between;
+            margin: 16px 16px 24px;
+            width: calc(100% - 32px);
+            color: #fff;
+            font-weight: 600;
+            font-size: 24px;
+            line-height: 32px;
+
+            & > div > svg {
+                cursor: pointer;
+                fill: #A4B8D1;
+            }
+        }
+
         &.separator {
             margin: 24px 0 24px -20px;
             padding: 0 20px;
@@ -97,20 +103,20 @@
                 border-top: none;
                 border-radius: 0 0 3px 3px;
 
-                .copy-invite-icon, .provider-icon {
-                    align-items: center;
-                    cursor: pointer;
+                & > * {
                     display: flex;
+                    justify-content: center;
+                    align-items: center;
                     height: 40px;
-                    place-content: center;
                     width: 40px;
+                    border-radius: 4px;
+                    cursor: pointer;
                 }
-
+    
                 &:hover > div:hover {
                     background-color: rgba(255, 255, 255, 0.2);
-                    border-radius: 4px;
                 }
-
+    
                 & > :not(:last-child) {
                     margin-right: 16px;
                 }
@@ -129,8 +135,8 @@
             .dial-in-copy {
                 display: inline-block;
                 vertical-align: middle;
+                margin-left: 21px;
                 cursor: pointer;
-                height: 24px;
             }
         }
 
@@ -142,7 +148,7 @@
             & > a {
                 display: inline-block;
                 height: 24px;
-                min-width: 48px;
+                width: 48px;
                 border-radius: 3px;
                 text-align: center;
                 text-decoration: none;
@@ -208,14 +214,3 @@
         }
     }
 }
-
-.mobile-browser {
-    .invite-more-content {
-        font-size: 16px;
-    }
-
-    .invite-more-button {
-        height: 48px;
-        padding: 12px 16px;
-    }
-}

css/modals/screen-share/_share-audio.scss

@@ -1,22 +0,0 @@
-.share-audio-dialog {
-    .share-audio-animation {
-        width: 100%;
-        height: 90%;
-        object-fit: contain;
-    }
-    input[type="checkbox"] + svg + span {
-        color: #9FB0CC;
-    }
-
-    .separator-line {
-        margin: 24px 0 24px -20px;
-        padding: 0 20px;
-        width: 100%;
-        height: 1px;
-        background: #5E6D7A;
-
-        &:last-child {
-            display: none;
-        }
-    }
-}

css/modals/screen-share/_share-screen-warning.scss

@@ -1,23 +0,0 @@
-.share-screen-warn-dialog {
-    font-size: 14px;
-
-    .separator-line {
-        margin: 24px 0 24px -20px;
-        padding: 0 20px;
-        width: 100%;
-        height: 1px;
-        background: #5E6D7A;
-
-        &:last-child {
-            display: none;
-        }
-    }
-
-    .header {
-        font-weight: 600;
-    }
-
-    .description {
-        margin-top: 16px;
-    }
-}

css/modals/settings/_settings.scss

@@ -16,32 +16,15 @@
     }
 
     .mock-atlaskit-label {
-        color: #b8c7e0;
+        color: #56637A;
         font-size: 12px;
         font-weight: 600;
         line-height: 1.33;
         padding: 20px 0px 4px 0px;
     }
-    input[type="checkbox"]:checked + svg {
-        --checkbox-background-color: #6492e7;
-        --checkbox-border-color: #6492e7;
-    }
-    input[type="checkbox"] + svg + span {
-        color: #b8c7e0;
-    }
-
-    input[type="checkbox"] + svg + span {
-        color: #9FB0CC;
-    }
 
     .calendar-tab,
     .more-tab,
-    .box {
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-    }
-
     .profile-edit {
         display: flex;
         width: 100%;
@@ -51,24 +34,17 @@
         flex: 1;
     }
     .settings-sub-pane {
-        flex: 1;
+        flex-grow: 1;
     }
 
-    .settings-sub-pane .right {
-        flex: 1;
-    }
-    .settings-sub-pane .left {
-        flex: 1;
-    }
-
-    .settings-sub-pane-element {
-        text-align: left;
-        flex: 1;
-    }
     .profile-edit-field {
         margin-right: 20px;
     }
 
+    .language-settings {
+        max-width: 50%;
+    }
+
     .calendar-tab {
         align-items: center;
         flex-direction: column;
@@ -84,14 +60,4 @@
     .sign-out-cta {
         margin-bottom: 20px;
     }
-
-    @media only screen and (max-width: $smallScreen) {
-        .device-selection {
-            display: flex;
-            flex-direction: column;
-        }
-        .more-tab {
-            flex-direction: column;
-        }
-    }
 }

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

@@ -86,7 +86,6 @@
 
         .video-quality-dialog-label-container.active {
             color: $videoQualityActive;
-            font-weight: bold;
 
             &::before {
                 background: $videoQualityActive;
@@ -112,3 +111,7 @@
         display: none;
     }
 }
+
+#videoResolutionLabel {
+    z-index: $zindex3 + 1;
+}

css/modals/virtual-background/_virtual-background.scss

@@ -1,203 +0,0 @@
-.virtual-background-dialog {
-    margin-left: -10px;
-    position: relative;
-    max-height: 300px;
-    color: white;
-    display: inline-grid;
-    grid-template-columns: auto auto auto auto auto;
-    column-gap: 9px;
-    cursor: pointer;
-    .desktop-share:hover,
-    .thumbnail:hover,
-    .blur:hover,
-    .slight-blur:hover,
-    .virtual-background-none:hover {
-        opacity: 0.5;
-        border: 2px solid #99bbf3;
-        @media (max-width: 632px) {
-            height: 60px;
-            width: 60px;
-        }
-    }
-    .background-option {
-        margin-top: 8px;
-        border-radius: 6px;
-        height: 60px;
-        width: 107px;
-        text-align: center;
-        justify-content: center;
-        font-weight: bold;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-    }
-    .thumbnail {
-        object-fit: cover;
-    }
-
-    .thumbnail:hover ~ .delete-image-icon {
-        display: block;
-    }
-    .thumbnail-selected {
-        object-fit: cover;
-        border: 2px solid #246fe5;
-    }
-    .blur {
-        box-shadow: inset 0 0 12px #000000;
-        background: #7e8287;
-        padding: 0 10px;
-    }
-    .blur-selected {
-        box-shadow: inset 0 0 12px #000000;
-        background: #7e8287;
-        border: 2px solid #246fe5;
-        padding: 0 10px;
-    }
-    .slight-blur {
-        box-shadow: inset 0 0 12px #000000;
-        background: #a4a4a4;
-        padding: 0 10px;
-    }
-    .slight-blur-selected {
-        box-shadow: inset 0 0 12px #000000;
-        background: #a4a4a4;
-        border: 2px solid #246fe5;
-        padding: 0 10px;
-    }
-    .virtual-background-none {
-        background: #525252;
-        padding: 0 10px;
-    }
-    .none-selected {
-        background: #525252;
-        border: 2px solid #246fe5;
-        padding: 0 10px;
-    }
-
-    .desktop-share {
-        background: #525252;
-    }
-    .desktop-share-selected {
-        background: #525252;
-        border: 2px solid #246fe5;
-        padding: 0 10px;
-    }
-
-    @media (max-width: 632px) {
-        font-size: 1.5vw;
-        .desktop-share,
-        .virtual-background-none,
-        .thumbnail,
-        .blur,
-        .slight-blur {
-            height: 60px;
-            width: 60px;
-        }
-        .desktop-share-selected,
-        .thumbnail-selected,
-        .none-selected,
-        .blur-selected,
-        .slight-blur-selected {
-            height: 60px;
-            width: 60px;
-        }
-    }
-    @media (max-width: 360px) {
-        grid-template-columns: auto auto auto;
-    }
-}
-
-.modal-dialog-form .virtual-background-loading {
-    overflow: hidden;
-    position: fixed;
-    left: 50%;
-    margin-top: 10px;
-    transform: translateX(-50%);
-}
-.modal-dialog-form .video-preview {
-    height: 250px;
-}
-.file-upload-btn {
-    display: none;
-}
-.file-upload-label {
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 20px;
-    margin-left: -10px;
-    margin-top: 16px;
-    margin-bottom: 8px;
-    color: #669aec;
-    display: inline-flex;
-    cursor: pointer;
-}
-
-.delete-image-icon {
-    background: #3d3d3d;
-    position: absolute;
-    display: none;
-    left: 96;
-    bottom: 51;
-    @media (max-width: 632px) {
-        left: 51px;
-    }
-}
-
-.delete-image-icon:hover {
-    display: block;
-}
-
-.thumbnail-container {
-    position: relative;
-    &:focus-within {
-        .thumbnail ~ .delete-image-icon {
-            display: block;
-        }
-    }
-}
-
-.add-background {
-    margin-right: 8px;
-}
-
-.apply-background-btn {
-    margin-top: 16px;
-    float: right;
-}
-
-.video-background-preview-entry {
-    margin-left: -10px;
-    height: 250px;
-    width: 570px;
-    margin-bottom: 8px;
-    z-index: 2;
-    @media (max-width: 632px) {
-        max-width: 336;
-    }
-}
-
-.virtual-background-preview-video {
-    margin-left: -10;
-    border-radius: 6px;
-    height: 100%;
-    object-fit: cover;
-    width: 100%;
-}
-.video-preview-loader {
-    border-radius: 6px;
-    background-color: transparent;
-    height: 250px;
-    margin-bottom: 8px;
-    width: 572px;
-    position: fixed;
-    z-index: 2;
-    @media (min-width: 432px) and (max-width: 632px) {
-        width: 340px;
-    }
-}
-
-.video-preview-loader svg {
-    position: absolute;
-    top: 40%;
-    left: 45%;
-}

css/overlay/_overlay.scss

@@ -33,12 +33,4 @@
         bottom: 24px;
         width: 100%;
     }
-
-    &__spinner-container {
-        display: flex;
-        width: 100%;
-        height: 100%;
-        justify-content: center;
-        align-items: center;
-    }
 }

css/premeeting/_device-status.scss

@@ -1,35 +0,0 @@
-.device {
-    &-status {
-        align-items: center;
-        align-self: stretch;
-        color: #fff;
-        display: flex;
-        font-size: 14px;
-        font-weight: 400;
-        justify-content: center;
-        line-height: 20px;
-        margin-top: 8px;
-        padding: 6px;
-        text-align: center;
-    }
-
-    &-icon {
-        background-position: center;
-        background-repeat: no-repeat;
-        display: inline-block;
-        height: 16px;
-        margin-right: 10px;
-        width: 16px;
-
-        &--warning {
-            svg path {
-                fill: rgba(241, 173, 51, 1);
-            }
-        }
-        &--ok {
-            svg path {
-                fill: #189b55;
-            }
-        }
-    }
-}