fix(notifications) remove dead code

.editorconfig

@@ -9,8 +9,5 @@ indent_style = space
 max_line_length = 80
 trim_trailing_whitespace = true
 
-[*.md]
-trim_trailing_whitespace = false
-
 [Makefile]
 indent_style = tab

.eslintignore

@@ -1,8 +1,6 @@
 # The build artifacts of the jitsi-meet project.
 build/*
 
-doc/*
-
 # Third-party source code which we (1) do not want to modify or (2) try to
 # modify as little as possible.
 libs/*

.github/stale.yml

@@ -0,0 +1,16 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 90
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - confirmed
+staleLabel: wontfix
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false
+

.github/workflows/ci.yml

@@ -12,24 +12,14 @@ jobs:
       with:
         node-version: 16
         cache: 'npm'
-    - name: Get changed files
-      id: changed-files
-      uses: tj-actions/changed-files@v35
-    - name: Get changed lang files
-      id: lang-files
-      run: echo "all=$(echo "${{ steps.changed-files.outputs.all_changed_files }}" | grep -oE 'lang\/\S+' | tr '\n' ' ')" >> "$GITHUB_OUTPUT"
     - run: npm install
     - name: Check git status
       run: git status
     - name: Normalize lang files to ensure sorted
-      if: steps.lang-files.outputs.all
       run: npm run lang-sort
-    - name: Check lang files are formatted correctly
-      if: steps.lang-files.outputs.all
-      run: npm run lint:lang
     - name: Check if the git repository is clean
       run: $(exit $(git status --porcelain --untracked-files=no | head -255 | wc -l)) || (echo "Dirty git tree"; git diff; exit 1)
-    - run: npm run lint:ci && npm run tsc:ci
+    - run: npm run lint:ci
   linux-build:
     name: Build Frontend (Linux)
     runs-on: ubuntu-latest
@@ -52,25 +42,3 @@ jobs:
         cache: 'npm'
     - run: npm install
     - run: make
-  android-build:
-    name: Build mobile bundle (Android)
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-        cache: 'npm'
-    - run: npm install
-    - run: npx react-native bundle --entry-file react/index.native.js --platform android --bundle-output /tmp/android.bundle --reset-cache
-  ios-build:
-    name: Build mobile bundle (iOS)
-    runs-on: macOS-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-        cache: 'npm'
-    - run: npm install
-    - run: npx react-native bundle --entry-file react/index.native.js --platform ios --bundle-output /tmp/ios.bundle --reset-cache

.github/workflows/stale.yml

@@ -1,21 +0,0 @@
-name: 'Close stale issues and PRs'
-on:
-  schedule:
-    - cron: '30 1 * * *'
-
-jobs:
-  stale:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/stale@v8
-        with:
-          stale-issue-message: 'This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.'
-          stale-pr-message: 'This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.'
-          stale-issue-label: 'stale'
-          stale-pr-label: 'stale'
-          exempt-issue-labels: 'confirmed,help-needed'
-          exempt-pr-labels: 'confirmed'
-          days-before-issue-stale: 60
-          days-before-pr-stale: 90
-          days-before-issue-close: 10
-          days-before-pr-close: 10

.gitignore

@@ -61,9 +61,8 @@ buck-out/
 
 # fastlane
 #
-**/fastlane/report.xml
-**/fastlane/Preview.html
-**/fastlane/test_output
+*/fastlane/report.xml
+*/fastlane/Preview.html
 
 # Build artifacts
 *.jsbundle
@@ -94,16 +93,3 @@ twa/*.aab
 twa/assetlinks.json
 
 tsconfig.json
-
-# React Native SDK
-#
-react-native-sdk/*.tgz
-react-native-sdk/android/src
-react-native-sdk/images
-react-native-sdk/ios
-react-native-sdk/lang
-react-native-sdk/modules
-react-native-sdk/node_modules
-react-native-sdk/react
-react-native-sdk/service
-react-native-sdk/sounds

Makefile

@@ -44,8 +44,12 @@ deploy-appbundle:
 	cp \
 		$(BUILD_DIR)/app.bundle.min.js \
 		$(BUILD_DIR)/app.bundle.min.js.map \
+		$(BUILD_DIR)/do_external_connect.min.js \
+		$(BUILD_DIR)/do_external_connect.min.js.map \
 		$(BUILD_DIR)/external_api.min.js \
 		$(BUILD_DIR)/external_api.min.js.map \
+		$(BUILD_DIR)/dial_in_info_bundle.min.js \
+		$(BUILD_DIR)/dial_in_info_bundle.min.js.map \
 		$(BUILD_DIR)/alwaysontop.min.js \
 		$(BUILD_DIR)/alwaysontop.min.js.map \
 		$(OUTPUT_DIR)/analytics-ga.js \
@@ -63,7 +67,11 @@ deploy-appbundle:
 
 deploy-lib-jitsi-meet:
 	cp \
-		$(LIBJITSIMEET_DIR)/dist/umd/lib-jitsi-meet.* \
+		$(LIBJITSIMEET_DIR)/dist/umd/lib-jitsi-meet.min.js \
+		$(LIBJITSIMEET_DIR)/dist/umd/lib-jitsi-meet.min.map \
+		$(LIBJITSIMEET_DIR)/dist/umd/lib-jitsi-meet.e2ee-worker.js \
+		$(LIBJITSIMEET_DIR)/connection_optimization/external_connect.js \
+		$(LIBJITSIMEET_DIR)/modules/browser/capabilities.json \
 		$(DEPLOY_DIR)
 
 deploy-olm:
@@ -123,7 +131,7 @@ dev: deploy-init deploy-css deploy-rnnoise-binary deploy-tflite deploy-meet-mode
 
 source-package:
 	mkdir -p source_package/jitsi-meet/css && \
-	cp -r *.js *.html resources/*.txt favicon.ico fonts images libs static sounds LICENSE lang source_package/jitsi-meet && \
+	cp -r *.js *.html resources/*.txt connection_optimization favicon.ico fonts images libs static sounds LICENSE lang source_package/jitsi-meet && \
 	cp css/all.css source_package/jitsi-meet/css && \
 	(cd source_package ; tar cjf ../jitsi-meet.tar.bz2 jitsi-meet) && \
 	rm -rf source_package

android/app/src/main/AndroidManifest.xml

@@ -7,6 +7,7 @@
       android:extractNativeLibs="true"
       android:icon="@mipmap/ic_launcher"
       android:label="@string/app_name"
+      android:name=".MainApplication"
       android:networkSecurityConfig="@xml/network_security_config"
       android:theme="@style/AppTheme">
     <meta-data
@@ -16,8 +17,7 @@
         android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
         android:exported="true"
         android:label="@string/app_name"
-        android:launchMode="singleInstance"
-        android:taskAffinity=""
+        android:launchMode="singleTask"
         android:name=".MainActivity"
         android:resizeableActivity="true"
         android:supportsPictureInPicture="true"

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

@@ -0,0 +1,47 @@
+/*
+ * Copyright @ 2022-present 8x8, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package org.jitsi.meet;
+
+import android.app.Application;
+import android.util.Log;
+
+import com.facebook.react.ReactApplication;
+import com.facebook.react.ReactNativeHost;
+
+import org.jitsi.meet.sdk.JitsiReactNativeHost;
+
+/**
+ * Application class for Jitsi Meet. The only reason why this exists is for Detox
+ * to believe our app is a "greenfield" app. SDK users need not use this.
+ */
+public class MainApplication extends Application implements ReactApplication {
+    private final ReactNativeHost mReactNativeHost = new JitsiReactNativeHost(this);
+
+    @Override
+    public ReactNativeHost getReactNativeHost() {
+        return mReactNativeHost;
+    }
+
+    @Override
+    public void onCreate() {
+        super.onCreate();
+
+        // Initialize RN
+        Log.d(this.getClass().getCanonicalName(), "app onCreate");
+        getReactNativeHost().getReactInstanceManager();
+    }
+}

android/build.gradle

@@ -10,17 +10,16 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:7.1.1'
+        classpath 'com.android.tools.build:gradle:7.0.4'
         classpath 'com.google.gms:google-services:4.3.14'
         classpath 'com.google.firebase:firebase-crashlytics-gradle:2.9.2'
     }
 }
 
 ext {
-    kotlinVersion = "1.7.0"
     buildToolsVersion = "31.0.0"
     compileSdkVersion = 32
-    minSdkVersion    = 24
+    minSdkVersion    = 23
     targetSdkVersion = 32
     supportLibVersion = "28.0.0"
 

android/scripts/release-sdk.sh

@@ -33,7 +33,7 @@ if [[ $MVN_HTTP == 1 ]]; then
         deploy:deploy-file \
         -Durl=${MVN_REPO} \
         -DrepositoryId=${MVN_REPO_ID} \
-        -Dfile=react-native-${RN_VERSION}-release.aar \
+        -Dfile=react-native-${RN_VERSION}.aar \
         -Dpackaging=aar \
         -DgeneratePom=false \
         -DpomFile=react-native-${RN_VERSION}.pom || true
@@ -58,7 +58,7 @@ else
         mvn \
             deploy:deploy-file \
             -Durl=${MVN_REPO} \
-            -Dfile=react-native-${RN_VERSION}-release.aar \
+            -Dfile=react-native-${RN_VERSION}.aar \
             -Dpackaging=aar \
             -DgeneratePom=false \
             -DpomFile=react-native-${RN_VERSION}.pom

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

@@ -25,7 +25,6 @@ import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.module.annotations.ReactModule;
 
-import java.lang.reflect.Field;
 import java.util.HashMap;
 import java.util.Map;
 
@@ -33,10 +32,7 @@ import java.util.Map;
 class AppInfoModule
     extends ReactContextBaseJavaModule {
 
-    private static final String BUILD_CONFIG = "org.jitsi.meet.sdk.BuildConfig";
     public static final String NAME = "AppInfo";
-    public static final boolean GOOGLE_SERVICES_ENABLED = getGoogleServicesEnabled();
-    public static final boolean LIBRE_BUILD = getLibreBuild();
 
     public AppInfoModule(ReactApplicationContext reactContext) {
         super(reactContext);
@@ -79,8 +75,8 @@ class AppInfoModule
         constants.put(
             "version",
             packageInfo == null ? "" : packageInfo.versionName);
-        constants.put("LIBRE_BUILD", LIBRE_BUILD);
-        constants.put("GOOGLE_SERVICES_ENABLED", GOOGLE_SERVICES_ENABLED);
+        constants.put("LIBRE_BUILD", BuildConfig.LIBRE_BUILD);
+        constants.put("GOOGLE_SERVICES_ENABLED", BuildConfig.GOOGLE_SERVICES_ENABLED);
 
         return constants;
     }
@@ -89,47 +85,4 @@ class AppInfoModule
     public String getName() {
         return NAME;
     }
-
-    /**
-     * Checks if libre google services object is null based on build configuration.
-     */
-    private static boolean getGoogleServicesEnabled() {
-        Object googleServicesEnabled = getBuildConfigValue("GOOGLE_SERVICES_ENABLED");
-
-        if (googleServicesEnabled !=null) {
-            return (Boolean) googleServicesEnabled;
-        }
-
-        return false;
-    }
-
-    /**
-     * Checks if libre build field is null based on build configuration.
-     */
-    private static boolean getLibreBuild() {
-        Object libreBuild = getBuildConfigValue("LIBRE_BUILD");
-
-        if (libreBuild !=null) {
-            return (Boolean) libreBuild;
-        }
-
-        return false;
-    }
-
-    /**
-     * Gets build config value of a certain field.
-     *
-     * @param fieldName Field from build config.
-     */
-    private static Object getBuildConfigValue(String fieldName) {
-        try {
-            Class<?> c = Class.forName(BUILD_CONFIG);
-            Field f  = c.getDeclaredField(fieldName);
-            f.setAccessible(true);
-            return f.get(null);
-        } catch (Exception e) {
-            e.printStackTrace();
-            return null;
-        }
-    }
 }

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

@@ -45,12 +45,6 @@ class AudioDeviceHandlerGeneric implements
      */
     private AudioModeModule module;
 
-    /**
-     * Constant defining a Hearing Aid. Only available on API level >= 28.
-     * The value of: AudioDeviceInfo.TYPE_HEARING_AID
-     */
-    private static final int TYPE_HEARING_AID = 23;
-
     /**
      * Constant defining a USB headset. Only available on API level >= 26.
      * The value of: AudioDeviceInfo.TYPE_USB_HEADSET
@@ -91,7 +85,6 @@ class AudioDeviceHandlerGeneric implements
                         break;
                     case AudioDeviceInfo.TYPE_WIRED_HEADPHONES:
                     case AudioDeviceInfo.TYPE_WIRED_HEADSET:
-                    case TYPE_HEARING_AID:
                     case TYPE_USB_HEADSET:
                         devices.add(AudioModeModule.DEVICE_HEADPHONES);
                         break;

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

@@ -13,7 +13,6 @@ import android.telecom.PhoneAccount;
 import android.telecom.PhoneAccountHandle;
 import android.telecom.TelecomManager;
 import android.telecom.VideoProfile;
-
 import androidx.annotation.RequiresApi;
 
 import com.facebook.react.bridge.Promise;
@@ -358,7 +357,7 @@ public class ConnectionService extends android.telecom.ConnectionService {
             JitsiMeetLogger.i(TAG + " onDisconnect " + getCallUUID());
             WritableNativeMap data = new WritableNativeMap();
             data.putString("callUUID", getCallUUID());
-            RNConnectionService.getInstance().emitEvent(
+            ReactInstanceManagerHolder.emitEvent(
                     "org.jitsi.meet:features/connection_service#disconnect",
                     data);
             // The JavaScript side will not go back to the native with
@@ -378,7 +377,7 @@ public class ConnectionService extends android.telecom.ConnectionService {
             JitsiMeetLogger.i(TAG + " onAbort " + getCallUUID());
             WritableNativeMap data = new WritableNativeMap();
             data.putString("callUUID", getCallUUID());
-            RNConnectionService.getInstance().emitEvent(
+            ReactInstanceManagerHolder.emitEvent(
                     "org.jitsi.meet:features/connection_service#abort",
                     data);
             // The JavaScript side will not go back to the native with
@@ -407,7 +406,7 @@ public class ConnectionService extends android.telecom.ConnectionService {
         @Override
         public void onCallAudioStateChanged(CallAudioState state) {
             JitsiMeetLogger.d(TAG + " onCallAudioStateChanged: " + state);
-            RNConnectionService module = RNConnectionService.getInstance();
+            RNConnectionService module = ReactInstanceManagerHolder.getNativeModule(RNConnectionService.class);
             if (module != null) {
                 module.onCallAudioStateChange(state);
             }

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

@@ -0,0 +1,46 @@
+/*
+ *  Copyright 2017 The WebRTC project authors. All Rights Reserved.
+ *
+ *  Use of this source code is governed by a BSD-style license
+ *  that can be found in the LICENSE file in the root of the source
+ *  tree. An additional intellectual property rights grant can be found
+ *  in the file PATENTS.  All contributing project authors may
+ *  be found in the AUTHORS file in the root of the source tree.
+ */
+
+package org.jitsi.meet.sdk;
+
+import org.webrtc.VideoCodecInfo;
+
+import java.util.Map;
+import java.util.HashMap;
+
+/** Container for static helper functions related to dealing with H264 codecs. */
+class H264Utils {
+    public static final String H264_FMTP_PROFILE_LEVEL_ID = "profile-level-id";
+    public static final String H264_FMTP_LEVEL_ASYMMETRY_ALLOWED = "level-asymmetry-allowed";
+    public static final String H264_FMTP_PACKETIZATION_MODE = "packetization-mode";
+
+    public static final String H264_PROFILE_CONSTRAINED_BASELINE = "42e0";
+    public static final String H264_PROFILE_CONSTRAINED_HIGH = "640c";
+    public static final String H264_LEVEL_3_1 = "1f"; // 31 in hex.
+    public static final String H264_CONSTRAINED_HIGH_3_1 =
+        H264_PROFILE_CONSTRAINED_HIGH + H264_LEVEL_3_1;
+    public static final String H264_CONSTRAINED_BASELINE_3_1 =
+        H264_PROFILE_CONSTRAINED_BASELINE + H264_LEVEL_3_1;
+
+    public static Map<String, String> getDefaultH264Params(boolean isHighProfile) {
+        final Map<String, String> params = new HashMap<>();
+        params.put(VideoCodecInfo.H264_FMTP_LEVEL_ASYMMETRY_ALLOWED, "1");
+        params.put(VideoCodecInfo.H264_FMTP_PACKETIZATION_MODE, "1");
+        params.put(VideoCodecInfo.H264_FMTP_PROFILE_LEVEL_ID,
+            isHighProfile ? VideoCodecInfo.H264_CONSTRAINED_HIGH_3_1
+                : VideoCodecInfo.H264_CONSTRAINED_BASELINE_3_1);
+        return params;
+    }
+
+    public static VideoCodecInfo DEFAULT_H264_BASELINE_PROFILE_CODEC =
+        new VideoCodecInfo("H264", getDefaultH264Params(/* isHighProfile= */ false));
+    public static VideoCodecInfo DEFAULT_H264_HIGH_PROFILE_CODEC =
+        new VideoCodecInfo("H264", getDefaultH264Params(/* isHighProfile= */ true));
+}

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

@@ -16,7 +16,6 @@
 
 package org.jitsi.meet.sdk;
 
-import android.annotation.SuppressLint;
 import android.app.Activity;
 import android.content.BroadcastReceiver;
 import android.content.Context;
@@ -178,11 +177,8 @@ public class JitsiMeetActivity extends AppCompatActivity
     }
 
     protected void leave() {
-        if (this.jitsiView != null) {
-            this.jitsiView.abort();
-        } else {
-            JitsiMeetLogger.w("Cannot leave, view is null");
-        }
+        Intent hangupBroadcastIntent = BroadcastIntentHelper.buildHangUpIntent();
+        LocalBroadcastManager.getInstance(getApplicationContext()).sendBroadcast(hangupBroadcastIntent);
     }
 
     private @Nullable
@@ -299,7 +295,6 @@ public class JitsiMeetActivity extends AppCompatActivity
         JitsiMeetActivityDelegate.requestPermissions(this, permissions, requestCode, listener);
     }
 
