fix(virtual-backgrounds) add segmentation model license information

Fixes: https://github.com/jitsi/jitsi-meet/issues/8792

.eslintignore

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

.github/workflows/ci.yml

@@ -12,5 +12,6 @@ jobs:
       with:
         node-version: '12.x'
     - run: npm install
+    - run: git status -s --untracked-files=no
     - run: npm run lint
     - run: make

.gitignore

@@ -69,6 +69,7 @@ buck-out/
 *.framework
 android/app/debug
 android/app/release
+ios/sdk/out
 
 # precommit-hook
 .jshintignore

ConferenceEvents.js

@@ -1,4 +0,0 @@
-/**
- * Notifies interested parties that hangup procedure will start.
- */
-export const BEFORE_HANGUP = 'conference.before_hangup';

Makefile

@@ -5,6 +5,8 @@ LIBJITSIMEET_DIR = node_modules/lib-jitsi-meet/
 LIBFLAC_DIR = node_modules/libflacjs/dist/min/
 OLM_DIR = node_modules/olm
 RNNOISE_WASM_DIR = node_modules/rnnoise-wasm/dist/
+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 = .
@@ -16,14 +18,17 @@ WEBPACK_DEV_SERVER = ./node_modules/.bin/webpack-dev-server
 
 all: compile deploy clean
 
-compile:
+compile: compile-load-test
 	$(WEBPACK) -p
 
+compile-load-test:
+	${NPM} install --prefix resources/load-test && ${NPM} run build --prefix resources/load-test
+
 clean:
 	rm -fr $(BUILD_DIR)
 
 .NOTPARALLEL:
-deploy: deploy-init deploy-appbundle deploy-rnnoise-binary deploy-lib-jitsi-meet deploy-libflac deploy-olm deploy-css deploy-local
+deploy: deploy-init deploy-appbundle deploy-rnnoise-binary deploy-tflite deploy-meet-models deploy-lib-jitsi-meet deploy-libflac deploy-olm deploy-css deploy-local
 
 deploy-init:
 	rm -fr $(DEPLOY_DIR)
@@ -39,8 +44,6 @@ deploy-appbundle:
 		$(BUILD_DIR)/external_api.min.map \
 		$(BUILD_DIR)/flacEncodeWorker.min.js \
 		$(BUILD_DIR)/flacEncodeWorker.min.map \
-		$(BUILD_DIR)/device_selection_popup_bundle.min.js \
-		$(BUILD_DIR)/device_selection_popup_bundle.min.map \
 		$(BUILD_DIR)/dial_in_info_bundle.min.js \
 		$(BUILD_DIR)/dial_in_info_bundle.min.map \
 		$(BUILD_DIR)/alwaysontop.min.js \
@@ -48,10 +51,6 @@ 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)
@@ -81,6 +80,16 @@ 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) ; \
@@ -90,7 +99,7 @@ deploy-local:
 	([ ! -x deploy-local.sh ] || ./deploy-local.sh)
 
 .NOTPARALLEL:
-dev: deploy-init deploy-css deploy-rnnoise-binary deploy-lib-jitsi-meet deploy-libflac deploy-olm
+dev: deploy-init deploy-css deploy-rnnoise-binary deploy-tflite deploy-meet-models deploy-lib-jitsi-meet deploy-libflac deploy-olm
 	$(WEBPACK_DEV_SERVER) --detect-circular-deps
 
 source-package:

README.md

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

android/app/build.gradle

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

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

android/build.gradle

