fix(toolbar) restore security button backwards compat

In https://github.com/jitsi/jitsi-meet/pull/8673 we inadvertently removed the backwards compatibility code which would show the security button when the "info" button is configured in interface_config. The security button replaced the info button.
chore(deps) lib-jitsi-meet fix: Adds back removed method used by jibri.
2026-09-09 18:38:39 +00:00 · 2021-04-09 09:30:36 -05:00 · 2021-04-08 11:34:05 -05:00
1236 changed files with 29227 additions and 83016 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -13,6 +13,3 @@ load-test/*
 # not seem to be a reason why we will want to risk being inconsistent with our
 # remaining JavaScript source code.
 !.eslintrc.js
-
-# Not worth it.
-actionTypes.js
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -10,13 +10,8 @@ jobs:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v1
      with:
-        node-version: '16.x'
+        node-version: '12.x'
    - run: npm install
-    - name: Check git status
-      run: git status
-    - name: Check git diff
-      run: git diff
-    - name: Check if the git repository is clean
-      run: exit $( git status --porcelain --untracked-files=no | head -255 | wc -l )
+    - run: git status -s --untracked-files=no
    - run: npm run lint
    - run: make
--- a/.npmrc
+++ b/.npmrc
@@ -1,3 +1 @@
 package-lock=true
-; FIXME Set legacy-peer-deps=false when we upgrade RN.
-legacy-peer-deps=true
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +0,0 @@
-16
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -152,20 +152,3 @@ this model but new features should follow this new layout.

 When working on an old feature, adding the necessary changes to migrate to the new
 model is encouraged.
-
-
-### Avoiding bundle bloat
-
-When adding a new feature it's possible that it triggers a build failure due to the increased bundle size. We have safeguards inplace to avoid bundles growing disproportionatelly. While there are legit reasons for increasing the limits, please analyze the bundle first to make sure no unintended dependencies have been included, causing the increase in size.
-
-First, make a production build with bundle-analysis enabled:
-
-```
-npx webpack -p --analyze-bundle
-```
-
-Then open the interactive bundle analyzer tool:
-
-```
-npx webpack-bundle-analyzer build/app-stats.json
-```
--- a/32
+++ b/32
@@ -3,7 +3,7 @@ CLEANCSS = ./node_modules/.bin/cleancss
 DEPLOY_DIR = libs
 LIBJITSIMEET_DIR = node_modules/lib-jitsi-meet/
 LIBFLAC_DIR = node_modules/libflacjs/dist/min/
-OLM_DIR = node_modules/@matrix-org/olm
+OLM_DIR = node_modules/olm
 RNNOISE_WASM_DIR = node_modules/rnnoise-wasm/dist/
 TFLITE_WASM = react/features/stream-effects/virtual-background/vendor/tflite
 MEET_MODELS_DIR  = react/features/stream-effects/virtual-background/vendor/models/
@@ -14,12 +14,12 @@ STYLES_BUNDLE = css/all.bundle.css
 STYLES_DESTINATION = css/all.css
 STYLES_MAIN = css/main.scss
 WEBPACK = ./node_modules/.bin/webpack
-WEBPACK_DEV_SERVER = ./node_modules/.bin/webpack serve --mode development
+WEBPACK_DEV_SERVER = ./node_modules/.bin/webpack-dev-server

 all: compile deploy clean

 compile: compile-load-test
-	$(WEBPACK)
+	$(WEBPACK) -p

 compile-load-test:
 	${NPM} install --prefix resources/load-test && ${NPM} run build --prefix resources/load-test
@@ -37,25 +37,23 @@ deploy-init:
 deploy-appbundle:
 	cp \
 		$(BUILD_DIR)/app.bundle.min.js \
-		$(BUILD_DIR)/app.bundle.min.js.map \
+		$(BUILD_DIR)/app.bundle.min.map \
 		$(BUILD_DIR)/do_external_connect.min.js \
-		$(BUILD_DIR)/do_external_connect.min.js.map \
+		$(BUILD_DIR)/do_external_connect.min.map \
 		$(BUILD_DIR)/external_api.min.js \
-		$(BUILD_DIR)/external_api.min.js.map \
+		$(BUILD_DIR)/external_api.min.map \
 		$(BUILD_DIR)/flacEncodeWorker.min.js \
-		$(BUILD_DIR)/flacEncodeWorker.min.js.map \
+		$(BUILD_DIR)/flacEncodeWorker.min.map \
 		$(BUILD_DIR)/dial_in_info_bundle.min.js \
-		$(BUILD_DIR)/dial_in_info_bundle.min.js.map \
+		$(BUILD_DIR)/dial_in_info_bundle.min.map \
 		$(BUILD_DIR)/alwaysontop.min.js \
-		$(BUILD_DIR)/alwaysontop.min.js.map \
+		$(BUILD_DIR)/alwaysontop.min.map \
 		$(OUTPUT_DIR)/analytics-ga.js \
 		$(BUILD_DIR)/analytics-ga.min.js \
-		$(BUILD_DIR)/analytics-ga.min.js.map \
-		$(DEPLOY_DIR)
-	cp \
+		$(BUILD_DIR)/analytics-ga.min.map \
 		$(BUILD_DIR)/close3.min.js \
-		$(BUILD_DIR)/close3.min.js.map \
-		$(DEPLOY_DIR) || true
+		$(BUILD_DIR)/close3.min.map \
+		$(DEPLOY_DIR)

 deploy-lib-jitsi-meet:
 	cp \
@@ -85,12 +83,12 @@ deploy-rnnoise-binary:
 deploy-tflite:
 	cp \
 		$(TFLITE_WASM)/*.wasm \
-		$(DEPLOY_DIR)
+		$(DEPLOY_DIR)		

 deploy-meet-models:
 	cp \
 		$(MEET_MODELS_DIR)/*.tflite \
-		$(DEPLOY_DIR)
+		$(DEPLOY_DIR)	

 deploy-css:
 	$(NODE_SASS) $(STYLES_MAIN) $(STYLES_BUNDLE) && \
@@ -102,7 +100,7 @@ deploy-local:

 .NOTPARALLEL:
 dev: deploy-init deploy-css deploy-rnnoise-binary deploy-tflite deploy-meet-models deploy-lib-jitsi-meet deploy-libflac deploy-olm
-	$(WEBPACK_DEV_SERVER)
+	$(WEBPACK_DEV_SERVER) --detect-circular-deps

 source-package:
 	mkdir -p source_package/jitsi-meet/css && \
--- a/README.md
+++ b/README.md
@@ -1,88 +1,82 @@
-# <p align="center">Jitsi Meet</p>
+# Jitsi Meet - Secure, Simple and Scalable Video Conferences

-Jitsi Meet is a set of Open Source projects which empower users to use and deploy
-video conferencing platforms with state-of-the-art video quality and features.
+Jitsi Meet is an open-source (Apache) WebRTC JavaScript application that uses [Jitsi Videobridge](https://jitsi.org/videobridge) to provide high quality, [secure](https://jitsi.org/security) and scalable video conferences. Jitsi Meet in action can be seen at [here at the session #482 of the VoIP Users Conference](http://youtu.be/7vFUVClsNh0).

-<hr />
+The Jitsi Meet client runs in your browser, without installing anything else on your computer. You can try it out at https://meet.jit.si.

-<p align="center">
-<img src="https://raw.githubusercontent.com/jitsi/jitsi-meet/master/readme-img1.png" width="900" />
-</p>
+Jitsi Meet allows very efficient collaboration. Users can stream their desktop or only some windows. It also supports shared document editing with Etherpad.

-<hr />
+**NOTE:** If you are looking for Jitsi as a Service (JaaS) please start [here](https://jaas.8x8.vc).

-Amongst others here are the main features Jitsi Meet offers:
+## Installation

-* Support for all current browsers
-* Mobile applications
-* Web and native SDKs for integration
-* HD audio and video
-* Content sharing
-* End-to-End Encryption
-* Raise hand and reactions
-* Chat with private conversations
-* Polls
-* Virtual backgrounds
+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.

-And many more!
+Installing Jitsi Meet is a simple experience. For Debian-based system, following the [quick install](https://jitsi.github.io/handbook/docs/devops-guide/devops-guide-quickstart) document, which uses the package system. You can also see a demonstration of the process in [this tutorial video](https://jitsi.org/tutorial).

-## Using Jitsi Meet
+For other systems, or if you wish to install all components manually, see the [detailed manual installation instructions](https://jitsi.github.io/handbook/docs/devops-guide/devops-guide-manual).

-Using Jitsi Meet is straightforward, as it's browser based. Head over to [meet.jit.si](https://meet.jit.si) and give it a try. It's anonymous, scalable and free to use. All browsers are supported! 
+Installation with Docker is also available. Please see the [instruction](https://jitsi.github.io/handbook/docs/devops-guide/devops-guide-docker).

-Using mobile? No problem, you can either use your mobile web browser or our fully-featured
-mobile apps:
+## Download

-| Android | Android (F-Droid) | iOS |
-|:-:|:-:|:-:|
-| [<img src="resources/img/google-play-badge.png" height="50">](https://play.google.com/store/apps/details?id=org.jitsi.meet) | [<img src="resources/img/f-droid-badge.png" height="50">](https://f-droid.org/en/packages/org.jitsi.meet/) | [<img src="resources/img/appstore-badge.png" height="50">](https://itunes.apple.com/us/app/jitsi-meet/id1165103905) |
+| Latest stable release | [![release](https://img.shields.io/badge/release-latest-green.svg)](https://github.com/jitsi/jitsi-meet/releases/latest) |
+|---|---|

-If you are feeling adventurous and want to get an early scoop of the features as they are being
-developed you can also sign up for our open beta testing here:
+You can download Debian/Ubuntu binaries:
+* [stable](https://download.jitsi.org/stable/) ([instructions](https://jitsi.org/downloads/ubuntu-debian-installations-instructions/))
+* [testing](https://download.jitsi.org/testing/) ([instructions](https://jitsi.org/downloads/ubuntu-debian-installations-instructions-for-testing/))
+* [nightly](https://download.jitsi.org/unstable/) ([instructions](https://jitsi.org/downloads/ubuntu-debian-installations-instructions-nightly/))
+
+You can download source archives (produced by ```make source-package```):
+* [source builds](https://download.jitsi.org/jitsi-meet/src/)
+
+### Mobile apps
+
+* [Android](https://play.google.com/store/apps/details?id=org.jitsi.meet)
+
+[<img src="resources/img/google-play-badge.png" height="50">](https://play.google.com/store/apps/details?id=org.jitsi.meet)
+
+* [Android (F-Droid)](https://f-droid.org/en/packages/org.jitsi.meet/)
+
+[<img src="resources/img/f-droid-badge.png" height="50">](https://f-droid.org/en/packages/org.jitsi.meet/)
+
+* [iOS](https://itunes.apple.com/us/app/jitsi-meet/id1165103905)
+
+[<img src="resources/img/appstore-badge.png" height="50">](https://itunes.apple.com/us/app/jitsi-meet/id1165103905)
+
+You can also sign up for our open beta testing here:

 * [Android](https://play.google.com/apps/testing/org.jitsi.meet)
 * [iOS](https://testflight.apple.com/join/isy6ja7S)

-## Running your own instance
+## Release notes

-If you'd like to run your own Jitsi Meet installation head over to the [handbook](https://jitsi.github.io/handbook/docs/devops-guide/devops-guide-start) to get started.
+Release notes for Jitsi Meet are maintained on [this repository](https://github.com/jitsi/jitsi-meet-release-notes).

-We provide Debian packages and a comprehensive Docker setup to make deployments as simple as possible.
-Advanced users also have the possibility of building all the components from source.
+## Development

-You can check the latest releases [here](https://jitsi.github.io/handbook/docs/releases).
-
-## Jitsi as a Service
-
-If you like the branding capabilities of running your own instance but you'd like
-to avoid dealing with the complexity of monitoring, scaling and updates, JaaS might be
-for you.
-
-[8x8 Jitsi as a Service (JaaS)](https://jaas.8x8.vc) is an enterprise-ready video meeting platform that allows developers, organizations and businesses to easily build and deploy video solutions. With Jitsi as a Service we now give you all the power of Jitsi running on our global platform so you can focus on building secure and branded video experiences.
-
-## Documentation
-
-All the Jitsi Meet documentation is available in [the handbook](https://jitsi.github.io/handbook/).
-
-## Security
-
-For a comprehensive description of all Jitsi Meet's security aspects, please check [this link](https://jitsi.org/security).
-
-For a detailed description of Jitsi Meet's End-to-End Encryption (E2EE) implementation,
-please check [this link](https://jitsi.org/e2ee-whitepaper/).
-
-For information on reporting security vulnerabilities in Jitsi Meet, see [SECURITY.md](./SECURITY.md).
+For web development see [here](https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-web), and for mobile see [here](https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-mobile).

 ## Contributing

 If you are looking to contribute to Jitsi Meet, first of all, thank you! Please
 see our [guidelines for contributing](CONTRIBUTING.md).

-<br />
-<br />
+## Embedding in external applications

-<footer>
-<p align="center" style="font-size: smaller;">
-Built with ❤️ by the Jitsi team at <a href="https://8x8.com" target="_blank">8x8</a> and our community.
-</p>
-</footer>
+Jitsi Meet provides a very flexible way of embedding in external applications by using the [Jitsi Meet API](doc/api.md).
+
+## Security
+
+The security section here was starting to feel a bit too succinct for the complexity of the topic, so we created a post that covers the topic much more broadly here: https://jitsi.org/security
+
+The section on end-to-end encryption in that document is likely going to be one of the key points of interest: https://jitsi.org/security/#e2ee
+
+## Security issues
+
+For information on reporting security vulnerabilities in Jitsi Meet, see [SECURITY.md](./SECURITY.md).
+
+## Acknowledgements
+
+Jitsi Meet started out as a sample conferencing application using Jitsi Videobridge. It was originally developed by ESTOS' developer Philipp Hancke who then contributed it to the community where development continues with joint forces!
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -78,7 +78,7 @@ dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.2.0'

-    debugImplementation 'com.squareup.leakcanary:leakcanary-android:2.7'
+    debugImplementation 'com.squareup.leakcanary:leakcanary-android:2.2'

    if (!rootProject.ext.libreBuild) {
        implementation 'com.google.android.gms:play-services-auth:16.0.1'
@@ -109,7 +109,6 @@ gradle.projectsEvaluated {
        def dropboxActivity = """
          <activity
              android:configChanges="keyboard|orientation"
-              android:exported="true"
              android:launchMode="singleTask"
              android:name="com.dropbox.core.android.AuthActivity">
            <intent-filter>
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -4,7 +4,6 @@
    android:installLocation="auto">
  <application
      android:allowBackup="true"
-      android:extractNativeLibs="true"
      android:icon="@mipmap/ic_launcher"
      android:label="@string/app_name"
      android:networkSecurityConfig="@xml/network_security_config"
@@ -14,7 +13,6 @@
        android:resource="@xml/app_restrictions" />
    <activity
        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize"
-        android:exported="true"
        android:label="@string/app_name"
        android:launchMode="singleTask"
        android:name=".MainActivity"
--- a/android/app/src/main/java/org/jitsi/meet/MainActivity.java
+++ b/android/app/src/main/java/org/jitsi/meet/MainActivity.java
@@ -82,7 +82,7 @@ public class MainActivity extends JitsiMeetActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        JitsiMeet.showSplashScreen(this);
-        super.onCreate(null);
+        super.onCreate(savedInstanceState);
    }

    @Override
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -18,9 +18,9 @@ buildscript {

 ext {
    buildToolsVersion = "30.0.3"
-    compileSdkVersion = 31
+    compileSdkVersion = 30
    minSdkVersion    = 23
-    targetSdkVersion = 31
+    targetSdkVersion = 30
    supportLibVersion = "28.0.0"

    // The Maven artifact groupdId of the third-party react-native modules which
@@ -110,7 +110,7 @@ allprojects {

            project.version = "${json.version}-jitsi-${versionQualifierNumber}"

-            task jitsiAndroidSourcesJar(type: Jar) {
+            task androidSourcesJar(type: Jar) {
                classifier = 'sources'
                from android.sourceSets.main.java.source
            }
@@ -124,7 +124,7 @@ allprojects {
                    artifact("${project.buildDir}/outputs/aar/${project.name}-release.aar") {
                        extension "aar"
                    }
-                    artifact(jitsiAndroidSourcesJar)
+                    artifact(androidSourcesJar)
                    pom.withXml {
                        def pomXml = asNode()
                        pomXml.appendNode('name', project.name)
--- a/android/gradle.properties
+++ b/android/gradle.properties
@@ -24,7 +24,6 @@ android.enableDexingArtifactTransform.desugaring=false

 android.useAndroidX=true
 android.enableJetifier=true
-android.bundle.enableUncompressedNativeLibs=false

-appVersion=21.5.0
-sdkVersion=4.0.0
+appVersion=21.0.0
+sdkVersion=3.2.0
--- a/android/sdk/build.gradle
+++ b/android/sdk/build.gradle
@@ -44,11 +44,10 @@ dependencies {
    //noinspection GradleDynamicVersion
    implementation 'org.webkit:android-jsc:+'

-    implementation 'com.dropbox.core:dropbox-core-sdk:4.0.1'
+    implementation 'com.dropbox.core:dropbox-core-sdk:3.0.8'
    implementation 'com.jakewharton.timber:timber:4.7.1'
    implementation 'com.squareup.duktape:duktape-android:1.3.0'
    implementation 'com.google.code.gson:gson:2.8.6'
-    implementation "androidx.startup:startup-runtime:1.1.0"

    if (rootProject.ext.libreBuild) {
        implementation(project(':react-native-device-info')) {
@@ -57,7 +56,6 @@ dependencies {
            exclude group: 'com.android.installreferrer'
        }
    } else {
-        implementation project(':react-native-amplitude')
        implementation project(':react-native-device-info')
        implementation(project(":react-native-google-signin")) {
            exclude group: 'com.google.android.gms'
@@ -70,21 +68,13 @@ dependencies {
    implementation project(':react-native-calendar-events')
    implementation project(':react-native-community_netinfo')
    implementation project(':react-native-default-preference')
-    implementation project(':react-native-gesture-handler')
    implementation project(':react-native-immersive')
    implementation project(':react-native-keep-awake')
-    implementation project(':react-native-masked-view_masked-view')
-    implementation project(':react-native-performance')
-    implementation project(':react-native-reanimated')
-    implementation project(':react-native-safe-area-context')
-    implementation project(':react-native-screens')
-    implementation project(':react-native-slider')
    implementation project(':react-native-sound')
-    implementation project(':react-native-splash-screen')
    implementation project(':react-native-svg')
-    implementation project(':react-native-video')
    implementation project(':react-native-webrtc')
    implementation project(':react-native-webview')
+    implementation project(':react-native-splash-screen')

    testImplementation 'junit:junit:4.12'
 }
@@ -163,9 +153,16 @@ android.libraryVariants.all { def variant ->
        // Bundle sounds
        //
        copy {
-            from("${projectDir}/../../sounds")
-            include("*.wav")
-            include("*.mp3")
+            from("${projectDir}/../../sounds/incomingMessage.wav")
+            from("${projectDir}/../../sounds/joined.wav")
+            from("${projectDir}/../../sounds/left.wav")
+            from("${projectDir}/../../sounds/liveStreamingOn.mp3")
+            from("${projectDir}/../../sounds/liveStreamingOff.mp3")
+            from("${projectDir}/../../sounds/outgoingRinging.wav")
+            from("${projectDir}/../../sounds/outgoingStart.wav")
+            from("${projectDir}/../../sounds/recordingOn.mp3")
+            from("${projectDir}/../../sounds/recordingOff.mp3")
+            from("${projectDir}/../../sounds/rejected.wav")
            into("${assetsDir}/sounds")
        }

--- a/android/sdk/src/main/AndroidManifest.xml
+++ b/android/sdk/src/main/AndroidManifest.xml
@@ -40,8 +40,7 @@

        <service
            android:name=".ConnectionService"
-            android:permission="android.permission.BIND_TELECOM_CONNECTION_SERVICE"
-            android:exported="true">
+            android:permission="android.permission.BIND_TELECOM_CONNECTION_SERVICE">
            <intent-filter>
                <action android:name="android.telecom.ConnectionService" />
            </intent-filter>
@@ -57,14 +56,6 @@
            android:enabled="false"
            tools:replace="android:authorities">
        </provider>
-        <provider
-            android:name="androidx.startup.InitializationProvider"
-            android:authorities="${applicationId}.androidx-startup"
-            android:exported="false">
-            <meta-data  android:name="org.jitsi.meet.sdk.JitsiInitializer"
-                android:value="androidx.startup" />
-        </provider>
-
    </application>

 </manifest>
--- a/android/sdk/src/main/java/org/jitsi/meet/sdk/BroadcastIntentHelper.java
+++ b/android/sdk/src/main/java/org/jitsi/meet/sdk/BroadcastIntentHelper.java
@@ -20,10 +20,8 @@ public class BroadcastIntentHelper {
        return intent;
    }

-    public static Intent buildToggleScreenShareIntent(boolean enabled) {
-        Intent intent = new Intent(BroadcastAction.Type.TOGGLE_SCREEN_SHARE.getAction());
-        intent.putExtra("enabled", enabled);
-        return intent;
+    public static Intent buildToggleScreenShareIntent() {
+        return new Intent(BroadcastAction.Type.TOGGLE_SCREEN_SHARE.getAction());
    }

    public static Intent buildOpenChatIntent(String participantId) {
--- a/android/sdk/src/main/java/org/jitsi/meet/sdk/DropboxModule.java
+++ b/android/sdk/src/main/java/org/jitsi/meet/sdk/DropboxModule.java
@@ -8,8 +8,6 @@ import android.text.TextUtils;

 import com.dropbox.core.DbxException;
 import com.dropbox.core.DbxRequestConfig;
-import com.dropbox.core.android.Auth;
-import com.dropbox.core.oauth.DbxCredential;
 import com.dropbox.core.v2.DbxClientV2;
 import com.dropbox.core.v2.users.FullAccount;
 import com.dropbox.core.v2.users.SpaceAllocation;
@@ -19,6 +17,7 @@ import com.facebook.react.bridge.LifecycleEventListener;
 import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.dropbox.core.android.Auth;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.module.annotations.ReactModule;
@@ -67,7 +66,7 @@ class DropboxModule
    @ReactMethod
    public void authorize(final Promise promise) {
        if (isEnabled) {
-            Auth.startOAuth2PKCE(this.getCurrentActivity(), appKey, DbxRequestConfig.newBuilder(clientId).build());
+            Auth.startOAuth2Authentication(this.getCurrentActivity(), appKey);
            this.promise = promise;
        } else {
            promise.reject(
@@ -182,23 +181,11 @@ class DropboxModule

    @Override
    public void onHostResume() {
-        DbxCredential credential = Auth.getDbxCredential();
-
-        if (this.promise != null ) {
-            if (credential != null) {
-                WritableMap result = Arguments.createMap();
-                result.putString("token", credential.getAccessToken());
-                result.putString("rToken", credential.getRefreshToken());
-                result.putDouble("expireDate", credential.getExpiresAt());
-
-                this.promise.resolve(result);
-                this.promise = null;
-            } else {
-                this.promise.reject("Invalid dropbox credentials");
-            }
+        String token = Auth.getOAuth2Token();

+        if (token != null && this.promise != null) {
+            this.promise.resolve(token);
            this.promise = null;
        }
-
    }
 }
--- a/android/sdk/src/main/java/org/jitsi/meet/sdk/JitsiMeetActivity.java
+++ b/android/sdk/src/main/java/org/jitsi/meet/sdk/JitsiMeetActivity.java
@@ -24,7 +24,7 @@ import android.net.Uri;
 import android.os.Bundle;

 import androidx.annotation.Nullable;
-import androidx.appcompat.app.AppCompatActivity;
+import androidx.fragment.app.FragmentActivity;
 import androidx.localbroadcastmanager.content.LocalBroadcastManager;

 import com.facebook.react.modules.core.PermissionListener;
@@ -38,7 +38,7 @@ 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 AppCompatActivity
+public class JitsiMeetActivity extends FragmentActivity
    implements JitsiMeetActivityInterface {

    protected static final String TAG = JitsiMeetActivity.class.getSimpleName();
--- a/android/sdk/src/main/java/org/jitsi/meet/sdk/JitsiMeetActivityDelegate.java
+++ b/android/sdk/src/main/java/org/jitsi/meet/sdk/JitsiMeetActivityDelegate.java
@@ -116,15 +116,12 @@ public class JitsiMeetActivityDelegate {
            = ReactInstanceManagerHolder.getReactInstanceManager();

        if (reactInstanceManager != null) {
-            try {
+            // Try to avoid a crash because some devices trip on this assert:
+            // https://github.com/facebook/react-native/blob/df4e67fe75d781d1eb264128cadf079989542755/ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManager.java#L512
+            // Why this happens is a mystery wrapped in an enigma.
+            ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
+            if (reactContext != null && activity == reactContext.getCurrentActivity()) {
                reactInstanceManager.onHostPause(activity);
-            } catch (AssertionError e) {
-                // There seems to be a problem in RN when resuming an Activity when
-                // rotation is involved and the planets align. There doesn't seem to
-                // be a proper solution, but since the activity is going away anyway,
-                // we'll YOLO-ignore the exception and hope fo the best.
-                // Ref: https://github.com/facebook/react-native/search?q=Pausing+an+activity+that+is+not+the+current+activity%2C+this+is+incorrect%21&type=issues
-                JitsiMeetLogger.e(e, "Error running onHostPause, ignoring");
            }
        }
    }
--- a/android/sdk/src/main/java/org/jitsi/meet/sdk/JitsiMeetConferenceOptions.java
+++ b/android/sdk/src/main/java/org/jitsi/meet/sdk/JitsiMeetConferenceOptions.java
@@ -40,6 +40,10 @@ public class JitsiMeetConferenceOptions implements Parcelable {
     * Room name.
     */
    private String room;
