chore(rn,version) bump app version

1) Fix not being able to show multiple dialogs at once in iOS
2) Fix cancelling the login dialog when XMPP auth is enabled without
   guest support

.eslintignore

@@ -3,10 +3,12 @@ build/*
 
 # Third-party source code which we (1) do not want to modify or (2) try to
 # modify as little as possible.
+flow-typed/*
 libs/*
 resources/*
 react/features/stream-effects/virtual-background/vendor/*
-react/features/face-landmarks/resources/*
+load-test/*
+react/features/facial-recognition/resources/*
 
 # ESLint will by default ignore its own configuration file. However, there does
 # not seem to be a reason why we will want to risk being inconsistent with our
@@ -14,4 +16,4 @@ react/features/face-landmarks/resources/*
 !.eslintrc.js
 
 # Not worth it.
-actionTypes.ts
+actionTypes.js

.eslintrc.js

@@ -1,6 +1,5 @@
 module.exports = {
     'extends': [
         '@jitsi/eslint-config'
-    ],
-    'ignorePatterns': [ '*.d.ts' ]
+    ]
 };

.github/workflows/ci.yml

@@ -3,43 +3,23 @@ name: Simple CI
 on: [pull_request]
 
 jobs:
-  lint:
-    name: Lint
+  run-ci:
+    name: Build Frontend
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v2
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v1
       with:
-        node-version: 16
-        cache: 'npm'
+        node-version: '16.x'
     - run: npm install
     - name: Check git status
       run: git status
     - name: Normalize lang files to ensure sorted
       run: npm run lang-sort
+    - name: Check git diff
+      run: git diff
     - name: Check if the git repository is clean
-      run: $(exit $(git status --porcelain --untracked-files=no | head -255 | wc -l)) || (echo "Dirty git tree"; git diff; exit 1)
-    - run: npm run lint:ci
+      run: exit $( git status --porcelain --untracked-files=no | head -255 | wc -l )
+    - 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@v2
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-        cache: 'npm'
-    - run: npm install
-    - run: make
-  macos-ci:
-    name: Build Frontend (macOS)
-    runs-on: macOS-latest
-    steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-        cache: 'npm'
-    - run: npm install
     - run: make

.gitignore

@@ -92,4 +92,3 @@ twa/*.apk
 twa/*.aab
 twa/assetlinks.json
 
-tsconfig.json

CONTRIBUTING.md

@@ -3,8 +3,8 @@ We would love to have your help. Before you start working however, please read
 and follow this short guide.
 
 # Reporting Issues
-Provide as much information as possible. Mention the version of Jitsi Meet,
-Jicofo and JVB you are using, and explain (as detailed as you can) how the
+Provide as much information as possible. Mention the version of Jitsi Meet, 
+Jicofo and JVB you are using, and explain (as detailed as you can) how the 
 problem can be reproduced.
 
 # Code contributions
@@ -130,7 +130,7 @@ When adding a new feature, this would be the usual layout.
 
 ```
 react/features/sample/
-├── actionTypes.ts
+├── actionTypes.js
 ├── actions.js
 ├── components
 │   ├── AnotherComponent.js

Makefile

@@ -2,39 +2,34 @@ BUILD_DIR = build
 CLEANCSS = ./node_modules/.bin/cleancss
 DEPLOY_DIR = libs
 LIBJITSIMEET_DIR = node_modules/lib-jitsi-meet
+LIBFLAC_DIR = node_modules/libflacjs/dist/min
 OLM_DIR = node_modules/@matrix-org/olm
-TF_WASM_DIR = node_modules/@tensorflow/tfjs-backend-wasm/dist/
-RNNOISE_WASM_DIR = node_modules/@jitsi/rnnoise-wasm/dist
-EXCALIDRAW_DIR = node_modules/@jitsi/excalidraw/dist/excalidraw-assets
-EXCALIDRAW_DIR_DEV = node_modules/@jitsi/excalidraw/dist/excalidraw-assets-dev
+RNNOISE_WASM_DIR = node_modules/rnnoise-wasm/dist
 TFLITE_WASM = react/features/stream-effects/virtual-background/vendor/tflite
 MEET_MODELS_DIR  = react/features/stream-effects/virtual-background/vendor/models
-FACE_MODELS_DIR = node_modules/@vladmandic/human-models/models
+FACIAL_MODELS_DIR = react/features/facial-recognition/resources
 NODE_SASS = ./node_modules/.bin/sass
 NPM = npm
 OUTPUT_DIR = .
 STYLES_BUNDLE = css/all.bundle.css
 STYLES_DESTINATION = css/all.css
 STYLES_MAIN = css/main.scss
-ifeq ($(OS),Windows_NT)
-	WEBPACK = .\node_modules\.bin\webpack
-	WEBPACK_DEV_SERVER = .\node_modules\.bin\webpack serve --mode development
-else
-	WEBPACK = ./node_modules/.bin/webpack
-	WEBPACK_DEV_SERVER = ./node_modules/.bin/webpack serve --mode development
-endif
+WEBPACK = ./node_modules/.bin/webpack
+WEBPACK_DEV_SERVER = ./node_modules/.bin/webpack serve --mode development
 
 all: compile deploy clean
 
-compile:
-	NODE_OPTIONS=--max-old-space-size=8192 \
+compile: compile-load-test
 	$(WEBPACK)
 
+compile-load-test:
+	${NPM} install --prefix resources/load-test && ${NPM} run build --prefix resources/load-test
+
 clean:
 	rm -fr $(BUILD_DIR)
 
 .NOTPARALLEL:
-deploy: deploy-init deploy-appbundle deploy-rnnoise-binary deploy-excalidraw deploy-tflite deploy-meet-models deploy-lib-jitsi-meet deploy-olm deploy-tf-wasm deploy-css deploy-local deploy-face-landmarks
+deploy: deploy-init deploy-appbundle deploy-rnnoise-binary deploy-tflite deploy-meet-models deploy-lib-jitsi-meet deploy-libflac deploy-olm deploy-css deploy-local deploy-facial-expressions
 
 deploy-init:
 	rm -fr $(DEPLOY_DIR)
@@ -48,6 +43,8 @@ deploy-appbundle:
 		$(BUILD_DIR)/do_external_connect.min.js.map \
 		$(BUILD_DIR)/external_api.min.js \
 		$(BUILD_DIR)/external_api.min.js.map \
+		$(BUILD_DIR)/flacEncodeWorker.min.js \
+		$(BUILD_DIR)/flacEncodeWorker.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 \
@@ -55,10 +52,8 @@ deploy-appbundle:
 		$(OUTPUT_DIR)/analytics-ga.js \
 		$(BUILD_DIR)/analytics-ga.min.js \
 		$(BUILD_DIR)/analytics-ga.min.js.map \
-		$(BUILD_DIR)/face-landmarks-worker.min.js \
-		$(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)/facial-expressions-worker.min.js \
+		$(BUILD_DIR)/facial-expressions-worker.min.js.map \
 		$(DEPLOY_DIR)
 	cp \
 		$(BUILD_DIR)/close3.min.js \
@@ -74,16 +69,17 @@ deploy-lib-jitsi-meet:
 		$(LIBJITSIMEET_DIR)/modules/browser/capabilities.json \
 		$(DEPLOY_DIR)
 
+deploy-libflac:
+	cp \
+		$(LIBFLAC_DIR)/libflac4-1.3.2.min.js \
+		$(LIBFLAC_DIR)/libflac4-1.3.2.min.js.mem \
+		$(DEPLOY_DIR)
+
 deploy-olm:
 	cp \
 		$(OLM_DIR)/olm.wasm \
 		$(DEPLOY_DIR)
 
-deploy-tf-wasm:
-	cp \
-		$(TF_WASM_DIR)/*.wasm \
-		$(DEPLOY_DIR)
-
 deploy-rnnoise-binary:
 	cp \
 		$(RNNOISE_WASM_DIR)/rnnoise.wasm \
@@ -94,27 +90,14 @@ deploy-tflite:
 		$(TFLITE_WASM)/*.wasm \
 		$(DEPLOY_DIR)
 
-deploy-excalidraw:
-	cp -R \
-		$(EXCALIDRAW_DIR) \
-		$(DEPLOY_DIR)/
-
-deploy-excalidraw-dev:
-	cp -R \
-		$(EXCALIDRAW_DIR_DEV) \
-		$(DEPLOY_DIR)/
-
 deploy-meet-models:
 	cp \
 		$(MEET_MODELS_DIR)/*.tflite \
 		$(DEPLOY_DIR)
 
-deploy-face-landmarks:
+deploy-facial-expressions:
 	cp \
-		$(FACE_MODELS_DIR)/blazeface-front.bin \
-		$(FACE_MODELS_DIR)/blazeface-front.json \
-		$(FACE_MODELS_DIR)/emotion.bin \
-		$(FACE_MODELS_DIR)/emotion.json \
+		$(FACIAL_MODELS_DIR)/* \
 		$(DEPLOY_DIR)
 
 deploy-css:
@@ -126,7 +109,7 @@ deploy-local:
 	([ ! -x deploy-local.sh ] || ./deploy-local.sh)
 
 .NOTPARALLEL:
-dev: deploy-init deploy-css deploy-rnnoise-binary deploy-tflite deploy-meet-models deploy-lib-jitsi-meet deploy-olm deploy-tf-wasm deploy-excalidraw-dev deploy-face-landmarks
+dev: deploy-init deploy-css deploy-rnnoise-binary deploy-tflite deploy-meet-models deploy-lib-jitsi-meet deploy-libflac deploy-olm deploy-facial-expressions
 	$(WEBPACK_DEV_SERVER)
 
 source-package:

README.md

@@ -18,6 +18,7 @@ Amongst others here are the main features Jitsi Meet offers:
 * Web and native SDKs for integration
 * HD audio and video
 * Content sharing
+* End-to-End Encryption
 * Raise hand and reactions
 * Chat with private conversations
 * Polls
@@ -44,7 +45,7 @@ developed you can also sign up for our open beta testing here:
 
 ## Running your own instance
 
-If you'd like to run your own Jitsi Meet installation head over to the [handbook](https://jitsi.github.io/handbook/docs/devops-guide/) to get started.
+If you'd like to run your own Jitsi Meet installation head over to the [handbook](https://jitsi.github.io/handbook/docs/devops-guide/devops-guide-start) to get started.
 
 We provide Debian packages and a comprehensive Docker setup to make deployments as simple as possible.
 Advanced users also have the possibility of building all the components from source.

android/app/build.gradle

@@ -76,7 +76,13 @@ android {
 
 dependencies {
     implementation fileTree(dir: 'libs', include: ['*.jar'])
-    implementation 'androidx.appcompat:appcompat:1.4.1'
+    // https://github.com/facebook/react-native/issues/31572
+    // We can update past 1.4.0 on RN 0.68
+    implementation ('androidx.appcompat:appcompat:1.3.1') {
+        version {
+            strictly '1.3.1'
+        }
+    }
 
     debugImplementation 'com.squareup.leakcanary:leakcanary-android:2.7'
 

android/app/src/main/AndroidManifest.xml

@@ -14,7 +14,7 @@
         android:name="android.content.APP_RESTRICTIONS"
         android:resource="@xml/app_restrictions" />
     <activity
-        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
+        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize"
         android:exported="true"
         android:label="@string/app_name"
         android:launchMode="singleTask"

android/app/src/main/res/drawable/rn_edit_text_material.xml

@@ -1,36 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright (C) 2014 The Android Open Source Project
-
-     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.
--->
-<inset xmlns:android="http://schemas.android.com/apk/res/android"
-       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
-       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
-       android:insetTop="@dimen/abc_edit_text_inset_top_material"
-       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
-
-    <selector>
-        <!-- 
-          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
-          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
-          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
-
-          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
-
-          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
-        -->
-        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
-        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
-    </selector>
-
-</inset>

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

@@ -1,8 +1,8 @@
 <resources>
+    <!-- Base application theme. -->
     <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>
+        <!-- Customize your theme here. -->
+        <item name="android:navigationBarColor">@color/colorPrimaryDark</item>
         <item name="android:windowDisablePreview">true</item>
    </style>
 </resources>

android/build.gradle

@@ -1,5 +1,4 @@
 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
@@ -11,26 +10,19 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:7.0.4'
+        classpath 'com.android.tools.build:gradle:4.2.2'
         classpath 'com.google.gms:google-services:4.3.10'
         classpath 'com.google.firebase:firebase-crashlytics-gradle:2.8.1'
     }
 }
 
 ext {
-    buildToolsVersion = "31.0.0"
+    buildToolsVersion = "30.0.3"
     compileSdkVersion = 31
     minSdkVersion    = 23
     targetSdkVersion = 31
     supportLibVersion = "28.0.0"
-
-    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"
-    }
+    ndkVersion = "21.4.7075529"
 
     // 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

android/gradle.properties

@@ -9,7 +9,7 @@
 
 # Specifies the JVM arguments used for the daemon process.
 # The setting is particularly useful for tweaking memory settings.
-# Default value: -Xmx1024m -XX:MaxPermSize=256m
+# Default value: -Xmx10248m -XX:MaxPermSize=256m
 
 org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
 
@@ -26,5 +26,5 @@ android.useAndroidX=true
 android.enableJetifier=true
 android.bundle.enableUncompressedNativeLibs=false
 
-appVersion=99.0.0
-sdkVersion=99.0.0
+appVersion=22.0.1
+sdkVersion=5.0.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.3.3-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

android/gradlew

@@ -1,7 +1,7 @@
-#!/bin/sh
+#!/usr/bin/env sh
 
 #
-# Copyright © 2015-2021 the original authors.
+# Copyright 2015 the original author or authors.
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -17,101 +17,67 @@
 #
 
 ##############################################################################
-#
-#   Gradle start up script for POSIX generated by Gradle.
-#
-#   Important for running:
-#
-#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
-#       noncompliant, but you have some other compliant shell such as ksh or
-#       bash, then to run this script, type that shell name before the whole
-#       command line, like:
-#
-#           ksh Gradle
-#
-#       Busybox and similar reduced shells will NOT work, because this script
-#       requires all of these POSIX shell features:
-#         * functions;
-#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
-#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
-#         * compound commands having a testable exit status, especially «case»;
-#         * various built-in commands including «command», «set», and «ulimit».
-#
-#   Important for patching:
-#
-#   (2) This script targets any POSIX shell, so it avoids extensions provided
-#       by Bash, Ksh, etc; in particular arrays are avoided.
-#
-#       The "traditional" practice of packing multiple parameters into a
-#       space-separated string is a well documented source of bugs and security
-#       problems, so this is (mostly) avoided, by progressively accumulating
-#       options in "$@", and eventually passing that to Java.
-#
-#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
-#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
-#       see the in-line comments for details.
-#
-#       There are tweaks for specific operating systems such as AIX, CygWin,
-#       Darwin, MinGW, and NonStop.
-#
-#   (3) This script is generated from the Groovy template
-#       https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
-#       within the Gradle project.
-#
-#       You can find Gradle at https://github.com/gradle/gradle/.
-#
+##
+##  Gradle start up script for UN*X
+##
 ##############################################################################
 
 # Attempt to set APP_HOME
-
 # Resolve links: $0 may be a link
-app_path=$0
-
-# Need this for daisy-chained symlinks.
-while
-    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
-    [ -h "$app_path" ]
-do
-    ls=$( ls -ld "$app_path" )
-    link=${ls#*' -> '}
-    case $link in             #(
-      /*)   app_path=$link ;; #(
-      *)    app_path=$APP_HOME$link ;;
-    esac
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
 done
-
-APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
 
 APP_NAME="Gradle"
-APP_BASE_NAME=${0##*/}
+APP_BASE_NAME=`basename "$0"`
 
 # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
 DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
-MAX_FD=maximum
+MAX_FD="maximum"
 
 warn () {
     echo "$*"
-} >&2
+}
 
 die () {
     echo
     echo "$*"
     echo
     exit 1
-} >&2
+}
 
 # OS specific support (must be 'true' or 'false').
 cygwin=false
 msys=false
 darwin=false
 nonstop=false
-case "$( uname )" in                #(
-  CYGWIN* )         cygwin=true  ;; #(
-  Darwin* )         darwin=true  ;; #(
-  MSYS* | MINGW* )  msys=true    ;; #(
-  NONSTOP* )        nonstop=true ;;
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
 esac
 
 CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
@@ -121,9 +87,9 @@ CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
 if [ -n "$JAVA_HOME" ] ; then
     if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
         # IBM's JDK on AIX uses strange locations for the executables
-        JAVACMD=$JAVA_HOME/jre/sh/java
+        JAVACMD="$JAVA_HOME/jre/sh/java"
     else
-        JAVACMD=$JAVA_HOME/bin/java
+        JAVACMD="$JAVA_HOME/bin/java"
     fi
     if [ ! -x "$JAVACMD" ] ; then
         die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
@@ -132,7 +98,7 @@ Please set the JAVA_HOME variable in your environment to match the
 location of your Java installation."
     fi
 else
-    JAVACMD=java
+    JAVACMD="java"
     which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
 
 Please set the JAVA_HOME variable in your environment to match the
@@ -140,95 +106,80 @@ location of your Java installation."
 fi
 
 # Increase the maximum file descriptors if we can.
-if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
-    case $MAX_FD in #(
-      max*)
-        MAX_FD=$( ulimit -H -n ) ||
-            warn "Could not query maximum file descriptor limit"
-    esac
-    case $MAX_FD in  #(
-      '' | soft) :;; #(
-      *)
-        ulimit -n "$MAX_FD" ||
-            warn "Could not set maximum file descriptor limit to $MAX_FD"
-    esac
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
 fi
 
-# Collect all arguments for the java command, stacking in reverse order:
-#   * args from the command line
-#   * the main class name
-#   * -classpath
-#   * -D...appname settings
-#   * --module-path (only if needed)
-#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
 
 # For Cygwin or MSYS, switch paths to Windows format before running java
-if "$cygwin" || "$msys" ; then
-    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
-    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
 
-    JAVACMD=$( cygpath --unix "$JAVACMD" )
+    JAVACMD=`cygpath --unix "$JAVACMD"`
 