@@ -10,17 +10,17 @@ buildscript {
         jcenter()
     }
     dependencies {
-        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'
+        classpath 'com.android.tools.build:gradle:4.1.2'
+        classpath 'com.google.gms:google-services:4.3.4'
+        classpath 'com.google.firebase:firebase-crashlytics-gradle:2.4.1'
     }
 }
 
 ext {
-    buildToolsVersion = "29.0.3"
-    compileSdkVersion = 29
+    buildToolsVersion = "30.0.3"
+    compileSdkVersion = 30
     minSdkVersion    = 23
-    targetSdkVersion = 29
+    targetSdkVersion = 30
     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=20.5.0
-sdkVersion=2.11.0
+appVersion=21.0.0
+sdkVersion=3.2.0

android/sdk/build.gradle

@@ -25,10 +25,6 @@ android {
     sourceSets {
         main {
             java {
-                if (rootProject.ext.libreBuild) {
-                    srcDir "src"
-                    exclude "**/AmplitudeModule.java"
-                }
                 exclude "test/"
             }
         }
@@ -40,6 +36,7 @@ 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
@@ -50,23 +47,29 @@ dependencies {
     implementation 'com.dropbox.core:dropbox-core-sdk:3.0.8'
     implementation 'com.jakewharton.timber:timber:4.7.1'
     implementation 'com.squareup.duktape:duktape-android:1.3.0'
+    implementation 'com.google.code.gson:gson:2.8.6'
 
-    if (!rootProject.ext.libreBuild) {
-        implementation 'com.amplitude:android-sdk:2.14.1'
+    if (rootProject.ext.libreBuild) {
+        implementation(project(':react-native-device-info')) {
+            exclude group: 'com.google.firebase'
+            exclude group: 'com.google.android.gms'
+            exclude group: 'com.android.installreferrer'
+        }
+    } else {
+        implementation project(':react-native-device-info')
         implementation(project(":react-native-google-signin")) {
             exclude group: 'com.google.android.gms'
             exclude group: 'androidx'
         }
     }
 
+    implementation project(':react-native-async-storage')
     implementation project(':react-native-background-timer')
     implementation project(':react-native-calendar-events')
-    implementation project(':react-native-community-async-storage')
     implementation project(':react-native-community_netinfo')
     implementation project(':react-native-default-preference')
     implementation project(':react-native-immersive')
     implementation project(':react-native-keep-awake')
-    implementation project(':react-native-linear-gradient')
     implementation project(':react-native-sound')
     implementation project(':react-native-svg')
     implementation project(':react-native-webrtc')

android/sdk/src/main/AndroidManifest.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
     package="org.jitsi.meet.sdk">
     <!-- XXX ACCESS_NETWORK_STATE is required by WebRTC. -->
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
@@ -34,7 +35,7 @@
             android:launchMode="singleTask"
             android:resizeableActivity="true"
             android:supportsPictureInPicture="true"
-            android:windowSoftInputMode="adjustResize"></activity>
+            android:windowSoftInputMode="adjustResize"/>
         <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
 
         <service
@@ -48,6 +49,13 @@
         <service
             android:name="org.jitsi.meet.sdk.JitsiMeetOngoingConferenceService"
             android:foregroundServiceType="mediaProjection" />
+
+        <provider
+            android:name="com.reactnativecommunity.webview.RNCWebViewFileProvider"
+            android:authorities="${applicationId}.fileprovider"
+            android:enabled="false"
+            tools:replace="android:authorities">
+        </provider>
     </application>
 
 </manifest>

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

@@ -1,122 +0,0 @@
-/*
- * Copyright @ 2019-present 8x8, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-package org.jitsi.meet.sdk;
-
-import android.annotation.SuppressLint;
-import android.content.Context;
-import android.content.SharedPreferences;
-import android.provider.Settings;
-import android.text.TextUtils;
-
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContextBaseJavaModule;
-import com.facebook.react.bridge.ReactMethod;
-import com.facebook.react.bridge.ReadableMap;
-
-import com.amplitude.api.Amplitude;
-import com.facebook.react.module.annotations.ReactModule;
-
-import org.jitsi.meet.sdk.log.JitsiMeetLogger;
-import org.json.JSONException;
-import org.json.JSONObject;
-
-/**
- * Implements the react-native module for the Amplitude integration.
- */
-@ReactModule(name = AmplitudeModule.NAME)
-class AmplitudeModule
-        extends ReactContextBaseJavaModule {
-
-    public static final String NAME = "Amplitude";
-    public static final String JITSI_PREFERENCES = "jitsi-preferences";
-    public static final String AMPLITUDE_DEVICE_ID_KEY = "amplitudeDeviceId";
-
-    public AmplitudeModule(ReactApplicationContext reactContext) {
-        super(reactContext);
-    }
-
-    /**
-     * Initializes the Amplitude SDK.
-     *
-     * @param instanceName The name of the Amplitude instance. Should
-     * be used only for multi-project logging.
-     * @param apiKey The API_KEY of the Amplitude project.
-     */
-    @ReactMethod
-    @SuppressLint("HardwareIds")
-    public void init(String instanceName, String apiKey) {
-        Amplitude.getInstance(instanceName).initialize(getCurrentActivity(), apiKey);
-
-        // Set the device ID to something consistent.
-        SharedPreferences sharedPreferences = getReactApplicationContext().getSharedPreferences(JITSI_PREFERENCES, Context.MODE_PRIVATE);
-        String android_id = sharedPreferences.getString(AMPLITUDE_DEVICE_ID_KEY, "");
-        if (!TextUtils.isEmpty(android_id)) {
-            Amplitude.getInstance(instanceName).setDeviceId(android_id);
-        } else {
-            String amplitudeId = Amplitude.getInstance(instanceName).getDeviceId();
-            SharedPreferences.Editor editor = sharedPreferences.edit();
-            editor.putString(JITSI_PREFERENCES, amplitudeId).apply();
-        }
-    }
-
-    /**
-     * Sets the user ID for an Amplitude instance.
-     *
-     * @param instanceName The name of the Amplitude instance.
-     * @param userId The new value for the user ID.
-     */
-    @ReactMethod
-    public void setUserId(String instanceName, String userId) {
-            Amplitude.getInstance(instanceName).setUserId(userId);
-    }
-
-    /**
-     * Sets the user properties for an Amplitude instance.
-     *
-     * @param instanceName The name of the Amplitude instance.
-     * @param userProps JSON string with user properties to be set.
-     */
-    @ReactMethod
-    public void setUserProperties(String instanceName, ReadableMap userProps) {
-        if (userProps != null) {
-            Amplitude.getInstance(instanceName).setUserProperties(
-                    new JSONObject(userProps.toHashMap()));
-        }
-    }
-
-    /**
-     * Log an analytics event.
-     *
-     * @param instanceName The name of the Amplitude instance.
-     * @param eventType The event type.
-     * @param eventPropsString JSON string with the event properties.
-     */
-    @ReactMethod
-    public void logEvent(String instanceName, String eventType, String eventPropsString) {
-        try {
-            JSONObject eventProps = new JSONObject(eventPropsString);
-            Amplitude.getInstance(instanceName).logEvent(eventType, eventProps);
-        } catch (JSONException e) {
-            JitsiMeetLogger.e(e, "Error logging event");
-        }
-    }
-
-    @Override
-    public String getName() {
-        return NAME;
-    }
-}

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

@@ -16,8 +16,11 @@
 
 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;
@@ -60,7 +63,7 @@ class AudioDeviceHandlerGeneric implements
     private AudioManager audioManager;
 
     /**
-     * {@link Runnable} for running audio device detection the main thread.
+     * {@link Runnable} for running audio device detection in the audio thread.
      * This is only used on Android >= M.
      */
     private final Runnable onAudioDeviceChangeRunner = new Runnable() {
@@ -142,7 +145,7 @@ class AudioDeviceHandlerGeneric implements
                         // Some other application potentially stole our audio focus
                         // temporarily. Restore our mode.
                         if (audioFocusLost) {
-                            module.updateAudioRoute();
+                            module.resetAudioRoute();
                         }
                         audioFocusLost = false;
                         break;
@@ -216,8 +219,24 @@ class AudioDeviceHandlerGeneric implements
         audioManager.setMode(AudioManager.MODE_IN_COMMUNICATION);
         audioManager.setMicrophoneMute(false);
 
-        if (audioManager.requestAudioFocus(this, AudioManager.STREAM_VOICE_CALL, AudioManager.AUDIOFOCUS_GAIN)
-            == AudioManager.AUDIOFOCUS_REQUEST_FAILED) {
+        int gotFocus;
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+            gotFocus = audioManager.requestAudioFocus(new AudioFocusRequest.Builder(AudioManager.AUDIOFOCUS_GAIN)
+                .setAudioAttributes(
+                    new AudioAttributes.Builder()
+                        .setUsage(AudioAttributes.USAGE_VOICE_COMMUNICATION)
+                        .setContentType(AudioAttributes.CONTENT_TYPE_SPEECH)
+                        .build()
+                )
+                .setAcceptsDelayedFocusGain(true)
+                .setOnAudioFocusChangeListener(this)
+                .build()
+            );
+        } else {
+            gotFocus = audioManager.requestAudioFocus(this, AudioManager.STREAM_VOICE_CALL, AudioManager.AUDIOFOCUS_GAIN);
+        }
+
+        if (gotFocus == AudioManager.AUDIOFOCUS_REQUEST_FAILED) {
             JitsiMeetLogger.w(TAG + " Audio focus request failed");
             return false;
         }

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,49 @@
+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() {
+        return new Intent(BroadcastAction.Type.TOGGLE_SCREEN_SHARE.getAction());
+    }
+
+    public static Intent buildOpenChatIntent(String participantId) {
+        Intent intent = new Intent(BroadcastAction.Type.OPEN_CHAT.getAction());
+        intent.putExtra("to", participantId);
+        return intent;
+    }
+
+    public static Intent buildCloseChatIntent() {
+        return new Intent(BroadcastAction.Type.CLOSE_CHAT.getAction());
+    }
+
+    public static Intent buildSendChatMessageIntent(String participantId, String message) {
+        Intent intent = new Intent(BroadcastAction.Type.SEND_CHAT_MESSAGE.getAction());
+        intent.putExtra("to", participantId);
+        intent.putExtra("message", message);
+        return intent;
+    }
+
+    public static Intent buildSetVideoMutedIntent(boolean muted) {
+        Intent intent = new Intent(BroadcastAction.Type.SET_VIDEO_MUTED.getAction());
+        intent.putExtra("muted", muted);
+        return intent;
+    }
+}

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

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

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

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

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

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

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

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

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

@@ -197,6 +197,7 @@ public class JitsiMeetView extends BaseReactView<JitsiMeetViewListener>
      * by/associated with the specified {@code name}.
      */
     @Override
+    @Deprecated
     protected void onExternalAPIEvent(String name, ReadableMap data) {
         onExternalAPIEvent(LISTENER_METHODS, name, data);
     }

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

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

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

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

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

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

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

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

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

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

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

@@ -91,14 +91,6 @@ class ReactInstanceManagerHolder {
 
         nativeModules.add(new WebRTCModule(reactContext, options));
 
-        try {
-            Class<?> amplitudeModuleClass = Class.forName("org.jitsi.meet.sdk.AmplitudeModule");
-            Constructor constructor = amplitudeModuleClass.getConstructor(ReactApplicationContext.class);
-            nativeModules.add((NativeModule)constructor.newInstance(reactContext));
-        } catch (Exception e) {
-            // Ignore any error, the module is not compiled when LIBRE_BUILD is enabled.
-        }
-
         return nativeModules;
     }
 
@@ -186,12 +178,12 @@ class ReactInstanceManagerHolder {
 
         List<ReactPackage> packages
             = new ArrayList<>(Arrays.asList(
-                new com.BV.LinearGradient.LinearGradientPackage(),
                 new com.calendarevents.CalendarEventsPackage(),
                 new com.corbt.keepawake.KCKeepAwakePackage(),
                 new com.facebook.react.shell.MainReactPackage(),
                 new com.horcrux.svg.SvgPackage(),
                 new com.kevinresol.react_native_default_preference.RNDefaultPreferencePackage(),
+                new com.learnium.RNDeviceInfo.RNDeviceInfo(),
                 new com.ocetnik.timer.BackgroundTimerPackage(),
                 new com.reactnativecommunity.asyncstorage.AsyncStoragePackage(),
                 new com.reactnativecommunity.netinfo.NetInfoPackage(),

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

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

android/settings.gradle

@@ -1,24 +1,24 @@
 rootProject.name = 'jitsi-meet'
 
 include ':app', ':sdk'
+include ':react-native-async-storage'
+project(':react-native-async-storage').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-async-storage/async-storage/android')
 include ':react-native-background-timer'
 project(':react-native-background-timer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-background-timer/android')
 include ':react-native-calendar-events'
 project(':react-native-calendar-events').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-calendar-events/android')
-include ':react-native-community-async-storage'
-project(':react-native-community-async-storage').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/async-storage/android')
 include ':react-native-community_netinfo'
 project(':react-native-community_netinfo').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/netinfo/android')
 include ':react-native-default-preference'
 project(':react-native-default-preference').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-default-preference/android')
+include ':react-native-device-info'
+project(':react-native-device-info').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-device-info/android')
 include ':react-native-google-signin'
 project(':react-native-google-signin').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/google-signin/android')
 include ':react-native-immersive'
 project(':react-native-immersive').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-immersive/android')
 include ':react-native-keep-awake'
 project(':react-native-keep-awake').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keep-awake/android')
-include ':react-native-linear-gradient'
-project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
 include ':react-native-sound'
 project(':react-native-sound').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sound/android')
 include ':react-native-splash-screen'

app.js

@@ -1,7 +1,6 @@
 /* application specific logic */
 
 import 'jquery';
-import 'jquery-contextmenu';
 import 'jQuery-Impromptu';
 
 import 'olm';
@@ -17,7 +16,6 @@ import conference from './conference';
 import API from './modules/API';
 import UI from './modules/UI/UI';
 import keyboardshortcut from './modules/keyboardshortcut/keyboardshortcut';
-import remoteControl from './modules/remotecontrol/RemoteControl';
 import translation from './modules/translation/translation';
 
 // Initialize Olm as early as possible.
@@ -49,7 +47,6 @@ window.APP = {
     },
 
     keyboardshortcut,
-    remoteControl,
     translation,
     UI
 };

conference.js

@@ -3,7 +3,6 @@
 import EventEmitter from 'events';
 import Logger from 'jitsi-meet-logger';
 
-import * as JitsiMeetConferenceEvents from './ConferenceEvents';
 import { openConnection } from './connection';
 import { ENDPOINT_TEXT_MESSAGE_NAME } from './modules/API/constants';
 import AuthHandler from './modules/UI/authentication/AuthHandler';
@@ -34,6 +33,7 @@ import {
     conferenceLeft,
     conferenceSubjectChanged,
     conferenceTimestampChanged,
+    conferenceUniqueIdSet,
     conferenceWillJoin,
     conferenceWillLeave,
     dataChannelOpened,
@@ -86,7 +86,8 @@ import {
     participantMutedUs,
     participantPresenceChanged,
     participantRoleChanged,
-    participantUpdated
+    participantUpdated,
+    updateRemoteParticipantFeatures
 } from './react/features/base/participants';
 import {
     getUserSelectedCameraDeviceId,
@@ -98,6 +99,7 @@ import {
     destroyLocalTracks,
     getLocalJitsiAudioTrack,
     getLocalJitsiVideoTrack,
+    getLocalTracks,
     isLocalCameraTrackMuted,
     isLocalTrackMuted,
     isUserInteractionRequiredForUnmute,
@@ -114,7 +116,7 @@ import {
     submitFeedback
 } from './react/features/feedback';
 import { showNotification } from './react/features/notifications';
-import { mediaPermissionPromptVisibilityChanged } from './react/features/overlay';
+import { mediaPermissionPromptVisibilityChanged, toggleSlowGUMOverlay } from './react/features/overlay';
 import { suspendDetected } from './react/features/power-monitor';
 import {
     initPrejoin,
@@ -122,14 +124,13 @@ import {
     isPrejoinPageVisible,
     makePrecallTest
 } from './react/features/prejoin';
+import { disableReceiver, stopReceiver } from './react/features/remote-control';
 import { toggleScreenshotCaptureEffect } from './react/features/screenshot-capture';
-import { setSharedVideoStatus } from './react/features/shared-video';
+import { setSharedVideoStatus } from './react/features/shared-video/actions';
 import { AudioMixerEffect } from './react/features/stream-effects/audio-mixer/AudioMixerEffect';
 import { createPresenterEffect } from './react/features/stream-effects/presenter';
 import { endpointMessageReceived } from './react/features/subtitles';
 import UIEvents from './service/UI/UIEvents';
-import * as RemoteControlEvents
-    from './service/remotecontrol/RemoteControlEvents';
 
 const logger = Logger.getLogger(__filename);
 
@@ -308,11 +309,6 @@ class ConferenceConnector {
                 room.join();
             }, 5000);
 
-            const { password }
-                = APP.store.getState()['features/base/conference'];
-
-            AuthHandler.requireAuth(room, password);
-
             break;
         }
 
@@ -377,7 +373,6 @@ class ConferenceConnector {
         if (this.reconnectTimeout !== null) {
             clearTimeout(this.reconnectTimeout);
         }
-        AuthHandler.closeAuth();
     }
 
     /**
@@ -473,34 +468,42 @@ export default {
      */
     createInitialLocalTracks(options = {}) {
         const errors = {};
-        const initialDevices = [ 'audio' ];
-        const requestedAudio = true;
+
+        // 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;
         let requestedVideo = false;
 
-        // 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
+        if (!config.disableInitialGUM
+                && !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.PERMISSION_PROMPT_IS_SHOWN,
-            browserName =>
-                APP.store.dispatch(
-                    mediaPermissionPromptVisibilityChanged(true, browserName))
+            JitsiMediaDevicesEvents.SLOW_GET_USER_MEDIA,
+            () => APP.store.dispatch(toggleSlowGUMOverlay(true))
         );
 
         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()
@@ -509,7 +512,12 @@ export default {
                         return [ desktopStream ];
                     }
 
-                    return createLocalTracksF({ devices: [ 'audio' ] }, true)
+                    return createLocalTracksF({
+                        devices: [ 'audio' ],
+                        timeout,
+                        firePermissionPromptIsShownEvent: true,
+                        fireSlowPromiseEvent: true
+                    })
                         .then(([ audioStream ]) =>
                             [ desktopStream, audioStream ])
                         .catch(error => {
@@ -523,7 +531,12 @@ export default {
                     errors.screenSharingError = error;
 
                     return requestedAudio
-                        ? createLocalTracksF({ devices: [ 'audio' ] }, true)
+                        ? createLocalTracksF({
+                            devices: [ 'audio' ],
+                            timeout,
+                            firePermissionPromptIsShownEvent: true,
+                            fireSlowPromiseEvent: true
+                        })
                         : [];
                 })
                 .catch(error => {
@@ -535,15 +548,37 @@ export default {
             // Resolve with no tracks
             tryCreateLocalTracks = Promise.resolve([]);
         } else {
-            tryCreateLocalTracks = createLocalTracksF({ devices: initialDevices }, true)
+            tryCreateLocalTracks = createLocalTracksF({
+                devices: initialDevices,
+                timeout,
+                firePermissionPromptIsShownEvent: true,
+                fireSlowPromiseEvent: 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' ] }, true));
+                            createLocalTracksF({
+                                devices: [ 'audio' ],
+                                timeout,
+                                firePermissionPromptIsShownEvent: true,
+                                fireSlowPromiseEvent: true
+                            }));
                     } else if (requestedAudio && !requestedVideo) {
                         errors.audioOnlyError = err;
 
@@ -564,7 +599,11 @@ export default {
 
                     // Try video only...
                     return requestedVideo
-                        ? createLocalTracksF({ devices: [ 'video' ] }, true)
+                        ? createLocalTracksF({
+                            devices: [ 'video' ],
+                            firePermissionPromptIsShownEvent: true,
+                            fireSlowPromiseEvent: true
+                        })
                         : [];
                 })
                 .catch(err => {
@@ -580,10 +619,11 @@ 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 rquired, for instance, that won't happen until
+        // cases, when auth is required, 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;
@@ -595,6 +635,42 @@ 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
@@ -615,38 +691,11 @@ 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 ]) => {
-                // 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));
-                    }
-                }
+
+                this._displayErrorsForCreateInitialLocalTracks(errors);
 
                 return [ tracks, con ];
             });
@@ -671,7 +720,6 @@ export default {
         APP.connection = connection = con;
 
         this._createRoom(tracks);
-        APP.remoteControl.init();
 
         // if user didn't give access to mic or camera or doesn't have
         // them at all, we mark corresponding toolbar buttons as muted,
@@ -755,15 +803,27 @@ export default {
             // they may remain as empty strings.
             this._initDeviceList(true);
 
-            return APP.store.dispatch(initPrejoin(tracks, errors));
+            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);
         }
 
-        const [ tracks, con ] = await this.createInitialLocalTracksAndConnect(
-            roomName, initialOptions);
+        const [ tracks, con ] = await this.createInitialLocalTracksAndConnect(roomName, initialOptions);
+        let localTracks = tracks;
 
         this._initDeviceList(true);
 
-        return this.startConference(con, tracks);
+        if (initialOptions.startWithAudioMuted) {
+            localTracks = localTracks.filter(track => track.getType() !== MEDIA_TYPE.AUDIO);
+        }
+
+        return this.startConference(con, localTracks);
     },
 
     /**
@@ -831,7 +891,7 @@ export default {
                 showUI && APP.store.dispatch(notifyMicError(error));
             };
 
-            createLocalTracksF({ devices: [ 'audio' ] }, false)
+            createLocalTracksF({ devices: [ 'audio' ] })
                 .then(([ audioTrack ]) => audioTrack)
                 .catch(error => {
                     maybeShowErrorDialog(error);
@@ -945,7 +1005,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' ] }, false)
+            createLocalTracksF({ devices: [ 'video' ] })
                 .then(([ videoTrack ]) => videoTrack)
                 .catch(error => {
                     // FIXME should send some feedback to the API on error ?
@@ -954,7 +1014,11 @@ export default {
                     // Rollback the video muted status by using null track
                     return null;
                 })
-                .then(videoTrack => this.useVideoStream(videoTrack));
+                .then(videoTrack => {
+                    logger.debug(`muteVideo: calling useVideoStream for track: ${videoTrack}`);
+
+                    return this.useVideoStream(videoTrack);
+                });
         } else {
             // FIXME show error dialog if it fails (should be handled by react)
             muteLocalVideo(mute);
@@ -1254,7 +1318,11 @@ export default {
                 this._getConferenceOptions());
 
         APP.store.dispatch(conferenceWillJoin(room));
-        this._setLocalAudioVideoStreams(localTracks);
+
+        // Filter out the tracks that are muted.
+        const tracks = localTracks.filter(track => !track.isMuted());
+
+        this._setLocalAudioVideoStreams(tracks);
         this._room = room; // FIXME do not use this
 
         sendLocalParticipant(APP.store, room);
@@ -1273,8 +1341,11 @@ 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);
 
@@ -1294,6 +1365,8 @@ export default {
      * @returns {Promise}
      */
     useVideoStream(newTrack) {
+        logger.debug(`useVideoStream: ${newTrack}`);
+
         return new Promise((resolve, reject) => {
             _replaceLocalVideoTrackQueue.enqueue(onFinish => {
                 const state = APP.store.getState();
@@ -1303,24 +1376,30 @@ 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(reject)
+                        .catch(error => {
+                            logger.error(`useVideoStream failed on the prejoin screen: ${error}`);
+                            reject(error);
+                        })
                         .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);
-                        if (newTrack) {
-                            APP.UI.addLocalVideoStream(newTrack);
-                        }
                         this.setVideoMuteStatus(this.isLocalVideoMuted());
                     })
                     .then(resolve)
-                    .catch(reject)
+                    .catch(error => {
+                        logger.error(`useVideoStream failed: ${error}`);
+                        reject(error);
+                    })
                     .then(onFinish);
             });
         });
@@ -1428,11 +1507,8 @@ export default {
     async _turnScreenSharingOff(didHaveVideo) {
         this._untoggleScreenSharing = null;
         this.videoSwitchInProgress = true;
-        const { receiver } = APP.remoteControl;
 
-        if (receiver) {
-            receiver.stop();
-        }
+        APP.store.dispatch(stopReceiver());
 
         this._stopProxyConnection();
         if (config.enableScreenshotCapture) {
@@ -1470,7 +1546,11 @@ export default {
 
         if (didHaveVideo) {
             promise = promise.then(() => createLocalTracksF({ devices: [ 'video' ] }))
-                .then(([ stream ]) => this.useVideoStream(stream))
+                .then(([ stream ]) => {
+                    logger.debug(`_turnScreenSharingOff using ${stream} for useVideoStream`);
+
+                    return this.useVideoStream(stream);
+                })
                 .catch(error => {
                     logger.error('failed to switch back to local video', error);
 
@@ -1481,7 +1561,11 @@ export default {
                     );
                 });
         } else {
-            promise = promise.then(() => this.useVideoStream(null));
+            promise = promise.then(() => {
+                logger.debug('_turnScreenSharingOff using null for useVideoStream');
+
+                return this.useVideoStream(null);
+            });
         }
 
         return promise.then(
@@ -1492,6 +1576,8 @@ export default {
             },
             error => {
                 this.videoSwitchInProgress = false;
+                logger.error(`_turnScreenSharingOff failed: ${error}`);
+
                 throw error;
             });
     },
@@ -1512,6 +1598,7 @@ export default {
      * @return {Promise.<T>}
      */
     async toggleScreenSharing(toggle = !this._untoggleScreenSharing, options = {}) {
+        logger.debug(`toggleScreenSharing: ${toggle}`);
         if (this.videoSwitchInProgress) {
             return Promise.reject('Switch in progress.');
         }
@@ -1578,6 +1665,8 @@ export default {
                 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
@@ -1681,7 +1770,7 @@ export default {
                     };
                 }
 
-                // Apply the contraints on the desktop track.
+                // Apply the constraints on the desktop track.
                 try {
                     await this.localVideo.track.applyConstraints(desktopResizeConstraints);
                 } catch (err) {
@@ -1742,6 +1831,7 @@ export default {
                 const desktopVideoStream = streams.find(stream => stream.getType() === MEDIA_TYPE.VIDEO);
 
                 if (desktopVideoStream) {
+                    logger.debug(`_switchToScreenSharing is using ${desktopVideoStream} for useVideoStream`);
                     await this.useVideoStream(desktopVideoStream);
                 }
 
@@ -1850,13 +1940,18 @@ export default {
                 APP.store.dispatch(conferenceLeft(room, ...args));
             });
 
+        room.on(
+            JitsiConferenceEvents.CONFERENCE_UNIQUE_ID_SET,
+            (...args) => APP.store.dispatch(conferenceUniqueIdSet(room, ...args)));
+
         room.on(
             JitsiConferenceEvents.AUTH_STATUS_CHANGED,
             (authEnabled, authLogin) =>
                 APP.store.dispatch(authStatusChanged(authEnabled, authLogin)));
 
-        room.on(JitsiConferenceEvents.PARTCIPANT_FEATURES_CHANGED,
-            user => APP.UI.onUserFeaturesChanged(user));
+        room.on(JitsiConferenceEvents.PARTCIPANT_FEATURES_CHANGED, user => {
+            APP.store.dispatch(updateRemoteParticipantFeatures(user));
+        });
         room.on(JitsiConferenceEvents.USER_JOINED, (id, user) => {
             // The logic shared between RN and web.
             commonUserJoinedHandling(APP.store, room, user);
@@ -1865,7 +1960,8 @@ export default {
                 return;
             }
 
-            logger.log(`USER ${id} connnected:`, user);
+            APP.store.dispatch(updateRemoteParticipantFeatures(user));
+            logger.log(`USER ${id} connected:`, user);
             APP.UI.addUser(user);
         });
 
@@ -1939,7 +2035,11 @@ export default {
 
         room.on(JitsiConferenceEvents.TRACK_MUTE_CHANGED, (track, participantThatMutedUs) => {
             if (participantThatMutedUs) {
-                APP.store.dispatch(participantMutedUs(participantThatMutedUs));
+                APP.store.dispatch(participantMutedUs(participantThatMutedUs, track));
+                if (this.isSharingScreen && track.isVideoTrack()) {
+                    logger.debug('TRACK_MUTE_CHANGED while screen sharing');
+                    this._turnScreenSharingOff(false);
+                }
             }
         });
 
@@ -1997,7 +2097,6 @@ export default {
                             formattedDisplayName
                                 || interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME)
                 });
-                APP.UI.changeDisplayName(id, formattedDisplayName);
             }
         );
         room.on(
@@ -2035,35 +2134,8 @@ export default {
             JitsiConferenceEvents.LOCK_STATE_CHANGED,
             (...args) => APP.store.dispatch(lockStateChanged(room, ...args)));
 
-        APP.remoteControl.on(RemoteControlEvents.ACTIVE_CHANGED, isActive => {
-            room.setLocalParticipantProperty(
-                'remoteControlSessionStatus',
-                isActive
-            );
-            APP.UI.setLocalRemoteControlActiveChanged();
-        });
-
-        /* eslint-disable max-params */
-        room.on(
-            JitsiConferenceEvents.PARTICIPANT_PROPERTY_CHANGED,
-            (participant, name, oldValue, newValue) => {
-                switch (name) {
-                case 'remoteControlSessionStatus':
-                    APP.UI.setRemoteControlActiveStatus(
-                        participant.getId(),
-                        newValue);
-                    break;
-                default:
-
-                // ignore
-                }
-            });
-
         room.on(JitsiConferenceEvents.KICKED, participant => {
-            APP.UI.hideStats();
             APP.store.dispatch(kickedOut(room, participant));
-
-            // FIXME close
         });
 
         room.on(JitsiConferenceEvents.PARTICIPANT_KICKED, (kicker, kicked) => {
@@ -2119,8 +2191,26 @@ export default {
             }
         );
         room.on(JitsiConferenceEvents.STARTED_MUTED, () => {
-            (room.isStartAudioMuted() || room.isStartVideoMuted())
-                && APP.UI.notifyInitiallyMuted();
+            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) {
+                if (audioMuted && track.jitsiTrack?.getType() === MEDIA_TYPE.AUDIO) {
+                    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.on(
@@ -2146,7 +2236,7 @@ export default {
         });
 
         APP.UI.addListener(UIEvents.AUTH_CLICKED, () => {
-            AuthHandler.authenticate(room);
+            AuthHandler.authenticateExternal(room);
         });
 
         APP.UI.addListener(
@@ -2171,7 +2261,7 @@ export default {
                         .then(effect => this.localVideo.setEffect(effect))
                         .then(() => {
                             this.setVideoMuteStatus(false);
-                            logger.log('switched local video device');
+                            logger.log('Switched local video device while screen sharing and the video is unmuted');
                             this._updateVideoDeviceId();
                         })
                         .catch(err => APP.store.dispatch(notifyCameraError(err)));
@@ -2180,7 +2270,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');
+                    logger.log('Switched local video device: while screen sharing and the video is muted');
                     const { height } = this.localVideo.track.getSettings();
 
                     this._updateVideoDeviceId();
@@ -2207,12 +2297,20 @@ export default {
 
                         return stream;
                     })
-                    .then(stream => this.useVideoStream(stream))
+                    .then(stream => {
+                        logger.log('Switching the local video device.');
+
+                        return this.useVideoStream(stream);
+                    })
                     .then(() => {
-                        logger.log('switched local video device');
+                        logger.log('Switched local video device.');
                         this._updateVideoDeviceId();
                     })
-                    .catch(err => APP.store.dispatch(notifyCameraError(err)));
+                    .catch(error => {
+                        logger.error(`Switching the local video device failed: ${error}`);
+
+                        return APP.store.dispatch(notifyCameraError(error));
+                    });
                 }
             }
         );
@@ -2259,7 +2357,7 @@ export default {
                     return this.useAudioStream(stream);
                 })
                 .then(() => {
-                    if (hasDefaultMicChanged) {
+                    if (this.localAudio && 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.
@@ -2301,7 +2399,11 @@ 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.
-            APP.UI.updateAllVideos();
+            const displayedUserId = APP.UI.getLargeVideoID();
+
+            if (displayedUserId) {
+                APP.UI.updateLargeVideo(displayedUserId, true);
+            }
         });
 
         APP.UI.addListener(
@@ -2393,33 +2495,11 @@ export default {
     _onConferenceJoined() {
         APP.UI.initConference();
 
-        APP.keyboardshortcut.init();
+        if (!config.disableShortcuts) {
+            APP.keyboardshortcut.init();
+        }
 
         APP.store.dispatch(conferenceJoined(room));
-
-        const displayName
-            = APP.store.getState()['features/base/settings'].displayName;
-
-        APP.UI.changeDisplayName('localVideoContainer', displayName);
-    },
-
-    /**
-    * Adds any room listener.
-    * @param {string} eventName one of the JitsiConferenceEvents
-    * @param {Function} listener the function to be called when the event
-    * occurs
-    */
-    addConferenceListener(eventName, listener) {
-        room.on(eventName, listener);
-    },
-
-    /**
-    * Removes any room listener.
-    * @param {string} eventName one of the JitsiConferenceEvents
-    * @param {Function} listener the listener to be removed.
-    */
-    removeConferenceListener(eventName, listener) {
-        room.off(eventName, listener);
     },
 
     /**
@@ -2586,6 +2666,7 @@ 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);
 
         }
@@ -2621,7 +2702,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 (hasDefaultMicChanged) {
+                                            if (this.localAudio && 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.
@@ -2704,7 +2785,7 @@ export default {
      * requested
      */
     hangup(requestFeedback = false) {
-        eventEmitter.emit(JitsiMeetConferenceEvents.BEFORE_HANGUP);
+        APP.store.dispatch(disableReceiver());
 
         this._stopProxyConnection();
 
@@ -2721,7 +2802,6 @@ export default {
         }
 
         APP.UI.removeAllListeners();
-        APP.remoteControl.removeAllListeners();
 
         let requestFeedbackPromise;
 
@@ -2898,33 +2978,6 @@ export default {
         APP.store.dispatch(updateSettings({
             displayName: formattedNickname
         }));
-
-        if (room) {
-            APP.UI.changeDisplayName(id, formattedNickname);
-        }
-    },
-
-    /**
-     * Returns the desktop sharing source id or undefined if the desktop sharing
-     * is not active at the moment.
-     *
-     * @returns {string|undefined} - The source id. If the track is not desktop
-     * track or the source id is not available, undefined will be returned.
-     */
-    getDesktopSharingSourceId() {
-        return this.localVideo.sourceId;
-    },
-
-    /**
-     * Returns the desktop sharing source type or undefined if the desktop
-     * sharing is not active at the moment.
-     *
-     * @returns {'screen'|'window'|undefined} - The source type. If the track is
-     * not desktop track or the source type is not available, undefined will be
-     * returned.
-     */
-    getDesktopSharingSourceType() {
-        return this.localVideo.sourceType;
     },
 
     /**

config.js

@@ -14,9 +14,6 @@ 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',
 
@@ -94,6 +91,11 @@ 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 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
@@ -120,8 +122,8 @@ var config = {
     // Valid values are in the range 6000 to 510000
     // opusMaxAverageBitrate: 20000,
 
-    // Enables redundancy for Opus
-    // enableOpusRed: false
+    // Enables support for opus-red (redundancy for Opus).
+    // enableOpusRed: false,
 
     // Video
 
@@ -238,6 +240,12 @@ 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
@@ -259,9 +267,16 @@ var config = {
     //    // 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: {
-    //        low: 200000,
-    //        standard: 500000,
-    //        high: 1500000
+    //          VP8 : {
+    //              low: 200000,
+    //              standard: 500000,
+    //              high: 1500000
+    //          },
+    //          VP9: {
+    //              low: 100000,
+    //              standard: 300000,
+    //              high:  1200000
+    //          }
     //    },
     //
     //    // The options can be used to override default thresholds of video thumbnail heights corresponding to
@@ -302,18 +317,11 @@ var config = {
     // Disables or enables RTX (RFC 4588) (defaults to false).
     // disableRtx: false,
 
-    // Disables or enables TCC (the default is in Jicofo and set to true)
-    // (draft-holmer-rmcat-transport-wide-cc-extensions-01). This setting
-    // affects congestion control, it practically enables send-side bandwidth
-    // estimations.
+    // Disables or enables TCC support in this client (default: enabled).
     // enableTcc: true,
 
-    // Disables or enables REMB (the default is in Jicofo and set to false)
-    // (draft-alvestrand-rmcat-remb-03). This setting affects congestion
-    // control, it practically enables recv-side bandwidth estimations. When
-    // both TCC and REMB are enabled, TCC takes precedence. When both are
-    // disabled, then bandwidth estimations are disabled.
-    // enableRemb: false,
+    // Disables or enables REMB support in this client (default: enabled).
+    // enableRemb: true,
 
     // Enables ICE restart logic in LJM and displays the page reload overlay on
     // ICE failure. Current disabled by default because it's causing issues with
@@ -323,26 +331,22 @@ var config = {
     // TCC sequence numbers starting from 0.
     // enableIceRestart: false,
 
-    // Defines the minimum number of participants to start a call (the default
-    // is set in Jicofo and set to 2).
-    // minParticipants: 2,
+    // Enables forced reload of the client when the call is migrated as a result of
+    // the bridge going down. Currently enabled by default as call migration through
+    // session-terminate is causing siganling issues when Octo is enabled.
+    // enableForcedReload: true,
 
     // Use TURN/UDP servers for the jitsi-videobridge connection (by default
     // we filter out TURN/UDP because it is usually not needed since the
     // bridge itself is reachable via UDP)
     // useTurnUdp: false
 
-    // Enables / disables a data communication channel with the Videobridge.
-    // Values can be 'datachannel', 'websocket', true (treat it as
-    // 'datachannel'), undefined (treat it as 'datachannel') and false (don't
-    // open any channel).
-    // openBridgeChannel: true,
-    openBridgeChannel: 'websocket',
-
-
     // UI
     //
 
+    // Disables responsive tiles.
+    // disableResponsiveTiles: false,
+
     // Hides lobby button
     // hideLobbyButton: false,
 
@@ -353,6 +357,13 @@ 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,
@@ -384,6 +395,13 @@ 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.
@@ -393,6 +411,28 @@ 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/',
+
+    // 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: [
+    //    'microphone', 'camera', 'closedcaptions', 'desktop', 'embedmeeting', 'fullscreen',
+    //    'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
+    //    'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
+    //    'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts',
+    //    'tileview', 'select-background', 'download', 'help', 'mute-everyone', 'mute-video-everyone', 'security'
+    // ],
+
     // Stats
     //
 
@@ -416,6 +456,10 @@ var config = {
     // 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
     //
 
@@ -454,7 +498,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'.
@@ -496,7 +540,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: [
@@ -519,6 +563,10 @@ var config = {
     // Decides whether the start/stop recording audio notifications should play on record.
     // disableRecordAudioNotification: false,
 
+    // Disables the sounds that play when other participants join or leave the
+    // conference (if set to true, these sounds will not be played).
+    // disableJoinLeaveSounds: false,
+
     // Information for the chrome extension banner
     // chromeExtensionBanner: {
     //     // The chrome extension to be installed address
@@ -578,6 +626,10 @@ var config = {
     // the menu has option to flip the locally seen video for local presentations
     // disableLocalVideoFlip: false,
 
+    // A property used to unset the default flip state of the local video.
+    // When it is set to 'true', the local(self) video will not be mirrored anymore.
+    // doNotFlipLocalVideo: false,
+
     // Mainly privacy related settings
 
     // Disables all invite functions from the app (share, invite, dial out...etc)
@@ -605,6 +657,9 @@ var config = {
     // 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.
@@ -620,13 +675,36 @@ var config = {
          logoImageUrl: 'https://example.com/logo-img.png'
      }
     */
-    // brandingDataUrl: '',
+    // dynamicBrandingUrl: '',
+
+    // Sets the background transparency level. '0' is fully transparent, '1' is opaque.
+    // backgroundAlpha: 1,
 
     // The URL of the moderated rooms microservice, if available. If it
     // is present, a link to the service will be rendered on the welcome page,
     // otherwise the app doesn't render it.
     // moderatedRoomServiceUrl: 'https://moderated.jitsi-meet.example.com',
 
+    // If true, tile view will not be enabled automatically when the participants count threshold is reached.
+    // disableTileView: true,
+
+    // Hides the conference subject
+    // hideConferenceSubject: true,
+
+    // Hides the 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,
+
     // List of undocumented settings used in jitsi-meet
     /**
      _immediateReloadThreshold
@@ -673,14 +751,75 @@ var config = {
      disableAP
      disableHPF
      disableNS
-     enableLipSync
      enableTalkWhileMuted
      forceJVB121Ratio
+     forceTurnRelay
      hiddenDomain
      ignoreStartMuted
-     startBitrate
+     websocketKeepAlive
+     websocketKeepAliveUrl
      */
 
+    /**
+        Use this array to configure which notifications will be shown to the user
+        The items correspond to the title or description key of that notification
+        Some of these notifications also depend on some other internal logic to be displayed or not,
+        so adding them here will not ensure they will always be displayed
+
+        A falsy value for this prop will result in having all notifications enabled (e.g null, undefined, false)
+    */
+    // notifications: [
+    //     'connection.CONNFAIL', // shown when the connection fails,
+    //     'dialog.cameraNotSendingData', // shown when there's no feed from user's camera
+    //     'dialog.kickTitle', // shown when user has been kicked
+    //     'dialog.liveStreaming', // livestreaming notifications (pending, on, off, limits)
+    //     'dialog.lockTitle', // shown when setting conference password fails
+    //     'dialog.maxUsersLimitReached', // shown when maximmum users limit has been reached
+    //     'dialog.micNotSendingData', // shown when user's mic is not sending any audio
+    //     'dialog.passwordNotSupportedTitle', // shown when setting conference password fails due to password format
+    //     'dialog.recording', // recording notifications (pending, on, off, limits)
+    //     'dialog.remoteControlTitle', // remote control notifications (allowed, denied, start, stop, error)
+    //     'dialog.reservationError',
+    //     'dialog.serviceUnavailable', // shown when server is not reachable
+    //     'dialog.sessTerminated', // shown when there is a failed conference session
+    //     'dialog.sessionRestarted', // show when a client reload is initiated because of bridge migration
+    //     'dialog.tokenAuthFailed', // show when an invalid jwt is used
+    //     'dialog.transcribing', // transcribing notifications (pending, off)
+    //     'dialOut.statusMessage', // shown when dial out status is updated.
+    //     'liveStreaming.busy', // shown when livestreaming service is busy
+    //     'liveStreaming.failedToStart', // shown when livestreaming fails to start
+    //     'liveStreaming.unavailableTitle', // shown when livestreaming service is not reachable
+    //     'lobby.joinRejectedMessage', // shown when while in a lobby, user's request to join is rejected
+    //     'lobby.notificationTitle', // shown when lobby is toggled and when join requests are allowed / denied
+    //     'localRecording.localRecording', // shown when a local recording is started
+    //     'notify.disconnected', // shown when a participant has left
+    //     'notify.grantedTo', // shown when moderator rights were granted to a participant
+    //     'notify.invitedOneMember', // shown when 1 participant has been invited
+    //     'notify.invitedThreePlusMembers', // shown when 3+ participants have been invited
+    //     'notify.invitedTwoMembers', // shown when 2 participants have been invited
+    //     'notify.kickParticipant', // shown when a participant is kicked
+    //     'notify.mutedRemotelyTitle', // shown when user is muted by a remote party
+    //     'notify.mutedTitle', // shown when user has been muted upon joining,
+    //     'notify.newDeviceAudioTitle', // prompts the user to use a newly detected audio device
+    //     'notify.newDeviceCameraTitle', // prompts the user to use a newly detected camera
+    //     'notify.passwordRemovedRemotely', // shown when a password has been removed remotely
+    //     'notify.passwordSetRemotely', // shown when a password has been set remotely
+    //     'notify.raisedHand', // shown when a partcipant used raise hand,
+    //     'notify.startSilentTitle', // shown when user joined with no audio
+    //     'prejoin.errorDialOut',
+    //     'prejoin.errorDialOutDisconnected',
+    //     'prejoin.errorDialOutFailed',
+    //     'prejoin.errorDialOutStatus',
+    //     'prejoin.errorStatusCode',
+    //     'prejoin.errorValidation',
+    //     'recording.busy', // shown when recording service is busy
+    //     'recording.failedToStart', // shown when recording fails to start
+    //     'recording.unavailableTitle', // shown when recording service is not reachable
+    //     'toolbar.noAudioSignalTitle', // shown when a broken mic is detected
+    //     'toolbar.noisyAudioInputTitle', // shown when noise is detected for the current microphone
+    //     'toolbar.talkWhileMutedPopup', // shown when user tries to speak while muted
+    //     'transcribing.failedToStart' // shown when transcribing fails to start
+    // ]
 
     // Allow all above example options to include a trailing comma and
     // prevent fear when commenting out the last value.

connection.js

@@ -3,18 +3,21 @@
 import { jitsiLocalStorage } from '@jitsi/js-utils';
 import Logger from 'jitsi-meet-logger';
 
-import AuthHandler from './modules/UI/authentication/AuthHandler';
+import { redirectToTokenAuthService } from './modules/UI/authentication/AuthHandler';
+import { hideLoginDialog } from './react/features/authentication/actions.web';
+import { LoginDialog } from './react/features/authentication/components';
+import { isTokenAuthEnabled } from './react/features/authentication/functions';
 import {
     connectionEstablished,
     connectionFailed
 } from './react/features/base/connection/actions';
+import { openDialog } from './react/features/base/dialog/actions';
 import {
     isFatalJitsiConnectionError,
     JitsiConnectionErrors,
     JitsiConnectionEvents
 } from './react/features/base/lib-jitsi-meet';
 import { setPrejoinDisplayNameRequired } from './react/features/prejoin/actions';
-
 const logger = Logger.getLogger(__filename);
 
 /**
@@ -80,7 +83,7 @@ function checkForAttachParametersAndConnect(id, password, connection) {
  * @returns {Promise<JitsiConnection>} connection if
  * everything is ok, else error.
  */
-function connect(id, password, roomName) {
+export function connect(id, password, roomName) {
     const connectionConfig = Object.assign({}, config);
     const { jwt } = APP.store.getState()['features/base/jwt'];
 
@@ -94,6 +97,10 @@ 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) {
@@ -210,10 +217,39 @@ export function openConnection({ id, password, retry, roomName }) {
             const { jwt } = APP.store.getState()['features/base/jwt'];
 
             if (err === JitsiConnectionErrors.PASSWORD_REQUIRED && !jwt) {
-                return AuthHandler.requestAuth(roomName, connect);
+                return requestAuth(roomName);
             }
         }
 
         throw err;
     });
 }
+
+/**
+ * Show Authentication Dialog and try to connect with new credentials.
+ * If failed to connect because of PASSWORD_REQUIRED error
+ * then ask for password again.
+ * @param {string} [roomName] name of the conference room
+ *
+ * @returns {Promise<JitsiConnection>}
+ */
+function requestAuth(roomName) {
+    const config = APP.store.getState()['features/base/config'];
+
+    if (isTokenAuthEnabled(config)) {
+        // This Promise never resolves as user gets redirected to another URL
+        return new Promise(() => redirectToTokenAuthService(roomName));
+    }
+
+    return new Promise(resolve => {
+        const onSuccess = connection => {
+            APP.store.dispatch(hideLoginDialog());
+            resolve(connection);
+        };
+
+        APP.store.dispatch(
+            openDialog(LoginDialog, { onSuccess,
+                roomName })
+        );
+    });
+}

css/_atlaskit_overrides.scss

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

css/_audio-preview.scss

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

css/_base.scss

@@ -17,6 +17,7 @@ textarea {
 html {
     height: 100%;
     width: 100%;
+    overflow: hidden;
 }
 
 body {
@@ -44,24 +45,20 @@ body {
  * pad the modal container in order for the modals to be centered
  * while also taking the chat size into consideration.
 */
-@media (min-width: 480px + $sidebarWidth) {
-    .shift-right [class^="Modal__FillScreen"] {
+@media (min-width: 581px) {
+    .shift-right .atlaskit-portal > div:not(.Tooltip) {
         padding-left: $sidebarWidth;
     }
 }
 
-/**
- * Similarly, we offset the notifications when the chat is open by
- * padding the container.
-*/
-.shift-right [class^="styledFlagGroup-"] {
-    padding-left: $sidebarWidth;
-}
-
 .jitsi-icon svg {
     fill: white;
 }
 
+.disabled .jitsi-icon svg {
+    fill: #929292;
+}
+
 .jitsi-icon.gray svg {
     fill: #5E6D7A;
     cursor: pointer;
@@ -201,74 +198,3 @@ 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: $newToolbarBackgroundColor;
+    background-color: $chatBackgroundColor;
     box-sizing: border-box;
     color: #FFF;
     display: flex;
@@ -32,6 +32,13 @@
     width: $sidebarWidth;
     word-wrap: break-word;
 
+    display: flex;
+    flex-direction: column;
+
+    & > :first-child {
+        margin-top: auto;
+    }
+
     a {
         display: block;
     }
@@ -98,43 +105,102 @@
 }
 
 .chat-header {
-    background-color: $chatHeaderBackgroundColor;
     height: 70px;
     position: relative;
     width: 100%;
     z-index: 1;
+    display: flex;
+    justify-content: flex-end;
+    padding: 16px;
+    align-items: center;
+    box-sizing: border-box;
+    color: #fff;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 32px;
 
-    .chat-close {
-        align-items: center;
-        bottom: 8px;
-        color: white;
+    .jitsi-icon {
         cursor: pointer;
-        display: flex;
-        font-size: 18px;
-        height: 40px;
-        justify-content: center;
-        line-height: 15px;
-        padding: 4px;
-        position: absolute;
-        right: 5px;
-        width: 40px;
+    }
+}
 
-        &:hover {
-            color: rgba(255, 255, 255, 0.8);
+.chat-input-container {
+    padding: 0 16px 16px;
+
+    &.populated {
+        #chat-input {
+            .send-button {
+                background: #1B67EC;
+                cursor: pointer;
+
+                @media (hover: hover) and (pointer: fine) {
+                    &:hover {
+                        background: #3D82FB;
+                    }
+                }
+
+                &:active {
+                    background: #0852D4;
+                }
+
+                path {
+                    fill: #fff;
+                }
+            }
         }
     }
 }
 
 #chat-input {
-    border-top: 1px solid $chatInputSeparatorColor;
+    border: 1px solid $chatInputSeparatorColor;
     display: flex;
-    padding: 5px 10px;
+    padding: 4px;
+    border-radius: 3px;
+
+    &:focus-within {
+        border: 1px solid #619CF4;
+    }
 
     * {
         background-color: transparent;
     }
 }
 
+.send-button-container {
+    display: flex;
+    align-items: center;
+}
+
+.send-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    width: 40px;
+    border-radius: 3px;
+
+    path {
+        fill: $chatInputSeparatorColor;
+    }
+}
+
+.smiley-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    width: 40px;
+    border-radius: 3px;
+}
+
+#chat-input .smiley-button {
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            background-color: #484A4F;
+        }
+    }
+}
+
 .remoteuser {
     color: #B8C7E0;
 }
@@ -148,7 +214,7 @@
     border-radius:0;
     box-shadow: none;
     color: white;
-    font-size: 15px;
+    font-size: 14px;
     padding: 10px;
     overflow-y: auto;
     resize: none;
@@ -164,10 +230,55 @@
 #nickname {
     text-align: center;
     color: #9d9d9d;
-    font-size: 18px;
-    margin-top: 30px;
-    left: 5px;
-    right: 5px;
+    font-size: 16px;
+    margin: auto 0;
+    padding: 0 16px;
+
+    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: #757575;
+            background: #11336E;
+            pointer-events: none;
+        }
+    }
+}
+
+.mobile-browser {
+    #nickname {
+        input {
+            height: 48px;
+        }
+
+        .enter-chat {
+            height: 48px;
+        }
+    }
+
+    #usermsg {
+        font-size: 16px;
+    }
+
+    .chatmessage .usermessage {
+        font-size: 16px;
+    }
 }
 
 .sideToolbarContainer {
@@ -177,13 +288,17 @@
     }
 
     .display-name {
-        font-size: 13px;
-        font-weight: bold;
+        font-size: 12px;
+        font-weight: 600;
         margin-bottom: 5px;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
     }
+
+    @media (max-width: 580px) {
+        display: none !important;
+    }
 }
 
 .chatmessage {
@@ -202,6 +317,7 @@
 
     .usermessage {
         white-space: pre-wrap;
+        font-size: 14px;
     }
 
     &.error {
@@ -224,12 +340,16 @@
     }
 
     .messagecontent {
-        margin: 5px 10px;
+        margin: 8px;
         max-width: 100%;
         overflow: hidden;
     }
 }
 
+.timestamp {
+    color: #757575;
+}
+
 .smiley {
     font-size: 14pt;
 }
@@ -265,7 +385,9 @@
     max-height: 0;
     overflow: hidden;
     position: absolute;
-    width: $sidebarWidth;
+    width: calc(#{$sidebarWidth} - 32px);
+    margin-bottom: 5px;
+    margin-left: -5px;
 
     /**
      * CSS transitions do not apply for auto dimensions. So to produce the css
@@ -280,9 +402,8 @@
     }
 
     #smileysContainer {
-        background-color: $newToolbarBackgroundColor;
-        border-bottom: 1px solid;
-        border-top: 1px solid;
+        background-color: $chatBackgroundColor;
+        border-top: 1px solid $chatInputSeparatorColor;
     }
 }
 
@@ -379,3 +500,49 @@
         }
     }
 }
+
+.chat-dialog {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    margin-top: -5px; // Margin set by atlaskit.
+
+    &-header {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        margin: 16px;
+        width: calc(100% - 32px);
+        box-sizing: border-box;
+        color: #fff;
+        font-weight: 600;
+        font-size: 24px;
+        line-height: 32px;
+
+        .jitsi-icon {
+            cursor: pointer;
+        }
+    }
+
+    #chatconversation {
+        width: 100%;
+    }
+}
+
+.touchmove-hack {
+    display: flex;
+    flex: 1;
+    overflow: auto;
+}
+
+/**
+ * Make header close button more easily tappable on mobile.
+ */
+.mobile-browser .chat-dialog-header .jitsi-icon {
+    display: grid;
+    place-items: center;
+    height: 48px;
+    width: 48px;
+    background: #36383C;
+    border-radius: 3px;
+}

css/_country-picker.scss

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

css/_drawer.scss

@@ -0,0 +1,84 @@
+.drawer-portal {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: $drawerZ;
+}
+
+.drawer-menu {
+    max-height: 50vh;
+    background: #242528;
+    border-radius: 16px 16px 0 0;
+    overflow-y: auto;
+
+    &.expanded {
+        max-height: 80vh;
+    }
+
+    .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;
+
+        .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/_labels.scss

@@ -4,7 +4,7 @@
     top: 30px;
     right: 30px;
     transition: right 0.5s;
-    z-index: $filmstripVideosZ + 1;
+    z-index: $labelsZ;
 
     .circular-label {
         align-items: center;

css/_lobby.scss

@@ -9,7 +9,7 @@
             .spinner {
                 margin: 30px;
             }
-    
+
             .joining-message {
                 margin: 10px;
             }
@@ -49,7 +49,7 @@
     position: fixed;
     top: 20;
     transition: top 1s ease;
-    z-index: 100;
+    z-index: $toolbarZ + 1;
 
     &.toolbox-visible {
         // Same as toolbox subject position
@@ -62,31 +62,6 @@
         padding: 15px
     }
 
-    ul {
-        list-style-type: none;
-        padding: 0 15px 15px 15px;
-
-        li {
-            align-items: center;
-            display: flex;
-            flex-direction: row;
-            margin: 8px 0;
-
-            .details {
-                display: flex;
-                flex: 1;
-                flex-direction: column;
-                justify-content: space-evenly;
-                margin: 0 30px 0 10px;
-            }
-
-            button {
-                align-self: unset;
-                margin: 0 5px;
-            }
-        }
-    }
-
     button {
         align-self: stretch;
         margin: 8px 0;
@@ -116,3 +91,50 @@
         }
     }
 }
+
+.knocking-participants-container {
+    list-style-type: none;
+    max-height: 600px;
+    overflow-y: scroll;
+    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/_mini_toolbox.scss

@@ -23,44 +23,10 @@
     flex-direction: row;
     left: 50%;
     position: absolute;
-    top: 10px;
+    bottom: 10px;
     transform: translateX(-50%);
-
-    .toolbox-button {
-        &:first-child {
-            .toolbox-icon {
-                border-top-left-radius: 3px;
-                border-bottom-left-radius: 3px;
-            }
-        }
-
-        &:nth-child(2) {
-            svg {
-                fill: $hangupColor;
-            }
-        }
-
-        &:last-child {
-            .toolbox-icon {
-                border-top-right-radius: 3px;
-                border-bottom-right-radius: 3px;
-            }
-        }
-    }
 }
 
 .filmstrip-toolbox {
     flex-direction: column;
-
-    .toolbox-button {
-        &:nth-child(1) {
-            svg {
-                fill: $hangupColor;
-            }
-        }
-
-        .toolbox-icon {
-            border-radius: 3px;
-        }
-    }
-}
+}

css/_popover.scss

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

css/_popup_menu.scss

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

css/_prejoin.scss

@@ -129,7 +129,7 @@
     }
 
     &-dropdown-container {
-        & > div > div:nth-child(2) > div > div {
+        & > div:nth-child(2) {
             background: #fff;
             padding: 0;
         }

css/_premeeting-screens.scss

@@ -25,7 +25,7 @@
         text {
             fill: black;
             font-size: 26px;
-            font-weight: 400;  
+            font-weight: 400;
         }
     }
 
@@ -197,14 +197,6 @@
         &> div {
             margin: 0 12px;
         }
-
-        .settings-button-small-icon {
-            right: -8px;
-
-            &--hovered {
-                right: -10px;
-            }
-        }
     }
 }
 

css/_responsive.scss

@@ -65,3 +65,21 @@
         }
     }
 }
+
+.desktop-browser {
+    &.shift-right {
+
+        @media only screen and (max-width: $verySmallScreen + $sidebarWidth) {
+
+            #videoResolutionLabel {
+                display: none;
+            }
+            .vertical-filmstrip .filmstrip {
+                display: none;
+            }
+            .chrome-extension-banner {
+                display: none;
+            }
+        }
+    }
+}

css/_settings-button.scss

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

css/_subject.scss

@@ -14,12 +14,15 @@
     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));
 
     &.visible {
         top: 0px;
     }
 
+    &.gradient {
+        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    }
+
     &-text {
         vertical-align: middle;
     }

css/_toolbars.scss

@@ -33,245 +33,245 @@
 
     &.visible {
         bottom: 0;
-        .toolbox-background {
-            bottom: 0px;
-        }
     }
 
     &.no-buttons {
         display: none;
     }
 
-    &.shift-right {
-        margin-left: $sidebarWidth;
-        width: calc(100% - #{$sidebarWidth});
+    @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;
+
+    .button-group-center,
+    .button-group-left,
+    .button-group-right {
+        display: flex;
+        width: 33%;
     }
 
-    .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;
+    .button-group-center {
+        justify-content: center;
+    }
+
+    .button-group-right {
+        justify-content: flex-end;
+    }
+
+    .toolbox-button-wth-dialog {
+        display: inline-block;
+    }
+}
+
+.toolbox-button {
+    color: $toolbarButtonColor;
+    cursor: pointer;
+    display: inline-block;
+    line-height: $newToolbarSize;
+    text-align: center;
+}
+
+.toolbar-button-with-badge {
+    display: inline-block;
+    position: relative;
+
+    .badge-round {
+        bottom: -5px;
+        font-size: 12px;
+        line-height: 20px;
+        min-width: 20px;
         pointer-events: none;
         position: absolute;
-        z-index: $toolbarBackgroundZ;
+        right: -5px;
+    }
+}
+
+.toolbox-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    max-width: 100%;
+}
+
+.toolbox-content-items {
+    background: $newToolbarBackgroundColor;
+    box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
+    border-radius: 6px;
+    margin: 0 auto;
+    padding: 6px;
+    text-align: center;
+
+    >div {
+        margin-left: 8px;
+
+        &:first-child {
+            margin-left: 0;
+        }
+    }
+}
+
+.overflow-menu {
+    font-size: 14px;
+    list-style-type: none;
+    padding: 8px 0;
+    background-color: $menuBG;
+
+    .profile-text {
+        max-width: 150px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+}
+
+.overflow-menu-item {
+    align-items: center;
+    color: $overflowMenuItemColor;
+    cursor: pointer;
+    display: flex;
+    font-size: 14px;
+    font-weight: 400;
+    height: 40px;
+    line-height: 24px;
+    padding: 8px 16px;
+    box-sizing: border-box;
+
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            background: $overflowMenuItemBackground;
+        }
     }
 
-    .toolbox-content {
-        box-sizing: border-box;
+    div {
         display: flex;
-        justify-content: space-between;
-        margin-left: auto;
-        margin-right: auto;
-        padding: 20px 16px;
-        position: relative;
-        width: 100%;
-        z-index: $toolbarZ;
+        flex-direction: row;
+        align-items: center;
+    }
 
-        .button-group-center,
-        .button-group-left,
-        .button-group-right {
-            display: flex;
-            width: 33%;
+    &.unclickable {
+        cursor: default;
+    }
+    &.disabled {
+        cursor: initial;
+        color: #929292;
+
+        &:hover {
+            background: none;
         }
 
-        .button-group-center {
-            justify-content: center;
-
-            .toolbox-button {
-
-                .toolbox-icon {
-                    background-color: #fff;
-                    border-radius: 50%;
-                    border: 1px solid #d1dbe8;
-                    margin: 0px 4px;
-                    width: 38px;
-                    height: 38px;
-        
-                    &:hover {
-                        background-color: #daebfa;
-                        border: 1px solid #daebfa;
-                    }
-        
-                    &.toggled {
-                        background: #2a3a4b;
-                        border: 1px solid #5e6d7a;
-    
-                        svg {
-                            fill: #fff;
-                        }
-        
-                        &:hover {
-                            background-color: #5e6d7a;
-                        }
-                    }
-        
-                    &.disabled, .disabled & {
-                        cursor: initial;
-                        color: #fff;
-                        background-color: #a4b8d1;
-                    }
-    
-                    svg {
-                        fill: #5e6d7a;
-                    }
-                }
-
-                &:nth-child(2) {
-                    .toolbox-icon {
-                        background-color: $hangupColor;
-                        border: 1px solid $hangupColor;
-                        width: 40px;
-                        height: 40px;
-                
-                        &:hover {
-                            background-color: $hangupColor;
-                        }
-
-                        svg {
-                            fill: #fff;
-                        }
-                    }
-                }
-            }
+        svg {
+            fill: #929292;
         }
 
-        .button-group-right {
-            justify-content: flex-end;
+    }
+
+    @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;
+.beta-tag {
+    background: #36383C;
+    border-radius: 3px;
+    color: #fff;
+    font-size: 12px;
+    margin-left: 8px;
+    padding: 0 4px;
+    text-transform: uppercase;
+}
 
-            .overflow-menu-item {
-                align-items: center;
-                color: $overflowMenuItemColor;
-                cursor: pointer;
-                display: flex;
-                font-size: 14px;
-                height: 22px;
-                padding: 5px 12px;
+.overflow-menu-item-icon {
+    margin-right: 16px;
 
-                div {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-                }
+    i {
+        display: inline;
+        font-size: 24px;
+    }
 
-                &: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;
-            }
+    @media (hover: hover) and (pointer: fine) {
+        i:hover {
+            background-color: initial;
         }
+    }
 
-        .toolbox-button {
-            color: $toolbarButtonColor;
-            cursor: pointer;
-            display: inline-block;
-            line-height: $newToolbarSize;
-            margin: 0 8px;
-            text-align: center;
+    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;
         }
+    }
 
-        .toolbar-button-with-badge {
-            position: relative;
+    @media (max-width: 320px) {
+        height: 36px;
+        width: 36px;
+    }
 
-            .badge-round {
-                bottom: -5px;
-                font-size: 12px;
-                line-height: 20px;
-                min-width: 20px;
-                pointer-events: none;
-                position: absolute;
-                right: -5px;
-            }
+    &.toggled {
+        background: $newToolbarButtonToggleColor;
+    }
+
+    &.disabled {
+        cursor: initial !important;
+        background-color: #36383c !important;
+
+        svg {
+            fill: #929292 !important;
         }
+    }
+}
 
-        .toolbox-button-wth-dialog {
-            display: inline-block;
+.hangup-button {
+    background-color: $hangupColor;
+
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            background-color: $hangupHoverColor;
         }
+    }
 
-        .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;
-                }
-            }
-        }
+    svg {
+        fill: #fff;
     }
 }
 
@@ -289,3 +289,47 @@
 
     @include transition(all .3s ease-out);
 }
+
+/**
+ * Audio and video buttons do not have toggled state.
+ */
+.audio-preview,
+.video-preview {
+    .toolbox-icon.toggled {
+        background: none;
+
+        &:hover {
+            background: $newToolbarButtonHoverColor;
+        }
+    }
+
+}
+
+/**
+ * On small mobile devices make the toolbar full width and pad the invite prompt.
+ */
+.toolbox-content-mobile {
+    @media (max-width: 500px) {
+        margin-bottom: 0;
+
+        .toolbox-content-wrapper {
+            width: 100%;
+        }
+
+        .toolbox-content-items {
+            border-radius: 0;
+            display: flex;
+            justify-content: space-evenly;
+            padding: 6px 0;
+            width: 100%;
+        }
+
+        .invite-more-container {
+            margin: 0 16px 8px;
+        }
+
+        .invite-more-container.elevated {
+            margin-bottom: 52px;
+        }
+    }
+}

css/_transcription-subtitles.scss

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

css/_variables.scss

@@ -4,7 +4,8 @@
  * Style variables
  */
 $baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$hangupColor: #bf2117;
+$hangupColor:#DD3849;
+$hangupHoverColor: #F25363;
 $hangupFontSize: 2em;
 
 /**
@@ -37,20 +38,20 @@ $presence-idle: rgb(172, 172, 172);
 /**
  * Toolbar
  */
-$newToolbarBackgroundColor: rgba(22, 38, 55, 0.8);
-$newToolbarButtonHoverColor: rgba(255, 255, 255, 0.15);
-$newToolbarButtonToggleColor: rgba(255, 255, 255, 0.2);
+$newToolbarBackgroundColor: #131519;
+$newToolbarButtonHoverColor: rgba(255, 255, 255, 0.2);
+$newToolbarButtonToggleColor: rgba(255, 255, 255, 0.15);
 $AOTToolbarButtonHoverColor: rgba(14, 20, 35, 0.6);
 $AOTToolbarButtonToggleColor: rgba(14, 20, 35, 1);
+$menuBG:#242528;
 $newToolbarFontSize: 24px;
 $newToolbarHangupFontSize: 32px;
-$newToolbarSize: 40px;
+$newToolbarSize: 48px;
 $newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px);
 $toolbarTitleFontSize: 19px;
-$overflowMenuBG: initial;
-$overflowMenuItemHoverBG: #313D52;
-$overflowMenuItemHoverColor: #B8C7E0;
-$overflowMenuItemColor: #B8C7E0;
+$overflowMenuItemColor: #fff;
+$overflowMenuItemBackground: #36383C;
+
 
 /**
  * Video layout
@@ -90,12 +91,12 @@ $modalTextColor: #333;
  * Chat
  */
 $chatActionsSeparatorColor: rgb(173, 105, 112);
-$chatHeaderBackgroundColor: rgba(42, 58, 75, 0.9);
+$chatBackgroundColor: #131519;
 $chatInputSeparatorColor: #A4B8D1;
-$chatLocalMessageBackgroundColor: rgb(4, 98, 178);
+$chatLocalMessageBackgroundColor: #484A4F;
 $chatPrivateMessageBackgroundColor: rgb(153, 69, 77);
-$chatRemoteMessageBackgroundColor:  rgb(86, 101, 114);
-$sidebarWidth: 375px;
+$chatRemoteMessageBackgroundColor:  #242528;
+$sidebarWidth: 315px;
 
  /**
  * Misc.
@@ -114,18 +115,21 @@ $zindex1: 1;
 $zindex2: 2;
 $zindex3: 3;
 $toolbarBackgroundZ: 4;
-$filmstripVideosZ: 5;
+$labelsZ: 5;
+$filmstripVideosZ: 6;
+$subtitlesZ: 7;
+$popoverZ: 8;
 $zindex10: 10;
 $reloadZ: 20;
 $poweredByZ: 100;
 $ringingZ: 300;
-$sideToolbarContainerZ: 300;
-$toolbarZ: 350;
+$sideToolbarContainerZ: 200;
+$toolbarZ: 250;
+$drawerZ: 351;
 $tooltipsZ: 401;
 $dropdownMaskZ: 900;
 $dropdownZ: 901;
 $centeredVideoLabelZ: 1010;
-$popoverZ: 1015;
 $overlayZ: 1016;
 
 

css/_video-preview.scss

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

css/_videolayout_default.scss

@@ -182,10 +182,12 @@
         z-index: $zindex2;
     }
 
-    &.shift-right {
-        &#largeVideoContainer {
-            margin-left: $sidebarWidth;
-            width: calc(100% - #{$sidebarWidth});
+    @media (min-width: 581px) {
+        &.shift-right {
+            &#largeVideoContainer {
+                margin-left: $sidebarWidth;
+                width: calc(100% - #{$sidebarWidth});
+            }
         }
     }
 }
@@ -398,7 +400,9 @@
     }
 }
 
+.local-video-menu-trigger,
 .remote-video-menu-trigger,
+.localvideomenu,
 .remotevideomenu
 {
     display: inline-block;
@@ -416,6 +420,7 @@
         cursor: hand;
     }
 }
+.local-video-menu-trigger,
 .remote-video-menu-trigger {
     margin-top: 7px;
 }
@@ -478,14 +483,6 @@
     z-index: $reloadZ; /*The reload button should appear on top of the header!*/
 }
 