+    /**
+     * Conference subject.
+     */
+    private String subject;
    /**
     * JWT token used for authentication.
     */
@@ -50,16 +54,19 @@ public class JitsiMeetConferenceOptions implements Parcelable {
     */
    private Bundle colorScheme;

-    /**
-     * Config. See: https://github.com/jitsi/jitsi-meet/blob/master/config.js
-     */
-    private Bundle config;
-
    /**
     * Feature flags. See: https://github.com/jitsi/jitsi-meet/blob/master/react/features/base/flags/constants.js
     */
    private Bundle featureFlags;

+    /**
+     * Set to {@code true} to join the conference with audio / video muted or to start in audio
+     * only mode respectively.
+     */
+    private Boolean audioMuted;
+    private Boolean audioOnly;
+    private Boolean videoMuted;
+
    /**
     * USer information, to be used when no token is specified.
     */
@@ -73,6 +80,10 @@ public class JitsiMeetConferenceOptions implements Parcelable {
        return room;
    }

+    public String getSubject() {
+        return subject;
+    }
+
    public String getToken() {
        return token;
    }
@@ -85,6 +96,18 @@ public class JitsiMeetConferenceOptions implements Parcelable {
        return featureFlags;
    }

+    public boolean getAudioMuted() {
+        return audioMuted;
+    }
+
+    public boolean getAudioOnly() {
+        return audioOnly;
+    }
+
+    public boolean getVideoMuted() {
+        return videoMuted;
+    }
+
    public JitsiMeetUserInfo getUserInfo() {
        return userInfo;
    }
@@ -95,16 +118,19 @@ public class JitsiMeetConferenceOptions implements Parcelable {
    public static class Builder {
        private URL serverURL;
        private String room;
+        private String subject;
        private String token;

        private Bundle colorScheme;
-        private Bundle config;
        private Bundle featureFlags;

+        private Boolean audioMuted;
+        private Boolean audioOnly;
+        private Boolean videoMuted;
+
        private JitsiMeetUserInfo userInfo;

        public Builder() {
-            config = new Bundle();
            featureFlags = new Bundle();
        }

@@ -136,7 +162,7 @@ public class JitsiMeetConferenceOptions implements Parcelable {
         * @return - The {@link Builder} object itself so the method calls can be chained.
         */
        public Builder setSubject(String subject) {
-            setConfigOverride("subject", subject);
+            this.subject = subject;

            return this;
        }
@@ -167,11 +193,11 @@ public class JitsiMeetConferenceOptions implements Parcelable {

        /**
         * Indicates the conference will be joined with the microphone muted.
-         * @param audioMuted - Muted indication.
+         * @param muted - Muted indication.
         * @return - The {@link Builder} object itself so the method calls can be chained.
         */
-        public Builder setAudioMuted(boolean audioMuted) {
-            setConfigOverride("startWithAudioMuted", audioMuted);
+        public Builder setAudioMuted(boolean muted) {
+            this.audioMuted = muted;

            return this;
        }
@@ -183,7 +209,7 @@ public class JitsiMeetConferenceOptions implements Parcelable {
         * @return - The {@link Builder} object itself so the method calls can be chained.
         */
        public Builder setAudioOnly(boolean audioOnly) {
-            setConfigOverride("startAudioOnly", audioOnly);
+            this.audioOnly = audioOnly;

            return this;
        }
@@ -193,7 +219,7 @@ public class JitsiMeetConferenceOptions implements Parcelable {
         * @return - The {@link Builder} object itself so the method calls can be chained.
         */
        public Builder setVideoMuted(boolean videoMuted) {
-            setConfigOverride("startWithVideoMuted", videoMuted);
+            this.videoMuted = videoMuted;

            return this;
        }
@@ -235,36 +261,6 @@ public class JitsiMeetConferenceOptions implements Parcelable {
            return this;
        }

-        public Builder setConfigOverride(String config, String value) {
-            this.config.putString(config, value);
-
-            return this;
-        }
-
-        public Builder setConfigOverride(String config, int value) {
-            this.config.putInt(config, value);
-
-            return this;
-        }
-
-        public Builder setConfigOverride(String config, boolean value) {
-            this.config.putBoolean(config, value);
-
-            return this;
-        }
-
-        public Builder setConfigOverride(String config, Bundle bundle) {
-            this.config.putBundle(config, bundle);
-
-            return this;
-        }
-
-        public Builder setConfigOverride(String config, String[] list) {
-            this.config.putStringArray(config, list);
-
-            return this;
-        }
-
        /**
         * Builds the immutable {@link JitsiMeetConferenceOptions} object with the configuration
         * that this {@link Builder} instance specified.
@@ -275,10 +271,13 @@ public class JitsiMeetConferenceOptions implements Parcelable {

            options.serverURL = this.serverURL;
            options.room = this.room;
+            options.subject = this.subject;
            options.token = this.token;
            options.colorScheme = this.colorScheme;
-            options.config = this.config;
            options.featureFlags = this.featureFlags;
+            options.audioMuted = this.audioMuted;
+            options.audioOnly = this.audioOnly;
+            options.videoMuted = this.videoMuted;
            options.userInfo = this.userInfo;

            return options;
@@ -291,11 +290,17 @@ public class JitsiMeetConferenceOptions implements Parcelable {
    private JitsiMeetConferenceOptions(Parcel in) {
        serverURL = (URL) in.readSerializable();
        room = in.readString();
+        subject = in.readString();
        token = in.readString();
        colorScheme = in.readBundle();
-        config = in.readBundle();
        featureFlags = in.readBundle();
        userInfo = new JitsiMeetUserInfo(in.readBundle());
+        byte tmpAudioMuted = in.readByte();
+        audioMuted = tmpAudioMuted == 0 ? null : tmpAudioMuted == 1;
+        byte tmpAudioOnly = in.readByte();
+        audioOnly = tmpAudioOnly == 0 ? null : tmpAudioOnly == 1;
+        byte tmpVideoMuted = in.readByte();
+        videoMuted = tmpVideoMuted == 0 ? null : tmpVideoMuted == 1;
    }

    Bundle asProps() {
@@ -312,6 +317,21 @@ public class JitsiMeetConferenceOptions implements Parcelable {
            props.putBundle("colorScheme", colorScheme);
        }

+        Bundle config = new Bundle();
+
+        if (audioMuted != null) {
+            config.putBoolean("startWithAudioMuted", audioMuted);
+        }
+        if (audioOnly != null) {
+            config.putBoolean("startAudioOnly", audioOnly);
+        }
+        if (videoMuted != null) {
+            config.putBoolean("startWithVideoMuted", videoMuted);
+        }
+        if (subject != null) {
+            config.putString("subject", subject);
+        }
+
        Bundle urlProps = new Bundle();

        // The room is fully qualified
@@ -359,11 +379,14 @@ public class JitsiMeetConferenceOptions implements Parcelable {
    public void writeToParcel(Parcel dest, int flags) {
        dest.writeSerializable(serverURL);
        dest.writeString(room);
+        dest.writeString(subject);
        dest.writeString(token);
        dest.writeBundle(colorScheme);
-        dest.writeBundle(config);
        dest.writeBundle(featureFlags);
        dest.writeBundle(userInfo != null ? userInfo.asBundle() : new Bundle());
+        dest.writeByte((byte) (audioMuted == null ? 0 : audioMuted ? 1 : 2));
+        dest.writeByte((byte) (audioOnly == null ? 0 : audioOnly ? 1 : 2));
+        dest.writeByte((byte) (videoMuted == null ? 0 : videoMuted ? 1 : 2));
    }

    @Override
--- a/android/sdk/src/main/java/org/jitsi/meet/sdk/LocaleDetector.java
+++ b/android/sdk/src/main/java/org/jitsi/meet/sdk/LocaleDetector.java
@@ -47,7 +47,7 @@ class LocaleDetector extends ReactContextBaseJavaModule {
    public Map<String, Object> getConstants() {
        Context context = getReactApplicationContext();
        HashMap<String,Object> constants = new HashMap<>();
-        constants.put("locale", context.getResources().getConfiguration().locale.toLanguageTag());
+        constants.put("locale", context.getResources().getConfiguration().locale.toString());
        return constants;
    }

@@ -55,4 +55,4 @@ class LocaleDetector extends ReactContextBaseJavaModule {
    public String getName() {
        return "LocaleDetector";
    }
-}
+}
--- a/android/sdk/src/main/java/org/jitsi/meet/sdk/NotificationChannels.java
+++ b/android/sdk/src/main/java/org/jitsi/meet/sdk/NotificationChannels.java
@@ -1,10 +0,0 @@
-package org.jitsi.meet.sdk;
-
-import java.util.ArrayList;
-import java.util.List;
-
-public class NotificationChannels {
-    static final String ONGOING_CONFERENCE_CHANNEL_ID = "JitsiOngoingConferenceChannel";
-
-    public static List<String> allIds = new ArrayList<String>() {{ add(ONGOING_CONFERENCE_CHANNEL_ID); }};
-}
--- a/android/sdk/src/main/java/org/jitsi/meet/sdk/OngoingNotification.java
+++ b/android/sdk/src/main/java/org/jitsi/meet/sdk/OngoingNotification.java
@@ -16,8 +16,6 @@

 package org.jitsi.meet.sdk;

-import static org.jitsi.meet.sdk.NotificationChannels.ONGOING_CONFERENCE_CHANNEL_ID;
-
 import android.app.Notification;
 import android.app.NotificationChannel;
 import android.app.NotificationManager;
@@ -41,6 +39,9 @@ import java.util.Random;
 class OngoingNotification {
    private static final String TAG = OngoingNotification.class.getSimpleName();

+    private static final String CHANNEL_ID = "JitsiNotificationChannel";
+    private static final String CHANNEL_NAME = "Ongoing Conference Notifications";
+
    static final int NOTIFICATION_ID = new Random().nextInt(99999) + 10000;
    private static long startingTime = 0;

@@ -59,13 +60,13 @@ class OngoingNotification {
            = (NotificationManager) context.getSystemService(Context.NOTIFICATION_SERVICE);

        NotificationChannel channel
-            = notificationManager.getNotificationChannel(ONGOING_CONFERENCE_CHANNEL_ID);
+            = notificationManager.getNotificationChannel(CHANNEL_ID);
        if (channel != null) {
            // The channel was already created, no need to do it again.
            return;
        }

-        channel = new NotificationChannel(ONGOING_CONFERENCE_CHANNEL_ID, context.getString(R.string.ongoing_notification_action_unmute), NotificationManager.IMPORTANCE_DEFAULT);
+        channel = new NotificationChannel(CHANNEL_ID, CHANNEL_NAME, NotificationManager.IMPORTANCE_DEFAULT);
        channel.enableLights(false);
        channel.enableVibration(false);
        channel.setShowBadge(false);
@@ -81,9 +82,9 @@ class OngoingNotification {
        }

        Intent notificationIntent = new Intent(context, context.getClass());
-        PendingIntent pendingIntent = PendingIntent.getActivity(context, 0, notificationIntent, PendingIntent.FLAG_IMMUTABLE);
+        PendingIntent pendingIntent = PendingIntent.getActivity(context, 0, notificationIntent, 0);

-        NotificationCompat.Builder builder = new NotificationCompat.Builder(context, ONGOING_CONFERENCE_CHANNEL_ID);
+        NotificationCompat.Builder builder = new NotificationCompat.Builder(context, CHANNEL_ID);

        if (startingTime == 0) {
            startingTime = System.currentTimeMillis();
@@ -124,7 +125,7 @@ class OngoingNotification {
        Intent intent = new Intent(context, JitsiMeetOngoingConferenceService.class);
        intent.setAction(action.getName());
        PendingIntent pendingIntent
-            = PendingIntent.getService(context, 0, intent, PendingIntent.FLAG_IMMUTABLE);
+            = PendingIntent.getService(context, 0, intent, PendingIntent.FLAG_UPDATE_CURRENT);
        String title = context.getString(titleId);
        return new NotificationCompat.Action(0, title, pendingIntent);
    }
--- a/android/sdk/src/main/java/org/jitsi/meet/sdk/ReactInstanceManagerHolder.java
+++ b/android/sdk/src/main/java/org/jitsi/meet/sdk/ReactInstanceManagerHolder.java
@@ -30,6 +30,7 @@ import com.facebook.react.devsupport.DevInternalSettings;
 import com.facebook.react.jscexecutor.JSCExecutorFactory;
 import com.facebook.react.modules.core.DeviceEventManagerModule;
 import com.facebook.react.uimanager.ViewManager;
+import com.facebook.soloader.SoLoader;
 import com.oney.WebRTCModule.RTCVideoViewManager;
 import com.oney.WebRTCModule.WebRTCModule;

@@ -173,28 +174,22 @@ class ReactInstanceManagerHolder {
            return;
        }

+        SoLoader.init(activity, /* native exopackage */ false);
+
        List<ReactPackage> packages
            = new ArrayList<>(Arrays.asList(
-                new com.reactnativecommunity.asyncstorage.AsyncStoragePackage(),
-                new com.ocetnik.timer.BackgroundTimerPackage(),
                new com.calendarevents.CalendarEventsPackage(),
                new com.corbt.keepawake.KCKeepAwakePackage(),
                new com.facebook.react.shell.MainReactPackage(),
-                new com.reactnativecommunity.netinfo.NetInfoPackage(),
-                new com.oblador.performance.PerformancePackage(),
-                new com.reactnativecommunity.slider.ReactSliderPackage(),
-                new com.brentvatne.react.ReactVideoPackage(),
-                new com.swmansion.reanimated.ReanimatedPackage(),
-                new org.reactnative.maskedview.RNCMaskedViewPackage(),
-                new com.reactnativecommunity.webview.RNCWebViewPackage(),
+                new com.horcrux.svg.SvgPackage(),
                new com.kevinresol.react_native_default_preference.RNDefaultPreferencePackage(),
                new com.learnium.RNDeviceInfo.RNDeviceInfo(),
-                new com.swmansion.gesturehandler.react.RNGestureHandlerPackage(),
+                new com.ocetnik.timer.BackgroundTimerPackage(),
+                new com.reactnativecommunity.asyncstorage.AsyncStoragePackage(),
+                new com.reactnativecommunity.netinfo.NetInfoPackage(),
+                new com.reactnativecommunity.webview.RNCWebViewPackage(),
                new com.rnimmersive.RNImmersivePackage(),
-                new com.swmansion.rnscreens.RNScreensPackage(),
                new com.zmxv.RNSound.RNSoundPackage(),
-                new com.th3rdwave.safeareacontext.SafeAreaContextPackage(),
-                new com.horcrux.svg.SvgPackage(),
                new ReactPackageAdapter() {
                    @Override
                    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
@@ -206,16 +201,6 @@ class ReactInstanceManagerHolder {
                    }
                }));

-        // AmplitudeReactNativePackage
-        try {
-            Class<?> amplitudePackageClass = Class.forName("com.amplitude.reactnative.AmplitudeReactNativePackage");
-            Constructor constructor = amplitudePackageClass.getConstructor();
-            packages.add((ReactPackage)constructor.newInstance());
-        } catch (Exception e) {
-            // Ignore any error, the module is not compiled when LIBRE_BUILD is enabled.
-        }
-
-        // RNGoogleSigninPackage
        try {
            Class<?> googlePackageClass = Class.forName("co.apptailor.googlesignin.RNGoogleSigninPackage");
            Constructor constructor = googlePackageClass.getConstructor();
--- a/android/sdk/src/main/res/values/strings.xml
+++ b/android/sdk/src/main/res/values/strings.xml
@@ -6,5 +6,4 @@
    <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>
-    <string name="ongoing_notification_channel_name">Ongoing Conference Notifications</string>
 </resources>
--- a/android/settings.gradle
+++ b/android/settings.gradle
@@ -1,8 +1,6 @@
 rootProject.name = 'jitsi-meet'

 include ':app', ':sdk'
-include ':react-native-amplitude'
-project(':react-native-amplitude').projectDir = new File(rootProject.projectDir, '../node_modules/@amplitude/react-native//android')
 include ':react-native-async-storage'
 project(':react-native-async-storage').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-async-storage/async-storage/android')
 include ':react-native-background-timer'
@@ -15,35 +13,19 @@ 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-gesture-handler'
-project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/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-masked-view_masked-view'
-project(':react-native-masked-view_masked-view').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-masked-view/masked-view/android')
-include ':react-native-performance'
-project(':react-native-performance').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-performance/android')
-include ':react-native-reanimated'
-project(':react-native-reanimated').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-reanimated/android')
-include ':react-native-safe-area-context'
-project(':react-native-safe-area-context').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-safe-area-context/android')
-include ':react-native-screens'
-project(':react-native-screens').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-screens/android')
-include ':react-native-slider'
-project(':react-native-slider').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/slider/android')
 include ':react-native-sound'
 project(':react-native-sound').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sound/android')
 include ':react-native-splash-screen'
 project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
 include ':react-native-svg'
 project(':react-native-svg').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-svg/android')
-include ':react-native-video'
-project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
 include ':react-native-webrtc'
 project(':react-native-webrtc').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webrtc/android')
 include ':react-native-webview'
-project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
+project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
--- a/app.js
+++ b/app.js
@@ -1,8 +1,9 @@
 /* application specific logic */

 import 'jquery';
+import 'jQuery-Impromptu';

-import '@matrix-org/olm';
+import 'olm';

 import 'focus-visible';

--- a/babel.config.js
+++ b/babel.config.js
@@ -1,9 +0,0 @@
-module.exports = {
-    presets: [ 'module:metro-react-native-babel-preset' ],
-    env: {
-        production: {
-            plugins: [ 'react-native-paper/babel' ]
-        }
-    },
-    plugins: [ 'optional-require' ]
-};
--- a/conference.js
+++ b/conference.js
--- a/config.js
+++ b/config.js
@@ -27,6 +27,9 @@ var config = {
    // Websocket URL
    // websocket: 'wss://jitsi-meet.example.com/xmpp-websocket',

+    // The name of client node advertised in XEP-0115 'c' stanza
+    clientNode: 'http://jitsi.org/jitsimeet',
+
    // The real JID of focus participant - can be overridden here
    // Do not change username - FIXME: Make focus username configurable
    // https://github.com/jitsi/jitsi-meet/issues/7376
@@ -41,16 +44,9 @@ var config = {
        // issues related to insertable streams.
        // disableE2EE: false,

-        // Enables/disables thumbnail reordering in the filmstrip. It is enabled by default unless explicitly
-        // disabled by the below option.
-        // enableThumbnailReordering: true,
-
-        // Enables XMPP WebSocket (as opposed to BOSH) for the given amount of users.
-        // mobileXmppWsThreshold: 10 // enable XMPP WebSockets on mobile for 10% of the users
-
        // P2P test mode disables automatic switching to P2P when there are 2
        // participants in the conference.
-        // p2pTestMode: false,
+        p2pTestMode: false

        // Enables the test specific features consumed by jitsi-meet-torture
        // testMode: false
@@ -63,10 +59,8 @@ var config = {
        // simulcast is turned off for the desktop share. If presenter is turned
        // on while screensharing is in progress, the max bitrate is automatically
        // adjusted to 2.5 Mbps. This takes a value between 0 and 1 which determines
-        // the probability for this to be enabled. This setting has been deprecated.
-        // desktopSharingFrameRate.max now determines whether simulcast will be enabled
-        // or disabled for the screenshare.
-        // capScreenshareBitrate: 1 // 0 to disable - deprecated.
+        // the probability for this to be enabled.
+        // capScreenshareBitrate: 1 // 0 to disable

        // Enable callstats only for a percentage of users.
        // This takes a value between 0 and 100 which determines the probability for
@@ -74,15 +68,6 @@ var config = {
        // callStatsThreshold: 5 // enable callstats for 5% of the users.
    },

-    // Disables moderator indicators.
-    // disableModeratorIndicator: false,
-
-    // Disables the reactions feature.
-    // disableReactions: true,
-
-    // Disables polls feature.
-    // disablePolls: false,
-
    // Disables ICE/UDP by filtering out local and remote UDP candidates in
    // signalling.
    // webrtcIceUdpDisable: false,
@@ -95,9 +80,6 @@ var config = {
    // Media
    //

-    // Enable unified plan implementation support on Chromium based browsers.
-    // enableUnifiedOnChrome: false,
-
    // Audio

    // Disable measuring of audio levels.
@@ -114,10 +96,6 @@ var config = {
    // about the call.
    // enableSaveLogs: false,

-    // Enabling this will hide the "Show More" link in the GSM popover that can be
-    // used to display more statistics about the connection (IP, Port, protocol, etc).
-    // disableShowMoreStats: true,
-
    // Enabling this will run the lib-jitsi-meet noise detection module which will
    // notify the user if there is noise, other than voice, coming from the current
    // selected microphone. The purpose it to let the user know that the input could
@@ -139,34 +117,19 @@ var config = {
    // participants and to enable it back a reload is needed.
    // startSilent: false

-    // Enables support for opus-red (redundancy for Opus).
-    // enableOpusRed: false,
+    // Sets the preferred target bitrate for the Opus audio codec by setting its
+    // 'maxaveragebitrate' parameter. Currently not available in p2p mode.
+    // Valid values are in the range 6000 to 510000
+    // opusMaxAverageBitrate: 20000,

-    // Specify audio quality stereo and opusMaxAverageBitrate values in order to enable HD audio.
-    // Beware, by doing so, you are disabling echo cancellation, noise suppression and AGC.
-    // audioQuality: {
-    //     stereo: false,
-    //     opusMaxAverageBitrate: null // Value to fit the 6000 to 510000 range.
-    // },
+    // Enables support for opus-red (redundancy for Opus).
+    // enableOpusRed: false

    // Video

    // Sets the preferred resolution (height) for local video. Defaults to 720.
    // resolution: 720,

-    // Specifies whether the raised hand will hide when someone becomes a dominant speaker or not
-    // disableRemoveRaisedHandOnFocus: false,
-
-    // Specifies whether there will be a search field in speaker stats or not
-    // disableSpeakerStatsSearch: false,
-
-    // Specifies whether participants in speaker stats should be ordered or not, and with what priority
-    // speakerStatsOrder: [
-    //  'role', <- Moderators on top
-    //  'name', <- Alphabetically by name
-    //  'hasLeft', <- The ones that have left in the bottom
-    // ] <- the order of the array elements determines priority
-
    // How many participants while in the tile view mode, before the receiving video quality is reduced from HD to SD.
    // Use -1 to disable.
    // maxFullResolutionParticipants: 2,
@@ -189,10 +152,9 @@ var config = {
    // Enable / disable simulcast support.
    // disableSimulcast: false,

-    // Enable / disable layer suspension.  If enabled, endpoints whose HD layers are not in use will be suspended
-    // (no longer sent) until they are requested again. This is enabled by default. This must be enabled for screen
-    // sharing to work as expected on Chrome. Disabling this might result in low resolution screenshare being sent
-    // by the client.
+    // Enable / disable layer suspension.  If enabled, endpoints whose HD
+    // layers are not in use will be suspended (no longer sent) until they
+    // are requested again.
    // enableLayerSuspension: false,

    // Every participant after the Nth will start video muted.
@@ -254,18 +216,6 @@ var config = {
    // subtitles and buttons can be configured)
    // transcribingEnabled: false,

-    // If true transcriber will use the application language.
-    // The application language is either explicitly set by participants in their settings or automatically
-    // detected based on the environment, e.g. if the app is opened in a chrome instance which is using french as its
-    // default language then transcriptions for that participant will be in french.
-    // Defaults to true.
-    // transcribeWithAppLanguage: true,
-
-    // Transcriber language. This settings will only work if "transcribeWithAppLanguage" is explicitly set to false.
-    // Available languages can be found in
-    // ./src/react/features/transcribing/transcriber-langs.json.
-    // preferredTranscribeLanguage: 'en-US',
-
    // Enables automatic turning on captions when recording is started
    // autoCaptionOnRecord: false,

@@ -274,20 +224,6 @@ var config = {
    // Default value for the channel "last N" attribute. -1 for unlimited.
    channelLastN: -1,

-    // Connection indicators
-    // connectionIndicators: {
-    //     autoHide: true,
-    //     autoHideTimeout: 5000,
-    //     disabled: false,
-    //     disableDetails: false,
-    //     inactiveDisabled: false
-    // },
-
-    // Provides a way for the lastN value to be controlled through the UI.
-    // When startLastN is present, conference starts with a last-n value of startLastN and channelLastN
-    // value will be used when the quality level is selected using "Manage Video Quality" slider.
-    // startLastN: 1,
-
    // Provides a way to use different "last N" values based on the number of participants in the conference.
    // The keys in an Object represent number of participants and the values are "last N" to be used when number of
    // participants gets to or above the number.
@@ -325,24 +261,12 @@ var config = {
    //    // to take effect.
    //    preferredCodec: 'VP8',
    //
-    //    // Provides a way to enforce the preferred codec for the conference even when the conference has endpoints
-    //    // that do not support the preferred codec. For example, older versions of Safari do not support VP9 yet.
-    //    // This will result in Safari not being able to decode video from endpoints sending VP9 video.
-    //    // When set to false, the conference falls back to VP8 whenever there is an endpoint that doesn't support the
-    //    // preferred codec and goes back to the preferred codec when that endpoint leaves.
-    //    // enforcePreferredCodec: false,
-    //
    //    // Provides a way to configure the maximum bitrates that will be enforced on the simulcast streams for
    //    // video tracks. The keys in the object represent the type of the stream (LD, SD or HD) and the values
    //    // are the max.bitrates to be set on that particular type of stream. The actual send may vary based on
    //    // the available bandwidth calculated by the browser, but it will be capped by the values specified here.
    //    // This is currently not implemented on app based clients on mobile.
    //    maxBitratesVideo: {
-    //          H264: {
-    //              low: 200000,
-    //              standard: 500000,
-    //              high: 1500000
-    //          },
    //          VP8 : {
    //              low: 200000,
    //              standard: 500000,
@@ -351,7 +275,7 @@ var config = {
    //          VP9: {
    //              low: 100000,
    //              standard: 300000,
-    //              high: 1200000
+    //              high:  1200000
    //          }
    //    },
    //
@@ -408,7 +332,8 @@ var config = {
    // enableIceRestart: false,

    // Enables forced reload of the client when the call is migrated as a result of
-    // the bridge going down.
+    // 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
@@ -416,11 +341,6 @@ var config = {
    // bridge itself is reachable via UDP)
    // useTurnUdp: false

-    // Enable support for encoded transform in supported browsers. This allows
-    // E2EE to work in Safari if the corresponding flag is enabled in the browser.
-    // Experimental.
-    // enableEncodedTransformSupport: false,
-
    // UI
    //

@@ -449,9 +369,7 @@ var config = {
    // enableClosePage: false,

    // Disable hiding of remote thumbnails when in a 1-on-1 conference call.
-    // Setting this to null, will also disable showing the remote videos
-    // when the toolbar is shown on mouse movements
-    // disable1On1Mode: null | false | true,
+    // disable1On1Mode: false,

    // Default language for the user interface.
    // defaultLanguage: 'en',
@@ -477,10 +395,6 @@ var config = {
    // When 'true', it shows an intermediate page before joining, where the user can configure their devices.
    // prejoinPageEnabled: false,

-    // When 'true', the user cannot edit the display name.
-    // (Mainly useful when used in conjuction with the JWT so the JWT name becomes read only.)
-    // readOnlyName: 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
@@ -500,10 +414,6 @@ var config = {
    // Base URL for a Gravatar-compatible service. Defaults to libravatar.
    // gravatarBaseURL: 'https://seccdn.libravatar.org/avatar/',

-    // App name to be displayed in the invitation email subject, as an alternative to
-    // interfaceConfig.APP_NAME.
-    // inviteAppName: null,
-
    // Moved from interfaceConfig(TOOLBAR_BUTTONS).
    // The name of the toolbar buttons to display in the toolbar, including the
    // "More actions" menu. If present, the button will display. Exceptions are
@@ -516,94 +426,13 @@ var config = {
    // - 'desktop' controls the "Share your screen" button
    // - if `toolbarButtons` is undefined, we fallback to enabling all buttons on the UI
    // toolbarButtons: [
-    //    'camera',
-    //    'chat',
-    //    'closedcaptions',
-    //    'desktop',
-    //    'download',
-    //    'embedmeeting',
-    //    'etherpad',
-    //    'feedback',
-    //    'filmstrip',
-    //    'fullscreen',
-    //    'hangup',
-    //    'help',
-    //    'invite',
-    //    'livestreaming',
-    //    'microphone',
-    //    'mute-everyone',
-    //    'mute-video-everyone',
-    //    'participants-pane',
-    //    'profile',
-    //    'raisehand',
-    //    'recording',
-    //    'security',
-    //    'select-background',
-    //    'settings',
-    //    'shareaudio',
-    //    'sharedvideo',
-    //    'shortcuts',
-    //    'stats',
-    //    'tileview',
-    //    'toggle-camera',
-    //    'videoquality',
-    //    '__end'
+    //    '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'
    // ],

-    // Holds values related to toolbar visibility control.
-    // toolbarConfig: {
-    //     // Moved from interfaceConfig.INITIAL_TOOLBAR_TIMEOUT
-    //     // The initial numer of miliseconds for the toolbar buttons to be visible on screen.
-    //     initialTimeout: 20000,
-    //     // Moved from interfaceConfig.TOOLBAR_TIMEOUT
-    //     // Number of miliseconds for the toolbar buttons to be visible on screen.
-    //     timeout: 4000,
-    //     // Moved from interfaceConfig.TOOLBAR_ALWAYS_VISIBLE
-    //     // Whether toolbar should be always visible or should hide after x miliseconds.
-    //     alwaysVisible: false
-    // },
-
-    // Toolbar buttons which have their click event exposed through the API on
-    // `toolbarButtonClicked` event instead of executing the normal click routine.
-    // buttonsWithNotifyClick: [
-    //    'camera',
-    //    'chat',
-    //    'closedcaptions',
-    //    'desktop',
-    //    'download',
-    //    'embedmeeting',
-    //    'etherpad',
-    //    'feedback',
-    //    'filmstrip',
-    //    'fullscreen',
-    //    'hangup',
-    //    'help',
-    //    'invite',
-    //    'livestreaming',
-    //    'microphone',
-    //    'mute-everyone',
-    //    'mute-video-everyone',
-    //    'participants-pane',
-    //    'profile',
-    //    'raisehand',
-    //    'recording',
-    //    'security',
-    //    'select-background',
-    //    'settings',
-    //    'shareaudio',
-    //    'sharedvideo',
-    //    'shortcuts',
-    //    'stats',
-    //    'tileview',
-    //    'toggle-camera',
-    //    'videoquality',
-    //    '__end'
-    // ],
-
-    // List of pre meeting screens buttons to hide. The values must be one or more of the 5 allowed buttons:
-    // 'microphone', 'camera', 'select-background', 'invite', 'settings'
-    // hiddenPremeetingButtons: [],
-
    // Stats
    //

@@ -621,28 +450,6 @@ var config = {
    // callStatsID: '',
    // callStatsSecret: '',

-    // The callstats initialize config params as described in the API:
-    // https://docs.callstats.io/docs/javascript#callstatsinitialize-with-app-secret
-    // callStatsConfigParams: {
-    //     disableBeforeUnloadHandler: true, // disables callstats.js's window.onbeforeunload parameter.
-    //     applicationVersion: "app_version", // Application version specified by the developer.
-    //     disablePrecalltest: true, // disables the pre-call test, it is enabled by default.
-    //     siteID: "siteID", // The name/ID of the site/campus from where the call/pre-call test is made.
-    //     additionalIDs: { // additionalIDs object, contains application related IDs.
-    //         customerID: "Customer Identifier. Example, walmart.",
-    //         tenantID: "Tenant Identifier. Example, monster.",
-    //         productName: "Product Name. Example, Jitsi.",
-    //         meetingsName: "Meeting Name. Example, Jitsi loves callstats.",
-    //         serverName: "Server/MiddleBox Name. Example, jvb-prod-us-east-mlkncws12.",
-    //         pbxID: "PBX Identifier. Example, walmart.",
-    //         pbxExtensionID: "PBX Extension Identifier. Example, 5625.",
-    //         fqExtensionID: "Fully qualified Extension Identifier. Example, +71 (US) +5625.",
-    //         sessionID: "Session Identifier. Example, session-12-34"
-    //     },
-    //     collectLegacyStats: true, //enables the collection of legacy stats in chrome browser
-    //     collectIP: true //enables the collection localIP address
-    // },
-
    // Enables sending participants' display names to callstats
    // enableDisplayNameInStats: false,

@@ -674,8 +481,12 @@ var config = {
        // connection.
        enabled: true,

-        // Enable unified plan implementation support on Chromium for p2p connection.
-        // enableUnifiedOnChrome: false,
+        // The STUN servers that will be used in the peer to peer connections
+        stunServers: [
+
+            // { urls: 'stun:jitsi-meet.example.com:3478' },
+            { urls: 'stun:meet-jit-si-turnrelay.jitsi.net:443' }
+        ]

        // Sets the ICE transport policy for the p2p connection. At the time
        // of this writing the list of possible values are 'all' and 'relay',
@@ -687,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'.
@@ -702,20 +513,10 @@ var config = {

        // How long we're going to wait, before going back to P2P after the 3rd
        // participant has left the conference (to filter out page reload).
-        // backToP2PDelay: 5,
-
-        // The STUN servers that will be used in the peer to peer connections
-        stunServers: [
-
-            // { urls: 'stun:jitsi-meet.example.com:3478' },
-            { urls: 'stun:meet-jit-si-turnrelay.jitsi.net:443' }
-        ]
+        // backToP2PDelay: 5
    },

    analytics: {
-        // True if the analytics should be disabled
-        // disabled: false,
-
        // The Google Analytics Tracking ID:
        // googleAnalyticsTrackingId: 'your-tracking-id-UA-123456-1'

@@ -739,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: [
@@ -759,43 +560,13 @@ var config = {
        // userRegion: "asia"
    },

-    // Array<string> of disabled sounds.
-    // Possible values:
-    // - 'ASKED_TO_UNMUTE_SOUND'
-    // - 'E2EE_OFF_SOUND'
-    // - 'E2EE_ON_SOUND'
-    // - 'INCOMING_MSG_SOUND'
-    // - 'KNOCKING_PARTICIPANT_SOUND'
-    // - 'LIVE_STREAMING_OFF_SOUND'
-    // - 'LIVE_STREAMING_ON_SOUND'
-    // - 'NO_AUDIO_SIGNAL_SOUND'
-    // - 'NOISY_AUDIO_INPUT_SOUND'
-    // - 'OUTGOING_CALL_EXPIRED_SOUND'
-    // - 'OUTGOING_CALL_REJECTED_SOUND'
-    // - 'OUTGOING_CALL_RINGING_SOUND'
-    // - 'OUTGOING_CALL_START_SOUND'
-    // - 'PARTICIPANT_JOINED_SOUND'
-    // - 'PARTICIPANT_LEFT_SOUND'
-    // - 'RAISE_HAND_SOUND'
-    // - 'REACTION_SOUND'
-    // - 'RECORDING_OFF_SOUND'
-    // - 'RECORDING_ON_SOUND'
-    // - 'TALK_WHILE_MUTED_SOUND'
-    // disabledSounds: [],
-
-    // DEPRECATED! Use `disabledSounds` instead.
    // Decides whether the start/stop recording audio notifications should play on record.
    // disableRecordAudioNotification: false,

-    // DEPRECATED! Use `disabledSounds` instead.
    // Disables the sounds that play when other participants join or leave the
    // conference (if set to true, these sounds will not be played).
    // disableJoinLeaveSounds: false,

-    // DEPRECATED! Use `disabledSounds` instead.
-    // Disables the sounds that play when a chat message is received.
-    // disableIncomingMessageSound: false,
-
    // Information for the chrome extension banner
    // chromeExtensionBanner: {
    //     // The chrome extension to be installed address
@@ -816,8 +587,8 @@ var config = {
    // localRecording: {
    // Enables local recording.
    // Additionally, 'localrecording' (all lowercase) needs to be added to
-    // the `toolbarButtons`-array for the Local Recording button to show up
-    // on the toolbar.
+    // TOOLBAR_BUTTONS in interface_config.js for the Local Recording
+    // button to show up on the toolbar.
    //
    //     enabled: true,
    //
@@ -880,9 +651,7 @@ var config = {
    // Options related to the remote participant menu.
    // remoteVideoMenu: {
    //     // If set to true the 'Kick out' button will be disabled.
-    //     disableKick: true,
-    //     // If set to true the 'Grant moderator' button will be disabled.
-    //     disableGrantModerator: true
+    //     disableKick: true
    // },

    // If set to true all muting operations of remote participants will be disabled.
@@ -894,11 +663,8 @@ var config = {
    /**
     External API url used to receive branding specific information.
     If there is no url set or there are missing fields, the defaults are applied.
-     The config file should be in JSON.
     None of the fields are mandatory and the response must have the shape:
     {
-         // The domain url to apply (will replace the domain in the sharing conference link/embed section)
-         inviteDomain: 'example-company.org,
         // The hex value for the colour used as background
         backgroundColor: '#fff',
         // The url for the image used as background
@@ -906,25 +672,11 @@ var config = {
         // The anchor url used when clicking the logo image
         logoClickUrl: 'https://example-company.org',
         // The url used for the image used as logo
-         logoImageUrl: 'https://example.com/logo-img.png',
-         // Overwrite for pool of background images for avatars
-         avatarBackgrounds: ['url(https://example.com/avatar-background-1.png)', '#FFF'],
-         // The lobby/prejoin screen background
-         premeetingBackground: 'url(https://example.com/premeeting-background.png)',
-         // A list of images that can be used as video backgrounds.
-         // When this field is present, the default images will be replaced with those provided.
-         virtualBackgrounds: ['https://example.com/img.jpg']
+         logoImageUrl: 'https://example.com/logo-img.png'
     }
    */
    // dynamicBrandingUrl: '',

-    // When true the user cannot add more images to be used as virtual background.
-    // Only the default ones from will be available.
-    // disableAddingBackgroundImages: false,
-
-    // Disables using screensharing as virtual background.
-    // disableScreensharingVirtualBackground: false,
-
    // Sets the background transparency level. '0' is fully transparent, '1' is opaque.
    // backgroundAlpha: 1,

@@ -936,34 +688,14 @@ var config = {
    // If true, tile view will not be enabled automatically when the participants count threshold is reached.
    // disableTileView: true,

-    // Controls the visibility and behavior of the top header conference info labels.
-    // If a label's id is not in any of the 2 arrays, it will not be visible at all on the header.
-    // conferenceInfo: {
-    //     // those labels will not be hidden in tandem with the toolbox.
-    //     alwaysVisible: ['recording', 'local-recording'],
-    //     // those labels will be auto-hidden in tandem with the toolbox buttons.
-    //     autoHide: [
-    //         'subject',
-    //         'conference-timer',
-    //         'participants-count',
-    //         'e2ee',
-    //         'transcribing',
-    //         'video-quality',
-    //         'insecure-room'
-    //     ]
-    // },
-
    // Hides the conference subject
-    // hideConferenceSubject: true,
+    // hideConferenceSubject: true

    // Hides the conference timer.
    // hideConferenceTimer: true,

-    // Hides the recording label
-    // hideRecordingLabel: false,
-
    // Hides the participants stats
-    // hideParticipantsStats: true,
+    // hideParticipantsStats: true

    // Sets the conference subject
    // subject: 'Conference Subject',
@@ -973,13 +705,6 @@ var config = {
    // is not persisting the local storage inside the iframe.
    // useHostPageLocalStorage: true,

-    // etherpad ("shared document") integration.
-    //
-
-    // If set, add a "Open shared document" link to the bottom right menu that
-    // will open an etherpad document.
-    // etherpad_base: 'https://your-etherpad-installati.on/p/',
-
    // List of undocumented settings used in jitsi-meet
    /**
     _immediateReloadThreshold
@@ -992,8 +717,8 @@ var config = {
     dialOutCodesUrl
     disableRemoteControl
     displayJids
+     etherpad_base
     externalConnectUrl
-     e2eeLabels
     firefox_fake_device
     googleApiApplicationClientID
     iAmRecorder
@@ -1035,11 +760,6 @@ var config = {
     websocketKeepAliveUrl
     */

-    /**
-     * Default interval (milliseconds) for triggering mouseMoved iframe API event
-     */
-    mouseMoveCallbackInterval: 1000,
-
    /**
        Use this array to configure which notifications will be shown to the user
        The items correspond to the title or description key of that notification
@@ -1073,19 +793,11 @@ var config = {
    //     'lobby.notificationTitle', // shown when lobby is toggled and when join requests are allowed / denied
    //     'localRecording.localRecording', // shown when a local recording is started
    //     'notify.disconnected', // shown when a participant has left
-    //     'notify.connectedOneMember', // show when a participant joined
-    //     'notify.connectedTwoMembers', // show when two participants joined simultaneously
-    //     'notify.connectedThreePlusMembers', // show when more than 2 participants joined simultaneously
    //     'notify.grantedTo', // shown when moderator rights were granted to a participant
    //     'notify.invitedOneMember', // shown when 1 participant has been invited
    //     'notify.invitedThreePlusMembers', // shown when 3+ participants have been invited
    //     'notify.invitedTwoMembers', // shown when 2 participants have been invited
    //     'notify.kickParticipant', // shown when a participant is kicked
-    //     'notify.moderationStartedTitle', // shown when AV moderation is activated
-    //     'notify.moderationStoppedTitle', // shown when AV moderation is deactivated
-    //     'notify.moderationInEffectTitle', // shown when user attempts to unmute audio during AV moderation
-    //     'notify.moderationInEffectVideoTitle', // shown when user attempts to enable video during AV moderation
-    //     'notify.moderationInEffectCSTitle', // shown when user attempts to share content during AV moderation
    //     'notify.mutedRemotelyTitle', // shown when user is muted by a remote party
    //     'notify.mutedTitle', // shown when user has been muted upon joining,
    //     'notify.newDeviceAudioTitle', // prompts the user to use a newly detected audio device
@@ -1094,7 +806,6 @@ var config = {
    //     'notify.passwordSetRemotely', // shown when a password has been set remotely
    //     'notify.raisedHand', // shown when a partcipant used raise hand,
    //     'notify.startSilentTitle', // shown when user joined with no audio
-    //     'notify.unmute', // shown to moderator when user raises hand during AV moderation
    //     'prejoin.errorDialOut',
    //     'prejoin.errorDialOutDisconnected',
    //     'prejoin.errorDialOutFailed',
@@ -1108,13 +819,7 @@ var config = {
    //     'toolbar.noisyAudioInputTitle', // shown when noise is detected for the current microphone
    //     'toolbar.talkWhileMutedPopup', // shown when user tries to speak while muted
    //     'transcribing.failedToStart' // shown when transcribing fails to start
-    // ],
-
-    // Prevent the filmstrip from autohiding when screen width is under a certain threshold
-    // disableFilmstripAutohiding: false,
-
-    // Specifies whether the chat emoticons are disabled or not
-    // disableChatSmileys: false,
+    // ]

    // Allow all above example options to include a trailing comma and
    // prevent fear when commenting out the last value.
--- a/connection.js
+++ b/connection.js
@@ -4,6 +4,7 @@ import { jitsiLocalStorage } from '@jitsi/js-utils';
 import Logger from 'jitsi-meet-logger';

 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 {
@@ -11,14 +12,11 @@ import {
    connectionFailed
 } from './react/features/base/connection/actions';
 import { openDialog } from './react/features/base/dialog/actions';
-import { setJWT } from './react/features/base/jwt';
 import {
    isFatalJitsiConnectionError,
    JitsiConnectionErrors,
    JitsiConnectionEvents
 } from './react/features/base/lib-jitsi-meet';
-import { getCustomerDetails } from './react/features/jaas/actions.any';
-import { isVpaasMeeting, getJaasJWT } from './react/features/jaas/functions';
 import { setPrejoinDisplayNameRequired } from './react/features/prejoin/actions';
 const logger = Logger.getLogger(__filename);

@@ -85,20 +83,9 @@ function checkForAttachParametersAndConnect(id, password, connection) {
 * @returns {Promise<JitsiConnection>} connection if
 * everything is ok, else error.
 */
-export async function connect(id, password, roomName) {
+export function connect(id, password, roomName) {
    const connectionConfig = Object.assign({}, config);
-    const state = APP.store.getState();
-    let { jwt } = state['features/base/jwt'];
-    const { iAmRecorder, iAmSipGateway } = state['features/base/config'];
-
-    if (!iAmRecorder && !iAmSipGateway && isVpaasMeeting(state)) {
-        await APP.store.dispatch(getCustomerDetails());
-
-        if (!jwt) {
-            jwt = await getJaasJWT(state);
-            APP.store.dispatch(setJWT(jwt));
-        }
-    }
+    const { jwt } = APP.store.getState()['features/base/jwt'];

    // Use Websocket URL for the web app if configured. Note that there is no 'isWeb' check, because there's assumption
    // that this code executes only on web browsers/electron. This needs to be changed when mobile and web are unified.
@@ -106,7 +93,9 @@ export async function connect(id, password, roomName) {

    serviceUrl += `?room=${roomName}`;

-    connectionConfig.serviceUrl = serviceUrl;
+    // FIXME Remove deprecated 'bosh' option assignment at some point(LJM will be accepting only 'serviceUrl' option
+    //  in future). It's included for the time being for Jitsi Meet and lib-jitsi-meet versions interoperability.
+    connectionConfig.serviceUrl = connectionConfig.bosh = serviceUrl;

    if (connectionConfig.websocketKeepAliveUrl) {
        connectionConfig.websocketKeepAliveUrl += `?room=${roomName}`;
@@ -254,6 +243,7 @@ function requestAuth(roomName) {

    return new Promise(resolve => {
        const onSuccess = connection => {
+            APP.store.dispatch(hideLoginDialog());
            resolve(connection);
        };

--- a/css/_atlaskit_overrides.scss
+++ b/css/_atlaskit_overrides.scss
@@ -24,6 +24,41 @@
    bottom: calc(#{$newToolbarSizeWithPadding}) !important;
 }

+.modal-dialog-form {
+    /**
+     * Override @atlaskit/dropdown-menu styling when in a modal because the
+     * dropdown backgrounds clash with the modal backgrounds.
+     */
+    .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.
@@ -45,18 +80,12 @@
 }

 .audio-preview > div:nth-child(2),
-.video-preview > div:nth-child(2),
-.reactions-menu-popup > div:nth-child(2) {
+.video-preview > div:nth-child(2) {
    margin-bottom: 4px;
    outline: none;
    padding: 0;
 }

-.reactions-menu-popup > div:nth-child(2) {
-    margin-bottom: 6px;
-    box-shadow: none;
-}
-
 /**
 * The following selectors keep the chat modal full-size anywhere between 100px
 * and 580px for desktop or 680px for mobile.
--- a/css/_audio-preview.scss
+++ b/css/_audio-preview.scss
@@ -9,11 +9,6 @@
        max-height: 456px;
        overflow: auto;
        width: 300px;
-        &-ul {
-            margin:0;
-            padding:0;
-            list-style-type: none;
-        }
    }

    &-header {
@@ -69,13 +64,7 @@
    &-speaker {
        position: relative;

-        &-ul {
-            margin:0;
-            padding:0;
-            list-style-type: none;
-        }
-
-        &:hover, &:focus-within, &:focus {
+        &:hover {
            .audio-preview-entry {
                background: #36383C;
                margin-left: 0;
@@ -92,7 +81,7 @@
            }

            .audio-preview-entry-text {
-                max-width: 178px;
+                max-width: 196px;
            }
        }

@@ -101,7 +90,7 @@
        }

        .audio-preview-entry-text {
-            max-width: 238px;
+            max-width: 256px;
        }
    }

@@ -161,9 +150,8 @@
        color: #1C2025;
        cursor: pointer;
        font-weight: 600;
-        font-size: 0.8rem;
        line-height: 24px;
-        padding: 2px 8px;
+        padding: 2px 16px;
        position: absolute;
        right: 16px;
        top: 5px;
@@ -174,10 +162,4 @@
        right: 16px;
        top: 14px;
    }
-
-    // Override @atlaskit/InlineDialog container which is made with styled components
-    & > div:nth-child(2) {
-        outline: none;
-        padding: 0;
-    }
 }
--- a/css/_aui_reset.scss
+++ b/css/_aui_reset.scss
@@ -219,9 +219,8 @@ abbr {
 }

 a {
-  color: #44A5FF;
+  color: #3572b0;
  text-decoration: none;
-  font-weight: bold;
 }
 a:focus,
 a:hover,
--- a/css/_avatar.scss
+++ b/css/_avatar.scss
@@ -1,7 +1,7 @@
 .avatar {
    background-color: #AAA;
    border-radius: 50%;
-    color: rgba(255, 255, 255, 1);
+    color: rgba(255, 255, 255, 0.6);
    font-weight: 100;
    object-fit: cover;

@@ -25,6 +25,10 @@
    width: 100%;
 }

+.defaultAvatar {
+    opacity: 0.6
+}
+
 .avatar-badge {
    position: relative;

--- a/css/_base.scss
+++ b/css/_base.scss
@@ -51,10 +51,8 @@ body {
    }
 }

-.jitsi-icon {
-    &-default svg {
-        fill: white;
-    }
+.jitsi-icon svg {
+    fill: white;
 }

 .disabled .jitsi-icon svg {
--- a/css/_chat.scss
+++ b/css/_chat.scss
@@ -2,39 +2,34 @@
    background-color: $chatBackgroundColor;
    box-sizing: border-box;
    color: #FFF;
+    display: flex;
+    flex-direction: column;
    height: 100%;
+    left: -$sidebarWidth;
+    overflow: hidden;
    position: absolute;
    top: 0;
    width: $sidebarWidth;
    z-index: $sideToolbarContainerZ;

-    @media (max-width: 580px) {
-        width: 100%;
+    /**
+     * The sidebar (chat) is off-screen when hidden. Move it flush to the left
+     * side of the window when it should be visible.
+     */
+    &.slideInExt {
+        left: 0;
    }
 }

-.chat-panel {
-    display: flex;
-    flex-direction: column;
-    // extract header + tabs height
-    height: calc(100% - 102px);
-}
-
-.chat-panel-no-tabs {
-    // extract header height
-    height: calc(100% - 70px);
-}
-
 #chatconversation {
    box-sizing: border-box;
    flex: 1;
    font-size: 10pt;
-    // extract message input height
-    height: calc(100% - 68px);
    line-height: 20px;
    overflow: auto;
    padding: 16px;
    text-align: left;
+    width: $sidebarWidth;
    word-wrap: break-word;

    display: flex;
@@ -63,6 +58,28 @@
    a:active {
        color: black;
    }
+
+    &::-webkit-scrollbar {
+        background: #06a5df;
+        width: 7px;
+    }
+
+    &::-webkit-scrollbar-button {
+        display: none;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: black;
+    }
+
+    &::-webkit-scrollbar-track-piece {
+        background: black;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: #06a5df;
+        border-radius: 4px;
+    }
 }

 #chat-recipient {
@@ -82,19 +99,18 @@
    div {
        svg {
            cursor: pointer;
-            fill: white;
+            fill: white
        }
    }
 }

-
 .chat-header {
    height: 70px;
    position: relative;
    width: 100%;
    z-index: 1;
    display: flex;
-    justify-content: space-between;
+    justify-content: flex-end;
    padding: 16px;
    align-items: center;
    box-sizing: border-box;
@@ -116,7 +132,6 @@
            .send-button {
                background: #1B67EC;
                cursor: pointer;
-                margin-left: 0.3rem;

                @media (hover: hover) and (pointer: fine) {
                    &:hover {
@@ -173,9 +188,8 @@
    display: flex;
    align-items: center;
    justify-content: center;
-    height: 38px;
-    width: 38px;
-    margin: 2px;
+    height: 40px;
+    width: 40px;
    border-radius: 3px;
 }

@@ -196,7 +210,6 @@
 }

 #usermsg {
-    -ms-overflow-style: none;
    border: 0px none;
    border-radius:0;
    box-shadow: none;
@@ -205,24 +218,14 @@
    padding: 10px;
    overflow-y: auto;
    resize: none;
-    scrollbar-width: none;
    width: 100%;
    word-break: break-word;
-
-    &::-webkit-scrollbar {
-        display: none;
-    }
 }

 #usermsg:hover {
    border: 0px none;
    box-shadow: none;
 }
-#usermsg:focus,
-#usermsg:active {
-    border-bottom: 1px solid white;
-    padding-bottom: 8px;
- }

 #nickname {
    text-align: center;
@@ -231,16 +234,6 @@
    margin: auto 0;
    padding: 0 16px;

-    #nickname-title {
-        margin-bottom: 5px;
-        display: block;
-    }
-
-    label[for="nickinput"] {
-        > div > span {
-            color: #B8C7E0;
-        }
-    }
    input {
        height: 40px;
    }
@@ -261,7 +254,7 @@
        cursor: pointer;

        &.disabled {
-            color: #AFB6BC;
+            color: #757575;
            background: #11336E;
            pointer-events: none;
        }
@@ -302,19 +295,10 @@
        text-overflow: ellipsis;
        overflow: hidden;
    }
-}

-.sr-only {
-    border: 0 !important;
-    clip: rect(1px, 1px, 1px, 1px) !important;
-    clip-path: inset(50%) !important;
-    height: 1px !important;
-    margin: -1px !important;
-    overflow: hidden !important;
-    padding: 0 !important;
-    position: absolute !important;
-    width: 1px !important;
-    white-space: nowrap !important;
+    @media (max-width: 580px) {
+        display: none !important;
+    }
 }

 .chatmessage {
@@ -366,6 +350,10 @@
    color: #757575;
 }

+.smiley {
+    font-size: 14pt;
+}
+
 #smileys {
    font-size: 20pt;
    margin: auto;
@@ -394,7 +382,7 @@
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .6) !important;
    height: auto;
-    display: none;
+    max-height: 0;
    overflow: hidden;
    position: absolute;
    width: calc(#{$sidebarWidth} - 32px);
@@ -410,7 +398,6 @@
    transition: max-height 0.3s;

    &.show-smileys {
-        display: flex;
        max-height: 500%;
    }

@@ -426,7 +413,7 @@

 .smileyContainer {
    width: 40px;
-    height: 40px;
+    height: 36px;
    display: inline-block;
    text-align: center;
 }
@@ -522,7 +509,7 @@

    &-header {
        display: flex;
-        justify-content: space-between;
+        justify-content: flex-end;
        align-items: center;
        margin: 16px;
        width: calc(100% - 32px);
@@ -542,6 +529,11 @@
    }
 }

+.touchmove-hack {
+    display: flex;
+    flex: 1;
+    overflow: auto;
+}

 /**
 * Make header close button more easily tappable on mobile.
@@ -554,41 +546,3 @@
    background: #36383C;
    border-radius: 3px;
 }
-
-.chat-tabs-container {
-    width: 100%;
-    border-bottom: thin solid #292929;
-    display: flex;
-    justify-content: space-around;
-}
-
-.chat-tab {
-    font-size: 1.2em;
-    padding-bottom: 0.5em;
-    width: 50%;
-    text-align: center;
-    color: #8B8B8B;
-    cursor: pointer;
-}
-
-.chat-tab-focus {
-    border-bottom-style: solid;
-    color: #FFF;
-}
-
-.chat-tab-title {
-    margin-right: 8px;
-}
-
-.chat-tab-badge {
-    background-color: #165ecc;
-    border-radius: 50%;
-    box-sizing: border-box;
-    font-weight: 700;
-    overflow: hidden;
-    text-align: center;
-    text-overflow: ellipsis;
-    vertical-align: middle;
-    padding: 0 4px;
-    color: #FFF;
-}
--- a/css/_connection-info.scss
+++ b/css/_connection-info.scss
@@ -11,6 +11,12 @@
 {
    @extend %connection-info;

+    /**
+     * Apply negative margin to reduce the appearance of padding in AtlasKit
+     * InlineDialog.
+     */
+    margin: -15px;
+
    > table {
        white-space: nowrap;
        @extend %connection-info;
@@ -39,10 +45,6 @@
        @extend .connection-info__icon;
    }

-    &__mobile {
-      margin: 15px;
-    }
-
    .connection-actions {
        margin: 10px auto;
        text-align: center;
--- a/css/premeeting/_connection-status.scss
+++ b/css/premeeting/_connection-status.scss
@@ -1,24 +1,30 @@
 .con-status {
-    border-radius: 6px;
-    color: #fff;
-    font-size: 12px;
-    letter-spacing: 0.16px;
-    line-height: 16px;
    position: absolute;
+    top: 24px;
    width: 100%;
+    z-index: $toolbarZ + 3;
+
+    &-container {
+        border-radius: 3px;
+        color: #fff;
+        font-size: 13px;
+        line-height: 13px;
+        margin: 0 auto;
+        width: 320px;
+    }

    &-header {
-        background-color: rgba(0, 0, 0, 0.7);
+        background: rgba(28, 32, 37, .5);
        align-items: center;
        display: flex;
-        padding: 14px 16px;
+        justify-content: space-between;
    }

    &-circle {
        border-radius: 50%;
        display: inline-block;
        padding: 4px;
-        margin-right: 16px;
+        margin: 8px;
    }

    &--good {
@@ -34,7 +40,14 @@
    }

    &-arrow {
-        margin-left: auto;
+        height: 36px;
+        width: 36px;
+        border-radius: 3px;
+        margin-left: 8px;
+        margin-right: 2px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
        transition: background-color 0.16s ease-out;

        &--up {
@@ -55,7 +68,7 @@
    }

    &-details {
-        background-color: rgba(0, 0, 0, 0.7);
+        background: rgba(28, 32, 37, .5);
        border-top: 1px solid #5E6D7A;
        padding: 16px;
        transition: opacity 0.16s ease-out;
--- a/css/_drawer.scss
+++ b/css/_drawer.scss
@@ -4,32 +4,17 @@
    right: 0;
    bottom: 0;
    z-index: $drawerZ;
-    border-radius: 16px 16px 0 0;
-
-    &.notification-portal {
-        z-index: $dropdownZ;
-    }
-}
-
-.drawer-portal::after {
-    content: '';
-    background-color: $participantsPaneBgColor;
-    margin-bottom: env(safe-area-inset-bottom, 0);
-}
-
-.drawer-menu-container {
-    height: 100vh;
-    display: flex;
-    align-items: flex-end;
 }

 .drawer-menu {
-    max-height: calc(80vh - 64px);
+    max-height: 50vh;
    background: #242528;
    border-radius: 16px 16px 0 0;
-    overflow-y: scroll;
-    margin-bottom: env(safe-area-inset-bottom, 0);
-    width: 100%;
+    overflow-y: auto;
+
+    &.expanded {
+        max-height: 80vh;
+    }

    .drawer-toggle {
        display: flex;
@@ -57,8 +42,6 @@
        font-size: 1.2em;
        list-style-type: none;
        padding: 0;
-        height: calc(80vh - 144px - 64px);
-        overflow-y: auto;

        .overflow-menu-item {
            box-sizing: border-box;
--- a/css/_e2ee.scss
+++ b/css/_e2ee.scss
@@ -5,6 +5,11 @@
    .description {
        font-size: 13px;
        margin: 15px 0;
+
+        .read-more {
+            cursor: pointer;
+            opacity: .7;
+        }
    }

    .control-row {
--- a/css/_jquery-impromptu.scss
+++ b/css/_jquery-impromptu.scss
@@ -0,0 +1,129 @@
+/*
+------------------------------
+	Impromptu
+------------------------------
+*/
+.jqifade{
+	position: absolute; 
+	background-color: #000;
+}
+div.jqi{ 
+	width: 400px;
+	position: absolute;
+    color: #3a3a3a;
+	background-color: #ffffff; 
+	font-size: 11px; 
+	text-align: left; 
+	border: solid 1px #eeeeee;
+	border-radius: 6px;
+	-moz-border-radius: 6px;
+	-webkit-border-radius: 6px;
+	padding: 7px;
+}
+div.jqi .jqicontainer{ 
+}
+div.jqi .jqiclose{ 
+	position: absolute;
+	top: 4px; right: -2px; 
+	width: 18px; 
+	cursor: default; 
+	color: #bbbbbb; 
+	font-weight: bold; 
+}
+div.jqi .jqistate{
+	background-color: #fff;
+}
+div.jqi .jqititle{
+	padding: 5px 10px;
+	font-size: 16px; 
+	line-height: 20px; 
+	border-bottom: solid 1px #eeeeee;
+}
+div.jqi .jqimessage{ 
+	padding: 10px; 
+	line-height: 20px; 
+	color: #444444; 
+}
+div.jqi .jqibuttons{ 
+	text-align: right; 
+	margin: 0 -7px -7px -7px;
+	border-top: solid 1px #e4e4e4; 
+	background-color: #f4f4f4;
+	border-radius: 0 0 6px 6px;
+	-moz-border-radius: 0 0 6px 6px;
+	-webkit-border-radius: 0 0 6px 6px;
+}
+div.jqi .jqibuttons button{ 
+	margin: 0;
+	padding: 5px 20px;
+	background-color: transparent !important;
+	font-weight: normal; 
+	border: none;
+	border-left: solid 1px #e4e4e4; 
+	color: #777; 
+	font-weight: bold; 
+	font-size: 12px; 
+}
+div.jqi .jqibuttons button.jqidefaultbutton{
+	color: #489afe;
+}
+
+div.jqi .jqibuttons button:disabled {
+    color: #b6b6b6 !important;
+}
+div.jqi .jqibuttons button:hover,
+div.jqi .jqibuttons button:focus{
+	color: #287ade;
+	outline: none;
+}
+.jqiwarning .jqi .jqibuttons{ 
+	background-color: #b95656;
+}
+
+/* sub states */
+div.jqi .jqiparentstate::after{ 
+	background-color: #777;
+	opacity: 0.6;
+	filter: alpha(opacity=60);
+	content: '';
+	position: absolute;
+	top:0;left:0;bottom:0;right:0;
+	border-radius: 6px;
+	-moz-border-radius: 6px;
+	-webkit-border-radius: 6px;
+}
+div.jqi .jqisubstate{
+	position: absolute;
+	top:0;
+	left: 20%;
+	width: 60%;
+	padding: 7px;
+	border: solid 1px #eeeeee;
+	border-top: none;
+	border-radius: 0 0 6px 6px;
+	-moz-border-radius: 0 0 6px 6px;
+	-webkit-border-radius: 0 0 6px 6px;
+}
+div.jqi .jqisubstate .jqibuttons button{
+	padding: 10px 18px;
+}
+
+/* arrows for tooltips/tours */
+.jqi .jqiarrow{ position: absolute; height: 0; width:0; line-height: 0; font-size: 0; border: solid 10px transparent;}
+
+.jqi .jqiarrowtl{ left: 10px; top: -20px; border-bottom-color: #ffffff; }
+.jqi .jqiarrowtc{ left: 50%; top: -20px; border-bottom-color: #ffffff; margin-left: -10px; }
+.jqi .jqiarrowtr{ right: 10px; top: -20px; border-bottom-color: #ffffff; }
+
+.jqi .jqiarrowbl{ left: 10px; bottom: -20px; border-top-color: #ffffff; }
+.jqi .jqiarrowbc{ left: 50%; bottom: -20px; border-top-color: #ffffff; margin-left: -10px; }
+.jqi .jqiarrowbr{ right: 10px; bottom: -20px; border-top-color: #ffffff; }
+
+.jqi .jqiarrowlt{ left: -20px; top: 10px; border-right-color: #ffffff; }
+.jqi .jqiarrowlm{ left: -20px; top: 50%; border-right-color: #ffffff; margin-top: -10px; }
+.jqi .jqiarrowlb{ left: -20px; bottom: 10px; border-right-color: #ffffff; }
+
+.jqi .jqiarrowrt{ right: -20px; top: 10px; border-left-color: #ffffff; }
+.jqi .jqiarrowrm{ right: -20px; top: 50%; border-left-color: #ffffff; margin-top: -10px; }
+.jqi .jqiarrowrb{ right: -20px; bottom: 10px; border-left-color: #ffffff; }
+
--- a/css/_jquery.contextMenu.scss
+++ b/css/_jquery.contextMenu.scss
@@ -0,0 +1,206 @@
+@charset "UTF-8";
+/*!
+ * jQuery contextMenu - Plugin for simple contextMenu handling
+ *
+ * Version: v2.1.1
+ *
+ * Authors: Björn Brala (SWIS.nl), Rodney Rehm, Addy Osmani (patches for FF)
+ * Web: http://swisnl.github.io/jQuery-contextMenu/
+ *
+ * Copyright (c) 2011-2016 SWIS BV and contributors
+ *
+ * Licensed under
+ *   MIT License http://www.opensource.org/licenses/mit-license
+ *
+ * Date: 2016-02-28T09:53:18.890Z
+ */
+@font-face {
+  font-family: "context-menu-icons";
+  font-style: normal; 
+  font-weight: normal;
+
+  src: url("font/context-menu-icons.eot?2qmzf");
+  src: url("font/context-menu-icons.eot?2qmzf#iefix") format("embedded-opentype"), url("font/context-menu-icons.woff2?2qmzf") format("woff2"), url("font/context-menu-icons.woff?2qmzf") format("woff"), url("font/context-menu-icons.ttf?2qmzf") format("truetype");
+}
+
+.context-menu-icon:before {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 28px; 
+  font-family: "context-menu-icons";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  color: #2980b9;
+  text-align: center;
+  -webkit-transform: translateY(-50%);
+      -ms-transform: translateY(-50%);
+       -o-transform: translateY(-50%);
+          transform: translateY(-50%);
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.context-menu-icon-add:before {
+  content: "";
+}
+
+.context-menu-icon-copy:before {
+  content: "";
+}
+
+.context-menu-icon-cut:before {
+  content: "";
+}
+
+.context-menu-icon-delete:before {
+  content: "";
+}
+
+.context-menu-icon-edit:before {
+  content: "";
+}
+
+.context-menu-icon-paste:before {
+  content: "";
+}
+
+.context-menu-icon-quit:before {
+  content: "";
+}
+
+.context-menu-icon.context-menu-hover:before {
+  color: #fff;
+}
+
+.context-menu-list {
+  position: absolute; 
+  display: inline-block;
+  min-width: 180px;
+  max-width: 360px;
+  padding: 4px 0;
+  margin: 5px;
+  font-family: inherit;
+  font-size: inherit;
+  list-style-type: none;
+  background: #fff;
+  border: 1px solid #bebebe;
+  border-radius: $borderRadius;
+  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
+          box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
+}
+
+.context-menu-item {
+  position: relative;
+  padding: 3px 28px;
+  color: #2f2f2f;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none; 
+  background-color: #fff;
+}
+
+.context-menu-separator {
+  padding: 0; 
+  margin: 5px 0;
+  border-bottom: 1px solid #e6e6e6;
+}
+
+.context-menu-item > label > input,
+.context-menu-item > label > textarea {
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+}
+
+.context-menu-item.context-menu-hover {
+  color: #fff;
+  cursor: pointer; 
+  background-color: #2980b9;
+}
+
+.context-menu-item.context-menu-disabled {
+  color: #626262; 
+  background-color: #fff;
+}
+
+.context-menu-item.context-menu-disabled {
+  color: #626262;
+}
+
+.context-menu-input.context-menu-hover,
+.context-menu-item.context-menu-disabled.context-menu-hover {
+  cursor: default; 
+  background-color: #eee;
+}
+
+.context-menu-submenu:after {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  z-index: $zindex1;
+  width: 0;
+  height: 0;
+  content: '';
+  border-color: transparent transparent transparent #2f2f2f;
+  border-style: solid;
+  border-width: 4px 0 4px 4px;
+  -webkit-transform: translateY(-50%);
+      -ms-transform: translateY(-50%);
+       -o-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+
+/**
+ * Inputs
+ */
+.context-menu-item.context-menu-input {
+  padding: 5px 10px;
+}
+
+/* vertically align inside labels */
+.context-menu-input > label > * {
+  vertical-align: top;
+}
+
+/* position checkboxes and radios as icons */
+.context-menu-input > label > input[type="checkbox"],
+.context-menu-input > label > input[type="radio"] {
+  position: relative;
+  top: 3px;
+}
+
+.context-menu-input > label,
+.context-menu-input > label > input[type="text"],
+.context-menu-input > label > textarea,
+.context-menu-input > label > select {
+  display: block;
+  width: 100%; 
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.context-menu-input > label > textarea {
+  height: 100px;
+}
+
+.context-menu-item > .context-menu-list {
+  top: 5px; 
+  /* re-positioned by js */
+  right: -5px;
+  display: none;
+}
+
+.context-menu-item.context-menu-visible > .context-menu-list {
+  display: block;
+}
+
+.context-menu-accesskey {
+  text-decoration: underline;
+}
--- a/css/_labels.scss
+++ b/css/_labels.scss
@@ -0,0 +1,68 @@
+.large-video-labels {
+    display: flex;
+    position: absolute;
+    top: 30px;
+    right: 30px;
+    transition: right 0.5s;
+    z-index: $labelsZ;
+
+    .circular-label {
+        align-items: center;
+        color: white;
+        display: flex;
+        font-weight: bold;
+        justify-content: center;
+        margin-left: 8px;
+        opacity: 0.8;
+    }
+
+    .circular-label {
+        background: #B8C7E0;
+    }
+
+    .circular-label.e2ee {
+        align-items: center;
+        background: #76CF9C;
+        display: flex;
+        justify-content: center;
+    }
+
+    .circular-label.file {
+        background: #FF5630;
+    }
+
+    .circular-label.local-rec {
+        background: #FF5630;
+    }
+
+    .circular-label.stream {
+        background: #0065FF;
+    }
+
+    .circular-label.insecure {
+        background: $defaultWarningColor;
+    }
+
+    .recording-label.center-message {
+        background: $videoStateIndicatorBackground;
+        bottom: 50%;
+        display: block;
+        left: 50%;
+        padding: 10px;
+        position: fixed;
+        transform: translate(-50%, -50%);
+        z-index: $centeredVideoLabelZ;
+    }
+}
+
+.circular-label {
+    background: $videoStateIndicatorBackground;
+    border-radius: 50%;
+    box-sizing: border-box;
+    cursor: default;
+    font-size: 13px;
+    height: $videoStateIndicatorSize;
+    line-height: $videoStateIndicatorSize;
+    text-align: center;
+    min-width: $videoStateIndicatorSize;
+}
--- a/css/premeeting/_lobby.scss
+++ b/css/premeeting/_lobby.scss
@@ -1,21 +1,18 @@
-.lobby-screen {
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 26px;
+#lobby-screen {
+    .content {

-    &-content {
-        align-items: center;
-        display: flex;
-        flex-direction: column;
+        .container {
+            align-items: center;
+            display: flex;
+            flex-direction: column;

-        .spinner {
-            margin: 8px;
-        }
+            .spinner {
+                margin: 30px;
+            }

-        .joining-message {
-            color: white;
-            margin: 24px auto;
-            text-align: center;
+            .joining-message {
+                margin: 10px;
+            }
        }
    }
 }
@@ -41,23 +38,19 @@
    }
 }

-#notification-participant-list {
+#knocking-participant-list {
    background-color: $newToolbarBackgroundColor;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
    left: 0;
    margin: 20px;
-    max-height: 600px;
-    overflow: hidden;
-    overflow-y: auto;
    position: fixed;
-    top: 30px;
+    top: 20;
+    transition: top 1s ease;
    z-index: $toolbarZ + 1;

-    &:empty {
-        border: none;
-    }
-
    &.toolbox-visible {
        // Same as toolbox subject position
        top: 120px;
@@ -71,7 +64,7 @@

    button {
        align-self: stretch;
-        margin-bottom: 8px 0;
+        margin: 8px 0;
        padding: 12px;
        transition: .2s transform ease;

@@ -101,6 +94,8 @@

 .knocking-participants-container {
    list-style-type: none;
+    max-height: 600px;
+    overflow-y: scroll;
    padding: 0 15px 15px 15px;
 }

--- a/css/_meetings_list.scss
+++ b/css/_meetings_list.scss
@@ -125,8 +125,7 @@
            cursor: pointer;
        }

-        &.with-click-handler:hover,
-        &.with-click-handler:focus {
+        &.with-click-handler:hover {
            background-color: #c7ddff;
        }

@@ -159,7 +158,7 @@
        }
    }

-    .item:hover, .item:focus, .item:focus-within {
+    .item:hover {
        .delete-meeting {
            display: block;
        }
--- a/css/_mini_toolbox.scss
+++ b/css/_mini_toolbox.scss
@@ -8,11 +8,9 @@
    .toolbox-icon {
        cursor: pointer;
        padding: 7px;
-        width: 22px;
-        height : 22px;

        &.toggled {
-            background: none;
+            background: $AOTToolbarButtonToggleColor;
        }

        &.disabled {
@@ -27,7 +25,6 @@
    position: absolute;
    bottom: 10px;
    transform: translateX(-50%);
-    padding: 3px !important;
 }

 .filmstrip-toolbox {
--- a/css/_notifications.scss
+++ b/css/_notifications.scss
@@ -1,23 +0,0 @@
-.notification-appear, .notification-enter {
-    opacity: 0;
-    position: relative;
-    left: -200px;
-    transition: all .2s !important; // !important needed to overwrite atlaskit default style
-
-    &-active {
-        opacity: 1;
-        left: 0;
-    }
-}
-
-.notification-exit {
-    opacity: 1;
-    position: relative;
-    left: 0;
-    transition: all .2s !important; // !important needed to overwrite atlaskit default style
-
-    &-active {
-        opacity: 0;
-        left: -200px;
-    }
-}
--- a/css/_participants-count.scss
+++ b/css/_participants-count.scss
@@ -0,0 +1,26 @@
+.participants-count {
+    background: #fff;
+    border-radius: 4px;
+    color: #5e6d7a;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 13px;
+    line-height: 20px;
+    margin-left: 16px;
+    padding: 4px 8px;
+    pointer-events: auto;
+
+    &-number {
+        margin-right: 8px;
+        vertical-align: middle;
+    }
+
+    &-icon {
+        background: url('../images/user-groups.svg');
+        background-repeat: no-repeat;
+        display: inline-block;
+        height: 16px;
+        width: 16px;
+        vertical-align: middle;
+    }
+}
--- a/css/_participants-pane.scss
+++ b/css/_participants-pane.scss
@@ -1,64 +0,0 @@
-.participants_pane {
-    background-color: $participantsPaneBgColor;
-    flex-shrink: 0;
-    overflow: hidden;
-    position: relative;
-    transition: width .16s ease-in-out;
-    width: 315px;
-    z-index: $zindex0;
-
-    &--closed {
-        width: 0;
-    }
-}
-
-.participants_pane-content {
-    display: flex;
-    flex-direction: column;
-    font-weight: 600;
-    height: 100%;
-    width: 315px;
-
-    & > *:first-child,
-    & > *:last-child {
-        flex-shrink: 0;
-    }
-}
-
-.participant-avatar {
-    margin: 8px 16px 8px 0;
-}
-
-@media (max-width: 580px) {
-    .participants_pane {
-        height: 100vh;
-        height: -webkit-fill-available;
-        left: 0;
-        position: fixed;
-        right: 0;
-        top: 0;
-        width: auto;
-
-        &--closed {
-            display: none;
-            width: auto;
-        }
-    }
-
-    .participants_pane-content {
-        width: 100%;
-    }
-}
-
-.jitsi-icon {
-    &-dominant-speaker {
-        background-color: #1EC26A;
-        border-radius: 3px;
-    }
-}
-
-.mobile-browser.shift-right {
-    .participants_pane {
-        z-index: -1;
-    }
-}
--- a/css/_polls.scss
+++ b/css/_polls.scss
@@ -1,444 +0,0 @@
-.poll-dialog {
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
-
-    h1, span, li, strong {
-        color: #bce;
-    }
-    ol {
-        margin: 0;
-    }
-}
-
-.poll-question-field {
-    padding: 8px 16px;
-    padding-bottom: 24px;
-    border-bottom: 1px solid #525252;
-}
-
-.poll-header {
-    margin-bottom: 8px;
-}
-
-.poll-creator {
-    color: #C2C2C2;
-    font-weight: 600;
-    margin: 4px 0 16px 0;
-}
-
-.poll-answer-container {
-    background: #3D3D3D;
-    border-radius: 3px;
-    margin-bottom: 8px;
-
-    @media (max-width: 580px) {
-      &> span {
-        padding: 8px 0;
-      }
-
-      svg {
-        margin-top: 6px;
-      }
-    }
-}
-
-.poll-answer-option {
-   font-weight: 400;
-   display: block;
-   margin: 4px;
-
-   @media (max-width: 580px) {
-      font-size: 16px;
-      margin: 11px 8px
-   }
-}
-
-.poll-answer-field-list, .poll-answer-list, .poll-result-list {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-}
-
-.poll-answer-field-list {
-    padding: 0 16px;
-}
-
-ol.poll-result-list {
-    margin-bottom: 1.5em;
-}
-
-.poll-result-list > li {
-    margin-bottom: 16px;
-}
-
-.poll-answer-field {
-    flex-direction: column;
-    align-items: stretch;
-    margin-bottom: 16;
-
-}
-
-.poll-answer-field:last-child {
-    margin-bottom: 0;
-}
-
-.poll-create-option-row {
-    display: 'flex';
-    margin-bottom: 4;
-}
-
-// Needeed to override atlaskit default blue color
-.poll-create-container .jsYMHu {
-    background: #292929;
-    border-color: #808090;
-    color: #fff // #808090
-}
-
-.poll-add-button {
-    display: flex;
-    justify-content: center;
-    padding: 8px 16px;
-}
-
-.poll-remove-option-button {
-    background: 0 0;
-    border: none;
-    color: #E04757;
-    padding-left: 0;
-}
-
-.poll-create-add-option {
-    border: none;
-    background-color: #292929;
-    padding: 3px;
-    width: 100%;
-}
-
-.poll-icon-button, .poll-drag-handle {
-    .jitsi-icon svg {
-        fill: #929292;
-    }
-}
-
-.poll-drag-handle {
-    background-color: transparent;
-    border: none;
-    cursor: grab;
-    padding-left: 8;
-    padding-top: 8px;
-    display: flex;
-}
-
-.poll-dragged {
-    opacity: 0.5;
-    * {
-        cursor: grabbing !important;
-    }
-}
-
-.poll-question {
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 26px;
-}
-
-.poll-answer-voters {
-    font-weight: lighter;
-    list-style-type: none;
-    border: #616161 solid 1px;
-    border-radius: 3px;
-    padding: 2px 6px;
-    margin: 4px 0px 12px;
-    background-color: #616161;
-}
-
-.poll-answer-header {
-    display: flex;
-    justify-content: space-between;
-}
-
-.poll-answer-vote-name {
-    flex-shrink: 1;
-    overflow-wrap: anywhere
-}
-
-.poll-answer-vote-count-container{
-    display: flex;
-}
-
-.poll-answer-vote-count {
-    margin-left: 10px;
-    white-space: nowrap;
-    flex: 1;
-    text-align: right;
-}
-
-.poll-answer-short-results{
-    display: flex;
-    min-width: 10em;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.poll-bar-container, .poll-bar {
-    border-radius: 3px;
-    height: 6px;
-}
-
-.poll-bar-container {
-    background-color: #616161;
-    max-width: 160px;
-    margin-top: 3px;
-    flex: 1;
-}
-
-.poll-bar {
-    background-color: #246FE5;
-}
-
-.poll-message-footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 12px;
-    margin-top: 5px;
-}
-
-.poll-notice {
-    font-weight: 100;
-    margin-right: 10px;
-}
-
-.poll-show-details {
-    background-color: transparent;
-    border: none;
-
-    &:hover {
-        text-decoration: underline;
-    }
-}
-
-.poll-result-links {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    a.poll-detail-link, a.poll-change-vote-link {
-      color: #669AEC;
-      cursor: pointer;
-      font-weight: 600;
-      text-decoration: none;
-
-      &:hover {
-        color: #669AEC;
-      }
-
-      &:visited {
-        color: #669AEC;
-      }
-    }
-}
-
-
-.polls-pane-content {
-    height: 100%;
-    position: relative;
-}
-
-.pane-content{
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-}
-
-.empty-pane-icon {
-    width: 50%;
-    padding: 24px;
-}
-
-.empty-pane-icon svg {
-    fill: #3D3D3D;
-    width: 100%;
-    height: auto;
-}
-
-.empty-pane-message {
-    color: #fff;
-    padding: 0 16px;
-    text-align: center;
-
-}
-
-.poll-results, .poll-answer {
-    background: #292929;
-    border-radius: 8px;
-    border: 1px solid #666666;
-    margin: 16px;
-    padding: 16px;
-    word-break: break-word;
-}
-
-.poll-results {
-    color: #fff;
-}
-
-.poll-answer {
-
-    h1, strong ,span {
-        color: #fff;
-    }
-}
-
-.poll-create-label {
-    color: #C2C2C2;
-    display: flex;
-    font-weight: 400;
-    margin-bottom: 4;
-}
-
-.expandable-input{
-    line-height: 18px;
-    resize: none;
-    width: 100%;
-    height: 40px;
-    box-sizing: border-box;
-    overflow: hidden;
-    border: 1px solid #666666;
-    background-color: #141414;
-    color: #FFF;
-    border-radius: 6px;
-    padding: 10px 16px;
-}
-
-#polls-panel {
-    height: calc(100% - 102px);
-}
-
-.poll-container {
-    font-size: 14px;
-    font-weight: 600;
-    height: calc(100% - 88px);
-    line-height: 20px;
-    overflow-y: auto;
-    position: relative;
-
-    & > * + *:not(.ignore-child) {
-        margin-top: 16px;
-    }
-
-    @media (max-width: 580px) {
-        height: calc(100% - 102px);
-    }
-}
-
-.poll-create-header {
-    color: #fff;
-    font-size: 20px;
-    line-height: 28px;
-    margin: 20px 16px;
-    font-weight: 600;
-}
-
-.poll-create-container {
-    padding: 8px 0;
-}
-
-.poll-create-footer {
-    background-color: #141414;
-    bottom: 0;
-    position: absolute;
-    width: calc(100% - 32px);
-}
-
-.poll-footer {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 16px 16px 16px;
-}
-
-.poll-answer-footer {
-  padding: 8px 0 0 0;
-}
-
-.poll-button {
-   align-items: center;
-   border: 0;
-   border-radius: 6px;
-   font-size: 14px;
-   font-weight: 600;
-   display: flex;
-   justify-content: center;
-   min-height: 40px;
-   width: 100%;
-
-   &:disabled {
-     cursor: initial;
-   }
-
-   @media (max-width: 580px) {
-     min-height: 48px;
-   }
-}
-
-.poll-button-primary {
-    background-color: #0056E0;
-
-    &:hover {
-        background-color: #246FE5;
-    }
-
-    &:active {
-        background-color: #0045B3;
-    }
-
-    &:focus {
-        background-color: #0045B3;
-        border: 3px solid #99BBF3;
-    }
-
-    &:disabled {
-        background-color: #00225A;
-        color: #858585;
-    }
-}
-
-.poll-button-secondary {
-    background-color: #3D3D3D;
-
-    &:hover {
-        background-color: #525252;
-    }
-
-    &:active {
-        background-color: #292929;
-    }
-
-    &:focus {
-        background-color: #292929;
-        border: 3px solid #858585;
-    }
-
-    &:disabled {
-        background-color: #141414;
-        color: #858585;
-    }
-}
-
-.poll-button-short {
-  max-width: 132px;
-}
-
-.poll-button-shortest {
-  max-width: 117px;
-}
-
-.poll-button-short,
-.poll-button-shortest {
-   @media (max-width: 580px) {
-     min-width: 49%;
-   }
-}
--- a/css/_popover.scss
+++ b/css/_popover.scss
@@ -3,50 +3,49 @@
 * to allow mouse movement from the popover trigger to the popover itself
 * without triggering a mouseleave event.
 */
+.popover-mousemove-padding-bottom {
+    bottom: -15px;
+    height: 20px;
+    position: absolute;
+    right: 0;
+    width: 100%;
+}
+
 %vertical-popover-padding {
    height: 100%;
    position: absolute;
    top: 0;
-    width: 20px;
-    padding: 20px 0;
-    top: -20px;
-}
-
-%horizontal-popover-padding {
-    height: 25px;
-    position: absolute;
-    right: 0;
-    width: 100%;
-    padding: 0 35px;
-    left: -35px;
+    width: 40px;
 }

 .popover-mousemove-padding-left {
    @extend %vertical-popover-padding;
-    left: -35px;
+    left: -20px;
 }

 .popover-mousemove-padding-right {
    @extend %vertical-popover-padding;
-    right: -35px;
+    right: -20px;
 }

-.popover-mousemove-padding-bottom {
-    @extend %horizontal-popover-padding;
-    bottom: -40px;
-}
-
-.popover-mousemove-padding-top {
-    @extend %horizontal-popover-padding;
-    top: -40px;
+/**
+ * An invisible element is added to the top of the popover to ensure the mouse
+ * stays over the popover when the popover's height is shrunk, which would then
+ * normally leave the mouse outside of the popover itself and cause a mouseleave
+ * event.
+ */
+.popover-mouse-padding-top {
+    height: 30px;
+    position: absolute;
+    right: 0;
+    top: -25px;
+    width: 100%;
 }

 .popover {
+    background-color: $popoverBg;
+    border-radius: 3px;
    margin: -16px -24px;
    padding: 16px 24px;
    z-index: $popoverZ;
 }
-
-.padded-content {
-    padding: 4px 8px;
-}
--- a/css/_popup_menu.scss
+++ b/css/_popup_menu.scss
@@ -5,7 +5,6 @@
 .popupmenu {
    background-color: $menuBG;
    border-radius: 3px;
-    list-style-type: none;
    min-width: 150px;
    text-align: left;
    padding: 0px;
@@ -39,11 +38,6 @@
        }
    }

-    &__list {
-        margin: 0;
-        padding: 0;
-    }
-
    &__text {
        display: inline-block;
        margin-left: 8px;
--- a/css/premeeting/_prejoin-dialog.scss
+++ b/css/premeeting/_prejoin-dialog.scss
--- a/css/_prejoin.scss
+++ b/css/_prejoin.scss
@@ -0,0 +1,138 @@
+.prejoin {
+
+    &-input-area {
+        margin: 0 auto;
+        text-align: center;
+    }
+
+    &-title {
+        color: #fff;
+        font-size: 24px;
+        line-height: 32px;
+        margin-bottom: 16px;
+    }
+
+    &-text-btns {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    &-input-label {
+        color: #A4B8D1;
+        font-size: 13px;
+        line-height: 20px;
+        margin-top: 32px 0 8px 0;
+        text-align: center;
+        width: 100%;
+    }
+
+    &-checkbox {
+        border: 0;
+        height: 16px;
+        margin-right: 8px;
+        padding: 0;
+        width: 16px;
+    }
+
+    &-checkbox-container {
+        margin-bottom: 14px;
+        width: 100%;
+    }
+
+    &-error {
+        color: white;
+        background-color: rgba(225, 45, 45, 0.6);
+        border-radius: 3px;
+        width: 100%;
+        padding: 2px;
+        box-sizing: border-box;
+        margin-top: 4px;
+        font-size: 13px;
+        text-align: center;
+    }
+}
+
+@mixin name-placeholder {
+    color: #fff;
+    font-weight: 300;
+    opacity: 0.6;
+}
+
+.prejoin-preview {
+    &-status {
+        align-items: center;
+        align-self: stretch;
+        bottom: 0;
+        color: #fff;
+        display: flex;
+        font-size: 13px;
+        min-height: 24px;
+        justify-content: center;
+        position: absolute;
+        text-align: center;
+        width: 100%;
+        z-index: 1;
+
+        &--warning {
+            background: rgba(241, 173, 51, 0.7)
+        }
+        &--ok {
+            background: rgba(49, 183, 106, 0.7);
+        }
+    }
+
+    &-icon {
+        background-position: center;
+        background-repeat: no-repeat;
+        display: inline-block;
+        height: 16px;
+        margin-right: 8px;
+        width: 16px;
+    }
+
+    &-error-desc {
+        margin-right: 4px;
+    }
+
+    .settings-button-container {
+        width: 49px;
+        margin: 0 8px;
+    }
+
+    &-dropdown-btns {
+        width: 320px;
+        padding: 8px 0;
+    }
+
+    &-dropdown-btn {
+        align-items: center;
+        color: #1C2025;
+        cursor: pointer;
+        display: flex;
+        height: 40px;
+        font-size: 15px;
+        line-height: 24px;
+        padding: 0 16px;
+
+        &:hover {
+            background-color: #DAEBFA;
+        }
+    }
+
+    &-dropdown-icon {
+        display: inline-block;
+        margin-right: 16px;
+
+        & > svg {
+            fill:  #1C2025;
+        }
+    }
+
+    &-dropdown-container {
+        & > div:nth-child(2) {
+            background: #fff;
+            padding: 0;
+        }
+    }
+
+}
--- a/css/_premeeting-screens.scss
+++ b/css/_premeeting-screens.scss
@@ -0,0 +1,280 @@
+/**
+ * Shared style for full screen local track based dialogs/modals.
+ */
+ .premeeting-screen,
+  .preview-overlay {
+     position: absolute;
+     left: 0;
+     right: 0;
+     top: 0;
+     bottom: 0;
+  }
+
+ .premeeting-screen {
+    align-items: stretch;
+    background: radial-gradient(50% 50% at 50% 50%, #2A3A4B 20.83%, #1E2A36 100%);
+    display: flex;
+    flex-direction: column;
+    font-size: 1.3em;
+    z-index: $toolbarZ + 1;
+
+    &-avatar {
+        background-color: #A4B8D1;
+        margin-bottom: 24px;
+
+        text {
+            fill: black;
+            font-size: 26px;
+            font-weight: 400;
+        }
+    }
+
+    .action-btn {
+        border-radius: 3px;
+        color: #fff;
+        cursor: pointer;
+        display: inline-block;
+        font-size: 15px;
+        line-height: 24px;
+        margin-top: 16px;
+        padding: 7px 16px;
+        position: relative;
+        text-align: center;
+        width: 286px;
+
+        &.primary {
+            background: #0376DA;
+            border: 1px solid #0376DA;
+        }
+
+        &.secondary {
+            background: transparent;
+            border: 1px solid #5E6D7A;
+        }
+
+        &.text {
+            width: auto;
+            font-size: 13px;
+            margin: 0;
+            padding: 0;
+        }
+
+        &.disabled {
+            background: #5E6D7A;
+            border: 1px solid #5E6D7A;
+            color: #AFB6BC;
+            cursor: initial;
+
+            .icon {
+                & > svg {
+                    fill: #AFB6BC;
+                }
+            }
+        }
+
+        .options {
+            border-radius: 3px;
+            align-items: center;
+            display: flex;
+            height: 100%;
+            justify-content: center;
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 36px;
+
+            &:hover {
+                background-color: #0262B6;
+            }
+
+            svg {
+                pointer-events: none;
+            }
+        }
+    }
+
+    .preview-overlay {
+        background-image: linear-gradient(transparent, black);
+        z-index: $toolbarZ + 1;
+    }
+
+    .content {
+        align-items: center;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        justify-content: flex-end;
+        padding-bottom: 24px;
+        z-index: $toolbarZ + 2;
+
+        .title {
+            color: #fff;
+            font-size: 24px;
+            line-height: 32px;
+            margin-bottom: 16px;
+        }
+
+        .copy-meeting {
+            align-items: center;
+            cursor: pointer;
+            color: #fff;
+            display: flex;
+            flex-direction: row;
+            font-size: 15px;
+            font-weight: 300;
+            justify-content: center;
+            line-height: 24px;
+            margin-bottom: 16px;
+
+            .url {
+                background: rgba(28, 32, 37, 0.5);
+                border-radius: 4px;
+                display: flex;
+                padding: 8px 10px;
+                transition: background 0.16s ease-out;
+
+                &:hover {
+                    background: #1C2025;
+                }
+
+                &.done {
+                    background: #31B76A;
+                }
+
+                .jitsi-icon {
+                    margin-left: 10px;
+                }
+            }
+
+            .copy-meeting-text {
+                width: 266px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            &:hover {
+                align-self: stretch;
+            }
+
+            textarea {
+                border-width: 0;
+                height: 0;
+                opacity: 0;
+                padding: 0;
+                width: 0;
+            }
+        }
+
+        input.field {
+            background-color: white;
+            border: none;
+            outline: none;
+            border-radius: 3px;
+            font-size: 15px;
+            line-height: 24px;
+            color: #1C2025;
+            padding: 8px 0;
+            text-align: center;
+            width: 320px;
+
+            &.error {
+                box-shadow: 0px 0px 4px 3px rgba(225, 45, 45, 0.4);
+            }
+
+            &.focused {
+                box-shadow: 0px 0px 4px 3px #0376DA;
+            }
+        }
+    }
+
+    .media-btn-container {
+        display: flex;
+        justify-content: center;
+        margin: 24px 0 16px 0;
+        width: 100%;
+
+        &> div {
+            margin: 0 12px;
+        }
+    }
+}
+
+#preview {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+
+    &.no-video {
+        background: radial-gradient(50% 50% at 50% 50%, #5B6F80 0%, #365067 100%), #FFFFFF;
+        text-align: center;
+    }
+
+    .avatar {
+        background: #A4B8D1;
+        margin: 0 auto;
+    }
+
+    video {
+        height: 100%;
+        object-fit: cover;
+        position: absolute;
+        width: 100%;
+    }
+}
+
+@mixin flex-centered() {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+
+@mixin icon-container($bg, $fill) {
+    .toggle-button-icon-container {
+        background: $bg;
+
+        svg {
+            fill: $fill
+        }
+    }
+}
+
+.toggle-button {
+    border-radius: 3px;
+    cursor: pointer;
+    color: #fff;
+    font-size: 13px;
+    height: 40px;
+    margin: 0 auto;
+    transition: background 0.16s ease-out;
+    width: 320px;
+
+    @include flex-centered();
+
+    svg {
+        fill: transparent;
+    }
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.1);
+
+        @include icon-container(#A4B8D1, #1C2025);
+    }
+
+    &-container {
+        position: relative;
+
+        @include flex-centered();
+    }
+
+    &-icon-container {
+        border-radius: 50%;
+        left: -22px;
+        padding: 2px;
+        position: absolute;
+    }
+
+    &--toggled {
+        @include icon-container(white, #1C2025);
+    }
+}
--- a/css/_reactions-menu.scss
+++ b/css/_reactions-menu.scss
@@ -1,196 +0,0 @@
-@use 'sass:math';
-
-.reactions-menu {
-	width: 280px;
-	background: $menuBG;
-	box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.6), 0px 0px 4px 1px rgba(0, 0, 0, 0.25);
-	border-radius: 3px;
-	padding: 16px;
-
-	&.overflow {
-		width: auto;
-		padding-bottom: max(env(safe-area-inset-bottom, 0), 16px);
-		background-color: #141414;
-		box-shadow: none;
-		border-radius: 0;
-		position: relative;
-
-		.toolbox-icon {
-			width: 48px;
-			height: 48px;
-
-			span.emoji {
-				width: 48px;
-				height: 48px;
-			}
-		}
-
-		.reactions-row {
-			display: flex;
-			flex-direction: row;
-			justify-content: space-around;
-
-			.toolbox-button {
-				margin-right: 0;
-			}
-		}
-	}
-
-	.toolbox-icon {
-		width: 40px;
-		height: 40px;
-		border-radius: 6px;
-
-		span.emoji {
-			width: 40px;
-			height: 40px;
-			font-size: 22px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			transition: font-size ease .1s;
-
-			@for $i from 1 through 12 {
-				&.increase-#{$i}{
-					font-size: calc(20px + #{$i}px);
-				}
-			}
-		}
-	}
-
-	.reactions-row {
-		.toolbox-button {
-			margin-right: 8px;
-			touch-action: manipulation;
-		}
-
-		.toolbox-button:last-of-type {
-			margin-right: 0;
-		}
-	}
-
-	.raise-hand-row {
-		margin-top: 16px;
-
-		.toolbox-button {
-			width: 100%;
-		}
-
-		.toolbox-icon {
-			width: 100%;
-			flex-direction: row;
-			align-items: center;
-
-			span.text {
-				font-style: normal;
-				font-weight: 600;
-				font-size: 14px;
-				line-height: 24px;
-				margin-left: 8px;
-			}
-		}
-	}
-}
-
-.reactions-animations-container {
-	position: absolute;
-	width: 20%;
-	bottom: 0;
-	left: 40%;
-	height: 0;
-}
-
-.reactions-menu-popup-container,
-.reactions-menu-popup {
-	display: inline-block;
-	position: relative;
-}
-
-$reactionCount: 20;
-
-@function random($min, $max) {
-  @return math.random() * ($max - $min) + $min;
-}
-
-.reaction-emoji {
-	position: absolute;
-	font-size: 24px;
-	line-height: 32px;
-	width: 32px;
-	height: 32px;
-	top: 0;
-	left: 20px;
-	opacity: 0;
-	z-index: 1;
-
-	&.reaction-0 {
-		animation: flowToRight 5s forwards ease-in-out;
-	}
-
-	@for $i from 1 through $reactionCount {
-	&.reaction-#{$i} {
-		animation: animation-#{$i} 5s forwards ease-in-out;
-		top: #{random(-40, 10)}px;
-		left: #{random(0, 30)}px;
-	}
-}
-}
-
-@keyframes flowToRight {
-	0% {
-		transform: translate(0px, 0px) scale(0.6);
-		opacity: 1;
-	}
-
-	70% {
-		transform: translate(40px, -70vh) scale(1.5);
-		opacity: 1;
-	}
-
-	75% {
-		transform: translate(40px, -70vh) scale(1.5);
-		opacity: 1;
-	}
-
-	100% {
-		transform: translate(140px, -50vh) scale(1);
-		opacity: 0;
-	}
-}
-
-@mixin animation-list {
-	@for $i from 1 through $reactionCount {
-		$topX: random(-100, 100);
-		$topY: random(65, 75);
-		$bottomX: random(150, 200);
-		$bottomY: random(40, 50);
-
-		@if $topX < 0 {
-			$bottomX: -$bottomX;
-		}
-
-		@keyframes animation-#{$i} {
-			0% {
-				transform: translate(0, 0) scale(0.6);
-				opacity: 1;
-			}
-
-			70% {
-				transform: translate(#{$topX}px, -#{$topY}vh) scale(1.5);
-				opacity: 1;
-			}
-
-			75% {
-				transform: translate(#{$topX}px, -#{$topY}vh) scale(1.5);
-				opacity: 1;
-			}
-
-			100% {
-				transform: translate(#{$bottomX}px, -#{$bottomY}vh) scale(1);
-				opacity: 0;
-			}
-		}
-	}
-}
-
-@include animation-list;
--- a/css/_recording.scss
+++ b/css/_recording.scss
@@ -105,7 +105,6 @@

    .helper-link {
        cursor: pointer;
-        font-weight: bold;
        display: inline-block;
        flex-shrink: 0;
        margin-left: auto;
--- a/css/_subject.scss
+++ b/css/_subject.scss
@@ -1,81 +1,35 @@
 .subject {
+    top: -120px;
+    transition: top .3s ease-in;
+    height: 95px;
+    width: 100%;
+    pointer-events: none;
+    position: absolute;
+    padding: 25px 140px 0 140px;
+    text-align: center;
+    font-size: 17px;
    color: #fff;
-    margin-top: -120px;
-    transition: margin-top .3s ease-in;
-    z-index: $zindex3;
+    z-index: $zindex10;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
+    white-space: nowrap;

    &.visible {
-        margin-top: 20px;
-    }
-}
-
-.subject-info-container {
-    display: flex;
-    justify-content: center;
-    margin: 0 auto;
-    height: 28px;
-
-    @media (max-width: 500px) {
-        flex-wrap: wrap;
-    }
-}
-
-.subject-info {
-    align-items: center;
-    display: flex;
-    margin-bottom: 4px;
-    max-width: 80%;
-    height: 28px;
-}
-
-.subject-text {
-    background: rgba(0, 0, 0, 0.6);
-    border-radius: 3px 0px 0px 3px;
-    box-sizing: border-box;
-    font-size: 14px;
-    line-height: 28px;
-    padding: 0 16px;
-    height: 28px;
-
-    @media (max-width: 700px) {
-        max-width: 100px;
+        top: 0px;
    }

-    @media (max-width: 300px) {
-        display: none;
+    &.gradient {
+        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    }

-    &--content {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+    &-text {
+        vertical-align: middle;
+    }
+
+    &-conference-timer {
+        display: block;
+        font-size: 15px;
+        opacity: 0.6;
    }
 }
-
-.subject-timer {
-    background: rgba(0, 0, 0, 0.8);
-    border-radius: 0px 3px 3px 0px;
-    box-sizing: border-box;
-    font-size: 12px;
-    line-height: 28px;
-    min-width: 34px;
-    padding: 0 8px;
-    height: 28px;
-
-    @media (max-width: 300px) {
-        display: none;
-    }
-}
-
-.details-container {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    height: 48px;
-}
-
-.shift-right .details-container {
-    margin-left: calc(#{$sidebarWidth} / 2);
-}
--- a/css/_toolbars.scss
+++ b/css/_toolbars.scss
@@ -29,7 +29,6 @@
    right: 0;
    transition: bottom .3s ease-in;
    width: 100%;
-    pointer-events: none;


    &.visible {
@@ -55,7 +54,6 @@
    margin-bottom: 16px;
    position: relative;
    z-index: $toolbarZ;
-    pointer-events: none;

    .button-group-center,
    .button-group-left,
@@ -105,24 +103,15 @@
    flex-direction: column;
    margin: 0 auto;
    max-width: 100%;
-    pointer-events: all;
-    border-radius: 6px;
-}
-
-.toolbox-content-wrapper::after {
-    content: '';
-    background: $newToolbarBackgroundColor;
-    padding-bottom: env(safe-area-inset-bottom, 0);
 }

 .toolbox-content-items {
    background: $newToolbarBackgroundColor;
+    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;
-    pointer-events: all;
-    box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15);

    >div {
        margin-left: 8px;
@@ -286,10 +275,6 @@
    }
 }

-.profile-button-avatar {
-    align-items: center;
-}
-
 /**
 * START of fade in animation for main toolbar
 */
@@ -335,7 +320,7 @@
            border-radius: 0;
            display: flex;
            justify-content: space-evenly;
-            padding: 8px 0;
+            padding: 6px 0;
            width: 100%;
        }

--- a/css/_transcription-subtitles.scss
+++ b/css/_transcription-subtitles.scss
@@ -16,8 +16,8 @@
    z-index: $subtitlesZ;

    &.lifted {
-        // Lift subtitle above toolbar+dominant speaker box.
-        bottom: $newToolbarSize + 36px + 40px;
+        // Lift subtitle above toolbar+invite box.
+        bottom: $newToolbarSize + 112px + 40px;
    }

    span {
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -30,7 +30,6 @@ $defaultSideBarFontColor: #44A5FF;
 $defaultSemiDarkColor: #ACACAC;
 $defaultDarkColor: #2b3d5c;
 $defaultWarningColor: rgb(215, 121, 118);
-$participantsPaneBgColor: #141414;
 $presence-available: rgb(110, 176, 5);
 $presence-away: rgb(250, 201, 20);
 $presence-busy: rgb(233, 0, 27);
@@ -42,11 +41,12 @@ $presence-idle: rgb(172, 172, 172);
 $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: 48px;
-$newToolbarSizeMobile: 60px;
 $newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px);
 $toolbarTitleFontSize: 19px;
 $overflowMenuItemColor: #fff;
@@ -61,7 +61,7 @@ $videoThumbnailSelected: #165ECC;
 $participantNameColor: #fff;
 $thumbnailPictogramColor: #fff;
 $dominantSpeakerBg: #165ecc;
-$raiseHandBg: #F8AE1A;
+$raiseHandBg: #D6D61E;
 $audioLevelBg: #44A5FF;
 $connectionIndicatorBg: #165ecc;
 $audioLevelShadow: rgba(9, 36, 77, 0.9);
@@ -116,13 +116,14 @@ $zindex2: 2;
 $zindex3: 3;
 $toolbarBackgroundZ: 4;
 $labelsZ: 5;
+$filmstripVideosZ: 6;
 $subtitlesZ: 7;
 $popoverZ: 8;
 $zindex10: 10;
 $reloadZ: 20;
 $poweredByZ: 100;
 $ringingZ: 300;
-$sideToolbarContainerZ: 300;
+$sideToolbarContainerZ: 200;
 $toolbarZ: 250;
 $drawerZ: 351;
 $tooltipsZ: 401;
@@ -130,9 +131,6 @@ $dropdownMaskZ: 900;
 $dropdownZ: 901;
 $centeredVideoLabelZ: 1010;
 $overlayZ: 1016;
-// Place filmstrip videos over toolbar in order
-// to make connection info visible.
-$filmstripVideosZ: $toolbarZ + 1;


 /**
@@ -264,9 +262,3 @@ $chromeExtensionBannerRightInMeeeting: 10px;
 */
 $smallScreen: 700px;
 $verySmallScreen: 500px;
-
-/**
-* Prejoin / premeeting screen
-*/
-
-$prejoinDefaultContentWidth: 336px;
--- a/css/_video-preview.scss
+++ b/css/_video-preview.scss
@@ -79,8 +79,4 @@
            white-space: nowrap;
        }
    }
-    // Override @atlaskit/InlineDialog container which is made with styled components
-    & > div:nth-child(2) {
-        padding: 0;
-    }
 }
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -1,13 +1,5 @@
 #videoconference_page {
    min-height: 100%;
-    position: relative;
-    transform: translate3d(0, 0, 0);
-    width: 100%;
-}
-
-#layout_wrapper {
-    display: flex;
-    height: 100%;
 }

 #videospace {
@@ -87,6 +79,7 @@

    &__toolbar {
        bottom: 0;
+        height: $thumbnailToolbarHeight;
        padding: 0 5px 0 5px;
    }

@@ -189,20 +182,6 @@
        z-index: $zindex2;
    }

-    &__participant-name {
-        color: #fff;
-        background-color: rgba(0,0,0,.4);
-        padding: 3px 7px;
-        border-radius: 3px;
-        max-width: calc(100% - 32px);
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        height: 16px;
-        display: inline-block;
-        text-align: right;
-    }
-
    @media (min-width: 581px) {
        &.shift-right {
            &#largeVideoContainer {
@@ -253,15 +232,6 @@
    object-fit: cover;
 }

-#sharedVideo video {
-    width: 100%;
-    height: 100%;
-}
-
-#sharedVideo.disable-pointer {
-    pointer-events: none;
-}
-
 #sharedVideo,
 #etherpad,
 #localVideoWrapper video,
@@ -294,8 +264,21 @@
 #alwaysOnTop .displayname,
 .videocontainer .displayname,
 .videocontainer .editdisplayname {
-    font-weight: 100;
+    display: inline-block;
+    position: absolute;
+    left: 10%;
+    width: 80%;
+    top: 50%;
+    @include transform(translateY(-40%));
    color: $participantNameColor;
+    text-align: center;
+    text-overflow: ellipsis;
+    font-size: 12px;
+    font-weight: 100;
+    overflow: hidden;
+    white-space: nowrap;
+    line-height: $thumbnailToolbarHeight;
+    z-index: $zindex2;
 }

 #alwaysOnTop .displayname {
@@ -390,7 +373,7 @@
 }

 .raisehandindicator {
-  background: $raiseHandBg !important;
+  background: $raiseHandBg;
 }

 .connection-indicator {
@@ -415,11 +398,6 @@
    &.status-other {
        background: $connectionIndicatorBg;
    }
-
-    &.status-disabled {
-        background: transparent;
-        border: none
-    }
 }

 .local-video-menu-trigger,
@@ -433,7 +411,7 @@
    right: 0;
    z-index: $zindex2;
    width: 18px;
-    height: 18px;
+    height: 13px;
    color: #FFF;
    font-size: 10pt;
    margin-right: $remoteVideoMenuIconMargin;
--- a/css/_welcome_page.scss
+++ b/css/_welcome_page.scss
@@ -122,11 +122,11 @@ body.welcome-page {
        #moderated-meetings {
            max-width: calc(100% - 40px);
            padding: 16px 0 39px 0;
+            margin: $welcomePageEnterRoomMargin;
            width: $welcomePageEnterRoomWidth;

            p {
                color: $welcomePageDescriptionColor;
-                float: left;
                text-align: $welcomePageHeaderTextAlign;

                a {
--- a/css/buttons/copy.scss
+++ b/css/buttons/copy.scss
@@ -3,7 +3,7 @@
    justify-content: space-between;
    align-items: center;
    padding: 8px 8px 8px 16px;
-    margin-top: 5px;
+    margin-top: 8px;
    width: calc(100% - 24px);
    height: 24px;

--- a/css/components/_input-slider.scss
+++ b/css/components/_input-slider.scss
@@ -1,5 +1,3 @@
-$rangeInputThumbSize: 14;
-
 /**
 * Disable the default webkit styles for range inputs (sliders).
 */
@@ -9,10 +7,10 @@ input[type=range]{
 }

 /**
- * Show focus for keyboard accessibility.
+ * Disable the default focus styles for webkit range inputs (sliders).
 */
 input[type=range]:focus {
-    outline: 1px solid white !important;
+    outline: none;
 }

 /**
--- a/css/filmstrip/_filmstrip_toolbar.scss
+++ b/css/filmstrip/_filmstrip_toolbar.scss
@@ -16,6 +16,7 @@
        padding: 0;
        margin: 0;
        border: none;
+        outline: none;

        -webkit-appearance: none;

--- a/css/filmstrip/_horizontal_filmstrip.scss
+++ b/css/filmstrip/_horizontal_filmstrip.scss
@@ -33,18 +33,18 @@
    }

    &__videos {
+        @extend %align-right;
        position:relative;
        padding: 0;
        /* The filmstrip should not be covered by the left toolbar. */
        bottom: 0;
        width:auto;
+        overflow: visible !important;

        &#remoteVideos {
            border: $thumbnailsBorder solid transparent;
            transition: bottom 2s;
            flex-grow: 1;
-            display: flex;
-            flex-direction: row-reverse;
            @include minHWAutoFix()
        }

@@ -60,27 +60,41 @@
        &.hidden {
            bottom: calc(-196px - #{$newToolbarSizeWithPadding});
        }
+
+        .remote-videos-container {
+            display: flex;
+        }
    }

-    .remote-videos {
-        overscroll-behavior: contain;
-
-        & > div {
-            transition: opacity 1s;
-            position: absolute;
-        }
-
-        &.is-not-overflowing > div {
-            right: 2px;
-        }
+    .remote-videos-container {
+        transition: opacity 1s;
    }

    &.hide-videos {
-        .remote-videos  {
-            & > div {
-                opacity: 0;
-                pointer-events: none;
-            }
+        .remote-videos-container {
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+
+    #filmstripRemoteVideos {
+        @include minHWAutoFix();
+
+        display: flex;
+        flex: 1;
+        width: auto;
+        justify-content: flex-end;
+        flex-direction: row;
+
+        #filmstripRemoteVideosContainer {
+            flex-direction: row-reverse;
+            /**
+             * Add padding as a hack for Firefox not to show scrollbars when
+             * unnecessary.
+             */
+            padding: 1px 0;
+            overflow-y: hidden;
+            overflow-x: scroll;
        }
    }

@@ -89,3 +103,25 @@
    }
 }

+
+/**
+ * Workarounds for Edge and Firefox not handling scrolling properly with
+ * flex-direction: row-reverse.
+ */
+ @mixin undoRowReverseVideos() {
+    .horizontal-filmstrip {
+        #remoteVideos #filmstripRemoteVideos #filmstripRemoteVideosContainer {
+            flex-direction: row;
+        }
+    }
+}
+
+/** Firefox detection hack **/
+@-moz-document url-prefix() {
+    @include undoRowReverseVideos();
+}
+
+/** Edge detection hack **/
+@supports (-ms-ime-align:auto) {
+    @include undoRowReverseVideos();
+}
--- a/css/filmstrip/_tile_view.scss
+++ b/css/filmstrip/_tile_view.scss
@@ -7,15 +7,16 @@
     * see.
     */
    .active-speaker {
-        box-shadow: 0px 0px 1px 1.5px black, 0px 0px 1.3px 4px $videoThumbnailSelected;
+        box-shadow: 0 0 5px 3px $videoThumbnailSelected
    }

-    .remote-videos {
+    #filmstripRemoteVideos {
        align-items: center;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
-        overscroll-behavior: contain;
+        height: 100%;
+        width: 100vw;
    }

    .filmstrip__videos .videocontainer {
@@ -33,10 +34,6 @@
         */
        height: 100% !important;
        width: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        transition: margin-bottom .3s ease-in;
    }

    .filmstrip {
@@ -54,23 +51,11 @@
                margin-left: $sidebarWidth;
                width: calc(100% - #{$sidebarWidth});

-                .remote-videos {
+                #filmstripRemoteVideos {
                    width: calc(100vw - #{$sidebarWidth});
                }
            }
        }
-
-        &.collapse {
-            #remoteVideos {
-                height: calc(100% - #{$newToolbarSizeMobile}) !important;
-                margin-bottom: $newToolbarSizeMobile;
-            }
-
-            .remote-videos {
-                // !important is needed here as overflow is set via element.style in a FixedSizeGrid.
-                overflow: hidden auto !important;
-            }
-        }
    }

    /**
@@ -81,49 +66,63 @@
        display: block;
    }

-    .remote-videos {
+    #filmstripRemoteVideos {
        box-sizing: border-box;

+        /**
+         * Allow vertical scrolling of the thumbnails.
+         */
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+    /**
+     * The size of the thumbnails should be set with javascript, based on
+     * desired column count and window width. The rows are created using flex
+     * and allowing the thumbnails to wrap.
+     */
+    #filmstripRemoteVideosContainer {
+        align-content: center;
+        align-items: center;
+        box-sizing: border-box;
+        display: flex;
+        flex-wrap: wrap;
+        flex-shrink: 0;
+        margin-top: auto;
+        margin-bottom: auto;
+        justify-content: center;
+
+        .videocontainer {
+            border: 0;
+            box-sizing: border-box;
+            display: block;
+            margin: 2px;
+        }
+
+        video {
+            object-fit: contain;
+        }

        /**
-        * The size of the thumbnails should be set with javascript, based on
-        * desired column count and window width. The rows are created using flex
-        * and allowing the thumbnails to wrap.
-        */
-        & > div {
-            align-content: center;
-            align-items: center;
-            box-sizing: border-box;
-            display: flex;
-            margin-top: auto;
-            margin-bottom: auto;
-            justify-content: center;
-            position: absolute;
-
-            .videocontainer {
-                border: 0;
-                box-sizing: border-box;
-                display: block;
-                margin: 2px;
-            }
-
+         * Max-width corresponding to the ASPECT_RATIO_BREAKPOINT from features/filmstrip/constants.
+         */
+        @media only screen and (max-width: 500px) {
            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;
-                }
+                object-fit: cover;
            }
        }
    }
+
+    .has-overflow#filmstripRemoteVideosContainer {
+        align-content: baseline;
+    }
+
+    .has-overflow .videocontainer {
+        align-self: baseline;
+    }
 }

-.shift-right .remote-videos > div {
+.shift-right #filmstripRemoteVideosContainer {
    /**
     * Max-width corresponding to the ASPECT_RATIO_BREAKPOINT from features/filmstrip/constants,
     * from which we subtract the chat size.
@@ -134,7 +133,3 @@
        }
    }
 }
-
-.indicator-icon-container {
-    display: inline-block;
-}
--- a/css/filmstrip/_vertical_filmstrip.scss
+++ b/css/filmstrip/_vertical_filmstrip.scss
@@ -1,10 +1,8 @@
 .vertical-filmstrip .filmstrip {
    &.hide-videos {
-        .remote-videos {
-            & > div {
-                opacity: 0;
-                pointer-events: none;
-            }
+        .remote-videos-container {
+            opacity: 0;
+            pointer-events: none;
        }
    }

@@ -28,7 +26,7 @@
    flex-direction: column-reverse;
    height: 100%;
    width: 100%;
-    padding: ($desktopAppDragBarHeight - 5px) 5px calc(env(safe-area-inset-bottom, 0) + 10px);
+    padding: ($desktopAppDragBarHeight - 5px) 5px 10px;
    /**
     * fixed positioning is necessary for remote menus and tooltips to pop
     * out of the scrolling filmstrip. AtlasKit dialogs and tooltips use
@@ -41,6 +39,10 @@
    right: 0;
    z-index: $filmstripVideosZ;

+    &.reduce-height {
+        height: calc(100% - #{$newToolbarSizeWithPadding});
+    }
+
    /**
     * Hide videos by making them slight to the right.
     */
@@ -96,10 +98,33 @@
     * filmstrip from overlapping the left edge of the screen.
     */
    #filmstripLocalVideo,
-    .remote-videos {
+    #filmstripRemoteVideos {
        padding: 0;
    }

+    #filmstripRemoteVideos {
+        @include minHWAutoFix();
+
+        display: flex;
+        flex: 1;
+        flex-direction: column-reverse;
+        height: auto;
+        overflow-x: hidden;
+        overflow-y: scroll;
+
+        #filmstripRemoteVideosContainer {
+            @include minHWAutoFix();
+            flex-direction: column-reverse;
+            overflow: visible;
+            width: calc(100% - 8px); // 8px for margin + border of the thumbnails
+
+            .videocontainer {
+                height: 0px;
+                width: 100%;
+            }
+        }
+    }
+
    #remoteVideos {
        @include minHWAutoFix();

@@ -107,22 +132,56 @@
        flex-grow: 1;
    }

-    &.reduce-height {
-        height: calc(100% - calc(#{$newToolbarSizeWithPadding} + #{$scrollHeight}));
+    .remote-videos-container {
+        display: flex;
+        transition: opacity 1s;
    }

-    .remote-videos {
-        display: flex;
-        transition: height .3s ease-in;
-        overscroll-behavior: contain;
-
-        & > div {
-            position: absolute;
-            transition: opacity 1s;
-        }
-
-        &.is-not-overflowing > div {
-            bottom: 0px;
+    .hide-scrollbar#filmstripRemoteVideos {
+        margin-right: 7px; // Scrollbar size
+        &::-webkit-scrollbar {
+            display: none;
        }
    }
 }
+
+/**
+ * Workarounds for Edge and Firefox not handling scrolling properly with
+ * flex-direction: column-reverse. The remove videos in filmstrip should
+ * start scrolling from the bottom of the filmstrip, but in those browsers the
+ * scrolling won't happen. Per W3C spec, scrolling should happen from the
+ * bottom. As such, use css hacks to get around the css issue, with the intent
+ * being to remove the hacks as the spec is supported.
+ */
+@mixin undoColumnReverseVideos() {
+    .vertical-filmstrip {
+        #remoteVideos #filmstripRemoteVideos #filmstripRemoteVideosContainer {
+            flex-direction: column;
+        }
+    }
+}
+
+/**
+ * FF does not include the scroll width when calculating the size of the content. That's why we need to include
+ * ourselves the width of the scroll so that the remote videos are aligned with the local one.
+ */
+@mixin filmstripSizeWithoutScroll {
+    .vertical-filmstrip {
+        #remoteVideos #filmstripRemoteVideos {
+            #filmstripRemoteVideosContainer {
+                width: calc(100% - 15px) // 8 px - margins + border of the thumbnails; 7px - for the scroll
+            }
+        }
+    }
+}
+
+/** Firefox detection hack **/
+@-moz-document url-prefix() {
+    @include undoColumnReverseVideos();
+    @include filmstripSizeWithoutScroll();
+}
+
+/** Edge detection hack **/
+@supports (-ms-ime-align:auto) {
+    @include undoColumnReverseVideos();
+}
--- a/css/filmstrip/_vertical_filmstrip_overrides.scss
+++ b/css/filmstrip/_vertical_filmstrip_overrides.scss
@@ -81,13 +81,9 @@

    .local-video-menu-trigger,
    .remote-video-menu-trigger {
-        margin-bottom: 3px;
+        margin-bottom: 7px;
        margin-left: $remoteVideoMenuIconMargin;
    }
-
-    .self-view-mobile-portrait video {
-        object-fit: contain;
-    }
 }

 /**
@@ -116,11 +112,3 @@
        transition-delay: 0.1s;
    }
 }
-
-/**
- * Overrides for self view when in portrait mode on mobile.
- * This is done in order to keep the aspect ratio.
- */
-.vertical-filmstrip .self-view-mobile-portrait #localVideo_container {
-    object-fit: contain;
-}
--- a/css/main.scss
+++ b/css/main.scss
@@ -41,14 +41,14 @@ $flagsImagePath: "../images/";
@import 'modals/feedback/feedback';
@import 'modals/invite/info';
@import 'modals/settings/settings';
-@import 'modals/screen-share/share-audio';
-@import 'modals/screen-share/share-screen-warning';
@import 'modals/speaker_stats/speaker_stats';
+@import 'modals/video-quality/video-quality';
@import 'modals/virtual-background/virtual-background';
@import 'modals/local-recording/local-recording';
@import 'videolayout_default';
@import 'notice';
@import 'subject';
+@import 'participants-count';
@import 'popup_menu';
@import 'recording';
@import 'login_menu';
@@ -58,6 +58,7 @@ $flagsImagePath: "../images/";
@import 'welcome_page_content';
@import 'welcome_page_settings_toolbar';
@import 'toolbars';
+@import 'jquery.contextMenu';
@import 'keyboard-shortcuts';
@import 'redirect_page';
@import 'components/form-control';
@@ -77,6 +78,8 @@ $flagsImagePath: "../images/";
@import 'filmstrip/tile_view_overrides';
@import 'filmstrip/vertical_filmstrip';
@import 'filmstrip/vertical_filmstrip_overrides';
+@import 'labels';
+@import 'lobby';
@import 'unsupported-browser/main';
@import 'modals/invite/add-people';
@import 'deep-linking/main';
@@ -92,18 +95,15 @@ $flagsImagePath: "../images/";
@import 'meter';
@import 'audio-preview';
@import 'video-preview';
-@import 'premeeting/main';
+@import 'prejoin';
+@import 'prejoin-dialog';
@import 'country-picker';
@import 'modals/invite/invite_more';
@import 'modals/security/security';
-@import 'modals/mute/mute-dialog';
+@import 'premeeting-screens';
@import 'e2ee';
@import 'responsive';
+@import 'connection-status';
@import 'drawer';
-@import 'participants-pane';
-@import 'reactions-menu';
-@import 'plan-limit';
-@import 'polls';
-@import 'notifications';

 /* Modules END */
--- a/css/modals/_dialog.scss
+++ b/css/modals/_dialog.scss
@@ -122,6 +122,9 @@
        margin-bottom: 8px;
    }
 }
+.modal-dialog-footer {
+    font-size: $modalButtonFontSize;
+}

 /**
 * Styling inline dialog errors.
--- a/css/modals/device-selection/_device-selection.scss
+++ b/css/modals/device-selection/_device-selection.scss
@@ -103,7 +103,7 @@
        font-size: 14px;

        a {
-            color: #6FB1EA;
+            color: #2684FF;
            cursor: pointer;
            text-decoration: none;
        }
@@ -119,7 +119,7 @@
        height: 8px;

        .audio-input-preview-level {
-            background: #75B1FF;
+            background: #4C9AFF;
            border-radius: 5px;
            height: 100%;
            -webkit-transition: width .1s ease-in-out;
@@ -129,20 +129,3 @@
        }
    }
 }
-
-.device-selection.video-hidden {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-
-    .column-selectors {
-        width: 100%;
-        margin-left: 0;
-    }
-
-    .column-video {
-        order: 1;
-        width: 100%;
-        margin-top: 8px;
-    }
-}
--- a/css/modals/feedback/_feedback.scss
+++ b/css/modals/feedback/_feedback.scss
@@ -94,9 +94,5 @@
            };

        }
-        .star-btn:focus,
-        .star-btn:active {
-            outline: 1px solid #B8C7E0;
-        }
    }
 }
--- a/css/modals/invite/_info.scss
+++ b/css/modals/invite/_info.scss
@@ -30,26 +30,20 @@
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
-        margin-right: 5px;
    }

    .info-password-none,
    .info-password-remote {
-        color: #fff;
+        opacity: 0.5;
    }

    .info-password-input {
        width: 100%;
-        background-color: #0E1624;
-        border-radius: 3px;
-        border: 2px solid #202B3D;
+        background-color: transparent;
+        border: none;
        color: inherit;
        padding-left: 0;
    }
-    .info-password-input:focus ,
-    .info-password-input:active {
-       border: 2px solid #B8C7E0;
-    }

    .info-password-local {
        user-select: text;
--- a/css/modals/invite/_invite_more.scss
+++ b/css/modals/invite/_invite_more.scss
@@ -97,18 +97,18 @@
                border-top: none;
                border-radius: 0 0 3px 3px;

-                .copy-invite-icon, .provider-icon {
-                    align-items: center;
-                    cursor: pointer;
+                & > * {
                    display: flex;
+                    justify-content: center;
+                    align-items: center;
                    height: 40px;
-                    place-content: center;
                    width: 40px;
+                    border-radius: 4px;
+                    cursor: pointer;
                }

                &:hover > div:hover {
                    background-color: rgba(255, 255, 255, 0.2);
-                    border-radius: 4px;
                }

                & > :not(:last-child) {
@@ -130,7 +130,6 @@
                display: inline-block;
                vertical-align: middle;
                cursor: pointer;
-                height: 24px;
            }
        }

@@ -142,7 +141,7 @@
            & > a {
                display: inline-block;
                height: 24px;
-                min-width: 48px;
+                width: 48px;
                border-radius: 3px;
                text-align: center;
                text-decoration: none;
--- a/css/modals/mute/_mute-dialog.scss
+++ b/css/modals/mute/_mute-dialog.scss
@@ -1,19 +0,0 @@
-.mute-dialog {
-	.separator-line {
-        margin: 24px 0 24px -20px;
-        padding: 0 20px;
-        width: 100%;
-        height: 1px;
-        background: #5E6D7A;
-    }
-
-	.control-row {
-        display: flex;
-        justify-content: space-between;
-        margin-top: 15px;
-
-        label {
-            font-size: 14px;
-        }
-    }
-}
--- a/css/modals/screen-share/_share-audio.scss
+++ b/css/modals/screen-share/_share-audio.scss
@@ -1,22 +0,0 @@
-.share-audio-dialog {
-    .share-audio-animation {
-        width: 100%;
-        height: 90%;
-        object-fit: contain;
-    }
-    input[type="checkbox"] + svg + span {
-        color: #9FB0CC;
-    }
-
-    .separator-line {
-        margin: 24px 0 24px -20px;
-        padding: 0 20px;
-        width: 100%;
-        height: 1px;
-        background: #5E6D7A;
-
-        &:last-child {
-            display: none;
-        }
-    }
-}
--- a/css/modals/screen-share/_share-screen-warning.scss
+++ b/css/modals/screen-share/_share-screen-warning.scss
@@ -1,23 +0,0 @@
-.share-screen-warn-dialog {
-    font-size: 14px;
-
-    .separator-line {
-        margin: 24px 0 24px -20px;
-        padding: 0 20px;
-        width: 100%;
-        height: 1px;
-        background: #5E6D7A;
-
-        &:last-child {
-            display: none;
-        }
-    }
-
-    .header {
-        font-weight: 600;
-    }
-
-    .description {
-        margin-top: 16px;
-    }
-}
--- a/css/modals/settings/_settings.scss
+++ b/css/modals/settings/_settings.scss
@@ -16,19 +16,12 @@
    }

    .mock-atlaskit-label {
-        color: #b8c7e0;
+        color: #56637A;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.33;
        padding: 20px 0px 4px 0px;
    }
-    input[type="checkbox"]:checked + svg {
-        --checkbox-background-color: #6492e7;
-        --checkbox-border-color: #6492e7;
-    }
-    input[type="checkbox"] + svg + span {
-        color: #b8c7e0;
-    }

    input[type="checkbox"] + svg + span {
        color: #9FB0CC;
@@ -36,12 +29,6 @@

    .calendar-tab,
    .more-tab,
-    .box {
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-    }
-
    .profile-edit {
        display: flex;
        width: 100%;
@@ -51,24 +38,17 @@
        flex: 1;
    }
    .settings-sub-pane {
-        flex: 1;
+        flex-grow: 1;
    }

-    .settings-sub-pane .right {
-        flex: 1;
-    }
-    .settings-sub-pane .left {
-        flex: 1;
-    }
-
-    .settings-sub-pane-element {
-        text-align: left;
-        flex: 1;
-    }
    .profile-edit-field {
        margin-right: 20px;
    }

+    .language-settings {
+        max-width: 50%;
+    }
+
    .calendar-tab {
        align-items: center;
        flex-direction: column;
@@ -84,14 +64,4 @@
    .sign-out-cta {
        margin-bottom: 20px;
    }
-
-    @media only screen and (max-width: $smallScreen) {
-        .device-selection {
-            display: flex;
-            flex-direction: column;
-        }
-        .more-tab {
-            flex-direction: column;
-        }
-    }
 }
--- a/css/modals/video-quality/_video-quality.scss
+++ b/css/modals/video-quality/_video-quality.scss
@@ -0,0 +1,113 @@
+.video-quality-dialog {
+    .video-quality-dialog-title {
+        margin-bottom: 10px;
+    }
+
+    .video-quality-dialog-contents {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        padding: 10px;
+        min-width: 250px;
+
+        .video-quality-dialog-slider-container {
+            width: 100%;
+            text-align: center;
+        }
+
+        .video-quality-dialog-slider {
+            width: calc(100% - 5px);
+
+            @mixin sliderTrackStyles() {
+                height: 15px;
+                border-radius: 10px;
+                background: rgb(14, 22, 36);
+            }
+
+            &::-ms-track {
+                @include sliderTrackStyles();
+            }
+
+            &::-moz-range-track {
+                @include sliderTrackStyles();
+            }
+
+            &::-webkit-slider-runnable-track {
+                @include sliderTrackStyles();
+            }
+
+            @mixin sliderThumbStyles() {
+                top: 50%;
+                border: none;
+                position: relative;
+                opacity: 0;
+            }
+
+            &::-ms-thumb {
+                @include sliderThumbStyles();
+            }
+
+            &::-moz-range-thumb {
+                @include sliderThumbStyles();
+
+            }
+
+            &::-webkit-slider-thumb {
+                @include sliderThumbStyles();
+            }
+        }
+
+        .video-quality-dialog-labels {
+            box-sizing: border-box;
+            display: flex;
+            margin-top: 5px;
+            position: relative;
+            width: 90%;
+        }
+
+        .video-quality-dialog-label-container {
+            position: absolute;
+            text-align: center;
+            transform: translate(-50%, 0%);
+
+            &::before {
+                content: '';
+                border-radius: 50%;
+                left: 0;
+                height: 6px;
+                margin: 0 auto;
+                pointer-events: none;
+                position: absolute;
+                right: 0;
+                top: -16px;
+                width: 6px;
+            }
+        }
+
+        .video-quality-dialog-label-container.active {
+            color: $videoQualityActive;
+
+            &::before {
+                background: $videoQualityActive;
+                height: 12px;
+                top: -19px;
+                width: 12px;
+            }
+        }
+
+        .video-quality-dialog-label-container:first-child {
+            position: relative;
+        }
+
+        .video-quality-dialog-label {
+            display: table-caption;
+            word-spacing: unset;
+        }
+    }
+}
+
+.modal-dialog-form {
+    .video-quality-dialog-title {
+        display: none;
+    }
+}
--- a/css/modals/virtual-background/_virtual-background.scss
+++ b/css/modals/virtual-background/_virtual-background.scss
@@ -1,203 +1,89 @@
 .virtual-background-dialog {
-    margin-left: -10px;
-    position: relative;
-    max-height: 300px;
-    color: white;
    display: inline-grid;
-    grid-template-columns: auto auto auto auto auto;
-    column-gap: 9px;
+    grid-template-columns: auto auto auto auto auto auto auto;
+    max-width: 370px;
    cursor: pointer;
-    .desktop-share:hover,
-    .thumbnail:hover,
-    .blur:hover,
-    .slight-blur:hover,
-    .virtual-background-none:hover {
-        opacity: 0.5;
-        border: 2px solid #99bbf3;
-        @media (max-width: 632px) {
-            height: 60px;
-            width: 60px;
-        }
-    }
-    .background-option {
-        margin-top: 8px;
-        border-radius: 6px;
-        height: 60px;
-        width: 107px;
-        text-align: center;
-        justify-content: center;
-        font-weight: bold;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-    }
    .thumbnail {
+        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;
-        border: 2px solid #246fe5;
-    }
-    .blur {
-        box-shadow: inset 0 0 12px #000000;
-        background: #7e8287;
-        padding: 0 10px;
+        padding: 5px;
+        height: 40px;
+        width: 40px;
+        border: 2px solid #a4b8d1;
    }
    .blur-selected {
-        box-shadow: inset 0 0 12px #000000;
-        background: #7e8287;
-        border: 2px solid #246fe5;
-        padding: 0 10px;
-    }
-    .slight-blur {
-        box-shadow: inset 0 0 12px #000000;
-        background: #a4a4a4;
-        padding: 0 10px;
-    }
-    .slight-blur-selected {
-        box-shadow: inset 0 0 12px #000000;
-        background: #a4a4a4;
-        border: 2px solid #246fe5;
-        padding: 0 10px;
+        border-radius: 10px;
+        border: 2px solid #a4b8d1;
    }
    .virtual-background-none {
-        background: #525252;
-        padding: 0 10px;
+        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 {
-        background: #525252;
-        border: 2px solid #246fe5;
-        padding: 0 10px;
+        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;
    }
-
-    .desktop-share {
-        background: #525252;
-    }
-    .desktop-share-selected {
-        background: #525252;
-        border: 2px solid #246fe5;
-        padding: 0 10px;
-    }
-
-    @media (max-width: 632px) {
-        font-size: 1.5vw;
-        .desktop-share,
-        .virtual-background-none,
-        .thumbnail,
-        .blur,
-        .slight-blur {
-            height: 60px;
-            width: 60px;
-        }
-        .desktop-share-selected,
-        .thumbnail-selected,
-        .none-selected,
-        .blur-selected,
-        .slight-blur-selected {
-            height: 60px;
-            width: 60px;
-        }
-    }
-    @media (max-width: 360px) {
-        grid-template-columns: auto auto auto;
-    }
-}
-
-.modal-dialog-form .virtual-background-loading {
-    overflow: hidden;
-    position: fixed;
-    left: 50%;
-    margin-top: 10px;
-    transform: translateX(-50%);
-}
-.modal-dialog-form .video-preview {
-    height: 250px;
 }
 .file-upload-btn {
    display: none;
 }
-.file-upload-label {
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 20px;
-    margin-left: -10px;
-    margin-top: 16px;
-    margin-bottom: 8px;
-    color: #669aec;
-    display: inline-flex;
+.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 {
-    background: #3d3d3d;
    position: absolute;
    display: none;
-    left: 96;
-    bottom: 51;
-    @media (max-width: 632px) {
-        left: 51px;
-    }
+    left: 36;
+    bottom: 36;
 }
-
 .delete-image-icon:hover {
    display: block;
 }

 .thumbnail-container {
    position: relative;
-    &:focus-within {
-        .thumbnail ~ .delete-image-icon {
-            display: block;
-        }
-    }
 }

-.add-background {
-    margin-right: 8px;
-}
-
-.apply-background-btn {
-    margin-top: 16px;
-    float: right;
-}
-
-.video-background-preview-entry {
-    margin-left: -10px;
-    height: 250px;
-    width: 570px;
-    margin-bottom: 8px;
-    z-index: 2;
-    @media (max-width: 632px) {
-        max-width: 336;
-    }
-}
-
-.virtual-background-preview-video {
-    margin-left: -10;
-    border-radius: 6px;
-    height: 100%;
-    object-fit: cover;
-    width: 100%;
-}
-.video-preview-loader {
-    border-radius: 6px;
-    background-color: transparent;
-    height: 250px;
-    margin-bottom: 8px;
-    width: 572px;
-    position: fixed;
-    z-index: 2;
-    @media (min-width: 432px) and (max-width: 632px) {
-        width: 340px;
-    }
-}
-
-.video-preview-loader svg {
-    position: absolute;
-    top: 40%;
-    left: 45%;
+.loading-content-text{
+  margin-right: 15px;
 }
--- a/css/premeeting/_device-status.scss
+++ b/css/premeeting/_device-status.scss
@@ -1,38 +0,0 @@
-.device {
-    &-status {
-        align-items: center;
-        color: #fff;
-        display: flex;
-        font-size: 14px;
-        line-height: 20px;
-        padding: 6px;
-        text-align: center;
-
-        &-error {
-            align-items: flex-start;
-            background-color: #F8AE1A;
-            border-radius: 6px;
-            color: #040404;
-            padding: 12px 16px;
-            text-align: left;
-        }
-
-        span {
-            margin-left: 16px;
-        }
-    }
-
-    &-icon {
-        background-position: center;
-        background-repeat: no-repeat;
-        display: inline-block;
-        height: 16px;
-        width: 16px;
-
-        &--ok {
-            svg path {
-                fill: #189b55;
-            }
-        }
-    }
-}
--- a/css/premeeting/_main.scss
+++ b/css/premeeting/_main.scss
@@ -1,7 +0,0 @@
-@import 'connection-status';
-@import 'device-status';
-@import 'lobby';
-@import 'premeeting-screens';
-@import 'prejoin';
-@import 'prejoin-dialog';
-@import 'prejoin-third-party';
--- a/css/premeeting/_prejoin-third-party.scss
+++ b/css/premeeting/_prejoin-third-party.scss
@@ -1,40 +0,0 @@
-$sidePanelWidth: 300px;
-
-.prejoin-third-party {
-  flex-direction: column-reverse;
-  
-  .content {
-      height: auto;
-      margin: 0 auto;
-      width: auto;
-
-      .new-toolbox {
-          width: auto;
-      }
-  }
-
-  #preview {
-      background-color: transparent;
-      bottom: 0;
-      left: 0;
-      position: absolute;
-      right: 0;
-      top: 0;
-
-      .avatar {
-          display: none;
-      }
-  }
-
-  &.splash {
-      .content {
-          margin-left: calc((100% - #{$prejoinDefaultContentWidth} + #{$sidePanelWidth}) / 2)
-      }
-  }
-
-  &.guest {
-      .content {
-          margin-bottom: auto;
-      }
-  }
-}
--- a/css/premeeting/_prejoin.scss
+++ b/css/premeeting/_prejoin.scss
@@ -1,65 +0,0 @@
-.prejoin {
-    &-input-area {
-        width: 100%;
-    }
-
-    &-error {
-        background-color: #E04757;
-        border-radius: 6px;
-        box-sizing: border-box;
-        color: white;
-        font-size: 12px;
-        line-height: 16px;
-        margin-bottom: 16px;
-        margin-top: -8px;
-        padding: 4px;
-        text-align: center;
-        width: 100%;
-    }
-}
-
-.prejoin-preview {
-    &-dropdown-btns {
-        padding: 8px 0;
-    }
-  
-    &-dropdown-btn {
-        align-items: center;
-        color: #1C2025;
-        cursor: pointer;
-        display: flex;
-        height: 40px;
-        font-size: 15px;
-        line-height: 24px;
-        padding: 0 16px;
-  
-        &:hover {
-            background-color: #DAEBFA;
-        }
-    }
-  
-    &-dropdown-icon {
-        display: inline-block;
-        margin-right: 16px;
-  
-        & > svg {
-            fill:  #1C2025;
-        }
-    }
-  
-    &-dropdown-container {
-        position: relative;
-        width: 100%;
-  
-        /**
-        * Override default InlineDialog behaviour, since it does not play nicely with relative widths
-        */
-        & > div:nth-child(2) {
-            background: #fff;
-            padding: 0;
-            position: absolute !important;
-            width: 100%;
-        }
-    }
-  }
-  
--- a/css/premeeting/_premeeting-screens.scss
+++ b/css/premeeting/_premeeting-screens.scss
@@ -1,243 +0,0 @@
- .premeeting-screen {
-    background: #292929;
-    bottom: 0;
-    display: flex;
-    font-size: 1.3em;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: $toolbarZ + 1;
-
-    .action-btn {
-        border-radius: 6px;
-        box-sizing: border-box;
-        color: #fff;
-        cursor: pointer;
-        display: inline-block;
-        font-size: 14px;
-        font-weight: 600;
-        line-height: 24px;
-        margin-bottom: 16px;
-        padding: 7px 16px;
-        position: relative;
-        text-align: center;
-        width: 100%;
-
-        &.primary {
-            background: #0376DA;
-            border: 1px solid #0376DA;
-        }
-
-        &.secondary {
-            background: #3D3D3D;
-            border: 1px solid transparent;
-        }
-
-        &.text {
-            width: auto;
-            font-size: 13px;
-            margin: 0;
-            padding: 0;
-        }
-
-        &.disabled {
-            background: #5E6D7A;
-            border: 1px solid #5E6D7A;
-            color: #AFB6BC;
-            cursor: initial;
-
-            .icon {
-                & > svg {
-                    fill: #AFB6BC;
-                }
-            }
-        }
-
-        .options {
-            border-radius: 3px;
-            align-items: center;
-            display: flex;
-            height: 100%;
-            justify-content: center;
-            position: absolute;
-            right: 0;
-            top: 0;
-            width: 36px;
-
-            &:hover {
-                background-color: #0262B6;
-            }
-
-            svg {
-                pointer-events: none;
-            }
-        }
-    }
-
-    .content {
-        align-items: center;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        flex-shrink: 0;
-        height: 100%;
-        margin: 0 110px;
-        padding: 24px 0 16px;
-        position: relative;
-        width: $prejoinDefaultContentWidth;
-        z-index: $toolbarZ + 2;
-
-        &-controls {
-            align-items: center;
-            display: flex;
-            flex-direction: column;
-            margin: auto;
-            width: 100%;
-
-            .title {
-                color: #fff;
-                font-size: 28px;
-                font-weight: 600;
-                letter-spacing: -0.015;
-                line-height: 36px;
-                margin-bottom: 32px;
-                text-align: center;
-            }
-
-            input.field {
-                background-color: white;
-                border: none;
-                outline: none;
-                border-radius: 6px;
-                font-size: 14px;
-                line-height: 20px;
-                margin-bottom: 16px;
-                color: #1C2025;
-                padding: 10px 16px;
-                text-align: center;
-                width: 100%;
-
-                &.error {
-                    border: 1px solid #E04757;
-                }
-
-                &.focused {
-                    box-shadow: 0px 0px 1px 1.5px black, 0px 0px 1.3px 4px white;
-                }
-            }
-
-            #new-toolbox {
-                bottom: 0;
-                position: relative;
-                transition: none;
-
-                .toolbox-content {
-                    margin-bottom: 4px;
-                }
-
-                .toolbox-content-items {
-                    background: transparent;
-                    border-radius: 0;
-                    box-shadow: none;
-                    display: flex;
-                    justify-content: space-evenly;
-                    padding: 8px 0;
-                }
-
-                .toolbox-content,
-                .toolbox-content-wrapper,
-                .toolbox-content-items {
-                    box-sizing: border-box;
-                    width: 100%;
-                }
-            }
-        }
-    }
-
-    @media (max-width: 1000px) {
-        flex-direction: column-reverse;
-
-        .content {
-            height: auto;
-            margin: 0 auto;
-        }
-
-        .con-status {
-            margin: 24px auto;
-            position: fixed;
-            top: 0;
-            width: $prejoinDefaultContentWidth;
-        }
-    }
-
-    @media (max-width: 400px) {
-        .content {
-            padding: 16px;
-            width: 100%;
-
-            &-controls {
-                input.field {
-                    font-size: 16px;
-                    padding: 14px 16px;
-                }
-            }
-
-            .title {
-                display: none;
-            }
-        }
-
-        .con-status {
-            margin: 0;
-            width: 100%;
-        }
-
-        .device-status-error {
-            border-radius: 0;
-            margin: 0 -16px;
-        }
-
-        input.field {
-            font-size: 16px;
-            padding: 14px 16px;
-        }
-
-        .action-btn {
-            font-size: 16px;
-            margin-bottom: 8px;
-            padding: 11px 16px;
-        }
-    }
-
-    input::placeholder {
-        color: #040404;
-    }
-}
-
-#preview {
-    background: #040404;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    width: 100%;
-
-    .avatar {
-        text {
-            fill: white;
-        }
-    }
-
-    video {
-        height: 100%;
-        object-fit: cover;
-        width: 100%;
-    }
-}
-
-@mixin flex-centered() {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
--- a/css/themes/_light.scss
+++ b/css/themes/_light.scss
@@ -107,4 +107,4 @@ $selectActiveItemBg: darken($controlBackground, 20%);
 /**
 * TODO: Replace by themed component.
 */
-$videoQualityActive: #57A0ff;
+$videoQualityActive: #4C9AFF;
--- a/debian/control
+++ b/debian/control
@@ -33,7 +33,7 @@ Description: Configuration for web serving of Jitsi Meet

 Package: jitsi-meet-prosody
 Architecture: all
-Depends: openssl, prosody (>= 0.11.0) | prosody-trunk | prosody-0.11, lua-sec
+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
--- a/debian/jitsi-meet-prosody.postinst
+++ b/debian/jitsi-meet-prosody.postinst
@@ -125,13 +125,11 @@ case "$1" in

        # Check whether prosody config has the internal muc, if not add it,
        # as we are migrating configs
-        if [ -f $PROSODY_HOST_CONFIG ] && ! grep -q "internal.$JICOFO_AUTH_DOMAIN" $PROSODY_HOST_CONFIG; then
-            echo -e "\nComponent \"internal.$JICOFO_AUTH_DOMAIN\" \"muc\"" >> $PROSODY_HOST_CONFIG
+        if [ -f $PROSODY_HOST_CONFIG ] && ! grep -q "internal.auth.$JVB_HOSTNAME" $PROSODY_HOST_CONFIG; then
+            echo -e "\nComponent \"internal.auth.$JVB_HOSTNAME\" \"muc\"" >> $PROSODY_HOST_CONFIG
            echo -e "    storage = \"memory\"" >> $PROSODY_HOST_CONFIG
            echo -e "    modules_enabled = { \"ping\"; }" >> $PROSODY_HOST_CONFIG
-            echo -e "    admins = { \"$JICOFO_AUTH_USER@$JICOFO_AUTH_DOMAIN\", \"jvb@$JICOFO_AUTH_DOMAIN\" }" >> $PROSODY_HOST_CONFIG
-            echo -e "    muc_room_locking = false" >> $PROSODY_HOST_CONFIG
-            echo -e "    muc_room_default_public_jids = true" >> $PROSODY_HOST_CONFIG
+            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.
@@ -142,7 +140,7 @@ case "$1" in
        # 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@$JICOFO_AUTH_DOMAIN\"/g" $PROSODY_HOST_CONFIG
+            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

@@ -153,21 +151,8 @@ case "$1" in
            PROSODY_CONFIG_PRESENT="false"
        fi

-        # Updates main muc component
-        MAIN_MUC_PATTERN="Component \"conference.$JVB_HOSTNAME\" \"muc\""
-        if ! grep -A 2 -- "${MAIN_MUC_PATTERN}" $PROSODY_HOST_CONFIG | grep -q "restrict_room_creation" ;then
-            sed -i "s/${MAIN_MUC_PATTERN}/${MAIN_MUC_PATTERN}\n    restrict_room_creation = true/g" $PROSODY_HOST_CONFIG
-            PROSODY_CONFIG_PRESENT="false"
-        fi
-
-        if ! grep -q -- 'unlimited_jids' $PROSODY_HOST_CONFIG ;then
-            sed -i "1s/^/unlimited_jids = { \"$JICOFO_AUTH_USER@$JICOFO_AUTH_DOMAIN\", \"jvb@$JICOFO_AUTH_DOMAIN\" }\n/" $PROSODY_HOST_CONFIG
-            sed -i "s/VirtualHost \"$JICOFO_AUTH_DOMAIN\"/VirtualHost \"$JICOFO_AUTH_DOMAIN\"\n    modules_enabled = { \"limits_exception\"; }/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@$JICOFO_AUTH_DOMAIN
+        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
--- a/debian/jitsi-meet-tokens.postinst
+++ b/debian/jitsi-meet-tokens.postinst
@@ -61,7 +61,7 @@ case "$1" in
                sed -i '/^\s*--\s*"token_verification"/ s/--\s*//' $PROSODY_HOST_CONFIG

                # Install luajwt
-                if ! luarocks install luajwtjitsi 2.0-0; then
+                if ! luarocks install luajwtjitsi; then
                   echo "Failed to install luajwtjitsi - try installing it manually"
                fi

--- a/debian/jitsi-meet-web.install
+++ b/debian/jitsi-meet-web.install
@@ -1,5 +1,6 @@
 interface_config.js		/usr/share/jitsi-meet/
 logging_config.js		/usr/share/jitsi-meet/
+*.json					/usr/share/jitsi-meet/
 *.html					/usr/share/jitsi-meet/
 *.ico					/usr/share/jitsi-meet/
 libs					/usr/share/jitsi-meet/
--- a/doc/debian/jitsi-meet-prosody/prosody.cfg.lua-jvb.example
+++ b/doc/debian/jitsi-meet-prosody/prosody.cfg.lua-jvb.example
@@ -20,11 +20,6 @@ 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"
 }

-unlimited_jids = {
-    "focusUser@auth.jitmeet.example.com",
-    "jvb@auth.jitmeet.example.com"
-}
-
 VirtualHost "jitmeet.example.com"
    -- enabled = false -- Remove this line to enable this host
    authentication = "anonymous"
@@ -40,7 +35,6 @@ VirtualHost "jitmeet.example.com"
        key = "/etc/prosody/certs/jitmeet.example.com.key";
        certificate = "/etc/prosody/certs/jitmeet.example.com.crt";
    }
-    av_moderation_component = "avmoderation.jitmeet.example.com"
    speakerstats_component = "speakerstats.jitmeet.example.com"
    conference_duration_component = "conferenceduration.jitmeet.example.com"
    -- we need bosh
@@ -52,7 +46,6 @@ VirtualHost "jitmeet.example.com"
        "external_services";
        "conference_duration";
        "muc_lobby_rooms";
-        "av_moderation";
    }
    c2s_require_encryption = false
    lobby_muc = "lobby.jitmeet.example.com"
@@ -60,14 +53,11 @@ VirtualHost "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"
-    restrict_room_creation = true
    storage = "memory"
    modules_enabled = {
        "muc_meeting_id";
        "muc_domain_mapper";
-        "polls";
        --"token_verification";
-        "muc_rate_limit";
    }
    admins = { "focusUser@auth.jitmeet.example.com" }
    muc_room_locking = false
@@ -84,9 +74,6 @@ Component "internal.auth.jitmeet.example.com" "muc"
    muc_room_default_public_jids = true

 VirtualHost "auth.jitmeet.example.com"
-    modules_enabled = {
-        "limits_exception";
-    }
    authentication = "internal_hashed"

 -- Proxy to jicofo's user JID, so that it doesn't have to register as a component.
@@ -99,9 +86,6 @@ Component "speakerstats.jitmeet.example.com" "speakerstats_component"
 Component "conferenceduration.jitmeet.example.com" "conference_duration_component"
    muc_component = "conference.jitmeet.example.com"

-Component "avmoderation.jitmeet.example.com" "av_moderation_component"
-    muc_component = "conference.jitmeet.example.com"
-
 Component "lobby.jitmeet.example.com" "muc"
    storage = "memory"
    restrict_room_creation = true
--- a/doc/debian/jitsi-meet/jitsi-meet.example
+++ b/doc/debian/jitsi-meet/jitsi-meet.example
@@ -35,7 +35,6 @@ server {
    ssl_session_tickets off;

    add_header Strict-Transport-Security "max-age=63072000" always;
-    set $prefix "";

    ssl_certificate /etc/jitsi/meet/jitsi-meet.example.com.crt;
    ssl_certificate_key /etc/jitsi/meet/jitsi-meet.example.com.key;
@@ -77,7 +76,7 @@ server {

    # BOSH
    location = /http-bind {
-        proxy_pass http://127.0.0.1:5280/http-bind?prefix=$prefix&$args;
+        proxy_pass       http://localhost:5280/http-bind;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header Host $http_host;
    }
@@ -126,6 +125,13 @@ server {
        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 /
+    location ~ ^/([^/?&:'"]+)/(.*)$ {
+        set $subdomain "$1.";
+        set $subdir "$1/";
+        rewrite ^/([^/?&:'"]+)/(.*)$ /$2;
+    }
+
    # BOSH for subdomains
    location ~ ^/([^/?&:'"]+)/http-bind {
        set $subdomain "$1.";
@@ -143,11 +149,4 @@ server {

        rewrite ^/(.*)$ /xmpp-websocket;
    }
-
-    # 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/";
-        rewrite ^/([^/?&:'"]+)/(.*)$ /$2;
-    }
 }
--- a/doc/example-config-files/config.js.example
+++ b/doc/example-config-files/config.js.example
@@ -0,0 +1,8 @@
+var config = {
+    hosts: {
+        domain: 'jitsi.example.com',
+        muc: 'conference.jitsi.example.com', // FIXME: use XEP-0030
+        bridge: 'jitsi-videobridge.jitsi.example.com' // FIXME: use XEP-0030
+    },
+    bosh: '//jitsi.example.com/http-bind' // FIXME: use xep-0156 for that
+};
--- a/doc/example-config-files/jitsi.example.com.example
+++ b/doc/example-config-files/jitsi.example.com.example
@@ -0,0 +1,39 @@
+server {
+    listen 80;
+
+    server_name jitsi.example.com;
+    # set the root
+    root /srv/jitsi.example.com;
+    index index.html;
+
+    location ~ ^/([a-zA-Z0-9=\?]+)$ {
+        rewrite ^/(.*)$ / break;
+        }
+
+    location / {
+        ssi on;
+    }
+
+    gzip on;
+    gzip_types text/plain text/css application/javascript application/json image/x-icon application/octet-stream application/wasm;
+    gzip_vary on;
+    gzip_proxied no-cache no-store private expired auth;
+    gzip_min_length 512;
+
+    # BOSH
+    location /http-bind {
+        proxy_pass      http://localhost:5280/http-bind;
+        proxy_set_header X-Forwarded-For $remote_addr;
+        proxy_set_header Host $http_host;
+    }
+
+    # xmpp websockets
+    location /xmpp-websocket {
+        proxy_pass http://localhost:5280/xmpp-websocket;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host $host;
+        tcp_nodelay on;
+    }
+}
--- a/doc/example-config-files/multidomain/config.js.multidomain.example
+++ b/doc/example-config-files/multidomain/config.js.multidomain.example
@@ -0,0 +1,14 @@
+var subdomain = "<!--# echo var="subdomain" default="" -->";
+if (subdomain) {
+    subdomain = subdomain.substr(0,subdomain.length-1).split('.').join('_').toLowerCase() + '.';
+}
+
+var config = {
+    hosts: {
+        domain: 'jitsi.example.com',
+        muc: 'conference.'+subdomain+'jitsi.example.com', // FIXME: use XEP-0030
+        focus: 'focus.jitsi.example.com',
+    },
+    bosh: '//jitsi.example.com/http-bind', // FIXME: use xep-0156 for that
+    websocket: 'wss://jitsi.example.com/xmpp-websocket'
+};
--- a/doc/example-config-files/multidomain/jitsi.example.com.multidomain.example
+++ b/doc/example-config-files/multidomain/jitsi.example.com.multidomain.example
@@ -0,0 +1,76 @@
+server {
+    listen 80;
+
+    server_name jitsi.example.com;
+    # set the root
+    root /srv/jitsi.example.com;
+    # ssi on with javascript for multidomain variables in config.js
+    ssi on;
+    ssi_types application/x-javascript application/javascript;
+    index index.html;
+    set $prefix "";
+
+    # BOSH
+    location /http-bind {
+        proxy_pass      http://localhost:5280/http-bind;
+        proxy_set_header X-Forwarded-For $remote_addr;
+        proxy_set_header Host $http_host;
+    }
+
+    # xmpp websockets
+    location /xmpp-websocket {
+        proxy_pass http://localhost:5280/xmpp-websocket;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host $host;
+        tcp_nodelay on;
+    }
+
+    gzip on;
+    gzip_types text/plain text/css application/javascript application/json image/x-icon application/octet-stream application/wasm;
+    gzip_vary on;
+    gzip_proxied no-cache no-store private expired auth;
+    gzip_min_length 512;
+
+    location ~ ^/([^/?&:'"]+)$ {
+        try_files $uri @root_path;
+    }
+
+    location @root_path {
+        rewrite ^/(.*)$ / break;
+    }
+
+    location ~ ^/([^/?&:'"]+)/config.js$
+    {
+        set $subdomain "$1.";
+        set $subdir "$1/";
+
+        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 /
+    location ~ ^/([^/?&:'"]+)/(.*)$ {
+        set $subdomain "$1.";
+        set $subdir "$1/";
+        rewrite ^/([^/?&:'"]+)/(.*)$ /$2;
+    }
+
+    # BOSH for subdomains
+    location ~ ^/([^/?&:'"]+)/http-bind {
+        set $subdomain "$1.";
+        set $subdir "$1/";
+        set $prefix "$1";
+
+        rewrite ^/(.*)$ /http-bind;
+    }
+
+    # websockets for subdomains
+    location ~ ^/([^/?&:'"]+)/xmpp-websocket {
+        set $subdomain "$1.";
+        set $subdir "$1/";
+        set $prefix "$1";
+
+        rewrite ^/(.*)$ /xmpp-websocket;
+    }
+}
--- a/doc/example-config-files/multidomain/prosody.cfg.multidomain.example
+++ b/doc/example-config-files/multidomain/prosody.cfg.multidomain.example
@@ -0,0 +1,218 @@
+-- Prosody XMPP Server Configuration
+--
+-- Information on configuring Prosody can be found on our
+-- website at http://prosody.im/doc/configure
+--
+-- Tip: You can check that the syntax of this file is correct
+-- when you have finished by running: prosodyctl check config
+-- If there are any errors, it will let you know what and where
+-- they are, otherwise it will keep quiet.
+--
+-- Good luck, and happy Jabbering!
+
+
+---------- Server-wide settings ----------
+-- Settings in this section apply to the whole server and are the default settings
+-- for any virtual hosts
+
+-- This is a (by default, empty) list of accounts that are admins
+-- for the server. Note that you must create the accounts separately
+-- (see http://prosody.im/doc/creating_accounts for info)
+-- Example: admins = { "user1@example.com", "user2@example.net" }
+admins = { }
+daemonize = true
+cross_domain_bosh = true;
+component_ports = { 5347 }
+--component_interface = "192.168.0.10"
+
+-- Enable use of libevent for better performance under high load
+-- For more information see: http://prosody.im/doc/libevent
+--use_libevent = true
+
+-- This is the list of modules Prosody will load on startup.
+-- It looks for mod_modulename.lua in the plugins folder, so make sure that exists too.
+-- 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.
+
+    -- 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)
+
+    -- 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
+
+    -- 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";
+}
+
+-- domain mapper options, must at least have domain base set to use the mapper
+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
+}
+
+-- Disable account creation by default, for security
+-- For more information see http://prosody.im/doc/creating_accounts
+allow_registration = false
+
+-- These are the SSL/TLS-related settings. If you don't want
+-- to use SSL/TLS, you may comment or remove this
+ssl = {
+    key = "/etc/prosody/certs/localhost.key";
+    certificate = "/etc/prosody/certs/localhost.crt";
+}
+
+-- Force clients to use encrypted connections? This option will
+-- prevent clients from authenticating unless they are using encryption.
+
+--c2s_require_encryption = true
+
+-- Force certificate authentication for server-to-server connections?
+-- This provides ideal security, but requires servers you communicate
+-- with to support encryption AND present valid, trusted certificates.
+-- NOTE: Your version of LuaSec must support certificate verification!
+-- For more information see http://prosody.im/doc/s2s#security
+
+--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
+-- authenticate using certificates. They will be authenticated using DNS.
+
+--s2s_insecure_domains = { "gmail.com" }
+
+-- Even if you leave s2s_secure_auth disabled, you can still require valid
+-- certificates for some domains by specifying a list here.
+
+--s2s_secure_domains = { "jabber.org" }
+
+-- Required for init scripts and prosodyctl
+pidfile = "/var/run/prosody/prosody.pid"
+
+-- Select the authentication backend to use. The 'internal' providers
+-- use Prosody's configured data storage to store the authentication data.
+-- To allow Prosody to offer secure authentication mechanisms to clients, the
+-- default provider stores passwords in plaintext. If you do not trust your
+-- server please see http://prosody.im/doc/modules/mod_auth_internal_hashed
+-- for information about using the hashed backend.
+
+authentication = "internal_hashed"
+
+-- Select the storage backend to use. By default Prosody uses flat files
+-- in its configured data directory, but it also supports more backends
+-- through modules. An "sql" backend is included by default, but requires
+-- additional dependencies. See http://prosody.im/doc/storage for more info.
+
+--storage = "sql" -- Default is "internal"
+
+-- For the "sql" backend, you can uncomment *one* of the below to configure:
+--sql = { driver = "SQLite3", database = "prosody.sqlite" } -- Default. 'database' is the filename.
+--sql = { driver = "MySQL", database = "prosody", username = "prosody", password = "secret", host = "localhost" }
+--sql = { driver = "PostgreSQL", database = "prosody", username = "prosody", password = "secret", host = "localhost" }
+
+-- 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";
+}
+
+----------- Virtual hosts -----------
+-- You need to add a VirtualHost entry for each domain you wish Prosody to serve.
+-- Settings under each VirtualHost entry apply *only* to that host.
+
+--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";
+    }
+
+    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_hashed"
+
+------ Components ------
+-- You can specify components to add hosts that provide special services,
+-- like multi-user conferences, and transports.
+-- For more information on components, see http://prosody.im/doc/components
+
+---Set up a MUC (multi-user chat) room server on conference.example.com:
+--Component "conference.example.com" "muc"
+
+-- Set up a SOCKS5 bytestream proxy for server-proxied file transfers:
+--Component "proxy.example.com" "proxy65"
+
+---Set up an external component (default component port is 5347)
+--
+-- External components allow adding various services, such as gateways/
+-- transports to other networks like ICQ, MSN and Yahoo. For more info
+-- see: http://prosody.im/doc/components#adding_an_external_component
+--
+--Component "gateway.example.com"
+--    component_secret = "password"
+
+Component "conference.jitsi.example.com" "muc"
+    modules_enabled = { "muc_domain_mapper" }
+
+Component "jitsi-videobridge.jitsi.example.com"
+    component_secret = "IfGaish6"
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Saúl Ibarra Corretgé	5a1d708d37	fix(toolbar) restore security button backwards compat In https://github.com/jitsi/jitsi-meet/pull/8673 we inadvertently removed the backwards compatibility code which would show the security button when the "info" button is configured in interface_config. The security button replaced the info button.	2021-04-09 09:30:36 -05:00
damencho	b1092b28d3	chore(deps) lib-jitsi-meet fix: Adds back removed method used by jibri.	2021-04-08 11:34:05 -05:00