-    # Now convert the arguments - kludge to limit ourselves to /bin/sh
-    for arg do
-        if
-            case $arg in                                #(
-              -*)   false ;;                            # don't mess with options #(
-              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
-                    [ -e "$t" ] ;;                      #(
-              *)    false ;;
-            esac
-        then
-            arg=$( cygpath --path --ignore --mixed "$arg" )
-        fi
-        # Roll the args list around exactly as many times as the number of
-        # args, so each arg winds up back in the position where it started, but
-        # possibly modified.
-        #
-        # NB: a `for` loop captures its iteration list before it begins, so
-        # changing the positional parameters here affects neither the number of
-        # iterations, nor the values presented in `arg`.
-        shift                   # remove old arg
-        set -- "$@" "$arg"      # push replacement arg
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
     done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=`expr $i + 1`
+    done
+    case $i in
+        0) set -- ;;
+        1) set -- "$args0" ;;
+        2) set -- "$args0" "$args1" ;;
+        3) set -- "$args0" "$args1" "$args2" ;;
+        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
 fi
 
-# Collect all arguments for the java command;
-#   * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
-#     shell script including quotes and variable substitutions, so put them in
-#     double quotes to make sure that they get re-expanded; and
-#   * put everything else in single quotes, so that it's not re-expanded.
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=`save "$@"`
 
-set -- \
-        "-Dorg.gradle.appname=$APP_BASE_NAME" \
-        -classpath "$CLASSPATH" \
-        org.gradle.wrapper.GradleWrapperMain \
-        "$@"
-
-# Use "xargs" to parse quoted args.
-#
-# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
-#
-# In Bash we could simply go:
-#
-#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
-#   set -- "${ARGS[@]}" "$@"
-#
-# but POSIX shell has neither arrays nor command substitution, so instead we
-# post-process each arg (as a line of input to sed) to backslash-escape any
-# character that might be a shell metacharacter, then use eval to reverse
-# that process (while maintaining the separation between arguments), and wrap
-# the whole thing up as a single "set" statement.
-#
-# This will of course break if any of these variables contains a newline or
-# an unmatched quote.
-#
-
-eval "set -- $(
-        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
-        xargs -n1 |
-        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
-        tr '\n' ' '
-    )" '"$@"'
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
 
 exec "$JAVACMD" "$@"

android/scripts/logcat.sh

@@ -1,11 +0,0 @@
-#!/bin/bash
-
-PKG_NAME=${1:-org.jitsi.meet}
-APP_PID=$(adb shell ps | grep $PKG_NAME | awk '{print $2}')
-
-if [[ -z "$APP_PID" ]]; then
-    echo "App is not running"
-    exit 1
-fi
-
-exec adb logcat --pid=$APP_PID

android/sdk/build.gradle