-.audiolevel {
-    display: inline-block;
-    position: absolute;
-    z-index: $zindex0;
-    border-radius:1px;
-    pointer-events: none;
-}
-
 #dominantSpeaker {
     visibility: hidden;
     width: 300px;

css/_welcome_page.scss

@@ -90,7 +90,7 @@ body.welcome-page {
                     color: $defaultWarningColor;
                     display: flex;
                     flex-direction: row;
-                    margin-top: 5px;
+                    margin-top: 15px;
 
                     .jitsi-icon {
                         margin-right: 15px;
@@ -208,6 +208,11 @@ body.welcome-page {
             cursor: pointer;
             font-size: 32px;
         }
+
+        .toolbox-icon {
+            height: 24px;
+            width: 24px;
+        }
     }
 
     .welcome-watermark {
@@ -228,6 +233,10 @@ body.welcome-page {
         }
     }
 
+    &.without-footer {
+        justify-content: start;
+    }
+
     .welcome-cards-container {
         color:#131519;
         padding-top: 40px;

css/filmstrip/_horizontal_filmstrip.scss

@@ -6,7 +6,6 @@
 }
 
 .horizontal-filmstrip .filmstrip {
-    position: absolute;
     bottom: 0;
     right: 0;
     padding: 10px 5px;

css/filmstrip/_small_video.scss

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

css/filmstrip/_tile_view.scss

@@ -15,9 +15,8 @@
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
-        height: calc(100vh - 200px);
+        height: 100%;
         width: 100vw;
-        margin: 100px 0px;
     }
 
     .filmstrip__videos .videocontainer {
@@ -43,17 +42,18 @@
         height: 100%;
         justify-content: center;
         left: 0;
-        position: fixed;
+        position: absolute;
         top: 0;
         width: 100%;
-        z-index: $filmstripVideosZ;
 
-        &.shift-right {
-            margin-left: $sidebarWidth;
-            width: calc(100% - #{$sidebarWidth});
+        @media (min-width: 581px) {
+            &.shift-right {
+                margin-left: $sidebarWidth;
+                width: calc(100% - #{$sidebarWidth});
 
-            #filmstripRemoteVideos {
-                width: calc(100vw - #{$sidebarWidth});
+                #filmstripRemoteVideos {
+                    width: calc(100vw - #{$sidebarWidth});
+                }
             }
         }
     }
@@ -87,6 +87,7 @@
         box-sizing: border-box;
         display: flex;
         flex-wrap: wrap;
+        flex-shrink: 0;
         margin-top: auto;
         margin-bottom: auto;
         justify-content: center;
@@ -95,12 +96,21 @@
             border: 0;
             box-sizing: border-box;
             display: block;
-            margin: 5px;
+            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;
+            }
+        }
     }
 
     .has-overflow#filmstripRemoteVideosContainer {
@@ -110,14 +120,16 @@
     .has-overflow .videocontainer {
         align-self: baseline;
     }
+}
 
+.shift-right #filmstripRemoteVideosContainer {
     /**
-     * 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.
+     * Max-width corresponding to the ASPECT_RATIO_BREAKPOINT from features/filmstrip/constants,
+     * from which we subtract the chat size.
      */
-    .has-overflow #localVideoContainer {
-        margin-bottom: 100px !important;
+    @media only screen and (max-width: calc(500px + #{$sidebarWidth})) {
+        video {
+            object-fit: cover;
+        }
     }
 }

css/filmstrip/_tile_view_overrides.scss

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

css/filmstrip/_vertical_filmstrip_overrides.scss

@@ -51,6 +51,7 @@
      * 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);
