fix(rn,config) fix forcing VP8 for bridge calls

This requires a custom video encoder / decoder factory which uses the
hardware codec only for H.264 and the software implementations for the rest.

.devcontainer/devcontainer.json

@@ -1,15 +0,0 @@
-{
-  "name": "Jitsi Meet Dev Container",
-  "image": "mcr.microsoft.com/devcontainers/universal:2",
-  "features": {
-    "ghcr.io/devcontainers/features/node:1": {
-      "version": "16"
-    }
-  },
-  "hostRequirements": {
-    "cpus": 4,
-    "memory": "8gb",
-    "storage": "32gb" 
-  },
-  "postCreateCommand": "bash -i -c 'nvm use && npm install && cp tsconfig.web.json tsconfig.json'"
-}

.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-lua.yml

@@ -1,25 +0,0 @@
-name: Lua CI
-
-on: [pull_request]
-
-jobs:
-  luacheck:
-    name: Luacheck
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-
-    - name: Install luarocks
-      run: sudo apt-get --install-recommends -y install luarocks
-
-    - name: Install luacheck
-      run: sudo luarocks install luacheck
-
-    - name: Check lua codes
-      run: |
-        set -o pipefail && luacheck . | awk -F: '
-          {
-            print $0
-            printf "::warning file=%s,line=%s,col=%s::%s\n", $1, $2, $3, $4
-          }
-        '

.github/workflows/ci.yml

@@ -7,34 +7,25 @@ jobs:
     name: Lint
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v2
     - uses: actions/setup-node@v3
       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
+    - run: for file in lang/*.json; do npx --yes jsonlint -q $file || exit 1; done
   linux-build:
     name: Build Frontend (Linux)
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v2
     - uses: actions/setup-node@v3
       with:
         node-version: 16
@@ -45,46 +36,10 @@ jobs:
     name: Build Frontend (macOS)
     runs-on: macOS-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v2
     - uses: actions/setup-node@v3
       with:
         node-version: 16
         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
-  debian-build:
-    name: Test Debian packages build
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-        cache: 'npm'
-    - run: npm install
-    - run: make
-    - run: sudo apt-get install -y debhelper
-    - run: dpkg-buildpackage -A -rfakeroot -us -uc -d
-    - run: make source-package

.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
@@ -93,21 +92,3 @@ twa/*.apk
 twa/*.aab
 twa/assetlinks.json
 
-tsconfig.json
-
-# React Native SDK
-#
-react-native-sdk/*.tgz
-react-native-sdk/android/src
-!react-native-sdk/android/src/main/java/org/jitsi/meet/sdk/JitsiMeetOngoingConferenceService.java
-!react-native-sdk/android/src/main/java/org/jitsi/meet/sdk/JitsiMeetReactNativePackage.java
-!react-native-sdk/android/src/main/java/org/jitsi/meet/sdk/JMOngoingConferenceModule.java
-!react-native-sdk/android/src/main/java/org/jitsi/meet/sdk/RNOngoingNotification.java
-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

.luacheckrc

@@ -1,8 +0,0 @@
-global = false
-unused = false
-redefined = false
-ignore = { "581" }
-max_line_length = false
-color = false
-formatter = "plain"
-quiet = 1

CONTRIBUTING.md

@@ -141,7 +141,7 @@ react/features/sample/
 ```
 
 The middleware must be imported in `react/features/app/` specifically
-in `middlewares.any.ts`, `middlewares.native.ts` or `middlewares.web.ts` where appropriate.
+in `middlewares.any`, `middlewares.native.js` or `middlewares.web.js` where appropriate.
 Likewise for the reducer.
 
 An `index.js` file must not be provided for exporting actions, action types and

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 \
@@ -55,8 +59,6 @@ deploy-appbundle:
 		$(BUILD_DIR)/face-landmarks-worker.min.js.map \
 		$(BUILD_DIR)/noise-suppressor-worklet.min.js \
 		$(BUILD_DIR)/noise-suppressor-worklet.min.js.map \
-		$(BUILD_DIR)/screenshot-capture-worker.min.js \
-		$(BUILD_DIR)/screenshot-capture-worker.min.js.map \
 		$(DEPLOY_DIR)
 	cp \
 		$(BUILD_DIR)/close3.min.js \
@@ -65,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:
@@ -125,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 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/build.gradle

@@ -76,20 +76,19 @@ android {
 
 dependencies {
     implementation fileTree(dir: 'libs', include: ['*.jar'])
-    implementation 'androidx.appcompat:appcompat:1.5.1'
+    implementation 'androidx.appcompat:appcompat:1.4.1'
 
     debugImplementation 'com.squareup.leakcanary:leakcanary-android:2.7'
 
     if (!rootProject.ext.libreBuild) {
-        // Sync with react-native-google-signin
-        implementation 'com.google.android.gms:play-services-auth:20.5.0'
+        implementation 'com.google.android.gms:play-services-auth:16.0.1'
 
         // Firebase
         //  - Crashlytics
         //  - Dynamic Links
-        implementation 'com.google.firebase:firebase-analytics:21.3.0'
-        implementation 'com.google.firebase:firebase-crashlytics:18.4.3'
-        implementation 'com.google.firebase:firebase-dynamic-links:21.1.0'
+        implementation 'com.google.firebase:firebase-analytics:17.5.0'
+        implementation 'com.google.firebase:firebase-crashlytics:17.2.1'
+        implementation 'com.google.firebase:firebase-dynamic-links:19.1.0'
     }
 
     implementation project(':sdk')

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/MainActivity.java

@@ -152,6 +152,7 @@ public class MainActivity extends JitsiMeetActivity {
             = new JitsiMeetConferenceOptions.Builder()
             .setServerURL(buildURL(defaultURL))
             .setFeatureFlag("welcomepage.enabled", true)
+            .setFeatureFlag("call-integration.enabled", false)
             .setFeatureFlag("resolution", 360)
             .setFeatureFlag("server-url-change.enabled", !configurationByRestrictions)
             .build();

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/app/src/main/res/drawable/ic_launcher_monochrome.xml

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

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -2,5 +2,4 @@
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
     <background android:drawable="@color/ic_launcher_background"/>
     <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
-    <monochrome android:drawable="@drawable/ic_launcher_monochrome"/>
 </adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -2,5 +2,4 @@
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
     <background android:drawable="@color/ic_launcher_background"/>
     <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
-    <monochrome android:drawable="@drawable/ic_launcher_monochrome"/>
 </adaptive-icon>

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

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

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

@@ -2,7 +2,7 @@
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
         <item name="android:forceDarkAllowed">false</item>
-        <item name="android:navigationBarColor">@color/navigationBarColor</item>
+        <item name="android:navigationBarColor">@color/colorPrimaryDark</item>
         <item name="android:windowDisablePreview">true</item>
    </style>
 </resources>

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

@@ -1,10 +1,11 @@
-<?xml version="1.0" encoding="utf-8"?>
-<restrictions xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <!-- Server URL configuration -->
-    <restriction
-        android:description="@string/restriction_server_url_description"
-        android:key="SERVER_URL"
-        android:restrictionType="string"
-        android:title="@string/restriction_server_url_title"/>
-</restrictions>
+<?xml version="1.0" encoding="utf-8"?>
+<restrictions xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Server URL configuration -->
+    <restriction
+        android:defaultValue="https://meet.jit.si"
+        android:description="@string/restriction_server_url_description"
+        android:key="SERVER_URL"
+        android:restrictionType="string"
+        android:title="@string/restriction_server_url_title"/>
+</restrictions>

android/build.gradle

@@ -1,4 +1,5 @@
 import groovy.json.JsonSlurper
+import org.apache.tools.ant.taskdefs.condition.Os
 import org.gradle.util.VersionNumber
 
 // Top-level build file where you can add configuration options common to all
@@ -10,24 +11,28 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:7.3.1'
-        classpath 'com.google.gms:google-services:4.4.0'
-        classpath 'com.google.firebase:firebase-crashlytics-gradle:2.9.9'
+        classpath 'com.android.tools.build:gradle:7.0.4'
+        classpath 'com.google.gms:google-services:4.3.10'
+        classpath 'com.google.firebase:firebase-crashlytics-gradle:2.8.1'
     }
 }
 
 ext {
-    kotlinVersion = "1.7.0"
-    buildToolsVersion = "33.0.2"
-    compileSdkVersion = 33
-    minSdkVersion    = 24
-    targetSdkVersion = 33
+    buildToolsVersion = "31.0.0"
+    compileSdkVersion = 31
+    minSdkVersion    = 23
+    targetSdkVersion = 31
     supportLibVersion = "28.0.0"
 
-    // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
-    ndkVersion = "23.1.7779620"
+    if (System.properties['os.arch'] == "aarch64") {
+        // For M1 Users we need to use the NDK 24 which added support for aarch64
+        ndkVersion = "24.0.8215888"
+    } else {
+        // Otherwise we default to the side-by-side NDK version from AGP.
+        ndkVersion = "21.4.7075529"
+    }
 
-    // The Maven artifact groupId of the third-party react-native modules which
+    // The Maven artifact groupdId of the third-party react-native modules which
     // Jitsi Meet SDK for Android depends on and which are not available in
     // third-party Maven repositories so we have to deploy to a Maven repository
     // of ours.

android/gradle.properties

@@ -26,5 +26,5 @@ android.useAndroidX=true
 android.enableJetifier=true
 android.bundle.enableUncompressedNativeLibs=false
 
-appVersion=99.0.0
-sdkVersion=99.0.0
+appVersion=22.6.0
+sdkVersion=6.2.0

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.3.3-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

android/scripts/release-sdk.sh

@@ -29,18 +29,14 @@ if [[ $MVN_HTTP == 1 ]]; then
     # Push React Native
     echo "Pushing React Native ${RN_VERSION} to the Maven repo"
     pushd ${THIS_DIR}/../../node_modules/react-native/android/com/facebook/react/react-native/${RN_VERSION}
-    cat react-native-${RN_VERSION}.pom \
-        | sed "s#<packaging>pom</packaging>#<packaging>aar</packaging>#" \
-        | sed "/<optional>/d" \
-        > react-native-${RN_VERSION}-fixed.pom
     mvn \
         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}-fixed.pom || true
+        -DpomFile=react-native-${RN_VERSION}.pom || true
     popd
     # Push JSC
     echo "Pushing JSC ${JSC_VERSION} to the Maven repo"
@@ -59,17 +55,13 @@ else
     if [[ ! -d ${MVN_REPO}/com/facebook/react/react-native/${RN_VERSION} ]]; then
         echo "Pushing React Native ${RN_VERSION} to the Maven repo"
         pushd ${THIS_DIR}/../../node_modules/react-native/android/com/facebook/react/react-native/${RN_VERSION}
-        cat react-native-${RN_VERSION}.pom \
-            | sed "s#<packaging>pom</packaging>#<packaging>aar</packaging>#" \
-            | sed "/<optional>/d" \
-            > react-native-${RN_VERSION}-fixed.pom
         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}-fixed.pom
+            -DpomFile=react-native-${RN_VERSION}.pom
         popd
     fi
 

android/sdk/build.gradle

@@ -74,8 +74,9 @@ dependencies {
     }
     implementation project(':react-native-gesture-handler')
     implementation project(':react-native-get-random-values')
-    implementation project(':react-native-immersive-mode')
+    implementation project(':react-native-immersive')
     implementation project(':react-native-keep-awake')
+    implementation project(':react-native-masked-view_masked-view')
     implementation project(':react-native-orientation-locker')
     implementation project(':react-native-pager-view')
     implementation project(':react-native-performance')

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/AudioDeviceHandlerConnectionService.java

@@ -22,8 +22,6 @@ import android.os.Build;
 import android.telecom.CallAudioState;
 import androidx.annotation.RequiresApi;
 
-import com.facebook.react.bridge.ReactContext;
-
 import java.util.HashSet;
 import java.util.Set;
 
@@ -51,8 +49,6 @@ class AudioDeviceHandlerConnectionService implements
      */
     private AudioModeModule module;
 