@@ -34,8 +34,15 @@ android {
 
 dependencies {
     implementation fileTree(dir: 'libs', include: ['*.jar'])
-    implementation 'androidx.appcompat:appcompat:1.4.1'
-    implementation 'androidx.fragment:fragment:1.4.1'
+
+    // https://github.com/facebook/react-native/issues/31572
+    // We can update past 1.4.0 on RN 0.68
+    implementation ('androidx.appcompat:appcompat:1.3.1') {
+        version {
+            strictly '1.3.1'
+        }
+    }
+    implementation 'androidx.fragment:fragment:1.4.0'
     implementation 'androidx.localbroadcastmanager:localbroadcastmanager:1.0.0'
     implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'
 
@@ -44,17 +51,21 @@ dependencies {
     //noinspection GradleDynamicVersion
     implementation 'org.webkit:android-jsc:+'
 
-    implementation 'com.facebook.fresco:animated-gif:2.5.0'
     implementation 'com.dropbox.core:dropbox-core-sdk:4.0.1'
     implementation 'com.jakewharton.timber:timber:4.7.1'
     implementation 'com.squareup.duktape:duktape-android:1.3.0'
     implementation 'com.google.code.gson:gson:2.8.6'
     implementation "androidx.startup:startup-runtime:1.1.0"
 
-    // Only add these packages if we are NOT doing a LIBRE_BUILD
-    if (!rootProject.ext.libreBuild) {
+    if (rootProject.ext.libreBuild) {
+        implementation(project(':react-native-device-info')) {
+            exclude group: 'com.google.firebase'
+            exclude group: 'com.google.android.gms'
+            exclude group: 'com.android.installreferrer'
+        }
+    } else {
         implementation project(':react-native-amplitude')
-        implementation project(':react-native-giphy')
+        implementation project(':react-native-device-info')
         implementation(project(":react-native-google-signin")) {
             exclude group: 'com.google.android.gms'
             exclude group: 'androidx'
@@ -67,19 +78,14 @@ dependencies {
     implementation project(':react-native-community_clipboard')
     implementation project(':react-native-community_netinfo')
     implementation project(':react-native-default-preference')
-    implementation(project(':react-native-device-info')) {
-        exclude group: 'com.google.firebase'
-        exclude group: 'com.google.android.gms'
-        exclude group: 'com.android.installreferrer'
-    }
     implementation project(':react-native-gesture-handler')
     implementation project(':react-native-get-random-values')
     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')
+    implementation project(':react-native-reanimated')
     implementation project(':react-native-safe-area-context')
     implementation project(':react-native-screens')
     implementation project(':react-native-slider')

android/sdk/src/debug/AndroidManifest.xml

@@ -3,6 +3,6 @@
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
 
     <application android:usesCleartextTraffic="true">
-        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false"/>
+        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
     </application>
 </manifest>

android/sdk/src/main/AndroidManifest.xml

@@ -30,9 +30,8 @@
         android:supportsRtl="true">
         <activity
             android:name=".JitsiMeetActivity"
-            android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
+            android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize"
             android:launchMode="singleTask"
-            android:theme="@style/JitsiMeetActivityStyle"
             android:resizeableActivity="true"
             android:supportsPictureInPicture="true"
             android:windowSoftInputMode="adjustResize"/>

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

@@ -0,0 +1,226 @@
+/*
+ * Copyright @ 2018-present 8x8, Inc.
+ * Copyright @ 2018 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.app.Activity;
+import android.content.Context;
+import android.os.Bundle;
+import android.widget.FrameLayout;
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.ReactRootView;
+import com.facebook.react.bridge.ReadableMap;
+import com.rnimmersive.RNImmersiveModule;
+
+import java.lang.reflect.Method;
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.Map;
+import java.util.Set;
+import java.util.UUID;
+import java.util.WeakHashMap;
+
+/**
+ * Base class for all views which are backed by a React Native view.
+ */
+public abstract class BaseReactView<ListenerT>
+    extends FrameLayout {
+
+    /**
+     * Background color used by {@code BaseReactView} and the React Native root
+     * view.
+     */
+    protected static int BACKGROUND_COLOR = 0xFF111111;
+
+    /**
+     * The collection of all existing {@code BaseReactView}s. Used to find the
+     * {@code BaseReactView} when delivering events coming from
+     * {@link ExternalAPIModule}.
+     */
+    static final Set<BaseReactView> views
+        = Collections.newSetFromMap(new WeakHashMap<BaseReactView, Boolean>());
+
+    /**
+     * Finds a {@code BaseReactView} which matches a specific external API
+     * scope.
+     *
+     * @param externalAPIScope - The external API scope associated with the
+     * {@code BaseReactView} to find.
+     * @return The {@code BaseReactView}, if any, associated with the specified
+     * {@code externalAPIScope}; otherwise, {@code null}.
+     */
+    public static BaseReactView findViewByExternalAPIScope(
+            String externalAPIScope) {
+        synchronized (views) {
+            for (BaseReactView view : views) {
+                if (view.externalAPIScope.equals(externalAPIScope)) {
+                    return view;
+                }
+            }
+        }
+
+        return null;
+    }
+
+    /**
+     * Gets all registered React views.
+     *
+     * @return An {@link ArrayList} containing all views currently held by React.
+     */
+    static ArrayList<BaseReactView> getViews() {
+        return new ArrayList<>(views);
+    }
+
+    /**
+     * The unique identifier of this {@code BaseReactView} within the process
+     * for the purposes of {@link ExternalAPIModule}. The name scope was
+     * inspired by postis which we use on Web for the similar purposes of the
+     * iframe-based external API.
+     */
+    protected final String externalAPIScope;
+
+    /**
+     * The listener (e.g. {@link JitsiMeetViewListener}) instance for reporting
+     * events occurring in Jitsi Meet.
+     */
+    @Deprecated
+    private ListenerT listener;
+
+    /**
+     * React Native root view.
+     */
+    private ReactRootView reactRootView;
+
+    public BaseReactView(@NonNull Context context) {
+        super(context);
+
+        setBackgroundColor(BACKGROUND_COLOR);
+
+        ReactInstanceManagerHolder.initReactInstanceManager((Activity)context);
+
+        // Hook this BaseReactView into ExternalAPI.
+        externalAPIScope = UUID.randomUUID().toString();
+        synchronized (views) {
+            views.add(this);
+        }
+    }
+
+    /**
+     * 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}.
+     *
+     * @param appName - The name of the "app" (in React Native terms) to load.
+     * @param props - The React Component props to pass to the app.
+     */
+    public void createReactRootView(String appName, @Nullable Bundle props) {
+        if (props == null) {
+            props = new Bundle();
+        }
+
+        props.putString("externalAPIScope", externalAPIScope);
+
+        if (reactRootView == null) {
+            reactRootView = new ReactRootView(getContext());
+            reactRootView.startReactApplication(
+                ReactInstanceManagerHolder.getReactInstanceManager(),
+                appName,
+                props);
+            reactRootView.setBackgroundColor(BACKGROUND_COLOR);
+            addView(reactRootView);
+        } else {
+            reactRootView.setAppProperties(props);
+        }
+    }
+
+    /**
+     * Releases the React resources (specifically the {@link ReactRootView})
+     * associated with this view.
+     *
+     * MUST be called when the {@link Activity} holding this view is destroyed,
+     * typically in the {@code onDestroy} method.
+     */
+    public void dispose() {
+        if (reactRootView != null) {
+            removeView(reactRootView);
+            reactRootView.unmountReactApplication();
+            reactRootView = null;
+        }
+    }
+
+    /**
+     * Gets the listener set on this {@code BaseReactView}.
+     *
+     * @return The listener set on this {@code BaseReactView}.
+     */
+    @Deprecated
+    public ListenerT getListener() {
+        return listener;
+    }
+
+    /**
+     * Abstract method called by {@link ExternalAPIModule} when an event is
+     * received for this view.
+     *
+     * @param name - The name of the event.
+     * @param data - The details of the event associated with/specific to the
+     * specified {@code name}.
+     */
+    @Deprecated
+    protected abstract void onExternalAPIEvent(String name, ReadableMap data);
+
+    @Deprecated
+    protected void onExternalAPIEvent(
+            Map<String, Method> listenerMethods,
+            String name, ReadableMap data) {
+        ListenerT listener = getListener();
+
+        if (listener != null) {
+            ListenerUtils.runListenerMethod(
+                listener, listenerMethods, name, data);
+        }
+    }
+
+    /**
+     * 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();
+        }
+    }
+
+    /**
+     * Sets a specific listener on this {@code BaseReactView}.
+     *
+     * @param listener The listener to set on this {@code BaseReactView}.
+     */
+    @Deprecated
+    public void setListener(ListenerT listener) {
+        this.listener = listener;
+    }
+}

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

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

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

@@ -48,10 +48,4 @@ public class BroadcastIntentHelper {
         intent.putExtra("muted", muted);
         return intent;
     }
-
-    public static Intent buildSetClosedCaptionsEnabledIntent(boolean enabled) {
-        Intent intent = new Intent(BroadcastAction.Type.SET_CLOSED_CAPTIONS_ENABLED.getAction());
-        intent.putExtra("enabled", enabled);
-        return intent;
-    }
 }

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

@@ -95,25 +95,37 @@ class ExternalAPIModule extends ReactContextBaseJavaModule {
         constants.put("CLOSE_CHAT", BroadcastAction.Type.CLOSE_CHAT.getAction());
         constants.put("SEND_CHAT_MESSAGE", BroadcastAction.Type.SEND_CHAT_MESSAGE.getAction());
         constants.put("SET_VIDEO_MUTED", BroadcastAction.Type.SET_VIDEO_MUTED.getAction());
-        constants.put("SET_CLOSED_CAPTIONS_ENABLED", BroadcastAction.Type.SET_CLOSED_CAPTIONS_ENABLED.getAction());
 
         return constants;
     }
 
     /**
      * Dispatches an event that occurred on the JavaScript side of the SDK to
-     * the native side.
+     * the specified {@link BaseReactView}'s listener.
      *
      * @param name The name of the event.
      * @param data The details/specifics of the event to send determined
      * by/associated with the specified {@code name}.
+     * @param scope
      */
     @ReactMethod
-    public void sendEvent(String name, ReadableMap data) {
+    public void sendEvent(String name, ReadableMap data, String scope) {
         // Keep track of the current ongoing conference.
         OngoingConferenceTracker.getInstance().onExternalAPIEvent(name, data);
 
-        JitsiMeetLogger.d(TAG + " Sending event: " + name + " with data: " + data);
-        broadcastEmitter.sendBroadcast(name, data);
+        // The JavaScript App needs to provide uniquely identifying information
+        // to the native ExternalAPI module so that the latter may match the
+        // former to the native BaseReactView which hosts it.
+        BaseReactView view = BaseReactView.findViewByExternalAPIScope(scope);
+
+        if (view != null) {
+            JitsiMeetLogger.d(TAG + " Sending event: " + name + " with data: " + data);
+            try {
+                view.onExternalAPIEvent(name, data);
+                broadcastEmitter.sendBroadcast(name, data);
+            } catch (Exception e) {
+                JitsiMeetLogger.e(e, TAG + " onExternalAPIEvent: error sending event");
+            }
+        }
     }
 }

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

@@ -1,46 +0,0 @@
-/*
- *  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/JitsiInitializer.java

@@ -15,7 +15,6 @@
  */
 package org.jitsi.meet.sdk;
 
-import android.app.Application;
 import android.content.Context;
 import android.util.Log;
 
@@ -23,7 +22,6 @@ import androidx.annotation.NonNull;
 import androidx.startup.Initializer;
 
 import com.facebook.soloader.SoLoader;
-import org.wonday.orientation.OrientationActivityLifecycle;
 
 import java.util.Collections;
 import java.util.List;
@@ -39,10 +37,6 @@ public class JitsiInitializer implements Initializer<Boolean> {
 
         // Register our uncaught exception handler.
         JitsiMeetUncaughtExceptionHandler.register();
-
-        // Register activity lifecycle handler for the orientation locker module.
-        ((Application) context).registerActivityLifecycleCallbacks(OrientationActivityLifecycle.getInstance());
-
         return true;
     }
 

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

@@ -16,12 +16,10 @@
 
 package org.jitsi.meet.sdk;
 
-import android.app.Activity;
 import android.content.BroadcastReceiver;
 import android.content.Context;
 import android.content.Intent;
 import android.content.IntentFilter;
-import android.content.res.Configuration;
 import android.net.Uri;
 import android.os.Bundle;
 
@@ -34,16 +32,11 @@ import com.facebook.react.modules.core.PermissionListener;
 import org.jitsi.meet.sdk.log.JitsiMeetLogger;
 
 import java.util.HashMap;
+import android.app.Activity;
 
 /**
- * A base activity for SDK users to embed.  It contains all the required wiring
- * between the {@code JitsiMeetView} and the Activity lifecycle methods.
- *
- * In this activity we use a single {@code JitsiMeetView} instance. This
- * instance gives us access to a view which displays the welcome page and the
- * conference itself. All lifecycle methods associated with this Activity are
- * hooked to the React Native subsystem via proxy calls through the
- * {@code JitsiMeetActivityDelegate} static methods.
+ * A base activity for SDK users to embed. It uses {@link JitsiMeetFragment} to do the heavy
+ * lifting and wires the remaining Activity lifecycle methods so it works out of the box.
  */
 public class JitsiMeetActivity extends AppCompatActivity
     implements JitsiMeetActivityInterface {
@@ -59,12 +52,6 @@ public class JitsiMeetActivity extends AppCompatActivity
             onBroadcastReceived(intent);
         }
     };
-
-    /**
-     * Instance of the {@link JitsiMeetView} which this activity will display.
-     */
-    private JitsiMeetView jitsiView;
-
     // Helpers for starting the activity
     //
 
@@ -87,20 +74,11 @@ public class JitsiMeetActivity extends AppCompatActivity
     // Overrides
     //
 
-    @Override
-    public void onConfigurationChanged(Configuration newConfig) {
-        super.onConfigurationChanged(newConfig);
-        Intent intent = new Intent("onConfigurationChanged");
-        intent.putExtra("newConfig", newConfig);
-        this.sendBroadcast(intent);
-    }
-
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
 
         setContentView(R.layout.activity_jitsi_meet);
-        this.jitsiView = findViewById(R.id.jitsiView);
 
         registerForBroadcastMessages();
 
@@ -109,18 +87,6 @@ public class JitsiMeetActivity extends AppCompatActivity
         }
     }
 
-    @Override
-    public void onResume() {
-        super.onResume();
-        JitsiMeetActivityDelegate.onHostResume(this);
-    }
-
-    @Override
-    public void onStop() {
-        JitsiMeetActivityDelegate.onHostPause(this);
-        super.onStop();
-    }
-
     @Override
     public void onDestroy() {
         // Here we are trying to handle the following corner case: an application using the SDK
@@ -131,9 +97,6 @@ public class JitsiMeetActivity extends AppCompatActivity
         // be operational so the external API won't be able to notify the native side that the
         // conference terminated. Thus, try our best to clean up.
         leave();
-
-        this.jitsiView = null;
-
         if (AudioModeModule.useConnectionService()) {
             ConnectionService.abortConnections();
         }
@@ -141,8 +104,6 @@ public class JitsiMeetActivity extends AppCompatActivity
 
         LocalBroadcastManager.getInstance(this).unregisterReceiver(broadcastReceiver);
 
-        JitsiMeetActivityDelegate.onHostDestroy(this);
-
         super.onDestroy();
     }
 
@@ -157,7 +118,9 @@ public class JitsiMeetActivity extends AppCompatActivity
     //
 
     protected JitsiMeetView getJitsiView() {
-        return jitsiView;
+        JitsiMeetFragment fragment
+            = (JitsiMeetFragment) getSupportFragmentManager().findFragmentById(R.id.jitsiFragment);
+        return fragment != null ? fragment.getJitsiView() : null;
     }
 
     public void join(@Nullable String url) {
@@ -169,16 +132,23 @@ public class JitsiMeetActivity extends AppCompatActivity
     }
 
     public void join(JitsiMeetConferenceOptions options) {
-        if (this.jitsiView  != null) {
-            this.jitsiView .join(options);
+        JitsiMeetView view = getJitsiView();
+
+        if (view != null) {
+            view.join(options);
         } else {
             JitsiMeetLogger.w("Cannot join, view is null");
         }
     }
 
-    protected void leave() {
-        Intent hangupBroadcastIntent = BroadcastIntentHelper.buildHangUpIntent();
-        LocalBroadcastManager.getInstance(getApplicationContext()).sendBroadcast(hangupBroadcastIntent);
+    public void leave() {
+        JitsiMeetView view = getJitsiView();
+
+        if (view != null) {
+            view.leave();
+        } else {
+            JitsiMeetLogger.w("Cannot leave, view is null");
+        }
     }
 
     private @Nullable
@@ -219,7 +189,7 @@ public class JitsiMeetActivity extends AppCompatActivity
     protected void onConferenceJoined(HashMap<String, Object> extraData) {
         JitsiMeetLogger.i("Conference joined: " + extraData);
         // Launch the service for the ongoing notification.
-        JitsiMeetOngoingConferenceService.launch(this, extraData);
+        JitsiMeetOngoingConferenceService.launch(this);
     }
 
     protected void onConferenceTerminated(HashMap<String, Object> extraData) {
@@ -282,8 +252,10 @@ public class JitsiMeetActivity extends AppCompatActivity
 
     @Override
     protected void onUserLeaveHint() {
-        if (this.jitsiView  != null) {
-            this.jitsiView .enterPictureInPicture();
+        JitsiMeetView view = getJitsiView();
+
+        if (view != null) {
+            view.enterPictureInPicture();
         }
     }
 

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

@@ -0,0 +1,80 @@
+/*
+ * Copyright @ 2019-present 8x8, Inc.
+ * Copyright @ 2017-2018 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.Intent;
+import android.os.Bundle;
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import androidx.fragment.app.Fragment;
+
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+
+/**
+ * Base {@link Fragment} for applications integrating Jitsi Meet at a higher level. It
+ * contains all the required wiring between the {@code JitsiMeetView} and
+ * the Fragment lifecycle methods already implemented.
+ *
+ * In this fragment we use a single {@code JitsiMeetView} instance. This
+ * instance gives us access to a view which displays the welcome page and the
+ * conference itself. All lifecycle methods associated with this Fragment are
+ * hooked to the React Native subsystem via proxy calls through the
+ * {@code JitsiMeetActivityDelegate} static methods.
+ */
+public class JitsiMeetFragment extends Fragment {
+
+    /**
+     * Instance of the {@link JitsiMeetView} which this activity will display.
+     */
+    private JitsiMeetView view;
+
+    @Nullable
+    @Override
+    public View onCreateView(@NonNull LayoutInflater inflater,
+                             @Nullable ViewGroup container,
+                             @Nullable Bundle savedInstanceState) {
+        return this.view = new JitsiMeetView(getActivity());
+    }
+
+    public JitsiMeetView getJitsiView() {
+        return view;
+    }
+
+    @Override
+    public void onDestroy() {
+        super.onDestroy();
+
+        JitsiMeetActivityDelegate.onHostDestroy(getActivity());
+    }
+
+    @Override
+    public void onResume() {
+        super.onResume();
+
+        JitsiMeetActivityDelegate.onHostResume(getActivity());
+    }
+
+    @Override
+    public void onStop() {
+        super.onStop();
+
+        JitsiMeetActivityDelegate.onHostPause(getActivity());
+    }
+}

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

@@ -17,22 +17,18 @@
 package org.jitsi.meet.sdk;
 
 import android.app.Notification;
-import android.app.NotificationManager;
 import android.app.Service;
 import android.content.ComponentName;
 import android.content.Context;
 import android.content.Intent;
 import android.content.IntentFilter;
 import android.os.Build;
-import android.os.Bundle;
 import android.os.IBinder;
 
 import androidx.localbroadcastmanager.content.LocalBroadcastManager;
 
 import org.jitsi.meet.sdk.log.JitsiMeetLogger;
 
-import java.util.HashMap;
-
 /**
  * This class implements an Android {@link Service}, a foreground one specifically, and it's
  * responsible for presenting an ongoing notification when a conference is in progress.
@@ -43,44 +39,29 @@ import java.util.HashMap;
 public class JitsiMeetOngoingConferenceService extends Service
     implements OngoingConferenceTracker.OngoingConferenceListener {
     private static final String TAG = JitsiMeetOngoingConferenceService.class.getSimpleName();
-    private static final String EXTRA_DATA_KEY = "extraDataKey";
-    private static final String EXTRA_DATA_BUNDLE_KEY = "extraDataBundleKey";
-    private static final String IS_AUDIO_MUTED_KEY = "isAudioMuted";
 
     private final BroadcastReceiver broadcastReceiver = new BroadcastReceiver();
 
     private boolean isAudioMuted;
 
-    public static void launch(Context context, HashMap<String, Object> extraData) {
+    static void launch(Context context) {
         OngoingNotification.createOngoingConferenceNotificationChannel();
 
         Intent intent = new Intent(context, JitsiMeetOngoingConferenceService.class);
-
-        Bundle extraDataBundle = new Bundle();
-        extraDataBundle.putSerializable(EXTRA_DATA_KEY, extraData);
-        intent.putExtra(EXTRA_DATA_BUNDLE_KEY, extraDataBundle);
+        intent.setAction(Action.START.getName());
 
         ComponentName componentName;
-
-        try {
-            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
-                componentName = context.startForegroundService(intent);
-            } else {
-                componentName = context.startService(intent);
-            }
-        } catch (RuntimeException e) {
-            // Avoid crashing due to ForegroundServiceStartNotAllowedException (API level 31).
-            // See: https://developer.android.com/guide/components/foreground-services#background-start-restrictions
-            JitsiMeetLogger.w(TAG + " Ongoing conference service not started", e);
-            return;
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+            componentName = context.startForegroundService(intent);
+        } else {
+            componentName = context.startService(intent);
         }
-
         if (componentName == null) {
             JitsiMeetLogger.w(TAG + " Ongoing conference service not started");
         }
     }
 
-    public static void abort(Context context) {
+    static void abort(Context context) {
         Intent intent = new Intent(context, JitsiMeetOngoingConferenceService.class);
         context.stopService(intent);
     }
@@ -89,15 +70,6 @@ public class JitsiMeetOngoingConferenceService extends Service
     public void onCreate() {
         super.onCreate();
 
-        Notification notification = OngoingNotification.buildOngoingConferenceNotification(isAudioMuted);
-        if (notification == null) {
-            stopSelf();
-            JitsiMeetLogger.w(TAG + " Couldn't start service, notification is null");
-        } else {
-            startForeground(OngoingNotification.NOTIFICATION_ID, notification);
-            JitsiMeetLogger.i(TAG + " Service started");
-        }
-
         OngoingConferenceTracker.getInstance().addListener(this);
 
         IntentFilter intentFilter = new IntentFilter();
@@ -120,45 +92,37 @@ public class JitsiMeetOngoingConferenceService extends Service
 
     @Override
     public int onStartCommand(Intent intent, int flags, int startId) {
-
-        Boolean isAudioMuted = tryParseIsAudioMuted(intent);
-
-        if (isAudioMuted != null) {
-            this.isAudioMuted = Boolean.parseBoolean(intent.getStringExtra("muted"));
-
-            Notification notification = OngoingNotification.buildOngoingConferenceNotification(isAudioMuted);
-            if (notification == null) {
-                stopSelf();
-                JitsiMeetLogger.w(TAG + " Couldn't start service, notification is null");
-            } else {
-                NotificationManager notificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
-                notificationManager.notify(OngoingNotification.NOTIFICATION_ID, notification);
-            }
-        }
-
         final String actionName = intent.getAction();
         final Action action = Action.fromName(actionName);
 
-        // When starting the service, there is no action passed in the intent
-        if (action != null) {
-            switch (action) {
-                case UNMUTE:
-                case MUTE:
-                    Intent muteBroadcastIntent = BroadcastIntentHelper.buildSetAudioMutedIntent(action == Action.MUTE);
-                    LocalBroadcastManager.getInstance(getApplicationContext()).sendBroadcast(muteBroadcastIntent);
-                    break;
-                case HANGUP:
-                    JitsiMeetLogger.i(TAG + " Hangup requested");
-
-                    Intent hangupBroadcastIntent = BroadcastIntentHelper.buildHangUpIntent();
-                    LocalBroadcastManager.getInstance(getApplicationContext()).sendBroadcast(hangupBroadcastIntent);
-
+        switch (action) {
+            case UNMUTE:
+            case MUTE:
+                Intent muteBroadcastIntent = BroadcastIntentHelper.buildSetAudioMutedIntent(action == Action.MUTE);
+                LocalBroadcastManager.getInstance(getApplicationContext()).sendBroadcast(muteBroadcastIntent);
+                break;
+            case START:
+                Notification notification = OngoingNotification.buildOngoingConferenceNotification(isAudioMuted);
+                if (notification == null) {
                     stopSelf();
-                    break;
-                default:
-                    JitsiMeetLogger.w(TAG + " Unknown action received: " + action);
-                    break;
-            }
+                    JitsiMeetLogger.w(TAG + " Couldn't start service, notification is null");
+                } else {
+                    startForeground(OngoingNotification.NOTIFICATION_ID, notification);
+                    JitsiMeetLogger.i(TAG + " Service started");
+                }
+                break;
+            case HANGUP:
+                JitsiMeetLogger.i(TAG + " Hangup requested");
+
+                Intent hangupBroadcastIntent = BroadcastIntentHelper.buildHangUpIntent();
+                LocalBroadcastManager.getInstance(getApplicationContext()).sendBroadcast(hangupBroadcastIntent);
+
+                stopSelf();
+                break;
+            default:
+                JitsiMeetLogger.w(TAG + " Unknown action received: " + action);
+                stopSelf();
+                break;
         }
 
         return START_NOT_STICKY;
@@ -174,6 +138,7 @@ public class JitsiMeetOngoingConferenceService extends Service
     }
 
     public enum Action {
+        START(TAG + ":START"),
         HANGUP(TAG + ":HANGUP"),
         MUTE(TAG + ":MUTE"),
         UNMUTE(TAG + ":UNMUTE");
@@ -198,15 +163,6 @@ public class JitsiMeetOngoingConferenceService extends Service
         }
     }
 
-    private Boolean tryParseIsAudioMuted(Intent intent) {
-        try {
-            HashMap<String, Object> extraData = (HashMap<String, Object>) intent.getBundleExtra(EXTRA_DATA_BUNDLE_KEY).getSerializable(EXTRA_DATA_KEY);
-            return Boolean.parseBoolean((String) extraData.get(IS_AUDIO_MUTED_KEY));
-        } catch (Exception ignored) {
-        }
-        return null;
-    }
-
     private class BroadcastReceiver extends android.content.BroadcastReceiver {
 
         @Override
@@ -215,12 +171,10 @@ public class JitsiMeetOngoingConferenceService extends Service
             Notification notification = OngoingNotification.buildOngoingConferenceNotification(isAudioMuted);
             if (notification == null) {
                 stopSelf();
-                JitsiMeetLogger.w(TAG + " Couldn't update service, notification is null");
+                JitsiMeetLogger.w(TAG + " Couldn't start service, notification is null");
             } else {
-                NotificationManager notificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
-                notificationManager.notify(OngoingNotification.NOTIFICATION_ID, notification);
-
-                JitsiMeetLogger.i(TAG + " audio muted changed");
+                startForeground(OngoingNotification.NOTIFICATION_ID, notification);
+                JitsiMeetLogger.i(TAG + " Service started");
             }
         }
     }

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

@@ -16,33 +16,35 @@
 
 package org.jitsi.meet.sdk;
 
-import android.app.Activity;
 import android.content.Context;
 import android.os.Bundle;
-import android.util.AttributeSet;
-import android.widget.FrameLayout;
-
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 
-import com.facebook.react.ReactRootView;
-import com.rnimmersive.RNImmersiveModule;
+import com.facebook.react.bridge.ReadableMap;
 
 import org.jitsi.meet.sdk.log.JitsiMeetLogger;
 
+import java.lang.reflect.Method;
+import java.util.Map;
 
-public class JitsiMeetView extends FrameLayout {
+
+public class JitsiMeetView extends BaseReactView<JitsiMeetViewListener>
+        implements OngoingConferenceTracker.OngoingConferenceListener {
 
     /**
-     * Background color used by {@code BaseReactView} and the React Native root
-     * view.
+     * The {@code Method}s of {@code JitsiMeetViewListener} by event name i.e.
+     * redux action types.
      */
-    private static final int BACKGROUND_COLOR = 0xFF111111;
+    private static final Map<String, Method> LISTENER_METHODS
+        = ListenerUtils.mapListenerMethods(JitsiMeetViewListener.class);
 
     /**
-     * React Native root view.
+     * The URL of the current conference.
      */
-    private ReactRootView reactRootView;
+    // XXX Currently, one thread writes and one thread reads, so it should be
+    // fine to have this field volatile without additional synchronization.
+    private volatile String url;
 
     /**
      * Helper method to recursively merge 2 {@link Bundle} objects representing React Native props.
@@ -93,32 +95,20 @@ public class JitsiMeetView extends FrameLayout {
 
     public JitsiMeetView(@NonNull Context context) {
         super(context);
-        initialize(context);
-    }
 
-    public JitsiMeetView(Context context, AttributeSet attrs) {
-        super(context, attrs);
-        initialize(context);
-    }
-
-    public JitsiMeetView(Context context, AttributeSet attrs, int defStyle) {
-        super(context, attrs, defStyle);
-        initialize(context);
-    }
-
-    /**
-     * Releases the React resources (specifically the {@link ReactRootView})
-     * associated with this view.
-     *
-     * MUST be called when the {@link Activity} holding this view is destroyed,
-     * typically in the {@code onDestroy} method.
-     */
-    public void dispose() {
-        if (reactRootView != null) {
-            removeView(reactRootView);
-            reactRootView.unmountReactApplication();
-            reactRootView = null;
+        // Check if the parent Activity implements JitsiMeetActivityInterface,
+        // otherwise things may go wrong.
+        if (!(context instanceof JitsiMeetActivityInterface)) {
+            throw new RuntimeException("Enclosing Activity must implement JitsiMeetActivityInterface");
         }
+
+        OngoingConferenceTracker.getInstance().addListener(this);
+    }
+
+    @Override
+    public void dispose() {
+        OngoingConferenceTracker.getInstance().removeListener(this);
+        super.dispose();
     }
 
     /**
@@ -136,7 +126,8 @@ public class JitsiMeetView extends FrameLayout {
                 PictureInPictureModule.class);
         if (pipModule != null
                 && pipModule.isPictureInPictureSupported()
-                && !JitsiMeetActivityDelegate.arePermissionsBeingRequested()) {
+                && !JitsiMeetActivityDelegate.arePermissionsBeingRequested()
+                && this.url != null) {
             try {
                 pipModule.enterPictureInPicture();
             } catch (RuntimeException re) {
@@ -156,40 +147,10 @@ public class JitsiMeetView extends FrameLayout {
     }
 
     /**
-     * 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}.
-     *
-     * @param appName - The name of the "app" (in React Native terms) to load.
-     * @param props - The React Component props to pass to the app.
+     * Leaves the currently active conference.
      */
-    private void createReactRootView(String appName, @Nullable Bundle props) {
-        if (props == null) {
-            props = new Bundle();
-        }
-
-        if (reactRootView == null) {
-            reactRootView = new ReactRootView(getContext());
-            reactRootView.startReactApplication(
-                ReactInstanceManagerHolder.getReactInstanceManager(),
-                appName,
-                props);
-            reactRootView.setBackgroundColor(BACKGROUND_COLOR);
-            addView(reactRootView);
-        } else {
-            reactRootView.setAppProperties(props);
-        }
-    }
-
-    private void initialize(@NonNull Context context) {
-        // Check if the parent Activity implements JitsiMeetActivityInterface,
-        // otherwise things may go wrong.
-        if (!(context instanceof JitsiMeetActivityInterface)) {
-            throw new RuntimeException("Enclosing Activity must implement JitsiMeetActivityInterface");
-        }
-
-        setBackgroundColor(BACKGROUND_COLOR);
-
-        ReactInstanceManagerHolder.initReactInstanceManager((Activity) context);
+    public void leave() {
+        setProps(new Bundle());
     }
 
     /**
@@ -206,7 +167,7 @@ public class JitsiMeetView extends FrameLayout {
         // by leaving the conference. However, React and, respectively,
         // appProperties/initialProperties are declarative expressions i.e. one
         // and the same URL will not trigger an automatic re-render in the
-        // JavaScript source code. The workaround implemented below introduces
+        // JavaScript source code. The workaround implemented bellow introduces
         // "imperativeness" in React Component props by defining a unique value
         // per setProps() invocation.
         props.putLong("timestamp", System.currentTimeMillis());
@@ -214,27 +175,36 @@ public class JitsiMeetView extends FrameLayout {
         createReactRootView("App", props);
     }
 
+    /**
+     * Handler for {@link OngoingConferenceTracker} events.
+     * @param conferenceUrl
+     */
+    @Override
+    public void onCurrentConferenceChanged(String conferenceUrl) {
+        // This property was introduced in order to address
+        // an exception in the Picture-in-Picture functionality which arose
+        // because of delays related to bridging between JavaScript and Java. To
+        // reduce these delays do not wait for the call to be transferred to the
+        // UI thread.
+        this.url = conferenceUrl;
+    }
+
+    /**
+     * Handler for {@link ExternalAPIModule} events.
+     *
+     * @param name The name of the event.
+     * @param data The details/specifics of the event to send determined
+     * by/associated with the specified {@code name}.
+     */
+    @Override
+    @Deprecated
+    protected void onExternalAPIEvent(String name, ReadableMap data) {
+        onExternalAPIEvent(LISTENER_METHODS, name, data);
+    }
+
     @Override
     protected void onDetachedFromWindow() {
         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/JitsiMeetViewListener.java

@@ -0,0 +1,51 @@
+/*
+ * 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 java.util.Map;
+
+/**
+ * Interface for listening to events coming from Jitsi Meet.
+ */
+@Deprecated
+public interface JitsiMeetViewListener {
+    /**
+     * Called when a conference was joined.
+     *
+     * @param data Map with a "url" key with the conference URL.
+     */
+    void onConferenceJoined(Map<String, Object> data);
+
+    /**
+     * Called when the active conference ends, be it because of user choice or
+     * because of a failure.
+     *
+     * @param data Map with an "error" key with the error and a "url" key with
+     * the conference URL. If the conference finished gracefully no `error`
+     * key will be present. The possible values for "error" are described here:
+     * https://github.com/jitsi/lib-jitsi-meet/blob/master/JitsiConnectionErrors.js
+     * https://github.com/jitsi/lib-jitsi-meet/blob/master/JitsiConferenceErrors.js
+     */
+    void onConferenceTerminated(Map<String, Object> data);
+
+    /**
+     * Called before the conference is joined.
+     *
+     * @param data Map with a "url" key with the conference URL.
+     */
+    void onConferenceWillJoin(Map<String, Object> data);
+}

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

@@ -0,0 +1,167 @@
+/*
+ * Copyright @ 2018-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 com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.bridge.ReadableMapKeySetIterator;
+import com.facebook.react.bridge.UiThreadUtil;
+
+import java.lang.reflect.InvocationTargetException;
+import java.lang.reflect.Method;
+import java.lang.reflect.Modifier;
+import java.util.HashMap;
+import java.util.Locale;
+import java.util.Map;
+import java.util.regex.Pattern;
+
+/**
+ * Utility methods for helping with transforming {@link ExternalAPIModule}
+ * events into listener methods. Used with descendants of {@link BaseReactView}.
+ */
+@Deprecated
+public final class ListenerUtils {
+    /**
+     * Extracts the methods defined in a listener and creates a mapping of this
+     * form: event name -> method.
+     *
+     * @param listener - The listener whose methods we want to slurp.
+     * @return A mapping with event names - methods.
+     */
+    public static Map<String, Method> mapListenerMethods(Class listener) {
+        Map<String, Method> methods = new HashMap<>();
+
+        // Figure out the mapping between the listener methods
+        // and the events i.e. redux action types.
+        Pattern onPattern = Pattern.compile("^on[A-Z]+");
+        Pattern camelcasePattern = Pattern.compile("([a-z0-9]+)([A-Z0-9]+)");
+
+        for (Method method : listener.getDeclaredMethods()) {
+            // * The method must be public (because it is declared by an
+            //   interface).
+            // * The method must be/return void.
+            if (!Modifier.isPublic(method.getModifiers())
+                    || !Void.TYPE.equals(method.getReturnType())) {
+                continue;
+            }
+
+            // * The method name must start with "on" followed by a
+            //   capital/uppercase letter (in agreement with the camelcase
+            //   coding style customary to Java in general and the projects of
+            //   the Jitsi community in particular).
+            String name = method.getName();
+
+            if (!onPattern.matcher(name).find()) {
+                continue;
+            }
+
+            // * The method must accept/have exactly 1 parameter of a type
+            //   assignable from HashMap.
+            Class<?>[] parameterTypes = method.getParameterTypes();
+
+            if (parameterTypes.length != 1
+                    || !parameterTypes[0].isAssignableFrom(HashMap.class)) {
+                continue;
+            }
+
+            // Convert the method name to an event name.
+            name
+                = camelcasePattern.matcher(name.substring(2))
+                    .replaceAll("$1_$2")
+                    .toUpperCase(Locale.ROOT);
+            methods.put(name, method);
+        }
+
+        return methods;
+    }
+
+    /**
+     * Executes the right listener method for the given event.
+     * NOTE: This function will run asynchronously on the UI thread.
+     *
+     * @param listener - The listener on which the method will be called.
+     * @param listenerMethods - Mapping with event names and the matching
+     *                        methods.
+     * @param eventName - Name of the event.
+     * @param eventData - Data associated with the event.
+     */
+    public static void runListenerMethod(
+            final Object listener,
+            final Map<String, Method> listenerMethods,
+            final String eventName,
+            final ReadableMap eventData) {
+        // Make sure listener methods are invoked on the UI thread. It
+        // was requested by SDK consumers.
+        if (UiThreadUtil.isOnUiThread()) {
+            runListenerMethodOnUiThread(
+                listener, listenerMethods, eventName, eventData);
+        } else {
+            UiThreadUtil.runOnUiThread(new Runnable() {
+                @Override
+                public void run() {
+                    runListenerMethodOnUiThread(
+                        listener, listenerMethods, eventName, eventData);
+                }
+            });
+        }
+    }
+
+    /**
+     * Helper companion for {@link ListenerUtils#runListenerMethod} which runs
+     * in the UI thread.
+     */
+    private static void runListenerMethodOnUiThread(
+            Object listener,
+            Map<String, Method> listenerMethods,
+            String eventName,
+            ReadableMap eventData) {
+        UiThreadUtil.assertOnUiThread();
+
+        Method method = listenerMethods.get(eventName);
+        if (method != null) {
+            try {
+                method.invoke(listener, toHashMap(eventData));
+            } catch (IllegalAccessException e) {
+                throw new RuntimeException(e);
+            } catch (InvocationTargetException e) {
+                throw new RuntimeException(e);
+            }
+        }
+    }
+
+    /**
+     * Initializes a new {@code HashMap} instance with the key-value
+     * associations of a specific {@code ReadableMap}.
+     *
+     * @param readableMap the {@code ReadableMap} specifying the key-value
+     * associations with which the new {@code HashMap} instance is to be
+     * initialized.
+     * @return a new {@code HashMap} instance initialized with the key-value
+     * associations of the specified {@code readableMap}.
+     */
+    private static HashMap<String, Object> toHashMap(ReadableMap readableMap) {
+        HashMap<String, Object> hashMap = new HashMap<>();
+
+        for (ReadableMapKeySetIterator i = readableMap.keySetIterator();
+                i.hasNextKey();) {
+            String key = i.nextKey();
+
+            hashMap.put(key, readableMap.getString(key));
+        }
+
+        return hashMap;
+    }
+}

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

@@ -43,7 +43,7 @@ class PictureInPictureModule extends ReactContextBaseJavaModule {
     private static final String TAG = NAME;
 
     private static boolean isSupported;
-    private boolean isEnabled;
+    private boolean isDisabled;
 
     public PictureInPictureModule(ReactApplicationContext reactContext) {
         super(reactContext);
@@ -84,7 +84,7 @@ class PictureInPictureModule extends ReactContextBaseJavaModule {
      */
     @TargetApi(Build.VERSION_CODES.O)
     public void enterPictureInPicture() {
-        if (!isEnabled) {
+        if (isDisabled) {
             return;
         }
 
@@ -132,8 +132,8 @@ class PictureInPictureModule extends ReactContextBaseJavaModule {
     }
 
     @ReactMethod
-    public void setPictureInPictureEnabled(Boolean enabled) {
-        this.isEnabled = enabled;
+    public void setPictureInPictureDisabled(Boolean disabled) {
+        this.isDisabled = disabled;
     }
 
     public boolean isPictureInPictureSupported() {

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

@@ -193,7 +193,7 @@ class RNConnectionService extends ReactContextBaseJavaModule {
      * Called by the JS side to update the call's state.
      *
      * @param callUUID - the call's UUID.
-     * @param callState - the map which carries info about the current call's
+     * @param callState - the map which carries infor about the current call's
      * state. See static fields in {@link ConnectionService.ConnectionImpl}
      * prefixed with "KEY_" for the values supported by the Android
      * implementation.

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

@@ -31,12 +31,12 @@ import com.facebook.react.common.LifecycleState;
 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.RTCVideoViewManager;
 import com.oney.WebRTCModule.WebRTCModule;
 
 import org.devio.rn.splashscreen.SplashScreenModule;
-import org.webrtc.EglBase;
+import org.webrtc.SoftwareVideoDecoderFactory;
+import org.webrtc.SoftwareVideoEncoderFactory;
 import org.webrtc.audio.AudioDeviceModule;
 import org.webrtc.audio.JavaAudioDeviceModule;
 
@@ -46,8 +46,6 @@ import java.util.Arrays;
 import java.util.List;
 
 class ReactInstanceManagerHolder {
-    private static final String TAG = ReactInstanceManagerHolder.class.getSimpleName();
-
     /**
      * FIXME (from linter): Do not place Android context classes in static
      * fields (static reference to ReactInstanceManager which has field
@@ -85,14 +83,11 @@ class ReactInstanceManagerHolder {
         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));
+        options.setVideoDecoderFactory(new SoftwareVideoDecoderFactory());
+        options.setVideoEncoderFactory(new SoftwareVideoEncoderFactory());
 
         nativeModules.add(new WebRTCModule(reactContext, options));
 
@@ -120,6 +115,7 @@ class ReactInstanceManagerHolder {
             new com.oblador.performance.PerformancePackage(),
             new com.reactnativecommunity.slider.ReactSliderPackage(),
             new com.brentvatne.react.ReactVideoPackage(),
+            new com.swmansion.reanimated.ReanimatedPackage(),
             new org.reactnative.maskedview.RNCMaskedViewPackage(),
             new com.reactnativecommunity.webview.RNCWebViewPackage(),
             new com.kevinresol.react_native_default_preference.RNDefaultPreferencePackage(),
@@ -131,7 +127,6 @@ class ReactInstanceManagerHolder {
             new com.zmxv.RNSound.RNSoundPackage(),
             new com.th3rdwave.safeareacontext.SafeAreaContextPackage(),
             new com.horcrux.svg.SvgPackage(),
-            new org.wonday.orientation.OrientationPackage(),
             new ReactPackageAdapter() {
                 @Override
                 public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
@@ -150,17 +145,6 @@ class ReactInstanceManagerHolder {
             packages.add((ReactPackage)constructor.newInstance());
         } catch (Exception e) {
             // Ignore any error, the module is not compiled when LIBRE_BUILD is enabled.
-            Log.d(TAG, "Not loading AmplitudeReactNativePackage");
-        }
-
-        // GiphyReactNativeSdkPackage
-        try {
-            Class<?> giphyPackageClass = Class.forName("com.giphyreactnativesdk.GiphyReactNativeSdkPackage");
-            Constructor constructor = giphyPackageClass.getConstructor();
-            packages.add((ReactPackage)constructor.newInstance());
-        } catch (Exception e) {
-            // Ignore any error, the module is not compiled when LIBRE_BUILD is enabled.
-            Log.d(TAG, "Not loading GiphyReactNativeSdkPackage");
         }
 
         // RNGoogleSignInPackage
@@ -170,7 +154,6 @@ class ReactInstanceManagerHolder {
             packages.add((ReactPackage)constructor.newInstance());
         } catch (Exception e) {
             // Ignore any error, the module is not compiled when LIBRE_BUILD is enabled.
-            Log.d(TAG, "Not loading RNGoogleSignInPackage");
         }
 
         return packages;
@@ -256,7 +239,7 @@ class ReactInstanceManagerHolder {
             return;
         }
 
-        Log.d(TAG, "initializing RN with Application");
+        Log.d(ReactInstanceManagerHolder.class.getCanonicalName(), "initializing RN with Application");
 
         reactInstanceManager
             = ReactInstanceManager.builder()

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

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

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

@@ -1,53 +0,0 @@
-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/res/layout/activity_jitsi_meet.xml

@@ -1,13 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
-    android:id="@+id/jitsi_layout"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context=".JitsiMeetActivity">
-
-    <org.jitsi.meet.sdk.JitsiMeetView
-        android:id="@+id/jitsiView"
+    <fragment
         android:layout_width="match_parent"
-        android:layout_height="match_parent" />
+        android:layout_height="match_parent"
+        android:name="org.jitsi.meet.sdk.JitsiMeetFragment"
+        android:id="@+id/jitsiFragment"/>
 </FrameLayout>

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

@@ -1,3 +0,0 @@
-<resources>
-    <style name="JitsiMeetActivityStyle" parent="Theme.AppCompat.Light.NoActionBar"/>
-</resources>

android/settings.gradle

@@ -1,8 +1,6 @@
 rootProject.name = 'jitsi-meet'
 
 include ':app', ':sdk'
-includeBuild('../node_modules/react-native-gradle-plugin')
-
 include ':react-native-amplitude'
 project(':react-native-amplitude').projectDir = new File(rootProject.projectDir, '../node_modules/@amplitude/react-native//android')
 include ':react-native-async-storage'
@@ -23,8 +21,6 @@ include ':react-native-gesture-handler'
 project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
 include ':react-native-get-random-values'
 project(':react-native-get-random-values').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-get-random-values/android')
-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'
@@ -33,12 +29,12 @@ 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'
 project(':react-native-pager-view').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-pager-view/android')
 include ':react-native-performance'
 project(':react-native-performance').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-performance/android')
+include ':react-native-reanimated'
+project(':react-native-reanimated').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-reanimated/android')
 include ':react-native-safe-area-context'
 project(':react-native-safe-area-context').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-safe-area-context/android')
 include ':react-native-screens'

app.js

@@ -1,10 +1,6 @@
 /* application specific logic */
 
-// Re-export jQuery
-// FIXME: Remove this requirement from torture tests.
-import $ from 'jquery';
-
-window.$ = window.jQuery = $;
+import 'jquery';
 
 import '@matrix-org/olm';
 

connection.js

@@ -8,21 +8,18 @@ import { LoginDialog } from './react/features/authentication/components';
 import { isTokenAuthEnabled } from './react/features/authentication/functions';
 import {
     connectionEstablished,
-    connectionFailed,
-    constructOptions
-} from './react/features/base/connection/actions.web';
+    connectionFailed
+} from './react/features/base/connection/actions';
 import { openDialog } from './react/features/base/dialog/actions';
 import { setJWT } from './react/features/base/jwt';
 import {
+    isFatalJitsiConnectionError,
     JitsiConnectionErrors,
     JitsiConnectionEvents
 } from './react/features/base/lib-jitsi-meet';
-import { 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';
+import { isVpaasMeeting, getJaasJWT } from './react/features/jaas/functions';
+import { setPrejoinDisplayNameRequired } from './react/features/prejoin/actions';
 const logger = Logger.getLogger(__filename);
 
 /**
@@ -84,10 +81,12 @@ function checkForAttachParametersAndConnect(id, password, connection) {
  * Try to open connection using provided credentials.
  * @param {string} [id]
  * @param {string} [password]
+ * @param {string} [roomName]
  * @returns {Promise<JitsiConnection>} connection if
  * everything is ok, else error.
  */
-export async function connect(id, password) {
+export async function connect(id, password, roomName) {
+    const connectionConfig = Object.assign({}, config);
     const state = APP.store.getState();
     let { jwt } = state['features/base/jwt'];
     const { iAmRecorder, iAmSipGateway } = state['features/base/config'];
@@ -101,7 +100,19 @@ export async function connect(id, password) {
         }
     }
 
-    const connection = new JitsiMeetJS.JitsiConnection(null, jwt, constructOptions(state));
+    // Use Websocket URL for the web app if configured. Note that there is no 'isWeb' check, because there's assumption
+    // that this code executes only on web browsers/electron. This needs to be changed when mobile and web are unified.
+    let serviceUrl = connectionConfig.websocket || connectionConfig.bosh;
+
+    serviceUrl += `?room=${roomName}`;
+
+    connectionConfig.serviceUrl = serviceUrl;
+
+    if (connectionConfig.websocketKeepAliveUrl) {
+        connectionConfig.websocketKeepAliveUrl += `?room=${roomName}`;
+    }
+
+    const connection = new JitsiMeetJS.JitsiConnection(null, jwt, connectionConfig);
 
     if (config.iAmRecorder) {
         connection.addFeature(DISCO_JIBRI_FEATURE);

css/404.scss

@@ -4,12 +4,11 @@
     text-align: center;
 
     h2 {
-        font-size: 48px;
-        color : #f2f2f2;
+        font-size: 36px;
     }
 
     &__message {
         font-size: 24px;
         margin-top: 20px;
     }
-}
+}

css/_atlaskit_overrides.scss

@@ -28,7 +28,7 @@
 /**
  * Keep overflow menu within screen vertical bounds and make it scrollable.
  */
-.toolbox-button-wth-dialog > div:nth-child(2) {
+ .toolbox-button-wth-dialog > div:nth-child(2) {
     background: $menuBG;
     max-height: calc(100vh - #{$newToolbarSizeWithPadding} - 46px);
     margin-bottom: 4px;
@@ -36,22 +36,19 @@
     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) {
+.video-preview > div:nth-child(2),
+.reactions-menu-popup > div:nth-child(2) {
     margin-bottom: 4px;
     outline: none;
     padding: 0;
 }
 
+.reactions-menu-popup > div:nth-child(2) {
+    margin-bottom: 6px;
+    box-shadow: none;
+}
+
 /**
  * The following selectors keep the chat modal full-size anywhere between 100px
  * and 580px for desktop or 680px for mobile.

css/_aui_reset.scss

@@ -48,7 +48,6 @@ canvas,
 progress,
 video {
   display: inline-block;
-  transition: object-position 0.5s ease 0s;
   vertical-align: baseline;
 }
 audio:not([controls]) {

css/_avatar.scss

@@ -0,0 +1,50 @@
+.avatar {
+    background-color: #AAA;
+    border-radius: 50%;
+    color: rgba(255, 255, 255, 1);
+    font-weight: 100;
+    object-fit: cover;
+
+    &.avatar-small {
+        height: 28px !important;
+        width: 28px !important;
+    }
+
+    &.avatar-xsmall {
+        height: 16px !important;
+        width: 16px !important;
+    }
+
+    .jitsi-icon {
+        transform: translateY(50%);
+    }
+}
+
+.avatar-svg {
+    height: 100%;
+    width: 100%;
+}
+
+.avatar-badge {
+    position: relative;
+
+    &-available::after {
+        @include avatarBadge;
+        background-color: $presence-available;
+    }
+
+    &-away::after {
+        @include avatarBadge;
+        background-color: $presence-away;
+    }
+
+    &-busy::after {
+        @include avatarBadge;
+        background-color: $presence-busy;
+    }
+
+    &-idle::after {
+        @include avatarBadge;
+        background-color: $presence-idle;
+    }
+}

css/_base.scss

@@ -43,6 +43,18 @@ body {
   outline: none;
 }
 
+/**
+ * AtlasKit sets a default margin on the rendered modals, so
+ * when the shift-right class is set when the chat opens, we
+ * pad the modal container in order for the modals to be centered
+ * while also taking the chat size into consideration.
+*/
+@media (min-width: 581px) {
+    .shift-right .atlaskit-portal > div:not(.Tooltip) {
+        padding-left: $sidebarWidth;
+    }
+}
+
 .jitsi-icon {
     &-default svg {
         fill: white;
@@ -152,6 +164,16 @@ form {
     font-size: 12px;
 }
 
+/**
+* Dialogs fade
+*/
+.aui-blanket {
+    background: #000;
+    transition: opacity 0.2s, visibility 0.2s;
+    transition-delay: 0.1s;
+    visibility: visible;
+}
+
 #inviteLinkRef {
     -webkit-user-select: text;
     user-select: text;
@@ -182,8 +204,3 @@ form {
     background: rgba(0, 0, 0, .5);
     border-radius: 4px;
 }
-
-/* Necessary for the new icons to work properly. */
-.jitsi-icon svg path {
-    fill: inherit !important;
-}

css/_chat.scss

@@ -1,20 +1,15 @@
 #sideToolbarContainer {
     background-color: $chatBackgroundColor;
-    flex-shrink: 0;
-    overflow: hidden;
-    position: relative;
-    transition: width .16s ease-in-out;
+    box-sizing: border-box;
+    color: #FFF;
+    height: 100%;
+    position: absolute;
+    top: 0;
     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;
+        width: 100%;
     }
 }
 
@@ -22,7 +17,7 @@
     display: flex;
     flex-direction: column;
     // extract header + tabs height
-    height: calc(100% - 119px);
+    height: calc(100% - 102px);
 }
 
 .chat-panel-no-tabs {
@@ -30,18 +25,12 @@
     height: calc(100% - 70px);
 }
 
-#chat-conversation-container {
-    // extract message input height
-    height: calc(100% - 68px);
-    overflow: hidden;
-    position: relative;
-}
-
 #chatconversation {
     box-sizing: border-box;
     flex: 1;
     font-size: 10pt;
-    height: 100%;
+    // extract message input height
+    height: calc(100% - 68px);
     line-height: 20px;
     overflow: auto;
     padding: 16px;
@@ -96,10 +85,6 @@
             fill: white;
         }
     }
-
-    &.lobby-chat-recipient {
-        background-color: $chatLobbyMessageBackgroundColor;
-    }
 }
 
 
@@ -125,18 +110,63 @@
 
 .chat-input-container {
     padding: 0 16px 16px;
+
+    &.populated {
+        #chat-input {
+            .send-button {
+                background: #1B67EC;
+                cursor: pointer;
+                margin-left: 0.3rem;
+
+                @media (hover: hover) and (pointer: fine) {
+                    &:hover {
+                        background: #3D82FB;
+                    }
+                }
+
+                &:active {
+                    background: #0852D4;
+                }
+
+                path {
+                    fill: #fff;
+                }
+            }
+        }
+    }
 }
 
 #chat-input {
+    border: 1px solid $chatInputSeparatorColor;
     display: flex;
-    align-items: flex-end;
     padding: 4px;
-    position: relative;
+    border-radius: 3px;
+
+    &:focus-within {
+        border: 1px solid #619CF4;
+    }
+
+    * {
+        background-color: transparent;
+    }
 }
 
-.chat-input {
-    flex: 1;
-    margin-right: 8px;
+.send-button-container {
+    display: flex;
+    align-items: center;
+}
+
+.send-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    width: 40px;
+    border-radius: 3px;
+
+    path {
+        fill: $chatInputSeparatorColor;
+    }
 }
 
 .smiley-button {
@@ -356,9 +386,7 @@
 
 .smiley-input {
     display: flex;
-    position: absolute;
-    top: 0;
-    left: 0;
+    position: relative;
 }
 
 .smileys-panel {
@@ -366,7 +394,7 @@
     box-sizing: border-box;
     background-color: rgba(0, 0, 0, .6) !important;
     height: auto;
-    display: flex;
+    display: none;
     overflow: hidden;
     position: absolute;
     width: calc(#{$sidebarWidth} - 32px);
@@ -381,6 +409,11 @@
      */
     transition: max-height 0.3s;
 
+    &.show-smileys {
+        display: flex;
+        max-height: 500%;
+    }
+
     #smileysContainer {
         background-color: $chatBackgroundColor;
         border-top: 1px solid $chatInputSeparatorColor;
@@ -422,9 +455,6 @@
             &.privatemessage {
                 background-color: $chatPrivateMessageBackgroundColor;
             }
-            &.lobbymessage {
-                background-color: $chatLobbyMessageBackgroundColor;
-            }
         }
 
         .display-name {
@@ -464,10 +494,6 @@
                 justify-content: center;
                 padding: 5px;
 
-                &.lobbychatmessageactions {
-                    border-left-color: $chatLobbyActionsSeparatorColor;
-                }
-
                 .toolbox-icon {
                     cursor: pointer;
                 }
@@ -485,9 +511,6 @@
         &.privatemessage {
             background-color: $chatPrivateMessageBackgroundColor;
         }
-        &.lobbymessage {
-            background-color: $chatLobbyMessageBackgroundColor;
-        }
     }
 }
 
@@ -531,3 +554,41 @@
     background: #36383C;
     border-radius: 3px;
 }
+
+.chat-tabs-container {
+    width: 100%;
+    border-bottom: thin solid #292929;
+    display: flex;
+    justify-content: space-around;
+}
+
+.chat-tab {
+    font-size: 1.2em;
+    padding-bottom: 0.5em;
+    width: 50%;
+    text-align: center;
+    color: #8B8B8B;
+    cursor: pointer;
+}
+
+.chat-tab-focus {
+    border-bottom-style: solid;
+    color: #FFF;
+}
+
+.chat-tab-title {
+    margin-right: 8px;
+}
+
+.chat-tab-badge {
+    background-color: #165ecc;
+    border-radius: 50%;
+    box-sizing: border-box;
+    font-weight: 700;
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    padding: 0 4px;
+    color: #FFF;
+}

css/_connection-info.scss

@@ -0,0 +1,50 @@
+%connection-info {
+    font-size: 12px;
+    font-weight: 400;
+
+    td {
+        padding: 2px 0;
+    }
+}
+
+.connection-info
+{
+    @extend %connection-info;
+
+    > table {
+        white-space: nowrap;
+        @extend %connection-info;
+    }
+
+    td:nth-child(n-1) {
+        padding-left: 5px;
+    }
+
+    &__icon {
+        margin-right: 2px;
+    }
+
+    &__download
+    {
+        @extend .connection-info__icon;
+    }
+
+    &__status
+    {
+        font-weight: bold;
+    }
+
+    &__upload
+    {
+        @extend .connection-info__icon;
+    }
+
+    &__mobile {
+      margin: 15px;
+    }
+
+    .connection-actions {
+        margin: 10px auto;
+        text-align: center;
+    }
+}

css/_drawer.scss

@@ -24,6 +24,8 @@
 }
 
 .drawer-menu {
+    background: #242528;
+    border-radius: 16px 16px 0 0;
     overflow-y: auto;
     margin-bottom: env(safe-area-inset-bottom, 0);
     width: 100%;

css/_keyboard-shortcuts.scss

@@ -0,0 +1,10 @@
+.shortcuts-list {
+    list-style-type: none;
+    padding: 0;
+
+    &__item {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: em(7, 14);
+    }
+}

css/_mixins.scss

@@ -195,15 +195,14 @@
 }
 
 /**
- * Change the direction of the current element to LTR, but do not change the direction
- * of its children; Keep them RTL.
+ * Avatar status badge mixin
  */
-@mixin ltr {
-    body[dir=rtl] & {
-        direction: ltr;
-
-        & > * {
-            direction: rtl;
-        }
-    }
+@mixin avatarBadge {
+    border-radius: 50%;
+    content: '';
+    display: block;
+    height: 35%;
+    position: absolute;
+    bottom: 0;
+    width: 35%;
 }

css/_participants-pane.scss

@@ -6,6 +6,10 @@
     transition: width .16s ease-in-out;
     width: 315px;
     z-index: $zindex0;
+
+    &--closed {
+        width: 0;
+    }
 }
 
 .participants_pane-content {
@@ -21,6 +25,10 @@
     }
 }
 
+.participant-avatar {
+    margin: 8px 16px 8px 0;
+}
+
 @media (max-width: 580px) {
     .participants_pane {
         height: 100vh;
@@ -30,6 +38,11 @@
         right: 0;
         top: 0;
         width: auto;
+
+        &--closed {
+            display: none;
+            width: auto;
+        }
     }
 
     .participants_pane-content {

css/_polls.scss

@@ -28,23 +28,32 @@
 }
 
 .poll-answer-container {
-    display: flex;
-    padding: 4px;
     background: #3D3D3D;
     border-radius: 3px;
     margin-bottom: 8px;
 
     @media (max-width: 580px) {
-        &> span {
-            padding: 8px 0;
-        }
+      &> span {
+        padding: 8px 0;
+      }
 
-        svg {
-            margin-top: 6px;
-        }
+      svg {
+        margin-top: 6px;
+      }
     }
 }
 
+.poll-answer-option {
+   font-weight: 400;
+   display: block;
+   margin: 4px;
+
+   @media (max-width: 580px) {
+      font-size: 16px;
+      margin: 11px 8px
+   }
+}
+
 .poll-answer-field-list, .poll-answer-list, .poll-result-list {
     list-style-type: none;
     padding: 0;
@@ -75,11 +84,11 @@ ol.poll-result-list {
 }
 
 .poll-create-option-row {
-    display: flex;
+    display: 'flex';
     margin-bottom: 4;
 }
 
-// Needed to override atlaskit default blue color
+// Needeed to override atlaskit default blue color
 .poll-create-container .jsYMHu {
     background: #292929;
     border-color: #808090;
@@ -282,10 +291,6 @@ ol.poll-result-list {
     h1, strong ,span {
         color: #fff;
     }
-
-    button > span {
-        color: inherit;
-    }
 }
 
 .poll-create-label {
@@ -310,7 +315,7 @@ ol.poll-result-list {
 }
 
 #polls-panel {
-    height: calc(100% - 119px);
+    height: calc(100% - 102px);
 }
 
 .poll-container {
@@ -358,3 +363,82 @@ ol.poll-result-list {
 .poll-answer-footer {
   padding: 8px 0 0 0;
 }
+
+.poll-button {
+   align-items: center;
+   border: 0;
+   border-radius: 6px;
+   font-size: 14px;
+   font-weight: 600;
+   display: flex;
+   justify-content: center;
+   min-height: 40px;
+   width: 100%;
+
+   &:disabled {
+     cursor: initial;
+   }
+
+   @media (max-width: 580px) {
+     min-height: 48px;
+   }
+}
+
+.poll-button-primary {
+    background-color: #0056E0;
+
+    &:hover {
+        background-color: #246FE5;
+    }
+
+    &:active {
+        background-color: #0045B3;
+    }
+
+    &:focus {
+        background-color: #0045B3;
+        border: 3px solid #99BBF3;
+    }
+
+    &:disabled {
+        background-color: #00225A;
+        color: #858585;
+    }
+}
+
+.poll-button-secondary {
+    background-color: #3D3D3D;
+
+    &:hover {
+        background-color: #525252;
+    }
+
+    &:active {
+        background-color: #292929;
+    }
+
+    &:focus {
+        background-color: #292929;
+        border: 3px solid #858585;
+    }
+
+    &:disabled {
+        background-color: #141414;
+        color: #858585;
+    }
+}
+
+.poll-button-short {
+  max-width: 132px;
+}
+
+.poll-button-shortest {
+  max-width: 117px;
+}
+
+.poll-button-short,
+.poll-button-shortest {
+   @media (max-width: 580px) {
+     min-width: 49%;
+   }
+}

css/_popover.scss

@@ -45,7 +45,3 @@
     margin: -16px -24px;
     z-index: $popoverZ;
 }
-
-.excalidraw .popover {
-    margin: 0;
-}

css/_reactions-menu.scss

@@ -7,20 +7,7 @@
 	border-radius: 3px;
 	padding: 16px;
 
-	&.with-gif {
-		width: 328px;
-
-		.reactions-row .toolbox-button:last-of-type {
-			top: 3px;
-
-			& .toolbox-icon.toggled {
-				background-color: #000000;
-			}
-		}
-	}
-
 	&.overflow {
-		width: 100%;
 
 		.toolbox-icon {
 			width: 48px;
@@ -40,10 +27,6 @@
 			.toolbox-button {
 				margin-right: 0;
 			}
-
-			.toolbox-button:last-of-type {
-				top: 0;
-			}
 		}
 	}
 
@@ -73,7 +56,6 @@
 		.toolbox-button {
 			margin-right: 8px;
 			touch-action: manipulation;
-			position: relative;
 		}
 
 		.toolbox-button:last-of-type {
@@ -104,10 +86,6 @@
 	}
 }
 
-.reactions-menu-container {
-	padding-bottom: 6px;
-}
-
 .reactions-animations-container {
 	position: absolute;
 	width: 20%;
@@ -116,7 +94,8 @@
 	height: 0;
 }
 
-.reactions-menu-popup-container {
+.reactions-menu-popup-container,
+.reactions-menu-popup {
 	display: inline-block;
 	position: relative;
 }

css/_recording.scss

@@ -7,46 +7,22 @@
     flex-direction: column;
 
     .recording-header {
-        align-items: center;
         display: flex;
         flex: 0;
         flex-direction: row;
         justify-content: space-between;
+        padding-top: 32px;
 
         .recording-title {
             display: inline-flex;
             align-items: center;
-            font-size: 14px;
+            font-size: 16px;
             margin-left: 16px;
         }
-
-        &.space-top {
-            margin-top: 10px;
-        }
     }
 
     .recording-header-line {
         border-top: 1px solid #5e6d7a;
-        padding-top: 16px;
-        margin-top: 16px;
-    }
-
-    .local-recording-warning {
-        margin-top: 8px;
-        display: block;
-        font-size: 14px;
-        line-height: 20px;
-        padding: 8px 16px;
-
-        &.text {
-            color: #fff;
-            background-color: #3D3D3D;
-        }
-
-        &.notification {
-            color: #040404;
-            background-color: #F8AE1A;
-        }
     }
 
     .recording-switch-disabled {
@@ -58,79 +34,10 @@
         align-items: center;
     }
 
-    .file-sharing-icon-container {
-        background-color: #525252;
-        border-radius: 4px;
-        height: 40px;
-        justify-content: center;
-        width: 42px;
-    }
-
-    .cloud-content-recording-icon-container {
-        background-color: #FFFFFF;
-        border-radius: 4px;
-        height: 40px;
-        justify-content: center;
-        width: 40px;
-    }
-
-    .jitsi-recording-header {
-        margin-bottom: 16px;
-    }
-
-    .jitsi-content-recording-icon-container-with-switch {
-        background-color: #FFFFFF;
-        border-radius: 4px;
-        height: 40px;
-        width: 56px;
-    }
-
-    .jitsi-content-recording-icon-container-without-switch {
-        background-color: #FFFFFF;
-        border-radius: 4px;
-        height: 40px;
-        width: 46px;
-    }
-
     .recording-icon {
-        height: 40px;
+        width: 32px;
+        height: 32px;
         object-fit: contain;
-        width: 40px;
-    }
-
-    .content-recording-icon {
-        height: 18px;
-        margin: 10px 0 0 10px;
-        object-fit: contain;
-        width: 18px;
-    }
-
-    .recording-file-sharing-icon {
-        height: 18px;
-        object-fit: contain;
-        width: 18px;
-    }
-
-    .recording-info{
-        background-color: #FFD740;
-        color: black;
-        display: inline-flex;
-        margin: 32px 0;
-        width: 100%;
-    }
-
-    .recording-info-icon {
-        align-self: center;
-        height: 14px;
-        margin: 0 24px 0 16px;
-        object-fit: contain;
-        width: 14px;
-    }
-
-    .recording-info-title {
-        display: inline-flex;
-        font-size: 14px;
-        width: 290px
     }
 
     .recording-switch {

css/_settings-button.scss

@@ -25,7 +25,7 @@
     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;
@@ -60,15 +60,3 @@
         }
     }
 }
-
-.settings-button-small-icon-container {
-    position: absolute;
-    right: -4px;
-    top: -3px;
-
-    & .settings-button-small-icon {
-        position: relative;
-        top: 0;
-        right: 0;
-    }
-}

css/_subject.scss

@@ -12,7 +12,6 @@
     &#autoHide.with-always-on {
         overflow: hidden;
         animation: hideSubject forwards .6s ease-out;
-        margin-left: 4px;
 
         & > .subject-info-container {
             justify-content: flex-start;
@@ -89,6 +88,10 @@
     max-width: calc(100% - 24px);
 }
 
+.shift-right .details-container {
+    margin-left: calc(#{$sidebarWidth} / 2);
+}
+
 @keyframes hideSubject {
     0% {
         max-width: 100%;

css/_toolbars.scss

@@ -39,6 +39,13 @@
     &.no-buttons {
         display: none;
     }
+
+    @media (min-width: 581px) {
+        &.shift-right {
+            margin-left: $sidebarWidth;
+            width: calc(100% - #{$sidebarWidth});
+        }
+    }
 }
 
 .toolbox-content {
@@ -92,10 +99,6 @@
     max-width: 100%;
     pointer-events: all;
     border-radius: 6px;
-
-    .toolbox-content-items {
-        @include ltr;
-    }
 }
 
 .toolbox-content-wrapper::after {
@@ -134,20 +137,6 @@
     }
 }
 
-.hangup-menu-button {
-    background-color: $hangupMenuButtonColor;
-
-    @media (hover: hover) and (pointer: fine) {
-        &:hover {
-            background-color: $hangupMenuButtonHoverColor;
-        }
-    }
-
-    svg {
-        fill: #fff;
-    }
-}
-
 .profile-button-avatar {
     align-items: center;
 }
@@ -194,7 +183,6 @@
         }
 
         .toolbox-content-items {
-            @include ltr;
             border-radius: 0;
             display: flex;
             justify-content: space-evenly;

css/_variables.scss

@@ -6,8 +6,7 @@
 $baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $hangupColor:#DD3849;
 $hangupHoverColor: #F25363;
-$hangupMenuButtonColor:#0056E0;;
-$hangupMenuButtonHoverColor: #246FE5;
+$hangupFontSize: 2em;
 
 /**
  * Size variables.
@@ -29,6 +28,10 @@ $defaultSemiDarkColor: #ACACAC;
 $defaultDarkColor: #2b3d5c;
 $defaultWarningColor: rgb(215, 121, 118);
 $participantsPaneBgColor: #141414;
+$presence-available: rgb(110, 176, 5);
+$presence-away: rgb(250, 201, 20);
+$presence-busy: rgb(233, 0, 27);
+$presence-idle: rgb(172, 172, 172);
 
 /**
  * Toolbar
@@ -44,6 +47,7 @@ $newToolbarSizeMobile: 60px;
 $newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px);
 $toolbarTitleFontSize: 19px;
 $overflowMenuItemColor: #fff;
+$overflowMenuItemBackground: #36383C;
 
 
 /**
@@ -79,14 +83,12 @@ $modalTextColor: #333;
 $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;
@@ -101,6 +103,8 @@ $zindex0: 0;
 $zindex1: 1;
 $zindex2: 2;
 $zindex3: 3;
+$toolbarBackgroundZ: 4;
+$labelsZ: 5;
 $subtitlesZ: 7;
 $popoverZ: 8;
 $reloadZ: 20;
@@ -109,7 +113,10 @@ $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.
@@ -243,6 +250,7 @@ $chromeExtensionBannerRightInMeeeting: 10px;
 /**
 * media type thresholds
 */
+$smallScreen: 700px;
 $verySmallScreen: 500px;
 
 /**

css/_video-preview.scss

@@ -1,14 +1,13 @@
 .video-preview {
     background: none;
     display: inline-block;
+    max-height: 344px;
 
     &-container {
-        max-height: 344px;
         background: $menuBG;
         border-radius: 3px;
         overflow: auto;
         padding: 8px;
-        margin-bottom: 8px;
     }
 
     &-entry {

css/_videolayout_default.scss

@@ -6,7 +6,6 @@
 }
 
 #layout_wrapper {
-    @include ltr;
     display: flex;
     height: 100%;
 }
@@ -45,6 +44,15 @@
     position: relative;
     text-align: center;
     overflow: 'hidden';
+
+    @media (min-width: 581px) {
+        &.shift-right {
+            &#largeVideoContainer {
+                margin-left: $sidebarWidth;
+                width: calc(100% - #{$sidebarWidth});
+            }
+        }
+    }
 }
 
 #localVideoWrapper {

css/aui-components/dropdown.scss

@@ -0,0 +1,68 @@
+.select2-container.aui-select2-container {
+    background-color: transparent !important;
+    margin-top: 2px;
+
+    a.select2-choice {
+        height: 28px !important;
+        line-height: 18px !important;
+        width: 100% !important;
+        background-color: $selectBg !important;
+        border-color: $selectBg !important;
+        color: $selectFontColor !important;
+        text-shadow: none !important;
+        font-size: 12px !important;
+        margin: 0 auto !important;
+
+        &:after {
+            border-top-color: $selectFontColor;
+        }
+    }
+
+    &.select2-dropdown-open{
+        a.select2-choice {
+            background-color: $selectActiveBg !important;
+            border-color: $selectActiveBg !important;
+        }
+    }
+}
+
+.select2-drop.aui-select2-drop.aui-style-default {
+    z-index: $dropdownZ;
+    background-color: $selectActiveBg;
+    border-color: $selectActiveBg;
+
+    .select2-results{
+        background-color: $selectActiveBg;
+        border-color: $selectActiveBg;
+
+        &::-webkit-scrollbar {
+            background-color: transparent;
+        }
+        &::-webkit-scrollbar-track {
+            background-color: transparent;
+        }
+        &::-webkit-scrollbar-track-piece {
+            background-color: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+            background-color: $selectActiveItemBg;
+        }
+
+        .select2-result{
+            &.select2-highlighted{
+                background-color: $selectActiveItemBg;
+            }
+
+            .select2-result-label{
+                font-size: 12px;
+                color: $selectFontColor !important;
+                line-height: 20px;
+            }
+        }
+
+    }
+}
+
+.select2-drop-mask {
+    z-index: $dropdownMaskZ;
+}

css/deep-linking/_desktop.scss

@@ -68,12 +68,6 @@
                 }
                 .buttons {
                     margin-top: 16px;
-                    display: flex;
-                    align-items: center;
-
-                    &>button:first-child {
-                        margin-right: 8px;
-                    }
                 }
             }
         }

css/filmstrip/_horizontal_filmstrip.scss

@@ -48,8 +48,7 @@
         /**
          * The local video identifier.
          */
-        &#filmstripLocalVideo,
-        &#filmstripLocalScreenShare {
+        &#filmstripLocalVideo {
             align-self: flex-end;
             display: block;
             margin-bottom: 8px;

css/filmstrip/_tile_view.scss

@@ -2,9 +2,12 @@
  * CSS styles that are specific to the filmstrip that shows the thumbnail tiles.
  */
 .tile-view {
+
     .remote-videos {
         align-items: center;
         box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
         overscroll-behavior: contain;
     }
 
@@ -39,6 +42,17 @@
         top: 0;
         width: 100%;
 
+        @media (min-width: 581px) {
+            &.shift-right {
+                margin-left: $sidebarWidth;
+                width: calc(100% - #{$sidebarWidth});
+
+                .remote-videos {
+                    width: calc(100vw - #{$sidebarWidth});
+                }
+            }
+        }
+
         &.collapse {
             #remoteVideos {
                 height: calc(100% - #{$newToolbarSizeMobile}) !important;
@@ -60,10 +74,6 @@
         display: block;
     }
 
-    .filmstrip__videos.has-scroll {
-        padding-left: 7px;
-    }
-
     .remote-videos {
         box-sizing: border-box;
 
@@ -81,6 +91,7 @@
             margin-top: auto;
             margin-bottom: auto;
             justify-content: center;
+            position: absolute;
 
             .videocontainer {
                 border: 0;

css/filmstrip/_tile_view_overrides.scss

@@ -2,9 +2,7 @@
  * Various overrides outside of the filmstrip to style the app to support a
  * tiled thumbnail experience.
  */
-.tile-view,
-.whiteboard-container,
-.stage-filmstrip {
+.tile-view {
     /**
      * Let the avatar grow with the tile.
      */
@@ -17,9 +15,9 @@
      * Hide various features that should not be displayed while in tile view.
      */
     #dominantSpeaker,
+    #filmstripLocalVideoThumbnail,
     #largeVideoElementsContainer,
-    #sharedVideo,
-    .stage-participant-label {
+    #sharedVideo {
         display: none;
     }
 

css/filmstrip/_vertical_filmstrip.scss

@@ -1,177 +1,141 @@
-.vertical-filmstrip, .stage-filmstrip {
-    span:not(.tile-view) .filmstrip {
-        &.hide-videos {
-            .remote-videos {
-                & > div {
-                    opacity: 0;
-                    pointer-events: none;
-                }
-            }
-        }
-
-        /*
-         * Firefox sets flex items to min-height: auto and min-width: auto,
-         * preventing flex children from shrinking like they do on other browsers.
-         * Setting min-height and min-width 0 is a workaround for the issue so
-         * Firefox behaves like other browsers.
-         * https://bugzilla.mozilla.org/show_bug.cgi?id=1043520
-         */
-        @mixin minHWAutoFix() {
-            min-height: 0;
-            min-width: 0;
-        }
-
-        @extend %align-right;
-        align-items: flex-end;
-        bottom: 0;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column-reverse;
-        height: 100%;
-        width: 100%;
-        padding: 0;
-        /**
-         * fixed positioning is necessary for remote menus and tooltips to pop
-         * out of the scrolling filmstrip. AtlasKit dialogs and tooltips use
-         * a library called popper which will position its elements fixed if
-         * any parent is also fixed.
-         */
-        position: fixed;
-        top: 0;
-        right: 0;
-        z-index: $filmstripVideosZ;
-
-        &.no-vertical-padding {
-            padding: 0;
-        }
-
-        /**
-         * Hide videos by making them slight to the right.
-         */
-        .filmstrip__videos {
-            @extend %align-right;
-            bottom: 0;
-            padding: 0;
-            position:relative;
-            right: 0;
-            width: auto;
-
-            /**
-             * An id selector is used to match id specificity with existing
-             * filmstrip styles.
-             */
-            &#remoteVideos {
-                border: $thumbnailsBorder solid transparent;
-                padding-left: 0;
-                border-left: 0;
-                width: 100%;
-                height: 100%;
-                justify-content: center;
-            }
-        }
-
-        /**
-         * Re-styles the local Video to better fit vertical filmstrip layout.
-         */
-        #filmstripLocalVideo {
-            align-self: initial;
-            margin-bottom: 5px;
-            display: flex;
-            flex-direction: column-reverse;
-            height: auto;
-            justify-content: flex-start;
-            width: 100%;
-
-            #filmstripLocalVideoThumbnail {
-                width: calc(100% - 15px);
-
-                .videocontainer {
-                    height: 0px;
-                    width: 100%;
-                }
-            }
-        }
-
-        #filmstripLocalScreenShare {
-            align-self: initial;
-            margin-bottom: 5px;
-            display: flex;
-            flex-direction: column-reverse;
-            height: auto;
-            justify-content: flex-start;
-            width: 100%;
-
-            #filmstripLocalScreenShareThumbnail {
-                width: calc(100% - 15px);
-
-                .videocontainer {
-                    height: 0px;
-                    width: 100%;
-                }
-            }
-        }
-
-        /**
-         * Remove unnecessary padding that is normally used to prevent horizontal
-         * filmstrip from overlapping the left edge of the screen.
-         */
-        #filmstripLocalVideo,
-        #filmstripLocalScreenShare,
+.vertical-filmstrip .filmstrip {
+    &.hide-videos {
         .remote-videos {
-            padding: 0;
-        }
-
-        #remoteVideos {
-            @include minHWAutoFix();
-
-            flex-direction: column;
-            flex-grow: 1;
-        }
-
-        .resizable-filmstrip #remoteVideos .videocontainer {
-            border-left: 0;
-            margin: 0;
-        }
-
-        &.reduce-height {
-            height: calc(100% - calc(#{$newToolbarSizeWithPadding} + #{$scrollHeight}));
-        }
-
-        .filmstrip__videos.vertical-view-grid#remoteVideos {
-            align-items: 'center';
-            border: 0px;
-            padding-right: 7px;
-
-            &.has-scroll {
-                padding-right: 0px;
-            }
-
-            .remote-videos > div {
-                left: 0px; // fixes an issue on FF - the div is aligned to the right by default for some reason
-            }
-
-            .videocontainer {
-                border: 0px;
-                margin: 2px;
-            }
-        }
-
-        .remote-videos {
-            display: flex;
-            overscroll-behavior: contain;
-
-            &.height-transition {
-                transition: height .3s ease-in;
-            }
-
             & > div {
-                position: absolute;
-                transition: opacity 1s;
-            }
-
-            &.is-not-overflowing > div {
-                bottom: 0px;
+                opacity: 0;
+                pointer-events: none;
             }
         }
     }
+
+    /*
+     * Firefox sets flex items to min-height: auto and min-width: auto,
+     * preventing flex children from shrinking like they do on other browsers.
+     * Setting min-height and min-width 0 is a workaround for the issue so
+     * Firefox behaves like other browsers.
+     * https://bugzilla.mozilla.org/show_bug.cgi?id=1043520
+     */
+    @mixin minHWAutoFix() {
+        min-height: 0;
+        min-width: 0;
+    }
+
+    @extend %align-right;
+    align-items: flex-end;
+    bottom: 0;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column-reverse;
+    height: 100%;
+    width: 100%;
+    padding: 0;
+    /**
+     * fixed positioning is necessary for remote menus and tooltips to pop
+     * out of the scrolling filmstrip. AtlasKit dialogs and tooltips use
+     * a library called popper which will position its elements fixed if
+     * any parent is also fixed.
+     */
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: $filmstripVideosZ;
+
+    &.no-vertical-padding {
+        padding: 0;
+    }
+
+    /**
+     * Hide videos by making them slight to the right.
+     */
+    .filmstrip__videos {
+        @extend %align-right;
+        bottom: 0;
+        padding: 0;
+        position:relative;
+        right: 0;
+        width: auto;
+
+        /**
+         * An id selector is used to match id specificity with existing
+         * filmstrip styles.
+         */
+        &#remoteVideos {
+            border: $thumbnailsBorder solid transparent;
+            padding-left: 0;
+            border-left: 0;
+            width: 100%;
+            height: 100%;
+            justify-content: center;
+        }
+    }
+
+    /**
+     * Re-styles the local Video to better fit vertical filmstrip layout.
+     */
+    #filmstripLocalVideo {
+        align-self: initial;
+        margin-bottom: 5px;
+        display: flex;
+        flex-direction: column-reverse;
+        height: auto;
+        justify-content: flex-start;
+        width: 100%;
+
+        #filmstripLocalVideoThumbnail {
+            width: calc(100% - 15px);
+
+            .videocontainer {
+                height: 0px;
+                width: 100%;
+    }
+        }
+
+    }
+
+    /**
+     * Remove unnecssary padding that is normally used to prevent horizontal
+     * filmstrip from overlapping the left edge of the screen.
+     */
+    #filmstripLocalVideo,
+    .remote-videos {
+        padding: 0;
+    }
+
+    #remoteVideos {
+        @include minHWAutoFix();
+
+        flex-direction: column;
+        flex-grow: 1;
+    }
+
+    .resizable-filmstrip #remoteVideos .videocontainer {
+        border-left: 0;
+        margin: 0;
+    }
+
+    &.reduce-height {
+        height: calc(100% - calc(#{$newToolbarSizeWithPadding} + #{$scrollHeight}));
+    }
+
+    .remote-videos {
+        display: flex;
+        overscroll-behavior: contain;
+
+        &.height-transition {
+            transition: height .3s ease-in;
+        }
+
+        &.vertical-grid-margin > div {
+            margin-right: $scrollHeight;
+        }
+
+        & > div {
+            position: absolute;
+            transition: opacity 1s;
+        }
+
+        &.is-not-overflowing > div {
+            bottom: 0px;
+        }
+    }
 }

css/filmstrip/_vertical_filmstrip_overrides.scss

@@ -3,17 +3,14 @@
  * clashing with the filmstrip.
  */
 .vertical-filmstrip #etherpad,
-.stage-filmstrip #etherpad,
-.vertical-filmstrip #sharedvideo,
-.stage-filmstrip #sharedvideo {
+.vertical-filmstrip #sharedvideo {
     text-align: left;
 }
 
 /**
  * Overrides for small videos in vertical filmstrip mode.
  */
-.vertical-filmstrip .filmstrip__videos .videocontainer,
-.stage-filmstrip .filmstrip__videos .videocontainer {
+.vertical-filmstrip .filmstrip__videos .videocontainer {
     .self-view-mobile-portrait video {
         object-fit: contain;
     }
@@ -30,8 +27,7 @@
  * The class opening is for when the filmstrip is transitioning from hidden
  * to visible.
  */
-.vertical-filmstrip .large-video-labels,
-.stage-filmstrip .large-video-labels {
+.vertical-filmstrip .large-video-labels {
     &.with-filmstrip {
         right: 150px;
     }
@@ -51,7 +47,6 @@
  * Overrides for self view when in portrait mode on mobile.
  * This is done in order to keep the aspect ratio.
  */
-.vertical-filmstrip .self-view-mobile-portrait #localVideo_container,
-.stage-filmstrip .self-view-mobile-portrait #localVideo_container {
+.vertical-filmstrip .self-view-mobile-portrait #localVideo_container {
     object-fit: contain;
 }

css/main.scss

@@ -24,7 +24,8 @@ $flagsImagePath: "../images/";
 /* Flags END */
 
 /* Modules BEGIN */
-@import 'reset';
+
+@import 'aui_reset';
 @import 'atlaskit_overrides';
 @import 'base';
 @import 'utils';
@@ -38,8 +39,12 @@ $flagsImagePath: "../images/";
 @import 'modals/embed-meeting/embed-meeting';
 @import 'modals/feedback/feedback';
 @import 'modals/invite/info';
+@import 'modals/settings/settings';
 @import 'modals/screen-share/share-audio';
 @import 'modals/screen-share/share-screen-warning';
+@import 'modals/speaker_stats/speaker_stats';
+@import 'modals/virtual-background/virtual-background';
+@import 'modals/local-recording/local-recording';
 @import 'videolayout_default';
 @import 'notice';
 @import 'subject';
@@ -52,12 +57,15 @@ $flagsImagePath: "../images/";
 @import 'welcome_page_content';
 @import 'welcome_page_settings_toolbar';
 @import 'toolbars';
+@import 'keyboard-shortcuts';
 @import 'redirect_page';
 @import 'components/form-control';
 @import 'components/link';
 @import 'components/button-control';
 @import 'components/input-control';
 @import 'components/input-slider';
+@import "connection-info";
+@import 'aui-components/dropdown';
 @import '404';
 @import 'policy';
 @import 'popover';
@@ -75,6 +83,7 @@ $flagsImagePath: "../images/";
 @import 'navigate_section_list';
 @import 'third-party-branding/google';
 @import 'third-party-branding/microsoft';
+@import 'avatar';
 @import 'promotional-footer';
 @import 'chrome-extension-banner';
 @import 'settings-button';
@@ -85,6 +94,7 @@ $flagsImagePath: "../images/";
 @import 'country-picker';
 @import 'modals/invite/invite_more';
 @import 'modals/security/security';
+@import 'modals/mute/mute-dialog';
 @import 'e2ee';
 @import 'responsive';
 @import 'drawer';

css/modals/_dialog.scss

@@ -1,3 +1,114 @@
+.dialog {
+    box-sizing: border-box;
+    height: auto;
+    min-height: 131px;
+    overflow: visible;
+    visibility: visible;
+    width: 400px;
+
+    h1, h2, h3, h4, h5, h6 {
+        color: $auiDialogColor;
+    }
+
+    .aui {
+
+        &-dialog2 {
+            &-header, &-footer {
+                background-color: $auiDialogBg;
+                border: none;
+            }
+
+            &-header {
+                border-bottom: 1px solid $auiBorderColor;
+                border-radius: 5px 5px 0 0;
+                box-sizing: border-box;
+                color: #333;
+                display: table;
+                font-weight: normal;
+                height: em(58, 12);
+                margin-top: -69px;
+                padding: 0 20px;
+                width: 100%;
+
+                h2 {
+                    font-size: em(20, 12);
+                    font-weight: $dialogTitleFontWeight;
+                    color: $auiDialogColor;
+                }
+
+                &-main {
+                    display: table-cell;
+                    padding-right: 0;
+                    max-width: 400px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    vertical-align: middle;
+                    white-space: nowrap;
+
+                }
+            }
+
+            &-footer {
+                border-top: 1px solid $auiBorderColor;
+                border-radius: 0 0 5px 5px;
+                box-sizing: border-box;
+                height: 51px;
+                overflow: hidden;
+                padding: 10px 20px;
+                width: 100%;
+
+                &:empty {
+                    height: 5px;
+                    padding: 0;
+                }
+            }
+
+            &-content {
+                background-color: $auiDialogBg;
+                box-sizing: border-box;
+                color: $auiDialogColor;
+                font-size: em(14, 12);
+                overflow: auto;
+                max-height: 100%;
+                padding: 20px;
+
+                p,span, h3 {
+                    font-weight: $labelFontWeight;
+                }
+
+                &:last-child {
+                    border-bottom-right-radius: 5px;
+                    border-bottom-left-radius: 5px;
+                }
+
+                &:first-child {
+                    border-top-right-radius: 5px;
+                    border-top-left-radius: 5px;
+                }
+            }
+        }
+
+        &-hide {
+            display: none;
+        }
+    }
+
+    .input-control {
+        background-color: $auiDialogContentBg;
+        color: $auiDialogColor;
+    }
+
+    .form-control:not(:last-child) {
+        border-bottom: 1px solid $auiBorderColor;
+    }
+}
+
+@media all and (max-width: 420px) {
+  .aui-dialog2-small .aui-dialog2-content {
+    height: 100%;
+  }
+}
+
 .modal-dialog-form {
     margin-top: 5px !important;
 
@@ -38,7 +149,3 @@
     margin-top: 2px;
     display: block;
 }
-
-.dialog-bottom-margin {
-    margin-bottom: 5px;
-}

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

@@ -9,6 +9,7 @@
         font-size: 15px;
         margin-left: auto;
         margin-top: 16px;
+        width: auto;
     }
 
     &-code {

css/modals/feedback/_feedback.scss

@@ -46,8 +46,6 @@
 }
 
 .feedback-dialog {
-    margin-bottom: 5px;
-
     .details {
         textarea {
             min-height: 100px;

css/modals/invite/_info.scss

@@ -38,6 +38,19 @@
         color: #fff;
     }
 
+    .info-password-input {
+        width: 100%;
+        background-color: #0E1624;
+        border-radius: 3px;
+        border: 2px solid #202B3D;
+        color: inherit;
+        padding-left: 0;
+    }
+    .info-password-input:focus ,
+    .info-password-input:active {
+       border: 2px solid #B8C7E0;
+    }
+
     .info-password-local {
         user-select: text;
     }

css/modals/invite/_invite_more.scss

@@ -84,6 +84,56 @@
             }
         }
 
+        &.icon-container {
+            display: none;
+
+            &.active {
+                display: flex;
+                width: calc(100% - 26px);
+                padding: 8px 8px 8px 16px;
+
+                background: #2A3A4B;
+                border: 1px solid #5E6D7A;
+                border-top: none;
+                border-radius: 0 0 3px 3px;
+
+                .copy-invite-icon, .provider-icon {
+                    align-items: center;
+                    cursor: pointer;
+                    display: flex;
+                    height: 40px;
+                    place-content: center;
+                    width: 40px;
+                }
+
+                &:hover > div:hover {
+                    background-color: rgba(255, 255, 255, 0.2);
+                    border-radius: 4px;
+                }
+
+                & > :not(:last-child) {
+                    margin-right: 16px;
+                }
+
+                .copy-invite-icon > div > svg > path {
+                    fill: #A4B8D1;
+                }
+            }
+        }
+
+        &.dial-in-display {
+            .info-label {
+                color: #A4B8D1;
+            }
+
+            .dial-in-copy {
+                display: inline-block;
+                vertical-align: middle;
+                cursor: pointer;
+                height: 24px;
+            }
+        }
+
         &.invite-buttons {
             width: 100%;
             text-align: right;

css/modals/local-recording/_local-recording.scss

@@ -0,0 +1,92 @@
+.localrec-participant-stats {
+    list-style: none;
+    padding: 0;
+    width: 100%;
+    font-weight: 500;
+
+    .localrec-participant-stats-item__status-dot {
+        position: relative;
+        display: block;
+        width: 9px;
+        height: 9px;
+        border-radius: 50%;
+        margin: 0 auto;
+
+        &.status-on {
+            background: green;
+        }
+
+        &.status-off {
+            background: gray;
+        }
+
+        &.status-unknown {
+            background: darkgoldenrod;
+        }
+
+        &.status-error {
+            background: darkred;
+        }
+    }
+
+    .localrec-participant-stats-item__status,
+    .localrec-participant-stats-item__name,
+    .localrec-participant-stats-item__sessionid {
+        display: inline-block;
+        margin: 5px 0;
+        vertical-align: middle;
+    }
+    .localrec-participant-stats-item__status {
+        width: 5%;
+    }
+    .localrec-participant-stats-item__name {
+        width: 40%;
+    }
+    .localrec-participant-stats-item__sessionid {
+        width: 55%;
+    }
+
+    .localrec-participant-stats-item__name,
+    .localrec-participant-stats-item__sessionid {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+.localrec-control-info-label {
+    font-weight: bold;
+}
+
+.localrec-control-info-label:after {
+    content: ' ';
+}
+
+.localrec-control-action-link {
+    display: inline-block;
+    line-height: 1.5em;
+
+    a {
+        cursor: pointer;
+        vertical-align: middle;
+    }
+}
+
+.localrec-control-action-link:before {
+    color: $linkFontColor;
+    content: '\2022';
+    font-size: 1.5em;
+    padding: 0 10px;
+    vertical-align: middle;
+}
+
+.localrec-control-action-link:first-child:before {
+    content: '';
+    padding: 0;
+}
+
+.localrec-control-action-links {
+    font-weight: bold;
+    margin-top: 10px;
+    white-space: nowrap;
+}

css/modals/mute/_mute-dialog.scss

@@ -0,0 +1,19 @@
+.mute-dialog {
+	.separator-line {
+        margin: 24px 0 24px -20px;
+        padding: 0 20px;
+        width: 100%;
+        height: 1px;
+        background: #5E6D7A;
+    }
+
+	.control-row {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 15px;
+
+        label {
+            font-size: 14px;
+        }
+    }
+}

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

@@ -1,13 +1,11 @@
-.share-audio-dialog-container {
-    max-height: none;
-}
-
 .share-audio-dialog {
     .share-audio-animation {
         width: 100%;
         height: 90%;
         object-fit: contain;
-        margin-bottom: 10px;
+    }
+    input[type="checkbox"] + svg + span {
+        color: #9FB0CC;
     }
 
     .separator-line {

css/modals/security/_security.scss

@@ -13,14 +13,12 @@
             }
 
             .password {
-                align-items: flex-start;
+                align-items: center;
                 display: flex;
-                justify-content: flex-start;
+                justify-content: space-between;
                 margin-top: 15px;
-                flex-direction: column;
 
                 &-actions {
-                    margin-top: 10px;
                     a {
                         cursor: pointer;
                         text-decoration: none;
@@ -28,8 +26,8 @@
                         color: #6FB1EA;
                     }
 
-                    & > :not(:last-child) {
-                        margin-right: 24px;
+                    & > :first-child:not(:last-child) {	
+                        margin-right: 24px;	
                     }
                 }
             }

css/modals/settings/_settings.scss

@@ -0,0 +1,102 @@
+.settings-pane {
+    display: flex;
+    width: 100%;
+
+    &.profile-pane {
+        flex-direction: column;
+    }
+
+    .auth-name {
+        margin-bottom: 4px;
+    }
+
+    .calendar-tab,
+    .device-selection {
+        margin-top: 20px;
+    }
+
+    .mock-atlaskit-label {
+        color: #b8c7e0;
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 1.33;
+        padding: 20px 0px 4px 0px;
+    }
+    input[type="checkbox"]:checked + svg {
+        --checkbox-background-color: #6492e7;
+        --checkbox-border-color: #6492e7;
+    }
+    input[type="checkbox"] + svg + span {
+        color: #b8c7e0;
+    }
+
+    input[type="checkbox"] + svg + span {
+        color: #9FB0CC;
+    }
+
+    .calendar-tab,
+    .more-tab,
+    .box {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+    }
+
+    .profile-edit {
+        display: flex;
+        width: 100%;
+    }
+
+    .profile-edit-field {
+        flex: .5;
+    }
+    .settings-sub-pane {
+        flex: 1;
+    }
+
+    .settings-sub-pane .right {
+        flex: 1;
+    }
+    .settings-sub-pane .left {
+        flex: 1;
+    }
+
+    .settings-sub-pane-element {
+        text-align: left;
+        flex: 1;
+    }
+
+    .moderator-settings-wrapper {
+        padding-top: 20px;
+    }
+
+    .profile-edit-field {
+        margin-right: 20px;
+    }
+
+    .calendar-tab {
+        align-items: center;
+        flex-direction: column;
+        font-size: 14px;
+        min-height: 100px;
+        text-align: center;
+    }
+
+    .calendar-tab-sign-in {
+        margin-top: 20px;
+    }
+
+    .sign-out-cta {
+        margin-bottom: 20px;
+    }
+
+    @media only screen and (max-width: $smallScreen) {
+        .device-selection {
+            display: flex;
+            flex-direction: column;
+        }
+        .more-tab {
+            flex-direction: column;
+        }
+    }
+}

css/modals/speaker_stats/_speaker_stats.scss

@@ -0,0 +1,30 @@
+.speaker-stats {
+    list-style: none;
+    .row{
+        display: flex;
+        align-items: center;
+        .avatar {
+            width: 32px;
+            margin-right: 16px;
+        }
+        .name-time {
+            width: calc(100% - 48px);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            
+        }
+        .name-time_expressions-on {
+            width: calc(47% - 48px);
+        }
+        .expressions {
+            width: calc(53% - 29px);
+            display: flex;
+            justify-content: space-between;
+            .expression {
+                width: 30px;
+                text-align: center;
+            }
+        }
+    }
+}

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

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

css/premeeting/_connection-status.scss

@@ -0,0 +1,71 @@
+.con-status {
+    border-radius: 6px;
+    color: #fff;
+    font-size: 12px;
+    letter-spacing: 0.16px;
+    line-height: 16px;
+    position: absolute;
+    width: 100%;
+
+    &-header {
+        background-color: rgba(0, 0, 0, 0.7);
+        align-items: center;
+        display: flex;
+        padding: 14px 16px;
+    }
+
+    &-circle {
+        border-radius: 50%;
+        display: inline-block;
+        padding: 4px;
+        margin-right: 16px;
+    }
+
+    &--good {
+        background: #31B76A;
+    }
+
+    &--poor {
+        background: #E12D2D;
+    }
+
+    &--non-optimal {
+        background: #E39623;
+    }
+
+    &-arrow {
+        margin-left: auto;
+        transition: background-color 0.16s ease-out;
+
+        &--up {
+            transform: rotate(180deg);
+        }
+
+        &>svg {
+            cursor: pointer;
+        }
+
+        &:hover {
+            background-color: rgba(1,1,1, 0.1);
+        }
+    }
+
+    &-text {
+        text-align: center;
+    }
+
+    &-details {
+        background-color: rgba(0, 0, 0, 0.7);
+        border-top: 1px solid #5E6D7A;
+        padding: 16px;
+        transition: opacity 0.16s ease-out;
+
+        &-visible {
+            opacity: 1;
+        }
+
+        &-hidden {
+            opacity: 0;
+        }
+    }
+}

css/premeeting/_device-status.scss

@@ -0,0 +1,38 @@
+.device {
+    &-status {
+        align-items: center;
+        color: #fff;
+        display: flex;
+        font-size: 14px;
+        line-height: 20px;
+        padding: 6px;
+        text-align: center;
+
+        &-error {
+            align-items: flex-start;
+            background-color: #F8AE1A;
+            border-radius: 6px;
+            color: #040404;
+            padding: 12px 16px;
+            text-align: left;
+        }
+
+        span {
+            margin-left: 16px;
+        }
+    }
+
+    &-icon {
+        background-position: center;
+        background-repeat: no-repeat;
+        display: inline-block;
+        height: 16px;
+        width: 16px;
+
+        &--ok {
+            svg path {
+                fill: #189b55;
+            }
+        }
+    }
+}

css/premeeting/_lobby.scss

@@ -12,29 +12,11 @@
             margin: 8px;
         }
 
-        .lobby-chat-container {
-            background-color: $chatBackgroundColor;
-            width: 100%;
-            height: 314px;
-            display: flex;
-            flex-direction: column;
-            align-items: stretch;
-            margin-bottom: 16px;
-            border-radius: 5px;
-            .lobby-chat-header {
-                display: none;
-            }
-        }
-
         .joining-message {
             color: white;
             margin: 24px auto;
             text-align: center;
         }
-
-        .open-chat-button {
-            display: none;
-        }
     }
 }
 
@@ -58,153 +40,3 @@
         }
     }
 }
-
-#notification-participant-list {
-    background-color: $newToolbarBackgroundColor;
-    border: 1px solid rgba(255, 255, 255, .4);
-    border-radius: 8px;
-    left: 0;
-    margin: 20px;
-    max-height: 600px;
-    overflow: hidden;
-    overflow-y: auto;
-    position: fixed;
-    top: 30px;
-    z-index: $toolbarZ + 1;
-
-    &:empty {
-        border: none;
-    }
-
-    &.toolbox-visible {
-        // Same as toolbox subject position
-        top: 120px;
-    }
-
-    &.avoid-chat {
-        left: 315px;
-    }
-
-    .title {
-        background-color: rgba(0, 0, 0, .2);
-        font-size: 1.2em;
-        padding: 15px
-    }
-
-    button {
-        align-self: stretch;
-        margin-bottom: 8px 0;
-        padding: 12px;
-        transition: .2s transform ease;
-
-        &:disabled {
-            opacity: .5;
-        }
-
-        &:hover {
-            transform: scale(1.05);
-
-            &:disabled {
-                transform: none;
-            }
-        }
-
-        &.borderLess {
-            background-color: transparent;
-            border-width: 0;
-        }
-
-        &.primary {
-            background-color: rgb(3, 118, 218);
-            border-width: 0;
-        }
-    }
-}
-
-.knocking-participants-container {
-    list-style-type: none;
-    padding: 0 15px 15px 15px;
-}
-
-.knocking-participant {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    margin: 8px 0;
-
-    .details {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        justify-content: space-evenly;
-        margin: 0 30px 0 10px;
-    }
-
-    button {
-        align-self: unset;
-        margin: 0 5px;
-    }
-}
-
-@media (max-width: 300px) {
-    #knocking-participant-list {
-        margin: 0;
-        text-align: center;
-        width: 100%;
-
-        .avatar {
-            display: none;
-        }
-    }
-
-    .knocking-participant {
-        flex-direction: column;
-
-        .details {
-            margin: 0;
-        }
-    }
-}
-
-@media (max-width: 1000px) {
-    .lobby-screen-content {
-
-        .lobby-chat-container {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 255;
-
-            &.hidden {
-                display: none;
-            }
-
-            .lobby-chat-header {
-                display: flex;
-                flex-direction: row;
-                padding-top: 20px;
-                padding-left: 16px;
-                padding-right: 16px;
-
-                .title {
-                    flex: 1;
-                    color: #fff;
-                    font-size: 20px;
-                    font-weight: 600;
-                    line-height: 28px;
-                    letter-spacing: -1.2%;
-                }
-            }
-        }
-
-        .open-chat-button {
-            display: block;
-        }
-    }
-}
-
-.lobby-button-margin {
-    margin-bottom: 16px;
-}

css/premeeting/_main.scss

@@ -1,4 +1,7 @@
+@import 'connection-status';
+@import 'device-status';
 @import 'lobby';
 @import 'premeeting-screens';
 @import 'prejoin';
+@import 'prejoin-dialog';
 @import 'prejoin-third-party';

css/premeeting/_prejoin-dialog.scss

@@ -0,0 +1,187 @@
+.prejoin-dialog {
+    background: #1C2025;
+    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.5);
+    border-radius: 5px;
+    color: #fff;
+    height: 400px;
+    width: 375px;
+
+    &--small {
+        height: 300;
+        width: 400;
+    }
+
+    &-label {
+        font-size: 15px;
+        line-height: 24px;
+
+        &-num {
+            background: #2b3b4b;
+            border: 1px solid #A4B8D1;
+            border-radius: 50%;
+            color: #fff;
+            display: inline-block;
+            height: 24px;
+            margin-right: 8px;
+            width: 24px;
+        }
+    }
+
+    &-container {
+        align-items: center;
+        background: rgba(0,0,0,0.6);
+        display: flex;
+        height: 100vh;
+        justify-content: center;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100vw;
+        z-index: 3;
+    }
+
+    &-flag {
+        display: inline-block;
+        margin-right: 8px;
+        transform: scale(1.2);
+    }
+
+    &-title {
+        display: inline-block;
+        font-size: 24px;
+        line-height: 32px;
+    }
+
+    &-icon {
+        cursor: pointer;
+
+        > svg {
+            fill: #A4B8D1;
+        }
+    }
+
+    &-btn {
+        width: 309px;
+    }
+
+    &-dialin-container {
+        text-align: center;
+    }
+
+    &-delimiter {
+        background: #5f6266;
+        border: 0;
+        height: 1px;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+
+        &-container {
+            margin: 16px 0 24px 0;
+            position: relative;
+        }
+
+        &-txt-container {
+            position: absolute;
+            text-align: center;
+            top: -8px;
+            width: 100%;
+        }
+
+        &-txt {
+            background: #1C2025;
+            color: #5f6266;
+            font-size: 11px;
+            text-transform: uppercase;
+            padding: 0 8px;
+        }
+    }
+
+    .prejoin-dialog-btn.primary,
+    .action-btn.prejoin-dialog-btn.text {
+        width: 310px;
+    }
+}
+
+.prejoin-dialog-callout {
+    padding: 16px;
+
+    &-header {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 24px;
+    }
+
+    &-picker {
+        margin: 8px 0 16px 0;
+    }
+}
+
+.prejoin-dialog-dialin {
+    text-align: center;
+
+    &-header {
+        align-items: center;
+        margin: 16px 0 32px 16px;
+        display: flex;
+    }
+
+    &-icon {
+        margin-right: 16px;
+    }
+
+    &-num {
+        background: #3e474f;
+        border-radius: 4px;
+        display: inline-block;
+        font-size: 15px;
+        line-height: 24px;
+        margin: 4px;
+        padding: 8px;
+
+        &-container {
+            min-height: 48px;
+            margin: 8px 0;
+        }
+    }
+
+    &-link {
+        color: #6FB1EA;
+        cursor: pointer;
+        display: inline-block;
+        font-size: 13px;
+        line-height: 20px;
+        margin-bottom: 24px;
+    }
+
+    &-spaced-label {
+        margin-bottom: 16px;
+        margin-top: 28px;
+    }
+
+    &-btns {
+        &> div {
+            margin-bottom: 16px;
+        }
+    }
+}
+
+.prejoin-dialog-calling {
+    padding: 16px;
+    text-align: center;
+
+    &-header {
+        text-align: right;
+    }
+
+    &-label {
+        font-size: 15px;
+        margin: 8px 0 16px 0;
+    }
+
+    &-number {
+        font-size: 19px;
+        line-height: 28px;
+        margin: 16px 0;
+    }
+}

css/premeeting/_prejoin.scss

@@ -3,25 +3,6 @@
         width: 100%;
     }
 
-    &-avatar {
-        margin: 8px auto 16px;
-
-        &-name {
-            color: white;
-            font-size: 16px;
-            font-weight: 600;
-            line-height: 26px;
-            margin-bottom: 32px;
-            text-align: center;
-        }
-
-        &-container {
-            align-items: center;
-            display: flex;
-            flex-direction: column;
-        }
-    }
-
     &-error {
         background-color: #E04757;
         border-radius: 6px;
@@ -42,6 +23,30 @@
         padding: 8px 0;
     }
   
+    &-dropdown-btn {
+        align-items: center;
+        color: #1C2025;
+        cursor: pointer;
+        display: flex;
+        height: 40px;
+        font-size: 15px;
+        line-height: 24px;
+        padding: 0 16px;
+  
+        &:hover {
+            background-color: #DAEBFA;
+        }
+    }
+  
+    &-dropdown-icon {
+        display: inline-block;
+        margin-right: 16px;
+  
+        & > svg {
+            fill:  #1C2025;
+        }
+    }
+  
     &-dropdown-container {
         position: relative;
         width: 100%;

css/premeeting/_premeeting-screens.scss

@@ -82,7 +82,7 @@
         flex-direction: column;
         flex-shrink: 0;
         height: 100%;
-        margin: 0 30px;
+        margin: 0 110px;
         padding: 24px 0 16px;
         position: relative;
         width: $prejoinDefaultContentWidth;
@@ -101,7 +101,7 @@
                 font-weight: 600;
                 letter-spacing: -0.015;
                 line-height: 36px;
-                margin-bottom: 16px;
+                margin-bottom: 32px;
                 text-align: center;
             }
 
@@ -137,7 +137,6 @@
                 }
 
                 .toolbox-content-items {
-                    @include ltr;
                     background: transparent;
                     box-shadow: none;
                     display: flex;
@@ -155,20 +154,33 @@
         }
     }
 
-    @media (max-width: 720px) {
+    @media (max-width: 1000px) {
         flex-direction: column-reverse;
 
         .content {
             height: auto;
             margin: 0 auto;
         }
+
+        .con-status {
+            margin: 24px auto;
+            position: fixed;
+            top: 0;
+            width: $prejoinDefaultContentWidth;
+        }
     }
 
     // mobile phone landscape
     @media (max-height: 420px) {
+        flex-direction: row;
+
         div.content {
             padding: 16px 16px 0 16px;
         }
+
+        .con-status {
+            display: none;
+        }
     }
 
     @media (max-width: 400px) {
@@ -188,6 +200,11 @@
             }
         }
 
+        .con-status {
+            margin: 0;
+            width: 100%;
+        }
+
         .device-status-error {
             border-radius: 0;
             margin: 0 -16px;

css/themes/_light.scss

@@ -6,6 +6,8 @@ $baseLight: #FFFFFF;
 /**
 * Controls
 */
+$controlBackground: $baseLight;
+$controlColor: #333333;
 $sliderTrackBackground: #474747;
 $sliderThumbBackground: #3572b0;
 
@@ -44,6 +46,11 @@ $reloadProgressBarBg: #0074E0;
 /**
  * Dialog colors
  **/
+$auiDialogColor: #eceef1;
+$auiDialogBg: #253858;
+$auiDialogContentBg: #344563;
+$auiBorderColor: #253858;
+$dialogTitleFontWeight: 400;
 $dialogErrorText: #344563;
 
 /**
@@ -58,21 +65,42 @@ $readOnlyInputColor: #a7a7a7;
 $defaultDarkSelectionColor: #ccc;
 $buttonFontWeight: 400;
 $labelFontWeight: 400;
+$hintFontSize: em(13, 14);
 $linkFontColor: #3572b0;
 $linkHoverFontColor: darken(#3572b0, 10%);
+$dropdownColor: #333;
 $errorColor: #c61600;
 
+// Feedback colors
+$feedbackCancelFontColor: #333;
 
 // Popover colors
 $popoverFontColor: #ffffff !important;
 $popupSliderColor: #0376da;
 
 // Toolbar
+$secondaryToolbarBg: rgba(0, 0, 0, 0.5);
+// TOFIX: Once moved to react rename to match the side panel class name.
+$sideToolbarContainerBg: rgba(0, 0, 0, 0.75);
 $toolbarBackground: rgba(0, 0, 0, 0.5);
 $toolbarBadgeBackground: #165ECC;
 $toolbarBadgeColor: #FFFFFF;
+$toolbarButtonColor: #FFFFFF;
+$toolbarSelectBackground: rgba(0, 0, 0, .6);
+$toolbarTitleColor: #FFFFFF;
+$toolbarToggleBackground: #12499C;
+
 
 /**
  * Forms
  */
-$selectBg: $baseLight;
+//dropdown
+$selectFontColor: $controlColor;
+$selectBg: $controlBackground;
+$selectActiveBg: darken($controlBackground, 5%);
+$selectActiveItemBg: darken($controlBackground, 20%);
+
+/**
+ * TODO: Replace by themed component.
+ */
+$videoQualityActive: #57A0ff;

custom.d.ts

@@ -1,4 +0,0 @@
-declare module '*.svg' {
-    const content: any;
-    export default content;
-}

debian/control

@@ -20,7 +20,7 @@ Description: WebRTC JavaScript video conferences
 
 Package: jitsi-meet-web-config
 Architecture: all
-Depends: openssl, nginx | nginx-full | nginx-extras | openresty | apache2, curl
+Depends: openssl, nginx | nginx-full | nginx-extras | apache2
 Description: Configuration for web serving of Jitsi Meet
  Jitsi Meet is a WebRTC JavaScript application that uses Jitsi
  Videobridge to provide high quality, scalable video conferences.
@@ -33,7 +33,7 @@ Description: Configuration for web serving of Jitsi Meet
 
 Package: jitsi-meet-prosody
 Architecture: all
-Depends: openssl, prosody (>= 0.11.7) | prosody-trunk | prosody-0.12 | prosody-0.11, lua-sec, lua-basexx, lua-luaossl, lua-cjson, lua-inspect
+Depends: openssl, prosody (>= 0.11.0) | prosody-trunk | prosody-0.11, lua-sec
 Replaces: jitsi-meet-tokens
 Description: Prosody configuration for Jitsi Meet
  Jitsi Meet is a WebRTC JavaScript application that uses Jitsi
@@ -47,11 +47,12 @@ Description: Prosody configuration for Jitsi Meet
 
 Package: jitsi-meet-tokens
 Architecture: all
-Depends: ${misc:Depends}, prosody-trunk | prosody-0.11 | prosody-0.12 | prosody (>= 0.11.7), jitsi-meet-prosody
+Depends: ${misc:Depends}, prosody-trunk (>= 1nightly747) | prosody-0.11 | prosody (>= 0.11.2), libssl1.0-dev | libssl-dev, luarocks, jitsi-meet-prosody, git
 Description: Prosody token authentication plugin for Jitsi Meet
 
 Package: jitsi-meet-turnserver
 Architecture: all
+Breaks: apache2
 Pre-Depends: jitsi-meet-web-config
-Depends: ${misc:Depends}, jitsi-meet-prosody, coturn, dnsutils
+Depends: ${misc:Depends}, nginx (>= 1.13.10) | nginx-full (>= 1.13.10) | nginx-extras (>= 1.13.10), jitsi-meet-prosody, coturn, dnsutils
 Description: Configures coturn to be used with Jitsi Meet

debian/jitsi-meet-prosody.install

@@ -1,3 +1,2 @@
 doc/debian/jitsi-meet-prosody/prosody.cfg.lua-jvb.example   /usr/share/jitsi-meet-prosody/
-doc/debian/jitsi-meet-prosody/jaas.cfg.lua                  /usr/share/jitsi-meet-prosody/
 resources/prosody-plugins/                                  /usr/share/jitsi-meet/

debian/jitsi-meet-prosody.postinst

@@ -83,31 +83,6 @@ case "$1" in
             TURN_SECRET="$RET"
         fi
 
-        SELF_SIGNED_CHOICE="Generate a new self-signed certificate"
-        # In the case of updating from an older version the configure of -prosody package may happen before the -config
-        # one, so if JAAS_INPUT is empty (the question is not asked), let's ask it now.
-        # If db_get returns an error (workaround for strange Debian failure) continue without stopping the config
-        db_get jitsi-meet/cert-choice || CERT_CHOICE=$SELF_SIGNED_CHOICE
-        CERT_CHOICE="$RET"
-        if [ -z "$CERT_CHOICE" ] ; then
-            db_input critical jitsi-meet/cert-choice || true
-            db_go
-            db_get jitsi-meet/cert-choice
-            CERT_CHOICE="$RET"
-        fi
-        if [ "$CERT_CHOICE" != "$SELF_SIGNED_CHOICE" ]; then
-            db_get jitsi-meet/jaas-choice
-            JAAS_INPUT="$RET"
-            if [ -z "$JAAS_INPUT" ] ; then
-                db_subst jitsi-meet/jaas-choice domain "${JVB_HOSTNAME}"
-                db_set jitsi-meet/jaas-choice false
-                db_input critical jitsi-meet/jaas-choice || true
-                db_go
-                db_get jitsi-meet/jaas-choice
-                JAAS_INPUT="$RET"
-            fi
-        fi
-
         # and we're done with debconf
         db_stop
 
@@ -166,7 +141,7 @@ case "$1" in
         # New:
         # Component "focus.jitmeet.example.com" "client_proxy"
         #    target_address = "focus@auth.jitmeet.example.com"
-        if grep -q "Component \"focus.$JVB_HOSTNAME\"" $PROSODY_HOST_CONFIG && ! grep -q "Component \"focus.$JVB_HOSTNAME\" \"client_proxy\"" $PROSODY_HOST_CONFIG ;then
+        if grep -q "Component \"focus.$JVB_HOSTNAME\"" $PROSODY_HOST_CONFIG && ! grep "Component \"focus.$JVB_HOSTNAME\" \"client_proxy\"" $PROSODY_HOST_CONFIG ;then
             sed -i "s/Component \"focus.$JVB_HOSTNAME\"/Component \"focus.$JVB_HOSTNAME\" \"client_proxy\"\n    target_address = \"$JICOFO_AUTH_USER@$JICOFO_AUTH_DOMAIN\"/g" $PROSODY_HOST_CONFIG
             PROSODY_CONFIG_PRESENT="false"
         fi
@@ -191,29 +166,6 @@ case "$1" in
             PROSODY_CONFIG_PRESENT="false"
         fi
 
-        JAAS_HOST_CONFIG="/etc/prosody/conf.avail/jaas.cfg.lua"
-        if [ "${JAAS_INPUT}" = "true" ] && [ ! -f $JAAS_HOST_CONFIG ]; then
-            sed -i "s/enabled = false -- Jitsi meet components/enabled = true -- Jitsi meet components/g" $PROSODY_HOST_CONFIG
-            PROSODY_CONFIG_PRESENT="false"
-        fi
-
-        # For those deployments that don't have the config in the jitsi-meet prosody config add the new jaas file
-        if [ ! -f $JAAS_HOST_CONFIG ] && ! grep -q "VirtualHost \"jigasi.meet.jitsi\"" $PROSODY_HOST_CONFIG; then
-            PROSODY_CONFIG_PRESENT="false"
-            cp /usr/share/jitsi-meet-prosody/jaas.cfg.lua $JAAS_HOST_CONFIG
-            sed -i "s/jitmeet.example.com/$JVB_HOSTNAME/g" $JAAS_HOST_CONFIG
-        fi
-
-        if [ "${JAAS_INPUT}" = "true" ]; then
-            JAAS_HOST_CONFIG_ENABLED="/etc/prosody/conf.d/jaas.cfg.lua "
-            if [ ! -f $JAAS_HOST_CONFIG_ENABLED ] && ! grep -q "VirtualHost \"jigasi.meet.jitsi\"" $PROSODY_HOST_CONFIG; then
-                if [ -f $JAAS_HOST_CONFIG ]; then
-                    ln -s $JAAS_HOST_CONFIG $JAAS_HOST_CONFIG_ENABLED
-                    PROSODY_CONFIG_PRESENT="false"
-                fi
-            fi
-        fi
-
         # Make sure the focus@auth user's roster includes the proxy component (this is idempotent)
         prosodyctl mod_roster_command subscribe focus.$JVB_HOSTNAME $JICOFO_AUTH_USER@$JICOFO_AUTH_DOMAIN
 
@@ -226,6 +178,32 @@ case "$1" in
             ln -sf /var/lib/prosody/$JVB_HOSTNAME.crt /etc/prosody/certs/$JVB_HOSTNAME.crt
         fi
 
+        PRTRUNK_INSTALL_CHECK="$(dpkg-query -f '${Status}' -W 'prosody-trunk' 2>/dev/null | awk '{print $3}' || true)"
+        PR10_INSTALL_CHECK="$(dpkg-query -f '${Status}' -W 'prosody-0.10' 2>/dev/null | awk '{print $3}' || true)"
+        PR_VER_INSTALLED=$(dpkg-query -f='${Version}\n' --show prosody  2>/dev/null || true)
+        if [ "$PRTRUNK_INSTALL_CHECK" = "installed" ] \
+            || [ "$PRTRUNK_INSTALL_CHECK" = "unpacked" ] ; then
+            if [ -f $PROSODY_HOST_CONFIG ]; then
+                sed -i 's/storage = \"memory\"/storage = \"null\"/g' $PROSODY_HOST_CONFIG
+
+                # trigger a restart
+                PROSODY_CONFIG_PRESENT="false"
+            fi
+        fi
+        if [ "$PR10_INSTALL_CHECK" = "installed" ] \
+            || [ "$PR10_INSTALL_CHECK" = "unpacked" ] \
+            || dpkg --compare-versions "$PR_VER_INSTALLED" gt "0.10" ; then
+
+            # if the version is 0.10.X (>0.10 and <0.11)
+            if [ -f $PROSODY_HOST_CONFIG ] \
+                && dpkg --compare-versions "$PR_VER_INSTALLED" lt "0.11" ; then
+                sed -i 's/storage = \"memory\"/storage = \"none\"/g' $PROSODY_HOST_CONFIG
+
+                # trigger a restart
+                PROSODY_CONFIG_PRESENT="false"
+            fi
+        fi
+
         CERT_ADDED_TO_TRUST="false"
 
         if [ ! -f /var/lib/prosody/$JICOFO_AUTH_DOMAIN.crt ]; then