@@ -68,7 +69,9 @@
      * 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;
@@ -76,6 +79,7 @@
         right: auto;
     }
 
+    .local-video-menu-trigger,
     .remote-video-menu-trigger {
         margin-bottom: 7px;
         margin-left: $remoteVideoMenuIconMargin;

css/main.scss

@@ -43,6 +43,7 @@ $flagsImagePath: "../images/";
 @import 'modals/settings/settings';
 @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';
@@ -103,5 +104,6 @@ $flagsImagePath: "../images/";
 @import 'e2ee';
 @import 'responsive';
 @import 'connection-status';
+@import 'drawer';
 
 /* Modules END */

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

@@ -39,7 +39,7 @@
 
         .device-selector-trigger-text {
             overflow: hidden;
-            margin-left: 8px;
+            text-align: center;
             text-overflow: ellipsis;
             white-space: nowrap;
             width: 100%;

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

@@ -2,22 +2,6 @@
     &-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/invite/_info.scss

@@ -50,6 +50,12 @@
     }
 }
 
+.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,45 +1,55 @@
 .invite-more {
     &-container {
-        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));
+        margin-bottom: 8px;
+        transition: margin-bottom 0.3s;
 
         &.elevated {
-            z-index: $filmstripVideosZ + 1;
+            margin-bottom: 36px;
         }
     }
 