-    private RNConnectionService rcs;
-
     /**
      * Converts any of the "DEVICE_" constants into the corresponding
      * {@link android.telecom.CallAudioState} "ROUTE_" number.
@@ -145,8 +141,8 @@ class AudioDeviceHandlerConnectionService implements
         JitsiMeetLogger.i("Using " + TAG + " as the audio device handler");
 
         module = audioModeModule;
-        rcs = module.getContext().getNativeModule(RNConnectionService.class);
 
+        RNConnectionService rcs = ReactInstanceManagerHolder.getNativeModule(RNConnectionService.class);
         if (rcs != null) {
             rcs.setCallAudioStateListener(this);
         } else {
@@ -156,9 +152,9 @@ class AudioDeviceHandlerConnectionService implements
 
     @Override
     public void stop() {
+        RNConnectionService rcs = ReactInstanceManagerHolder.getNativeModule(RNConnectionService.class);
         if (rcs != null) {
             rcs.setCallAudioStateListener(null);
-            rcs = null;
         } else {
             JitsiMeetLogger.w(TAG + " Couldn't set call audio state listener, module is 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/AudioModeModule.java

@@ -26,13 +26,10 @@ import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
-import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.WritableArray;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.module.annotations.ReactModule;
-import com.facebook.react.modules.core.DeviceEventManagerModule;
-
 
 import org.jitsi.meet.sdk.log.JitsiMeetLogger;
 
@@ -199,7 +196,7 @@ class AudioModeModule extends ReactContextBaseJavaModule {
                     deviceInfo.putBoolean("selected", device.equals(selectedDevice));
                     data.pushMap(deviceInfo);
                 }
-                getContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(DEVICE_CHANGE_EVENT, data);
+                ReactInstanceManagerHolder.emitEvent(DEVICE_CHANGE_EVENT, data);
                 JitsiMeetLogger.i(TAG + " Updating audio device list");
             }
         });
@@ -215,10 +212,6 @@ class AudioModeModule extends ReactContextBaseJavaModule {
         return NAME;
     }
 
-    public ReactContext getContext(){
-        return this.getReactApplicationContext();
-    }
-
     /**
      * Initializes the audio device handler module. This function is called *after* all Catalyst
      * modules have been created, and that's why we use it, because {@link AudioDeviceHandlerConnectionService}

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

@@ -77,8 +77,7 @@ public class BroadcastAction {
         CLOSE_CHAT("org.jitsi.meet.CLOSE_CHAT"),
         SEND_CHAT_MESSAGE("org.jitsi.meet.SEND_CHAT_MESSAGE"),
         SET_VIDEO_MUTED("org.jitsi.meet.SET_VIDEO_MUTED"),
-        SET_CLOSED_CAPTIONS_ENABLED("org.jitsi.meet.SET_CLOSED_CAPTIONS_ENABLED"),
-        TOGGLE_CAMERA("org.jitsi.meet.TOGGLE_CAMERA");
+        SET_CLOSED_CAPTIONS_ENABLED("org.jitsi.meet.SET_CLOSED_CAPTIONS_ENABLED");
 
         private final String action;
 

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

@@ -75,8 +75,6 @@ public class BroadcastEvent {
     }
 
     public enum Type {
-        CONFERENCE_BLURRED("org.jitsi.meet.CONFERENCE_BLURRED"),
-        CONFERENCE_FOCUSED("org.jitsi.meet.CONFERENCE_FOCUSED"),
         CONFERENCE_JOINED("org.jitsi.meet.CONFERENCE_JOINED"),
         CONFERENCE_TERMINATED("org.jitsi.meet.CONFERENCE_TERMINATED"),
         CONFERENCE_WILL_JOIN("org.jitsi.meet.CONFERENCE_WILL_JOIN"),
@@ -91,8 +89,6 @@ public class BroadcastEvent {
         VIDEO_MUTED_CHANGED("org.jitsi.meet.VIDEO_MUTED_CHANGED"),
         READY_TO_CLOSE("org.jitsi.meet.READY_TO_CLOSE");
 
-        private static final String CONFERENCE_BLURRED_NAME = "CONFERENCE_BLURRED";
-        private static final String CONFERENCE_FOCUSED_NAME = "CONFERENCE_FOCUSED";
         private static final String CONFERENCE_WILL_JOIN_NAME = "CONFERENCE_WILL_JOIN";
         private static final String CONFERENCE_JOINED_NAME = "CONFERENCE_JOINED";
         private static final String CONFERENCE_TERMINATED_NAME = "CONFERENCE_TERMINATED";
@@ -128,10 +124,6 @@ public class BroadcastEvent {
 
         private static Type buildTypeFromName(String name) {
             switch (name) {
-                case CONFERENCE_BLURRED_NAME:
-                    return CONFERENCE_BLURRED;
-                case CONFERENCE_FOCUSED_NAME:
-                    return CONFERENCE_FOCUSED;
                 case CONFERENCE_WILL_JOIN_NAME:
                     return CONFERENCE_WILL_JOIN;
                 case CONFERENCE_JOINED_NAME:

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

@@ -54,14 +54,4 @@ public class BroadcastIntentHelper {
         intent.putExtra("enabled", enabled);
         return intent;
     }
-    
-    public static Intent buildRetrieveParticipantsInfo(String requestId) {
-        Intent intent = new Intent(BroadcastAction.Type.RETRIEVE_PARTICIPANTS_INFO.getAction());
-        intent.putExtra("requestId", requestId);
-        return intent;
-    }
-
-    public static Intent buildToggleCameraIntent() {
-        return new Intent(BroadcastAction.Type.TOGGLE_CAMERA.getAction());
-    }
 }

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/ExternalAPIModule.java

@@ -96,7 +96,6 @@ class ExternalAPIModule extends ReactContextBaseJavaModule {
         constants.put("SEND_CHAT_MESSAGE", BroadcastAction.Type.SEND_CHAT_MESSAGE.getAction());
         constants.put("SET_VIDEO_MUTED", BroadcastAction.Type.SET_VIDEO_MUTED.getAction());
         constants.put("SET_CLOSED_CAPTIONS_ENABLED", BroadcastAction.Type.SET_CLOSED_CAPTIONS_ENABLED.getAction());
-        constants.put("TOGGLE_CAMERA", BroadcastAction.Type.TOGGLE_CAMERA.getAction());
 
         return constants;
     }

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

@@ -26,6 +26,7 @@ import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 
 import com.facebook.react.ReactRootView;
+import com.rnimmersive.RNImmersiveModule;
 
 import org.jitsi.meet.sdk.log.JitsiMeetLogger;
 
@@ -80,8 +81,6 @@ public class JitsiMeetView extends FrameLayout {
                 result.putBoolean(key, (Boolean)bValue);
             } else if (valueType.contentEquals("String")) {
                 result.putString(key, (String)bValue);
-            } else if (valueType.contentEquals("Integer")) {
-                result.putInt(key, (int)bValue);
             } else if (valueType.contentEquals("Bundle")) {
                 result.putBundle(key, mergeProps((Bundle)aValue, (Bundle)bValue));
             } else {
@@ -156,14 +155,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}.
@@ -228,4 +219,22 @@ public class JitsiMeetView extends FrameLayout {
         dispose();
         super.onDetachedFromWindow();
     }
+
+    /**
+     * Called when the window containing this view gains or loses focus.
+     *
+     * @param hasFocus If the window of this view now has focus, {@code true};
+     * otherwise, {@code false}.
+     */
+    @Override
+    public void onWindowFocusChanged(boolean hasFocus) {
+        super.onWindowFocusChanged(hasFocus);
+
+        // https://github.com/mockingbot/react-native-immersive#restore-immersive-state
+        RNImmersiveModule immersive = RNImmersiveModule.getInstance();
+
+        if (hasFocus && immersive != null) {
+            immersive.emitImmersiveStateChangeEvent();
+        }
+    }
 }

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 {
@@ -72,17 +73,37 @@ class ReactInstanceManagerHolder {
                 new SplashScreenModule(reactContext),
                 new PictureInPictureModule(reactContext),
                 new ProximityModule(reactContext),
+                new WiFiStatsModule(reactContext),
                 new org.jitsi.meet.sdk.net.NAT64AddrInfoModule(reactContext)));
 
         if (AudioModeModule.useConnectionService()) {
             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() {
@@ -99,13 +120,13 @@ class ReactInstanceManagerHolder {
             new com.oblador.performance.PerformancePackage(),
             new com.reactnativecommunity.slider.ReactSliderPackage(),
             new com.brentvatne.react.ReactVideoPackage(),
+            new org.reactnative.maskedview.RNCMaskedViewPackage(),
             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 com.swmansion.gesturehandler.react.RNGestureHandlerPackage(),
             new org.linusu.RNGetRandomValuesPackage(),
-            new com.rnimmersivemode.RNImmersiveModePackage(),
+            new com.rnimmersive.RNImmersivePackage(),
             new com.swmansion.rnscreens.RNScreensPackage(),
             new com.zmxv.RNSound.RNSoundPackage(),
             new com.th3rdwave.safeareacontext.SafeAreaContextPackage(),
@@ -220,6 +241,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 +283,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(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<>()));
+        codecs.add(H264Utils.DEFAULT_H264_BASELINE_PROFILE_CODEC);
+
+        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(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<>()));
+        codecs.add(H264Utils.DEFAULT_H264_BASELINE_PROFILE_CODEC);
+
+        return codecs.toArray(new VideoCodecInfo[codecs.size()]);
+    }
+}

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

@@ -0,0 +1,203 @@
+/*
+ * Copyright @ 2017-present Atlassian Pty Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package org.jitsi.meet.sdk;
+
+import android.content.Context;
+import android.net.wifi.WifiInfo;
+import android.net.wifi.WifiManager;
+
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.module.annotations.ReactModule;
+
+import org.jitsi.meet.sdk.log.JitsiMeetLogger;
+import org.json.JSONArray;
+import org.json.JSONObject;
+
+import java.net.InetAddress;
+import java.net.NetworkInterface;
+import java.net.SocketException;
+import java.net.UnknownHostException;
+import java.util.Enumeration;
+import java.util.concurrent.ExecutorService;
+import java.util.concurrent.Executors;
+
+/**
+ * Module exposing WiFi statistics.
+ *
+ * Gathers rssi, signal in percentage, timestamp and the addresses of the wifi
+ * device.
+ */
+@ReactModule(name = WiFiStatsModule.NAME)
+class WiFiStatsModule
+    extends ReactContextBaseJavaModule {
+
+    public static final String NAME = "WiFiStats";
+
+    /**
+     * The {@code Log} tag {@code WiFiStatsModule} is to log messages with.
+     */
+    static final String TAG = NAME;
+
+    /**
+     * The scale used for the signal value. A level of the signal, given in the
+     * range of 0 to SIGNAL_LEVEL_SCALE-1 (both inclusive).
+     */
+    public final static int SIGNAL_LEVEL_SCALE = 101;
+
+    /**
+     * {@link ExecutorService} for running all operations on a dedicated thread.
+     */
+    private static final ExecutorService executor
+        = Executors.newSingleThreadExecutor();
+
+    /**
+     * Initializes a new module instance. There shall be a single instance of
+     * this module throughout the lifetime of the application.
+     *
+     * @param reactContext the {@link ReactApplicationContext} where this module
+     * is created.
+     */
+    public WiFiStatsModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+    }
+
+    /**
+     * Gets the name for this module to be used in the React Native bridge.
+     *
+     * @return a string with the module name.
+     */
+    @Override
+    public String getName() {
+        return NAME;
+    }
+
+    /**
+     * Returns the {@link InetAddress} represented by this int.
+     *
+     * @param value the int representation of the ip address.
+     * @return the {@link InetAddress}.
+     * @throws UnknownHostException - if IP address is of illegal length.
+     */
+    public static InetAddress toInetAddress(int value)
+            throws UnknownHostException {
+        return InetAddress.getByAddress(
+            new byte[] {
+                    (byte) value,
+                    (byte) (value >> 8),
+                    (byte) (value >> 16),
+                    (byte) (value >> 24)
+            });
+    }
+
+    /**
+     * Public method to retrieve WiFi stats.
+     *
+     * @param promise a {@link Promise} which will be resolved if WiFi stats are
+     * retrieved successfully, and it will be rejected otherwise.
+     */
+    @ReactMethod
+    public void getWiFiStats(final Promise promise) {
+        Runnable r = new Runnable() {
+            @Override
+            public void run() {
+                try {
+                    Context context
+                        = getReactApplicationContext().getApplicationContext();
+                    WifiManager wifiManager
+                        = (WifiManager) context
+                            .getSystemService(Context.WIFI_SERVICE);
+
+                    if (!wifiManager.isWifiEnabled()) {
+                        promise.reject(new Exception("Wifi not enabled"));
+                        return;
+                    }
+
+                    WifiInfo wifiInfo = wifiManager.getConnectionInfo();
+
+                    if (wifiInfo.getNetworkId() == -1) {
+                        promise.reject(new Exception("Wifi not connected"));
+                        return;
+                    }
+
+                    int rssi = wifiInfo.getRssi();
+                    int signalLevel
+                        = WifiManager.calculateSignalLevel(
+                            rssi, SIGNAL_LEVEL_SCALE);
+
+                    JSONObject result = new JSONObject();
+                    result.put("rssi", rssi)
+                        .put("signal", signalLevel)
+                        .put("timestamp", System.currentTimeMillis());
+
+                    JSONArray addresses = new JSONArray();
+
+                    InetAddress wifiAddress
+                        = toInetAddress(wifiInfo.getIpAddress());
+
+                    try {
+                        Enumeration<NetworkInterface> e
+                            =  NetworkInterface.getNetworkInterfaces();
+                        while (e.hasMoreElements()) {
+                            NetworkInterface networkInterface = e.nextElement();
+                            boolean found = false;
+
+                            // first check whether this is the desired interface
+                            Enumeration<InetAddress> as
+                                = networkInterface.getInetAddresses();
+                            while (as.hasMoreElements()) {
+                                InetAddress a = as.nextElement();
+                                if(a.equals(wifiAddress)) {
+                                    found = true;
+                                    break;
+                                }
+                            }
+
+                            if (found) {
+                                // interface found let's put addresses
+                                // to the result object
+                                as = networkInterface.getInetAddresses();
+                                while (as.hasMoreElements()) {
+                                    InetAddress a = as.nextElement();
+                                    if (a.isLinkLocalAddress())
+                                        continue;
+
+                                    addresses.put(a.getHostAddress());
+                                }
+                            }
+
+                        }
+                    } catch (SocketException e) {
+                        JitsiMeetLogger.e(e, TAG + " Unable to NetworkInterface.getNetworkInterfaces()");
+                    }
+
+                    result.put("addresses", addresses);
+                    promise.resolve(result.toString());
+
+                    JitsiMeetLogger.d(TAG + " WiFi stats: " + result.toString());
+                } catch (Throwable e) {
+                    JitsiMeetLogger.e(e, TAG + " Failed to obtain wifi stats");
+                    promise.reject(
+                        new Exception("Failed to obtain wifi stats"));
+                }
+            }
+        };
+        executor.execute(r);
+    }
+}