-    @SuppressLint("MissingSuperCall")
     @Override
     public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {
         JitsiMeetActivityDelegate.onRequestPermissionsResult(requestCode, permissions, grantResults);

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

@@ -157,14 +157,6 @@ public class JitsiMeetView extends FrameLayout {
         setProps(options != null ? options.asProps() : new Bundle());
     }
 
-    /**
-     * Internal method which aborts running RN by passing empty props.
-     * This is only meant to be used from the enclosing Activity's onDestroy.
-     */
-    public void abort() {
-        setProps(new Bundle());
-    }
-
     /**
      * Creates the {@code ReactRootView} for the given app name with the given
      * props. Once created it's set as the view of this {@code FrameLayout}.

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

@@ -0,0 +1,41 @@
+package org.jitsi.meet.sdk;
+
+import android.app.Application;
+
+import com.facebook.react.ReactInstanceManager;
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+
+import java.util.List;
+
+/**
+ * This is the minimal implementation of ReactNativeHost that will make things like the
+ * Detox testing framework believe we are a "greenfield" app.
+ *
+ * Generally speaking, apps using the SDK (other than the Jitsi Meet app itself) should not
+ * need to use this because the
+ */
+public class JitsiReactNativeHost extends ReactNativeHost {
+    public JitsiReactNativeHost(Application application) {
+        super(application);
+    }
+
+    @Override
+    public boolean getUseDeveloperSupport() {
+        // Unused since we override `createReactInstanceManager`.
+        return false;
+    }
+
+    @Override
+    protected List<ReactPackage> getPackages() {
+        // Unused since we override `createReactInstanceManager`.
+        return null;
+    }
+
+    @Override
+    protected ReactInstanceManager createReactInstanceManager() {
+        ReactInstanceManagerHolder.initReactInstanceManager(this.getApplication());
+
+        return ReactInstanceManagerHolder.getReactInstanceManager();
+    }
+}

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

@@ -10,19 +10,14 @@ import android.telecom.PhoneAccount;
 import android.telecom.PhoneAccountHandle;
 import android.telecom.TelecomManager;
 import android.telecom.VideoProfile;
-
-import androidx.annotation.Nullable;
 import androidx.annotation.RequiresApi;
 
-import com.facebook.react.bridge.NativeModule;
 import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.module.annotations.ReactModule;
-import com.facebook.react.modules.core.DeviceEventManagerModule;
 
 import org.jitsi.meet.sdk.log.JitsiMeetLogger;
 
@@ -40,7 +35,6 @@ class RNConnectionService extends ReactContextBaseJavaModule {
 
     private static final String TAG = ConnectionService.TAG;
 
-    private static RNConnectionService sRNConnectionServiceInstance;
     /**
      * Handler for dealing with call state changes. We are acting as a proxy between ConnectionService
      * and other modules such as {@link AudioModeModule}.
@@ -63,11 +57,6 @@ class RNConnectionService extends ReactContextBaseJavaModule {
 
     RNConnectionService(ReactApplicationContext reactContext) {
         super(reactContext);
-        sRNConnectionServiceInstance = this;
-    }
-
-    static RNConnectionService getInstance() {
-        return sRNConnectionServiceInstance;
     }
 
     @ReactMethod
@@ -237,22 +226,4 @@ class RNConnectionService extends ReactContextBaseJavaModule {
     interface CallAudioStateListener {
         void onCallAudioStateChange(android.telecom.CallAudioState callAudioState);
     }
-
-    /**
-     * Helper function to send an event to JavaScript.
-     *
-     * @param eventName {@code String} containing the event name.
-     * @param data {@code Object} optional ancillary data for the event.
-     */
-    void emitEvent(
-        String eventName,
-        @Nullable Object data) {
-        ReactContext reactContext = getReactApplicationContext();
-
-        if (reactContext != null) {
-            reactContext
-                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
-                .emit(eventName, data);
-        }
-    }
 }

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

@@ -17,6 +17,7 @@
 package org.jitsi.meet.sdk;
 
 import android.app.Activity;
+import android.app.Application;
 import android.util.Log;
 
 import androidx.annotation.Nullable;
@@ -31,17 +32,17 @@ import com.facebook.react.jscexecutor.JSCExecutorFactory;
 import com.facebook.react.modules.core.DeviceEventManagerModule;
 import com.facebook.react.uimanager.ViewManager;
 import com.oney.WebRTCModule.EglUtils;
-import com.oney.WebRTCModule.WebRTCModuleOptions;
-import com.oney.WebRTCModule.webrtcutils.H264AndSoftwareVideoDecoderFactory;
-import com.oney.WebRTCModule.webrtcutils.H264AndSoftwareVideoEncoderFactory;
+import com.oney.WebRTCModule.RTCVideoViewManager;
+import com.oney.WebRTCModule.WebRTCModule;
 
 import org.devio.rn.splashscreen.SplashScreenModule;
 import org.webrtc.EglBase;
+import org.webrtc.audio.AudioDeviceModule;
+import org.webrtc.audio.JavaAudioDeviceModule;
 
 import java.lang.reflect.Constructor;
 import java.util.ArrayList;
 import java.util.Arrays;
-import java.util.Collections;
 import java.util.List;
 
 class ReactInstanceManagerHolder {
@@ -78,11 +79,30 @@ class ReactInstanceManagerHolder {
             nativeModules.add(new RNConnectionService(reactContext));
         }
 
+        // Initialize the WebRTC module by hand, since we want to override some
+        // initialization options.
+        WebRTCModule.Options options = new WebRTCModule.Options();
+
+        AudioDeviceModule adm = JavaAudioDeviceModule.builder(reactContext)
+            .setEnableVolumeLogger(false)
+            .createAudioDeviceModule();
+        options.setAudioDeviceModule(adm);
+
+        EglBase.Context eglContext = EglUtils.getRootEglBaseContext();
+
+        options.setVideoDecoderFactory(new WebRTCVideoDecoderFactory(eglContext));
+        options.setVideoEncoderFactory(new WebRTCVideoEncoderFactory(eglContext));
+
+        nativeModules.add(new WebRTCModule(reactContext, options));
+
         return nativeModules;
     }
 
     private static List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-        return Collections.emptyList();
+        return Arrays.<ViewManager>asList(
+            // WebRTC, see createNativeModules for details.
+            new RTCVideoViewManager()
+        );
     }
 
     static List<ReactPackage> getReactNativePackages() {
@@ -102,7 +122,6 @@ class ReactInstanceManagerHolder {
             new com.reactnativecommunity.webview.RNCWebViewPackage(),
             new com.kevinresol.react_native_default_preference.RNDefaultPreferencePackage(),
             new com.learnium.RNDeviceInfo.RNDeviceInfo(),
-            new com.oney.WebRTCModule.WebRTCModulePackage(),
             new com.swmansion.gesturehandler.RNGestureHandlerPackage(),
             new org.linusu.RNGetRandomValuesPackage(),
             new com.rnimmersive.RNImmersivePackage(),
@@ -220,6 +239,35 @@ class ReactInstanceManagerHolder {
         return reactInstanceManager;
     }
 
+    /**
+     * Internal method to initialize the React Native instance manager. We
+     * create a single instance in order to load the JavaScript bundle a single
+     * time. All {@code ReactRootView} instances will be tied to the one and
+     * only {@code ReactInstanceManager}.
+     *
+     * This method is only meant to be called when integrating with {@code JitsiReactNativeHost}.
+     *
+     * @param app {@code Application} current running Application.
+     */
+    static void initReactInstanceManager(Application app) {
+        if (reactInstanceManager != null) {
+            return;
+        }
+
+        Log.d(TAG, "initializing RN with Application");
+
+        reactInstanceManager
+            = ReactInstanceManager.builder()
+                .setApplication(app)
+                .setBundleAssetName("index.android.bundle")
+                .setJSMainModulePath("index.android")
+                .setJavaScriptExecutorFactory(getReactNativeJSFactory())
+                .addPackages(getReactNativePackages())
+                .setUseDeveloperSupport(BuildConfig.DEBUG)
+                .setInitialLifecycleState(LifecycleState.BEFORE_CREATE)
+                .build();
+    }
+
     /**
      * Internal method to initialize the React Native instance manager. We
      * create a single instance in order to load the JavaScript bundle a single
@@ -233,15 +281,7 @@ class ReactInstanceManagerHolder {
             return;
         }
 
-        // Initialize the WebRTC module options.
-        WebRTCModuleOptions options = WebRTCModuleOptions.getInstance();
-
-        EglBase.Context eglContext = EglUtils.getRootEglBaseContext();
-
-        options.videoDecoderFactory = new H264AndSoftwareVideoDecoderFactory(eglContext);
-        options.videoEncoderFactory = new H264AndSoftwareVideoEncoderFactory(eglContext);
-
-        Log.d(TAG, "initializing RN with Activity");
+        Log.d(ReactInstanceManagerHolder.class.getCanonicalName(), "initializing RN with Activity");
 
         reactInstanceManager
             = ReactInstanceManager.builder()

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

@@ -0,0 +1,19 @@
+package org.jitsi.meet.sdk;
+
+/** Enumeration of supported video codec types. */
+public enum VideoCodecMimeType {
+    VP8("video/x-vnd.on2.vp8"),
+    VP9("video/x-vnd.on2.vp9"),
+    H264("video/avc"),
+    AV1("video/av01");
+
+    private final String mimeType;
+
+    private VideoCodecMimeType(String mimeType) {
+        this.mimeType = mimeType;
+    }
+
+    String mimeType() {
+        return mimeType;
+    }
+}

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

@@ -0,0 +1,52 @@
+package org.jitsi.meet.sdk;
+
+import androidx.annotation.Nullable;
+
+import org.webrtc.EglBase;
+import org.webrtc.HardwareVideoDecoderFactory;
+import org.webrtc.SoftwareVideoDecoderFactory;
+import org.webrtc.VideoCodecInfo;
+import org.webrtc.VideoDecoder;
+import org.webrtc.VideoDecoderFactory;
+
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+
+/**
+ * This is a custom video decoder factory for WebRTC which behaves similarly
+ * to the default one in iOS. It supports the following codecs:
+ *
+ * - In hardware: H.264 (baseline)
+ * - In software: VP8, VP9, AV1
+ */
+public class WebRTCVideoDecoderFactory implements VideoDecoderFactory {
+    private final VideoDecoderFactory hardwareVideoDecoderFactory;
+    private final VideoDecoderFactory softwareVideoDecoderFactory = new SoftwareVideoDecoderFactory();
+
+    public WebRTCVideoDecoderFactory(@Nullable EglBase.Context eglContext) {
+        this.hardwareVideoDecoderFactory = new HardwareVideoDecoderFactory(eglContext);
+    }
+
+    @Nullable
+    @Override
+    public VideoDecoder createDecoder(VideoCodecInfo codecInfo) {
+        if (codecInfo.name.equalsIgnoreCase(VideoCodecMimeType.H264.name())) {
+            return this.hardwareVideoDecoderFactory.createDecoder(codecInfo);
+        }
+
+        return this.softwareVideoDecoderFactory.createDecoder(codecInfo);
+    }
+
+    @Override
+    public VideoCodecInfo[] getSupportedCodecs() {
+        List<VideoCodecInfo> codecs = new ArrayList<>();
+
+        codecs.add(H264Utils.DEFAULT_H264_BASELINE_PROFILE_CODEC);
+        codecs.add(new VideoCodecInfo(VideoCodecMimeType.VP8.name(), new HashMap<>()));
+        codecs.add(new VideoCodecInfo(VideoCodecMimeType.VP9.name(), new HashMap<>()));
+        codecs.add(new VideoCodecInfo(VideoCodecMimeType.AV1.name(), new HashMap<>()));
+
+        return codecs.toArray(new VideoCodecInfo[codecs.size()]);
+    }
+}

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

@@ -0,0 +1,53 @@
+package org.jitsi.meet.sdk;
+
+import androidx.annotation.Nullable;
+
+import org.webrtc.EglBase;
+import org.webrtc.HardwareVideoEncoderFactory;
+import org.webrtc.SoftwareVideoEncoderFactory;
+import org.webrtc.VideoCodecInfo;
+import org.webrtc.VideoEncoder;
+import org.webrtc.VideoEncoderFactory;
+
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+
+/**
+ * This is a custom video encoder factory for WebRTC which behaves similarly
+ * to the default one in iOS. It supports the following codecs:
+ *
+ * - In hardware: H.264 (baseline)
+ * - In software: VP8, VP9, AV1
+ */
+public class WebRTCVideoEncoderFactory implements VideoEncoderFactory {
+    private final VideoEncoderFactory hardwareVideoEncoderFactory;
+    private final VideoEncoderFactory softwareVideoEncoderFactory = new SoftwareVideoEncoderFactory();
+
+    public WebRTCVideoEncoderFactory(@Nullable EglBase.Context eglContext) {
+        this.hardwareVideoEncoderFactory =
+            new HardwareVideoEncoderFactory(eglContext, false, false);
+    }
+
+    @Nullable
+    @Override
+    public VideoEncoder createEncoder(VideoCodecInfo codecInfo) {
+        if (codecInfo.name.equalsIgnoreCase(VideoCodecMimeType.H264.name())) {
+            return this.hardwareVideoEncoderFactory.createEncoder(codecInfo);
+        }
+
+        return this.softwareVideoEncoderFactory.createEncoder(codecInfo);
+    }
+
+    @Override
+    public VideoCodecInfo[] getSupportedCodecs() {
+        List<VideoCodecInfo> codecs = new ArrayList<>();
+
+        codecs.add(H264Utils.DEFAULT_H264_BASELINE_PROFILE_CODEC);
+        codecs.add(new VideoCodecInfo(VideoCodecMimeType.VP8.name(), new HashMap<>()));
+        codecs.add(new VideoCodecInfo(VideoCodecMimeType.VP9.name(), new HashMap<>()));
+        codecs.add(new VideoCodecInfo(VideoCodecMimeType.AV1.name(), new HashMap<>()));
+
+        return codecs.toArray(new VideoCodecInfo[codecs.size()]);
+    }
+}

app.js

@@ -18,6 +18,7 @@ import './react/features/base/jitsi-local-storage/setup';
 import conference from './conference';
 import API from './modules/API';
 import UI from './modules/UI/UI';
+import keyboardshortcut from './modules/keyboardshortcut/keyboardshortcut';
 import translation from './modules/translation/translation';
 
 // Initialize Olm as early as possible.
@@ -32,11 +33,23 @@ window.APP = {
     API,
     conference,
 
+    // Used by do_external_connect.js if we receive the attach data after
+    // connect was already executed. status property can be 'initialized',
+    // 'ready', or 'connecting'. We are interested in 'ready' status only which
+    // means that connect was executed but we have to wait for the attach data.
+    // In status 'ready' handler property will be set to a function that will
+    // finish the connect process when the attach data or error is received.
+    connect: {
+        handler: null,
+        status: 'initialized'
+    },
+
     // Used for automated performance tests.
     connectionTimes: {
         'index.loaded': window.indexLoadedTime
     },
 
+    keyboardshortcut,
     translation,
     UI
 };

conference.js

@@ -17,9 +17,9 @@ import {
     createDeviceChangedEvent,
     createScreenSharingEvent,
     createStartSilentEvent,
-    createTrackMutedEvent
-} from './react/features/analytics/AnalyticsEvents';
-import { sendAnalytics } from './react/features/analytics/functions';
+    createTrackMutedEvent,
+    sendAnalytics
+} from './react/features/analytics';
 import {
     maybeRedirectToWelcomePage,
     redirectToStaticPage,
@@ -28,8 +28,13 @@ import {
 import { showModeratedNotification } from './react/features/av-moderation/actions';
 import { shouldShowModeratedNotification } from './react/features/av-moderation/functions';
 import {
+    AVATAR_URL_COMMAND,
+    CONFERENCE_LEAVE_REASONS,
+    EMAIL_COMMAND,
     _conferenceWillJoin,
     authStatusChanged,
+    commonUserJoinedHandling,
+    commonUserLeftHandling,
     conferenceFailed,
     conferenceJoinInProgress,
     conferenceJoined,
@@ -42,26 +47,15 @@ import {
     dataChannelClosed,
     dataChannelOpened,
     e2eRttChanged,
+    generateVisitorConfig,
+    getConferenceOptions,
     kickedOut,
     lockStateChanged,
     nonParticipantMessageReceived,
     onStartMutedPolicyChanged,
-    p2pStatusChanged
-} from './react/features/base/conference/actions';
-import {
-    AVATAR_URL_COMMAND,
-    CONFERENCE_LEAVE_REASONS,
-    EMAIL_COMMAND
-} from './react/features/base/conference/constants';
-import {
-    commonUserJoinedHandling,
-    commonUserLeftHandling,
-    getConferenceOptions,
-    getVisitorOptions,
-    restoreConferenceOptions,
+    p2pStatusChanged,
     sendLocalParticipant
-} from './react/features/base/conference/functions';
-import { overwriteConfig } from './react/features/base/config/actions';
+} from './react/features/base/conference';
 import { getReplaceParticipant } from './react/features/base/config/functions';
 import {
     checkAndNotifyForNewDevice,
@@ -87,23 +81,22 @@ import {
 } from './react/features/base/lib-jitsi-meet';
 import { isFatalJitsiConnectionError } from './react/features/base/lib-jitsi-meet/functions';
 import {
-    gumPending,
+    MEDIA_TYPE,
+    getStartWithAudioMuted,
+    getStartWithVideoMuted,
+    isVideoMutedByUser,
     setAudioAvailable,
     setAudioMuted,
     setAudioUnmutePermissions,
     setVideoAvailable,
     setVideoMuted,
     setVideoUnmutePermissions
-} from './react/features/base/media/actions';
-import { MEDIA_TYPE } from './react/features/base/media/constants';
-import {
-    getStartWithAudioMuted,
-    getStartWithVideoMuted,
-    isVideoMutedByUser
-} from './react/features/base/media/functions';
-import { IGUMPendingState } from './react/features/base/media/types';
+} from './react/features/base/media';
 import {
     dominantSpeakerChanged,
+    getLocalParticipant,
+    getNormalizedDisplayName,
+    getVirtualScreenshareParticipantByOwnerId,
     localParticipantAudioLevelChanged,
     localParticipantRoleChanged,
     participantKicked,
@@ -114,58 +107,52 @@ import {
     participantUpdated,
     screenshareParticipantDisplayNameChanged,
     updateRemoteParticipantFeatures
-} from './react/features/base/participants/actions';
-import {
-    getLocalParticipant,
-    getNormalizedDisplayName,
-    getVirtualScreenshareParticipantByOwnerId
-} from './react/features/base/participants/functions';
-import { updateSettings } from './react/features/base/settings/actions';
+} from './react/features/base/participants';
+import { updateSettings } from './react/features/base/settings';
 import {
     addLocalTrack,
-    destroyLocalTracks,
-    replaceLocalTrack,
-    toggleScreensharing as toggleScreensharingA,
-    trackAdded,
-    trackRemoved
-} from './react/features/base/tracks/actions';
-import {
     createLocalTracksF,
+    destroyLocalTracks,
     getLocalJitsiAudioTrack,
     getLocalJitsiVideoTrack,
     getLocalTracks,
     getLocalVideoTrack,
     isLocalTrackMuted,
-    isUserInteractionRequiredForUnmute
-} from './react/features/base/tracks/functions';
+    isUserInteractionRequiredForUnmute,
+    replaceLocalTrack,
+    toggleScreensharing as toggleScreensharingA,
+    trackAdded,
+    trackRemoved
+} from './react/features/base/tracks';
 import { downloadJSON } from './react/features/base/util/downloadJSON';
-import { showDesktopPicker } from './react/features/desktop-picker/actions';
-import { appendSuffix } from './react/features/display-name/functions';
-import { maybeOpenFeedbackDialog, submitFeedback } from './react/features/feedback/actions';
-import { initKeyboardShortcuts } from './react/features/keyboard-shortcuts/actions';
+import { showDesktopPicker } from './react/features/desktop-picker';
+import { appendSuffix } from './react/features/display-name';
+import {
+    maybeOpenFeedbackDialog,
+    submitFeedback
+} from './react/features/feedback';
 import { maybeSetLobbyChatMessageListener } from './react/features/lobby/actions.any';
 import { setNoiseSuppressionEnabled } from './react/features/noise-suppression/actions';
-import { hideNotification, showNotification, showWarningNotification } from './react/features/notifications/actions';
 import {
     DATA_CHANNEL_CLOSED_NOTIFICATION_ID,
-    NOTIFICATION_TIMEOUT_TYPE
-} from './react/features/notifications/constants';
-import { isModerationNotificationDisplayed } from './react/features/notifications/functions';
-import { mediaPermissionPromptVisibilityChanged } from './react/features/overlay/actions';
-import { suspendDetected } from './react/features/power-monitor/actions';
+    NOTIFICATION_TIMEOUT_TYPE,
+    hideNotification,
+    isModerationNotificationDisplayed,
+    showNotification,
+    showWarningNotification
+} from './react/features/notifications';
+import { mediaPermissionPromptVisibilityChanged } from './react/features/overlay';
+import { suspendDetected } from './react/features/power-monitor';
 import { initPrejoin, makePrecallTest, setJoiningInProgress } from './react/features/prejoin/actions';
 import { isPrejoinPageVisible } from './react/features/prejoin/functions';
-import { disableReceiver, stopReceiver } from './react/features/remote-control/actions';
-import { setScreenAudioShareState } from './react/features/screen-share/actions.web';
-import { isScreenAudioShared } from './react/features/screen-share/functions';
-import { toggleScreenshotCaptureSummary } from './react/features/screenshot-capture/actions';
+import { disableReceiver, stopReceiver } from './react/features/remote-control';
+import { isScreenAudioShared, setScreenAudioShareState } from './react/features/screen-share/';
+import { toggleScreenshotCaptureSummary } from './react/features/screenshot-capture';
 import { AudioMixerEffect } from './react/features/stream-effects/audio-mixer/AudioMixerEffect';
 import { createRnnoiseProcessor } from './react/features/stream-effects/rnnoise';
-import { endpointMessageReceived } from './react/features/subtitles/actions.any';
+import { endpointMessageReceived } from './react/features/subtitles';
 import { handleToggleVideoMuted } from './react/features/toolbox/actions.any';
 import { muteLocal } from './react/features/video-menu/actions.any';
-import { setIAmVisitor } from './react/features/visitors/actions';
-import { iAmVisitor } from './react/features/visitors/functions';
 import UIEvents from './service/UI/UIEvents';
 
 const logger = Logger.getLogger(__filename);
@@ -353,30 +340,21 @@ class ConferenceConnector {
         }
 
         case JitsiConferenceErrors.REDIRECTED: {
-            const newConfig = getVisitorOptions(APP.store.getState(), params);
+            generateVisitorConfig(APP.store.getState(), params);
 
-            if (!newConfig) {
-                logger.warn('Not redirected missing params');
-                break;
-            }
+            connection.disconnect().then(() => {
+                connect(this._conference.roomName).then(con => {
+                    const localTracks = getLocalTracks(APP.store.getState()['features/base/tracks']);
 
-            const [ vnode ] = params;
+                    const jitsiTracks = localTracks.map(t => t.jitsiTrack);
 
-            APP.store.dispatch(overwriteConfig(newConfig))
-                .then(() => this._conference.leaveRoom())
-                .then(() => APP.store.dispatch(setIAmVisitor(Boolean(vnode))))
+                    // visitors connect muted
+                    jitsiTracks.forEach(t => t.mute());
 
-                // we do not clear local tracks on error, so we need to manually clear them
-                .then(() => APP.store.dispatch(destroyLocalTracks()))
-                .then(() => {
-                    // Reset VideoLayout. It's destroyed in features/video-layout/middleware.web.js so re-initialize it.
-                    VideoLayout.initLargeVideo();
-                    VideoLayout.resizeVideoArea();
-
-                    connect(this._conference.roomName).then(con => {
-                        this._conference.startConference(con, []);
-                    });
+                    // TODO disable option to unmute audio or video
+                    this._conference.startConference(con, jitsiTracks);
                 });
+            });
 
             break;
         }
@@ -411,28 +389,10 @@ class ConferenceConnector {
             room.leave(CONFERENCE_LEAVE_REASONS.UNRECOVERABLE_ERROR).then(() => connection.disconnect());
             break;
 
-        case JitsiConferenceErrors.CONFERENCE_MAX_USERS: {
+        case JitsiConferenceErrors.CONFERENCE_MAX_USERS:
             APP.UI.notifyMaxUsersLimitReached();
-
-            // in case of max users(it can be from a visitor node), let's restore
-            // oldConfig if any as we will be back to the main prosody
-            const newConfig = restoreConferenceOptions(APP.store.getState());
-
-            if (newConfig) {
-                APP.store.dispatch(overwriteConfig(newConfig))
-                    .then(() => this._conference.leaveRoom())
-                    .then(() => {
-                        _connectionPromise = connect(this._conference.roomName);
-
-                        return _connectionPromise;
-                    })
-                    .then(con => {
-                        APP.connection = connection = con;
-                    });
-            }
-
             break;
-        }
+
         case JitsiConferenceErrors.INCOMPATIBLE_SERVER_VERSIONS:
             APP.store.dispatch(reloadWithStoredParams());
             break;
@@ -495,21 +455,6 @@ function disconnect() {
     return connection.disconnect().then(onDisconnected, onDisconnected);
 }
 
-/**
- * Sets the GUM pending state for the tracks that have failed.
- *
- * NOTE: Some of the track that we will be setting to GUM pending state NONE may not have failed but they may have
- * been requested. This won't be a problem because their current GUM pending state will be NONE anyway.
- * @param {JitsiLocalTrack} tracks - The tracks that have been created.
- * @returns {void}
- */
-function setGUMPendingStateOnFailedTracks(tracks) {
-    const tracksTypes = tracks.map(track => track.getType());
-    const nonPendingTracks = [ MEDIA_TYPE.AUDIO, MEDIA_TYPE.VIDEO ].filter(type => !tracksTypes.includes(type));
-
-    APP.store.dispatch(gumPending(nonPendingTracks, IGUMPendingState.NONE));
-}
-
 /**
  * Handles CONNECTION_FAILED events from lib-jitsi-meet.
  *
@@ -576,7 +521,7 @@ export default {
             );
         }
 
-        let tryCreateLocalTracks = Promise.resolve([]);
+        let tryCreateLocalTracks;
 
         // On Electron there is no permission prompt for granting permissions. That's why we don't need to
         // spend much time displaying the overlay screen. If GUM is not resolved within 15 seconds it will
@@ -617,66 +562,76 @@ export default {
 
                     return [];
                 });
-        } else if (requestedAudio || requestedVideo) {
-            APP.store.dispatch(gumPending(initialDevices, IGUMPendingState.PENDING_UNMUTE));
+        } else if (!requestedAudio && !requestedVideo) {
+            // Resolve with no tracks
+            tryCreateLocalTracks = Promise.resolve([]);
+        } else {
             tryCreateLocalTracks = createLocalTracksF({
                 devices: initialDevices,
                 timeout,
                 firePermissionPromptIsShownEvent: true
             })
-            .catch(async error => {
-                if (error.name === JitsiTrackErrors.TIMEOUT && !browser.isElectron()) {
-                    errors.audioAndVideoError = error;
+                .catch(err => {
+                    if (requestedAudio && requestedVideo) {
+
+                        // Try audio only...
+                        errors.audioAndVideoError = err;
+
+                        if (err.name === JitsiTrackErrors.TIMEOUT && !browser.isElectron()) {
+                            // In this case we expect that the permission prompt is still visible. There is no point of
+                            // executing GUM with different source. Also at the time of writing the following
+                            // inconsistency have been noticed in some browsers - if the permissions prompt is visible
+                            // and another GUM is executed the prompt does not change its content but if the user
+                            // clicks allow the user action isassociated with the latest GUM call.
+                            errors.audioOnlyError = err;
+                            errors.videoOnlyError = err;
+
+                            return [];
+                        }
+
+                        return createLocalTracksF(audioOptions);
+                    } else if (requestedAudio && !requestedVideo) {
+                        errors.audioOnlyError = err;
+
+                        return [];
+                    } else if (requestedVideo && !requestedAudio) {
+                        errors.videoOnlyError = err;
+
+                        return [];
+                    }
+                    logger.error('Should never happen');
+                })
+                .catch(err => {
+                    // Log this just in case...
+                    if (!requestedAudio) {
+                        logger.error('The impossible just happened', err);
+                    }
+                    errors.audioOnlyError = err;
+
+                    // Try video only...
+                    return requestedVideo
+                        ? createLocalTracksF({
+                            devices: [ MEDIA_TYPE.VIDEO ],
+                            firePermissionPromptIsShownEvent: true
+                        })
+                        : [];
+                })
+                .catch(err => {
+                    // Log this just in case...
+                    if (!requestedVideo) {
+                        logger.error('The impossible just happened', err);
+                    }
+                    errors.videoOnlyError = err;
 
                     return [];
-                }
-
-                // Retry with separate gUM calls.
-                const gUMPromises = [];
-                const tracks = [];
-
-                if (requestedAudio) {
-                    gUMPromises.push(createLocalTracksF(audioOptions));
-                }
-
-                if (requestedVideo) {
-                    gUMPromises.push(createLocalTracksF({
-                        devices: [ MEDIA_TYPE.VIDEO ],
-                        timeout,
-                        firePermissionPromptIsShownEvent: true
-                    }));
-                }
-
-                const results = await Promise.allSettled(gUMPromises);
-                let errorMsg;
-
-                results.forEach((result, idx) => {
-                    if (result.status === 'fulfilled') {
-                        tracks.push(result.value[0]);
-                    } else {
-                        errorMsg = result.reason;
-                        const isAudio = idx === 0;
-
-                        logger.error(`${isAudio ? 'Audio' : 'Video'} track creation failed with error ${errorMsg}`);
-                        if (isAudio) {
-                            errors.audioOnlyError = errorMsg;
-                        } else {
-                            errors.videoOnlyError = errorMsg;
-                        }
-                    }
                 });
-
-                if (errors.audioOnlyError && errors.videoOnlyError) {
-                    errors.audioAndVideoError = errorMsg;
-                }
-
-                return tracks;
-            });
         }
 
-        // Hide the permissions prompt/overlay as soon as the tracks are created. Don't wait for the connection to
-        // be established, as in some cases like when auth is required, connection won't be established until the user
-        // inputs their credentials, but the dialog would be overshadowed by the overlay.
+        // Hide the permissions prompt/overlay as soon as the tracks are
+        // created. Don't wait for the connection to be made, since in some
+        // cases, when auth is required, for instance, that won't happen until
+        // the user inputs their credentials, but the dialog would be
+        // overshadowed by the overlay.
         tryCreateLocalTracks.then(tracks => {
             APP.store.dispatch(mediaPermissionPromptVisibilityChanged(false));
 
@@ -813,55 +768,46 @@ export default {
      * @returns {Promise}
      */
     async init({ roomName }) {
-        const state = APP.store.getState();
         const initialOptions = {
             startAudioOnly: config.startAudioOnly,
             startScreenSharing: config.startScreenSharing,
-            startWithAudioMuted: getStartWithAudioMuted(state) || isUserInteractionRequiredForUnmute(state),
-            startWithVideoMuted: getStartWithVideoMuted(state) || isUserInteractionRequiredForUnmute(state)
+            startWithAudioMuted: getStartWithAudioMuted(APP.store.getState())
+                || isUserInteractionRequiredForUnmute(APP.store.getState()),
+            startWithVideoMuted: getStartWithVideoMuted(APP.store.getState())
+                || isUserInteractionRequiredForUnmute(APP.store.getState())
         };
 
         this.roomName = roomName;
 
         try {
-            // Initialize the device list first. This way, when creating tracks based on preferred devices, loose label
-            // matching can be done in cases where the exact ID match is no longer available, such as -
-            // 1. When the camera device has switched USB ports.
-            // 2. When in startSilent mode we want to start with audio muted
+            // Initialize the device list first. This way, when creating tracks
+            // based on preferred devices, loose label matching can be done in
+            // cases where the exact ID match is no longer available, such as
+            // when the camera device has switched USB ports.
+            // when in startSilent mode we want to start with audio muted
             await this._initDeviceList();
         } catch (error) {
             logger.warn('initial device list initialization failed', error);
         }
 
-        // Filter out the local tracks based on various config options, i.e., when user joins muted or is muted by
-        // focus. However, audio track will always be created even though it is not added to the conference since we
-        // want audio related features (noisy mic, talk while muted, etc.) to work even if the mic is muted.
-        const handleInitialTracks = (options, tracks) => {
-            let localTracks = tracks;
-
-            // No local tracks are added when user joins as a visitor.
-            if (iAmVisitor(state)) {
-                return [];
-            }
-            if (options.startWithAudioMuted || room?.isStartAudioMuted()) {
+        const handleStartAudioMuted = (options, tracks) => {
+            if (options.startWithAudioMuted) {
                 // Always add the track on Safari because of a known issue where audio playout doesn't happen
                 // if the user joins audio and video muted, i.e., if there is no local media capture.
                 if (browser.isWebKitBased()) {
                     this.muteAudio(true, true);
                 } else {
-                    localTracks = localTracks.filter(track => track.getType() !== MEDIA_TYPE.AUDIO);
+                    return tracks.filter(track => track.getType() !== MEDIA_TYPE.AUDIO);
                 }
             }
-            if (room?.isStartVideoMuted()) {
-                localTracks = localTracks.filter(track => track.getType() !== MEDIA_TYPE.VIDEO);
-            }
 
-            return localTracks;
+            return tracks;
         };
 
-        if (isPrejoinPageVisible(state)) {
+        if (isPrejoinPageVisible(APP.store.getState())) {
             _connectionPromise = connect(roomName).then(c => {
-                // We want to initialize it early, in case of errors to be able to gather logs.
+                // we want to initialize it early, in case of errors to be able
+                // to gather logs
                 APP.connection = c;
 
                 return c;
@@ -874,38 +820,43 @@ export default {
             APP.store.dispatch(makePrecallTest(this._getConferenceOptions()));
 
             const { tryCreateLocalTracks, errors } = this.createInitialLocalTracks(initialOptions);
-            const localTracks = await tryCreateLocalTracks;
+            const tracks = await tryCreateLocalTracks;
 
-            // Initialize device list a second time to ensure device labels get populated in case of an initial gUM
-            // acceptance; otherwise they may remain as empty strings.
+            // Initialize device list a second time to ensure device labels
+            // get populated in case of an initial gUM acceptance; otherwise
+            // they may remain as empty strings.
             this._initDeviceList(true);
 
-            if (isPrejoinPageVisible(state)) {
-                APP.store.dispatch(gumPending([ MEDIA_TYPE.AUDIO, MEDIA_TYPE.VIDEO ], IGUMPendingState.NONE));
-
-                return APP.store.dispatch(initPrejoin(localTracks, errors));
+            if (isPrejoinPageVisible(APP.store.getState())) {
+                return APP.store.dispatch(initPrejoin(tracks, errors));
             }
 
             logger.debug('Prejoin screen no longer displayed at the time when tracks were created');
 
             this._displayErrorsForCreateInitialLocalTracks(errors);
 
-            const tracks = handleInitialTracks(initialOptions, localTracks);
+            let localTracks = handleStartAudioMuted(initialOptions, tracks);
 
-            setGUMPendingStateOnFailedTracks(tracks);
+            // in case where gum is slow and resolves after the startAudio/VideoMuted coming from jicofo, we can be
+            // join unmuted even though jicofo had instruct us to mute, so let's respect that before passing the tracks
+            if (!browser.isWebKitBased()) {
+                if (room?.isStartAudioMuted()) {
+                    localTracks = localTracks.filter(track => track.getType() !== MEDIA_TYPE.AUDIO);
+                }
+            }
 
-            return this._setLocalAudioVideoStreams(tracks);
+            if (room?.isStartVideoMuted()) {
+                localTracks = localTracks.filter(track => track.getType() !== MEDIA_TYPE.VIDEO);
+            }
+
+            return this._setLocalAudioVideoStreams(localTracks);
         }
 
         const [ tracks, con ] = await this.createInitialLocalTracksAndConnect(roomName, initialOptions);
 
         this._initDeviceList(true);
 
-        const filteredTracks = handleInitialTracks(initialOptions, tracks);
-
-        setGUMPendingStateOnFailedTracks(filteredTracks);
-
-        return this.startConference(con, filteredTracks);
+        return this.startConference(con, handleStartAudioMuted(initialOptions, tracks));
     },
 
     /**
@@ -1028,7 +979,6 @@ export default {
                 showUI && APP.store.dispatch(notifyMicError(error));
             };
 
-            APP.store.dispatch(gumPending([ MEDIA_TYPE.AUDIO ], IGUMPendingState.PENDING_UNMUTE));
             createLocalTracksF({ devices: [ 'audio' ] })
                 .then(([ audioTrack ]) => audioTrack)
                 .catch(error => {
@@ -1040,10 +990,7 @@ export default {
                 .then(async audioTrack => {
                     await this._maybeApplyAudioMixerEffect(audioTrack);
 
-                    return this.useAudioStream(audioTrack);
-                })
-                .finally(() => {
-                    APP.store.dispatch(gumPending([ MEDIA_TYPE.AUDIO ], IGUMPendingState.NONE));
+                    this.useAudioStream(audioTrack);
                 });
         } else {
             muteLocalAudio(mute);
@@ -1082,25 +1029,18 @@ export default {
      */
     muteVideo(mute, showUI = true) {
         if (this.videoSwitchInProgress) {
-            logger.warn('muteVideo - unable to perform operations while video switch is in progress');
+            console.warn('muteVideo - unable to perform operations while video switch is in progress');
 
             return;
         }
 
-        const state = APP.store.getState();
-
         if (!mute
-                && isUserInteractionRequiredForUnmute(state)) {
+                && isUserInteractionRequiredForUnmute(APP.store.getState())) {
             logger.error('Unmuting video requires user interaction');
 
             return;
         }
 
-        // check for A/V Moderation when trying to unmute and return early
-        if (!mute && shouldShowModeratedNotification(MEDIA_TYPE.VIDEO, state)) {
-            return;
-        }
-
         // If not ready to modify track's state yet adjust the base/media
         if (!this._localTracksInitialized) {
             // This will only modify base/media.video.muted which is then synced
@@ -1114,7 +1054,7 @@ export default {
             return;
         }
 
-        const localVideo = getLocalJitsiVideoTrack(state);
+        const localVideo = getLocalJitsiVideoTrack(APP.store.getState());
 
         if (!localVideo && !mute && !this.isCreatingLocalTrack) {
             const maybeShowErrorDialog = error => {
@@ -1123,8 +1063,6 @@ export default {
 
             this.isCreatingLocalTrack = true;
 
-            APP.store.dispatch(gumPending([ MEDIA_TYPE.VIDEO ], IGUMPendingState.PENDING_UNMUTE));
-
             // Try to create local video if there wasn't any.
             // This handles the case when user joined with no video
             // (dismissed screen sharing screen or in audio only mode), but
@@ -1149,7 +1087,6 @@ export default {
                 })
                 .finally(() => {
                     this.isCreatingLocalTrack = false;
-                    APP.store.dispatch(gumPending([ MEDIA_TYPE.VIDEO ], IGUMPendingState.NONE));
                 });
         } else {
             // FIXME show error dialog if it fails (should be handled by react)
@@ -1462,16 +1399,11 @@ export default {
      * @private
      */
     _setLocalAudioVideoStreams(tracks = []) {
-        const { dispatch } = APP.store;
-        const pendingGUMDevicesToRemove = [];
         const promises = tracks.map(track => {
             if (track.isAudioTrack()) {
-                pendingGUMDevicesToRemove.push(MEDIA_TYPE.AUDIO);
-
                 return this.useAudioStream(track);
             } else if (track.isVideoTrack()) {
                 logger.debug(`_setLocalAudioVideoStreams is calling useVideoStream with track: ${track}`);
-                pendingGUMDevicesToRemove.push(MEDIA_TYPE.VIDEO);
 
                 return this.useVideoStream(track);
             }
@@ -1483,10 +1415,6 @@ export default {
         });
 
         return Promise.allSettled(promises).then(() => {
-            if (pendingGUMDevicesToRemove.length > 0) {
-                dispatch(gumPending(pendingGUMDevicesToRemove, IGUMPendingState.NONE));
-            }
-
             this._localTracksInitialized = true;
             logger.log(`Initialized with ${tracks.length} local tracks`);
         });
@@ -1517,7 +1445,7 @@ export default {
 
                 logger.debug(`useVideoStream: Replacing ${oldTrack} with ${newTrack}`);
 
-                if (oldTrack === newTrack || (!oldTrack && !newTrack)) {
+                if (oldTrack === newTrack) {
                     resolve();
                     onFinish();
 
@@ -2029,10 +1957,7 @@ export default {
 
         room.on(
             JitsiConferenceEvents.NON_PARTICIPANT_MESSAGE_RECEIVED,
-            (...args) => {
-                APP.store.dispatch(nonParticipantMessageReceived(...args));
-                APP.API.notifyNonParticipantMessageReceived(...args);
-            });
+            (...args) => APP.store.dispatch(nonParticipantMessageReceived(...args)));
 
         room.on(
             JitsiConferenceEvents.LOCK_STATE_CHANGED,
@@ -2203,11 +2128,6 @@ export default {
             UIEvents.VIDEO_DEVICE_CHANGED,
             cameraDeviceId => {
                 const videoWasMuted = this.isLocalVideoMuted();
-                const localVideoTrack = getLocalJitsiVideoTrack(APP.store.getState());
-
-                if (localVideoTrack?.getDeviceId() === cameraDeviceId) {
-                    return;
-                }
 
                 sendAnalytics(createDeviceChangedEvent('video', 'input'));
 
@@ -2338,7 +2258,10 @@ export default {
 
         APP.UI.initConference();
 
-        dispatch(initKeyboardShortcuts());
+        if (!config.disableShortcuts) {
+            APP.keyboardshortcut.init();
+        }
+
         dispatch(conferenceJoined(room));
 
         const jwt = APP.store.getState()['features/base/jwt'];
@@ -2452,9 +2375,7 @@ export default {
             const { dispatch } = APP.store;
             const setAudioOutputPromise
                 = setAudioOutputDeviceId(newDevices.audiooutput, dispatch)
-                    .catch(err => {
-                        logger.error(`Failed to set the audio output device to ${newDevices.audiooutput} - ${err}`);
-                    });
+                    .catch(); // Just ignore any errors in catch block.
 
             promises.push(setAudioOutputPromise);
         }
@@ -2492,7 +2413,7 @@ export default {
         }
 
         // check for video
-        if (requestedInput.video) {
+        if (!requestedInput.video) {
             APP.store.dispatch(checkAndNotifyForNewDevice(newAvailDevices.videoInput, oldDevices.videoInput));
         }
 
@@ -2536,15 +2457,14 @@ export default {
         // Create the tracks and replace them only if the user is unmuted.
         if (requestedInput.audio || requestedInput.video) {
             let tracks = [];
-            const realAudioDeviceId = hasDefaultMicChanged
-                ? getDefaultDeviceId(APP.store.getState(), 'audioInput') : newDevices.audioinput;
 
             try {
                 tracks = await mediaDeviceHelper.createLocalTracksAfterDeviceListChanged(
                     createLocalTracksF,
-                    requestedInput.video ? newDevices.videoinput : null,
-                    requestedInput.audio ? realAudioDeviceId : null
-                );
+                    newDevices.videoinput,
+                    hasDefaultMicChanged
+                        ? getDefaultDeviceId(APP.store.getState(), 'audioInput')
+                        : newDevices.audioinput);
             } catch (error) {
                 logger.error(`Track creation failed on device change, ${error}`);
 
@@ -2675,22 +2595,17 @@ export default {
     async leaveRoom(doDisconnect = true, reason = '') {
         APP.store.dispatch(conferenceWillLeave(room));
 
-        const maybeDisconnect = () => {
-            if (doDisconnect) {
-                return disconnect();
-            }
-        };
-
         if (room && room.isJoined()) {
-            return room.leave(reason).then(() => maybeDisconnect())
-            .catch(e => {
-                logger.error(e);
-
-                return maybeDisconnect();
+            return room.leave(reason).finally(() => {
+                if (doDisconnect) {
+                    return disconnect();
+                }
             });
         }
 
-        return maybeDisconnect();
+        if (doDisconnect) {
+            return disconnect();
+        }
     },
 
     /**

config.js

@@ -46,9 +46,9 @@ var config = {
     },
 
     // BOSH URL. FIXME: use XEP-0156 to discover it.
-    bosh: 'https://jitsi-meet.example.com/' + subdir + 'http-bind',
+    bosh: '//jitsi-meet.example.com/' + subdir + 'http-bind',
 
-    // Websocket URL (XMPP)
+    // Websocket URL
     // websocket: 'wss://jitsi-meet.example.com/' + subdir + 'xmpp-websocket',
 
     // The real JID of focus participant - can be overridden here
@@ -56,27 +56,11 @@ var config = {
     // https://github.com/jitsi/jitsi-meet/issues/7376
     // focusUserJid: 'focus@auth.jitsi-meet.example.com',
 
-    // Options related to the bridge (colibri) data channel
-    bridgeChannel: {
-        // If the backend advertises multiple colibri websockets, this options allows
-        // to filter some of them out based on the domain name. We use the first URL
-        // which does not match ignoreDomain, falling back to the first one that matches
-        // ignoreDomain. Has no effect if undefined.
-        // ignoreDomain: 'example.com',
-
-        // Prefer SCTP (WebRTC data channels over the media path) over a colibri websocket.
-        // If SCTP is available in the backend it will be used instead of a WS. Defaults to
-        // false (SCTP is used only if available and no WS are available).
-        // preferSctp: false
-    },
 
     // Testing / experimental features.
     //
 
     testing: {
-        // Allows the setting of a custom bandwidth value from the UI.
-        // assumeBandwidth: true,
-
         // Disables the End to End Encryption feature. Useful for debugging
         // issues related to insertable streams.
         // disableE2EE: false,
@@ -142,6 +126,9 @@ var config = {
     // Media
     //
 
+    // Enable unified plan implementation support on Chromium based browsers.
+    // enableUnifiedOnChrome: false,
+
     // Audio
 
     // Disable measuring of audio levels.
@@ -197,22 +184,6 @@ var config = {
     //     enableOpusDtx: false,
     // },
 
-    // Noise suppression configuration. By default rnnoise is used. Optionally Krisp
-    // can be used by enabling it below, but the Krisp JS SDK files must be supplied in your
-    // installation. Specifically, these files are needed:
-    //   - https://meet.example.com/libs/krisp/krisp.mjs
-    //   - https://meet.example.com/libs/krisp/models/model_8.kw
-    //   - https://meet.example.com/libs/krisp/models/model_16.kw
-    //   - https://meet.example.com/libs/krisp/models/model_32.kw
-    // NOTE: Krisp JS SDK v1.0.9 was tested.
-    // noiseSuppression: {
-    //     krisp: {
-    //         enabled: false,
-    //         logProcessStats: false,
-    //         debugLogs: false,
-    //     },
-    // },
-
     // Video
 
     // Sets the preferred resolution (height) for local video. Defaults to 720.
@@ -273,6 +244,12 @@ 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.
+    // enableLayerSuspension: false,
+
     // Every participant after the Nth will start video muted.
     // startVideoMuted: 10,
 
@@ -425,11 +402,43 @@ var config = {
     // value will be used when the quality level is selected using "Manage Video Quality" slider.
     // startLastN: 1,
 
+    // Provides a way to use different "last N" values based on the number of participants in the conference.
+    // The keys in an Object represent number of participants and the values are "last N" to be used when number of
+    // participants gets to or above the number.
+    //
+    // For the given example mapping, "last N" will be set to 20 as long as there are at least 5, but less than
+    // 29 participants in the call and it will be lowered to 15 when the 30th participant joins. The 'channelLastN'
+    // will be used as default until the first threshold is reached.
+    //
+    // lastNLimits: {
+    //     5: 20,
+    //     30: 15,
+    //     50: 10,
+    //     70: 5,
+    //     90: 2,
+    // },
+
     // Specify the settings for video quality optimizations on the client.
     // videoQuality: {
+    //    // Provides a way to prevent a video codec from being negotiated on the JVB connection. The codec specified
+    //    // here will be removed from the list of codecs present in the SDP answer generated by the client. If the
+    //    // same codec is specified for both the disabled and preferred option, the disable settings will prevail.
+    //    // Note that 'VP8' cannot be disabled since it's a mandatory codec, the setting will be ignored in this case.
+    //    disabledCodec: 'H264',
     //
-    //    // Provides a way to set the codec preference on desktop based endpoints.
-    //    codecPreferenceOrder: [ 'VP9', 'VP8', 'H264' ],
+    //    // Provides a way to set a preferred video codec for the JVB connection. If 'H264' is specified here,
+    //    // simulcast will be automatically disabled since JVB doesn't support H264 simulcast yet. This will only
+    //    // rearrange the the preference order of the codecs in the SDP answer generated by the browser only if the
+    //    // preferred codec specified here is present. Please ensure that the JVB offers the specified codec for this
+    //    // to take effect.
+    //    preferredCodec: 'VP8',
+    //
+    //    // Provides a way to enforce the preferred codec for the conference even when the conference has endpoints
+    //    // that do not support the preferred codec. For example, older versions of Safari do not support VP9 yet.
+    //    // This will result in Safari not being able to decode video from endpoints sending VP9 video.
+    //    // When set to false, the conference falls back to VP8 whenever there is an endpoint that doesn't support the
+    //    // preferred codec and goes back to the preferred codec when that endpoint leaves.
+    //    enforcePreferredCodec: false,
     //
     //    // Provides a way to configure the maximum bitrates that will be enforced on the simulcast streams for
     //    // video tracks. The keys in the object represent the type of the stream (LD, SD or HD) and the values
@@ -469,24 +478,6 @@ var config = {
     //        720: 'high',
     //    },
     //
-    //    // Provides a way to set the codec preference on mobile devices, both on RN and mobile browser based endpoint
-    //    mobileCodecPreferenceOrder: [ 'VP8', 'VP9', 'H264' ],
-    //
-    //    // DEPRECATED! Use `codecPreferenceOrder/mobileCodecPreferenceOrder` instead.
-    //    // Provides a way to prevent a video codec from being negotiated on the JVB connection. The codec specified
-    //    // here will be removed from the list of codecs present in the SDP answer generated by the client. If the
-    //    // same codec is specified for both the disabled and preferred option, the disable settings will prevail.
-    //    // Note that 'VP8' cannot be disabled since it's a mandatory codec, the setting will be ignored in this case.
-    //    disabledCodec: 'H264',
-    //
-    //    // DEPRECATED! Use `codecPreferenceOrder/mobileCodecPreferenceOrder` instead.
-    //    // Provides a way to set a preferred video codec for the JVB connection. If 'H264' is specified here,
-    //    // simulcast will be automatically disabled since JVB doesn't support H264 simulcast yet. This will only
-    //    // rearrange the the preference order of the codecs in the SDP answer generated by the browser only if the
-    //    // preferred codec specified here is present. Please ensure that the JVB offers the specified codec for this
-    //    // to take effect.
-    //    preferredCodec: 'VP8',
-    //
     // },
 
     // Notification timeouts
@@ -570,9 +561,6 @@ var config = {
     // Require users to always specify a display name.
     // requireDisplayName: true,
 
-    // Enables webhid functionality for Audio.
-    // enableWebHIDFeature: false,
-
     // DEPRECATED! Use 'welcomePage.disabled' instead.
     // Whether to use a welcome page or not. In case it's false a random room
     // will be joined when no room is specified.
@@ -929,6 +917,9 @@ var config = {
         // connection.
         enabled: true,
 
+        // Enable unified plan implementation support on Chromium for p2p connection.
+        // enableUnifiedOnChrome: false,
+
         // Sets the ICE transport policy for the p2p connection. At the time
         // of this writing the list of possible values are 'all' and 'relay',
         // but that is subject to change in the future. The enum is defined in
@@ -937,12 +928,12 @@ var config = {
         // If not set, the effective value is 'all'.
         // iceTransportPolicy: 'all',
 
-        // Provides a way to set the codec preference on mobile devices, both on RN and mobile browser based
-        // endpoints.
-        // mobileCodecPreferenceOrder: [ 'H264', 'VP8', 'VP9' ],
-        //
-        // Provides a way to set the codec preference on desktop based endpoints.
-        // codecPreferenceOrder: [ 'VP9', 'VP8', 'H264 ],
+        // Provides a way to set the video codec preference on the p2p connection. Acceptable
+        // codec values are 'VP8', 'VP9' and 'H264'.
+        // preferredCodec: 'H264',
+
+        // Provides a way to prevent a video codec from being negotiated on the p2p connection.
+        // disabledCodec: '',
 
         // How long we're going to wait, before going back to P2P after the 3rd
         // participant has left the conference (to filter out page reload).
@@ -954,15 +945,6 @@ var config = {
             // { urls: 'stun:jitsi-meet.example.com:3478' },
             { urls: 'stun:meet-jit-si-turnrelay.jitsi.net:443' },
         ],
-
-        // DEPRECATED! Use `codecPreferenceOrder/mobileCodecPreferenceOrder` instead.
-        // Provides a way to set the video codec preference on the p2p connection. Acceptable
-        // codec values are 'VP8', 'VP9' and 'H264'.
-        // preferredCodec: 'H264',
-
-        // DEPRECATED! Use `codecPreferenceOrder/mobileCodecPreferenceOrder` instead.
-        // Provides a way to prevent a video codec from being negotiated on the p2p connection.
-        // disabledCodec: '',
     },
 
     analytics: {
@@ -1079,12 +1061,7 @@ var config = {
     // },
 
     // e2ee: {
-    //   labels: {
-    //     description: '',
-    //     label: '',
-    //     tooltip: '',
-    //     warning: '',
-    //   },
+    //   labels,
     //   externallyManagedKey: false,
     // },
 
@@ -1169,13 +1146,6 @@ var config = {
     //     }
     // },
 
-    // // The terms, privacy and help centre URL's.
-    // legalUrls: {
-    //     helpCentre: 'https://web-cdn.jitsi.net/faq/meet-faq.html',
-    //     privacy: 'https://jitsi.org/meet/privacy',
-    //     terms: 'https://jitsi.org/meet/terms'
-    // },
-
     // A property to disable the right click context menu for localVideo
     // the menu has option to flip the locally seen video for local presentations
     // disableLocalVideoFlip: false,
@@ -1268,6 +1238,7 @@ var config = {
                 ui03: "violet",
                 ui04: "magenta",
                 ui05: "blueviolet",
+                field02Hover: 'red',
                 action01: 'green',
                 action01Hover: 'lightgreen',
                 disabled01: 'beige',
@@ -1394,6 +1365,8 @@ var config = {
      dialOutRegionUrl
      disableRemoteControl
      displayJids
+     externalConnectUrl
+     e2eeLabels
      firefox_fake_device
      googleApiApplicationClientID
      iAmRecorder
@@ -1416,6 +1389,7 @@ var config = {
     /**
      _peerConnStatusOutOfLastNTimeout
      _peerConnStatusRtcMuteTimeout
+     abTesting
      avgRtpStatsN
      callStatsConfIDNamespace
      callStatsCustomScriptUrl
@@ -1424,7 +1398,6 @@ var config = {
      disableAGC
      disableAP
      disableHPF
-     disableLocalStats
      disableNS
      enableTalkWhileMuted
      forceJVB121Ratio

connection.js

@@ -12,7 +12,7 @@ import {
     constructOptions
 } from './react/features/base/connection/actions.web';
 import { openDialog } from './react/features/base/dialog/actions';
-import { setJWT } from './react/features/base/jwt/actions';
+import { setJWT } from './react/features/base/jwt';
 import {
     JitsiConnectionErrors,
     JitsiConnectionEvents
@@ -32,6 +32,54 @@ const logger = Logger.getLogger(__filename);
  */
 export const DISCO_JIBRI_FEATURE = 'http://jitsi.org/protocol/jibri';
 
+/**
+ * Checks if we have data to use attach instead of connect. If we have the data
+ * executes attach otherwise check if we have to wait for the data. If we have
+ * to wait for the attach data we are setting handler to APP.connect.handler
+ * which is going to be called when the attach data is received otherwise
+ * executes connect.
+ *
+ * @param {string} [id] user id
+ * @param {string} [password] password
+ * @param {string} [roomName] the name of the conference.
+ */
+function checkForAttachParametersAndConnect(id, password, connection) {
+    if (window.XMPPAttachInfo) {
+        APP.connect.status = 'connecting';
+
+        // When connection optimization is not deployed or enabled the default
+        // value will be window.XMPPAttachInfo.status = "error"
+        // If the connection optimization is deployed and enabled and there is
+        // a failure the value will be window.XMPPAttachInfo.status = "error"
+        if (window.XMPPAttachInfo.status === 'error') {
+            connection.connect({
+                id,
+                password
+            });
+
+            return;
+        }
+
+        const attachOptions = window.XMPPAttachInfo.data;
+
+        if (attachOptions) {
+            connection.attach(attachOptions);
+            delete window.XMPPAttachInfo.data;
+        } else {
+            connection.connect({
+                id,
+                password
+            });
+        }
+    } else {
+        APP.connect.status = 'ready';
+        APP.connect.handler
+            = checkForAttachParametersAndConnect.bind(
+                null,
+                id, password, connection);
+    }
+}
+
 /**
  * Try to open connection using provided credentials.
  * @param {string} [id]
@@ -134,10 +182,7 @@ export async function connect(id, password) {
             APP.store.dispatch(setPrejoinDisplayNameRequired());
         }
 
-        connection.connect({
-            id,
-            password
-        });
+        checkForAttachParametersAndConnect(id, password, connection);
     });
 }
 
@@ -167,7 +212,7 @@ export function openConnection({ id, password, retry, roomName }) {
         password = passwordOverride; // eslint-disable-line no-param-reassign
     }
 
-    return connect(id, password).catch(err => {
+    return connect(id, password, roomName).catch(err => {
         if (retry) {
             const { jwt } = APP.store.getState()['features/base/jwt'];
 

connection_optimization/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+    'extends': '../react/.eslintrc.js'
+};

connection_optimization/do_external_connect.js

@@ -0,0 +1,86 @@
+/* global config, createConnectionExternally */
+
+import getRoomName from '../react/features/base/config/getRoomName';
+import { parseURLParams } from '../react/features/base/util/parseURLParams';
+
+/**
+ * Implements external connect using createConnectionExternally function defined
+ * in external_connect.js for Jitsi Meet. Parses the room name and JSON Web
+ * Token (JWT) from the URL and executes createConnectionExternally.
+ *
+ * NOTE: If you are using lib-jitsi-meet without Jitsi Meet, you should use this
+ * file as reference only because the implementation is Jitsi Meet-specific.
+ *
+ * NOTE: For optimal results this file should be included right after
+ * external_connect.js.
+ */
+
+if (typeof createConnectionExternally === 'function') {
+    // URL params have higher priority than config params.
+    // Do not use external connect if websocket is enabled.
+    let url
+        = parseURLParams(window.location, true, 'hash')[
+                'config.externalConnectUrl']
+            || config.websocket ? undefined : config.externalConnectUrl;
+    const isRecorder
+        = parseURLParams(window.location, true, 'hash')['config.iAmRecorder'];
+
+    let roomName;
+
+    if (url && (roomName = getRoomName()) && !isRecorder) {
+        url += `?room=${roomName}`;
+
+        const token = parseURLParams(window.location, true, 'search').jwt;
+
+        if (token) {
+            url += `&token=${token}`;
+        }
+
+        createConnectionExternally(
+            url,
+            connectionInfo => {
+                // Sets that global variable to be used later by connect method
+                // in connection.js.
+                window.XMPPAttachInfo = {
+                    status: 'success',
+                    data: connectionInfo
+                };
+                checkForConnectHandlerAndConnect();
+            },
+            errorCallback);
+    } else {
+        errorCallback();
+    }
+} else {
+    errorCallback();
+}
+
+/**
+ * Check if connect from connection.js was executed and executes the handler
+ * that is going to finish the connect work.
+ *
+ * @returns {void}
+ */
+function checkForConnectHandlerAndConnect() {
+    window.APP
+        && window.APP.connect.status === 'ready'
+        && window.APP.connect.handler();
+}
+
+/**
+ * Implements a callback to be invoked if anything goes wrong.
+ *
+ * @param {Error} error - The specifics of what went wrong.
+ * @returns {void}
+ */
+function errorCallback(error) {
+    // The value of error is undefined if external connect is disabled.
+    error && console.warn(error);
+
+    // Sets that global variable to be used later by connect method in
+    // connection.js.
+    window.XMPPAttachInfo = {
+        status: 'error'
+    };
+    checkForConnectHandlerAndConnect();
+}

css/_atlaskit_overrides.scss

@@ -0,0 +1,117 @@
+/**
+ * Mixins that mimic the way Atlaskit fills the screen with modals at low screen widths.
+ */
+@mixin full-size-modal-positioner() {
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    max-width: 100%;
+    width: 100%;
+}
+
+@mixin full-size-modal-dialog() {
+    height: 100%;
+    max-height: 100%;
+    border-radius: 0;
+}
+
+/**
+ * Move the @atlaskit/flag container up a little bit so it does not cover the
+ * toolbar with the first notification.
+ */
+.atlaskit-portal > #notifications-container {
+    bottom: calc(#{$newToolbarSizeWithPadding}) !important;
+}
+
+
+/**
+ * Keep overflow menu within screen vertical bounds and make it scrollable.
+ */
+.toolbox-button-wth-dialog > div:nth-child(2) {
+    background: $menuBG;
+    max-height: calc(100vh - #{$newToolbarSizeWithPadding} - 46px);
+    margin-bottom: 4px;
+    padding: 0;
+    overflow-y: auto;
+}
+
+/**
+ * Remove background color and box-shadow for the context menu container.
+ */
+.toolbox-button-wth-dialog.context-menu > div:nth-child(2) {
+    background: transparent;
+    box-shadow: none;
+    overflow-y: initial;
+}
+
+.audio-preview > div:nth-child(2),
+.video-preview > div:nth-child(2) {
+    margin-bottom: 4px;
+    outline: none;
+    padding: 0;
+}
+
+/**
+ * The following selectors keep the chat modal full-size anywhere between 100px
+ * and 580px for desktop or 680px for mobile.
+ */
+@media (min-width: 100px) and (max-width: 320px) {
+    .smiley-input {
+        display: none;
+    }
+    .shift-right .focus-lock > div > div {
+        @include full-size-modal-positioner();
+    }
+
+    .shift-right .focus-lock [role="dialog"] {
+        @include full-size-modal-dialog();
+    }
+}
+
+@media (min-width: 480px) and (max-width: 580px) {
+    .shift-right .focus-lock > div > div {
+        @include full-size-modal-positioner();
+    }
+
+    .shift-right .focus-lock [role="dialog"] {
+        @include full-size-modal-dialog();
+    }
+}
+
+@media (max-width: 580px) {
+    // Override Atlaskit inline style for the modal background.
+    // Important is unfortunately needed for that.
+    .shift-right .focus-lock [role="dialog"][style] {
+        background-color: $chatBackgroundColor !important;
+    }
+
+    // Remove Atlaskit padding from the chat dialog.
+    .shift-right .focus-lock [role="dialog"] > div:first-child > div:nth-child(2) {
+        padding: 0;
+    }
+}
+
+div.Tooltip {
+    color: #fff;
+    font-size: 12px;
+    line-height: 14px;
+    padding: 8px;
+}
+
+// make modal full screen on landscape orientation
+@media (max-height: 420px) {
+    .atlaskit-portal {
+        .css-1oc7v0j {
+            height: 100%;
+            padding: 0;
+            max-width: 100%;
+            top: 0;
+            width: 100%;
+
+            &> div {
+                height: 100%;
+            }
+        }
+    }
+}

css/_audio-preview.scss

@@ -0,0 +1,103 @@
+.audio-preview {
+    display: inline-block;
+
+    &-content {
+        position: relative;
+        right: auto;
+        margin-bottom: 8px;
+        max-height: 456px;
+        overflow: auto;
+        width: 300px;
+
+        &-ul {
+            margin:0;
+            padding:0;
+            list-style-type: none;
+        }
+    }
+
+    &-header:hover {
+        background-color: initial;
+        cursor: initial;
+    }
+
+    &-entry-text {
+        display: inline-block;
+        text-overflow: ellipsis;
+        max-width: 213px;
+        overflow: hidden;
+        white-space: nowrap;
+
+        &.left-margin {
+            margin-left: 36px;
+        }
+    }
+
+    &-speaker {
+        position: relative;
+
+        &:hover, &:focus-within, &:focus {
+            .audio-preview-test-button {
+                display: inline-block;
+            }
+
+            .audio-preview-entry-text {
+                max-width: 178px;
+                margin-right: 0;
+            }
+        }
+
+        .audio-preview-entry-text {
+            max-width: 238px;
+        }
+    }
+
+    &-microphone {
+        position: relative;
+
+        &--nometer {
+            .audio-preview-entry-text {
+                max-width: 238px;
+            }
+        }
+
+        &--withmeter {
+            .audio-preview-entry-text {
+                max-width: 178px;
+            }
+        }
+
+    }
+
+    &-icon {
+        border-radius: 50%;
+        display: inline-block;
+        width: 14px;
+
+        &--exclamation {
+            margin-left: 6px;
+
+            & svg {
+                fill: #E54B4B;
+            }
+        }
+    }
+
+    &-test-button {
+        display: none;
+        padding: 4px 10px;
+        position: absolute;
+        right: 16px;
+        top: 6px;
+    }
+
+    &-meter-mic {
+        position: absolute;
+        right: 16px;
+        top: 14px;
+    }
+
+    &-checkbox-container {
+        padding: 10px 16px;
+    }
+}

css/_base.scss

@@ -31,8 +31,8 @@ body {
     font-size: 12px;
     font-weight: 400;
     overflow: hidden;
-    color: #F1F1F1;
-    background: #040404; // should match DEFAULT_BACKGROUND from interface_config
+    color: $defaultColor;
+    background: $defaultBackground;
 }
 
 /**
@@ -66,6 +66,10 @@ body, input, textarea, keygen, select, button {
     font-family: $baseFontFamily !important;
 }
 
+#nowebrtc {
+    display:none;
+}
+
 button, input, select, textarea {
     margin: 0;
     vertical-align: baseline;
@@ -90,7 +94,7 @@ input[type='text'], input[type='password'], textarea {
 
 button {
     color: #FFF;
-    background-color: #44A5FF;
+    background-color: $buttonBackground;
     border-radius: $borderRadius;
 
     &.no-icon {
@@ -141,7 +145,22 @@ form {
     font-size: 11pt;
     color: rgba(255,255,255,.50);
     text-decoration: none;
-    z-index: 100;
+    z-index: $poweredByZ;
+}
+
+.connected {
+    color: #21B9FC;
+    font-size: 12px;
+}
+
+.lastN, .disconnected {
+    color: #a3a3a3;
+    font-size: 12px;
+}
+
+#inviteLinkRef {
+    -webkit-user-select: text;
+    user-select: text;
 }
 
 /**

css/_chat.scss

@@ -5,7 +5,7 @@
     position: relative;
     transition: width .16s ease-in-out;
     width: $sidebarWidth;
-    z-index: 300;
+    z-index: $sideToolbarContainerZ;
 
     @media (max-width: 580px) {
         height: 100vh;
@@ -253,7 +253,7 @@
 
 .chatmessage {
     &.localuser {
-        background-color: #484A4F;
+        background-color: $chatLocalMessageBackgroundColor;
         border-radius: 6px 0px 6px 6px;
     }
 
@@ -324,7 +324,7 @@
 
     #smileysContainer {
         background-color: $chatBackgroundColor;
-        border-top: 1px solid #A4B8D1;
+        border-top: 1px solid $chatInputSeparatorColor;
     }
 }
 
@@ -340,7 +340,7 @@
 }
 
 .smileyContainer:hover {
-    background-color: rgba(255, 255, 255, 0.15);
+    background-color: $newToolbarButtonToggleColor;
     border-radius: 5px;
     cursor: pointer;
 }

css/_country-picker.scss

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

css/_drawer.scss

@@ -3,17 +3,17 @@
     left: 0;
     right: 0;
     bottom: 0;
-    z-index: 351;
+    z-index: $drawerZ;
     border-radius: 16px 16px 0 0;
 
     &.notification-portal {
-        z-index: 901;
+        z-index: $dropdownZ;
     }
 }
 
 .drawer-portal::after {
     content: '';
-    background-color: #141414;
+    background-color: $participantsPaneBgColor;
     margin-bottom: env(safe-area-inset-bottom, 0);
 }
 
@@ -28,6 +28,18 @@
     margin-bottom: env(safe-area-inset-bottom, 0);
     width: 100%;
 
+    .drawer-toggle {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 44px;
+        cursor: pointer;
+
+        svg {
+            fill: none;
+        }
+    }
+
     &#{&} .overflow-menu {
         margin: auto;
         font-size: 1.2em;
@@ -42,7 +54,7 @@
             padding: 12px 16px;
 
             align-items: center;
-            color: #fff;
+            color: $overflowMenuItemColor;
             cursor: pointer;
             display: flex;
             font-size: 16px;
@@ -53,10 +65,25 @@
                 align-items: center;
             }
 
+            &.unclickable {
+                cursor: default;
+            }
+            @media (hover: hover) and (pointer: fine) {
+                &.unclickable:hover {
+                    background: inherit;
+                }
+            }
             &.disabled {
                 cursor: initial;
                 color: #3b475c;
             }
         }
+
+        .profile-text {
+            max-width: 100%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
     }
 }

css/_inlay.scss

@@ -3,20 +3,20 @@
     @include border-radius(4px);
     padding: 40px 38px 44px;
     color: #fff;
-    background: lighten(#474747, 20%);
+    background: $inlayColorBg;
     text-align: center;
 
     &__title {
         margin: 17px 0;
         padding-bottom: 17px;
-        color: #ffffff;
+        color: $popoverFontColor;
         font-size: 21px;
         letter-spacing: 0.3px;
-        border-bottom: 1px solid lighten(#FFFFFF, 10%);
+        border-bottom: 1px solid $inlayBorderColor;
     }
 
     &__text {
-        color: #ffffff;
+        color: $popoverFontColor;
         display: block;
         margin-top: 22px;
         font-size: 16px;

css/_login_menu.scss

@@ -1,4 +1,18 @@
+/*Initialize*/
+div.loginmenu {
+    position: absolute;
+    margin: 0;
+    padding: 5px;
+    top: 40px;
+    left: 20px;
+}
+
 a.disabled {
     color: gray !important;
     pointer-events: none;
 }
+
+.loginmenu.extendedToolbarPopup {
+    top: 20px;
+    left: 40px;
+}

css/_meetings_list.scss

@@ -82,7 +82,6 @@
         }
 
         .left-column {
-            order: -1;
             display: flex;
             flex-direction: column;
             flex-grow: 0;
@@ -93,7 +92,6 @@
         .right-column {
             display: flex;
             flex-direction: column;
-            align-items: flex-start;
             flex-grow: 1;
             padding-left: 16px;
             padding-top: 13px;
@@ -101,11 +99,11 @@
         }
 
         .title {
-            font-size: 12px;
-            font-weight: 600;
-            line-height: 16px;
-            margin-bottom: 4px;
-        }
+                font-size: 12px;
+                font-weight: 600;
+                line-height: 16px;
+                padding-bottom: 4px;
+            }
 
         .subtitle {
             color: #5E6D7A;
@@ -127,7 +125,8 @@
             cursor: pointer;
         }
 
-        &.with-click-handler:hover {
+        &.with-click-handler:hover,
+        &.with-click-handler:focus {
             background-color: #c7ddff;
         }
 

css/_mini_toolbox.scss

@@ -1,3 +1,4 @@
+.filmstrip-toolbox,
 .always-on-top-toolbox {
     background-color: $newToolbarBackgroundColor;
     border-radius: 3px;
@@ -28,3 +29,7 @@
     transform: translateX(-50%);
     padding: 3px !important;
 }
+
+.filmstrip-toolbox {
+    flex-direction: column;
+}

css/_modaldialog.scss

@@ -0,0 +1,29 @@
+.jqistates {
+    font-size: 14px;
+}
+
+.jqistates h2 {
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
+    font-size: 18px;
+    line-height: 25px;
+    text-align: center;
+    color: #424242;
+}
+
+.jqistates input {
+    margin: 10px 0;
+}
+
+.jqistates input[type='text'], input[type='password'] {
+    width: 100%;
+}
+
+button.jqidefaultbutton #inviteLinkRef {
+    color: #2c8ad2;
+}
+
+#inviteLinkRef {
+    -webkit-user-select: text;
+    user-select: text;
+}

css/_navigate_section_list.scss

@@ -75,3 +75,6 @@
     margin-bottom: 36px;
     width: 100%;
 }
+.navigate-section-list-empty {
+    text-align: center;
+}

css/_notifications.scss

@@ -0,0 +1,23 @@
+.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;
+    }
+}

css/_participants-pane.scss

@@ -1,5 +1,5 @@
 .participants_pane {
-    background-color: #141414;
+    background-color: $participantsPaneBgColor;
     flex-shrink: 0;
     overflow: hidden;
     position: relative;

css/_polls.scss

@@ -1,3 +1,3 @@
-.polls-panel {
+#polls-panel {
     height: calc(100% - 119px);
 }

css/_popover.scss

@@ -1,33 +1,49 @@
+/**
+ * Mousemove padding styles are used to add invisible elements to the popover
+ * to allow mouse movement from the popover trigger to the popover itself
+ * without triggering a mouseleave event.
+ */
+%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;
+}
+
+.popover-mousemove-padding-left {
+    @extend %vertical-popover-padding;
+    left: -35px;
+}
+
+.popover-mousemove-padding-right {
+    @extend %vertical-popover-padding;
+    right: -35px;
+}
+
+.popover-mousemove-padding-bottom {
+    @extend %horizontal-popover-padding;
+    bottom: -40px;
+}
+
+.popover-mousemove-padding-top {
+    @extend %horizontal-popover-padding;
+    top: -40px;
+}
+
 .popover {
-    z-index: 8;
-
-    .popover-content {
-        position: relative;
-    }
-
-    &.hover {
-        margin: -16px -24px;
-
-        .popover-content {
-            margin: 16px 24px;
-
-            &.top {
-                bottom: 8px;
-            }
-
-            &.bottom {
-                top: 4px;
-            }
-
-            &.left {
-                right: 4px;
-            }
-
-            &.right {
-                left: 4px;
-            }
-        }
-    }
+    margin: -16px -24px;
+    z-index: $popoverZ;
 }
 
 .excalidraw .popover {

css/_reactions-menu.scss

@@ -2,9 +2,9 @@
 
 .reactions-menu {
 	width: 280px;
-	background: #242528;
+	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: 6px;
+	border-radius: 3px;
 	padding: 16px;
 
 	&.with-gif {
@@ -104,6 +104,10 @@
 	}
 }
 
+.reactions-menu-container {
+	padding-bottom: 6px;
+}
+
 .reactions-animations-container {
 	position: absolute;
 	width: 20%;

css/_recording.scss

@@ -1,3 +1,7 @@
+.recordingSpinner {
+    vertical-align: top;
+}
+
 .recording-dialog {
     flex: 0;
     flex-direction: column;
@@ -46,6 +50,10 @@
         }
     }
 
+    .recording-switch-disabled {
+        opacity: 0.5;
+    }
+
     .recording-icon-container {
         display: inline-flex;
         align-items: center;
@@ -148,7 +156,8 @@
      */
     font-size: 14px;
 
-    .broadcast-dropdown {
+    .broadcast-dropdown,
+    .broadcast-dropdown-trigger {
         text-align: left;
     }
 
@@ -177,7 +186,7 @@
     }
 
     .google-error {
-        color: #c61600;
+        color: $errorColor;
     }
 
     .google-panel {
@@ -188,6 +197,14 @@
         padding-bottom: 10px;
     }
 
+    .helper-link {
+        cursor: pointer;
+        font-weight: bold;
+        display: inline-block;
+        flex-shrink: 0;
+        margin-left: auto;
+    }
+
     .warning-text {
         color:#FFD740;
         font-size: 12px;

css/_redirect_page.scss

@@ -5,7 +5,7 @@
     font-size: 24px;
 
     .thanks-msg {
-        border-bottom: 1px solid #FFFFFF;
+        border-bottom: 1px solid $selectBg;
         padding-left: 30px;
         padding-right: 30px;
         p {
@@ -28,7 +28,7 @@
             width: 120px;
             height: 86px;
             margin: 0 auto;
-            background: transparent;
+            background: $happySoftwareBackground;
         }
     }
 }

css/_responsive.scss

@@ -3,33 +3,30 @@
         display: block;
 
         #enter_room {
+            position: relative;
+            height: 42px;
+
             .welcome-page-button {
-                font-size: 16px;
-                left: 0;
-                text-align: center;
-                width: 100%;
+            font-size: 16px;
+            left: 0;
+            position: absolute;
+            top: 68px;
+            text-align: center;
+            width: 100%;
             }
         }
 
         .header {
             background-color: #002637;
 
-            .insecure-room-name-warning {
-                width: 100%;
-            }
-
             #enter_room {
-                width: 100%;
-
-                .join-meeting-container {
-                    padding: 0;
-                    flex-direction: column;
-                    background: transparent;
-                }
-
                 .enter-room-input-container {
                     padding-right: 0;
-                    margin-bottom: 10px;
+                }
+
+                .warning-without-link,
+                .warning-with-link {
+                    top: 120px;
                 }
             }
         }

css/_settings-button.scss

@@ -34,20 +34,20 @@
         background: #F2F3F4;
         box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 
-        & svg {
+        & > svg {
             fill: #040404;
         }
 
         &.settings-button-small-icon--disabled {
             background: #36383C;
 
-            & svg {
+            &> svg {
                 fill: #929292;
             }
         }
     }
 
-    & svg {
+    & > svg {
         fill: #fff;
     }
 
@@ -55,7 +55,7 @@
         background-color: #36383c;
         cursor: default;
 
-        & svg {
+        &> svg {
             fill: #929292;
         }
     }

css/_subject.scss

@@ -34,6 +34,14 @@
     }
 }
 
+.subject-info {
+    align-items: center;
+    display: flex;
+    margin-bottom: 4px;
+    max-width: 80%;
+    height: 28px;
+}
+
 .details-container {
     width: 100%;
     display: flex;

css/_toolbars.scss

@@ -2,10 +2,10 @@
  * Round badge.
  */
 .badge-round {
-    background-color: #165ECC;
+    background-color: $toolbarBadgeBackground;
     border-radius: 50%;
     box-sizing: border-box;
-    color: #FFFFFF;
+    color: $toolbarBadgeColor;
     // Do not inherit the font-family from the toolbar button, because it's an
     // icon style.
     font-family: $baseFontFamily;
@@ -32,14 +32,6 @@
     pointer-events: none;
     z-index: $toolbarZ + 2;
 
-    &.shift-up {
-        bottom: calc(((#{$newToolbarSize} + 30px) * 2) * -1);
-
-        .toolbox-content {
-            margin-bottom: 46px;
-        }
-    }
-
     &.visible {
         bottom: 0;
     }
@@ -58,6 +50,21 @@
     z-index: $toolbarZ;
     pointer-events: none;
 
+    .button-group-center,
+    .button-group-left,
+    .button-group-right {
+        display: flex;
+        width: 33%;
+    }
+
+    .button-group-center {
+        justify-content: center;
+    }
+
+    .button-group-right {
+        justify-content: flex-end;
+    }
+
     .toolbox-button-wth-dialog {
         display: inline-block;
     }
@@ -97,6 +104,16 @@
     padding-bottom: env(safe-area-inset-bottom, 0);
 }
 
+.beta-tag {
+    background: #36383C;
+    border-radius: 3px;
+    color: #fff;
+    font-size: 12px;
+    margin-left: 8px;
+    padding: 0 4px;
+    text-transform: uppercase;
+}
+
 .overflow-menu-hr {
     border-top: 1px solid #4C4D50;
     border-bottom: 0;
@@ -167,7 +184,7 @@ div.hangup-menu-button {
         background: none;
 
         &:hover {
-            background: rgba(255, 255, 255, 0.2);
+            background: $newToolbarButtonHoverColor;
         }
     }
 

css/_transcription-subtitles.scss

@@ -13,7 +13,7 @@
     1px 0px 1px rgba(0,0,0,0.3),
     0px 0px 1px rgba(0,0,0,0.3);
     transform: translateX(-50%);
-    z-index: 7;
+    z-index: $subtitlesZ;
 
     &.lifted {
         // Lift subtitle above toolbar+dominant speaker box.

css/_utils.scss

@@ -3,7 +3,7 @@
 }
 
 .hidden {
-    display: none;
+  display: none;
 }
 
 /**
@@ -25,34 +25,19 @@
 }
 
 /**
- * resets default button styles,
- * mostly intended to be used on interactive elements that
- * differ from their default styles (e.g. <a>) or have custom styles
+ * Shows an inline element.
  */
-.invisible-button {
-    background: none;
-    border: none;
-    color: inherit;
-    cursor: pointer;
-    padding: 0;
+.show-inline {
+    display: inline-block !important;
 }
 
-
 /**
- * style an element the same as an <a>
- * useful on some cases where we visually have a link but it's actually a <button>
+ * Shows a flex element.
  */
-.as-link {
-    @extend .invisible-button;
-
-    display: inline;
-    color: #44A5FF;
-    text-decoration: none;
-    font-weight: bold;
-
-    &:focus,
-    &:hover,
-    &:active {
-        text-decoration: underline;
-    }
+.show-flex {
+    display: -webkit-box !important;
+    display: -moz-box !important;
+    display: -ms-flexbox !important;
+    display: -webkit-flex !important;
+    display: flex !important;
 }

css/_variables.scss

@@ -1,3 +1,5 @@
+@import "themes/light";
+
 /**
  * Style variables
  */
@@ -8,26 +10,83 @@ $baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica
  */
 
 // Video layout.
+$thumbnailVideoMargin: 2px;
 $thumbnailsBorder: 2px;
+$thumbnailVideoBorder: 2px;
+$filmstripToggleButtonWidth: 17px;
+
+
+/**
+ * Color variables.
+ */
+$defaultColor: #F1F1F1;
+$defaultSideBarFontColor: #44A5FF;
+$defaultSemiDarkColor: #ACACAC;
+$defaultDarkColor: #2b3d5c;
+$defaultWarningColor: rgb(215, 121, 118);
+$participantsPaneBgColor: #141414;
 
 /**
  * Toolbar
  */
 $newToolbarBackgroundColor: #131519;
+$newToolbarButtonHoverColor: rgba(255, 255, 255, 0.2);
+$newToolbarButtonToggleColor: rgba(255, 255, 255, 0.15);
+$menuBG:#242528;
+$newToolbarFontSize: 24px;
+$newToolbarHangupFontSize: 32px;
 $newToolbarSize: 48px;
 $newToolbarSizeMobile: 60px;
 $newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px);
+$toolbarTitleFontSize: 19px;
+$overflowMenuItemColor: #fff;
+
+
+/**
+ * Video layout
+ */
+$participantNameColor: #fff;
+$audioLevelBg: #44A5FF;
+$audioLevelShadow: rgba(9, 36, 77, 0.9);
+$videoStateIndicatorColor: $defaultColor;
+$videoStateIndicatorBackground: $toolbarBackground;
+$videoStateIndicatorSize: 40px;
+
+/**
+ * Feedback Modal
+ */
+$feedbackContentBg: #fff;
+$feedbackInputBg: #fff;
+$feedbackTextColor: #000;
+$feedbackInputTextColor: #333;
+$feedbackInputPlaceholderColor: #777;
+
+/**
+ * Modals
+ */
+$modalButtonFontSize: 14px;
+$modalMockAKInputBackground: #fafbfc;
+$modalMockAKInputBorder: 1px solid #f4f5f7;
+$modalTextColor: #333;
 
 /**
  * Chat
  */
+$chatActionsSeparatorColor: rgb(173, 105, 112);
 $chatBackgroundColor: #131519;
+$chatInputSeparatorColor: #A4B8D1;
+$chatLobbyActionsSeparatorColor: #6A50D3;
+$chatLocalMessageBackgroundColor: #484A4F;
+$chatPrivateMessageBackgroundColor: rgb(153, 69, 77);
+$chatRemoteMessageBackgroundColor:  #242528;
 $sidebarWidth: 315px;
 
 /**
  * Misc.
  */
 $borderRadius: 4px;
+$happySoftwareBackground: transparent;
+$desktopAppDragBarHeight: 25px;
 $scrollHeight: 7px;
 
 /**
@@ -37,11 +96,38 @@ $zindex0: 0;
 $zindex1: 1;
 $zindex2: 2;
 $zindex3: 3;
+$subtitlesZ: 7;
+$popoverZ: 8;
+$reloadZ: 20;
+$poweredByZ: 100;
+$ringingZ: 300;
+$sideToolbarContainerZ: 300;
 $toolbarZ: 250;
+$drawerZ: 351;
+$dropdownZ: 901;
+$overlayZ: 1016;
 // Place filmstrip videos over toolbar in order
 // to make connection info visible.
 $filmstripVideosZ: $toolbarZ + 1;
 
+
+/**
+ * Font Colors
+ */
+$defaultFontColor: #777;
+$defaultLightFontColor: #F1F1F1;
+$defaultDarkFontColor: #000;
+
+/**
+ * Forms
+ */
+//inputs
+$inputControlEmColor: #f29424;
+//buttons
+$linkFontColor: #489afe;
+$linkHoverFontColor: #287ade;
+$formPadding: 16px;
+
 /**
  * Unsupported browser
  */
@@ -75,7 +161,7 @@ $welcomePageHeaderBackground: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0,
 $welcomePageHeaderBackgroundPosition: center;
 $welcomePageHeaderBackgroundRepeat: none;
 $welcomePageHeaderBackgroundSize: cover;
-$welcomePageHeaderPaddingBottom: 15px;
+$welcomePageHeaderPaddingBottom: 0px;
 $welcomePageHeaderTitleMaxWidth: initial;
 $welcomePageHeaderTextAlign: center;
 
@@ -115,6 +201,11 @@ $deepLinkingDialInConferenceIdPadding: inherit;
 $deepLinkingDialInConferenceIdBackgroundColor: inherit;
 $deepLinkingDialInConferenceIdBorderRadius: inherit;
 
+$deepLinkingDialInConferenceNameFontSize: inherit;
+$deepLinkingDialInConferenceNameLineHeight: inherit;
+$deepLinkingDialInConferenceNameMarginBottom: none;
+$deepLinkingDialInConferenceNameFontWeight: inherit;
+
 $deepLinkingDialInConferenceDescriptionFontSize: 0.8em;
 $deepLinkingDialInConferenceDescriptionLineHeight: inherit;
 $deepLinkingDialInConferenceDescriptionMarginBottom: none;

css/_video-preview.scss

@@ -0,0 +1,87 @@
+.video-preview {
+    background: none;
+    display: inline-block;
+
+    &-container {
+        max-height: 344px;
+        background: $menuBG;
+        border-radius: 3px;
+        overflow: auto;
+        padding: 8px;
+        margin-bottom: 8px;
+    }
+
+    &-entry {
+        cursor: pointer;
+        height: 168px;
+        margin-bottom: 8px;
+        position: relative;
+        width: 284px;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        &--selected {
+            border: 3px solid #31B76A;
+            border-radius: 3px;
+            cursor: default;
+            height: 162px;
+            width: 278px;
+        }
+    }
+
+    &-video {
+        border-radius: 3px;
+        height: 100%;
+        object-fit: cover;
+        width: 100%;
+    }
+
+    &-overlay {
+        background: rgba(42, 58, 75, 0.6);
+        height: 100%;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+    }
+
+    &-error {
+        align-items: center;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        position: absolute;
+        width: 100%;
+    }
+
+    &-label {
+        bottom: 8px;
+        color: #fff;
+        position: absolute;
+        width: 100%;
+        z-index: 2;
+
+        &-container {
+            margin: 0 16px;
+        }
+
+        &-text {
+            background-color: #131519;
+            border-radius: 3px;
+            padding: 2px 8px;
+            font-size: 13px;
+            line-height: 20px;
+            margin: 0 auto;
+            max-width: calc(100% - 16px);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            width: fit-content;
+            white-space: nowrap;
+        }
+    }
+    // Override @atlaskit/InlineDialog container which is made with styled components
+    & > div:nth-child(2) {
+        padding: 0;
+    }
+}

css/_videolayout_default.scss

@@ -76,42 +76,9 @@
     }
 }
 
-.animatedFadeIn {
-    opacity: 0;
-    animation: fadeInAnimation 0.3s ease forwards;
-}
-
-@keyframes fadeInAnimation {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-.animatedFadeOut {
-    opacity: 1;
-    animation: fadeOutAnimation 0.3s ease forwards;
-}
-
-@keyframes fadeOutAnimation {
-    from {
-        opacity: 1;
-    }
-
-    to {
-        opacity: 0;
-    }
-}
-
 #largeVideoContainer {
     height: 100%;
     width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    margin: 0 !important;
 }
 
 #largeVideoWrapper {
@@ -189,7 +156,7 @@
         opacity: 0;
         display: inline-block;
         @include circle(5px);
-        background: rgba(9, 36, 77, 0.9);
+        background: $audioLevelShadow;
         margin: 1px 0 1px 0;
         transition: opacity .25s ease-in-out;
         -moz-transition: opacity .25s ease-in-out;
@@ -205,10 +172,27 @@
         border-radius: 50%;
         -webkit-filter: blur(0.5px);
         filter: blur(0.5px);
-        background: #44A5FF;
+        background: $audioLevelBg;
     }
 }
 
+#reloadPresentation {
+    display: none;
+    position: absolute;
+    color: #FFFFFF;
+    top: 0;
+    right:0;
+    padding: 10px 10px;
+    font-size: 11pt;
+    cursor: pointer;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    background-clip: padding-box;
+    -webkit-border-radius: 5px;
+    -webkit-background-clip: padding-box;
+    z-index: $reloadZ; /*The reload button should appear on top of the header!*/
+}
+
 #dominantSpeaker {
     visibility: hidden;
     width: 300px;
@@ -219,6 +203,10 @@
     transform: translateY(-50%);
 }
 
+#mixedstream {
+    display:none !important;
+}
+
 #dominantSpeakerAvatarContainer,
 .dynamic-shadow {
     width: 200px;
@@ -288,6 +276,11 @@
     object-fit: cover;
 }
 
+.videoMessageFilter {
+    -webkit-filter: grayscale(.5) opacity(0.8);
+    filter: grayscale(.5) opacity(0.8);
+}
+
 #remotePresenceMessage,
 #remoteConnectionMessage {
     position: absolute;
@@ -339,7 +332,7 @@
 }
 
 .presence-label {
-    color: #fff;
+    color: $participantNameColor;
     font-size: 12px;
     font-weight: 100;
     left: 0;

css/_welcome_page.scss

@@ -20,6 +20,7 @@ body.welcome-page {
         background-size: $welcomePageHeaderBackgroundSize;
         padding-bottom: $welcomePageHeaderPaddingBottom;
         background-color: #131519;
+        height: 400px;
         overflow: hidden;
         position: relative;
 
@@ -61,58 +62,26 @@ body.welcome-page {
 
         }
 
-        .insecure-room-name-warning {
-            align-items: center;
-            color: rgb(215, 121, 118);
-            font-weight: 600;
-            display: flex;
-            flex-direction: row;
-            margin-top: 15px;
-            max-width: 480px;
-            width: $welcomePageEnterRoomWidth;
-
-            .jitsi-icon {
-                margin-right: 15px;
-
-                svg {
-                    fill: rgb(215, 121, 118);
-
-                    & > *:first-child {
-                        fill: none !important;
-                    }
-                }
-            }
-        }
-
-        ::placeholder {
-            color: #253858;
-        }
-
         #enter_room {
             display: $welcomePageEnterRoomDisplay;
             align-items: center;
             max-width: 480px;
             width: $welcomePageEnterRoomWidth;
             z-index: $zindex2;
-            height: fit-content;
-
-            .join-meeting-container {
-                margin: $welcomePageEnterRoomMargin;
-                padding: $welcomePageEnterRoomPadding;
-                border-radius: 4px;
-                background-color: #fff;
-                display: flex;
-                width: 100%;
-                text-align: left;
-                color: #253858;
-            }
+            background-color: #fff;
+            padding: $welcomePageEnterRoomPadding;
+            border-radius: 4px;
+            margin: $welcomePageEnterRoomMargin;
 
             .enter-room-input-container {
+                text-align: left;
+                color: #253858;
                 flex-grow: 1;
+                height: fit-content;
                 padding-right: 4px;
+                position: relative;
 
                 .enter-room-input {
-                    border-radius: 4px;
                     border: 0;
                     background: #fff;
                     display: inline-block;
@@ -121,17 +90,48 @@ body.welcome-page {
                     font-size: 14px;
                     padding-left: 10px;
 
-                    &.focus-visible {
+                    &:focus {
                         outline: auto 2px #005fcc;
                     }
                 }
+
+                .insecure-room-name-warning {
+                    align-items: center;
+                    color: $defaultWarningColor;
+                    display: flex;
+                    flex-direction: row;
+                    margin-top: 15px;
+
+                    .jitsi-icon {
+                        margin-right: 15px;
+
+                        svg {
+                            fill: $defaultWarningColor
+                        }
+                    }
+                }
+
+                ::placeholder {
+                    color: #253858;
+                }
+            }
+
+            .warning-without-link {
+                position: absolute;
+                top: 44px;
+                left: -10px;
+            }
+
+            .warning-with-link {
+                position: absolute;
+                top: 84px;
             }
 
         }
 
         #moderated-meetings {
             max-width: calc(100% - 40px);
-            padding: 16px 0 0;
+            padding: 16px 0 39px 0;
             width: $welcomePageEnterRoomWidth;
             text-align: center;
 
@@ -167,7 +167,7 @@ body.welcome-page {
             margin: 4px;
             display: $welcomePageTabButtonsDisplay;
 
-            [role="tab"] {
+            .tab {
                 background-color: #c7ddff;
                 border-radius: 7px;
                 cursor: pointer;
@@ -176,10 +176,8 @@ body.welcome-page {
                 margin: 2px;
                 padding: 7px 0;
                 text-align: center;
-                color: inherit;
-                border: 0;
 
-                &[aria-selected="true"] {
+                &.selected {
                     background-color: #FFF;
                 }
             }

css/components/_button-control.scss

@@ -0,0 +1,101 @@
+.button-control {
+    box-sizing: border-box;
+    display: inline-block;
+    border: 1px solid $buttonBorder;
+    vertical-align: baseline;
+    height: 30px;
+    min-width: 60px;
+    padding: 4px 10px;
+    margin: 0;
+    line-height: 1.5em;
+    outline: none;
+    background-color: transparent;
+    float: right;
+    font-size: 14px;
+    margin-left: 10px;
+    color: $buttonColor;
+    font-weight: $buttonFontWeight;
+    @include transition(background-color .1s ease-out);
+
+    &[disabled] {
+        color: #666;
+        cursor: default;
+    }
+
+    &_full-width {
+        margin: 0;
+        width: 100%;
+    }
+
+    &:hover {
+        border: 1px solid $buttonHoverBorder;
+        background-color: $buttonHoverBackground;
+        @include transition(background-color .1s ease-in);
+    }
+
+    &:active {
+        @include box-shadow(0, 0, 1px, $buttonShadowColor, true);
+    }
+
+    &_light {
+        color: $defaultDarkColor;
+        background-color: $buttonLightBackground;
+        border: 1px solid $buttonLightBorder;
+
+        &:hover {
+            border: 1px solid $buttonLightHoverBorder;
+            background-color: $buttonLightHoverBackground;
+        }
+    }
+
+    &_link {
+        color: $buttonLinkColor;
+        background-color: $buttonLinkBackground;
+
+        &:hover {
+            background-color: $buttonLinkBackground;
+        }
+    }
+
+    &_overlay {
+        color: $primaryButtonColor;
+        background-color: $overlayButtonBg;
+        border-radius: 2px;
+        border: none;
+
+        &:hover {
+            background-color: $primaryButtonBackground;
+            border: none;
+        }
+    }
+
+    &_primary {
+        background-color: $primaryButtonBackground;
+        border: 1px solid $primaryButtonBackground;
+        color: $primaryButtonColor !important;
+        font-weight: $primaryButtonFontWeight;
+
+        &:hover {
+            border: 1px solid $primaryButtonHoverBackground;
+            background-color: $primaryButtonHoverBackground;
+        }
+
+        &[disabled] {
+            color: $primaryButtonColor;
+        }
+    }
+
+    &_close {
+        color: $defaultFontColor;
+    }
+    &_submit {
+        color: $linkFontColor;
+        &:hover {
+            color: $linkHoverFontColor;
+        }
+    }
+
+    &_center {
+        float: none !important;
+    }
+}

css/components/_form-control.scss

@@ -0,0 +1,49 @@
+.form-control {
+    padding: $formPadding 0;
+
+    &:first-child {
+        padding-top: 0;
+    }
+
+    &:last-child {
+        padding-bottom: 0;
+    }
+
+    &__text {
+        margin: 8px 0;
+        font-size: 1em
+    }
+
+    &__label {
+        font-size: 1em;
+        font-weight: $labelFontWeight;
+    }
+
+    &__em {
+        color: $inputControlEmColor;
+    }
+
+    &__container {
+        position: relative;
+        width: 100%;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        @include flex();
+
+        .button-control {
+            margin: 1px 0 1px 10px;
+        }
+    }
+
+    &__right {
+        position: absolute;
+        right: 0;
+    }
+}
+
+/**
+ * Set a specific color for read only style.
+ */
+input:read-only {
+    color: $readOnlyInputColor;
+}

css/components/_input-control.scss

@@ -0,0 +1,29 @@
+.input-control {
+    @include transition(all .2s ease-in);
+    display: inline-block;
+    width: 100%;
+    padding: 5px 7px;
+    border-radius: $borderRadius;
+    line-height: 32px;
+    height: 32px;
+    text-align: left;
+    margin-bottom: 8px;
+
+    &:last-child {
+        margin-bottom: inherit;
+    }
+
+    &::selection {
+        background-color: $defaultDarkSelectionColor;
+    }
+
+
+    &.error {
+        color: $errorColor;
+        border-color: $errorColor;
+    }
+}
+
+@include placeholder {
+    color: $placeHolderColor;
+}

css/components/_input-slider.scss

@@ -19,7 +19,7 @@ input[type=range]:focus {
  * Include the mixin for a range input style.
  */
 @include slider {
-    background: #474747;
+    background: $sliderTrackBackground;
     border: none;
     border-radius: 3px;
     cursor: pointer;
@@ -33,9 +33,9 @@ input[type=range]:focus {
 @include slider-thumb {
     -webkit-appearance: none;
     background: white;
-    border: 1px solid #3572b0;
+    border: 1px solid $sliderThumbBackground;
     border-radius: 50%;
-    box-shadow: 0px 0px 1px #3572b0;
+    box-shadow: 0px 0px 1px $sliderThumbBackground;
     cursor: pointer;
     height: 14px;
     margin-top: -4px;

css/components/_link.scss

@@ -0,0 +1,20 @@
+.link {
+    cursor: pointer;
+    color: $linkFontColor;
+    @include transition(color .1s ease-out);
+
+    &:hover {
+        color: $linkHoverFontColor;
+        text-decoration: underline;
+        @include transition(color .1s ease-in);
+    }
+}
+
+/**
+ * Helper links are links that are meant to open a documentation page or more
+ * detailed info.
+ */
+.helper-link {
+    @extend .link;
+    font-size: 12px;
+}

css/deep-linking/_mobile.scss

@@ -67,13 +67,6 @@
             font-size: 1em;
         }
 
-
-        .dial-in-conference-id {
-            text-align: center;
-            min-width: 200px;
-            margin-top: 40px;
-        }
-
         .dial-in-conference-id {
             margin: $deepLinkingDialInConferenceIdMargin;
             padding: $deepLinkingDialInConferenceIdPadding;
@@ -81,12 +74,24 @@
             border-radius: $deepLinkingDialInConferenceIdBorderRadius;
         }
 
+        .dial-in-conference-name {
+            font-size: $deepLinkingDialInConferenceNameFontSize;
+            line-height: $deepLinkingDialInConferenceNameLineHeight;
+            margin-bottom: $deepLinkingDialInConferenceNameMarginBottom;
+            font-weight: $deepLinkingDialInConferenceNameFontWeight;
+        }
+
         .dial-in-conference-description {
             font-size: $deepLinkingDialInConferenceDescriptionFontSize;
             line-height: $deepLinkingDialInConferenceDescriptionLineHeight;
             margin-bottom: $deepLinkingDialInConferenceDescriptionMarginBottom;
         }
 
+        .dial-in-conference-pin {
+            font-size: $deepLinkingDialInConferencePinFontSize;
+            line-height: $deepLinkingDialInConferencePinLineHeight;
+        }
+
         .toll-free-list {
             min-width: 80px;
         }

css/deep-linking/_no-mobile-app.scss

@@ -5,7 +5,7 @@
     width: auto;
 
     &__title {
-        border-bottom: 1px solid lighten(#FFFFFF, 10%);
+        border-bottom: 1px solid $inlayBorderColor;
         color: $unsupportedBrowserTitleColor;
         font-weight: 400;
         letter-spacing: 0.5px;

css/filmstrip/_small_video.scss

@@ -2,9 +2,9 @@
     display: inline-block;
     position: relative;
     background-size: contain;
-    border: 2px solid transparent;
+    border: $thumbnailVideoBorder solid transparent;
     border-radius: $borderRadius;
-    margin: 0 2px;
+    margin: 0 $thumbnailVideoMargin;
 
     &:hover {
         cursor: hand;

css/main.scss

@@ -25,6 +25,7 @@ $flagsImagePath: "../images/";
 
 /* Modules BEGIN */
 @import 'reset';
+@import 'atlaskit_overrides';
 @import 'base';
 @import 'utils';
 @import 'overlay/overlay';
@@ -32,7 +33,10 @@ $flagsImagePath: "../images/";
 @import 'reload_overlay/reload_overlay';
 @import 'mini_toolbox';
 @import 'modals/desktop-picker/desktop-picker';
+@import 'modals/device-selection/device-selection';
 @import 'modals/dialog';
+@import 'modals/embed-meeting/embed-meeting';
+@import 'modals/feedback/feedback';
 @import 'modals/invite/info';
 @import 'modals/screen-share/share-audio';
 @import 'modals/screen-share/share-screen-warning';
@@ -49,6 +53,10 @@ $flagsImagePath: "../images/";
 @import 'welcome_page_settings_toolbar';
 @import 'toolbars';
 @import 'redirect_page';
+@import 'components/form-control';
+@import 'components/link';
+@import 'components/button-control';
+@import 'components/input-control';
 @import 'components/input-slider';
 @import '404';
 @import 'policy';
@@ -60,6 +68,7 @@ $flagsImagePath: "../images/";
 @import 'filmstrip/vertical_filmstrip';
 @import 'filmstrip/vertical_filmstrip_overrides';
 @import 'unsupported-browser/main';
+@import 'modals/invite/add-people';
 @import 'deep-linking/main';
 @import 'transcription-subtitles';
 @import '_meetings_list.scss';
@@ -70,7 +79,10 @@ $flagsImagePath: "../images/";
 @import 'chrome-extension-banner';
 @import 'settings-button';
 @import 'meter';
+@import 'audio-preview';
+@import 'video-preview';
 @import 'premeeting/main';
+@import 'country-picker';
 @import 'modals/invite/invite_more';
 @import 'modals/security/security';
 @import 'e2ee';
@@ -80,5 +92,6 @@ $flagsImagePath: "../images/";
 @import 'reactions-menu';
 @import 'plan-limit';
 @import 'polls';
+@import 'notifications';
 
 /* Modules END */

css/modals/_dialog.scss

@@ -2,8 +2,8 @@
     margin-top: 5px !important;
 
     .input-control {
-        background: #fafbfc;
-        border: 1px solid #f4f5f7;
+        background: $modalMockAKInputBackground;
+        border: $modalMockAKInputBorder;
         color: inherit;
     }
 
@@ -12,6 +12,24 @@
     }
 }
 
+/**
+ * Styling inline dialog errors.
+ */
+.inline-dialog-error {
+    margin-top: 16px;
+
+    &-text {
+        color: $dialogErrorText;
+        margin-bottom: 8px;
+        text-align: center;
+    }
+
+    &-button {
+        display: block;
+        margin: 16px auto 0 auto;
+    }
+}
+
 /**
  * Styling shared video dialog errors.
  */

css/modals/desktop-picker/_desktop-picker.scss

@@ -63,8 +63,3 @@
 .desktop-source-preview-image-container {
     padding: 10px;
 }
-
-.desktop-picker-tabs-container {
-    width: 65%;
-    margin-top: 3px;
-}

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

@@ -0,0 +1,148 @@
+.device-selection {
+    .device-selectors {
+        font-size: 14px;
+
+        > div {
+            display: block;
+            margin-bottom: 4px;
+        }
+
+        .device-selector-icon {
+            align-self: center;
+            color: inherit;
+            font-size: 20px;
+            margin-left: 3px;
+        }
+
+        .device-selector-label {
+            margin-bottom: 1px;
+        }
+
+        /* device-selector-trigger stylings attempt to mimic AtlasKit button */
+        .device-selector-trigger {
+            background-color: #0E1624;
+            border: 1px solid #455166;
+            border-radius: 5px;
+            display: flex;
+            height: 2.3em;
+            justify-content: space-between;
+            line-height: 2.3em;
+            overflow: hidden;
+            padding: 0 8px;
+        }
+        .device-selector-trigger-disabled {
+            .device-selector-trigger {
+                color: #a5adba;
+                cursor: default;
+            }
+        }
+
+        .device-selector-trigger-text {
+            overflow: hidden;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: 100%;
+        }
+    }
+
+    .device-selection-column {
+        box-sizing: border-box;
+        display: inline-block;
+        vertical-align: top;
+
+        &.column-selectors {
+            margin-left: 15px;
+            width: 45%;
+        }
+
+        &.column-video {
+            width: 50%;
+        }
+    }
+
+    .device-selection-video-container {
+        border-radius: 3px;
+        margin-bottom: 5px;
+
+        .video-input-preview {
+            margin-top: 2px;
+            position: relative;
+
+            > video {
+                border-radius: 3px;
+            }
+
+            .video-input-preview-error {
+                color: $participantNameColor;
+                display: none;
+                left: 0;
+                position: absolute;
+                right: 0;
+                text-align: center;
+                top: 50%;
+            }
+
+            &.video-preview-has-error {
+                background: black;
+
+                .video-input-preview-error {
+                    display: block;
+                }
+            }
+
+            .video-input-preview-display {
+                height: auto;
+                overflow: hidden;
+                width: 100%;
+            }
+        }
+    }
+
+    .audio-output-preview {
+        font-size: 14px;
+
+        a {
+            color: #6FB1EA;
+            cursor: pointer;
+            text-decoration: none;
+        }
+
+        a:hover {
+            color: #B3D4FF;
+        }
+    }
+
+    .audio-input-preview {
+        background: #1B2638;
+        border-radius: 5px;
+        height: 8px;
+
+        .audio-input-preview-level {
+            background: #75B1FF;
+            border-radius: 5px;
+            height: 100%;
+            -webkit-transition: width .1s ease-in-out;
+            -moz-transition: width .1s ease-in-out;
+            -o-transition: width .1s ease-in-out;
+            transition: width .1s ease-in-out;
+        }
+    }
+}
+
+.device-selection.video-hidden {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    .column-selectors {
+        width: 100%;
+        margin-left: 0;
+    }
+
+    .column-video {
+        order: 1;
+        width: 100%;
+        margin-top: 8px;
+    }
+}

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

@@ -0,0 +1,42 @@
+.embed-meeting {
+    &-dialog {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &-copy {
+        color: white;
+        font-size: 15px;
+        margin-left: auto;
+        margin-top: 16px;
+    }
+
+    &-code {
+        background: transparent;
+        border: 1px solid #A4B8D1;
+        color: white;
+        font-size: 15px;
+        height: 165px;
+        line-height: 24px;
+        padding: 8px;
+        width: 100%;
+        resize: vertical;
+    }
+
+    &-trigger {
+        display: flex;
+        align-items: center;
+        padding: 8px 8px 8px 16px;
+        margin-top: 24px;
+        width: calc(100% - 24px);
+        height: 24px;
+        background: #2A3A4B;
+        border: 1px solid #5E6D7A;
+        border-radius: 4px;
+        cursor: pointer;
+
+        .jitsi-icon {
+            margin-right: 20px;
+        }
+    }
+}

css/modals/feedback/_feedback.scss

@@ -0,0 +1,104 @@
+@-webkit-keyframes shake-rotate {
+    0% {
+        -webkit-transform:scale(1) rotate(0deg);
+        transform:scale(1) rotate(0deg)
+    }
+
+    50% {
+        -webkit-transform:scale(.8) rotate(-5deg);
+        transform:scale(.8) rotate(-5deg)
+    }
+
+    to {
+        -webkit-transform:scale(1) rotate(3deg);
+        transform:scale(1) rotate(3deg)
+    }
+}
+
+@keyframes shake-rotate {
+    0% {
+        -webkit-transform:scale(1) rotate(0deg);
+        transform:scale(1) rotate(0deg)
+    }
+
+    50% {
+        -webkit-transform:scale(.8) rotate(-5deg);
+        transform:scale(.8) rotate(-5deg)
+    }
+
+    to {
+        -webkit-transform:scale(1) rotate(3deg);
+        transform:scale(1) rotate(3deg)
+    }
+}
+
+.shake-rotate {
+    display: inline-block;
+
+    -webkit-animation-duration: .4s;
+    animation-duration: .4s;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+    -webkit-animation-name: shake-rotate;
+    animation-name: shake-rotate;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out
+}
+
+.feedback-dialog {
+    margin-bottom: 5px;
+
+    .details {
+        textarea {
+            min-height: 100px;
+        }
+    }
+
+    .input-control {
+        background-color: $feedbackInputBg;
+        color: $feedbackInputTextColor;
+
+        &::-webkit-input-placeholder {
+            color: $feedbackInputPlaceholderColor;
+        }
+        &::-moz-placeholder {  /* Firefox 19+ */
+            color: $feedbackInputPlaceholderColor;
+        }
+        &:-ms-input-placeholder {
+            color: $feedbackInputPlaceholderColor;
+        }
+    }
+
+    .rating {
+        line-height: 1.2;
+        margin-top: 10px;
+        text-align: center;
+
+        .star-label {
+            font-size: 14px;
+            height: 16px;
+        }
+
+        .star-btn {
+            color: inherit;
+            cursor: pointer;
+            display: inline-block;
+            font-size: 34px;
+            outline: none;
+            position: relative;
+            text-decoration: none;
+            @include transition(all .2s ease);
+
+            &.active,
+            &:hover,
+            &.starHover {
+                color: #36B37E;
+            };
+
+        }
+        .star-btn:focus,
+        .star-btn:active {
+            outline: 1px solid #B8C7E0;
+        }
+    }
+}

css/modals/invite/_add-people.scss

@@ -41,3 +41,10 @@
         }
     }
 }
+
+/**
+ * Styles errors in the MultiSelectAutocomplete.
+ */
+.autocomplete-error {
+    min-width: 260px;
+}

css/modals/invite/_info.scss

@@ -50,21 +50,19 @@
 }
 
 .dial-in-numbers-list {
-    max-width: 334px;
-    width: 100%;
     margin-top: 20px;
     font-size: 12px;
     line-height: 24px;
     border-collapse: collapse;
 
-    * {
-        user-select: text;
-    }
-
     thead {
         text-align: left;
     }
 
+    tr {
+        border-bottom: 1px solid #d1dbe8;
+    }
+
     .flag-cell {
         vertical-align: top;
         width: 30px;
@@ -93,7 +91,6 @@
         font-weight: bold;
         list-style: none;
         vertical-align: top;
-        text-align: right;
     }
 
     li.toll-free:empty:before {
@@ -122,6 +119,11 @@
         margin-top: 40px;
     }
 
+    .dial-in-conference-name,
+    .dial-in-conference-pin {
+        font-size: 18px;
+    }
+
     .dial-in-conference-description {
         margin: 12px;
     }

css/modals/invite/_invite_more.scss

@@ -1,4 +1,57 @@
 .invite-more {
+    &-container {
+        margin-bottom: 8px;
+        transition: margin-bottom 0.3s;
+
+        &.elevated {
+            margin-bottom: 36px;
+        }
+    }
+
+    &-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 16px;
+        background: rgba(0, 0, 0, 0.7);
+        border-radius: 8px;
+        color: #fff;
+        font-size: 14px;
+        line-height: 24px;
+        font-weight: 600;
+    }
+
+    &-header {
+        max-width: 100%;
+        margin-bottom: 16px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    &-button {
+        display: flex;
+        max-width: 100%;
+        height: 40px;
+        box-sizing: border-box;
+        padding: 8px 16px;
+        background: #0376DA;
+        border-radius: 3px;
+        cursor: pointer;
+
+        @media (hover: hover) and (pointer: fine) {
+            &:hover {
+                background: #278ADF;
+            }
+        }
+
+        &-text {
+            margin-left: 8px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+    }
     &-dialog {
         color: #fff;
         font-size: 15px;
@@ -12,6 +65,59 @@
             background: #5E6D7A;
         }
 
+        &.email-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 8px 8px 16px;
+            margin-top: 24px;
+            width: calc(100% - 26px);
+            height: 22px;
+
+            background: #2A3A4B;
+            border: 1px solid #5E6D7A;
+            border-radius: 3px;
+            cursor: pointer;
+
+            &.active {
+                border-radius: 3px 3px 0 0;
+            }
+        }
+
+        &.invite-buttons {
+            width: 100%;
+            text-align: right;
+            margin-top: 8px;
+
+            & > a {
+                display: inline-block;
+                height: 24px;
+                min-width: 48px;
+                border-radius: 3px;
+                text-align: center;
+                text-decoration: none;
+                cursor: pointer;
+            }
+
+            &-cancel {
+                margin-right: 16px;
+                padding: 7px 15px;
+                background: #2A3A4B;
+                border: 1px solid #5E6D7A;
+            }
+
+            &-add {
+                padding: 8px 16px;
+                background: #0376DA;
+            }
+
+            &.disabled {
+                & > a {
+                    pointer-events: none;
+                }
+            }
+        }
+
         &.stream {
             display: flex;
             justify-content: space-between;
@@ -52,3 +158,14 @@
         }
     }
 }
+
+.mobile-browser {
+    .invite-more-content {
+        font-size: 16px;
+    }
+
+    .invite-more-button {
+        height: 48px;
+        padding: 12px 16px;
+    }
+}

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

@@ -1,3 +1,7 @@
+.share-audio-dialog-container {
+    max-height: none;
+}
+
 .share-audio-dialog {
     .share-audio-animation {
         width: 100%;

css/modals/security/_security.scss

@@ -21,7 +21,7 @@
 
                 &-actions {
                     margin-top: 10px;
-                    button {
+                    a {
                         cursor: pointer;
                         text-decoration: none;
                         font-size: 14px;

css/overlay/_overlay.scss

@@ -6,12 +6,12 @@
         width: 100%;
         height: 100%;
         position: fixed;
-        z-index: 1016;
-        background: #474747;
+        z-index: $overlayZ;
+        background: $defaultBackground;
     }
 
     &__container-light {
-        @include transparentBg(#474747, 0.7);
+        @include transparentBg($defaultBackground, 0.7);
     }
 
     &__content {

css/premeeting/_lobby.scss

@@ -208,26 +208,3 @@
 .lobby-button-margin {
     margin-bottom: 16px;
 }
-
-.lobby-prejoin-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%;
-}
-
-.lobby-prejoin-input {
-    margin-bottom: 16px;
-    width: 100%;
-
-    & input {
-        text-align: center;
-    }
-}

css/premeeting/_main.scss

@@ -1,3 +1,4 @@
 @import 'lobby';
 @import 'premeeting-screens';
+@import 'prejoin';
 @import 'prejoin-third-party';

css/premeeting/_prejoin-third-party.scss

@@ -3,7 +3,6 @@ $sidePanelWidth: 300px;
 .prejoin-third-party {
   flex-direction: column-reverse;
   z-index: auto;
-  align-items: center;
 
   .content {
       height: auto;

css/premeeting/_prejoin.scss

@@ -0,0 +1,67 @@
+.prejoin {
+    &-input-area {
+        width: 100%;
+    }
+
+    &-avatar {
+        margin: 8px auto 16px;
+
+        &-name {
+            color: white;
+            font-size: 16px;
+            font-weight: 600;
+            line-height: 26px;
+            margin-bottom: 32px;
+            text-align: center;
+        }
+
+        &-container {
+            align-items: center;
+            display: flex;
+            flex-direction: column;
+        }
+    }
+
+    &-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-container {
+        position: relative;
+        width: 100%;
+
+        /**
+        * Override default InlineDialog behaviour, since it does not play nicely with relative widths
+        */
+        & > div:nth-child(2) {
+            background: #E0E0E0;
+            padding: 0;
+            position: absolute !important;
+            width: 100%;
+        }
+    }
+}
+
+.prejoin-input {
+    margin-bottom: 16px;
+
+    & input {
+        text-align: center;
+    }
+}

css/premeeting/_premeeting-screens.scss

@@ -87,7 +87,7 @@
         .toolbox-content-wrapper,
         .toolbox-content-items {
             box-sizing: border-box;
-            width: auto;
+            width: 100%;
         }
     }
 

css/reload_overlay/_reload_overlay.scss

@@ -19,7 +19,7 @@
     width: 180px;
 
     .progress-indicator-fill {
-        background: #0074E0;
+        background: $reloadProgressBarBg;
         height: 100%;
         transition: width .5s;
     }

css/ringing/_ringing.scss

@@ -5,11 +5,11 @@
     width: 100%;
     height: 100%;
     position: fixed;
-    z-index: 300;
+    z-index: $ringingZ;
     @include transparentBg(#283447, 0.95);
 
     &.solidBG {
-        background: #040404;
+        background: $defaultBackground;
     }
 
     &__content {

css/themes/_light.scss

@@ -0,0 +1,77 @@
+/**
+ * Base
+ */
+$baseLight: #FFFFFF;
+
+/**
+* Controls
+*/
+$sliderTrackBackground: #474747;
+$sliderThumbBackground: #3572b0;
+
+/**
+* Buttons
+*/
+$buttonBackground: #44A5FF;
+$buttonHoverBackground: #2c4062;
+$buttonBorder: transparent;
+$buttonHoverBorder: transparent;
+$buttonColor: #eceef1;
+
+$buttonLightBackground: #f5f5f5;
+$buttonLightHoverBackground: #e9e9e9;
+$buttonLightBorder: #ccc;
+$buttonLightHoverBorder: #999;
+
+$buttonLinkBackground: transparent;
+$buttonLinkColor: #0090e8;
+
+$primaryButtonBackground: #3572b0;
+$primaryButtonHoverBackground: #2a67a5;
+$primaryButtonColor: $baseLight;
+$primaryButtonFontWeight: 400;
+
+$buttonShadowColor: #192d4f;
+
+$overlayButtonBg: #0074E0;
+
+/**
+* Color variables
+**/
+$defaultBackground: #474747;
+$reloadProgressBarBg: #0074E0;
+
+/**
+ * Dialog colors
+ **/
+$dialogErrorText: #344563;
+
+/**
+* Inlay colors
+**/
+$inlayColorBg: lighten($defaultBackground, 20%);
+$inlayBorderColor: lighten($baseLight, 10%);
+
+// Main controls
+$placeHolderColor: #a7a7a7;
+$readOnlyInputColor: #a7a7a7;
+$defaultDarkSelectionColor: #ccc;
+$buttonFontWeight: 400;
+$labelFontWeight: 400;
+$linkFontColor: #3572b0;
+$linkHoverFontColor: darken(#3572b0, 10%);
+$errorColor: #c61600;
+
+
+// Popover colors
+$popoverFontColor: #ffffff !important;
+
+// Toolbar
+$toolbarBackground: rgba(0, 0, 0, 0.5);
+$toolbarBadgeBackground: #165ECC;
+$toolbarBadgeColor: #FFFFFF;
+
+/**
+ * Forms
+ */
+$selectBg: $baseLight;

css/unsupported-browser/_unsupported-desktop-browser.scss

@@ -25,11 +25,11 @@
     }
 
     &__link {
-        color: #489afe;
+        color: $linkFontColor;
         @include transition(color .1s ease-out);
 
         &:hover {
-            color: #287ade;
+            color: $linkHoverFontColor;
             cursor: pointer;
             text-decoration: none;
 

debian/jitsi-meet-web-config.install

@@ -1,6 +1,3 @@
 doc/debian/jitsi-meet/jitsi-meet.example        /usr/share/jitsi-meet-web-config/
 doc/debian/jitsi-meet/jitsi-meet.example-apache /usr/share/jitsi-meet-web-config/
 config.js                                       /usr/share/jitsi-meet-web-config/
-doc/jaas/nginx-jaas.conf                        /usr/share/jitsi-meet-web-config/
-doc/jaas/index-jaas.html                        /usr/share/jitsi-meet-web-config/
-doc/jaas/8x8.vc-config.js                        /usr/share/jitsi-meet-web-config/

debian/jitsi-meet-web.install

@@ -8,9 +8,8 @@ sounds					/usr/share/jitsi-meet/
 fonts					/usr/share/jitsi-meet/
 images					/usr/share/jitsi-meet/
 lang					/usr/share/jitsi-meet/
+connection_optimization	/usr/share/jitsi-meet/
 resources/robots.txt	/usr/share/jitsi-meet/
 resources/*.sh			/usr/share/jitsi-meet/scripts/
 pwa-worker.js			/usr/share/jitsi-meet/
 manifest.json			/usr/share/jitsi-meet/
-doc/jaas/move-to-jaas.sh        /usr/share/jitsi-meet/scripts/
-doc/jaas/update-asap-daily.sh   /usr/share/jitsi-meet/scripts/

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

@@ -78,18 +78,13 @@ Component "conference.jitmeet.example.com" "muc"
     restrict_room_creation = true
     storage = "memory"
     modules_enabled = {
-        "muc_hide_all";
         "muc_meeting_id";
         "muc_domain_mapper";
         "polls";
         --"token_verification";
         "muc_rate_limit";
-        "muc_password_whitelist";
     }
     admins = { "focusUser@auth.jitmeet.example.com" }
-    muc_password_whitelist = {
-        "focusUser@auth.jitmeet.example.com"
-    }
     muc_room_locking = false
     muc_room_default_public_jids = true
 
@@ -97,7 +92,6 @@ Component "breakout.jitmeet.example.com" "muc"
     restrict_room_creation = true
     storage = "memory"
     modules_enabled = {
-        "muc_hide_all";
         "muc_meeting_id";
         "muc_domain_mapper";
         "muc_rate_limit";
@@ -111,7 +105,6 @@ Component "breakout.jitmeet.example.com" "muc"
 Component "internal.auth.jitmeet.example.com" "muc"
     storage = "memory"
     modules_enabled = {
-        "muc_hide_all";
         "ping";
     }
     admins = { "focusUser@auth.jitmeet.example.com", "jvb@auth.jitmeet.example.com" }
@@ -146,7 +139,6 @@ Component "lobby.jitmeet.example.com" "muc"
     muc_room_locking = false
     muc_room_default_public_jids = true
     modules_enabled = {
-        "muc_hide_all";
         "muc_rate_limit";
         "polls";
     }

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

@@ -58,8 +58,6 @@ server {
 
     add_header Strict-Transport-Security "max-age=63072000" always;
     set $prefix "";
-    set $custom_index "";
-    set $config_js_location /etc/jitsi/meet/jitsi-meet.example.com-config.js;
 
     ssl_certificate /etc/jitsi/meet/jitsi-meet.example.com.crt;
     ssl_certificate_key /etc/jitsi/meet/jitsi-meet.example.com.key;
@@ -79,10 +77,8 @@ server {
     gzip_proxied no-cache no-store private expired auth;
     gzip_min_length 512;
 
-    include /etc/jitsi/meet/jaas/*.conf;
-
     location = /config.js {
-        alias $config_js_location;
+        alias /etc/jitsi/meet/jitsi-meet.example.com-config.js;
     }
 
     location = /external_api.js {
@@ -96,13 +92,8 @@ server {
         proxy_set_header Host $http_host;
     }
 
-    location ~ ^/_api/public/(.*)$ {
-        autoindex off;
-        alias /etc/jitsi/meet/public/$1;
-    }
-
     # ensure all static content can always be found first
-    location ~ ^/(libs|css|static|images|fonts|lang|sounds|.well-known)/(.*)$
+    location ~ ^/(libs|css|static|images|fonts|lang|sounds|connection_optimization|.well-known)/(.*)$
     {
         add_header 'Access-Control-Allow-Origin' '*';
         alias /usr/share/jitsi-meet/$1/$2;
@@ -151,12 +142,11 @@ server {
     #}
 
     location ~ ^/([^/?&:'"]+)$ {
-        set $roomname "$1";
         try_files $uri @root_path;
     }
 
     location @root_path {
-        rewrite ^/(.*)$ /$custom_index break;
+        rewrite ^/(.*)$ / break;
     }
 
     location ~ ^/([^/?&:'"]+)/config.js$
@@ -164,14 +154,7 @@ server {
         set $subdomain "$1.";
         set $subdir "$1/";
 
-        alias $config_js_location;
-    }
-
-    # Matches /(TENANT)/pwa-worker.js or /(TENANT)/manifest.json to rewrite to / and look for file
-    location ~ ^/([^/?&:'"]+)/(pwa-worker.js|manifest.json)$ {
-        set $subdomain "$1.";
-        set $subdir "$1/";
-        rewrite ^/([^/?&:'"]+)/(pwa-worker.js|manifest.json)$ /$2;
+        alias /etc/jitsi/meet/jitsi-meet.example.com-config.js;
     }
 
     # BOSH for subdomains

doc/jaas/8x8.vc-config.js

@@ -1,7 +0,0 @@
-</script>
-<script src="https://8x8.vc/<!--# echo var="subdir" default="" -->config.js" onload="{
-config.p2p.disabledCodec='VP9';
-config.videoQuality.disabledCodec='VP9';
-config.e2ee = { externallyManagedKey: true };
-}"/>
-<script>

doc/jaas/README.md

@@ -1,22 +0,0 @@
-## How to switch your deployment to [JaaS](https://jaas.8x8.vc) in one easy step
-
-Note: By default it will have e2ee(end-to-end) encryption enabled that works only on chromium based browsers (Chrome, Edge, ...). If a participant joins from another browser or mobile the e2ee is turned off. 
-
-In order to use your deployment with JaaS you first need to login to your [JaaS Developer console](https://jaas.8x8.vc/#/apikeys) and generate a key pair.
-Use `Add API key` button and then `Generate API key pair`. Make sure you download the generated private key from:
-
-<img src="generated_key_dialog.png" height="250">
-
-Make sure you transfer this downloaded private key to your server. Copy the key id from:
-
-<img src="api_keys_kid.png" height="200">
-
-Now on your server run the helper script passing the private key file and the key id:
-
-```
-sudo /usr/share/jitsi-meet/scripts/move-to-jaas.sh /my/path/test-key.pk <key_id>
-```
-
-More information about JaaS Api keys at: https://developer.8x8.com/jaas/docs/jaas-console-api-keys
-
-If you want to adjust the enabled services you can do that in /etc/jits/meet/jaas/nginx-jaas.conf. The part after `proxy_set_body` is the jwt token content that will be used for the client tokens. More info about the JaaS tokens: https://developer.8x8.com/jaas/docs/api-keys-jwt

doc/jaas/index-jaas.html

@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <script src='external_api.js' async></script>
-        <style>html, body, #jaas-container { height: 100%; }</style>
-        <script type="text/javascript">
-            function getRoomName(pathname) {
-                const contextRootEndIndex = pathname.lastIndexOf('/');
-
-                return pathname.substring(contextRootEndIndex + 1);
-            }
-            window.onload = () => {
-                const jaasJwt = <!--#include virtual="/jaas-jwt" -->;
-                const api = new JitsiMeetExternalAPI(
-                    window.location.host, {
-                        roomName: `${jaasJwt.tenant}/${jaasJwt.confId}`,
-                        parentNode: document.querySelector('#jaas-container'),
-                        jwt: jaasJwt.token,
-                        e2eeKey: jaasJwt.e2eeKey
-                    });
-                api.addListener('videoConferenceJoined', () => {
-                    if (jaasJwt.e2eeKey) {
-                        console.info('Toggling e2ee on!')
-                        api.executeCommand('toggleE2EE', true);
-                    }
-                });
-            }
-        </script>
-    </head>
-    <body>
-        <div id="jaas-container" />
-    </body>
-</html>

doc/jaas/move-to-jaas.sh

@@ -1,59 +0,0 @@
-#!/bin/bash
-
-set -e
-
-PRIVATE_KEY=$1
-JAAS_KEY_ID=$2
-
-if [ ! -f "${PRIVATE_KEY}" ] ; then
-  echo "You need to specify a correct path for the private key as a first argument."
-  exit 1;
-fi
-
-if [[ ! "${JAAS_KEY_ID}" =~ ^vpaas-magic-cookie-[0-9a-z]+/[0-9a-z]+$ ]]; then
-    echo "Invalid key id passed as a second argument."
-    exit 2;
-fi
-
-command -v node >/dev/null 2>&1 || { echo >&2 "You must install node first, go to https://nodejs.org. Aborting."; exit 4; }
-
-NODE_VER=$(node -v);
-NODE_MAJOR_VER=$(echo ${NODE_VER:1} |  cut -d. -f1);
-
-if [ "$NODE_MAJOR_VER" -lt "18" ]; then
-    echo "Please install latest LTS version of node (18+)";
-    exit 3;
-fi
-
-# we need this util for debconf-set-selections
-sudo apt install debconf-utils
-
-# Let's pre-set some settings for token-generator
-cat << EOF | sudo debconf-set-selections
-token-generator token-generator/private-key string ${PRIVATE_KEY}
-token-generator token-generator/kid  string ${JAAS_KEY_ID}
-EOF
-
-apt install token-generator
-
-mkdir -p /etc/jitsi/meet/jaas
-
-VPASS_COOKIE=$(echo -n ${JAAS_KEY_ID}| cut -d/ -f1)
-cp /usr/share/jitsi-meet-web-config/nginx-jaas.conf /etc/jitsi/meet/jaas
-sed -i "s/jaas_magic_cookie/${VPASS_COOKIE}/g" /etc/jitsi/meet/jaas/nginx-jaas.conf
-
-cp /usr/share/jitsi-meet-web-config/8x8.vc-config.js /etc/jitsi/meet/jaas/
-echo "set \$config_js_location /etc/jitsi/meet/jaas/8x8.vc-config.js;" >> /etc/jitsi/meet/jaas/jaas-vars
-echo "set \$custom_index index-jaas.html;" >> /etc/jitsi/meet/jaas/jaas-vars
-
-ln -s /usr/share/jitsi-meet-web-config/index-jaas.html /usr/share/jitsi-meet/index-jaas.html
-
-# let's create the daily key now
-/usr/share/jitsi-meet/scripts/update-asap-daily.sh
-
-# let's add to cron daily the update of the asap key
-if [ -d /etc/cron.daily ]; then
-  ln -s /usr/share/jitsi-meet/scripts/update-asap-daily.sh /etc/cron.daily/update-jaas-asap.sh
-else
-  echo "No /etc/cron.daily. Please add to your cron jobs to execute as root daily the script: /usr/share/jitsi-meet/scripts/update-asap-daily.sh"
-fi

doc/jaas/nginx-jaas.conf

@@ -1,23 +0,0 @@
-include /etc/jitsi/meet/jaas/jaas-vars;
-location = /jaas-jwt {
-  include /etc/jitsi/token-generator/daily-key;
-  ssi on;
-  proxy_method POST;
-  proxy_set_header content-type "application/json";
-  proxy_set_header Accept-Encoding "";
-  proxy_set_header Authorization "Bearer $jaas_asap_key";
-  proxy_pass_request_body off;
-  proxy_set_body '{"sub":"jaas_magic_cookie","context":{"features":{"livestreaming":false,"outbound-call":false,"sip-outbound-call":false,"transcription":false,"recording":false},"user":{"moderator":true}},"room": "$roomname"}';
-  proxy_pass http://127.0.0.1:8017/generate/client?e2eeKey=true&confId=true;
-}
-
-location @magic_root_path {
-    rewrite ^/(.*)$ /index.html break;
-}
-
-# Anything that didn't match above, and isn't a real file, assume it's a room name and redirect to /
-location ~ ^/jaas_magic_cookie/(.*)$ {
-    set $subdomain "jaas_magic_cookie.";
-    set $subdir "jaas_magic_cookie/";
-    try_files $1 @magic_root_path;
-}