+    &-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 {
-        font-size: 19px;
-        line-height: 28px;
-        margin: 24px 0 16px 0;
+        max-width: 100%;
+        margin-bottom: 16px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
     }
 
     &-button {
         display: flex;
-        margin: auto;
+        max-width: 100%;
+        height: 40px;
+        box-sizing: border-box;
         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;
 
-        &:hover {
-            background: #278ADF;
+        @media (hover: hover) and (pointer: fine) {
+            &:hover {
+                background: #278ADF;
+            }
         }
 
         &-text {
             margin-left: 8px;
-            font-size: 15px;
-            line-height: 24px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
         }
     }
     &-dialog {
@@ -47,22 +57,6 @@
         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;
@@ -112,11 +106,11 @@
                     border-radius: 4px;
                     cursor: pointer;
                 }
-    
+
                 &:hover > div:hover {
                     background-color: rgba(255, 255, 255, 0.2);
                 }
-    
+
                 & > :not(:last-child) {
                     margin-right: 16px;
                 }
@@ -135,7 +129,6 @@
             .dial-in-copy {
                 display: inline-block;
                 vertical-align: middle;
-                margin-left: 21px;
                 cursor: pointer;
             }
         }
@@ -214,3 +207,14 @@
         }
     }
 }
+
+.mobile-browser {
+    .invite-more-content {
+        font-size: 16px;
+    }
+
+    .invite-more-button {
+        height: 48px;
+        padding: 12px 16px;
+    }
+}

css/modals/settings/_settings.scss

@@ -23,6 +23,10 @@
         padding: 20px 0px 4px 0px;
     }
 
+    input[type="checkbox"] + svg + span {
+        color: #9FB0CC;
+    }
+
     .calendar-tab,
     .more-tab,
     .profile-edit {

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

@@ -111,7 +111,3 @@
         display: none;
     }
 }
-
-#videoResolutionLabel {
-    z-index: $zindex3 + 1;
-}

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

@@ -0,0 +1,93 @@
+.virtual-background-dialog {
+    display: inline-grid;
+    grid-template-columns: auto auto auto auto auto auto auto;
+    max-width: 370px;
+    cursor: pointer;
+    .thumbnail {
+        border-radius: 10px;
+        object-fit: cover;
+        padding: 5px;
+        height: 40px;
+        width: 40px;
+    }
+
+    .thumbnail:hover ~ .delete-image-icon {
+        display: block;
+    }
+    .thumbnail-selected {
+        border-radius: 10px;
+        object-fit: cover;
+        padding: 5px;
+        height: 40px;
+        width: 40px;
+        border: 2px solid #a4b8d1;
+    }
+    .blur-selected {
+        border-radius: 10px;
+        border: 2px solid #a4b8d1;
+    }
+    .virtual-background-none {
+        font-weight: bold;
+        padding: 5px;
+        height: 34px;
+        width: 34px;
+        border-radius: 10px;
+        border: 1px solid #a4b8d1;
+        text-align: center;
+        vertical-align: middle;
+        line-height: 35px;
+        margin-right: 5px;
+    }
+    .none-selected {
+        font-weight: bold;
+        padding: 5px;
+        height: 34px;
+        width: 34px;
+        border-radius: 10px;
+        border: 2px solid #a4b8d1;
+        text-align: center;
+        vertical-align: middle;
+        line-height: 35px;
+        margin-right: 5px;
+    }
+}
+
+.modal-dialog-form .virtual-background-loading {
+    overflow: hidden;
+}
+.file-upload-btn {
+    display: none;
+}
+.custom-file-upload {
+    font-size: x-large;
+    font-weight: bold;
+    display: inline-block;
+    padding: 4px;
+    height: 35px;
+    width: 35px;
+    border-radius: 10px;
+    border: 1px solid #a4b8d1;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 35px;
+    margin-left: 5px;
+    cursor: pointer;
+}
+
+.delete-image-icon {
+    position: absolute;
+    display: none;
+    left: 36;
+    bottom: 36;
+}
+.delete-image-icon:hover {
+    display: block;
+}
+
+.thumbnail-container {
+    position: relative;
+}
+
+.loading-content-text{
+  margin-right: 15px;
+}

css/overlay/_overlay.scss

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

debian/control

@@ -33,7 +33,7 @@ Description: Configuration for web serving of Jitsi Meet
 
 Package: jitsi-meet-prosody
 Architecture: all
-Depends: openssl, prosody | prosody-trunk | prosody-0.11
+Depends: openssl, prosody | prosody-trunk | prosody-0.11, lua-sec
 Replaces: jitsi-meet-tokens
 Description: Prosody configuration for Jitsi Meet
  Jitsi Meet is a WebRTC JavaScript application that uses Jitsi

debian/jitsi-meet-prosody.postinst

@@ -35,7 +35,7 @@ case "$1" in
             db_input critical jitsi-videobridge/jvb-hostname || true
             db_go
         fi
-        JVB_HOSTNAME="$RET"
+        JVB_HOSTNAME=$(echo "$RET" | xargs echo -n)
 
         db_get jitsi-videobridge/jvbsecret
         if [ -z "$RET" ] ; then
@@ -60,20 +60,11 @@ case "$1" in
             JICOFO_AUTH_PASSWORD="$RET"
         fi
 
-        db_get jicofo/jicofosecret
-        if [ -z "$RET" ] ; then
-            # if secret is missing generate it, and store it
-            JICOFO_SECRET=`generateRandomPassword`
-            db_set jicofo/jicofosecret "$JICOFO_SECRET"
-        else
-            JICOFO_SECRET="$RET"
-        fi
-
         JICOFO_AUTH_DOMAIN="auth.$JVB_HOSTNAME"
 
         # detect dpkg-reconfigure, just delete old links
         db_get jitsi-meet-prosody/jvb-hostname
-        JVB_HOSTNAME_OLD=$RET
+        JVB_HOSTNAME_OLD=$(echo "$RET" | xargs echo -n)
         if [ -n "$RET" ] && [ ! "$JVB_HOSTNAME_OLD" = "$JVB_HOSTNAME" ] ; then
             rm -f /etc/prosody/conf.d/$JVB_HOSTNAME_OLD.cfg.lua
             rm -f /etc/prosody/certs/$JVB_HOSTNAME_OLD.key
@@ -107,7 +98,6 @@ case "$1" in
             mkdir -p /etc/prosody/conf.d/
             cp /usr/share/jitsi-meet-prosody/prosody.cfg.lua-jvb.example $PROSODY_HOST_CONFIG
             sed -i "s/jitmeet.example.com/$JVB_HOSTNAME/g" $PROSODY_HOST_CONFIG
-            sed -i "s/focusSecret/$JICOFO_SECRET/g" $PROSODY_HOST_CONFIG
             sed -i "s/focusUser/$JICOFO_AUTH_USER/g" $PROSODY_HOST_CONFIG
             sed -i "s/__turnSecret__/$TURN_SECRET/g" $PROSODY_HOST_CONFIG
             if [ ! -f /etc/prosody/conf.d/$JVB_HOSTNAME.cfg.lua ]; then
@@ -142,6 +132,28 @@ case "$1" in
             echo -e "    admins = { \"$JICOFO_AUTH_USER@auth.$JVB_HOSTNAME\", \"jvb@auth.$JVB_HOSTNAME\" }" >> $PROSODY_HOST_CONFIG
         fi
 
+        # Convert the old focus component config to the new one.
+        # Old:
+        # Component "focus.jitmeet.example.com"
+        #     component_secret = "focusSecret"
+        # New:
+        # Component "focus.jitmeet.example.com" "client_proxy"
+        #    target_address = "focus@auth.jitmeet.example.com"
+        if grep -q "Component \"focus.$JVB_HOSTNAME\"" $PROSODY_HOST_CONFIG && ! grep "Component \"focus.$JVB_HOSTNAME\" \"client_proxy\"" $PROSODY_HOST_CONFIG ;then
+            sed -i "s/Component \"focus.$JVB_HOSTNAME\"/Component \"focus.$JVB_HOSTNAME\" \"client_proxy\"\n    target_address = \"$JICOFO_AUTH_USER@auth.$JVB_HOSTNAME\"/g" $PROSODY_HOST_CONFIG
+            PROSODY_CONFIG_PRESENT="false"
+        fi
+
+        # Old versions of jitsi-meet-prosody come with the extra plugin path commented out (https://github.com/jitsi/jitsi-meet/commit/e11d4d3101e5228bf956a69a9e8da73d0aee7949)
+        # Make sure it is uncommented, as it contains required modules.
+        if grep -q -- '--plugin_paths = { "/usr/share/jitsi-meet/prosody-plugins/" }' $PROSODY_HOST_CONFIG ;then
+            sed -i 's#--plugin_paths = { "/usr/share/jitsi-meet/prosody-plugins/" }#plugin_paths = { "/usr/share/jitsi-meet/prosody-plugins/" }#g' $PROSODY_HOST_CONFIG
+            PROSODY_CONFIG_PRESENT="false"
+        fi
+
+        # Make sure the focus@auth user's roster includes the proxy component (this is idempotent)
+        prosodyctl mod_roster_command subscribe focus.$JVB_HOSTNAME $JICOFO_AUTH_USER@auth.$JVB_HOSTNAME
+
         if [ ! -f /var/lib/prosody/$JVB_HOSTNAME.crt ]; then
             # prosodyctl takes care for the permissions
             # echo for using all default values

debian/jitsi-meet-prosody.postrm

@@ -31,7 +31,7 @@ case "$1" in
 
     purge)
         db_get jitsi-meet-prosody/jvb-hostname
-        JVB_HOSTNAME=$RET
+        JVB_HOSTNAME=$(echo "$RET" | xargs echo -n)
         if [ -n "$RET" ]; then
             rm -f /etc/prosody/conf.avail/$JVB_HOSTNAME.cfg.lua
             rm -f /etc/prosody/conf.d/$JVB_HOSTNAME.cfg.lua

debian/jitsi-meet-prosody.templates

@@ -24,11 +24,6 @@ Type: password
 _Description: Jicofo user password:
  The secret used to connect to xmpp server as jicofo user.
 
-Template: jicofo/jicofosecret
-Type: password
-_Description: Jicofo Component secret:
- The secret used to connect to xmpp server as component
-
 Template: jitsi-meet-prosody/turn-secret
 Type: string
 _Description: The turn server secret

debian/jitsi-meet-tokens.postinst

@@ -25,7 +25,7 @@ case "$1" in
         . /usr/share/debconf/confmodule
 
         db_get jitsi-meet-prosody/jvb-hostname
-        JVB_HOSTNAME="$RET"
+        JVB_HOSTNAME=$(echo "$RET" | xargs echo -n)
 
         db_get jitsi-meet-tokens/appid
         if [ "$RET" = "false" ] ; then

debian/jitsi-meet-turnserver.postinst

@@ -30,7 +30,7 @@ case "$1" in
             db_input critical jitsi-videobridge/jvb-hostname || true
             db_go
         fi
-        JVB_HOSTNAME="$RET"
+        JVB_HOSTNAME=$(echo "$RET" | xargs echo -n)
 
         TURN_CONFIG="/etc/turnserver.conf"
         NGINX_CONFIG="/etc/nginx/sites-available/$JVB_HOSTNAME.conf"
@@ -44,7 +44,7 @@ case "$1" in
 
         # detect dpkg-reconfigure, just delete old links
         db_get jitsi-meet-turnserver/jvb-hostname
-        JVB_HOSTNAME_OLD=$RET
+        JVB_HOSTNAME_OLD=$(echo "$RET" | xargs echo -n)
         if [ -n "$RET" ] && [ ! "$JVB_HOSTNAME_OLD" = "$JVB_HOSTNAME" ] ; then
             if [[ -f $TURN_CONFIG ]] && grep -q "jitsi-meet coturn config" "$TURN_CONFIG" ; then
                 rm -f $TURN_CONFIG

debian/jitsi-meet-web-config.postinst

@@ -30,13 +30,14 @@ case "$1" in
             db_set jitsi-videobridge/jvb-hostname "localhost"
             db_input critical jitsi-videobridge/jvb-hostname || true
             db_go
+            db_get jitsi-videobridge/jvb-hostname
         fi
-        JVB_HOSTNAME="$RET"
+        JVB_HOSTNAME=$(echo "$RET" | xargs echo -n)
 
         # detect dpkg-reconfigure
         RECONFIGURING="false"
         db_get jitsi-meet/jvb-hostname
-        JVB_HOSTNAME_OLD=$RET
+        JVB_HOSTNAME_OLD=$(echo "$RET" | xargs echo -n)
         if [ -n "$RET" ] && [ ! "$JVB_HOSTNAME_OLD" = "$JVB_HOSTNAME" ] ; then
             RECONFIGURING="true"
             rm -f /etc/jitsi/meet/$JVB_HOSTNAME_OLD-config.js
@@ -44,8 +45,9 @@ case "$1" in
 
         JVB_SERVE="false"
         # this detect only old installations
+        RET=""
         db_get jitsi-meet/jvb-serve || true
-        if [ -n "$RET" ] && [ "$RET" = "true" ] ; then
+        if [ "$RET" = "true" ] ; then
             JVB_SERVE="true"
         fi
 
@@ -67,23 +69,38 @@ case "$1" in
         if [ "$APACHE_INSTALL_CHECK" = "installed" ] || [ "$APACHE_INSTALL_CHECK" = "unpacked" ] ; then
             FORCE_APACHE="true"
         fi
+        # In case user enforces apache and if apache is available, unset nginx.
+        RET=""
+        db_get jitsi-meet/enforce_apache || RET="false"
+        if [ "$RET" = "true" ] && [ "$FORCE_APACHE" = "true" ]; then
+            FORCE_NGINX="false"
+        fi
 
         UPLOADED_CERT_CHOICE="I want to use my own certificate"
         # if first time config ask for certs, or if we are reconfiguring
         if [ -z "$JVB_HOSTNAME_OLD" ] || [ "$RECONFIGURING" = "true" ] ; then
+            RET=""
             db_get jitsi-meet/cert-choice
             CERT_CHOICE="$RET"
 
             if [ "$CERT_CHOICE" = "$UPLOADED_CERT_CHOICE" ] ; then
-                db_set jitsi-meet/cert-path-key "/etc/ssl/$JVB_HOSTNAME.key"
-                db_input critical jitsi-meet/cert-path-key || true
-                db_go
+                RET=""
                 db_get jitsi-meet/cert-path-key
+                if [ -z "$RET" ] ; then
+                    db_set jitsi-meet/cert-path-key "/etc/ssl/$JVB_HOSTNAME.key"
+                    db_input critical jitsi-meet/cert-path-key || true
+                    db_go
+                    db_get jitsi-meet/cert-path-key
+                fi
                 CERT_KEY="$RET"
-                db_set jitsi-meet/cert-path-crt "/etc/ssl/$JVB_HOSTNAME.crt"
-                db_input critical jitsi-meet/cert-path-crt || true
-                db_go
+                RET=""
                 db_get jitsi-meet/cert-path-crt
+                if [ -z "$RET" ] ; then
+                    db_set jitsi-meet/cert-path-crt "/etc/ssl/$JVB_HOSTNAME.crt"
+                    db_input critical jitsi-meet/cert-path-crt || true
+                    db_go
+                    db_get jitsi-meet/cert-path-crt
+                fi
                 CERT_CRT="$RET"
             else
                 # create self-signed certs
@@ -139,12 +156,15 @@ case "$1" in
                 # Removing this value will force nginx or apache to be locally configured
                 JVB_HOSTNAME_OLD=""
 
+                RET=""
                 db_get jitsi-meet/cert-choice
                 CERT_CHOICE="$RET"
                 # Fix certs on upgrade from jetty
                 if [ "$CERT_CHOICE" = "$UPLOADED_CERT_CHOICE" ] ; then
+                    RET=""
                     db_get jitsi-meet/cert-path-key
                     CERT_KEY="$RET"
+                    RET=""
                     db_get jitsi-meet/cert-path-crt
                     CERT_CRT="$RET"
                 else
@@ -198,7 +218,7 @@ case "$1" in
             # apache2 config
             if [ ! -f /etc/apache2/sites-available/$JVB_HOSTNAME.conf ] ; then
                 # when creating new config, make sure all needed modules are enabled