android/settings.gradle

@@ -27,10 +27,12 @@ include ':react-native-giphy'
 project(':react-native-giphy').projectDir = new File(rootProject.projectDir, '../node_modules/@giphy/react-native-sdk/android')
 include ':react-native-google-signin'
 project(':react-native-google-signin').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-google-signin/google-signin/android')
-include ':react-native-immersive-mode'
-project(':react-native-immersive-mode').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-immersive-mode/android')
+include ':react-native-immersive'
+project(':react-native-immersive').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-immersive/android')
 include ':react-native-keep-awake'
 project(':react-native-keep-awake').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keep-awake/android')
+include ':react-native-masked-view_masked-view'
+project(':react-native-masked-view_masked-view').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-masked-view/masked-view/android')
 include ':react-native-orientation-locker'
 project(':react-native-orientation-locker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-orientation-locker/android')
 include ':react-native-pager-view'

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.
@@ -31,6 +32,24 @@ if (window.Olm) {
 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
 };

config.js

@@ -46,44 +46,29 @@ 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',
 
-    // Whether BOSH should be preferred over WebSocket if both are configured.
-    // preferBosh: false,
-
     // The real JID of focus participant - can be overridden here
     // Do not change username - FIXME: Make focus username configurable
     // https://github.com/jitsi/jitsi-meet/issues/7376
     // focusUserJid: 'focus@auth.jitsi-meet.example.com',
 
-    // 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,
 
+        // Enables/disables thumbnail reordering in the filmstrip. It is enabled by default unless explicitly
+        // disabled by the below option.
+        // enableThumbnailReordering: true,
+
         // Enables XMPP WebSocket (as opposed to BOSH) for the given amount of users.
         // mobileXmppWsThreshold: 10, // enable XMPP WebSockets on mobile for 10% of the users
 
@@ -97,6 +82,39 @@ var config = {
         // Disables the auto-play behavior of *all* newly created video element.
         // This is useful when the client runs on a host with limited resources.
         // noAutoPlayVideo: false,
+
+        // Enable / disable 500 Kbps bitrate cap on desktop tracks. When enabled,
+        // simulcast is turned off for the desktop share. If presenter is turned
+        // on while screensharing is in progress, the max bitrate is automatically
+        // adjusted to 2.5 Mbps. This takes a value between 0 and 1 which determines
+        // the probability for this to be enabled. This setting has been deprecated.
+        // desktopSharingFrameRate.max now determines whether simulcast will be enabled
+        // or disabled for the screenshare.
+        // capScreenshareBitrate: 1, // 0 to disable - deprecated.
+
+        // Whether to use fake constraints (height: 99999, width: 99999) when calling getDisplayMedia on
+        // Chromium based browsers. This is intended as a workaround for
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=1056311
+        // setScreenSharingResolutionConstraints: true,
+
+        // Enable callstats only for a percentage of users.
+        // This takes a value between 0 and 100 which determines the probability for
+        // the callstats to be enabled.
+        // callStatsThreshold: 5, // enable callstats for 5% of the users.
+    },
+
+    // Feature Flags.
+    flags: {
+        // Enables source names in the signaling.
+        // sourceNameSignaling: false,
+
+        // Enables sending multiple video streams, i.e., camera and desktop tracks can be shared in the conference
+        // separately as two different streams instead of one composite stream.
+        // sendMultipleVideoStreams: false,
+
+        // Signal that this client supports receiving multiple video streams. Without this flag jicofo will enable
+        // multi-stream backward compatibility.
+        // receiveMultipleVideoStreams: true,
     },
 
     // Disables moderator indicators.