-                a2enmod rewrite ssl headers proxy_http include
+                a2enmod rewrite ssl headers proxy_http proxy_wstunnel include
                 cp /usr/share/jitsi-meet-web-config/jitsi-meet.example-apache /etc/apache2/sites-available/$JVB_HOSTNAME.conf
                 a2ensite $JVB_HOSTNAME.conf
                 sed -i "s/jitsi-meet.example.com/$JVB_HOSTNAME/g" /etc/apache2/sites-available/$JVB_HOSTNAME.conf

debian/jitsi-meet-web-config.postrm

@@ -33,7 +33,7 @@ case "$1" in
     ;;
     purge)
         db_get jitsi-meet/jvb-hostname
-        JVB_HOSTNAME=$RET
+        JVB_HOSTNAME=$(echo "$RET" | xargs echo -n)
         if [ -n "$RET" ]; then
             rm -f /etc/jitsi/meet/$JVB_HOSTNAME-config.js
             rm -f /etc/nginx/sites-available/$JVB_HOSTNAME.conf

debian/jitsi-meet-web.install

@@ -15,3 +15,5 @@ resources/robots.txt	/usr/share/jitsi-meet/
 resources/*.sh			/usr/share/jitsi-meet/scripts/
 pwa-worker.js			/usr/share/jitsi-meet/
 manifest.json			/usr/share/jitsi-meet/
+resources/load-test/*.html	/usr/share/jitsi-meet/load-test/
+resources/load-test/libs	/usr/share/jitsi-meet/load-test/

doc/debian/jitsi-meet-prosody/prosody.cfg.lua-jvb.example

@@ -3,12 +3,11 @@ plugin_paths = { "/usr/share/jitsi-meet/prosody-plugins/" }
 -- domain mapper options, must at least have domain base set to use the mapper
 muc_mapper_domain_base = "jitmeet.example.com";
 
-turncredentials_secret = "__turnSecret__";
-
-turncredentials = {
-  { type = "stun", host = "jitmeet.example.com", port = "3478" },
-  { type = "turn", host = "jitmeet.example.com", port = "3478", transport = "udp" },
-  { type = "turns", host = "jitmeet.example.com", port = "5349", transport = "tcp" }
+external_service_secret = "__turnSecret__";
+external_services = {
+     { type = "stun", host = "jitmeet.example.com", port = 3478 },
+     { type = "turn", host = "jitmeet.example.com", port = 3478, transport = "udp", secret = true, ttl = 86400, algorithm = "turn" },
+     { type = "turns", host = "jitmeet.example.com", port = 5349, transport = "tcp", secret = true, ttl = 86400, algorithm = "turn" }
 };
 
 cross_domain_bosh = false;
@@ -17,48 +16,48 @@ consider_bosh_secure = true;
 
 -- https://ssl-config.mozilla.org/#server=haproxy&version=2.1&config=intermediate&openssl=1.1.0g&guideline=5.4
 ssl = {
-  protocol = "tlsv1_2+";
-  ciphers = "ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384"
+    protocol = "tlsv1_2+";
+    ciphers = "ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384"
 }
 
 VirtualHost "jitmeet.example.com"
-        -- enabled = false -- Remove this line to enable this host
-        authentication = "anonymous"
-        -- Properties below are modified by jitsi-meet-tokens package config
-        -- and authentication above is switched to "token"
-        --app_id="example_app_id"
-        --app_secret="example_app_secret"
-        -- Assign this host a certificate for TLS, otherwise it would use the one
-        -- set in the global section (if any).
-        -- Note that old-style SSL on port 5223 only supports one certificate, and will always
-        -- use the global one.
-        ssl = {
-                key = "/etc/prosody/certs/jitmeet.example.com.key";
-                certificate = "/etc/prosody/certs/jitmeet.example.com.crt";
-        }
-        speakerstats_component = "speakerstats.jitmeet.example.com"
-        conference_duration_component = "conferenceduration.jitmeet.example.com"
-        -- we need bosh
-        modules_enabled = {
-            "bosh";
-            "pubsub";
-            "ping"; -- Enable mod_ping
-            "speakerstats";
-            "turncredentials";
-            "conference_duration";
-            "muc_lobby_rooms";
-        }
-        c2s_require_encryption = false
-        lobby_muc = "lobby.jitmeet.example.com"
-        main_muc = "conference.jitmeet.example.com"
-        -- muc_lobby_whitelist = { "recorder.jitmeet.example.com" } -- Here we can whitelist jibri to enter lobby enabled rooms
+    -- enabled = false -- Remove this line to enable this host
+    authentication = "anonymous"
+    -- Properties below are modified by jitsi-meet-tokens package config
+    -- and authentication above is switched to "token"
+    --app_id="example_app_id"
+    --app_secret="example_app_secret"
+    -- Assign this host a certificate for TLS, otherwise it would use the one
+    -- set in the global section (if any).
+    -- Note that old-style SSL on port 5223 only supports one certificate, and will always
+    -- use the global one.
+    ssl = {
+        key = "/etc/prosody/certs/jitmeet.example.com.key";
+        certificate = "/etc/prosody/certs/jitmeet.example.com.crt";
+    }
+    speakerstats_component = "speakerstats.jitmeet.example.com"
+    conference_duration_component = "conferenceduration.jitmeet.example.com"
+    -- we need bosh
+    modules_enabled = {
+        "bosh";
+        "pubsub";
+        "ping"; -- Enable mod_ping
+        "speakerstats";
+        "external_services";
+        "conference_duration";
+        "muc_lobby_rooms";
+    }
+    c2s_require_encryption = false
+    lobby_muc = "lobby.jitmeet.example.com"
+    main_muc = "conference.jitmeet.example.com"
+    -- muc_lobby_whitelist = { "recorder.jitmeet.example.com" } -- Here we can whitelist jibri to enter lobby enabled rooms
 
 Component "conference.jitmeet.example.com" "muc"
     storage = "memory"
     modules_enabled = {
         "muc_meeting_id";
         "muc_domain_mapper";
-        -- "token_verification";
+        --"token_verification";
     }
     admins = { "focusUser@auth.jitmeet.example.com" }
     muc_room_locking = false
@@ -68,17 +67,18 @@ Component "conference.jitmeet.example.com" "muc"
 Component "internal.auth.jitmeet.example.com" "muc"
     storage = "memory"
     modules_enabled = {
-      "ping";
+        "ping";
     }
     admins = { "focusUser@auth.jitmeet.example.com", "jvb@auth.jitmeet.example.com" }
     muc_room_locking = false
     muc_room_default_public_jids = true
 
 VirtualHost "auth.jitmeet.example.com"
-    authentication = "internal_plain"
+    authentication = "internal_hashed"
 
-Component "focus.jitmeet.example.com"
-    component_secret = "focusSecret"
+-- Proxy to jicofo's user JID, so that it doesn't have to register as a component.
+Component "focus.jitmeet.example.com" "client_proxy"
+    target_address = "focusUser@auth.jitmeet.example.com"
 
 Component "speakerstats.jitmeet.example.com" "speakerstats_component"
     muc_component = "conference.jitmeet.example.com"

doc/debian/jitsi-meet/jitsi-meet.example

@@ -1,19 +1,23 @@
 server_names_hash_bucket_size 64;
 
+types {
+# nginx's default mime.types doesn't include a mapping for wasm
+    application/wasm     wasm;
+}
 server {
     listen 80;
     listen [::]:80;
     server_name jitsi-meet.example.com;
 
     location ^~ /.well-known/acme-challenge/ {
-       default_type "text/plain";
-       root         /usr/share/jitsi-meet;
+        default_type "text/plain";
+        root         /usr/share/jitsi-meet;
     }
     location = /.well-known/acme-challenge/ {
-       return 404;
+        return 404;
     }
     location / {
-       return 301 https://$host$request_uri;
+        return 301 https://$host$request_uri;
     }
 }
 server {
@@ -21,7 +25,7 @@ server {
     listen [::]:443 ssl;
     server_name jitsi-meet.example.com;
 
-# Mozilla Guideline v5.4, nginx 1.17.7, OpenSSL 1.1.1d, intermediate configuration
+    # Mozilla Guideline v5.4, nginx 1.17.7, OpenSSL 1.1.1d, intermediate configuration
     ssl_protocols TLSv1.2 TLSv1.3;
     ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
     ssl_prefer_server_ciphers off;
@@ -58,7 +62,7 @@ server {
         alias /usr/share/jitsi-meet/libs/external_api.min.js;
     }
 
-    #ensure all static content can always be found first
+    # ensure all static content can always be found first
     location ~ ^/(libs|css|static|images|fonts|lang|sounds|connection_optimization|.well-known)/(.*)$
     {
         add_header 'Access-Control-Allow-Origin' '*';
@@ -66,13 +70,13 @@ server {
 
         # cache all versioned files
         if ($arg_v) {
-          expires 1y;
+            expires 1y;
         }
     }
 
     # BOSH
     location = /http-bind {
-        proxy_pass      http://localhost:5280/http-bind;
+        proxy_pass       http://localhost:5280/http-bind;
         proxy_set_header X-Forwarded-For $remote_addr;
         proxy_set_header Host $http_host;
     }
@@ -89,13 +93,22 @@ server {
 
     # colibri (JVB) websockets for jvb1
     location ~ ^/colibri-ws/default-id/(.*) {
-       proxy_pass http://127.0.0.1:9090/colibri-ws/default-id/$1$is_args$args;
-       proxy_http_version 1.1;
-       proxy_set_header Upgrade $http_upgrade;
-       proxy_set_header Connection "upgrade";
-       tcp_nodelay on;
+        proxy_pass http://127.0.0.1:9090/colibri-ws/default-id/$1$is_args$args;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        tcp_nodelay on;
     }
 
+    # load test minimal client, uncomment when used
+    #location ~ ^/_load-test/([^/?&:'"]+)$ {
+    #    rewrite ^/_load-test/(.*)$ /load-test/index.html break;
+    #}
+    #location ~ ^/_load-test/libs/(.*)$ {
+    #    add_header 'Access-Control-Allow-Origin' '*';
+    #    alias /usr/share/jitsi-meet/load-test/libs/$1;
+    #}
+
     location ~ ^/([^/?&:'"]+)$ {
         try_files $uri @root_path;
     }
@@ -106,13 +119,13 @@ server {
 
     location ~ ^/([^/?&:'"]+)/config.js$
     {
-       set $subdomain "$1.";
-       set $subdir "$1/";
+        set $subdomain "$1.";
+        set $subdir "$1/";
 
-       alias /etc/jitsi/meet/jitsi-meet.example.com-config.js;
+        alias /etc/jitsi/meet/jitsi-meet.example.com-config.js;
     }
 
-    #Anything that didn't match above, and isn't a real file, assume it's a room name and redirect to /
+    # Anything that didn't match above, and isn't a real file, assume it's a room name and redirect to /
     location ~ ^/([^/?&:'"]+)/(.*)$ {
         set $subdomain "$1.";
         set $subdir "$1/";

doc/debian/jitsi-meet/jitsi-meet.example-apache

@@ -2,56 +2,56 @@
 <VirtualHost *:80>
     ServerName jitsi-meet.example.com
     Redirect permanent / https://jitsi-meet.example.com/
-    RewriteEngine On
-    RewriteCond %{HTTPS} off
-    RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
 </VirtualHost>
 
 <VirtualHost *:443>
+    ServerName jitsi-meet.example.com
 
-  ServerName jitsi-meet.example.com
+    # enable HTTP/2, if available
+    Protocols h2 http/1.1
 
-  # enable HTTP/2, if available
-  Protocols h2 http/1.1
+    SSLEngine on
+    SSLProxyEngine on
+    SSLCertificateFile /etc/jitsi/meet/jitsi-meet.example.com.crt
+    SSLCertificateKeyFile /etc/jitsi/meet/jitsi-meet.example.com.key
 
-  SSLEngine on
-  SSLProxyEngine on
-  SSLCertificateFile /etc/jitsi/meet/jitsi-meet.example.com.crt
-  SSLCertificateKeyFile /etc/jitsi/meet/jitsi-meet.example.com.key
+    Header always set Strict-Transport-Security "max-age=63072000"
 
-  Header always set Strict-Transport-Security "max-age=63072000"
+    DocumentRoot "/usr/share/jitsi-meet"
+    <Directory "/usr/share/jitsi-meet">
+        Options Indexes MultiViews Includes FollowSymLinks
+        AddOutputFilter Includes html
+        AllowOverride All
+        Order allow,deny
+        Allow from all
+    </Directory>
 
-  DocumentRoot "/usr/share/jitsi-meet"
-  <Directory "/usr/share/jitsi-meet">
-    Options Indexes MultiViews Includes FollowSymLinks
-    AddOutputFilter Includes html
-    AllowOverride All
-    Order allow,deny
-    Allow from all
-  </Directory>
+    ErrorDocument 404 /static/404.html
 
-  ErrorDocument 404 /static/404.html
+    Alias "/config.js" "/etc/jitsi/meet/jitsi-meet.example.com-config.js"
+    <Location /config.js>
+        Require all granted
+    </Location>
 
-  Alias "/config.js" "/etc/jitsi/meet/jitsi-meet.example.com-config.js"
-  <Location /config.js>
-    Require all granted
-  </Location>
+    Alias "/external_api.js" "/usr/share/jitsi-meet/libs/external_api.min.js"
+    <Location /external_api.js>
+        Require all granted
+    </Location>
 
-  Alias "/external_api.js" "/usr/share/jitsi-meet/libs/external_api.min.js"
-  <Location /external_api.js>
-    Require all granted
-  </Location>
+    ProxyPreserveHost on
+    ProxyPass /http-bind http://localhost:5280/http-bind
+    ProxyPassReverse /http-bind http://localhost:5280/http-bind
+    ProxyPass /xmpp-websocket ws://localhost:5280/xmpp-websocket
+    ProxyPassReverse /xmpp-websocket ws://localhost:5280/xmpp-websocket
+    ProxyPass /colibri-ws/default-id ws://localhost:9090/colibri-ws/default-id
+    ProxyPassReverse /colibri-ws/default-id ws://localhost:9090/colibri-ws/default-id
 
-  ProxyPreserveHost on
-  ProxyPass /http-bind http://localhost:5280/http-bind/
-  ProxyPassReverse /http-bind http://localhost:5280/http-bind/
-
-  RewriteEngine on
-  RewriteRule ^/([a-zA-Z0-9]+)$ /index.html
+    RewriteEngine on
+    RewriteRule ^/([a-zA-Z0-9]+)$ /index.html
 </VirtualHost>
 
 # Mozilla Guideline v5.4, Apache 2.4.41, OpenSSL 1.1.1d, intermediate configuration, no OCSP
-SSLProtocol             all -SSLv3 -TLSv1 -TLSv1.1
-SSLCipherSuite          ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384
-SSLHonorCipherOrder     off
-SSLSessionTickets       off
+SSLProtocol         all -SSLv3 -TLSv1 -TLSv1.1
+SSLCipherSuite      ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384
+SSLHonorCipherOrder off
+SSLSessionTickets   off

doc/example-config-files/multidomain/jitsi.example.com.multidomain.example

@@ -10,7 +10,6 @@ server {
     index index.html;
     set $prefix "";
 
-
     # BOSH
     location /http-bind {
         proxy_pass      http://localhost:5280/http-bind;
@@ -44,13 +43,13 @@ server {
 
     location ~ ^/([^/?&:'"]+)/config.js$
     {
-       set $subdomain "$1.";
-       set $subdir "$1/";
+        set $subdomain "$1.";
+        set $subdir "$1/";
 
-       alias /etc/jitsi/meet/{{jitsi_meet_domain_name}}-config.js;
+        alias /etc/jitsi/meet/{{jitsi_meet_domain_name}}-config.js;
     }
 
-    #Anything that didn't match above, and isn't a real file, assume it's a room name and redirect to /
+    # Anything that didn't match above, and isn't a real file, assume it's a room name and redirect to /
     location ~ ^/([^/?&:'"]+)/(.*)$ {
         set $subdomain "$1.";
         set $subdir "$1/";

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

@@ -34,55 +34,56 @@ component_ports = { 5347 }
 -- Documentation on modules can be found at: http://prosody.im/doc/modules
 modules_enabled = {
 
-	-- Generally required
-		"roster"; -- Allow users to have a roster. Recommended ;)
-		"saslauth"; -- Authentication for clients and servers. Recommended if you want to log in.
-		"tls"; -- Add support for secure TLS on c2s/s2s connections
-		"dialback"; -- s2s dialback support
-		"disco"; -- Service discovery
-		"posix"; -- POSIX functionality, sends server to background, enables syslog, etc.
+    -- Generally required
+    "roster"; -- Allow users to have a roster. Recommended ;)
+    "saslauth"; -- Authentication for clients and servers. Recommended if you want to log in.
+    "tls"; -- Add support for secure TLS on c2s/s2s connections
+    "dialback"; -- s2s dialback support
+    "disco"; -- Service discovery
+    "posix"; -- POSIX functionality, sends server to background, enables syslog, etc.
 
-	-- Not essential, but recommended
-		"private"; -- Private XML storage (for room bookmarks, etc.)
-		"vcard"; -- Allow users to set vCards
+    -- Not essential, but recommended
+    "private"; -- Private XML storage (for room bookmarks, etc.)
+    "vcard"; -- Allow users to set vCards
 
-	-- These are commented by default as they have a performance impact
-		--"privacy"; -- Support privacy lists
-		"compression"; -- Stream compression (requires the lua-zlib package installed)
+    -- These are commented by default as they have a performance impact
+    --"privacy"; -- Support privacy lists
+    "compression"; -- Stream compression (requires the lua-zlib package installed)
 
-	-- Nice to have
-		"version"; -- Replies to server version requests
-		"uptime"; -- Report how long server has been running
-		"time"; -- Let others know the time here on this server
-		"ping"; -- Replies to XMPP pings with pongs
-		"pep"; -- Enables users to publish their mood, activity, playing music and more
-		"register"; -- Allow users to register on this server using a client and change passwords
+    -- Nice to have
+    "version"; -- Replies to server version requests
+    "uptime"; -- Report how long server has been running
+    "time"; -- Let others know the time here on this server
+    "ping"; -- Replies to XMPP pings with pongs
+    "pep"; -- Enables users to publish their mood, activity, playing music and more
+    "register"; -- Allow users to register on this server using a client and change passwords
 
-	-- Admin interfaces
-		"admin_adhoc"; -- Allows administration via an XMPP client that supports ad-hoc commands
-		--"admin_telnet"; -- Opens telnet console interface on localhost port 5582
+    -- Admin interfaces
+    "admin_adhoc"; -- Allows administration via an XMPP client that supports ad-hoc commands
+    --"admin_telnet"; -- Opens telnet console interface on localhost port 5582
 
-	-- HTTP modules
-		"bosh"; -- Enable BOSH clients, aka "Jabber over HTTP"
-		--"http_files"; -- Serve static files from a directory over HTTP
+    -- HTTP modules
+    "bosh"; -- Enable BOSH clients, aka "Jabber over HTTP"
+    --"http_files"; -- Serve static files from a directory over HTTP
 
-	-- Other specific functionality
-		--"groups"; -- Shared roster support
-		--"announce"; -- Send announcement to all online users
-		--"welcome"; -- Welcome users who register accounts
-		--"watchregistrations"; -- Alert admins of registrations
-		--"motd"; -- Send a message to users when they log in
-		--"legacyauth"; -- Legacy authentication. Only used by some old clients and bots.
-	-- jitsi
-		"smacks";
-		"carbons";
-		"mam";
-		"lastactivity";
-		"offline";
-		"pubsub";
-		"adhoc";
-		"websocket";
-		"http_altconnect";
+    -- Other specific functionality
+    --"groups"; -- Shared roster support
+    --"announce"; -- Send announcement to all online users
+    --"welcome"; -- Welcome users who register accounts
+    --"watchregistrations"; -- Alert admins of registrations
+    --"motd"; -- Send a message to users when they log in
+    --"legacyauth"; -- Legacy authentication. Only used by some old clients and bots.
+
+    -- jitsi
+    "smacks";
+    "carbons";
+    "mam";
+    "lastactivity";
+    "offline";
+    "pubsub";
+    "adhoc";
+    "websocket";
+    "http_altconnect";
 }
 
 -- domain mapper options, must at least have domain base set to use the mapper
@@ -91,9 +92,9 @@ muc_mapper_domain_base = "jitsi.example.com";
 -- These modules are auto-loaded, but should you want
 -- to disable them then uncomment them here:
 modules_disabled = {
-	-- "offline"; -- Store offline messages
-	-- "c2s"; -- Handle client connections
-	-- "s2s"; -- Handle server-to-server connections
+    --"offline"; -- Store offline messages
+    --"c2s"; -- Handle client connections
+    --"s2s"; -- Handle server-to-server connections
 }
 
 -- Disable account creation by default, for security
@@ -110,7 +111,7 @@ ssl = {
 -- Force clients to use encrypted connections? This option will
 -- prevent clients from authenticating unless they are using encryption.
 
--- c2s_require_encryption = true
+--c2s_require_encryption = true
 
 -- Force certificate authentication for server-to-server connections?
 -- This provides ideal security, but requires servers you communicate
@@ -118,7 +119,7 @@ ssl = {
 -- NOTE: Your version of LuaSec must support certificate verification!
 -- For more information see http://prosody.im/doc/s2s#security
 
--- s2s_secure_auth = false
+--s2s_secure_auth = false
 
 -- Many servers don't support encryption or have invalid or self-signed
 -- certificates. You can list domains here that will not be required to
@@ -141,7 +142,6 @@ pidfile = "/var/run/prosody/prosody.pid"
 -- server please see http://prosody.im/doc/modules/mod_auth_internal_hashed
 -- for information about using the hashed backend.
 
--- authentication = "internal_plain"
 authentication = "internal_hashed"
 
 -- Select the storage backend to use. By default Prosody uses flat files
@@ -159,9 +159,9 @@ authentication = "internal_hashed"
 -- Logging configuration
 -- For advanced logging see http://prosody.im/doc/logging
 log = {
-	info = "/var/log/prosody/prosody.log"; -- Change 'info' to 'debug' for verbose logging
-	error = "/var/log/prosody/prosody.err";
-	"*syslog";
+    info = "/var/log/prosody/prosody.log"; -- Change 'info' to 'debug' for verbose logging
+    error = "/var/log/prosody/prosody.err";
+    "*syslog";
 }
 
 ----------- Virtual hosts -----------
@@ -171,25 +171,25 @@ log = {
 --VirtualHost "localhost"
 
 VirtualHost "jitsi.example.com"
-	-- enabled = false -- Remove this line to enable this host
-	authentication = "anonymous"
-	-- Assign this host a certificate for TLS, otherwise it would use the one
-	-- set in the global section (if any).
-	-- Note that old-style SSL on port 5223 only supports one certificate, and will always
-	-- use the global one.
-	ssl = {
-		key = "/var/lib/prosody/jitsi.example.com.key";
-		certificate = "/var/lib/prosody/jitsi.example.com.crt";
-	}
+    -- enabled = false -- Remove this line to enable this host
+    authentication = "anonymous"
+    -- Assign this host a certificate for TLS, otherwise it would use the one
+    -- set in the global section (if any).
+    -- Note that old-style SSL on port 5223 only supports one certificate, and will always
+    -- use the global one.
+    ssl = {
+        key = "/var/lib/prosody/jitsi.example.com.key";
+        certificate = "/var/lib/prosody/jitsi.example.com.crt";
+    }
 
-	c2s_require_encryption = false
+    c2s_require_encryption = false
 
 VirtualHost "auth.jitsi.example.com"
-	ssl = {
-		key = "/var/lib/prosody/auth.jitsi.example.com.key";
-		certificate = "/var/lib/prosody/auth.jitsi.example.com.crt";
-	}
-	authentication = "internal_plain"
+    ssl = {
+        key = "/var/lib/prosody/auth.jitsi.example.com.key";
+        certificate = "/var/lib/prosody/auth.jitsi.example.com.crt";
+    }
+    authentication = "internal_hashed"
 
 ------ Components ------
 -- You can specify components to add hosts that provide special services,
@@ -209,7 +209,7 @@ VirtualHost "auth.jitsi.example.com"
 -- see: http://prosody.im/doc/components#adding_an_external_component
 --
 --Component "gateway.example.com"
---	component_secret = "password"
+--    component_secret = "password"
 
 Component "conference.jitsi.example.com" "muc"
     modules_enabled = { "muc_domain_mapper" }

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

@@ -34,63 +34,64 @@ component_ports = { 5347 }
 -- Documentation on modules can be found at: http://prosody.im/doc/modules
 modules_enabled = {
 
-	-- Generally required
-		"roster"; -- Allow users to have a roster. Recommended ;)
-		"saslauth"; -- Authentication for clients and servers. Recommended if you want to log in.
-		"tls"; -- Add support for secure TLS on c2s/s2s connections
-		"dialback"; -- s2s dialback support
-		"disco"; -- Service discovery
-		"posix"; -- POSIX functionality, sends server to background, enables syslog, etc.
+    -- Generally required
+    "roster"; -- Allow users to have a roster. Recommended ;)
+    "saslauth"; -- Authentication for clients and servers. Recommended if you want to log in.
+    "tls"; -- Add support for secure TLS on c2s/s2s connections
+    "dialback"; -- s2s dialback support
+    "disco"; -- Service discovery
+    "posix"; -- POSIX functionality, sends server to background, enables syslog, etc.
 
-	-- Not essential, but recommended
-		"private"; -- Private XML storage (for room bookmarks, etc.)
-		"vcard"; -- Allow users to set vCards
+    -- Not essential, but recommended
+    "private"; -- Private XML storage (for room bookmarks, etc.)
+    "vcard"; -- Allow users to set vCards
 
-	-- These are commented by default as they have a performance impact
-		--"privacy"; -- Support privacy lists
-		"compression"; -- Stream compression (requires the lua-zlib package installed)
+    -- These are commented by default as they have a performance impact
+    --"privacy"; -- Support privacy lists
+    "compression"; -- Stream compression (requires the lua-zlib package installed)
 
-	-- Nice to have
-		"version"; -- Replies to server version requests
-		"uptime"; -- Report how long server has been running
-		"time"; -- Let others know the time here on this server
-		"ping"; -- Replies to XMPP pings with pongs
-		"pep"; -- Enables users to publish their mood, activity, playing music and more
-		"register"; -- Allow users to register on this server using a client and change passwords
+    -- Nice to have
+    "version"; -- Replies to server version requests
+    "uptime"; -- Report how long server has been running
+    "time"; -- Let others know the time here on this server
+    "ping"; -- Replies to XMPP pings with pongs
+    "pep"; -- Enables users to publish their mood, activity, playing music and more
+    "register"; -- Allow users to register on this server using a client and change passwords
 
-	-- Admin interfaces
-		"admin_adhoc"; -- Allows administration via an XMPP client that supports ad-hoc commands
-		--"admin_telnet"; -- Opens telnet console interface on localhost port 5582
+    -- Admin interfaces
+    "admin_adhoc"; -- Allows administration via an XMPP client that supports ad-hoc commands
+    --"admin_telnet"; -- Opens telnet console interface on localhost port 5582
 
-	-- HTTP modules
-		"bosh"; -- Enable BOSH clients, aka "Jabber over HTTP"
-		--"http_files"; -- Serve static files from a directory over HTTP
+    -- HTTP modules
+    "bosh"; -- Enable BOSH clients, aka "Jabber over HTTP"
+    --"http_files"; -- Serve static files from a directory over HTTP
 
-	-- Other specific functionality
-		--"groups"; -- Shared roster support
-		--"announce"; -- Send announcement to all online users
-		--"welcome"; -- Welcome users who register accounts
-		--"watchregistrations"; -- Alert admins of registrations
-		--"motd"; -- Send a message to users when they log in
-		--"legacyauth"; -- Legacy authentication. Only used by some old clients and bots.
-	-- jitsi
-		"smacks";
-		"carbons";
-		"mam";
-		"lastactivity";
-		"offline";
-		"pubsub";
-		"adhoc";
-		"websocket";
-		"http_altconnect";
+    -- Other specific functionality
+    --"groups"; -- Shared roster support
+    --"announce"; -- Send announcement to all online users
+    --"welcome"; -- Welcome users who register accounts
+    --"watchregistrations"; -- Alert admins of registrations
+    --"motd"; -- Send a message to users when they log in
+    --"legacyauth"; -- Legacy authentication. Only used by some old clients and bots.
+
+    -- jitsi
+    "smacks";
+    "carbons";
+    "mam";
+    "lastactivity";
+    "offline";
+    "pubsub";
+    "adhoc";
+    "websocket";
+    "http_altconnect";
 }
 
 -- These modules are auto-loaded, but should you want
 -- to disable them then uncomment them here:
 modules_disabled = {
-	-- "offline"; -- Store offline messages
-	-- "c2s"; -- Handle client connections
-	-- "s2s"; -- Handle server-to-server connections
+    --"offline"; -- Store offline messages
+    --"c2s"; -- Handle client connections
+    --"s2s"; -- Handle server-to-server connections
 }
 
 -- Disable account creation by default, for security
@@ -107,7 +108,7 @@ ssl = {
 -- Force clients to use encrypted connections? This option will
 -- prevent clients from authenticating unless they are using encryption.
 
--- c2s_require_encryption = true
+--c2s_require_encryption = true
 
 -- Force certificate authentication for server-to-server connections?
 -- This provides ideal security, but requires servers you communicate
@@ -115,7 +116,7 @@ ssl = {
 -- NOTE: Your version of LuaSec must support certificate verification!
 -- For more information see http://prosody.im/doc/s2s#security
 
--- s2s_secure_auth = false
+--s2s_secure_auth = false
 
 -- Many servers don't support encryption or have invalid or self-signed
 -- certificates. You can list domains here that will not be required to
@@ -138,7 +139,6 @@ pidfile = "/var/run/prosody/prosody.pid"
 -- server please see http://prosody.im/doc/modules/mod_auth_internal_hashed
 -- for information about using the hashed backend.
 
--- authentication = "internal_plain"
 authentication = "internal_hashed"
 
 -- Select the storage backend to use. By default Prosody uses flat files
@@ -156,9 +156,9 @@ authentication = "internal_hashed"
 -- Logging configuration
 -- For advanced logging see http://prosody.im/doc/logging
 log = {
-	info = "/var/log/prosody/prosody.log"; -- Change 'info' to 'debug' for verbose logging
-	error = "/var/log/prosody/prosody.err";
-	"*syslog";
+    info = "/var/log/prosody/prosody.log"; -- Change 'info' to 'debug' for verbose logging
+    error = "/var/log/prosody/prosody.err";
+    "*syslog";
 }
 
 ----------- Virtual hosts -----------
@@ -168,25 +168,25 @@ log = {
 --VirtualHost "localhost"
 
 VirtualHost "jitsi.example.com"
-	-- enabled = false -- Remove this line to enable this host
-	authentication = "anonymous"
-	-- Assign this host a certificate for TLS, otherwise it would use the one
-	-- set in the global section (if any).
-	-- Note that old-style SSL on port 5223 only supports one certificate, and will always
-	-- use the global one.
-	ssl = {
-		key = "/var/lib/prosody/jitsi.example.com.key";
-		certificate = "/var/lib/prosody/jitsi.example.com.crt";
-	}
+    -- enabled = false -- Remove this line to enable this host
+    authentication = "anonymous"
+    -- Assign this host a certificate for TLS, otherwise it would use the one
+    -- set in the global section (if any).
+    -- Note that old-style SSL on port 5223 only supports one certificate, and will always
+    -- use the global one.
+    ssl = {
+        key = "/var/lib/prosody/jitsi.example.com.key";
+        certificate = "/var/lib/prosody/jitsi.example.com.crt";
+    }
 
-	c2s_require_encryption = false
+    c2s_require_encryption = false
 
 VirtualHost "auth.jitsi.example.com"
-	ssl = {
-		key = "/var/lib/prosody/auth.jitsi.example.com.key";
-		certificate = "/var/lib/prosody/auth.jitsi.example.com.crt";
-	}
-	authentication = "internal_plain"
+    ssl = {
+        key = "/var/lib/prosody/auth.jitsi.example.com.key";
+        certificate = "/var/lib/prosody/auth.jitsi.example.com.crt";
+    }
+    authentication = "internal_hashed"
 
 ------ Components ------
 -- You can specify components to add hosts that provide special services,
@@ -206,7 +206,7 @@ VirtualHost "auth.jitsi.example.com"
 -- see: http://prosody.im/doc/components#adding_an_external_component
 --
 --Component "gateway.example.com"
---	component_secret = "password"
+--    component_secret = "password"
 
 Component "conference.jitsi.example.com" "muc"
 

doc/example-config-files/scalable/jicofo_config.scalable.example

@@ -24,4 +24,9 @@ JICOFO_AUTH_PASSWORD=$JICOFO_PASSWORD
 JICOFO_OPTS=""
 
 # adds java system props that are passed to jicofo (default are for home and logging config file)
-JAVA_SYS_PROPS="-Dnet.java.sip.communicator.SC_HOME_DIR_LOCATION=/etc/jitsi -Dnet.java.sip.communicator.SC_HOME_DIR_NAME=jicofo -Dnet.java.sip.communicator.SC_LOG_DIR_LOCATION=/var/log/jitsi -Djava.util.logging.config.file=/etc/jitsi/jicofo/logging.properties"
+JAVA_SYS_PROPS=" \
+    -Dnet.java.sip.communicator.SC_HOME_DIR_LOCATION=/etc/jitsi \
+    -Dnet.java.sip.communicator.SC_HOME_DIR_NAME=jicofo \
+    -Dnet.java.sip.communicator.SC_LOG_DIR_LOCATION=/var/log/jitsi \
+    -Djava.util.logging.config.file=/etc/jitsi/jicofo/logging.properties \
+"

doc/example-config-files/scalable/meet.example.com.cfg.lua.scalable.example

@@ -6,48 +6,48 @@ muc_mapper_domain_base = "meet.example.com";
 turncredentials_secret = "turncredentials_secret_test";
 
 turncredentials = {
-  { type = "stun", host = "meet.example.com", port = "443" },
-  { type = "turn", host = "meet.example.com", port = "443", transport = "udp" },
-  { type = "turns", host = "meet.example.com", port = "443", transport = "tcp" }
+    { type = "stun", host = "meet.example.com", port = "443" },
+    { type = "turn", host = "meet.example.com", port = "443", transport = "udp" },
+    { type = "turns", host = "meet.example.com", port = "443", transport = "tcp" }
 };
 
 cross_domain_bosh = false;
 consider_bosh_secure = true;
 
 VirtualHost "meet.example.com"
-        -- enabled = false -- Remove this line to enable this host
-        authentication = "anonymous"
-        -- Properties below are modified by jitsi-meet-tokens package config
-        -- and authentication above is switched to "token"
-        --app_id="example_app_id"
-        --app_secret="example_app_secret"
-        -- Assign this host a certificate for TLS, otherwise it would use the one
-        -- set in the global section (if any).
-        -- Note that old-style SSL on port 5223 only supports one certificate, and will always
-        -- use the global one.
-        ssl = {
-                key = "/etc/prosody/certs/meet.example.com.key";
-                certificate = "/etc/prosody/certs/meet.example.com.crt";
-        }
-        speakerstats_component = "speakerstats.meet.example.com"
-        conference_duration_component = "conferenceduration.meet.example.com"
-        -- we need bosh
-        modules_enabled = {
-            "bosh";
-            "pubsub";
-            "ping"; -- Enable mod_ping
-            "speakerstats";
-            "turncredentials";
-            "conference_duration";
-        }
-        c2s_require_encryption = false
+    -- enabled = false -- Remove this line to enable this host
+    authentication = "anonymous"
+    -- Properties below are modified by jitsi-meet-tokens package config
+    -- and authentication above is switched to "token"
+    --app_id="example_app_id"
+    --app_secret="example_app_secret"
+    -- Assign this host a certificate for TLS, otherwise it would use the one
+    -- set in the global section (if any).
+    -- Note that old-style SSL on port 5223 only supports one certificate, and will always
+    -- use the global one.
+    ssl = {
+        key = "/etc/prosody/certs/meet.example.com.key";
+        certificate = "/etc/prosody/certs/meet.example.com.crt";
+    }
+    speakerstats_component = "speakerstats.meet.example.com"
+    conference_duration_component = "conferenceduration.meet.example.com"
+    -- we need bosh
+    modules_enabled = {
+        "bosh";
+        "pubsub";
+        "ping"; -- Enable mod_ping
+        "speakerstats";
+        "turncredentials";
+        "conference_duration";
+    }
+    c2s_require_encryption = false
 
 Component "conference.meet.example.com" "muc"
     storage = "memory"
     modules_enabled = {
         "muc_meeting_id";
         "muc_domain_mapper";
-        -- "token_verification";
+        --"token_verification";
     }
     admins = { "focus@auth.meet.example.com" }
     muc_room_locking = false
@@ -58,7 +58,7 @@ Component "conference.meet.example.com" "muc"
 Component "internal.auth.meet.example.com" "muc"
     storage = "memory"
     modules_enabled = {
-      "ping";
+        "ping";
     }
     admins = { "focus@auth.meet.example.com", "jvb@auth.meet.example.com" }
 
@@ -67,7 +67,7 @@ VirtualHost "auth.meet.example.com"
         key = "/etc/prosody/certs/auth.meet.example.com.key";
         certificate = "/etc/prosody/certs/auth.meet.example.com.crt";
     }
-    authentication = "internal_plain"
+    authentication = "internal_hashed"
 
 Component "focus.meet.example.com"
     component_secret = "jicofo_secret_test"
@@ -75,7 +75,6 @@ Component "focus.meet.example.com"
 Component "speakerstats.meet.example.com" "speakerstats_component"
     muc_component = "conference.meet.example.com"
 
-
 Component "conferenceduration.meet.example.com" "conference_duration_component"
     muc_component = "conference.meet.example.com"
 
@@ -84,5 +83,5 @@ VirtualHost "recorder.meet.example.com"
     modules_enabled = {
         "ping";
     }
-    authentication = "internal_plain"
+    authentication = "internal_hashed"
     c2s_require_encryption = false

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

@@ -13,58 +13,58 @@ network_backend = "epoll"
 -- Documentation for bundled modules can be found at: https://prosody.im/doc/modules
 modules_enabled = {
 
-	-- Generally required
-		"roster"; -- Allow users to have a roster. Recommended ;)
-		"saslauth"; -- Authentication for clients and servers. Recommended if you want to log in.
-		"tls"; -- Add support for secure TLS on c2s/s2s connections
-		"dialback"; -- s2s dialback support
-		"disco"; -- Service discovery
+    -- Generally required
+    "roster"; -- Allow users to have a roster. Recommended ;)
+    "saslauth"; -- Authentication for clients and servers. Recommended if you want to log in.
+    "tls"; -- Add support for secure TLS on c2s/s2s connections
+    "dialback"; -- s2s dialback support
+    "disco"; -- Service discovery
 
-	-- Not essential, but recommended
-		"carbons"; -- Keep multiple clients in sync
-		"pep"; -- Enables users to publish their avatar, mood, activity, playing music and more
-		"private"; -- Private XML storage (for room bookmarks, etc.)
-		"blocklist"; -- Allow users to block communications with other users
-		"vcard4"; -- User profiles (stored in PEP)
-		"vcard_legacy"; -- Conversion between legacy vCard and PEP Avatar, vcard
+    -- Not essential, but recommended
+    "carbons"; -- Keep multiple clients in sync
+    "pep"; -- Enables users to publish their avatar, mood, activity, playing music and more
+    "private"; -- Private XML storage (for room bookmarks, etc.)
+    "blocklist"; -- Allow users to block communications with other users
+    "vcard4"; -- User profiles (stored in PEP)
+    "vcard_legacy"; -- Conversion between legacy vCard and PEP Avatar, vcard
 
-	-- Nice to have
-		"version"; -- Replies to server version requests
-		"uptime"; -- Report how long server has been running
-		"time"; -- Let others know the time here on this server
-		"ping"; -- Replies to XMPP pings with pongs
-		"register"; -- Allow users to register on this server using a client and change passwords
-		--"mam"; -- Store messages in an archive and allow users to access it
-		--"csi_simple"; -- Simple Mobile optimizations
+    -- Nice to have
+    "version"; -- Replies to server version requests
+    "uptime"; -- Report how long server has been running
+    "time"; -- Let others know the time here on this server
+    "ping"; -- Replies to XMPP pings with pongs
+    "register"; -- Allow users to register on this server using a client and change passwords
+    --"mam"; -- Store messages in an archive and allow users to access it
+    --"csi_simple"; -- Simple Mobile optimizations
 
-	-- Admin interfaces
-		"admin_adhoc"; -- Allows administration via an XMPP client that supports ad-hoc commands
-		--"admin_telnet"; -- Opens telnet console interface on localhost port 5582
+    -- Admin interfaces
+    "admin_adhoc"; -- Allows administration via an XMPP client that supports ad-hoc commands
+    --"admin_telnet"; -- Opens telnet console interface on localhost port 5582
 
-	-- HTTP modules
-		--"bosh"; -- Enable BOSH clients, aka "Jabber over HTTP"
-		--"websocket"; -- XMPP over WebSockets
-		--"http_files"; -- Serve static files from a directory over HTTP
+    -- HTTP modules
+    --"bosh"; -- Enable BOSH clients, aka "Jabber over HTTP"
+    --"websocket"; -- XMPP over WebSockets
+    --"http_files"; -- Serve static files from a directory over HTTP
 
-	-- Other specific functionality
-		--"limits"; -- Enable bandwidth limiting for XMPP connections
-		--"groups"; -- Shared roster support
-		--"server_contact_info"; -- Publish contact information for this service
-		--"announce"; -- Send announcement to all online users
-		--"welcome"; -- Welcome users who register accounts
-		--"watchregistrations"; -- Alert admins of registrations
-		--"motd"; -- Send a message to users when they log in
-		--"legacyauth"; -- Legacy authentication. Only used by some old clients and bots.
-		--"proxy65"; -- Enables a file transfer proxy service which clients behind NAT can use
+    -- Other specific functionality
+    --"limits"; -- Enable bandwidth limiting for XMPP connections
+    --"groups"; -- Shared roster support
+    --"server_contact_info"; -- Publish contact information for this service
+    --"announce"; -- Send announcement to all online users
+    --"welcome"; -- Welcome users who register accounts
+    --"watchregistrations"; -- Alert admins of registrations
+    --"motd"; -- Send a message to users when they log in
+    --"legacyauth"; -- Legacy authentication. Only used by some old clients and bots.
+    --"proxy65"; -- Enables a file transfer proxy service which clients behind NAT can use
 }
 
 -- These modules are auto-loaded, but should you want
 -- to disable them then uncomment them here:
 modules_disabled = {
-	-- "offline"; -- Store offline messages
-	-- "c2s"; -- Handle client connections
-	-- "s2s"; -- Handle server-to-server connections
-	-- "posix"; -- POSIX functionality, sends server to background, enables syslog, etc.
+    --"offline"; -- Store offline messages
+    --"c2s"; -- Handle client connections
+    --"s2s"; -- Handle server-to-server connections
+    --"posix"; -- POSIX functionality, sends server to background, enables syslog, etc.
 }
 
 -- Disable account creation by default, for security
@@ -85,7 +85,6 @@ s2s_require_encryption = true
 
 s2s_secure_auth = false
 
-
 -- Required for init scripts and prosodyctl
 pidfile = "/var/run/prosody/prosody.pid"
 
@@ -99,13 +98,12 @@ archive_expires_after = "1w" -- Remove archived messages after 1 week
 -- Logging configuration
 -- For advanced logging see https://prosody.im/doc/logging
 log = {
-	info = "/var/log/prosody/prosody.log"; -- Change 'info' to 'debug' for verbose logging
-	error = "/var/log/prosody/prosody.err";
-	-- "*syslog"; -- Uncomment this for logging to syslog
-	-- "*console"; -- Log to the console, useful for debugging with daemonize=false
+    info = "/var/log/prosody/prosody.log"; -- Change 'info' to 'debug' for verbose logging
+    error = "/var/log/prosody/prosody.err";
+    --"*syslog"; -- Uncomment this for logging to syslog
+    --"*console"; -- Log to the console, useful for debugging with daemonize=false
 }
 
-
 -- Location of directory to find certificates in (relative to main config file):
 certificates = "certs"
 

doc/example-config-files/scalable/videobridge_config.scalable.example

@@ -15,6 +15,10 @@ JVB_SECRET=$VP_SECRET
 # extra options to pass to the JVB daemon
 JVB_OPTS="--apis=rest,"
 
-
 # adds java system props that are passed to jvb (default are for home and logging config file)
-JAVA_SYS_PROPS="-Dnet.java.sip.communicator.SC_HOME_DIR_LOCATION=/etc/jitsi -Dnet.java.sip.communicator.SC_HOME_DIR_NAME=videobridge -Dnet.java.sip.communicator.SC_LOG_DIR_LOCATION=/var/log/jitsi -Djava.util.logging.config.file=/etc/jitsi/videobridge/logging.properties"
+JAVA_SYS_PROPS=" \
+    -Dnet.java.sip.communicator.SC_HOME_DIR_LOCATION=/etc/jitsi \
+    -Dnet.java.sip.communicator.SC_HOME_DIR_NAME=videobridge \
+    -Dnet.java.sip.communicator.SC_LOG_DIR_LOCATION=/var/log/jitsi \
+    -Djava.util.logging.config.file=/etc/jitsi/videobridge/logging.properties \
+"

index.html

@@ -3,7 +3,7 @@
     <!--#include virtual="head.html" -->
     <meta charset="utf-8">
     <meta http-equiv="content-type" content="text/html;charset=utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
     <meta name="theme-color" content="#2A3A4B">
     <!--#include virtual="base.html" -->
 

interface_config.js

@@ -1,6 +1,13 @@
 /* eslint-disable no-unused-vars, no-var, max-len */
 /* eslint sort-keys: ["error", "asc", {"caseSensitive": false}] */
 
+/**
+ * !!!IMPORTANT!!!
+ *
+ * This file is considered deprecated. All options will eventually be moved to
+ * config.js, and no new options should be added here.
+ */
+
 var interfaceConfig = {
     APP_NAME: 'Jitsi Meet',
     AUDIO_LEVEL_PRIMARY_COLOR: 'rgba(255,255,255,0.4)',
@@ -168,6 +175,13 @@ var interfaceConfig = {
     REMOTE_THUMBNAIL_RATIO: 1, // 1:1
 
     SETTINGS_SECTIONS: [ 'devices', 'language', 'moderator', 'profile', 'calendar' ],
+
+    /**
+     * Specify which sharing features should be displayed. If the value is not set
+     * all sharing features will be shown. You can set [] to disable all.
+     */
+    // SHARING_FEATURES: ['email', 'url', 'dial-in', 'embed'],
+
     SHOW_BRAND_WATERMARK: false,
 
     /**
@@ -191,23 +205,16 @@ var interfaceConfig = {
     TOOLBAR_ALWAYS_VISIBLE: false,
 
     /**
-     * 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 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
+     * DEPRECATED!
+     * This config was moved to config.js as `toolbarButtons`.
      */
-    TOOLBAR_BUTTONS: [
-        'microphone', 'camera', 'closedcaptions', 'desktop', 'embedmeeting', 'fullscreen',
-        'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
-        'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
-        'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts',
-        'tileview', 'videobackgroundblur', 'download', 'help', 'mute-everyone', 'security'
-    ],
+    // TOOLBAR_BUTTONS: [
+    //     'microphone', 'camera', 'closedcaptions', 'desktop', 'embedmeeting', 'fullscreen',
+    //     'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
+    //     'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
+    //     'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts',
+    //     'tileview', 'select-background', 'download', 'help', 'mute-everyone', 'mute-video-everyone', 'security'
+    // ],
 
     TOOLBAR_TIMEOUT: 4000,
 

ios/Podfile

@@ -1,8 +1,9 @@
 platform :ios, '11.0'
 workspace 'jitsi-meet'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+install! 'cocoapods', :deterministic_uuids => false
 
-target 'jitsi-meet' do
+target 'JitsiMeet' do
   project 'app/app.xcodeproj'
 
   pod 'Firebase/Analytics', '~> 6.33.0'
@@ -10,7 +11,7 @@ target 'jitsi-meet' do
   pod 'Firebase/DynamicLinks', '~> 6.33.0'
 end
 
-target 'JitsiMeet' do
+target 'JitsiMeetSDK' do
   project 'sdk/sdk.xcodeproj'
 
   # React Native and its dependencies
@@ -57,21 +58,20 @@ target 'JitsiMeet' do
   pod 'react-native-calendar-events', :path => '../node_modules/react-native-calendar-events'
   pod 'react-native-keep-awake', :path => '../node_modules/react-native-keep-awake'
   pod 'react-native-netinfo', :path => '../node_modules/@react-native-community/netinfo'
+  pod 'react-native-splash-screen', :path => '../node_modules/react-native-splash-screen'
   pod 'react-native-webview', :path => '../node_modules/react-native-webview'
   pod 'react-native-webrtc', :path => '../node_modules/react-native-webrtc'
-  pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'
-  pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage'
+  pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-async-storage/async-storage'
+  pod 'RNDeviceInfo', :path => '../node_modules/react-native-device-info'
   pod 'RNGoogleSignin', :path => '../node_modules/@react-native-community/google-signin'
   pod 'RNSound', :path => '../node_modules/react-native-sound'
   pod 'RNSVG', :path => '../node_modules/react-native-svg'
   pod 'RNWatch', :path => '../node_modules/react-native-watch-connectivity'
   pod 'RNDefaultPreference', :path => '../node_modules/react-native-default-preference'
-  pod 'react-native-splash-screen', :path => '../node_modules/react-native-splash-screen'
 
   # Native pod dependencies
   #
 
-  pod 'Amplitude-iOS', '~> 4.0.4'
   pod 'CocoaLumberjack', '~>3.5.3'
   pod 'ObjectiveDropboxOfficial', '~> 3.9.4'
 

ios/Podfile.lock

@@ -1,13 +1,10 @@
 PODS:
-  - Amplitude-iOS (4.0.4)
   - AppAuth (1.2.0):
     - AppAuth/Core (= 1.2.0)
     - AppAuth/ExternalUserAgent (= 1.2.0)
   - AppAuth/Core (1.2.0)
   - AppAuth/ExternalUserAgent (1.2.0)
   - boost-for-react-native (1.63.0)
-  - BVLinearGradient (2.5.6):
-    - React
   - CocoaLumberjack (3.5.3):
     - CocoaLumberjack/Core (= 3.5.3)
   - CocoaLumberjack/Core (3.5.3)
@@ -293,10 +290,10 @@ PODS:
     - React
   - react-native-splash-screen (3.2.0):
     - React
-  - react-native-webrtc (1.84.1):
+  - react-native-webrtc (1.89.1):
+    - React-Core
+  - react-native-webview (11.0.2):
     - React-Core
-  - react-native-webview (10.9.0):
-    - React
   - React-RCTActionSheet (0.61.5-jitsi.2):
     - React-Core/RCTActionSheetHeaders (= 0.61.5-jitsi.2)
   - React-RCTAnimation (0.61.5-jitsi.2):
@@ -351,10 +348,12 @@ PODS:
     - React-jsi (= 0.61.5-jitsi.2)
     - ReactCommon/jscallinvoker (= 0.61.5-jitsi.2)
     - ReactCommon/turbomodule/core (= 0.61.5-jitsi.2)
-  - RNCAsyncStorage (1.3.4):
+  - RNCAsyncStorage (1.13.2):
     - React
   - RNDefaultPreference (1.4.2):
     - React
+  - RNDeviceInfo (8.0.0):
+    - React-Core
   - RNGoogleSignin (3.0.1):
     - GoogleSignIn (~> 5.0.0)
     - React
@@ -363,15 +362,13 @@ PODS:
     - RNSound/Core (= 0.11.0)
   - RNSound/Core (0.11.0):
     - React
-  - RNSVG (10.1.0):
+  - RNSVG (12.1.0):
     - React
   - RNWatch (0.4.3):
     - React
   - Yoga (1.14.0)
 
 DEPENDENCIES:
-  - Amplitude-iOS (~> 4.0.4)
-  - BVLinearGradient (from `../node_modules/react-native-linear-gradient`)
   - CocoaLumberjack (~> 3.5.3)
   - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
   - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector/`)
@@ -410,8 +407,9 @@ DEPENDENCIES:
   - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - ReactCommon/turbomodule (from `../node_modules/react-native/ReactCommon`)
-  - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
+  - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - RNDefaultPreference (from `../node_modules/react-native-default-preference`)
+  - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - "RNGoogleSignin (from `../node_modules/@react-native-community/google-signin`)"
   - RNSound (from `../node_modules/react-native-sound`)
   - RNSVG (from `../node_modules/react-native-svg`)
@@ -420,7 +418,6 @@ DEPENDENCIES:
 
 SPEC REPOS:
   trunk:
-    - Amplitude-iOS
     - AppAuth
     - boost-for-react-native
     - CocoaLumberjack
@@ -442,8 +439,6 @@ SPEC REPOS:
     - PromisesObjC
 
 EXTERNAL SOURCES:
-  BVLinearGradient:
-    :path: "../node_modules/react-native-linear-gradient"
   DoubleConversion:
     :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
   FBLazyVector:
@@ -507,9 +502,11 @@ EXTERNAL SOURCES:
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
   RNCAsyncStorage:
-    :path: "../node_modules/@react-native-community/async-storage"
+    :path: "../node_modules/@react-native-async-storage/async-storage"
   RNDefaultPreference:
     :path: "../node_modules/react-native-default-preference"
+  RNDeviceInfo:
+    :path: "../node_modules/react-native-device-info"
   RNGoogleSignin:
     :path: "../node_modules/@react-native-community/google-signin"
   RNSound:
@@ -522,10 +519,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  Amplitude-iOS: 2ad4d7270c99186236c1272a3a9425463b1ae1a7
   AppAuth: bce82c76043657c99d91e7882e8a9e1a93650cd4
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
-  BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
   CocoaLumberjack: 2f44e60eb91c176d471fdba43b9e3eae6a721947
   DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
   FBLazyVector: ca7f56c8ff6cd8590f7a673d7903b06019805581
@@ -562,8 +557,8 @@ SPEC CHECKSUMS:
   react-native-keep-awake: eba3137546b10003361b37c761f6c429b59814ae
   react-native-netinfo: 8d8db463bcc5db66a8ac5c48a7d86beb3b92f61a
   react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
-  react-native-webrtc: edd689b0d5a462d7a6f6f52bca3f9414fc0ee11c
-  react-native-webview: 6ee7868ca8eba635dbf7963986d1ab7959da0391
+  react-native-webrtc: ccb0c21eb4fb04326648fbdb4a5d49977e2cf274
+  react-native-webview: b2542d6fd424bcc3e3b2ec5f854f0abb4ec86c87
   React-RCTActionSheet: bcbc311dc3b47bc8efb2737ff0940239a45789a9
   React-RCTAnimation: 65f61080ce632f6dea23d52e354ffac9948396c6
   React-RCTBlob: 70d88f7b68b5c44953cdb286ac2e36a7a509a97e
@@ -574,14 +569,15 @@ SPEC CHECKSUMS:
   React-RCTText: 4f1b99f228278d2a5e9008eced8dc9c974c4a270
   React-RCTVibration: c1041024893fdfdb8371e7c720c437751b711676
   ReactCommon: 18014e1d98dbeb9141e935cfe35fc93bd511ffb6
-  RNCAsyncStorage: 8e31405a9f12fbf42c2bb330e4560bfd79c18323
+  RNCAsyncStorage: bc2f81cc1df90c267ce9ed30bb2dbc93b945a8ee
   RNDefaultPreference: 56a405ce61033ac77b95004dccd7ac54c2eb50d1
+  RNDeviceInfo: 72ded653ce636b3f03571e90bed99309a714944e
   RNGoogleSignin: 39336070b35fc4cea6a98cf111e00480317be0ae
   RNSound: c980916b596cc15c8dcd2f6ecd3b13c4881dbe20
-  RNSVG: 069864be08c9fe065a2cf7e63656a34c78653c99
+  RNSVG: ce9d996113475209013317e48b05c21ee988d42e
   RNWatch: a5320c959c75e72845c07985f3e935e58998f1d3
   Yoga: 96b469c5e81ff51b917b92e8c3390642d4ded30c
 
-PODFILE CHECKSUM: f2400f8e5a52c4d91697cbacba6956569efc5ab8
+PODFILE CHECKSUM: d059cebf82da14a53940a16c24c3330752d4b0c8
 
-COCOAPODS: 1.9.3
+COCOAPODS: 1.10.1