@@ -140,6 +158,9 @@ var config = {
     // Media
     //
 
+    // Enable unified plan implementation support on Chromium based browsers.
+    // enableUnifiedOnChrome: false,
+
     // Audio
 
     // Disable measuring of audio levels.
@@ -195,56 +216,17 @@ 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 default camera facing mode.
-    // cameraFacingMode: 'user',
-
     // Sets the preferred resolution (height) for local video. Defaults to 720.
     // resolution: 720,
 
     // Specifies whether the raised hand will hide when someone becomes a dominant speaker or not
     // disableRemoveRaisedHandOnFocus: false,
 
-    // speakerStats: {
-    //     // Specifies whether the speaker stats is enable or not.
-    //     disabled: false,
-
-    //     // Specifies whether there will be a search field in speaker stats or not.
-    //     disableSearch: false,
-
-    //     // Specifies whether participants in speaker stats should be ordered or not, and with what priority.
-    //     // 'role', <- Moderators on top.
-    //     // 'name', <- Alphabetically by name.
-    //     // 'hasLeft', <- The ones that have left in the bottom.
-    //     order: [
-    //         'role',
-    //         'name',
-    //         'hasLeft',
-    //     ],
-    // },
-
-    // DEPRECATED. Please use speakerStats.disableSearch instead.
     // Specifies whether there will be a search field in speaker stats or not
     // disableSpeakerStatsSearch: false,
 
-    // DEPRECATED. Please use speakerStats.order .
     // Specifies whether participants in speaker stats should be ordered or not, and with what priority
     // speakerStatsOrder: [
     //  'role', <- Moderators on top
@@ -274,6 +256,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,
 
@@ -281,6 +269,17 @@ var config = {
     // applied locally. FIXME: having these 2 options is confusing.
     // startWithVideoMuted: false,
 
+    // If set to true, prefer to use the H.264 video codec (if supported).
+    // Note that it's not recommended to do this because simulcast is not
+    // supported when  using H.264. For 1-to-1 calls this setting is enabled by
+    // default and can be toggled in the p2p section.
+    // This option has been deprecated, use preferredCodec under videoQuality section instead.
+    // preferH264: true,
+
+    // If set to true, disable H.264 video codec by stripping it out of the
+    // SDP.
+    // disableH264: false,
+
     // Desktop sharing
 
     // Optional desktop sharing frame rate options. Default value: min:5, max:5.
@@ -289,19 +288,12 @@ var config = {
     //     max: 5,
     // },
 
-    // Optional screenshare settings that give more control over screen capture in the browser.
-    // screenShareSettings: {
-    //      // Show users the current tab is the preferred capture source, default: false.
-    //      desktopPreferCurrentTab: false,
-    //      // Allow users to select system audio, default: include.
-    //      desktopSystemAudio: 'include',
-    //      // Allow users to seamlessly switch which tab they are sharing without having to select the tab again.
-    //      desktopSurfaceSwitching: 'include',
-    //      // Allow a user to be shown a preference for what screen is to be captured, default: unset.
-    //      desktopDisplaySurface: undefined,
-    //      // Allow users to select the current tab as a capture source, default: exclude.
-    //      desktopSelfBrowserSurface: 'exclude'
-    // },
+    // This option has been deprecated since it is no longer supported as per the w3c spec.
+    // https://w3c.github.io/mediacapture-screen-share/#dom-mediadevices-getdisplaymedia. If the user has not
+    // interacted with the webpage before the getDisplayMedia call, the promise will be rejected by the browser. This
+    // has already been implemented in Firefox and Safari and will be implemented in Chrome soon.
+    // https://bugs.chromium.org/p/chromium/issues/detail?id=1198918
+    // startScreenSharing: false,
 
     // Recording
 
@@ -433,55 +425,50 @@ 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,
+    // },
+
+    // Provides a way to translate the legacy bridge signaling messages, 'LastNChangedEvent',
+    // 'SelectedEndpointsChangedEvent' and 'ReceiverVideoConstraint' into the new 'ReceiverVideoConstraints' message
+    // that invokes the new bandwidth allocation algorithm in the bridge which is described here
+    // - https://github.com/jitsi/jitsi-videobridge/blob/master/doc/allocation.md.
+    // useNewBandwidthAllocationStrategy: false,
+
     // Specify the settings for video quality optimizations on the client.
     // videoQuality: {
+    //    // Provides a way to prevent a video codec from being negotiated on the JVB connection. The codec specified
+    //    // here will be removed from the list of codecs present in the SDP answer generated by the client. If the
+    //    // same codec is specified for both the disabled and preferred option, the disable settings will prevail.
+    //    // Note that 'VP8' cannot be disabled since it's a mandatory codec, the setting will be ignored in this case.
+    //    disabledCodec: 'H264',
     //
-    //    // Provides a way to set 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',
     //
-    //    // Codec specific settings for scalability modes and max bitrates.
-    //    av1: {
-    //      maxBitratesVideo: {
-    //          low: 100000,
-    //          standard: 300000,
-    //          high: 1000000,
-    //          ssHigh: 2500000
-    //      },
-    //      scalabilityModeEnabled: true,
-    //      useSimulcast: false,
-    //      useKSVC: true
-    //    },
-    //    h264: {
-    //      maxBitratesVideo: {
-    //          low: 200000,
-    //          standard: 500000,
-    //          high: 1500000,
-    //          ssHigh: 2500000
-    //      },
-    //      scalabilityModeEnabled: true
-    //    },
-    //    vp8: {
-    //      maxBitratesVideo: {
-    //          low: 200000,
-    //          standard: 500000,
-    //          high: 1500000,
-    //          ssHigh: 2500000
-    //      },
-    //      scalabilityModeEnabled: false
-    //    },
-    //    vp9: {
-    //      maxBitratesVideo: {
-    //          low: 100000,
-    //          standard: 300000,
-    //          high: 1200000,
-    //          ssHigh: 2500000
-    //      },
-    //      scalabilityModeEnabled: true,
-    //      useSimulcast: false,
-    //      useKSVC: true
-    //    }
+    //    // 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,
     //
-    //    DEPRECATED! Use `codec specific settings` instead.
     //    // Provides a way to configure the maximum bitrates that will be enforced on the simulcast streams for
     //    // video tracks. The keys in the object represent the type of the stream (LD, SD or HD) and the values
     //    // are the max.bitrates to be set on that particular type of stream. The actual send may vary based on
@@ -520,24 +507,9 @@ 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',
-    //
+    //    // Provides a way to resize the desktop track to 720p (if it is greater than 720p) before creating a canvas
+    //    // for the presenter mode (camera picture-in-picture mode with screenshare).
+    //    resizeDesktopForPresenter: false,
     // },
 
     // Notification timeouts
@@ -602,15 +574,12 @@ var config = {
     // Disables responsive tiles.
     // disableResponsiveTiles: false,
 
-    // DEPRECATED. Please use `securityUi?.hideLobbyButton` instead.
-    // Hides lobby button.
+    // Hides lobby button
     // hideLobbyButton: false,
 
-    // DEPRECATED. Please use `lobby?.autoKnock` instead.
     // If Lobby is enabled starts knocking automatically.
     // autoKnockLobby: false,
 
-    // DEPRECATED. Please use `lobby?.enableChat` instead.
     // Enable lobby chat.
     // enableLobbyChat: true,
 
@@ -621,38 +590,9 @@ 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.
-    // enableWelcomePage: true,
-
-    // Configs for welcome page.
-    // welcomePage: {
-    //     // Whether to disable welcome page. In case it's disabled a random room
-    //     // will be joined when no room is specified.
-    //     disabled: false,
-    //     // If set,landing page will redirect to this URL.
-    //     customUrl: ''
-    // },
-
-    // Configs for the lobby screen.
-    // lobby: {
-    //     // If Lobby is enabled, it starts knocking automatically. Replaces `autoKnockLobby`.
-    //     autoKnock: false,
-    //     // Enables the lobby chat. Replaces `enableLobbyChat`.
-    //     enableChat: true,
-    // },
-
-    // Configs for the security related UI elements.
-    // securityUi: {
-    //     // Hides the lobby button. Replaces `hideLobbyButton`.
-    //     hideLobbyButton: false,
-    //     // Hides the possibility to set and enter a lobby password.
-    //     disableLobbyPassword: false,
-    // },
+    enableWelcomePage: true,
 
     // Disable app shortcuts that are registered upon joining a conference
     // disableShortcuts: false,
@@ -683,7 +623,6 @@ var config = {
     // hideDominantSpeakerBadge: false,
 
     // Default language for the user interface. Cannot be overwritten.
-    // DEPRECATED! Use the `lang` iframe option directly instead.
     // defaultLanguage: 'en',
 
     // Disables profile and the edit of all fields from the profile settings (display name and email)
@@ -772,6 +711,7 @@ var config = {
     //    'chat',
     //    'closedcaptions',
     //    'desktop',
+    //    'dock-iframe',
     //    'download',
     //    'embedmeeting',
     //    'etherpad',
@@ -799,8 +739,8 @@ var config = {
     //    'stats',
     //    'tileview',
     //    'toggle-camera',
+    //    'undock-iframe',
     //    'videoquality',
-    //    'whiteboard',
     // ],
 
     // Holds values related to toolbar visibility control.
@@ -836,13 +776,11 @@ var config = {
     //     'desktop',
     //     'download',
     //     'embedmeeting',
-    //     'end-meeting',
     //     'etherpad',
     //     'feedback',
     //     'filmstrip',
     //     'fullscreen',
     //     'hangup',
-    //     'hangup-menu',
     //     'help',
     //     {
     //         key: 'invite',
@@ -875,57 +813,12 @@ var config = {
     //         key: 'add-passcode',
     //         preventExecution: false
     //     },
-    //     'whiteboard',
-    // ],
-
-    // Participant context menu buttons which have their click/tap event exposed through the API on
-    // `participantMenuButtonClick`. Passing a string for the button key will
-    // prevent execution of the click/tap routine; passing an object with `key` and
-    // `preventExecution` flag on false will not prevent execution of the click/tap
-    // routine. Below array with mixed mode for passing the buttons.
-    // participantMenuButtonsWithNotifyClick: [
-    //     'allow-video',
-    //     {
-    //         key: 'ask-unmute',
-    //         preventExecution: false
-    //     },
-    //     'conn-status',
-    //     'flip-local-video',
-    //     'grant-moderator',
-    //     {
-    //         key: 'kick',
-    //         preventExecution: true
-    //     },
-    //     {
-    //         key: 'hide-self-view',
-    //         preventExecution: false
-    //     },
-    //     'mute',
-    //     'mute-others',
-    //     'mute-others-video',
-    //     'mute-video',
-    //     'pinToStage',
-    //     'privateMessage',
-    //     {
-    //         key: 'remote-control',
-    //         preventExecution: false
-    //     },
-    //     'send-participant-to-room',
-    //     'verify',
     // ],
 
     // List of pre meeting screens buttons to hide. The values must be one or more of the 5 allowed buttons:
     // 'microphone', 'camera', 'select-background', 'invite', 'settings'
     // hiddenPremeetingButtons: [],
 
-    // An array with custom option buttons for the participant context menu
-    // type:  Array<{ icon: string; id: string; text: string; }>
-    // customParticipantMenuButtons: [],
-
-    // An array with custom option buttons for the toolbar
-    // type:  Array<{ icon: string; id: string; text: string; backgroundColor?: string; }>
-    // customToolbarButtons: [],
-
     // Stats
     //
 
@@ -938,10 +831,38 @@ var config = {
     // The interval at which PeerConnection.getStats() is called. Defaults to 10000
     // pcStatsInterval: 10000,
 
-    // Enables sending participants' display names to stats
+    // To enable sending statistics to callstats.io you must provide the
+    // Application ID and Secret.
+    // callStatsID: '',
+    // callStatsSecret: '',
+    // callStatsApplicationLogsDisabled: false,
+
+    // The callstats initialize config params as described in the API:
+    // https://docs.callstats.io/docs/javascript#callstatsinitialize-with-app-secret
+    // callStatsConfigParams: {
+    //     disableBeforeUnloadHandler: true, // disables callstats.js's window.onbeforeunload parameter.
+    //     applicationVersion: "app_version", // Application version specified by the developer.
+    //     disablePrecalltest: true, // disables the pre-call test, it is enabled by default.
+    //     siteID: "siteID", // The name/ID of the site/campus from where the call/pre-call test is made.
+    //     additionalIDs: { // additionalIDs object, contains application related IDs.
+    //         customerID: "Customer Identifier. Example, walmart.",
+    //         tenantID: "Tenant Identifier. Example, monster.",
+    //         productName: "Product Name. Example, Jitsi.",
+    //         meetingsName: "Meeting Name. Example, Jitsi loves callstats.",
+    //         serverName: "Server/MiddleBox Name. Example, jvb-prod-us-east-mlkncws12.",
+    //         pbxID: "PBX Identifier. Example, walmart.",
+    //         pbxExtensionID: "PBX Extension Identifier. Example, 5625.",
+    //         fqExtensionID: "Fully qualified Extension Identifier. Example, +71 (US) +5625.",
+    //         sessionID: "Session Identifier. Example, session-12-34",
+    //     },
+    //     collectLegacyStats: true, //enables the collection of legacy stats in chrome browser
+    //     collectIP: true, //enables the collection localIP address
+    // },
+
+    // Enables sending participants' display names to callstats
     // enableDisplayNameInStats: false,
 
-    // Enables sending participants' emails (if available) to stats and other analytics
+    // Enables sending participants' emails (if available) to callstats and other analytics
     // enableEmailInStats: false,
 
     // faceLandmarks: {
@@ -964,7 +885,7 @@ var config = {
     //     captureInterval: 1000,
     // },
 
-    // Controls the percentage of automatic feedback shown to participants.
+    // Controls the percentage of automatic feedback shown to participants when callstats is enabled.
     // The default value is 100%. If set to 0, no automatic feedback will be requested
     // feedbackPercentage: 100,
 
@@ -972,7 +893,7 @@ var config = {
     //
 
     // If third party requests are disabled, no other server will be contacted.
-    // This means avatars will be locally generated and external stats integration
+    // This means avatars will be locally generated and callstats integration
     // will not function.
     // disableThirdPartyRequests: false,
 
@@ -989,6 +910,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
@@ -997,12 +921,20 @@ 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 ],
+        // If set to true, it will prefer to use H.264 for P2P calls (if H.264
+        // is supported). This setting is deprecated, use preferredCodec instead.
+        // preferH264: true,
+
+        // Provides a way to set the video codec preference on the p2p connection. Acceptable
+        // codec values are 'VP8', 'VP9' and 'H264'.
+        // preferredCodec: 'H264',
+
+        // If set to true, disable H.264 video codec by stripping it out of the
+        // SDP. This setting is deprecated, use disabledCodec instead.
+        // disableH264: false,
+
+        // Provides a way to prevent a video codec from being negotiated on the p2p connection.
+        // disabledCodec: '',
 
         // How long we're going to wait, before going back to P2P after the 3rd
         // participant has left the conference (to filter out page reload).
@@ -1014,15 +946,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: {
@@ -1039,10 +962,6 @@ var config = {
         // The Amplitude APP Key:
         // amplitudeAPPKey: '<APP_KEY>',
 
-        // Enables Amplitude UTM tracking:
-        // Default value is false.
-        // amplitudeIncludeUTM: false,
-
         // Obfuscates room name sent to analytics (amplitude, rtcstats)
         // Default value is false.
         // obfuscateRoomName: false,
@@ -1072,11 +991,6 @@ var config = {
         //      "libs/analytics-ga.min.js", // google-analytics
         //      "https://example.com/my-custom-analytics.js",
         // ],
-
-        // By enabling watchRTCEnabled option you would want to use watchRTC feature
-        // This would also require to configure watchRTCConfigParams.
-        // Please remember to keep rtcstatsEnabled disabled for watchRTC to work.
-        // watchRTCEnabled: false,
     },
 
     // Logs that should go be passed through the 'log' event if a handler is defined for it
@@ -1148,12 +1062,7 @@ var config = {
     // },
 
     // e2ee: {
-    //   labels: {
-    //     description: '',
-    //     label: '',
-    //     tooltip: '',
-    //     warning: '',
-    //   },
+    //   labels,
     //   externallyManagedKey: false,
     // },
 
@@ -1180,71 +1089,10 @@ var config = {
     // use only.
     // _desktopSharingSourceDevice: 'sample-id-or-label',
 
-    // DEPRECATED! Use deeplinking.disabled instead.
     // If true, any checks to handoff to another application will be prevented
     // and instead the app will continue to display in the current browser.
     // disableDeepLinking: false,
 
-    // The deeplinking config.
-    // For information about the properties of
-    // deeplinking.[ios/android].dynamicLink check:
-    // https://firebase.google.com/docs/dynamic-links/create-manually
-    // deeplinking: {
-    //
-    //     // The desktop deeplinking config.
-    //     desktop: {
-    //         appName: 'Jitsi Meet'
-    //     },
-    //     // If true, any checks to handoff to another application will be prevented
-    //     // and instead the app will continue to display in the current browser.
-    //     disabled: false,
-
-    //     // whether to hide the logo on the deep linking pages.
-    //     hideLogo: false,
-
-    //     // The ios deeplinking config.
-    //     ios: {
-    //         appName: 'Jitsi Meet',
-    //         // Specify mobile app scheme for opening the app from the mobile browser.
-    //         appScheme: 'org.jitsi.meet',
-    //         // Custom URL for downloading ios mobile app.
-    //         downloadLink: 'https://itunes.apple.com/us/app/jitsi-meet/id1165103905',
-    //         dynamicLink: {
-    //             apn: 'org.jitsi.meet',
-    //             appCode: 'w2atb',
-    //             customDomain: undefined,
-    //             ibi: 'com.atlassian.JitsiMeet.ios',
-    //             isi: '1165103905'
-    //         }
-    //     },
-
-    //     // The android deeplinking config.
-    //     android: {
-    //         appName: 'Jitsi Meet',
-    //         // Specify mobile app scheme for opening the app from the mobile browser.
-    //         appScheme: 'org.jitsi.meet',
-    //         // Custom URL for downloading android mobile app.
-    //         downloadLink: 'https://play.google.com/store/apps/details?id=org.jitsi.meet',
-    //         // Android app package name.
-    //         appPackage: 'org.jitsi.meet',
-    //         fDroidUrl: 'https://f-droid.org/en/packages/org.jitsi.meet/',
-    //         dynamicLink: {
-    //             apn: 'org.jitsi.meet',
-    //             appCode: 'w2atb',
-    //             customDomain: undefined,
-    //             ibi: 'com.atlassian.JitsiMeet.ios',
-    //             isi: '1165103905'
-    //         }
-    //     }
-    // },
-
-    // // 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,
@@ -1322,16 +1170,6 @@ var config = {
         // A list of images that can be used as video backgrounds.
         // When this field is present, the default images will be replaced with those provided.
         virtualBackgrounds: ['https://example.com/img.jpg'],
-        // Object containing customized icons that should replace the default ones.
-        // The keys need to be the exact same icon names used in here:
-        // https://github.com/jitsi/jitsi-meet/blob/master/react/features/base/icons/svg/index.ts
-        // To avoid having the icons trimmed or displayed in an unexpected way, please provide svg
-        // files containing svg xml icons in the size that the default icons come in.
-        customIcons: {
-            IconArrowUp: 'https://example.com/arrow-up.svg',
-            IconDownload: 'https://example.com/download.svg',
-            IconRemoteControlStart: 'https://example.com/remote-start.svg',
-        },
         // Object containing a theme's properties. It also supports partial overwrites of the main theme.
         // For a list of all possible theme tokens and their current defaults, please check:
         // https://github.com/jitsi/jitsi-meet/tree/master/resources/custom-theme/custom-theme.json
@@ -1347,6 +1185,7 @@ var config = {
                 ui03: "violet",
                 ui04: "magenta",
                 ui05: "blueviolet",
+                field02Hover: 'red',
                 action01: 'green',
                 action01Hover: 'lightgreen',
                 disabled01: 'beige',
@@ -1385,9 +1224,6 @@ var config = {
     //     hideJoinRoomButton: false,
     // },
 
-    // When true, virtual background feature will be disabled.
-    // disableVirtualBackground: false,
-
     // When true the user cannot add more images to be used as virtual background.
     // Only the default ones from will be available.
     // disableAddingBackgroundImages: false,
@@ -1465,31 +1301,6 @@ var config = {
     // dialInConfCodeUrl is the conference mapper converting a meeting id to a PIN used for dial-in
     // or the other way around (more info in resources/cloud-api.swagger)
 
-    // You can use external service for authentication that will redirect back passing a jwt token
-    // You can use tokenAuthUrl config to point to a URL of such service.
-    // The URL for the service supports few params which will be filled in by the code.
-    // tokenAuthUrl:
-    //      'https://myservice.com/auth/{room}?code_challenge_method=S256&code_challenge={code_challenge}&state={state}'
-    // Supported parameters in tokenAuthUrl:
-    //      {room} - will be replaced with the room name
-    //      {code_challenge} - (A web only). A oauth 2.0 code challenge that will be sent to the service. See:
-    //          https://datatracker.ietf.org/doc/html/rfc7636. The code verifier will be saved in the sessionStorage
-    //          under key: 'code_verifier'.
-    //      {state} - A json with the current state before redirecting. Keys that are included in the state:
-    //          - room (The current room name as shown in the address bar)
-    //          - roomSafe (the backend safe room name to use (lowercase), that is passed to the backend)
-    //          - tenant (The tenant if any)
-    //          - config.xxx (all config overrides)
-    //          - interfaceConfig.xxx (all interfaceConfig overrides)
-    //          - ios=true (in case ios mobile app is used)
-    //          - android=true (in case android mobile app is used)
-    //          - electron=true (when web is loaded in electron app)
-    // If there is a logout service you can specify its URL with:
-    // tokenLogoutUrl: 'https://myservice.com/logout'
-    // You can enable tokenAuthUrlAutoRedirect which will detect that you have logged in successfully before
-    // and will automatically redirect to the token service to get the token for the meeting.
-    // tokenAuthUrlAutoRedirect: false
-
     // List of undocumented settings used in jitsi-meet
     /**
      _immediateReloadThreshold
@@ -1498,9 +1309,10 @@ var config = {
      deploymentInfo
      dialOutAuthUrl
      dialOutCodesUrl
-     dialOutRegionUrl
      disableRemoteControl
      displayJids
+     externalConnectUrl
+     e2eeLabels
      firefox_fake_device
      googleApiApplicationClientID
      iAmRecorder
@@ -1509,6 +1321,7 @@ var config = {
      peopleSearchQueryTypes
      peopleSearchUrl
      requireDisplayName
+     tokenAuthUrl
      */
 
     /**
@@ -1522,15 +1335,18 @@ var config = {
     /**
      _peerConnStatusOutOfLastNTimeout
      _peerConnStatusRtcMuteTimeout
+     abTesting
      avgRtpStatsN
+     callStatsConfIDNamespace
+     callStatsCustomScriptUrl
      desktopSharingSources
      disableAEC
      disableAGC
      disableAP
      disableHPF
-     disableLocalStats
      disableNS
      enableTalkWhileMuted
+     forceJVB121Ratio
      forceTurnRelay
      hiddenDomain
      hiddenFromRecorderFeatureEnabled
@@ -1554,7 +1370,6 @@ var config = {
     */
     // notifications: [
     //     'connection.CONNFAIL', // shown when the connection fails,
-    //     'dialog.cameraConstraintFailedError', // shown when the camera failed
     //     'dialog.cameraNotSendingData', // shown when there's no feed from user's camera
     //     'dialog.kickTitle', // shown when user has been kicked
     //     'dialog.liveStreaming', // livestreaming notifications (pending, on, off, limits)
@@ -1565,12 +1380,10 @@ var config = {
     //     'dialog.recording', // recording notifications (pending, on, off, limits)
     //     'dialog.remoteControlTitle', // remote control notifications (allowed, denied, start, stop, error)
     //     'dialog.reservationError',
-    //     'dialog.screenSharingFailedTitle', // shown when the screen sharing failed
     //     'dialog.serviceUnavailable', // shown when server is not reachable
     //     'dialog.sessTerminated', // shown when there is a failed conference session
     //     'dialog.sessionRestarted', // show when a client reload is initiated because of bridge migration
     //     'dialog.tokenAuthFailed', // show when an invalid jwt is used
-    //     'dialog.tokenAuthFailedWithReasons', // show when an invalid jwt is used with the reason behind the error
     //     'dialog.transcribing', // transcribing notifications (pending, off)
     //     'dialOut.statusMessage', // shown when dial out status is updated.
     //     'liveStreaming.busy', // shown when livestreaming service is busy
@@ -1578,45 +1391,37 @@ var config = {
     //     'liveStreaming.unavailableTitle', // shown when livestreaming service is not reachable
     //     'lobby.joinRejectedMessage', // shown when while in a lobby, user's request to join is rejected
     //     'lobby.notificationTitle', // shown when lobby is toggled and when join requests are allowed / denied
-    //     'notify.audioUnmuteBlockedTitle', // shown when mic unmute blocked
     //     'notify.chatMessages', // shown when receiving chat messages while the chat window is closed
+    //     'notify.disconnected', // shown when a participant has left
     //     'notify.connectedOneMember', // show when a participant joined
-    //     'notify.connectedThreePlusMembers', // show when more than 2 participants joined simultaneously
     //     'notify.connectedTwoMembers', // show when two participants joined simultaneously
-    //     'notify.dataChannelClosed', // shown when the bridge channel has been disconnected
+    //     'notify.connectedThreePlusMembers', // show when more than 2 participants joined simultaneously
+    //     'notify.leftOneMember', // show when a participant left
+    //     'notify.leftTwoMembers', // show when two participants left simultaneously
+    //     'notify.leftThreePlusMembers', // show when more than 2 participants left simultaneously
+    //     'notify.grantedTo', // shown when moderator rights were granted to a participant
     //     'notify.hostAskedUnmute', // shown to participant when host asks them to unmute
     //     'notify.invitedOneMember', // shown when 1 participant has been invited
     //     'notify.invitedThreePlusMembers', // shown when 3+ participants have been invited
     //     'notify.invitedTwoMembers', // shown when 2 participants have been invited
     //     'notify.kickParticipant', // shown when a participant is kicked
-    //     'notify.leftOneMember', // show when a participant left
-    //     'notify.leftThreePlusMembers', // show when more than 2 participants left simultaneously
-    //     'notify.leftTwoMembers', // show when two participants left simultaneously
     //     'notify.linkToSalesforce', // shown when joining a meeting with salesforce integration
-    //     'notify.localRecordingStarted', // shown when the local recording has been started
-    //     'notify.localRecordingStopped', // shown when the local recording has been stopped
-    //     'notify.moderationInEffectCSTitle', // shown when user attempts to share content during AV moderation
+    //     'notify.moderationStartedTitle', // shown when AV moderation is activated
+    //     'notify.moderationStoppedTitle', // shown when AV moderation is deactivated
     //     'notify.moderationInEffectTitle', // shown when user attempts to unmute audio during AV moderation
     //     'notify.moderationInEffectVideoTitle', // shown when user attempts to enable video during AV moderation
-    //     'notify.moderator', // shown when user gets moderator privilege
+    //     'notify.moderationInEffectCSTitle', // shown when user attempts to share content during AV moderation
     //     'notify.mutedRemotelyTitle', // shown when user is muted by a remote party
     //     'notify.mutedTitle', // shown when user has been muted upon joining,
     //     'notify.newDeviceAudioTitle', // prompts the user to use a newly detected audio device
     //     'notify.newDeviceCameraTitle', // prompts the user to use a newly detected camera
-    //     'notify.noiseSuppressionFailedTitle', // shown when failed to start noise suppression
     //     'notify.participantWantsToJoin', // shown when lobby is enabled and participant requests to join meeting
-    //     'notify.participantsWantToJoin', // shown when lobby is enabled and participants request to join meeting
     //     'notify.passwordRemovedRemotely', // shown when a password has been removed remotely
     //     'notify.passwordSetRemotely', // shown when a password has been set remotely
     //     'notify.raisedHand', // shown when a partcipant used raise hand,
-    //     'notify.screenShareNoAudio', // shown when the audio could not be shared for the selected screen
-    //     'notify.screenSharingAudioOnlyTitle', // shown when the best performance has been affected by screen sharing
-    //     'notify.selfViewTitle', // show "You can always un-hide the self-view from settings"
     //     'notify.startSilentTitle', // shown when user joined with no audio
-    //     'notify.suboptimalExperienceTitle', // show the browser warning
     //     'notify.unmute', // shown to moderator when user raises hand during AV moderation
     //     'notify.videoMutedRemotelyTitle', // shown when user's video is muted by a remote party,
-    //     'notify.videoUnmuteBlockedTitle', // shown when camera unmute and desktop sharing are blocked
     //     'prejoin.errorDialOut',
     //     'prejoin.errorDialOutDisconnected',
     //     'prejoin.errorDialOutFailed',
@@ -1639,8 +1444,6 @@ var config = {
     // disableFilmstripAutohiding: false,
 
     // filmstrip: {
-    //     // Disable the vertical/horizonal filmstrip.
-    //     disabled: false,
     //     // Disables user resizable filmstrip. Also, allows configuration of the filmstrip
     //     // (width, tiles aspect ratios) through the interfaceConfig options.
     //     disableResizable: false,
@@ -1663,8 +1466,6 @@ var config = {
 
     // Tile view related config options.
     // tileView: {
-    //     // Whether tileview should be disabled.
-    //     disabled: false,
     //     // The optimal number of tiles that are going to be shown in tile view. Depending on the screen size it may
     //     // not be possible to show the exact number of participants specified here.
     //     numberOfVisibleTiles: 25,
@@ -1686,22 +1487,19 @@ var config = {
     //     displayMode: 'all',
     //     // How long the GIF should be displayed on the tile (in milliseconds).
     //     tileTime: 5000,
-    //     // Limit results by rating: g, pg, pg-13, r. Default value: g.
-    //     rating: 'pg',
-    //     // The proxy server url for giphy requests in the web app.
-    //     proxyUrl: 'https://giphy-proxy.example.com',
     // },
 
     // Logging
     // logging: {
     //      // Default log level for the app and lib-jitsi-meet.
     //      defaultLogLevel: 'trace',
-    //      // Option to disable LogCollector.
+    //      // Option to disable LogCollector (which stores the logs on CallStats).
     //      //disableLogCollector: true,
     //      // Individual loggers are customizable.
     //      loggers: {
     //      // The following are too verbose in their logging with the default level.
     //      'modules/RTC/TraceablePeerConnection.js': 'info',
+    //      'modules/statistics/CallStats.js': 'info',
     //      'modules/xmpp/strophe.util.js': 'log',
     // },
 
@@ -1715,54 +1513,9 @@ var config = {
     //     // The server used to support whiteboard collaboration.
     //     // https://github.com/jitsi/excalidraw-backend
     //     collabServerBaseUrl: 'https://excalidraw-backend.example.com',
-    //     // The user access limit to the whiteboard, introduced as a means
-    //     // to control the performance.
-    //     userLimit: 25,
-    //     // The url for more info about the whiteboard and its usage limitations.
-    //     limitUrl: 'https://example.com/blog/whiteboard-limits,
-    // },
-
-    // The watchRTC initialize config params as described :
-    // https://testrtc.com/docs/installing-the-watchrtc-javascript-sdk/#h-set-up-the-sdk
-    // https://www.npmjs.com/package/@testrtc/watchrtc-sdk
-    // watchRTCConfigParams: {
-    //         /** Watchrtc api key */
-    //         rtcApiKey: string;
-    //         /** Identifier for the session */
-    //         rtcRoomId?: string;
-    //         /** Identifier for the current peer */
-    //         rtcPeerId?: string;
-    //         /**
-    //          * ["tag1", "tag2", "tag3"]
-    //          * @deprecated use 'keys' instead
-    //          */
-    //         rtcTags?: string[];
-    //         /** { "key1": "value1", "key2": "value2"} */
-    //         keys?: any;
-    //         /** Enables additional logging */
-    //         debug?: boolean;
-    //         rtcToken?: string;
-    //         /**
-    //          * @deprecated No longer needed. Use "proxyUrl" instead.
-    //          */
-    //         wsUrl?: string;
-    //         proxyUrl?: string;
-    //         console?: {
-    //             level: string;
-    //             override: boolean;
-    //         };
-    //         allowBrowserLogCollection?: boolean;
-    //         collectionInterval?: number;
-    //         logGetStats?: boolean;
     // },
 };
 
-// Temporary backwards compatibility with old mobile clients.
-config.flags = config.flags || {};
-config.flags.sourceNameSignaling = true;
-config.flags.sendMultipleVideoStreams = true;
-config.flags.receiveMultipleVideoStreams = true;
-
 // Set the default values for JaaS customers
 if (enableJaaS) {
     config.dialInNumbersUrl = 'https://conference-mapper.jitsi.net/v1/access/dids';

connection.js

@@ -0,0 +1,254 @@
+/* global APP, JitsiMeetJS, config */
+
+import { jitsiLocalStorage } from '@jitsi/js-utils';
+import Logger from '@jitsi/logger';
+
+import { redirectToTokenAuthService } from './modules/UI/authentication/AuthHandler';
+import { LoginDialog } from './react/features/authentication/components';
+import { isTokenAuthEnabled } from './react/features/authentication/functions';
+import {
+    connectionEstablished,
+    connectionFailed,
+    constructOptions
+} from './react/features/base/connection/actions';
+import { openDialog } from './react/features/base/dialog/actions';
+import { setJWT } from './react/features/base/jwt';
+import {
+    JitsiConnectionErrors,
+    JitsiConnectionEvents
+} from './react/features/base/lib-jitsi-meet';
+import { isFatalJitsiConnectionError } from './react/features/base/lib-jitsi-meet/functions';
+import { getCustomerDetails } from './react/features/jaas/actions.any';
+import { getJaasJWT, isVpaasMeeting } from './react/features/jaas/functions';
+import {
+    setPrejoinDisplayNameRequired
+} from './react/features/prejoin/actions';
+const logger = Logger.getLogger(__filename);
+
+/**
+ * The feature announced so we can distinguish jibri participants.
+ *
+ * @type {string}
+ */
+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]
+ * @param {string} [password]
+ * @returns {Promise<JitsiConnection>} connection if
+ * everything is ok, else error.
+ */
+export async function connect(id, password) {
+    const state = APP.store.getState();
+    let { jwt } = state['features/base/jwt'];
+    const { iAmRecorder, iAmSipGateway } = state['features/base/config'];
+
+    if (!iAmRecorder && !iAmSipGateway && isVpaasMeeting(state)) {
+        await APP.store.dispatch(getCustomerDetails());
+
+        if (!jwt) {
+            jwt = await getJaasJWT(state);
+            APP.store.dispatch(setJWT(jwt));
+        }
+    }
+
+    const connection = new JitsiMeetJS.JitsiConnection(null, jwt, constructOptions(state));
+
+    if (config.iAmRecorder) {
+        connection.addFeature(DISCO_JIBRI_FEATURE);
+    }
+
+    return new Promise((resolve, reject) => {
+        connection.addEventListener(
+            JitsiConnectionEvents.CONNECTION_ESTABLISHED,
+            handleConnectionEstablished);
+        connection.addEventListener(
+            JitsiConnectionEvents.CONNECTION_FAILED,
+            handleConnectionFailed);
+        connection.addEventListener(
+            JitsiConnectionEvents.CONNECTION_FAILED,
+            connectionFailedHandler);
+        connection.addEventListener(
+            JitsiConnectionEvents.DISPLAY_NAME_REQUIRED,
+            displayNameRequiredHandler
+        );
+
+        /* eslint-disable max-params */
+        /**
+         *
+         */
+        function connectionFailedHandler(error, message, credentials, details) {
+        /* eslint-enable max-params */
+            APP.store.dispatch(
+                connectionFailed(
+                    connection, {
+                        credentials,
+                        details,
+                        message,
+                        name: error
+                    }));
+
+            if (isFatalJitsiConnectionError(error)) {
+                connection.removeEventListener(
+                    JitsiConnectionEvents.CONNECTION_FAILED,
+                    connectionFailedHandler);
+            }
+        }
+
+        /**
+         *
+         */
+        function unsubscribe() {
+            connection.removeEventListener(
+                JitsiConnectionEvents.CONNECTION_ESTABLISHED,
+                handleConnectionEstablished);
+            connection.removeEventListener(
+                JitsiConnectionEvents.CONNECTION_FAILED,
+                handleConnectionFailed);
+        }
+
+        /**
+         *
+         */
+        function handleConnectionEstablished() {
+            APP.store.dispatch(connectionEstablished(connection, Date.now()));
+            unsubscribe();
+            resolve(connection);
+        }
+
+        /**
+         *
+         */
+        function handleConnectionFailed(err) {
+            unsubscribe();
+            logger.error('CONNECTION FAILED:', err);
+            reject(err);
+        }
+
+        /**
+         * Marks the display name for the prejoin screen as required.
+         * This can happen if a user tries to join a room with lobby enabled.
+         */
+        function displayNameRequiredHandler() {
+            APP.store.dispatch(setPrejoinDisplayNameRequired());
+        }
+
+        checkForAttachParametersAndConnect(id, password, connection);
+    });
+}
+
+/**
+ * Open JitsiConnection using provided credentials.
+ * If retry option is true it will show auth dialog on PASSWORD_REQUIRED error.
+ *
+ * @param {object} options
+ * @param {string} [options.id]
+ * @param {string} [options.password]
+ * @param {string} [options.roomName]
+ * @param {boolean} [retry] if we should show auth dialog
+ * on PASSWORD_REQUIRED error.
+ *
+ * @returns {Promise<JitsiConnection>}
+ */
+export function openConnection({ id, password, retry, roomName }) {
+    const usernameOverride
+        = jitsiLocalStorage.getItem('xmpp_username_override');
+    const passwordOverride
+        = jitsiLocalStorage.getItem('xmpp_password_override');
+
+    if (usernameOverride && usernameOverride.length > 0) {
+        id = usernameOverride; // eslint-disable-line no-param-reassign
+    }
+    if (passwordOverride && passwordOverride.length > 0) {
+        password = passwordOverride; // eslint-disable-line no-param-reassign
+    }
+
+    return connect(id, password, roomName).catch(err => {
+        if (retry) {
+            const { jwt } = APP.store.getState()['features/base/jwt'];
+
+            if (err === JitsiConnectionErrors.PASSWORD_REQUIRED && !jwt) {
+                return requestAuth(roomName);
+            }
+        }
+
+        throw err;
+    });
+}
+
+/**
+ * Show Authentication Dialog and try to connect with new credentials.
+ * If failed to connect because of PASSWORD_REQUIRED error
+ * then ask for password again.
+ * @param {string} [roomName] name of the conference room
+ *
+ * @returns {Promise<JitsiConnection>}
+ */
+function requestAuth(roomName) {
+    const config = APP.store.getState()['features/base/config'];
+
+    if (isTokenAuthEnabled(config)) {
+        // This Promise never resolves as user gets redirected to another URL
+        return new Promise(() => redirectToTokenAuthService(roomName));
+    }
+
+    return new Promise(resolve => {
+        const onSuccess = connection => {
+            resolve(connection);
+        };
+
+        APP.store.dispatch(
+            openDialog(LoginDialog, { onSuccess,
+                roomName })
+        );
+    });
+}

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,192 @@
+.audio-preview {
+    display: inline-block;
+
+    &-content {
+        background: $menuBG;
+        border-radius: 3px;
+        font-size: 14px;
+        line-height: 24px;
+        max-height: 456px;
+        overflow: auto;
+        width: 300px;
+        &-ul {
+            margin:0;
+            padding:0;
+            list-style-type: none;
+        }
+    }
+
+    &-header {
+        color: #fff;
+        align-items: center;
+        display: flex;
+        margin-top: 8px;
+        padding: 8px 16px;
+
+        &-icon {
+            display: inline-block;
+
+            svg {
+                fill: #fff;
+            }
+        }
+
+        &--bordered {
+            border-bottom: 1px solid #4C4D50;
+        }
+
+        &-text {
+            margin-left: 12px;
+        }
+    }
+
+    &-entry {
+        align-items: center;
+        color: #fff;
+        cursor: pointer;
+        display: flex;
+        padding: 8px 0;
+        margin-left: 48px;
+
+        &--selected {
+            background: #131519;
+            cursor: initial;
+            margin-left: 0;
+            padding-left: 18px;
+        }
+
+        &-text {
+            color: #fff;
+            display: inline-block;
+            line-height: 24px;
+            text-overflow: ellipsis;
+            max-width: 213px;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+    }
+
+    &-speaker {
+        position: relative;
+
+        &-ul {
+            margin:0;
+            padding:0;
+            list-style-type: none;
+        }
+
+        &:hover, &:focus-within, &:focus {
+            .audio-preview-entry {
+                background: #36383C;
+                margin-left: 0;
+                padding-left: 48px;
+
+                &--selected {
+                    padding-left: 18px;
+                    background: $newToolbarBackgroundColor;
+                }
+            }
+
+            .audio-preview-test-button {
+                display: inline-block;
+            }
+
+            .audio-preview-entry-text {
+                max-width: 178px;
+            }
+        }
+
+        &:last-child {
+            padding-bottom: 8px;
+        }
+
+        .audio-preview-entry-text {
+            max-width: 238px;
+        }
+    }
+
+    &-microphone {
+        position: relative;
+
+        &:hover {
+            .audio-preview-entry {
+                background: #36383C;
+                margin-left: 0;
+                padding-left: 48px;
+
+                &--selected {
+                    background: $newToolbarBackgroundColor;
+                    padding-left: 18px;
+                }
+            }
+        }
+
+        &--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;
+
+        & svg {
+            fill: #1C2025;
+        }
+
+        &--check {
+            background: #31B76A;
+            margin-right: 16px;
+        }
+
+        &--exclamation {
+            margin-left: 6px;
+            & svg {
+                fill: #E54B4B;
+            }
+        }
+    }
+
+    &-hr {
+        border-top: 1px solid #4C4D50;
+        border-bottom: 0;
+    }
+
+    &-test-button {
+        display: none;
+        background: #FFF;
+        border: 1px solid #D1DBE8;
+        border-radius: 3px;
+        color: #1C2025;
+        cursor: pointer;
+        font-weight: 600;
+        font-size: 0.8rem;
+        line-height: 24px;
+        padding: 2px 8px;
+        position: absolute;
+        right: 16px;
+        top: 5px;
+    }
+
+    &-meter-mic {
+        position: absolute;
+        right: 16px;
+        top: 14px;
+    }
+
+    // Override @atlaskit/InlineDialog container which is made with styled components
+    & > div:nth-child(2) {
+        outline: none;
+        padding: 0;
+    }
+}

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 {
@@ -115,18 +119,11 @@ form {
 }
 
 .leftwatermark {
-    max-width: 140px;
-    max-height:70px;
     left: 32px;
     top: 32px;
     background-position: center left;
     background-repeat: no-repeat;
     background-size: contain;
-
-    &.no-margin {
-        left:0;
-        top:0;
-    }
 }
 
 .rightwatermark {
@@ -142,7 +139,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;
 }
 
 /**
@@ -167,24 +179,6 @@ form {
 }
 
 ::-webkit-scrollbar-thumb {
-    background: #3D3D3D;
+    background: rgba(0, 0, 0, .5);
     border-radius: 4px;
 }
-
-/* Necessary for the new icons to work properly. */
-.jitsi-icon svg path {
-    fill: inherit !important;
-}
-
-.sr-only {
-    border: 0 !important;
-    clip: rect(1px, 1px, 1px, 1px) !important;
-    clip-path: inset(50%) !important;
-    height: 1px !important;
-    margin: -1px !important;
-    overflow: hidden !important;
-    padding: 0 !important;
-    position: absolute !important;
-    width: 1px !important;
-    white-space: nowrap !important;
-}

css/_chat.scss

@@ -1,6 +1,38 @@
+#sideToolbarContainer {
+    background-color: $chatBackgroundColor;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    transition: width .16s ease-in-out;
+    width: $sidebarWidth;
+    z-index: $sideToolbarContainerZ;
+
+    @media (max-width: 580px) {
+        height: 100vh;
+        height: -webkit-fill-available;
+        left: 0;
+        position: fixed;
+        right: 0;
+        top: 0;
+        width: auto;
+    }
+}
+
+.chat-panel {
+    display: flex;
+    flex-direction: column;
+    // extract header + tabs height
+    height: calc(100% - 119px);
+}
+
+.chat-panel-no-tabs {
+    // extract header height
+    height: calc(100% - 70px);
+}
+
 #chat-conversation-container {
     // extract message input height
-    height: calc(100% - 64px);
+    height: calc(100% - 68px);
     overflow: hidden;
     position: relative;
 }
@@ -44,13 +76,61 @@
     }
 }
 
+#chat-recipient {
+    align-items: center;
+    background-color: $chatPrivateMessageBackgroundColor;
+    display: flex;
+    flex-direction: row;
+    font-weight: 100;
+    padding: 10px;
+
+    span {
+        color: white;
+        display: flex;
+        flex: 1;
+    }
+
+    div {
+        svg {
+            cursor: pointer;
+            fill: white;
+        }
+    }
+
+    &.lobby-chat-recipient {
+        background-color: $chatLobbyMessageBackgroundColor;
+    }
+}
+
+
+.chat-header {
+    height: 70px;
+    position: relative;
+    width: 100%;
+    z-index: 1;
+    display: flex;
+    justify-content: space-between;
+    padding: 16px;
+    align-items: center;
+    box-sizing: border-box;
+    color: #fff;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 32px;
+
+    .jitsi-icon {
+        cursor: pointer;
+    }
+}
+
 .chat-input-container {
-    padding: 0 16px 24px;
+    padding: 0 16px 16px;
 }
 
 #chat-input {
     display: flex;
     align-items: flex-end;
+    padding: 4px;
     position: relative;
 }
 
@@ -59,6 +139,61 @@
     margin-right: 8px;
 }
 
+.smiley-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 38px;
+    width: 38px;
+    margin: 2px;
+    border-radius: 3px;
+}
+
+#chat-input .smiley-button {
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            background-color: #484A4F;
+        }
+    }
+}
+
+.remoteuser {
+    color: #B8C7E0;
+}
+
+.usrmsg-form {
+    flex: 1;
+}
+
+#usermsg {
+    -ms-overflow-style: none;
+    border: 0px none;
+    border-radius:0;
+    box-shadow: none;
+    color: white;
+    font-size: 14px;
+    padding: 10px;
+    overflow-y: auto;
+    resize: none;
+    scrollbar-width: none;
+    width: 100%;
+    word-break: break-word;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+#usermsg:hover {
+    border: 0px none;
+    box-shadow: none;
+}
+#usermsg:focus,
+#usermsg:active {
+    border-bottom: 1px solid white;
+    padding-bottom: 8px;
+ }
+
 #nickname {
     text-align: center;
     color: #9d9d9d;
@@ -66,6 +201,11 @@
     margin: auto 0;
     padding: 0 16px;
 
+    #nickname-title {
+        margin-bottom: 5px;
+        display: block;
+    }
+
     label[for="nickinput"] {
         > div > span {
             color: #B8C7E0;
@@ -78,6 +218,24 @@
     label {
         line-height: 24px;
     }
+
+    .enter-chat {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 16px;
+        height: 40px;
+        background: #1B67EC;
+        border-radius: 3px;
+        color: #fff;
+        cursor: pointer;
+
+        &.disabled {
+            color: #AFB6BC;
+            background: #11336E;
+            pointer-events: none;
+        }
+    }
 }
 
 .mobile-browser {
@@ -85,6 +243,14 @@
         input {
             height: 48px;
         }
+
+        .enter-chat {
+            height: 48px;
+        }
+    }
+
+    #usermsg {
+        font-size: 16px;
     }
 
     .chatmessage .usermessage {
@@ -92,7 +258,54 @@
     }
 }
 
+.sideToolbarContainer {
+    * {
+        -webkit-user-select: text;
+        user-select: text;
+    }
+
+    .display-name {
+        font-size: 12px;
+        font-weight: 600;
+        margin-bottom: 5px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+}
+
+.sr-only {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    clip-path: inset(50%) !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important;
+}
+
 .chatmessage {
+    background-color: $chatRemoteMessageBackgroundColor;
+    border-radius: 0px 6px 6px 6px;
+    box-sizing: border-box;
+    color: white;
+    margin-top: 3px;
+    max-width: 100%;
+    position: relative;
+
+    &.localuser {
+        background-color: $chatLocalMessageBackgroundColor;
+        border-radius: 6px 0px 6px 6px;
+    }
+
+    .usermessage {
+        white-space: pre-wrap;
+        font-size: 14px;
+    }
+
     &.error {
         border-radius: 0px;
 
@@ -107,12 +320,22 @@
         }
     }
 
+    .privatemessagenotice {
+        font-size: 11px;
+        font-weight: 100;
+    }
+
     .messagecontent {
+        margin: 8px;
         max-width: 100%;
         overflow: hidden;
     }
 }
 
+.timestamp {
+    color: #757575;
+}
+
 #smileys {
     font-size: 20pt;
     margin: auto;
@@ -124,6 +347,13 @@
     padding: 2px;
 }
 
+#smileysarea {
+    display: flex;
+    max-height: 150px;
+    min-height: 35px;
+    overflow: hidden;
+}
+
 .smiley-input {
     display: flex;
     position: absolute;
@@ -153,7 +383,7 @@
 
     #smileysContainer {
         background-color: $chatBackgroundColor;
-        border-top: 1px solid #A4B8D1;
+        border-top: 1px solid $chatInputSeparatorColor;
     }
 }
 
@@ -169,15 +399,34 @@
 }
 
 .smileyContainer:hover {
-    background-color: rgba(255, 255, 255, 0.15);
+    background-color: $newToolbarButtonToggleColor;
     border-radius: 5px;
     cursor: pointer;
 }
 
+#usermsg::-webkit-scrollbar-track-piece {
+    background: #3a3a3a;
+}
+
 .chat-message-group {
+    display: flex;
+    flex-direction: column;
+
     &.local {
         align-items: flex-end;
 
+        .chatmessage {
+            background-color: $chatLocalMessageBackgroundColor;
+            border-radius: 6px 0px 6px 6px;
+
+            &.privatemessage {
+                background-color: $chatPrivateMessageBackgroundColor;
+            }
+            &.lobbymessage {
+                background-color: $chatLobbyMessageBackgroundColor;
+            }
+        }
+
         .display-name {
             display: none;
         }
@@ -188,10 +437,58 @@
     }
 
     &.error {
+        .chatmessage {
+            background-color: $defaultWarningColor;
+            border-radius: 0px;
+            font-weight: 100;
+        }
+
         .display-name {
             display: none;
         }
     }
+
+    .chatmessage-wrapper {
+        max-width: 100%;
+
+        .replywrapper {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            .messageactions {
+                align-self: stretch;
+                border-left: 1px solid $chatActionsSeparatorColor;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                padding: 5px;
+
+                &.lobbychatmessageactions {
+                    border-left-color: $chatLobbyActionsSeparatorColor;
+                }
+
+                .toolbox-icon {
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    .chatmessage {
+        background-color: $chatRemoteMessageBackgroundColor;
+        border-radius: 0px 6px 6px 6px;
+        display: inline-block;
+        margin-top: 3px;
+        color: white;
+
+        &.privatemessage {
+            background-color: $chatPrivateMessageBackgroundColor;
+        }
+        &.lobbymessage {
+            background-color: $chatLobbyMessageBackgroundColor;
+        }
+    }
 }
 
 .chat-dialog {

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

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

css/_e2ee.scss

@@ -0,0 +1,21 @@
+#e2ee-section {
+    display: flex;
+    flex-direction: column;
+
+    .description {
+        font-size: 13px;
+        margin: 15px 0;
+    }
+
+    .control-row {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: 15px;
+
+        label {
+            font-size: 14px;
+            font-weight: bold;
+        }
+    }
+}

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/_meter.scss

@@ -3,28 +3,28 @@
         display: inline-block;
 
         & > svg {
-            fill: #525252;
+            fill: #4E5E6C;
             width: 38px;
         }
     }
 
     &.metr--disabled {
         & > svg {
-            fill: #525252;
+            fill: #4E5E6C;
         }
     }
 }
 
 .metr-l-0 {
     rect:first-child {
-        fill: #1EC26A;
+        fill: #31B76A;
     }
 }
 
 @for $i from 1 through 7 {
     .metr-l-#{$i} {
         rect:nth-child(-n+#{$i+1}) {
-            fill: #1EC26A;
+            fill: #31B76A;
         }
     }
 }

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/_notice.scss

@@ -0,0 +1,15 @@
+.notice {
+    position: absolute;
+    left: 50%;
+    z-index: $zindex3;
+    margin-top: 6px;
+
+    @include transform(translateX(-50%));
+
+    &__message {
+        background-color: #000000;
+        color: white;
+        padding: 3px;
+        border-radius: 5px;
+    }
+}

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,3 +1,42 @@
+.participants_pane {
+    background-color: $participantsPaneBgColor;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    transition: width .16s ease-in-out;
+    width: 315px;
+    z-index: $zindex0;
+}
+
+.participants_pane-content {
+    display: flex;
+    flex-direction: column;
+    font-weight: 600;
+    height: 100%;
+    width: 315px;
+
+    & > *:first-child,
+    & > *:last-child {
+        flex-shrink: 0;
+    }
+}
+
+@media (max-width: 580px) {
+    .participants_pane {
+        height: 100vh;
+        height: -webkit-fill-available;
+        left: 0;
+        position: fixed;
+        right: 0;
+        top: 0;
+        width: auto;
+    }
+
+    .participants_pane-content {
+        width: 100%;
+    }
+}
+
 .jitsi-icon {
     &-dominant-speaker {
         background-color: #1EC26A;

css/_polls.scss

@@ -0,0 +1,360 @@
+.poll-dialog {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+
+    h1, span, li, strong {
+        color: #bce;
+    }
+    ol {
+        margin: 0;
+    }
+}
+
+.poll-question-field {
+    padding: 8px 16px;
+    padding-bottom: 24px;
+    border-bottom: 1px solid #525252;
+}
+
+.poll-header {
+    margin-bottom: 8px;
+}
+
+.poll-creator {
+    color: #C2C2C2;
+    font-weight: 600;
+    margin: 4px 0 16px 0;
+}
+
+.poll-answer-container {
+    display: flex;
+    padding: 4px;
+    background: #3D3D3D;
+    border-radius: 3px;
+    margin-bottom: 8px;
+
+    @media (max-width: 580px) {
+        &> span {
+            padding: 8px 0;
+        }
+
+        svg {
+            margin-top: 6px;
+        }
+    }
+}
+
+.poll-answer-field-list, .poll-answer-list, .poll-result-list {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.poll-answer-field-list {
+    padding: 0 16px;
+}
+
+ol.poll-result-list {
+    margin-bottom: 1.5em;
+}
+
+.poll-result-list > li {
+    margin-bottom: 16px;
+}
+
+.poll-answer-field {
+    flex-direction: column;
+    align-items: stretch;
+    margin-bottom: 16;
+
+}
+
+.poll-answer-field:last-child {
+    margin-bottom: 0;
+}
+
+.poll-create-option-row {
+    display: flex;
+    margin-bottom: 4;
+}
+
+// Needed to override atlaskit default blue color
+.poll-create-container .jsYMHu {
+    background: #292929;
+    border-color: #808090;
+    color: #fff // #808090
+}
+
+.poll-add-button {
+    display: flex;
+    justify-content: center;
+    padding: 8px 16px;
+}
+
+.poll-remove-option-button {
+    background: 0 0;
+    border: none;
+    color: #E04757;
+    padding-left: 0;
+}
+
+.poll-create-add-option {
+    border: none;
+    background-color: #292929;
+    padding: 3px;
+    width: 100%;
+}
+
+.poll-icon-button, .poll-drag-handle {
+    .jitsi-icon svg {
+        fill: #929292;
+    }
+}
+
+.poll-drag-handle {
+    background-color: transparent;
+    border: none;
+    cursor: grab;
+    padding-left: 8;
+    padding-top: 8px;
+    display: flex;
+}
+
+.poll-dragged {
+    opacity: 0.5;
+    * {
+        cursor: grabbing !important;
+    }
+}
+
+.poll-question {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 26px;
+}
+
+.poll-answer-voters {
+    font-weight: lighter;
+    list-style-type: none;
+    border: #616161 solid 1px;
+    border-radius: 3px;
+    padding: 2px 6px;
+    margin: 4px 0px 12px;
+    background-color: #616161;
+}
+
+.poll-answer-header {
+    display: flex;
+    justify-content: space-between;
+}
+
+.poll-answer-vote-name {
+    flex-shrink: 1;
+    overflow-wrap: anywhere
+}
+
+.poll-answer-vote-count-container{
+    display: flex;
+}
+
+.poll-answer-vote-count {
+    margin-left: 10px;
+    white-space: nowrap;
+    flex: 1;
+    text-align: right;
+}
+
+.poll-answer-short-results{
+    display: flex;
+    min-width: 10em;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.poll-bar-container, .poll-bar {
+    border-radius: 3px;
+    height: 6px;
+}
+
+.poll-bar-container {
+    background-color: #616161;
+    max-width: 160px;
+    margin-top: 3px;
+    flex: 1;
+}
+
+.poll-bar {
+    background-color: #246FE5;
+}
+
+.poll-message-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 12px;
+    margin-top: 5px;
+}
+
+.poll-notice {
+    font-weight: 100;
+    margin-right: 10px;
+}
+
+.poll-show-details {
+    background-color: transparent;
+    border: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.poll-result-links {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    a.poll-detail-link, a.poll-change-vote-link {
+      color: #669AEC;
+      cursor: pointer;
+      font-weight: 600;
+      text-decoration: none;
+
+      &:hover {
+        color: #669AEC;
+      }
+
+      &:visited {
+        color: #669AEC;
+      }
+    }
+}
+
+
+.polls-pane-content {
+    height: 100%;
+    position: relative;
+}
+
+.pane-content{
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+.empty-pane-icon {
+    width: 50%;
+    padding: 24px;
+}
+
+.empty-pane-icon svg {
+    fill: #3D3D3D;
+    width: 100%;
+    height: auto;
+}
+
+.empty-pane-message {
+    color: #fff;
+    padding: 0 16px;
+    text-align: center;
+
+}
+
+.poll-results, .poll-answer {
+    background: #292929;
+    border-radius: 8px;
+    border: 1px solid #666666;
+    margin: 16px;
+    padding: 16px;
+    word-break: break-word;
+}
+
+.poll-results {
+    color: #fff;
+}
+
+.poll-answer {
+
+    h1, strong ,span {
+        color: #fff;
+    }
+
+    button > span {
+        color: inherit;
+    }
+}
+
+.poll-create-label {
+    color: #C2C2C2;
+    display: flex;
+    font-weight: 400;
+    margin-bottom: 4;
+}
+
+.expandable-input{
+    line-height: 18px;
+    resize: none;
+    width: 100%;
+    height: 40px;
+    box-sizing: border-box;
+    overflow: hidden;
+    border: 1px solid #666666;
+    background-color: #141414;
+    color: #FFF;
+    border-radius: 6px;
+    padding: 10px 16px;
+}
+
+#polls-panel {
+    height: calc(100% - 119px);
+}
+
+.poll-container {
+    font-size: 14px;
+    font-weight: 600;
+    height: calc(100% - 88px);
+    line-height: 20px;
+    overflow-y: auto;
+    position: relative;
+
+    & > * + *:not(.ignore-child) {
+        margin-top: 16px;
+    }
+
+    @media (max-width: 580px) {
+        height: calc(100% - 102px);
+    }
+}
+
+.poll-create-header {
+    color: #fff;
+    font-size: 20px;
+    line-height: 28px;
+    margin: 20px 16px;
+    font-weight: 600;
+}
+
+.poll-create-container {
+    padding: 8px 0;
+}
+
+.poll-create-footer {
+    background-color: #141414;
+    bottom: 0;
+    position: absolute;
+    width: calc(100% - 32px);
+}
+
+.poll-footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 16px 16px 16px;
+}
+
+.poll-answer-footer {
+  padding: 8px 0 0 0;
+}

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/_popup_menu.scss

@@ -5,15 +5,15 @@
 .popupmenu__contents {
     .popupmenu__volume-slider {
             &::-webkit-slider-runnable-track {
-                background-color: #246FE5;
+                background-color: $popupSliderColor;
             }
 
             &::-moz-range-track {
-                background-color: #246FE5;
+                background-color: $popupSliderColor;
             }
 
             &::-ms-fill-lower {
-                background-color: #246FE5;
+                background-color: $popupSliderColor;
             }
         }
 }

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%;
@@ -154,17 +158,17 @@ $reactionCount: 20;
 	}
 
 	70% {
-		transform: translate(40px, -70dvh) scale(1.5);
+		transform: translate(40px, -70vh) scale(1.5);
 		opacity: 1;
 	}
 
 	75% {
-		transform: translate(40px, -70dvh) scale(1.5);
+		transform: translate(40px, -70vh) scale(1.5);
 		opacity: 1;
 	}
 
 	100% {
-		transform: translate(140px, -50dvh) scale(1);
+		transform: translate(140px, -50vh) scale(1);
 		opacity: 0;
 	}
 }
@@ -187,17 +191,17 @@ $reactionCount: 20;
 			}
 
 			70% {
-				transform: translate(#{$topX}px, -#{$topY}dvh) scale(1.5);
+				transform: translate(#{$topX}px, -#{$topY}vh) scale(1.5);
 				opacity: 1;
 			}
 
 			75% {
-				transform: translate(#{$topX}px, -#{$topY}dvh) scale(1.5);
+				transform: translate(#{$topX}px, -#{$topY}vh) scale(1.5);
 				opacity: 1;
 			}
 
 			100% {
-				transform: translate(#{$bottomX}px, -#{$bottomY}dvh) scale(1);
+				transform: translate(#{$bottomX}px, -#{$bottomY}vh) scale(1);
 				opacity: 0;
 			}
 		}

css/_recording.scss

@@ -1,3 +1,7 @@
+.recordingSpinner {
+    vertical-align: top;
+}
+
 .recording-dialog {
     flex: 0;
     flex-direction: column;
@@ -14,7 +18,6 @@
             align-items: center;
             font-size: 14px;
             margin-left: 16px;
-            max-width: 70%;
         }
 
         &.space-top {
@@ -46,6 +49,10 @@
         }
     }
 
+    .recording-switch-disabled {
+        opacity: 0.5;
+    }
+
     .recording-icon-container {
         display: inline-flex;
         align-items: center;
@@ -75,7 +82,7 @@
         background-color: #FFFFFF;
         border-radius: 4px;
         height: 40px;
-        width: 40px;
+        width: 56px;
     }
 
     .jitsi-content-recording-icon-container-without-switch {
@@ -148,7 +155,8 @@
      */
     font-size: 14px;
 
-    .broadcast-dropdown {
+    .broadcast-dropdown,
+    .broadcast-dropdown-trigger {
         text-align: left;
     }
 
@@ -177,7 +185,7 @@
     }
 
     .google-error {
-        color: #c61600;
+        color: $errorColor;
     }
 
     .google-panel {
@@ -188,6 +196,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 {
@@ -14,7 +14,7 @@
             line-height: 24px;
         }
     }
-    .hint-msg {
+    .hint-msg{
         p {
             margin: 26px auto;
             font-weight: 600;
@@ -28,13 +28,7 @@
             width: 120px;
             height: 86px;
             margin: 0 auto;
-            background: transparent;
-        }
-    }
-    .forbidden-msg {
-        p {
-            font-size: 16px;
-            margin-top: 15px;
+            background: $happySoftwareBackground;
         }
     }
 }

css/_responsive.scss

@@ -3,37 +3,38 @@
         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;
                 }
             }
         }
 
+        .welcome-tabs {
+            display: none;
+        }
+
         .header-text-title {
             text-align: center;
         }
@@ -55,6 +56,13 @@
         .welcome-footer-row-block {
             display: block;
         }
+        .welcome-badge {
+            margin-right: 16px;
+        }
+
+        .welcome-footer {
+            display: none;
+        }
     }
 }
 

css/_settings-button.scss

@@ -25,29 +25,29 @@
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
     border-radius: 3px;
     cursor: pointer;
-    padding: 1px;
+    padding: 4px;
     position: absolute;
     right: -4px;
     top: -3px;
 
-    &:hover {
+   &:hover {
         background: #F2F3F4;
         box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 
-        & svg {
-            fill: #040404;
+        &> svg {
+            fill: #000;
         }
 
         &.settings-button-small-icon--disabled {
             background: #36383C;
 
-            & svg {
-                fill: #929292;
-            }
+            &> svg {
+               fill: #929292;
+           }
         }
     }
 
-    & svg {
+    &> svg {
         fill: #fff;
     }
 
@@ -55,7 +55,7 @@
         background-color: #36383c;
         cursor: default;
 
-        & svg {
+        &> svg {
             fill: #929292;
         }
     }

css/_subject.scss

@@ -12,6 +12,7 @@
     &#autoHide.with-always-on {
         overflow: hidden;
         animation: hideSubject forwards .6s ease-out;
+        margin-left: 4px;
 
         & > .subject-info-container {
             justify-content: flex-start;
@@ -34,6 +35,50 @@
     }
 }
 
+.subject-info {
+    align-items: center;
+    display: flex;
+    margin-bottom: 4px;
+    max-width: 80%;
+    height: 28px;
+}
+
+.subject-text {
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 3px 0px 0px 3px;
+    box-sizing: border-box;
+    font-size: 14px;
+    line-height: 28px;
+    padding: 0 16px;
+    height: 28px;
+    max-width: 324px;
+
+    @media (max-width: 300px) {
+        display: none;
+    }
+
+    &--content {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+.subject-timer {
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: 0px 3px 3px 0px;
+    box-sizing: border-box;
+    font-size: 12px;
+    line-height: 28px;
+    min-width: 34px;
+    padding: 0 8px;
+    height: 28px;
+
+    @media (max-width: 300px) {
+        display: none;
+    }
+}
+
 .details-container {
     width: 100%;
     display: flex;

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,22 +104,28 @@
     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;
     margin: 8px 0;
 }
 
-div.hangup-button {
-    background-color: #CB2233;
+.hangup-button {
+    background-color: $hangupColor;
 
     @media (hover: hover) and (pointer: fine) {
         &:hover {
-            background-color: #E04757;
-        }
-
-        &:active {
-            background-color: #A21B29;
+            background-color: $hangupHoverColor;
         }
     }
 
@@ -121,16 +134,12 @@ div.hangup-button {
     }
 }
 
-div.hangup-menu-button {
-    background-color: #CB2233;
+.hangup-menu-button {
+    background-color: $hangupMenuButtonColor;
 
     @media (hover: hover) and (pointer: fine) {
         &:hover {
-            background-color: #E04757;
-        }
-
-        &:active {
-            background-color: #A21B29;
+            background-color: $hangupMenuButtonHoverColor;
         }
     }
 
@@ -167,7 +176,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,33 +1,99 @@
+@import "themes/light";
+
 /**
  * Style variables
  */
 $baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$hangupColor:#DD3849;
+$hangupHoverColor: #F25363;
+$hangupMenuButtonColor:#0056E0;;
+$hangupMenuButtonHoverColor: #246FE5;
+$hangupFontSize: 2em;
 
 /**
  * Size variables.
  */
 
 // 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;
+$overflowMenuItemBackground: #36383C;
+
+
+/**
+ * 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;
+$chatLobbyMessageBackgroundColor: #6A50D3;
+$chatLobbyActionsSeparatorColor: #6A50D3;
+$chatLocalMessageBackgroundColor: #484A4F;
+$chatPrivateMessageBackgroundColor: rgb(153, 69, 77);
+$chatRemoteMessageBackgroundColor:  #242528;
 $sidebarWidth: 315px;
 
-/**
+ /**
  * Misc.
  */
 $borderRadius: 4px;
+$happySoftwareBackground: transparent;
+$desktopAppDragBarHeight: 25px;
 $scrollHeight: 7px;
 
 /**
@@ -37,11 +103,43 @@ $zindex0: 0;
 $zindex1: 1;
 $zindex2: 2;
 $zindex3: 3;
+$toolbarBackgroundZ: 4;
+$labelsZ: 5;
+$subtitlesZ: 7;
+$popoverZ: 8;
+$reloadZ: 20;
+$poweredByZ: 100;
+$ringingZ: 300;
+$sideToolbarContainerZ: 300;
 $toolbarZ: 250;
+$drawerZ: 351;
+$tooltipsZ: 401;
+$dropdownMaskZ: 900;
+$dropdownZ: 901;
+$centeredVideoLabelZ: 1010;
+$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,13 +173,12 @@ $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;
 
-$welcomePageHeaderContainerMarginTop: 104px;
 $welcomePageHeaderContainerDisplay: flex;
-$welcomePageHeaderContainerMargin: $welcomePageHeaderContainerMarginTop auto 0;
+$welcomePageHeaderContainerMargin: 104px 32px 0 32px;
 
 $welcomePageHeaderTextTitleMarginBottom: 0;
 $welcomePageHeaderTextTitleFontSize: 42px;
@@ -115,6 +212,11 @@ $deepLinkingDialInConferenceIdPadding: inherit;
 $deepLinkingDialInConferenceIdBackgroundColor: inherit;
 $deepLinkingDialInConferenceIdBorderRadius: inherit;
 
+$deepLinkingDialInConferenceNameFontSize: inherit;
+$deepLinkingDialInConferenceNameLineHeight: inherit;
+$deepLinkingDialInConferenceNameMarginBottom: none;
+$deepLinkingDialInConferenceNameFontWeight: inherit;
+
 $deepLinkingDialInConferenceDescriptionFontSize: 0.8em;
 $deepLinkingDialInConferenceDescriptionLineHeight: inherit;
 $deepLinkingDialInConferenceDescriptionMarginBottom: none;
@@ -148,6 +250,7 @@ $chromeExtensionBannerRightInMeeeting: 10px;
 /**
 * media type thresholds
 */
+$smallScreen: 700px;
 $verySmallScreen: 500px;
 
 /**

css/_video-preview.scss

@@ -0,0 +1,86 @@
+.video-preview {
+    background: none;
+    display: inline-block;
+
+    &-container {
+        max-height: 344px;
+        background: $menuBG;
+        border-radius: 3px;
+        overflow: auto;
+        padding: 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;
@@ -266,10 +254,10 @@
     #avatarContainer {
         border-radius: 50%;
         display: inline-block;
-        height: 50dvh;
-        margin-top: 25dvh;
+        height: 50vh;
+        margin-top: 25vh;
         overflow: hidden;
-        width: 50dvh;
+        width: 50vh;
 
         #avatar {
             height: 100%;
@@ -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

@@ -10,7 +10,7 @@ body.welcome-page {
     flex-direction: column;
     font-family: $welcomePageFontFamily;
     justify-content: space-between;
-    min-height: 100dvh;
+    min-height: 100vh;
     position: relative;
 
     .header {
@@ -20,6 +20,7 @@ body.welcome-page {
         background-size: $welcomePageHeaderBackgroundSize;
         padding-bottom: $welcomePageHeaderPaddingBottom;
         background-color: #131519;
+        height: 400px;
         overflow: hidden;
         position: relative;
 
@@ -28,16 +29,6 @@ body.welcome-page {
             flex-direction: column;
             margin: $welcomePageHeaderContainerMargin;
             z-index: $zindex2;
-            align-items: center;
-            position: relative;
-            max-width: 688px;
-        }
-
-        .header-watermark-container {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            margin-top: calc(20px - #{$welcomePageHeaderContainerMarginTop});
         }
 
         .header-text-title {
@@ -61,87 +52,26 @@ body.welcome-page {
 
         }
 
-        .not-allow-title-character-div {
-            color: #f03e3e;
-            background-color: #fff;
-            font-size: 12px;
-            font-weight: 600;
-            margin: 10px 0px 5px 0px;
-            text-align: $welcomePageHeaderTextAlign;
-            border-radius: 5px;
-            padding: 5px;
-            .not-allow-title-character-text {
-                float: right;
-                line-height: 1.9;
-            };
-            .jitsi-icon {
-                margin-right: 9px;
-                float: left;
-
-
-                svg {
-                    fill:#f03e3e;
-
-                    & > *:first-child {
-                        fill: none !important;
-                    }
-                }
-            }
-
-        }
-
-        .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;
@@ -150,23 +80,59 @@ 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;
 
-            a {
-                color: inherit;
-                font-weight: 600;
+            p {
+                color: $welcomePageDescriptionColor;
+                float: left;
+                text-align: $welcomePageHeaderTextAlign;
+
+                a {
+                    color: inherit;
+                    font-weight: 600;
+                }
             }
         }
     }
@@ -196,7 +162,7 @@ body.welcome-page {
             margin: 4px;
             display: $welcomePageTabButtonsDisplay;
 
-            [role="tab"] {
+            .tab {
                 background-color: #c7ddff;
                 border-radius: 7px;
                 cursor: pointer;
@@ -205,10 +171,8 @@ body.welcome-page {
                 margin: 2px;
                 padding: 7px 0;
                 text-align: center;
-                color: inherit;
-                border: 0;
 
-                &[aria-selected="true"] {
+                &.selected {
                     background-color: #FFF;
                 }
             }
@@ -236,8 +200,8 @@ body.welcome-page {
         color: $welcomePageDescriptionColor;
         padding: 4px;
         position: absolute;
-        top: calc(35px - #{$welcomePageHeaderContainerMarginTop});
-        right: 0;
+        top: 32px;
+        right: 32px;
         z-index: $zindex2;
 
         * {
@@ -278,17 +242,10 @@ body.welcome-page {
         padding-top: 40px;
     }
 
-    .welcome-card-column {
+    .welcome-card-row {
         display: flex;
         justify-content: center;
-        flex-direction: column;
-        align-items: center;
-        max-width: 688px;
-        margin: auto;
-
-        > div {
-            margin-bottom: 16px;
-        }
+        padding: 0 32px;
     }
 
     .welcome-card-text {
@@ -296,7 +253,7 @@ body.welcome-page {
     }
 
     .welcome-card {
-        width: 100%;
+        width: 49%;
         border-radius: 8px;
 
         &--dark {
@@ -311,6 +268,10 @@ body.welcome-page {
         &--grey {
             background: #F2F3F4;
         }
+
+        &--shadow {
+            box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.15);
+        }
     }
 
     .welcome-footer {

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;
+}