alpha-sort

.github/workflows/ci-lua.yml

@@ -17,7 +17,8 @@ jobs:
 
     - name: Check lua codes
       run: |
-        set -o pipefail && luacheck . | awk -F: '
+        set -o pipefail
+        luacheck -q -gur -i 581 --no-max-line-length --no-color --formatter plain $(find -name '*.lua') | awk -F: '
           {
             print $0
             printf "::warning file=%s,line=%s,col=%s::%s\n", $1, $2, $3, $4

.luacheckrc

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

Makefile

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

android/sdk/build.gradle

@@ -76,6 +76,7 @@ dependencies {
     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')

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

@@ -119,6 +119,7 @@ class ReactInstanceManagerHolder {
             new com.oblador.performance.PerformancePackage(),
             new com.reactnativecommunity.slider.ReactSliderPackage(),
             new com.brentvatne.react.ReactVideoPackage(),
+            new org.reactnative.maskedview.RNCMaskedViewPackage(),
             new com.reactnativecommunity.webview.RNCWebViewPackage(),
             new com.kevinresol.react_native_default_preference.RNDefaultPreferencePackage(),
             new com.learnium.RNDeviceInfo.RNDeviceInfo(),

android/settings.gradle

@@ -31,6 +31,8 @@ include ':react-native-immersive'
 project(':react-native-immersive').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-immersive/android')
 include ':react-native-keep-awake'
 project(':react-native-keep-awake').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keep-awake/android')
+include ':react-native-masked-view_masked-view'
+project(':react-native-masked-view_masked-view').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-masked-view/masked-view/android')
 include ':react-native-orientation-locker'
 project(':react-native-orientation-locker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-orientation-locker/android')
 include ':react-native-pager-view'

app.js

@@ -33,6 +33,17 @@ window.APP = {
     API,
     conference,
 
+    // Used by do_external_connect.js if we receive the attach data after
+    // connect was already executed. status property can be 'initialized',
+    // 'ready', or 'connecting'. We are interested in 'ready' status only which
+    // means that connect was executed but we have to wait for the attach data.
+    // In status 'ready' handler property will be set to a function that will
+    // finish the connect process when the attach data or error is received.
+    connect: {
+        handler: null,
+        status: 'initialized'
+    },
+
     // Used for automated performance tests.
     connectionTimes: {
         'index.loaded': window.indexLoadedTime

conference.js

@@ -141,7 +141,7 @@ import {
     showNotification,
     showWarningNotification
 } from './react/features/notifications';
-import { mediaPermissionPromptVisibilityChanged } from './react/features/overlay/actions';
+import { mediaPermissionPromptVisibilityChanged } from './react/features/overlay';
 import { suspendDetected } from './react/features/power-monitor';
 import { initPrejoin, makePrecallTest, setJoiningInProgress } from './react/features/prejoin/actions';
 import { isPrejoinPageVisible } from './react/features/prejoin/functions';
@@ -153,7 +153,6 @@ import { createRnnoiseProcessor } from './react/features/stream-effects/rnnoise'
 import { endpointMessageReceived } from './react/features/subtitles';
 import { handleToggleVideoMuted } from './react/features/toolbox/actions.any';
 import { muteLocal } from './react/features/video-menu/actions.any';
-import { setIAmVisitor } from './react/features/visitors/actions';
 import UIEvents from './service/UI/UIEvents';
 
 const logger = Logger.getLogger(__filename);
@@ -343,8 +342,6 @@ class ConferenceConnector {
         case JitsiConferenceErrors.REDIRECTED: {
             generateVisitorConfig(APP.store.getState(), params);
 
-            APP.store.dispatch(setIAmVisitor(true));
-
             connection.disconnect().then(() => {
                 connect(this._conference.roomName).then(con => {
                     const localTracks = getLocalTracks(APP.store.getState()['features/base/tracks']);

config.js

@@ -46,9 +46,9 @@ var config = {
     },
 
     // BOSH URL. FIXME: use XEP-0156 to discover it.
-    bosh: 'https://jitsi-meet.example.com/' + subdir + 'http-bind',
+    bosh: '//jitsi-meet.example.com/' + subdir + 'http-bind',
 
-    // Websocket URL (XMPP)
+    // Websocket URL
     // websocket: 'wss://jitsi-meet.example.com/' + subdir + 'xmpp-websocket',
 
     // The real JID of focus participant - can be overridden here
@@ -56,19 +56,6 @@ var config = {
     // https://github.com/jitsi/jitsi-meet/issues/7376
     // focusUserJid: 'focus@auth.jitsi-meet.example.com',
 
-    // Options related to the bridge (colibri) data channel
-    bridgeChannel: {
-        // If the backend advertises multiple colibri websockets, this options allows
-        // to filter some of them out based on the domain name. We use the first URL
-        // which does not match ignoreDomain, falling back to the first one that matches
-        // ignoreDomain. Has no effect if undefined.
-        // ignoreDomain: 'example.com',
-
-        // Prefer SCTP (WebRTC data channels over the media path) over a colibri websocket.
-        // If SCTP is available in the backend it will be used instead of a WS. Defaults to
-        // false (SCTP is used only if available and no WS are available).
-        // preferSctp: false
-    },
 
     // Testing / experimental features.
     //
@@ -555,15 +542,12 @@ var config = {
     // Disables responsive tiles.
     // disableResponsiveTiles: false,
 
-    // DEPRECATED. Please use `securityUi?.hideLobbyButton` instead.
-    // Hides lobby button.
+    // Hides lobby button
     // hideLobbyButton: false,
 
-    // DEPRECATED. Please use `lobby?.autoKnock` instead.
     // If Lobby is enabled starts knocking automatically.
     // autoKnockLobby: false,
 
-    // DEPRECATED. Please use `lobby?.enableChat` instead.
     // Enable lobby chat.
     // enableLobbyChat: true,
 
@@ -588,22 +572,6 @@ var config = {
     //     customUrl: ''
     // },
 
-    // Configs for the lobby screen.
-    // lobby {
-    //     // If Lobby is enabled, it starts knocking automatically. Replaces `autoKnockLobby`.
-    //     autoKnock: false,
-    //     // Enables the lobby chat. Replaces `enableLobbyChat`.
-    //     enableChat: true,
-    // },
-
-    // Configs for the security related UI elements.
-    // securityUi: {
-    //     // Hides the lobby button. Replaces `hideLobbyButton`.
-    //     hideLobbyButton: false,
-    //     // Hides the possibility to set and enter a lobby password.
-    //     disableLobbyPassword: false,
-    // },
-
     // Disable app shortcuts that are registered upon joining a conference
     // disableShortcuts: false,
 
@@ -831,14 +799,6 @@ var config = {
     // 'microphone', 'camera', 'select-background', 'invite', 'settings'
     // hiddenPremeetingButtons: [],
 
-    // An array with custom option buttons for the participant context menu
-    // type:  Array<{ icon: string; id: string; text: string; }>
-    // customParticipantMenuButtons: [],
-
-    // An array with custom option buttons for the toolbar
-    // type:  Array<{ icon: string; id: string; text: string; }>
-    // customToolbarButtons: [],
-
     // Stats
     //
 
@@ -1159,13 +1119,6 @@ var config = {
     //     }
     // },
 
-    // // The terms, privacy and help centre URL's.
-    // legalUrls: {
-    //     helpCentre: 'https://web-cdn.jitsi.net/faq/meet-faq.html',
-    //     privacy: 'https://jitsi.org/meet/privacy',
-    //     terms: 'https://jitsi.org/meet/terms'
-    // },
-
     // A property to disable the right click context menu for localVideo
     // the menu has option to flip the locally seen video for local presentations
     // disableLocalVideoFlip: false,
@@ -1382,9 +1335,9 @@ var config = {
      deploymentInfo
      dialOutAuthUrl
      dialOutCodesUrl
-     dialOutRegionUrl
      disableRemoteControl
      displayJids
+     externalConnectUrl
      e2eeLabels
      firefox_fake_device
      googleApiApplicationClientID
@@ -1562,8 +1515,6 @@ var config = {
     //     tileTime: 5000,
     //     // Limit results by rating: g, pg, pg-13, r. Default value: g.
     //     rating: 'pg',
-    //     // The proxy server url for giphy requests in the web app.
-    //     proxyUrl: 'https://giphy-proxy.example.com',
     // },
 
     // Logging

connection.js

@@ -32,6 +32,54 @@ const logger = Logger.getLogger(__filename);
  */
 export const DISCO_JIBRI_FEATURE = 'http://jitsi.org/protocol/jibri';
 
+/**
+ * Checks if we have data to use attach instead of connect. If we have the data
+ * executes attach otherwise check if we have to wait for the data. If we have
+ * to wait for the attach data we are setting handler to APP.connect.handler
+ * which is going to be called when the attach data is received otherwise
+ * executes connect.
+ *
+ * @param {string} [id] user id
+ * @param {string} [password] password
+ * @param {string} [roomName] the name of the conference.
+ */
+function checkForAttachParametersAndConnect(id, password, connection) {
+    if (window.XMPPAttachInfo) {
+        APP.connect.status = 'connecting';
+
+        // When connection optimization is not deployed or enabled the default
+        // value will be window.XMPPAttachInfo.status = "error"
+        // If the connection optimization is deployed and enabled and there is
+        // a failure the value will be window.XMPPAttachInfo.status = "error"
+        if (window.XMPPAttachInfo.status === 'error') {
+            connection.connect({
+                id,
+                password
+            });
+
+            return;
+        }
+
+        const attachOptions = window.XMPPAttachInfo.data;
+
+        if (attachOptions) {
+            connection.attach(attachOptions);
+            delete window.XMPPAttachInfo.data;
+        } else {
+            connection.connect({
+                id,
+                password
+            });
+        }
+    } else {
+        APP.connect.status = 'ready';
+        APP.connect.handler
+            = checkForAttachParametersAndConnect.bind(
+                null,
+                id, password, connection);
+    }
+}
+
 /**
  * Try to open connection using provided credentials.
  * @param {string} [id]
@@ -134,10 +182,7 @@ export async function connect(id, password) {
             APP.store.dispatch(setPrejoinDisplayNameRequired());
         }
 
-        connection.connect({
-            id,
-            password
-        });
+        checkForAttachParametersAndConnect(id, password, connection);
     });
 }
 

connection_optimization/.eslintrc.js

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

connection_optimization/do_external_connect.js

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

css/_audio-preview.scss

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

css/_jiti.scss

@@ -1,67 +0,0 @@
-@keyframes rotateAroundY {
-    from { transform: rotateY(0deg); }
-    to   { transform: rotateY(360deg); }
-}
-
-@keyframes rainbowRoad {
-    to {
-        background-position: 400% 0 !important;
-    }
-}
-
-body {
-    font-family: "Comic Sans MS", "Comic Sans", sans-serif !important;
-}
-
-a {
-    background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%) !important;
-    -webkit-background-clip: text !important;
-    -webkit-text-fill-color: transparent !important;
-    -moz-background-clip: text !important;
-    -moz-text-fill-color: transparent !important;
-    animation: rainbowRoad 8s linear infinite !important;
-}
-
-a:hover {
-
-}
-
-.dominant-speaker {
-    box-shadow: inset 0px 0px 0px 4px rgba(255,0,255,0.33) !important;
-}
-
-.display-avatar-only {
-    background-image: url("");
-}
-
-.videocontainer:nth-child(odd) {
-    transform: rotate(1.5deg);
-}
-
-.videocontainer:nth-child(even) {
-    transform: rotate(-1.3deg);
-}
-
-#largeVideoContainer.videocontainer {
-    transform: none;
-}
-
-.sideToolbarContainer {
-    transform: rotate(-1.1deg);
-}
-
-.displayname:before {
-    content: "♡︎ ";
-}
-
-.displayname:after {
-    content: " ♡︎";
-}
-
-.avatar, .userAvatar {
-    transform: rotateY(0deg);
-}
-
-.avatar:hover, .userAvatar:hover {
-    animation: rotateAroundY 3.6s linear infinite;
-}

css/_meetings_list.scss

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

css/_meter.scss

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

css/_polls.scss

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

css/_popup_menu.scss

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

css/_settings-button.scss

@@ -30,24 +30,24 @@
     right: -4px;
     top: -3px;
 
-    &:hover {
+   &:hover {
         background: #F2F3F4;
         box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 
-        & > svg {
-            fill: #040404;
+        &> svg {
+            fill: #000;
         }
 
         &.settings-button-small-icon--disabled {
             background: #36383C;
 
             &> svg {
-                fill: #929292;
-            }
+               fill: #929292;
+           }
         }
     }
 
-    & > svg {
+    &> svg {
         fill: #fff;
     }
 

css/_subject.scss

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

css/_toolbars.scss

@@ -120,16 +120,12 @@
     margin: 8px 0;
 }
 
-div.hangup-button {
-    background-color: #CB2233;
+.hangup-button {
+    background-color: $hangupColor;
 
     @media (hover: hover) and (pointer: fine) {
         &:hover {
-            background-color: #E04757;
-        }
-
-        &:active {
-            background-color: #A21B29;
+            background-color: $hangupHoverColor;
         }
     }
 
@@ -138,16 +134,12 @@ div.hangup-button {
     }
 }
 
-div.hangup-menu-button {
-    background-color: #CB2233;
+.hangup-menu-button {
+    background-color: $hangupMenuButtonColor;
 
     @media (hover: hover) and (pointer: fine) {
         &:hover {
-            background-color: #E04757;
-        }
-
-        &:active {
-            background-color: #A21B29;
+            background-color: $hangupMenuButtonHoverColor;
         }
     }
 

css/_variables.scss

@@ -4,6 +4,10 @@
  * Style variables
  */
 $baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$hangupColor:#DD3849;
+$hangupHoverColor: #F25363;
+$hangupMenuButtonColor:#0056E0;;
+$hangupMenuButtonHoverColor: #246FE5;
 
 /**
  * Size variables.
@@ -201,6 +205,11 @@ $deepLinkingDialInConferenceIdPadding: inherit;
 $deepLinkingDialInConferenceIdBackgroundColor: inherit;
 $deepLinkingDialInConferenceIdBorderRadius: inherit;
 
+$deepLinkingDialInConferenceNameFontSize: inherit;
+$deepLinkingDialInConferenceNameLineHeight: inherit;
+$deepLinkingDialInConferenceNameMarginBottom: none;
+$deepLinkingDialInConferenceNameFontWeight: inherit;
+
 $deepLinkingDialInConferenceDescriptionFontSize: 0.8em;
 $deepLinkingDialInConferenceDescriptionLineHeight: inherit;
 $deepLinkingDialInConferenceDescriptionMarginBottom: none;

css/_video-preview.scss

@@ -3,38 +3,49 @@
     display: inline-block;
 
     &-container {
-        max-height: 456px;
+        max-height: 344px;
+        background: $menuBG;
+        border-radius: 3px;
         overflow: auto;
-        margin-bottom: 4px;
-        position: relative;
-        right: auto;
+        padding: 8px;
+        margin-bottom: 8px;
     }
 
     &-entry {
         cursor: pointer;
-        height: 138px;
-        width: 244px;
+        height: 168px;
+        margin-bottom: 8px;
         position: relative;
-        margin: 0 7px 4px;
-        border-radius: 6px;
-        box-sizing: border-box;
-        overflow: hidden;
+        width: 284px;
 
         &:last-child {
             margin-bottom: 0;
         }
 
         &--selected {
-            border: 2px solid #4687ED;
+            border: 3px solid #31B76A;
+            border-radius: 3px;
+            cursor: default;
+            height: 162px;
+            width: 278px;
         }
     }
 
     &-video {
+        border-radius: 3px;
         height: 100%;
         object-fit: cover;
         width: 100%;
     }
 
+    &-overlay {
+        background: rgba(42, 58, 75, 0.6);
+        height: 100%;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+    }
+
     &-error {
         align-items: center;
         display: flex;
@@ -45,22 +56,23 @@
     }
 
     &-label {
+        bottom: 8px;
+        color: #fff;
         position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        max-width: 100%;
-        padding: 8px;
+        width: 100%;
         z-index: 2;
 
+        &-container {
+            margin: 0 16px;
+        }
+
         &-text {
-            background-color: rgba(0, 0, 0, 0.7);
-            border-radius: 4px;
-            padding: 4px 8px;
-            color: #fff;
-            font-size: 12px;
-            line-height: 16px;
-            font-weight: 600;
+            background-color: #131519;
+            border-radius: 3px;
+            padding: 2px 8px;
+            font-size: 13px;
+            line-height: 20px;
+            margin: 0 auto;
             max-width: calc(100% - 16px);
             overflow: hidden;
             text-overflow: ellipsis;
@@ -68,8 +80,8 @@
             white-space: nowrap;
         }
     }
-
-    &-checkbox-container {
-        padding: 10px 14px;
+    // Override @atlaskit/InlineDialog container which is made with styled components
+    & > div:nth-child(2) {
+        padding: 0;
     }
 }

css/_welcome_page.scss

@@ -90,7 +90,7 @@ body.welcome-page {
                     font-size: 14px;
                     padding-left: 10px;
 
-                    &.focus-visible {
+                    &:focus {
                         outline: auto 2px #005fcc;
                     }
                 }
@@ -167,7 +167,7 @@ body.welcome-page {
             margin: 4px;
             display: $welcomePageTabButtonsDisplay;
 
-            [role="tab"] {
+            .tab {
                 background-color: #c7ddff;
                 border-radius: 7px;
                 cursor: pointer;
@@ -176,10 +176,8 @@ body.welcome-page {
                 margin: 2px;
                 padding: 7px 0;
                 text-align: center;
-                color: inherit;
-                border: 0;
 
-                &[aria-selected="true"] {
+                &.selected {
                     background-color: #FFF;
                 }
             }

css/deep-linking/_mobile.scss

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

css/main.scss

@@ -33,6 +33,7 @@ $flagsImagePath: "../images/";
 @import 'reload_overlay/reload_overlay';
 @import 'mini_toolbox';
 @import 'modals/desktop-picker/desktop-picker';
+@import 'modals/device-selection/device-selection';
 @import 'modals/dialog';
 @import 'modals/embed-meeting/embed-meeting';
 @import 'modals/feedback/feedback';
@@ -94,9 +95,3 @@ $flagsImagePath: "../images/";
 @import 'notifications';
 
 /* Modules END */
-
-/* Jeet crew BEGIN */
-
-@import 'jiti';
-
-/* Jeet crew END */

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

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

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

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

css/modals/feedback/_feedback.scss

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

css/modals/invite/_info.scss

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

css/premeeting/_prejoin.scss

@@ -41,11 +41,11 @@
     &-dropdown-btns {
         padding: 8px 0;
     }
-
+  
     &-dropdown-container {
         position: relative;
         width: 100%;
-
+  
         /**
         * Override default InlineDialog behaviour, since it does not play nicely with relative widths
         */
@@ -56,13 +56,5 @@
             width: 100%;
         }
     }
-}
-
-.prejoin-input {
-    margin-bottom: 16px;
-    width: 100%;
-
-    & input {
-        text-align: center;
-    }
-}
+  }
+  

css/premeeting/_premeeting-screens.scss

@@ -1,4 +1,14 @@
-.premeeting-screen {
+ .premeeting-screen {
+    background: #292929;
+    bottom: 0;
+    display: flex;
+    font-size: 1.3em;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: $toolbarZ + 2;
+
     .action-btn {
         border-radius: 6px;
         box-sizing: border-box;
@@ -65,44 +75,139 @@
         }
     }
 
-    #new-toolbox {
-        bottom: 0;
+    .content {
+        align-items: center;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+        height: 100%;
+        margin: 0 30px;
+        padding: 24px 0 16px;
         position: relative;
-        transition: none;
+        width: $prejoinDefaultContentWidth;
+        z-index: $toolbarZ + 2;
 
-        .toolbox-content {
-            margin-bottom: 4px;
-        }
-
-        .toolbox-content-items {
-            @include ltr;
-            background: transparent;
-            box-shadow: none;
+        &-controls {
+            align-items: center;
             display: flex;
-            justify-content: space-between;
-            padding: 8px 0;
-        }
-
-        .toolbox-content,
-        .toolbox-content-wrapper,
-        .toolbox-content-items {
-            box-sizing: border-box;
+            flex-direction: column;
+            margin: auto;
             width: 100%;
+
+            .title {
+                color: #fff;
+                font-size: 28px;
+                font-weight: 600;
+                letter-spacing: -0.015;
+                line-height: 36px;
+                margin-bottom: 16px;
+                text-align: center;
+            }
+
+            input.field {
+                background-color: white;
+                border: none;
+                outline: none;
+                border-radius: 6px;
+                font-size: 14px;
+                line-height: 20px;
+                margin-bottom: 16px;
+                color: #1C2025;
+                padding: 10px 16px;
+                text-align: center;
+                width: 100%;
+
+                &.error {
+                    border: 1px solid #E04757;
+                }
+
+                &.focused {
+                    box-shadow: 0px 0px 1px 1.5px black, 0px 0px 1.3px 4px white;
+                }
+            }
+
+            #new-toolbox {
+                bottom: 0;
+                position: relative;
+                transition: none;
+
+                .toolbox-content {
+                    margin-bottom: 4px;
+                }
+
+                .toolbox-content-items {
+                    @include ltr;
+                    background: transparent;
+                    box-shadow: none;
+                    display: flex;
+                    justify-content: space-evenly;
+                    padding: 8px 0;
+                }
+
+                .toolbox-content,
+                .toolbox-content-wrapper,
+                .toolbox-content-items {
+                    box-sizing: border-box;
+                    width: 100%;
+                }
+            }
+        }
+    }
+
+    @media (max-width: 720px) {
+        flex-direction: column-reverse;
+
+        .content {
+            height: auto;
+            margin: 0 auto;
+        }
+    }
+
+    // mobile phone landscape
+    @media (max-height: 420px) {
+        div.content {
+            padding: 16px 16px 0 16px;
         }
     }
 
     @media (max-width: 400px) {
+        .content {
+            padding: 16px;
+            width: 100%;
+
+            &-controls {
+                input.field {
+                    font-size: 16px;
+                    padding: 14px 16px;
+                }
+            }
+
+            .title {
+                display: none;
+            }
+        }
+
         .device-status-error {
             border-radius: 0;
             margin: 0 -16px;
         }
 
+        input.field {
+            font-size: 16px;
+            padding: 14px 16px;
+        }
+
         .action-btn {
             font-size: 16px;
             margin-bottom: 8px;
             padding: 11px 16px;
         }
     }
+
+    input::placeholder {
+        color: #040404;
+    }
 }
 
 #preview {

css/themes/_light.scss

@@ -65,6 +65,7 @@ $errorColor: #c61600;
 
 // Popover colors
 $popoverFontColor: #ffffff !important;
+$popupSliderColor: #0376da;
 
 // Toolbar
 $toolbarBackground: rgba(0, 0, 0, 0.5);

debian/jitsi-meet-web.install

@@ -8,6 +8,7 @@ sounds					/usr/share/jitsi-meet/
 fonts					/usr/share/jitsi-meet/
 images					/usr/share/jitsi-meet/
 lang					/usr/share/jitsi-meet/
+connection_optimization	/usr/share/jitsi-meet/
 resources/robots.txt	/usr/share/jitsi-meet/
 resources/*.sh			/usr/share/jitsi-meet/scripts/
 pwa-worker.js			/usr/share/jitsi-meet/

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

@@ -93,7 +93,7 @@ server {
     }
 
     # ensure all static content can always be found first
-    location ~ ^/(libs|css|static|images|fonts|lang|sounds|.well-known)/(.*)$
+    location ~ ^/(libs|css|static|images|fonts|lang|sounds|connection_optimization|.well-known)/(.*)$
     {
         add_header 'Access-Control-Allow-Origin' '*';
         alias /usr/share/jitsi-meet/$1/$2;

index.html

@@ -182,6 +182,8 @@
             'error', loadErrHandler, true /* capture phase type of listener */);
     </script>
     <script><!--#include virtual="/config.js" --></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
+    <!--#include virtual="connection_optimization/connection_optimization.html" -->
+    <script src="libs/do_external_connect.min.js?v=1"></script>
     <script><!--#include virtual="/interface_config.js" --></script>
     <script src="libs/lib-jitsi-meet.min.js?v=139"></script>
     <script src="libs/app.bundle.min.js?v=139"></script>

interface_config.js

@@ -9,7 +9,7 @@
  */
 
 var interfaceConfig = {
-    APP_NAME: 'JitSea 🏴‍☠️',
+    APP_NAME: 'Jitsi Meet',
     AUDIO_LEVEL_PRIMARY_COLOR: 'rgba(255,255,255,0.4)',
     AUDIO_LEVEL_SECONDARY_COLOR: 'rgba(255,255,255,0.2)',
 

ios/Podfile.lock

@@ -389,7 +389,7 @@ PODS:
   - react-native-video/Video (6.0.0-alpha.1):
     - PromisesSwift
     - React-Core
-  - react-native-webrtc (106.0.6):
+  - react-native-webrtc (106.0.4):
     - JitsiWebRTC (~> 106.0.0)
     - React-Core
   - react-native-webview (11.15.1):
@@ -465,11 +465,13 @@ PODS:
     - React-Core
   - RNCClipboard (1.5.1):
     - React-Core
+  - RNCMaskedView (0.2.6):
+    - React-Core
   - RNDefaultPreference (1.4.4):
     - React-Core
   - RNDeviceInfo (8.4.8):
     - React-Core
-  - RNGestureHandler (2.9.0):
+  - RNGestureHandler (2.8.0):
     - React-Core
   - RNGoogleSignin (7.0.4):
     - GoogleSignIn (~> 6.0.0)
@@ -545,6 +547,7 @@ DEPENDENCIES:
   - RNCalendarEvents (from `../node_modules/react-native-calendar-events`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - "RNCClipboard (from `../node_modules/@react-native-community/clipboard`)"
+  - "RNCMaskedView (from `../node_modules/@react-native-masked-view/masked-view`)"
   - RNDefaultPreference (from `../node_modules/react-native-default-preference`)
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
@@ -679,6 +682,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-async-storage/async-storage"
   RNCClipboard:
     :path: "../node_modules/@react-native-community/clipboard"
+  RNCMaskedView:
+    :path: "../node_modules/@react-native-masked-view/masked-view"
   RNDefaultPreference:
     :path: "../node_modules/react-native-default-preference"
   RNDeviceInfo:
@@ -754,7 +759,7 @@ SPEC CHECKSUMS:
   react-native-slider: 6e9b86e76cce4b9e35b3403193a6432ed07e0c81
   react-native-splash-screen: 4312f786b13a81b5169ef346d76d33bc0c6dc457
   react-native-video: bb6f12a7198db53b261fefb5d609dc77417acc8b
-  react-native-webrtc: 22ac6c64a1e38552bb173dde81ffea6979a58ef3
+  react-native-webrtc: 4522d420ead45fff83c4ecc7e5a706797857a185
   react-native-webview: ea4899a1056c782afa96dd082179a66cbebf5504
   React-perflogger: 0458a87ea9a7342079e7a31b0d32b3734fb8415f
   React-RCTActionSheet: 22538001ea2926dea001111dd2846c13a0730bc9
@@ -771,9 +776,10 @@ SPEC CHECKSUMS:
   RNCalendarEvents: 7e65eb4a94f53c1744d1e275f7fafcfaa619f7a3
   RNCAsyncStorage: 005c0e2f09575360f142d0d1f1f15e4ec575b1af
   RNCClipboard: 41d8d918092ae8e676f18adada19104fa3e68495
+  RNCMaskedView: c298b644a10c0c142055b3ae24d83879ecb13ccd
   RNDefaultPreference: 08bdb06cfa9188d5da97d4642dac745218d7fb31
   RNDeviceInfo: 0400a6d0c94186d1120c3cbd97b23abc022187a9
-  RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39
+  RNGestureHandler: 62232ba8f562f7dea5ba1b3383494eb5bf97a4d3
   RNGoogleSignin: c4381751eefd73c552b923ba347a9bfc6f18771c
   RNScreens: 40a2cb40a02a609938137a1e0acfbf8fc9eebf19
   RNSound: 27e8268bdb0a1f191f219a33267f7e0445e8d62f

ios/sdk/src/JitsiMeetView.m

@@ -40,10 +40,19 @@ static NSString *const PiPEnabledFeatureFlag = @"pip.enabled";
 
 #pragma mark Initializers
 
+- (instancetype)init {
+    self = [super init];
+    if (self) {
+        [self initWithXXX];
+    }
+
+    return self;
+}
+
 - (instancetype)initWithCoder:(NSCoder *)coder {
     self = [super initWithCoder:coder];
     if (self) {
-        [self doInitialize];
+        [self initWithXXX];
     }
 
     return self;
@@ -52,7 +61,7 @@ static NSString *const PiPEnabledFeatureFlag = @"pip.enabled";
 - (instancetype)initWithFrame:(CGRect)frame {
     self = [super initWithFrame:frame];
     if (self) {
-        [self doInitialize];
+        [self initWithXXX];
     }
 
     return self;
@@ -62,9 +71,9 @@ static NSString *const PiPEnabledFeatureFlag = @"pip.enabled";
  * Internal initialization:
  *
  * - sets the background color
- * - registers necessary observers
+ * - initializes the external API scope
  */
-- (void)doInitialize {
+- (void)initWithXXX {
     // Set a background color which is in accord with the JavaScript and Android
     // parts of the application and causes less perceived visual flicker than
     // the default background color.

lang/languages.json

@@ -7,7 +7,6 @@
     "cs": "Čeština",
     "da": "Dansk",
     "de": "Deutsch",
-    "dsb": "Dolnoserbšćina",
     "el": "Ελληνικά",
     "en": "English",
     "enGB": "English (United Kingdom)",

lang/main-de.json

@@ -184,21 +184,13 @@
     "deepLinking": {
         "appNotInstalled": "Sie benötigen die „{{app}}“-App, um der Konferenz auf dem Smartphone beizutreten.",
         "description": "Nichts passiert? Wir haben versucht, die Konferenz in {{app}} zu öffnen. Versuchen Sie es erneut oder treten Sie der Konferenz in {{app}} im Web bei.",
-        "descriptionNew": "Nichts passiert? Wir haben versucht, die Konferenz in {{app}} zu öffnen. <br /><br /> Versuchen Sie es erneut oder treten Sie der Konferenz im Web bei.",
         "descriptionWithoutWeb": "Ist nichts passiert? Wir haben versucht, Ihre Besprechung in der „{{app}}“-Desktop-App zu starten.",
         "downloadApp": "App herunterladen",
-        "downloadMobileApp": "Aus dem App Store herunterladen",
         "ifDoNotHaveApp": "Wenn Sie die App noch nicht haben:",
         "ifHaveApp": "Wenn Sie die App bereits haben:",
         "joinInApp": "Mit der App am Meeting teilnehmen",
-        "joinInAppNew": "Mit der App",
-        "joinInBrowser": "Im Browser",
-        "launchMeetingLabel": "Wie möchten Sie an der Konferenz teilnehmen?",
         "launchWebButton": "Im Web öffnen",
-        "noMobileApp": "Sie haben die App noch nicht installiert?",
-        "termsAndConditions": "Indem Sie fortfahren, stimmen Sie underen<a href='{{termsAndConditionsLink}}' rel='noopener noreferrer' target='_blank'>Nutzungsbedingungen</a> zu.",
         "title": "Die Konferenz wird in {{app}} geöffnet …",
-        "titleNew": "Konferenz starten ...",
         "tryAgainButton": "Erneut mit der nativen Applikation versuchen",
         "unsupportedBrowser": "Sie verwenden einen Browser, der noch nicht unterstützt wird."
     },
@@ -211,12 +203,6 @@
         "microphonePermission": "Fehler beim Bezug der Mikrofon-Zugriffsberechtigungen"
     },
     "deviceSelection": {
-        "hid": {
-            "callControl": "Anrufsteuerung",
-            "connectedDevices": "Verbundene Geräte:",
-            "deleteDevice": "Gerät löschen",
-            "pairDevice": "Gerät verbinden"
-        },
         "noPermission": "Berechtigungen nicht erteilt",
         "previewUnavailable": "Keine Vorschau verfügbar",
         "selectADevice": "Ein Gerät wählen",
@@ -240,9 +226,7 @@
         "WaitingForHostTitle": "Warten auf den Beginn der Konferenz …",
         "Yes": "Ja",
         "accessibilityLabel": {
-            "close": "Popup schließen",
-            "liveStreaming": "Livestream",
-            "sharingTabs": "Optionen zum Teilen"
+            "liveStreaming": "Livestream"
         },
         "add": "Hinzufügen",
         "addMeetingNote": "Notiz zu dieser Konferenz hinzufügen",
@@ -454,11 +438,6 @@
         "veryBad": "Sehr schlecht",
         "veryGood": "Sehr gut"
     },
-    "filmstrip": {
-        "accessibilityLabel": {
-            "heading": "Videominiaturen"
-        }
-    },
     "giphy": {
         "noResults": "Keine Ergebnisse :(",
         "search": "GIPHY durchsuchen"
@@ -772,7 +751,6 @@
         "headings": {
             "lobby": "Lobby ({{count}})",
             "participantsList": "Anwesende ({{count}})",
-            "visitors": "Gäste ({{count}})",
             "waitingLobby": "In der Lobby ({{count}})"
         },
         "search": "Suche Anwesende",
@@ -780,7 +758,6 @@
     },
     "passwordDigitsOnly": "Bis zu {{number}} Ziffern",
     "passwordSetRemotely": "von einer anderen Person gesetzt",
-    "pinParticipant": "{{participantName}} - anheften",
     "pinnedParticipant": "Die Person ist angeheftet",
     "polls": {
         "answer": {
@@ -939,7 +916,6 @@
         "localRecordingVideoWarning": "Um Ihr eigenes Kamerabild aufzuzeichnen, müssen Sie Ihre Kamera beim Start der Aufnahme einschalten",
         "localRecordingWarning": "Bitte prüfen Sie, dass das aktuelle Tab auswählen, um Bild und Ton aufzuzeichnen. Die Länge der Aufzeichnung ist aktuell auf 1GB beschränkt, was ungefähr 100 Minuten entspricht.",
         "loggedIn": "Als {{userName}} angemeldet",
-        "noMicPermission": "Zugriff auf Mikrofon fehlgeschlagen. Bitte erlauben Sie den Zugriff auf das Mikrofon.",
         "noStreams": "Kein Ton oder Video erkannt.",
         "off": "Aufnahme gestoppt",
         "offBy": "{{name}} stoppte die Aufnahme",
@@ -973,7 +949,6 @@
         "title": "Sicherheitsoptionen"
     },
     "settings": {
-        "audio": "Audio",
         "buttonLabel": "Einstellungen",
         "calendar": {
             "about": "Die Kalenderintegration von {{appName}} wird verwendet, um ein sicheres Zugreifen auf Ihren Kalender und Auslesen der bevorstehenden Termine zu ermöglichen.",
@@ -994,11 +969,9 @@
         "maxStageParticipants": "Maximale Anzahl an Personen, die zur Hauptansicht angeheftet werden können",
         "microphones": "Mikrofon",
         "moderator": "Moderation",
-        "moderatorOptions": "Moderationseinstellungen",
         "more": "Mehr",
         "name": "Name",
         "noDevice": "Kein",
-        "notifications": "Benachrichtigungen",
         "participantJoined": "Neue Person nimmt teil",
         "participantKnocking": "Person hat Lobby betreten",
         "participantLeft": "Person verlässt die Konferenz",
@@ -1009,14 +982,13 @@
         "selectCamera": "Kamera",
         "selectMic": "Mikrofon",
         "selfView": "Eigene Ansicht",
-        "shortcuts": "Tastaturkürzel",
+        "sounds": "Hinweistöne",
         "speakers": "Lautsprecher",
         "startAudioMuted": "Alle Personen treten stummgeschaltet bei",
         "startReactionsMuted": "Interaktionstöne für alle deaktivieren",
         "startVideoMuted": "Alle Personen treten ohne Video bei",
         "talkWhileMuted": "Wenn bei Stummschaltung gesprochen wird",
-        "title": "Einstellungen",
-        "video": "Kamera"
+        "title": "Einstellungen"
     },
     "settingsView": {
         "advanced": "Erweitert",
@@ -1108,7 +1080,6 @@
             "giphy": "GIPHY ein-/ausschalten",
             "grantModerator": "Moderationsrechte vergeben",
             "hangup": "Konferenz verlassen",
-            "heading": "Toolbar",
             "help": "Hilfe",
             "invite": "Person einladen",
             "kick": "Person entfernen",
@@ -1175,7 +1146,6 @@
         "download": "Unsere Apps herunterladen",
         "e2ee": "Ende-zu-Ende-Verschlüsselung",
         "embedMeeting": "Konferenz einbetten",
-        "enableNoiseSuppression": "Rauschunterdrückung einschalten",
         "endConference": "Konferenz für alle beenden",
         "enterFullScreen": "Vollbildmodus",
         "enterTileView": "Kachelansicht einschalten",
@@ -1263,7 +1233,6 @@
         "subtitlesOff": "Ausschalten",
         "tr": "TR"
     },
-    "unpinParticipant": "{{participantName}} - Nicht mehr anheften",
     "userMedia": {
         "androidGrantPermissions": "Wählen Sie <b><i>Zulassen</i></b>, wenn der Browser um Berechtigungen bittet.",
         "chromeGrantPermissions": "Wählen Sie <b><i>Zulassen</i></b>, wenn der Browser um Berechtigungen bittet.",
@@ -1302,11 +1271,9 @@
         "ldTooltip": "Video wird in niedriger Auflösung angezeigt",
         "lowDefinition": "Niedrige Auflösung",
         "performanceSettings": "Qualitätseinstellungen",
-        "recording": "Aufnahme läuft",
         "sd": "SD",
         "sdTooltip": "Video wird in Standardauflösung angezeigt",
-        "standardDefinition": "Standardauflösung",
-        "streaming": "Streaming läuft"
+        "standardDefinition": "Standardauflösung"
     },
     "videothumbnail": {
         "connectionInfo": "Verbindungsinformationen",
@@ -1318,7 +1285,6 @@
         "grantModerator": "Moderationsrechte vergeben",
         "hideSelfView": "Eigene Ansicht ausblenden",
         "kick": "Hinauswerfen",
-        "mirrorVideo": "Mein Video spiegeln",
         "moderator": "Moderation",
         "mute": "Person ist stumm geschaltet",
         "muted": "Stummgeschaltet",
@@ -1356,7 +1322,6 @@
         "webAssemblyWarning": "WebAssembly wird nicht unterstützt",
         "webAssemblyWarningDescription": "WebAssembly ist deaktiviert oder wird in diesem Browser nicht unterstützt"
     },
-    "visitorsLabel": "Anzahl Gäste: {{count}}",
     "volumeSlider": "Lautstärkeregler",
     "welcomepage": {
         "accessibilityLabel": {
@@ -1389,7 +1354,6 @@
             "microsoftLogo": "Microsoft Logo",
             "policyLogo": "Richtlinienlogo"
         },
-        "meetingsAccessibilityLabel": "Konferenzen",
         "mobileDownLoadLinkAndroid": "Android App Download",
         "mobileDownLoadLinkFDroid": "F-Droid App Download",
         "mobileDownLoadLinkIos": "iOS App Download",
@@ -1409,10 +1373,5 @@
         "terms": "AGB",
         "title": "Sichere, voll funktionale und komplett kostenlose Videokonferenzen",
         "upcomingMeetings": "Ihre zukünftigen Konferenzen"
-    },
-    "whiteboard": {
-        "accessibilityLabel": {
-            "heading": "Whiteboard"
-        }
     }
 }

lang/main-es.json

@@ -838,7 +838,7 @@
         "selectCamera": "Cámara",
         "selectMic": "Micrófono",
         "sounds": "Sonidos",
-        "speakers": "Altavoces",
+        "speakers": "Parlantes",
         "startAudioMuted": "Todos inician silenciados",
         "startVideoMuted": "Todos inician con cámara desactivada",
         "talkWhileMuted": "Hablar en silencio",

lang/main-nl.json

@@ -882,7 +882,6 @@
             "document": "Gedeeld document in- of uitschakelen",
             "download": "Download onze apps",
             "embedMeeting": "Vergadering embedden",
-            "endConference": "Vergadering voor iedereen beëindigen",
             "feedback": "Feedback achterlaten",
             "fullScreen": "Volledig scherm in- of uitschakelen",
             "grantModerator": "Moderatorrechten verlenen",
@@ -890,7 +889,6 @@
             "help": "Hulp",
             "invite": "Personen uitnodigen",
             "kick": "Deelnemer verwijderen",
-            "leaveConference": "Vergadering verlaten",
             "lobbyButton": "Lobby-modus in- of uitschakelen",
             "localRecording": "Besturingselementen voor lokale opname in- of uitschakelen",
             "lockRoom": "Wachtwoord voor vergadering in- of uitschakelen",
@@ -940,7 +938,6 @@
         "download": "Download onze apps",
         "e2ee": "Eind-tot-eind-versleuteling",
         "embedMeeting": "Vergadering embedden",
-        "endConference": "Vergadering voor iedereen beëindigen",
         "enterFullScreen": "Volledig scherm weergeven",
         "enterTileView": "Tegelweergave openen",
         "exitFullScreen": "Volledig scherm sluiten",
@@ -951,7 +948,6 @@
         "invite": "Personen uitnodigen",
         "joinBreakoutRoom": "Deelnemen aan aparte vergaderruimte",
         "leaveBreakoutRoom": "Aparte vergaderruimte verlaten",
-        "leaveConference": "Vergadering verlaten",
         "lobbyButtonDisable": "Schakel lobby-modus uit",
         "lobbyButtonEnable": "Schakel lobby-modus in",
         "login": "Aanmelden",

lang/main-pt.json

@@ -89,7 +89,7 @@
     "chat": {
         "enter": "Entrar na sala",
         "error": "Erro: a sua mensagem não foi enviada. Motivo: {{error}}",
-        "fieldPlaceHolder": "Aa",
+        "fieldPlaceHolder": "Escreva aqui a sua mensagem",
         "lobbyChatMessageTo": "Mensagem de chat na sala de espera para {{recipient}}",
         "message": "Mensagem",
         "messageAccessibleTitle": "{{user}} disse:",
@@ -147,7 +147,6 @@
         "bridgeCount": "Servidores: ",
         "codecs": "Codecs (A/V): ",
         "connectedTo": "Ligado a:",
-        "e2eeVerified": "E2EE verificada:",
         "framerate": "Taxa de frames:",
         "less": "Mostrar menos",
         "localaddress": "Endereço local:",
@@ -267,7 +266,7 @@
         "e2eeWarning": "AVISO: Nem todos os participantes neste encontro parecem ter apoio para a encriptação de ponta a ponta. Se o permitir, eles não o poderão ver nem ouvir.",
         "e2eeWillDisableDueToMaxModeDescription": "AVISO: A encriptação de ponta a ponta será automaticamente desativada se mais participantes aderirem à conferência.",
         "embedMeeting": "Embutir reunião",
-        "enterDisplayName": "Digite o seu nome",
+        "enterDisplayName": "Digite o seu nome aqui",
         "error": "Erro",
         "gracefulShutdown": "O nosso serviço está atualmente em manutenção. Por favor, tente novamente mais tarde.",
         "grantModeratorDialog": "Tem a certeza que quer conceder direitos de moderador a {{participantName}}?",
@@ -409,10 +408,6 @@
         "user": "Utilizador",
         "userIdentifier": "Identificador do utilizador",
         "userPassword": "Palavra-passe do utilizador",
-        "verifyParticipantConfirm": "Coincidem",
-        "verifyParticipantDismiss": "Não coincidem",
-        "verifyParticipantQuestion": "EXPERIMENTAL: Perguntar ao participante {{participantName}} se vêem o mesmo conteúdo, na mesma ordem.",
-        "verifyParticipantTitle": "Verificação pelo utilizador",
         "videoLink": "Link do vídeo",
         "viewUpgradeOptions": "Ver opções de actualização",
         "viewUpgradeOptionsContent": "Para obter acesso ilimitado a funcionalidades premium como gravação, transcrições, RTMP Streaming & mais, terá de actualizar o seu plano.",
@@ -442,6 +437,9 @@
         "noResults": "Não foram encontrados resultados :(",
         "search": "Procurar no GIPHY"
     },
+    "helpView": {
+        "title": "Centro de ajuda"
+    },
     "incomingCall": {
         "answer": "Responder",
         "audioCallTitle": "Chamada recebida",
@@ -565,6 +563,7 @@
     "lobby": {
         "admit": "Aceitar",
         "admitAll": "Aceitar todos",
+        "allow": "Permitir",
         "backToKnockModeButton": "Peça para aderir",
         "chat": "Chat",
         "dialogTitle": "Modo sala de espera",
@@ -650,8 +649,6 @@
         "connectedOneMember": "{{name}} entrou na reunião",
         "connectedThreePlusMembers": "{{name}} e muitos outros entraram na reunião",
         "connectedTwoMembers": "{{first}} e {{second}} entraram na reunião",
-        "dataChannelClosed": "Deficiência na qualidade do vídeo",
-        "dataChannelClosedDescription": "O canal de ponte foi desconectado e, portanto, a qualidade do vídeo está limitada à sua configuração mais baixa.",
         "disconnected": "desconectado",
         "displayNotifications": "Mostrar notificações para",
         "focus": "Foco da conferência",
@@ -712,8 +709,6 @@
         "reactionSoundsForAll": "Desativar sons para todos",
         "screenShareNoAudio": "A caixa de compartilhar áudio não foi marcada no ecrã de seleção da janela.",
         "screenShareNoAudioTitle": "Não foi possível partilhar o áudio do sistema!",
-        "screenSharingAudioOnlyDescription": "Note por favor que ao partilhar o seu ecrã está a afectar o modo \"Melhor desempenho\" e irá utilizar mais largura de banda.",
-        "screenSharingAudioOnlyTitle": "Modo \"Melhor desempenho\"",
         "selfViewTitle": "Pode sempre reexibir a autovisualização a partir das definições",
         "somebody": "Alguém",
         "startSilentDescription": "Volte à reunião para habilitar o áudio",
@@ -863,6 +858,9 @@
         "rejected": "Rejeitado",
         "ringing": "Tocando..."
     },
+    "privacyView": {
+        "title": "Privacidade"
+    },
     "profile": {
         "avatar": "avatar",
         "setDisplayNameLabel": "Definir seu nome de exibição",
@@ -916,7 +914,6 @@
         "localRecordingVideoWarning": "Para gravar o seu vídeo deve tê-lo ligado quando iniciar a gravação",
         "localRecordingWarning": "Certifique-se de selecionar o separador actual a fim de utilizar o vídeo e áudio corretos. A gravação está actualmente limitada a 1 GB, o que é cerca de 100 minutos.",
         "loggedIn": "Conectado como {{userName}}",
-        "noMicPermission": "Não foi possível criar a faixa de microfone. Por favor, conceda permissão para utilizar o microfone.",
         "noStreams": "Não foi detetado nenhum sinal áudio ou vídeo.",
         "off": "Gravação parada",
         "offBy": "{{name}} parou a gravação",
@@ -967,7 +964,7 @@
         "incomingMessage": "Receber uma mensagem",
         "language": "Idioma",
         "loggedIn": "Sessão iniciada como {{name}}",
-        "maxStageParticipants": "Número máximo de participantes que podem ser afixados (EXPERIMENTAL)",
+        "maxStageParticipants": "Número máximo de participantes que podem ser afixados",
         "microphones": "Microfones",
         "moderator": "Moderador",
         "more": "Mais",
@@ -986,7 +983,7 @@
         "sounds": "Sons",
         "speakers": "Participantes",
         "startAudioMuted": "Todos começam com microfone desligado",
-        "startReactionsMuted": "Todos começam com os sons de reação desativados",
+        "startReactionsMuted": "Sons de reação silenciados para todos",
         "startVideoMuted": "Todos começam com câmara desligada",
         "talkWhileMuted": "Falar com o microfone desligado",
         "title": "Definições"
@@ -1006,7 +1003,6 @@
         "displayName": "Nome de exibição",
         "displayNamePlaceholderText": "Ex: João Dias",
         "email": "Email",
-        "emailPlaceholderText": "email@example.com",
         "goTo": "Ir para",
         "header": "Configurações",
         "help": "Ajuda",
@@ -1295,7 +1291,6 @@
         "show": "Mostrar no palco",
         "showSelfView": "Mostrar autovisualização",
         "unpinFromStage": "Desafixar",
-        "verify": "Verificar participante",
         "videoMuted": "Câmara desativada",
         "videomute": "Participante parou a câmara"
     },
@@ -1363,7 +1358,6 @@
         "recentList": "Recente",
         "recentListDelete": "Remover",
         "recentListEmpty": "A sua lista recente está atualmente vazia. Converse com a sua equipa e encontrará aqui todas as suas reuniões recentes.",
-        "recentMeetings": "As suas reuniões recentes",
         "reducedUIText": "Bem-vindo ao {{app}}!",
         "roomNameAllowedChars": "Nome da reunião não deve conter qualquer um destes caracteres: ?. &, :, ', \", %, #.",
         "roomname": "Digite o nome da sala",
@@ -1372,7 +1366,6 @@
         "settings": "Definições",
         "startMeeting": "Iniciar reunião",
         "terms": "Termos",
-        "title": "Videoconferências mais seguras, flexíveis e totalmente gratuitas",
-        "upcomingMeetings": "As suas próximas reuniões"
+        "title": "Videoconferências mais seguras, flexíveis e totalmente gratuitas"
     }
 }

lang/main.json

@@ -184,21 +184,13 @@
     "deepLinking": {
         "appNotInstalled": "You need the {{app}} mobile app to join this meeting on your phone.",
         "description": "Nothing happened? We tried launching your meeting in the {{app}} desktop app. Try again or launch it in the {{app}} web app.",
-        "descriptionNew": "Nothing happened? We tried launching your meeting in the {{app}} desktop app. <br /><br /> You can try again or launch it on web.",
         "descriptionWithoutWeb": "Nothing happened? We tried launching your meeting in the {{app}} desktop app.",
         "downloadApp": "Download the app",
-        "downloadMobileApp": "Download from App Store",
         "ifDoNotHaveApp": "If you don't have the app yet:",
         "ifHaveApp": "If you already have the app:",
         "joinInApp": "Join this meeting using the app",
-        "joinInAppNew": "Join in app",
-        "joinInBrowser": "Join in browser",
-        "launchMeetingLabel": "How do you want to join this meeting?",
         "launchWebButton": "Launch in web",
-        "noMobileApp": "You don’t have the app?",
-        "termsAndConditions": "By continuing you agree to our <a href='{{termsAndConditionsLink}}' rel='noopener noreferrer' target='_blank'>terms & conditions.</a>",
         "title": "Launching your meeting in {{app}}...",
-        "titleNew": "Launching your meeting ...",
         "tryAgainButton": "Try again in desktop",
         "unsupportedBrowser": "It looks like you're using a browser we don't support."
     },
@@ -211,16 +203,10 @@
         "microphonePermission": "Error obtaining microphone permission"
     },
     "deviceSelection": {
-        "hid": {
-            "callControl": "Call control",
-            "connectedDevices": "Connected devices:",
-            "deleteDevice": "Delete device",
-            "pairDevice": "Pair device"
-        },
         "noPermission": "Permission not granted",
         "previewUnavailable": "Preview unavailable",
         "selectADevice": "Select a device",
-        "testAudio": "Test"
+        "testAudio": "Play a test sound"
     },
     "dialIn": {
         "screenTitle": "Dial-in summary"
@@ -240,9 +226,7 @@
         "WaitingForHostTitle": "Waiting for the host ...",
         "Yes": "Yes",
         "accessibilityLabel": {
-            "close": "Close dialog",
-            "liveStreaming": "Live Stream",
-            "sharingTabs": "Sharing options"
+            "liveStreaming": "Live Stream"
         },
         "add": "Add",
         "addMeetingNote": "Add a note about this meeting",
@@ -454,11 +438,6 @@
         "veryBad": "Very Bad",
         "veryGood": "Very Good"
     },
-    "filmstrip": {
-        "accessibilityLabel": {
-            "heading": "Video thumbnails"
-        }
-    },
     "giphy": {
         "noResults": "No results found :(",
         "search": "Search GIPHY"
@@ -772,7 +751,6 @@
         "headings": {
             "lobby": "Lobby ({{count}})",
             "participantsList": "Meeting participants ({{count}})",
-            "visitors": "Visitors ({{count}})",
             "waitingLobby": "Waiting in lobby ({{count}})"
         },
         "search": "Search participants",
@@ -780,7 +758,6 @@
     },
     "passwordDigitsOnly": "Up to {{number}} digits",
     "passwordSetRemotely": "Set by another participant",
-    "pinParticipant": "{{participantName}} - Pin",
     "pinnedParticipant": "The participant is pinned",
     "polls": {
         "answer": {
@@ -888,9 +865,9 @@
     },
     "profile": {
         "avatar": "avatar",
-        "setDisplayNameLabel": "Name",
+        "setDisplayNameLabel": "Set your display name",
         "setEmailInput": "Enter email",
-        "setEmailLabel": "Gravatar email",
+        "setEmailLabel": "Set your gravatar email",
         "title": "Profile"
     },
     "raisedHand": "Would like to speak",
@@ -939,7 +916,6 @@
         "localRecordingVideoWarning": "To record your video you must have it on when starting the recording",
         "localRecordingWarning": "Make sure you select the current tab in order to use the right video and audio. The recording is currently limited to 1GB, which is around 100 minutes.",
         "loggedIn": "Logged in as {{userName}}",
-        "noMicPermission": "Microphone track could not be created. Please grant permission to use the microphone.",
         "noStreams": "No audio or video stream detected.",
         "off": "Recording stopped",
         "offBy": "{{name}} stopped the recording",
@@ -973,7 +949,6 @@
         "title": "Security Options"
     },
     "settings": {
-        "audio": "Audio",
         "buttonLabel": "Settings",
         "calendar": {
             "about": "The {{appName}} calendar integration is used to securely access your calendar so it can read upcoming events.",
@@ -994,11 +969,9 @@
         "maxStageParticipants": "Maximum number of participants who can be pinned to the main stage (EXPERIMENTAL)",
         "microphones": "Microphones",
         "moderator": "Moderator",
-        "moderatorOptions": "Moderator options",
-        "more": "General",
+        "more": "More",
         "name": "Name",
         "noDevice": "None",
-        "notifications": "Notifications",
         "participantJoined": "Participant Joined",
         "participantKnocking": "Participant entered lobby",
         "participantLeft": "Participant Left",
@@ -1009,14 +982,13 @@
         "selectCamera": "Camera",
         "selectMic": "Microphone",
         "selfView": "Self view",
-        "shortcuts": "Shortcuts",
+        "sounds": "Sounds",
         "speakers": "Speakers",
         "startAudioMuted": "Everyone starts muted",
         "startReactionsMuted": "Mute reaction sounds for everyone",
         "startVideoMuted": "Everyone starts hidden",
         "talkWhileMuted": "Talk while muted",
-        "title": "Settings",
-        "video": "Video"
+        "title": "Settings"
     },
     "settingsView": {
         "advanced": "Advanced",
@@ -1108,7 +1080,6 @@
             "giphy": "Toggle GIPHY menu",
             "grantModerator": "Grant Moderator Rights",
             "hangup": "Leave the meeting",
-            "heading": "Toolbar",
             "help": "Help",
             "invite": "Invite people",
             "kick": "Kick participant",
@@ -1175,7 +1146,6 @@
         "download": "Download our apps",
         "e2ee": "End-to-End Encryption",
         "embedMeeting": "Embed meeting",
-        "enableNoiseSuppression": "Enable noise suppression",
         "endConference": "End meeting for all",
         "enterFullScreen": "View full screen",
         "enterTileView": "Enter tile view",
@@ -1263,7 +1233,6 @@
         "subtitlesOff": "Off",
         "tr": "TR"
     },
-    "unpinParticipant": "{{participantName}} - Unpin",
     "userMedia": {
         "androidGrantPermissions": "Select <b><i>Allow</i></b> when your browser asks for permissions.",
         "chromeGrantPermissions": "Select <b><i>Allow</i></b> when your browser asks for permissions.",
@@ -1302,11 +1271,9 @@
         "ldTooltip": "Viewing low definition video",
         "lowDefinition": "Low definition",
         "performanceSettings": "Performance settings",
-        "recording": "Recording in progress",
         "sd": "SD",
         "sdTooltip": "Viewing standard definition video",
-        "standardDefinition": "Standard definition",
-        "streaming": "Streaming in progress"
+        "standardDefinition": "Standard definition"
     },
     "videothumbnail": {
         "connectionInfo": "Connection Info",
@@ -1318,7 +1285,6 @@
         "grantModerator": "Grant Moderator Rights",
         "hideSelfView": "Hide self view",
         "kick": "Kick out",
-        "mirrorVideo": "Mirror my video",
         "moderator": "Moderator",
         "mute": "Participant is muted",
         "muted": "Muted",
@@ -1350,13 +1316,12 @@
         "none": "None",
         "pleaseWait": "Please wait...",
         "removeBackground": "Remove background",
-        "slightBlur": "Half Blur",
+        "slightBlur": "Slight Blur",
         "title": "Virtual backgrounds",
         "uploadedImage": "Uploaded image {{index}}",
         "webAssemblyWarning": "WebAssembly not supported",
         "webAssemblyWarningDescription": "WebAssembly disabled or not supported by this browser"
     },
-    "visitorsLabel": "Number of visitors: {{count}}",
     "volumeSlider": "Volume slider",
     "welcomepage": {
         "accessibilityLabel": {
@@ -1389,7 +1354,6 @@
             "microsoftLogo": "Microsoft logo",
             "policyLogo": "Policy logo"
         },
-        "meetingsAccessibilityLabel": "Meetings",
         "mobileDownLoadLinkAndroid": "Download mobile app for Android",
         "mobileDownLoadLinkFDroid": "Download mobile app for F-Droid",
         "mobileDownLoadLinkIos": "Download mobile app for iOS",
@@ -1409,10 +1373,5 @@
         "terms": "Terms",
         "title": "Secure, fully featured, and completely free video conferencing",
         "upcomingMeetings": "Your upcoming meetings"
-    },
-    "whiteboard": {
-        "accessibilityLabel": {
-            "heading": "Whiteboard"
-        }
     }
 }

modules/API/API.js

@@ -71,13 +71,8 @@ import {
 import { appendSuffix } from '../../react/features/display-name';
 import { isEnabled as isDropboxEnabled } from '../../react/features/dropbox';
 import { setMediaEncryptionKey, toggleE2EE } from '../../react/features/e2ee/actions';
-import {
-    addStageParticipant,
-    resizeFilmStrip,
-    setVolume,
-    togglePinStageParticipant
-} from '../../react/features/filmstrip/actions.web';
-import { getPinnedActiveParticipants, isStageFilmstripAvailable } from '../../react/features/filmstrip/functions.web';
+import { addStageParticipant, resizeFilmStrip, setVolume } from '../../react/features/filmstrip/actions.web';
+import { isStageFilmstripAvailable } from '../../react/features/filmstrip/functions.web';
 import { invite } from '../../react/features/invite';
 import {
     selectParticipantInLargeVideo
@@ -106,8 +101,6 @@ import { startAudioScreenShareFlow, startScreenShareFlow } from '../../react/fea
 import { isScreenAudioSupported } from '../../react/features/screen-share/functions';
 import { toggleScreenshotCaptureSummary } from '../../react/features/screenshot-capture';
 import { isScreenshotCaptureEnabled } from '../../react/features/screenshot-capture/functions';
-import SettingsDialog from '../../react/features/settings/components/web/SettingsDialog';
-import { SETTINGS_TABS } from '../../react/features/settings/constants';
 import { playSharedVideo, stopSharedVideo } from '../../react/features/shared-video/actions.any';
 import { extractYoutubeIdOrURL } from '../../react/features/shared-video/functions';
 import { setRequestingSubtitles, toggleRequestingSubtitles } from '../../react/features/subtitles/actions';
@@ -115,6 +108,7 @@ import { isAudioMuteButtonDisabled } from '../../react/features/toolbox/function
 import { setTileView, toggleTileView } from '../../react/features/video-layout';
 import { muteAllParticipants } from '../../react/features/video-menu/actions';
 import { setVideoQuality } from '../../react/features/video-quality';
+import VirtualBackgroundDialog from '../../react/features/virtual-background/components/VirtualBackgroundDialog';
 import { getJitsiMeetTransport } from '../transport';
 
 import { API_ID, ENDPOINT_TEXT_MESSAGE_NAME } from './constants';
@@ -247,22 +241,6 @@ function initCommands() {
             logger.debug('Pin participant command received');
 
             const state = APP.store.getState();
-
-            // if id not provided, unpin everybody.
-            if (!id) {
-                if (isStageFilmstripAvailable(state)) {
-                    const pinnedParticipants = getPinnedActiveParticipants(state);
-
-                    pinnedParticipants?.forEach(p => {
-                        APP.store.dispatch(togglePinStageParticipant(p.participantId));
-                    });
-                } else {
-                    APP.store.dispatch(pinParticipant());
-                }
-
-                return;
-            }
-
             const participant = videoType === VIDEO_TYPE.DESKTOP
                 ? getVirtualScreenshareParticipantByOwnerId(state, id) : getParticipantById(state, id);
 
@@ -276,7 +254,7 @@ function initCommands() {
 
             const participantId = participant.id;
 
-            if (isStageFilmstripAvailable(state)) {
+            if (isStageFilmstripAvailable(APP.store.getState())) {
                 APP.store.dispatch(addStageParticipant(participantId, true));
             } else {
                 APP.store.dispatch(pinParticipant(participantId));
@@ -799,8 +777,7 @@ function initCommands() {
             APP.store.dispatch(overwriteConfig(whitelistedConfig));
         },
         'toggle-virtual-background': () => {
-            APP.store.dispatch(toggleDialog(SettingsDialog, {
-                defaultTab: SETTINGS_TABS.VIRTUAL_BACKGROUND }));
+            APP.store.dispatch(toggleDialog(VirtualBackgroundDialog));
         },
         'end-conference': () => {
             APP.store.dispatch(endConference());
@@ -1231,22 +1208,6 @@ class API {
         });
     }
 
-    /**
-     * Notify the external app that a notification has been triggered.
-     *
-     * @param {string} title - The notification title.
-     * @param {string} description - The notification description.
-     *
-     * @returns {void}
-     */
-    notifyNotificationTriggered(title: string, description: string) {
-        this._sendEvent({
-            description,
-            name: 'notification-triggered',
-            title
-        });
-    }
-
     /**
      * Notify external application that the video quality setting has changed.
      *
@@ -1980,21 +1941,6 @@ class API {
         });
     }
 
-    /**
-     * Notify external application ( if API is enabled) that a participant menu button was clicked.
-     *
-     * @param {string} key - The key of the participant menu button.
-     * @param {string} participantId - The ID of the participant for with the participant menu button was clicked.
-     * @returns {void}
-     */
-    notifyParticipantMenuButtonClicked(key, participantId) {
-        this._sendEvent({
-            name: 'participant-menu-button-clicked',
-            key,
-            participantId
-        });
-    }
-
     /**
      * Disposes the allocated resources.
      *

modules/API/external/external_api.js

@@ -127,7 +127,6 @@ const events = {
     'mouse-enter': 'mouseEnter',
     'mouse-leave': 'mouseLeave',
     'mouse-move': 'mouseMove',
-    'notification-triggered': 'notificationTriggered',
     'outgoing-message': 'outgoingMessage',
     'participant-joined': 'participantJoined',
     'participant-kicked-out': 'participantKickedOut',
@@ -141,7 +140,6 @@ const events = {
     'raise-hand-updated': 'raiseHandUpdated',
     'recording-link-available': 'recordingLinkAvailable',
     'recording-status-changed': 'recordingStatusChanged',
-    'participant-menu-button-clicked': 'participantMenuButtonClick',
     'video-ready-to-close': 'readyToClose',
     'video-conference-joined': 'videoConferenceJoined',
     'video-conference-left': 'videoConferenceLeft',
@@ -393,7 +391,7 @@ export default class JitsiMeetExternalAPI extends EventEmitter {
         this._frame.name = frameName;
         this._frame.id = frameName;
         this._setSize(height, width);
-        this._frame.sandbox = 'allow-scripts allow-same-origin allow-popups allow-forms allow-downloads';
+        this._frame.sandbox = 'allow-scripts allow-same-origin allow-popups';
         this._frame.setAttribute('allowFullScreen', 'true');
         this._frame.style.border = 0;
 

modules/UI/UI.js

@@ -292,6 +292,17 @@ UI.showToolbar = timeout => APP.store.dispatch(showToolbox(timeout));
 // Used by torture.
 UI.dockToolbar = dock => APP.store.dispatch(dockToolbox(dock));
 
+/**
+ * Updates the displayed avatar for participant.
+ *
+ * @param {string} id - User id whose avatar should be updated.
+ * @param {string} avatarURL - The URL to avatar image to display.
+ * @returns {void}
+ */
+UI.refreshAvatarDisplay = function(id) {
+    VideoLayout.changeUserAvatar(id);
+};
+
 /**
  * Notify user that connection failed.
  * @param {string} stropheErrorMsg raw Strophe error message

modules/UI/etherpad/Etherpad.js

@@ -8,6 +8,39 @@ import Filmstrip from '../videolayout/Filmstrip';
 import LargeContainer from '../videolayout/LargeContainer';
 import VideoLayout from '../videolayout/VideoLayout';
 
+/**
+ *
+ */
+function bubbleIframeMouseMove(iframe) {
+    const existingOnMouseMove = iframe.contentWindow.onmousemove;
+
+    iframe.contentWindow.onmousemove = function(e) {
+        if (existingOnMouseMove) {
+            existingOnMouseMove(e);
+        }
+        const evt = document.createEvent('MouseEvents');
+        const boundingClientRect = iframe.getBoundingClientRect();
+
+        evt.initMouseEvent(
+            'mousemove',
+            true, // bubbles
+            false, // not cancelable
+            window,
+            e.detail,
+            e.screenX,
+            e.screenY,
+            e.clientX + boundingClientRect.left,
+            e.clientY + boundingClientRect.top,
+            e.ctrlKey,
+            e.altKey,
+            e.shiftKey,
+            e.metaKey,
+            e.button,
+            null // no related element
+        );
+        iframe.dispatchEvent(evt);
+    };
+}
 
 /**
  * Default Etherpad frame width.
@@ -35,7 +68,7 @@ class Etherpad extends LargeContainer {
 
         iframe.id = 'etherpadIFrame';
         iframe.src = url;
-        iframe.style.border = 0;
+        iframe.frameBorder = 0;
         iframe.scrolling = 'no';
         iframe.width = DEFAULT_WIDTH;
         iframe.height = DEFAULT_HEIGHT;
@@ -43,6 +76,26 @@ class Etherpad extends LargeContainer {
 
         this.container.appendChild(iframe);
 
+        iframe.onload = function() {
+            // eslint-disable-next-line no-self-assign
+            document.domain = document.domain;
+            bubbleIframeMouseMove(iframe);
+
+            setTimeout(() => {
+                const doc = iframe.contentDocument;
+
+                // the iframes inside of the etherpad are
+                // not yet loaded when the etherpad iframe is loaded
+                const outer = doc.getElementsByName('ace_outer')[0];
+
+                bubbleIframeMouseMove(outer);
+
+                const inner = doc.getElementsByName('ace_inner')[0];
+
+                bubbleIframeMouseMove(inner);
+            }, 2000);
+        };
+
         this.iframe = iframe;
     }
 

modules/UI/videolayout/VideoLayout.js

@@ -139,6 +139,12 @@ const VideoLayout = {
         }
     },
 
+    changeUserAvatar(id, avatarUrl) {
+        if (this.isCurrentlyOnLarge(id)) {
+            largeVideo.updateAvatar(avatarUrl);
+        }
+    },
+
     isLargeVideoVisible() {
         return this.isLargeContainerTypeVisible(VIDEO_CONTAINER_TYPE);
     },

modules/keyboardshortcut/keyboardshortcut.js

@@ -8,9 +8,10 @@ import {
     createShortcutEvent,
     sendAnalytics
 } from '../../react/features/analytics';
+import { toggleDialog } from '../../react/features/base/dialog';
 import { clickOnVideo } from '../../react/features/filmstrip/actions';
-import { openSettingsDialog } from '../../react/features/settings/actions';
-import { SETTINGS_TABS } from '../../react/features/settings/constants';
+import { KeyboardShortcutsDialog }
+    from '../../react/features/keyboard-shortcuts';
 
 const logger = Logger.getLogger(__filename);
 
@@ -119,17 +120,15 @@ const KeyboardShortcut = {
         return jitsiLocalStorage.getItem(_enableShortcutsKey) === 'false' ? false : true;
     },
 
-    getShortcutsDescriptions() {
-        return _shortcutsHelp;
-    },
-
     /**
-     * Opens the {@SettingsDialog} dialog on the  Shortcuts page.
+     * Opens the {@KeyboardShortcutsDialog} dialog.
      *
      * @returns {void}
      */
     openDialog() {
-        APP.store.dispatch(openSettingsDialog(SETTINGS_TABS.SHORTCUTS, false));
+        APP.store.dispatch(toggleDialog(KeyboardShortcutsDialog, {
+            shortcutDescriptions: _shortcutsHelp
+        }));
     },
 
     /**

package.json

@@ -20,13 +20,15 @@
     "@atlaskit/icon": "21.2.0",
     "@atlaskit/inline-dialog": "13.0.9",
     "@atlaskit/inline-message": "11.0.8",
+    "@atlaskit/modal-dialog": "11.2.4",
     "@atlaskit/multi-select": "15.0.5",
     "@atlaskit/spinner": "15.0.6",
+    "@atlaskit/tabs": "12.1.2",
     "@atlaskit/theme": "11.0.2",
     "@atlaskit/tooltip": "17.1.2",
     "@emotion/react": "11.10.0",
     "@emotion/styled": "11.10.0",
-    "@giphy/js-fetch-api": "4.7.1",
+    "@giphy/js-fetch-api": "4.1.2",
     "@giphy/react-components": "5.6.0",
     "@giphy/react-native-sdk": "1.7.0",
     "@hapi/bourne": "2.0.0",
@@ -44,6 +46,7 @@
     "@react-native-community/netinfo": "7.1.7",
     "@react-native-community/slider": "4.1.12",
     "@react-native-google-signin/google-signin": "7.0.4",
+    "@react-native-masked-view/masked-view": "0.2.6",
     "@react-navigation/bottom-tabs": "6.5.3",
     "@react-navigation/elements": "1.3.13",
     "@react-navigation/material-top-tabs": "6.5.2",
@@ -55,7 +58,6 @@
     "@types/amplitude-js": "8.16.2",
     "@types/audioworklet": "0.0.29",
     "@types/w3c-image-capture": "1.0.6",
-    "@types/w3c-web-hid": "1.0.3",
     "@vladmandic/human": "2.6.5",
     "@vladmandic/human-models": "2.5.9",
     "@xmldom/xmldom": "0.7.9",
@@ -77,7 +79,7 @@
     "js-md5": "0.6.1",
     "js-sha512": "0.8.0",
     "jwt-decode": "2.2.0",
-    "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1589.0.0+d43c349d/lib-jitsi-meet.tgz",
+    "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1578.0.0+5855ca72/lib-jitsi-meet.tgz",
     "lodash": "4.17.21",
     "moment": "2.29.4",
     "moment-duration-format": "2.2.2",
@@ -95,10 +97,11 @@
     "react-native-background-timer": "2.4.1",
     "react-native-calendar-events": "2.2.0",
     "react-native-callstats": "3.73.7",
+    "react-native-collapsible": "1.6.0",
     "react-native-default-preference": "1.4.4",
     "react-native-device-info": "8.4.8",
     "react-native-dialog": "https://github.com/jitsi/react-native-dialog/releases/download/v9.2.2-jitsi.1/react-native-dialog-9.2.2.tgz",
-    "react-native-gesture-handler": "2.9.0",
+    "react-native-gesture-handler": "2.8.0",
     "react-native-get-random-values": "1.7.2",
     "react-native-immersive": "2.0.0",
     "react-native-keep-awake": "4.0.0",
@@ -116,7 +119,7 @@
     "react-native-url-polyfill": "1.3.0",
     "react-native-video": "https://git@github.com/react-native-video/react-native-video#7c48ae7c8544b2b537fb60194e9620b9fcceae52",
     "react-native-watch-connectivity": "1.0.11",
-    "react-native-webrtc": "106.0.6",
+    "react-native-webrtc": "106.0.4",
     "react-native-webview": "11.15.1",
     "react-native-youtube-iframe": "2.2.1",
     "react-redux": "7.1.0",
@@ -144,11 +147,11 @@
     "@babel/preset-env": "7.16.0",
     "@babel/preset-flow": "7.16.0",
     "@babel/preset-react": "7.16.0",
+    "@babel/runtime": "7.16.0",
     "@jitsi/eslint-config": "4.1.5",
     "@types/js-md5": "0.4.3",
     "@types/lodash": "4.14.182",
     "@types/react": "17.0.14",
-    "@types/react-dom": "17.0.14",
     "@types/react-linkify": "1.0.1",
     "@types/react-native": "0.68.9",
     "@types/react-redux": "7.1.24",
@@ -163,18 +166,20 @@
     "circular-dependency-plugin": "5.2.0",
     "clean-css-cli": "4.3.0",
     "css-loader": "3.6.0",
-    "eslint": "8.35.0",
+    "eslint": "8.25.0",
     "eslint-plugin-flowtype": "8.0.3",
     "eslint-plugin-import": "2.25.2",
     "eslint-plugin-jsdoc": "37.0.3",
     "eslint-plugin-react": "7.26.1",
     "eslint-plugin-react-native": "3.11.0",
     "eslint-plugin-typescript-sort-keys": "2.1.0",
+    "imports-loader": "0.7.1",
     "jetifier": "1.6.4",
     "metro-react-native-babel-preset": "0.67.0",
     "patch-package": "6.4.7",
     "process": "0.11.10",
     "sass": "1.26.8",
+    "string-replace-loader": "3.0.3",
     "style-loader": "3.3.1",
     "traverse": "0.6.6",
     "ts-loader": "9.4.1",

react/features/always-on-top/AlwaysOnTop.js

@@ -199,7 +199,7 @@ export default class AlwaysOnTop extends Component<*, State> {
                         color = { getAvatarColor(displayName, customAvatarBackgrounds) }
                         id = 'avatar'
                         initials = { getInitials(displayName) }
-                        url = { avatarURL } />)
+                        url = { displayName ? null : avatarURL } />)
                 </div>
                 <div
                     className = 'displayname'

react/features/app/actions.native.ts

@@ -30,10 +30,12 @@ import {
 // @ts-ignore
 import { screen } from '../mobile/navigation/routes';
 import { clearNotifications } from '../notifications/actions';
+// @ts-ignore
+import { setFatalError } from '../overlay';
 
 import { addTrackStateToURL, getDefaultURL } from './functions.native';
 import logger from './logger';
-import { IReloadNowOptions, IStore } from './types';
+import { IStore } from './types';
 
 export * from './actions.any';
 
@@ -44,10 +46,9 @@ export * from './actions.any';
  * @param {string|undefined} uri - The URI to which to navigate. It may be a
  * full URL with an HTTP(S) scheme, a full or partial URI with the app-specific
  * scheme, or a mere room name.
- * @param {Object} [options] - Options.
  * @returns {Function}
  */
-export function appNavigate(uri?: string, options: IReloadNowOptions = {}) {
+export function appNavigate(uri?: string) {
     logger.info(`appNavigate to ${uri}`);
 
     return async (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
@@ -143,10 +144,7 @@ export function appNavigate(uri?: string, options: IReloadNowOptions = {}) {
             dispatch(createDesiredLocalTracks());
             dispatch(clearNotifications());
 
-            // @ts-ignore
-            const { hidePrejoin } = options;
-
-            if (!hidePrejoin && isPrejoinPageEnabled(getState())) {
+            if (isPrejoinPageEnabled(getState())) {
                 navigateRoot(screen.preJoin);
             } else {
                 dispatch(connect());
@@ -179,6 +177,7 @@ export function maybeRedirectToWelcomePage(options: any) { // eslint-disable-lin
  */
 export function reloadNow() {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        dispatch(setFatalError(undefined));
 
         const state = getState();
         const { locationURL } = state['features/base/connection'];
@@ -189,8 +188,6 @@ export function reloadNow() {
 
         logger.info(`Reloading the conference using URL: ${locationURL}`);
 
-        dispatch(appNavigate(toURLString(newURL), {
-            hidePrejoin: true
-        }));
+        dispatch(appNavigate(toURLString(newURL)));
     };
 }

react/features/app/actions.web.ts

@@ -20,6 +20,7 @@ import {
 import { isVpaasMeeting } from '../jaas/functions';
 import { clearNotifications, showNotification } from '../notifications/actions';
 import { NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
+import { setFatalError } from '../overlay/actions';
 import { isWelcomePageEnabled } from '../welcome/functions';
 
 import {
@@ -221,6 +222,7 @@ export function maybeRedirectToWelcomePage(options: { feedbackSubmitted?: boolea
  */
 export function reloadNow() {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        dispatch(setFatalError(undefined));
 
         const state = getState();
         const { locationURL } = state['features/base/connection'];

react/features/app/components/AbstractApp.js

@@ -1,7 +1,10 @@
-import React from 'react';
+// @flow
+
+import React, { Fragment } from 'react';
 
 import { BaseApp } from '../../base/app';
 import { toURLString } from '../../base/util';
+import { OverlayContainer } from '../../overlay';
 import { appNavigate } from '../actions';
 import { getDefaultURL } from '../functions';
 
@@ -70,7 +73,23 @@ export class AbstractApp extends BaseApp<Props, *> {
         }
     }
 
-    _createMainElement: (React.ReactElement, Object) => ?React.ReactElement;
+    /**
+     * Creates an extra {@link ReactElement}s to be added (unconditionally)
+     * alongside the main element.
+     *
+     * @abstract
+     * @protected
+     * @returns {ReactElement}
+     */
+    _createExtraElement() {
+        return (
+            <Fragment>
+                <OverlayContainer />
+            </Fragment>
+        );
+    }
+
+    _createMainElement: (React$Element<*>, Object) => ?React$Element<*>;
 
     /**
      * Gets the default URL to be opened when this {@code App} mounts.

react/features/app/components/App.web.js

@@ -1,11 +1,12 @@
+// @flow
+
 import { AtlasKitThemeProvider } from '@atlaskit/theme';
-import React, { Fragment } from 'react';
+import React from 'react';
 
 import GlobalStyles from '../../base/ui/components/GlobalStyles.web';
 import JitsiThemeProvider from '../../base/ui/components/JitsiThemeProvider.web';
 import DialogContainer from '../../base/ui/components/web/DialogContainer';
 import { ChromeExtensionBanner } from '../../chrome-extension-banner';
-import OverlayContainer from '../../overlay/components/web/OverlayContainer';
 
 import { AbstractApp } from './AbstractApp';
 
@@ -13,30 +14,12 @@ import { AbstractApp } from './AbstractApp';
 import '../middlewares';
 import '../reducers';
 
-
 /**
  * Root app {@code Component} on Web/React.
  *
  * @augments AbstractApp
  */
 export class App extends AbstractApp {
-
-    /**
-     * Creates an extra {@link ReactElement}s to be added (unconditionally)
-     * alongside the main element.
-     *
-     * @abstract
-     * @protected
-     * @returns {ReactElement}
-     */
-    _createExtraElement() {
-        return (
-            <Fragment>
-                <OverlayContainer />
-            </Fragment>
-        );
-    }
-
     /**
      * Overrides the parent method to inject {@link AtlasKitThemeProvider} as
      * the top most component.

react/features/app/middlewares.any.ts

@@ -48,6 +48,5 @@ import '../transcribing/middleware';
 import '../video-layout/middleware';
 import '../video-quality/middleware';
 import '../videosipgw/middleware';
-import '../visitors/middleware';
 
 import './middleware';

react/features/app/middlewares.web.ts

@@ -5,6 +5,7 @@ import '../base/media/middleware';
 import '../dynamic-branding/middleware';
 import '../e2ee/middleware';
 import '../external-api/middleware';
+import '../keyboard-shortcuts/middleware';
 import '../no-audio-signal/middleware';
 import '../notifications/middleware';
 import '../noise-detection/middleware';
@@ -14,12 +15,12 @@ import '../prejoin/middleware';
 import '../remote-control/middleware';
 import '../screen-share/middleware';
 import '../shared-video/middleware';
-import '../web-hid/middleware';
 import '../settings/middleware';
 import '../talk-while-muted/middleware';
 import '../toolbox/middleware';
 import '../face-landmarks/middleware';
 import '../gifs/middleware';
 import '../whiteboard/middleware';
+import '../base/dialog/middleware';
 
 import './middlewares.any';

react/features/app/reducers.any.ts

@@ -56,4 +56,3 @@ import '../transcribing/reducer';
 import '../video-layout/reducer';
 import '../video-quality/reducer';
 import '../videosipgw/reducer';
-import '../visitors/reducer';

react/features/app/reducers.web.ts

@@ -16,6 +16,5 @@ import '../screenshot-capture/reducer';
 import '../talk-while-muted/reducer';
 import '../virtual-background/reducer';
 import '../whiteboard/reducer';
-import '../web-hid/reducer';
 
 import './reducers.any';

react/features/app/types.ts

@@ -76,8 +76,6 @@ import { IVideoLayoutState } from '../video-layout/reducer';
 import { IVideoQualityPersistedState, IVideoQualityState } from '../video-quality/reducer';
 import { IVideoSipGW } from '../videosipgw/reducer';
 import { IVirtualBackground } from '../virtual-background/reducer';
-import { IVisitorsState } from '../visitors/reducer';
-import { IWebHid } from '../web-hid/reducer';
 import { IWhiteboardState } from '../whiteboard/reducer';
 
 export interface IStore {
@@ -92,7 +90,6 @@ export interface IReduxState {
     'features/background': IBackgroundState;
     'features/base/app': IAppState;
     'features/base/audio-only': IAudioOnlyState;
-    'features/base/color-scheme': any;
     'features/base/conference': IConferenceState;
     'features/base/config': IConfigState;
     'features/base/connection': IConnectionState;
@@ -165,11 +162,5 @@ export interface IReduxState {
     'features/video-quality-persistent-storage': IVideoQualityPersistedState;
     'features/videosipgw': IVideoSipGW;
     'features/virtual-background': IVirtualBackground;
-    'features/visitors': IVisitorsState;
-    'features/web-hid': IWebHid;
     'features/whiteboard': IWhiteboardState;
 }
-
-export interface IReloadNowOptions {
-    hidePrejoin?: boolean;
-}

react/features/authentication/actions.any.ts

@@ -98,7 +98,7 @@ function _upgradeRoleFinished(
             name: authenticationError || connectionError,
             ...other
         };
-        progress = 0;
+        progress = authenticationError ? 0.5 : 0;
     }
 
     return {

react/features/authentication/components/web/LoginDialog.tsx

@@ -207,7 +207,7 @@ class LoginDialog extends Component<IProps, IState> {
         let messageKey;
 
         if (progress && progress < 1) {
-            messageKey = 'connection.FETCH_SESSION_ID';
+            messageKey = t('connection.FETCH_SESSION_ID');
         } else if (error) {
             const { name } = error;
 
@@ -218,14 +218,14 @@ class LoginDialog extends Component<IProps, IState> {
                     && credentials.jid === toJid(username, configHosts ?? { authdomain: '',
                         domain: '' })
                     && credentials.password === password) {
-                    messageKey = 'dialog.incorrectPassword';
+                    messageKey = t('dialog.incorrectPassword');
                 }
             } else if (name) {
-                messageKey = 'dialog.connectErrorWithMsg';
+                messageKey = t('dialog.connectErrorWithMsg');
                 messageOptions.msg = `${name} ${error.message}`;
             }
         } else if (connecting) {
-            messageKey = 'connection.CONNECTING';
+            messageKey = t('connection.CONNECTING');
         }
 
         if (messageKey) {

react/features/authentication/middleware.web.ts

@@ -24,8 +24,9 @@ import {
     openWaitForOwnerDialog,
     stopWaitForOwner
 } from './actions.web';
-import LoginDialog from './components/web/LoginDialog';
-import WaitForOwnerDialog from './components/web/WaitForOwnerDialog';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
+import { LoginDialog, WaitForOwnerDialog } from './components';
 
 /**
  * Middleware that captures connection or conference failed errors and controls

react/features/base/color-scheme/ColorSchemeRegistry.js

@@ -1,5 +1,7 @@
-import { toState } from '../redux/functions';
-import { StyleType } from '../styles/functions.any';
+// @flow
+
+import { toState } from '../redux';
+import { StyleType } from '../styles';
 
 import defaultScheme from './defaultScheme';
 
@@ -88,7 +90,7 @@ class ColorSchemeRegistry {
             stateful: Object | Function,
             componentName: string,
             style: StyleType): StyleType {
-        let schemedStyle: any;
+        let schemedStyle;
 
         if (Array.isArray(style)) {
             // The style is an array of styles, we apply the same transformation
@@ -114,7 +116,7 @@ class ColorSchemeRegistry {
                     // The value is another style object, we apply the same
                     // transformation recursively.
                     schemedStyle[styleName]
-                        = this._applyColorScheme( // @ts-ignore
+                        = this._applyColorScheme(
                             stateful, componentName, styleValue);
                 } else if (typeof styleValue === 'function') {
                     // The value is a function, which indicates that it's a
@@ -147,14 +149,11 @@ class ColorSchemeRegistry {
             stateful: Object | Function,
             componentName: string,
             colorDefinition: string): string {
-        // @ts-ignore
         const colorScheme = toState(stateful)['features/base/color-scheme'] || {};
 
         return {
             ...defaultScheme._defaultTheme,
             ...colorScheme._defaultTheme,
-
-            // @ts-ignore
             ...defaultScheme[componentName],
             ...colorScheme[componentName]
         }[colorDefinition];

react/features/base/color-scheme/defaultScheme.js

@@ -1,5 +1,4 @@
-import { ColorPalette } from '../styles/components/styles/ColorPalette';
-import { getRGBAFormat } from '../styles/functions.any';
+import { ColorPalette, getRGBAFormat } from '../styles';
 
 /**
  * The default color scheme of the application.

react/features/base/color-scheme/functions.js

@@ -1,3 +1,5 @@
+// @flow
+
 /**
  * A special function to be used in the {@code createColorSchemedStyle} call,
  * that denotes that the color is a dynamic color.

react/features/base/components/participants-pane-list/ListItem.tsx

@@ -88,7 +88,7 @@ const useStyles = makeStyles()(theme => {
             boxShadow: 'inset 0px -1px 0px rgba(255, 255, 255, 0.15)',
             minHeight: '40px',
 
-            '&:hover, &:focus-within': {
+            '&:hover': {
                 backgroundColor: theme.palette.ui02,
 
                 '& .indicators': {
@@ -97,8 +97,6 @@ const useStyles = makeStyles()(theme => {
 
                 '& .actions': {
                     display: 'flex',
-                    position: 'relative',
-                    top: 'auto',
                     boxShadow: `-15px 0px 10px -5px ${theme.palette.ui02}`,
                     backgroundColor: theme.palette.ui02
                 }
@@ -156,8 +154,7 @@ const useStyles = makeStyles()(theme => {
         },
 
         actionsContainer: {
-            position: 'absolute',
-            top: '-1000px',
+            display: 'none',
             boxShadow: `-15px 0px 10px -5px ${theme.palette.ui02}`,
             backgroundColor: theme.palette.ui02
         },

react/features/base/conference/reducer.ts

@@ -85,7 +85,6 @@ export interface IJitsiConference {
     sendFaceLandmarks: (faceLandmarks: FaceLandmarks) => void;
     sendFeedback: Function;
     sendLobbyMessage: Function;
-    sendMessage: Function;
     sessionId: string;
     setDesktopSharingFrameRate: Function;
     setDisplayName: Function;

react/features/base/config/actions.ts

@@ -98,7 +98,7 @@ export function overwriteConfig(config: Object) {
  * base/config.
  * @returns {Function}
  */
-export function setConfig(config: IConfig = {}) {
+export function setConfig(config: Object = {}) {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const { locationURL } = getState()['features/base/connection'];
 
@@ -119,26 +119,6 @@ export function setConfig(config: IConfig = {}) {
                 window.interfaceConfig,
                 locationURL);
 
-        let { bosh } = config;
-
-        if (bosh) {
-            // Normalize the BOSH URL.
-            if (bosh.startsWith('//')) {
-                // By default our config.js doesn't include the protocol.
-                bosh = `${locationURL?.protocol}${bosh}`;
-            } else if (bosh.startsWith('/')) {
-                // Handle relative URLs, which won't work on mobile.
-                const {
-                    protocol,
-                    host,
-                    contextRoot
-                } = parseURIString(locationURL?.href);
-
-                bosh = `${protocol}//${host}${contextRoot || '/'}${bosh.substr(1)}`;
-            }
-            config.bosh = bosh;
-        }
-
         dispatch({
             type: SET_CONFIG,
             config

react/features/base/config/configType.ts

@@ -206,8 +206,6 @@ export interface IConfig {
         };
     };
     corsAvatarURLs?: Array<string>;
-    customParticipantMenuButtons?: Array<{ icon: string; id: string; text: string; }>;
-    customToolbarButtons?: Array<{ icon: string; id: string; text: string; }>;
     deeplinking?: IDeeplinkingConfig;
     defaultLanguage?: string;
     defaultLocalDisplayName?: string;
@@ -345,7 +343,6 @@ export interface IConfig {
     giphy?: {
         displayMode?: 'all' | 'tile' | 'chat';
         enabled?: boolean;
-        proxyUrl?: string;
         rating?: 'g' | 'pg' | 'pg-13' | 'r';
         sdkKey?: string;
         tileTime?: number;
@@ -388,11 +385,6 @@ export interface IConfig {
     lastNLimits?: {
         [key: number]: number;
     };
-    legalUrls?: {
-        helpCentre: string;
-        privacy: string;
-        terms: string;
-    };
     liveStreaming?: {
         dataPrivacyLink?: string;
         enabled?: boolean;
@@ -401,10 +393,6 @@ export interface IConfig {
         validatorRegExpString?: string;
     };
     liveStreamingEnabled?: boolean;
-    lobby?: {
-        autoKnock?: boolean;
-        enableChat?: boolean;
-    };
     localRecording?: {
         disable?: boolean;
         disableSelfRecording?: boolean;
@@ -475,10 +463,6 @@ export interface IConfig {
         enabled?: boolean;
         mode?: 'always' | 'recording';
     };
-    securityUi?: {
-        disableLobbyPassword?: boolean;
-        hideLobbyButton?: boolean;
-    };
     serviceUrl?: string;
     sipInviteUrl?: string;
     speakerStats?: {

react/features/base/config/configWhitelist.ts

@@ -185,7 +185,6 @@ export default [
     'inviteAppName',
     'liveStreaming',
     'liveStreamingEnabled',
-    'lobby',
     'localRecording',
     'localSubject',
     'logging',
@@ -210,7 +209,6 @@ export default [
     'resolution',
     'salesforceUrl',
     'screenshotCapture',
-    'securityUi',
     'speakerStats',
     'startAudioMuted',
     'startAudioOnly',

react/features/base/config/constants.ts

@@ -61,11 +61,6 @@ export const PREMEETING_BUTTONS = [ 'microphone', 'camera', 'select-background',
   */
 export const THIRD_PARTY_PREJOIN_BUTTONS = [ 'microphone', 'camera', 'select-background' ];
 
-/**
- * The toolbar buttons to show when in visitors mode.
- */
-export const VISITORS_MODE_BUTTONS = [ 'hangup', 'tileview' ];
-
 /**
  * The set of feature flags.
  *
@@ -75,18 +70,3 @@ export const VISITORS_MODE_BUTTONS = [ 'hangup', 'tileview' ];
 export const FEATURE_FLAGS = {
     SSRC_REWRITING: 'ssrcRewritingEnabled'
 };
-
-/**
- * The URL at which the terms (of service/use) are available to the user.
- */
-export const DEFAULT_TERMS_URL = 'https://jitsi.org/meet/terms';
-
-/**
- * The URL at which the privacy policy is available to the user.
- */
-export const DEFAULT_PRIVACY_URL = 'https://jitsi.org/meet/privacy';
-
-/**
- * The URL at which the help centre is available to the user.
- */
-export const DEFAULT_HELP_CENTRE_URL = 'https://web-cdn.jitsi.net/faq/meet-faq.html';

react/features/base/config/functions.any.ts

@@ -11,13 +11,7 @@ import { parseURLParams } from '../util/parseURLParams';
 
 import { IConfig } from './configType';
 import CONFIG_WHITELIST from './configWhitelist';
-import {
-    DEFAULT_HELP_CENTRE_URL,
-    DEFAULT_PRIVACY_URL,
-    DEFAULT_TERMS_URL,
-    FEATURE_FLAGS,
-    _CONFIG_STORE_PREFIX
-} from './constants';
+import { FEATURE_FLAGS, _CONFIG_STORE_PREFIX } from './constants';
 import INTERFACE_CONFIG_WHITELIST from './interfaceConfigWhitelist';
 import logger from './logger';
 
@@ -322,34 +316,3 @@ export function getDialOutStatusUrl(state: IReduxState) {
 export function getDialOutUrl(state: IReduxState) {
     return state['features/base/config'].guestDialOutUrl;
 }
-
-/**
- * Selector to return the security UI config.
- *
- * @param {IReduxState} state - State object.
- * @returns {Object}
- */
-export function getSecurityUiConfig(state: IReduxState) {
-    return state['features/base/config']?.securityUi || {};
-}
-
-/**
- * Returns the terms, privacy and help centre URL's.
- *
- * @param {IReduxState} state - The state of the application.
- * @returns {{
- *  privacy: string,
- *  helpCentre: string,
- *  terms: string
- * }}
- */
-export function getLegalUrls(state: IReduxState) {
-    const helpCentreURL = state['features/base/config']?.helpCentreURL;
-    const configLegalUrls = state['features/base/config']?.legalUrls;
-
-    return {
-        privacy: configLegalUrls?.privacy || DEFAULT_PRIVACY_URL,
-        helpCentre: helpCentreURL || configLegalUrls?.helpCentre || DEFAULT_HELP_CENTRE_URL,
-        terms: configLegalUrls?.terms || DEFAULT_TERMS_URL
-    };
-}

react/features/base/config/functions.web.ts

@@ -32,16 +32,9 @@ export function getReplaceParticipant(state: IReduxState): string | undefined {
  * @returns {Array<string>} - The list of enabled toolbar buttons.
  */
 export function getToolbarButtons(state: IReduxState): Array<string> {
-    const { toolbarButtons, customToolbarButtons } = state['features/base/config'];
-    const customButtons = customToolbarButtons?.map(({ id }) => id);
+    const { toolbarButtons } = state['features/base/config'];
 
-    const buttons = Array.isArray(toolbarButtons) ? toolbarButtons : TOOLBAR_BUTTONS;
-
-    if (customButtons) {
-        buttons.push(...customButtons);
-    }
-
-    return buttons;
+    return Array.isArray(toolbarButtons) ? toolbarButtons : TOOLBAR_BUTTONS;
 }
 
 /**
@@ -108,30 +101,3 @@ export function _setDeeplinkingDefaults(deeplinking: IDeeplinkingConfig) {
         android.dynamicLink.isi = android.dynamicLink.isi || '1165103905';
     }
 }
-
-/**
- * Returns the list of buttons that have that notify the api when clicked.
- *
- * @param {Object} state - The redux state.
- * @returns {Array} - The list of buttons.
- */
-export function getButtonsWithNotifyClick(state: IReduxState): Array<{ key: string; preventExecution: boolean; }> {
-    const { buttonsWithNotifyClick, customToolbarButtons } = state['features/base/config'];
-    const customButtons = customToolbarButtons?.map(({ id }) => {
-        return {
-            key: id,
-            preventExecution: false
-        };
-    });
-
-    const buttons = Array.isArray(buttonsWithNotifyClick)
-        ? buttonsWithNotifyClick as Array<{ key: string; preventExecution: boolean; }>
-        : [];
-
-    if (customButtons) {
-        buttons.push(...customButtons);
-    }
-
-    return buttons;
-}
-

react/features/base/config/middleware.ts

@@ -52,7 +52,9 @@ function _setConfig({ dispatch, getState }: IStore, next: Function, action: AnyA
     const settings = state['features/base/settings'];
     const config: IConfig = {};
 
-    if (typeof settings.disableP2P !== 'undefined') {
+    // FIXME: P2P is currently temporality disabled on mobile.
+    // eslint-disable-next-line no-constant-condition
+    if (false && typeof settings.disableP2P !== 'undefined') {
         config.p2p = { enabled: !settings.disableP2P };
     }
 

react/features/base/config/reducer.ts

@@ -57,8 +57,10 @@ const INITIAL_RN_STATE: IConfig = {
     // than requiring this override here...
 
     p2p: {
+        // Temporarily disable P2P on mobile while we sort out some (codec?) issues.
+        enabled: false,
         disabledCodec: 'vp9',
-        preferredCodec: 'vp8'
+        preferredCodec: 'h264'
     },
 
     videoQuality: {
@@ -533,30 +535,6 @@ function _translateLegacyConfig(oldValue: IConfig) {
         };
     }
 
-    if (oldValue.autoKnockLobby !== undefined
-        && newValue.lobby?.autoKnock === undefined) {
-        newValue.lobby = {
-            ...newValue.lobby || {},
-            autoKnock: oldValue.autoKnockLobby
-        };
-    }
-
-    if (oldValue.enableLobbyChat !== undefined
-        && newValue.lobby?.enableChat === undefined) {
-        newValue.lobby = {
-            ...newValue.lobby || {},
-            enableChat: oldValue.enableLobbyChat
-        };
-    }
-
-    if (oldValue.hideLobbyButton !== undefined
-        && newValue.securityUi?.hideLobbyButton === undefined) {
-        newValue.securityUi = {
-            ...newValue.securityUi || {},
-            hideLobbyButton: oldValue.hideLobbyButton
-        };
-    }
-
     _setDeeplinkingDefaults(newValue.deeplinking as IDeeplinkingConfig);
 
     return newValue;

react/features/base/connection/actions.any.ts

@@ -3,7 +3,8 @@ import _ from 'lodash';
 import { IReduxState } from '../../app/types';
 import {
     appendURLParam,
-    getBackendSafeRoomName
+    getBackendSafeRoomName,
+    parseURIString
 } from '../util/uri';
 
 import {
@@ -144,8 +145,7 @@ export function constructOptions(state: IReduxState) {
     // redux store.
     const options = _.cloneDeep(state['features/base/config']);
 
-    const { bosh } = options;
-    let { websocket } = options;
+    let { bosh, websocket } = options;
 
     // TESTING: Only enable WebSocket for some percentage of users.
     if (websocket && navigator.product === 'ReactNative') {
@@ -154,6 +154,25 @@ export function constructOptions(state: IReduxState) {
         }
     }
 
+    // Normalize the BOSH URL.
+    if (bosh && !websocket) {
+        const { locationURL } = state['features/base/connection'];
+
+        if (bosh.startsWith('//')) {
+            // By default our config.js doesn't include the protocol.
+            bosh = `${locationURL?.protocol}${bosh}`;
+        } else if (bosh.startsWith('/')) {
+            // Handle relative URLs, which won't work on mobile.
+            const {
+                protocol,
+                host,
+                contextRoot
+            } = parseURIString(locationURL?.href);
+
+            bosh = `${protocol}//${host}${contextRoot || '/'}${bosh.substr(1)}`;
+        }
+    }
+
     // WebSocket is preferred over BOSH.
     const serviceUrl = websocket || bosh;
 

react/features/base/dialog/components/DialogContent.js

@@ -0,0 +1,43 @@
+// @flow
+
+import React, { Component } from 'react';
+
+import { Container, Text } from '../../react';
+import { type StyleType } from '../../styles';
+
+import styles from './styles';
+
+type Props = {
+
+    /**
+     * Children of the component.
+     */
+    children: string | React$Node,
+
+    style: ?StyleType
+};
+
+/**
+ * Generic dialog content container to provide the same styling for all custom
+ * dialogs.
+ */
+export default class DialogContent extends Component<Props> {
+    /**
+     * Implements {@code Component#render}.
+     *
+     * @inheritdoc
+     */
+    render() {
+        const { children, style } = this.props;
+
+        const childrenComponent = typeof children === 'string'
+            ? <Text style = { style }>{ children }</Text>
+            : children;
+
+        return (
+            <Container style = { styles.dialogContainer }>
+                { childrenComponent }
+            </Container>
+        );
+    }
+}

react/features/base/dialog/components/index.js

@@ -1,3 +1,5 @@
 // @flow
 
 export * from './_';
+
+export { default as DialogContent } from './DialogContent';

react/features/base/dialog/components/native/ConfirmDialog.js

@@ -48,7 +48,7 @@ type Props = {
     /**
      * Dialog title.
      */
-    title?: string
+    title?: string,
 };
 
 /**

react/features/base/dialog/components/native/PageReloadDialog.tsx

@@ -1,231 +0,0 @@
-/* eslint-disable lines-around-comment */
-
-// @ts-ignore
-import { randomInt } from '@jitsi/js-utils/random';
-import React, { Component } from 'react';
-import { WithTranslation } from 'react-i18next';
-import type { Dispatch } from 'redux';
-
-import { appNavigate, reloadNow } from '../../../../app/actions.native';
-import { IReduxState } from '../../../../app/types';
-import { translate } from '../../../i18n/functions';
-import { isFatalJitsiConnectionError } from '../../../lib-jitsi-meet/functions.native';
-import { connect } from '../../../redux/functions';
-import { hideDialog } from '../../actions';
-// @ts-ignore
-import logger from '../../logger';
-
-// @ts-ignore
-import ConfirmDialog from './ConfirmDialog';
-
-
-/**
- * The type of the React {@code Component} props of
- * {@link PageReloadDialog}.
- */
-interface IPageReloadDialogProps extends WithTranslation {
-    dispatch: Dispatch<any>;
-    isNetworkFailure: boolean;
-    reason: string;
-}
-
-/**
- * The type of the React {@code Component} state of
- * {@link PageReloadDialog}.
- */
-interface IPageReloadDialogState {
-    timeLeft: number;
-}
-
-/**
- * Implements a React Component that is shown before the
- * conference is reloaded.
- * Shows a warning message and counts down towards the re-load.
- */
-class PageReloadDialog extends Component<IPageReloadDialogProps, IPageReloadDialogState> {
-
-    // @ts-ignore
-    _interval: IntervalID;
-    _timeoutSeconds: number;
-
-    /**
-     * Initializes a new PageReloadOverlay instance.
-     *
-     * @param {Object} props - The read-only properties with which the new
-     * instance is to be initialized.
-     * @public
-     */
-    constructor(props: IPageReloadDialogProps) {
-        super(props);
-
-        this._timeoutSeconds = 10 + randomInt(0, 20);
-
-        this.state = {
-            timeLeft: this._timeoutSeconds
-        };
-
-        this._onCancel = this._onCancel.bind(this);
-        this._onReloadNow = this._onReloadNow.bind(this);
-        this._onReconnecting = this._onReconnecting.bind(this);
-    }
-
-    /**
-     * React Component method that executes once component is mounted.
-     *
-     * @inheritdoc
-     * @returns {void}
-     */
-    componentDidMount() {
-        const { timeLeft } = this.state;
-
-        logger.info(
-            `The conference will be reloaded after ${timeLeft} seconds.`
-        );
-
-        this._interval = setInterval(() =>
-            this._onReconnecting(), 1000);
-    }
-
-    /**
-     * Clears the timer interval.
-     *
-     * @inheritdoc
-     * @returns {void}
-     */
-    componentWillUnmount() {
-        if (this._interval) {
-            clearInterval(this._interval);
-            this._interval = undefined;
-        }
-    }
-
-    /**
-     * Handle clicking of the "Cancel" button. It will navigate back to the
-     * welcome page.
-     *
-     * @private
-     * @returns {boolean}
-     */
-    _onCancel() {
-        const { dispatch } = this.props;
-
-        clearInterval(this._interval);
-        dispatch(appNavigate(undefined));
-
-        return true;
-    }
-
-    /**
-     * Handles automatic reconnection.
-     *
-     * @private
-     * @returns {void}
-     */
-    _onReconnecting() {
-        const { dispatch } = this.props;
-        const { timeLeft } = this.state;
-
-        if (timeLeft === 0) {
-            if (this._interval) {
-                dispatch(hideDialog());
-                this._onReloadNow();
-                this._interval = undefined;
-            }
-        }
-
-        this.setState({
-            timeLeft: timeLeft - 1
-        });
-    }
-
-    /**
-     * Handle clicking on the "Reload Now" button. It will navigate to the same
-     * conference URL as before immediately, without waiting for the timer to
-     * kick in.
-     *
-     * @private
-     * @returns {boolean}
-     */
-    _onReloadNow() {
-        const { dispatch } = this.props;
-
-        clearInterval(this._interval);
-        dispatch(reloadNow());
-
-        return true;
-    }
-
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement}
-     */
-    render() {
-        const { isNetworkFailure, t } = this.props;
-        const { timeLeft } = this.state;
-
-        let message, title;
-
-        if (isNetworkFailure) {
-            title = 'dialog.conferenceDisconnectTitle';
-            message = 'dialog.conferenceDisconnectMsg';
-        } else {
-            title = 'dialog.conferenceReloadTitle';
-            message = 'dialog.conferenceReloadMsg';
-        }
-
-        return (
-            <ConfirmDialog
-                cancelLabel = 'dialog.Cancel'
-                confirmLabel = 'dialog.rejoinNow'
-                descriptionKey = { `${t(message, { seconds: timeLeft })}` }
-                onCancel = { this._onCancel }
-                onSubmit = { this._onReloadNow }
-                title = { title } />
-        );
-    }
-}
-
-/**
- * Maps (parts of) the redux state to the associated component's props.
- *
- * @param {Object} state - The redux state.
- * @protected
- * @returns {{
- *     isNetworkFailure: boolean,
- *     reason: string
- * }}
- */
-function mapStateToProps(state: IReduxState) {
-    const { error: conferenceError } = state['features/base/conference'];
-    const { error: configError } = state['features/base/config'];
-    const { error: connectionError } = state['features/base/connection'];
-    const { fatalError } = state['features/overlay'];
-
-    const fatalConnectionError
-        // @ts-ignore
-        = connectionError && isFatalJitsiConnectionError(connectionError);
-    const fatalConfigError = fatalError === configError;
-
-    const isNetworkFailure = fatalConfigError || fatalConnectionError;
-
-    let reason;
-
-    if (conferenceError) {
-        reason = `error.conference.${conferenceError.name}`;
-    } else if (connectionError) {
-        reason = `error.conference.${connectionError.name}`;
-    } else if (configError) {
-        reason = `error.config.${configError.name}`;
-    } else {
-        logger.error('No reload reason defined!');
-    }
-
-    return {
-        isNetworkFailure,
-        reason
-    };
-}
-
-export default translate(connect(mapStateToProps)(PageReloadDialog));

react/features/base/dialog/components/native/index.js

@@ -5,7 +5,6 @@ export { default as ConfirmDialog } from './ConfirmDialog';
 export { default as DialogContainer } from './DialogContainer';
 export { default as AlertDialog } from './AlertDialog';
 export { default as InputDialog } from './InputDialog';
-export { default as PageReloadDialog } from './PageReloadDialog';
 
 // NOTE: Some dialogs reuse the style of these base classes for consistency
 // and as we're in a /native namespace, it's safe to export the styles.

react/features/base/dialog/components/styles.native.js

@@ -0,0 +1,14 @@
+import { BoxModel, createStyleSheet } from '../../styles';
+
+/**
+ * The React {@code Component} styles of {@code Dialog}.
+ */
+export default createStyleSheet({
+    /**
+     * Unified container for a consistent Dialog style.
+     */
+    dialogContainer: {
+        paddingHorizontal: BoxModel.padding,
+        paddingVertical: 1.5 * BoxModel.padding
+    }
+});

react/features/base/dialog/components/styles.web.js

@@ -0,0 +1,5 @@
+/**
+ * Placeholder styles for web to be able to use cross platform components
+ * unmodified such as {@code DialogContent}.
+ */
+export default {};

react/features/base/dialog/components/web/AbstractDialogTab.ts

@@ -5,6 +5,11 @@ import { Component } from 'react';
  */
 export interface IProps {
 
+    /**
+     * Function that closes the dialog.
+     */
+    closeDialog: Function;
+
     /**
      * Callback to invoke on change.
      */

react/features/base/dialog/components/web/Dialog-old.js

@@ -0,0 +1,93 @@
+// @flow
+
+import React from 'react';
+
+import { connect } from '../../../redux';
+import AbstractDialog from '../AbstractDialog';
+import type { Props as AbstractDialogProps, State } from '../AbstractDialog';
+
+import StatelessDialog from './StatelessDialog';
+
+/**
+ * The type of the React {@code Component} props of {@link Dialog}.
+ */
+type Props = AbstractDialogProps & {
+
+    /**
+     * True if listening for the Enter key should be disabled.
+     */
+    disableEnter: boolean,
+
+    /**
+     * Whether the dialog is modal. This means clicking on the blanket will
+     * leave the dialog open. No cancel button.
+     */
+    isModal: boolean,
+
+    /**
+     * Disables rendering of the submit button.
+     */
+    submitDisabled: boolean,
+
+    /**
+     * Width of the dialog, can be:
+     * - 'small' (400px), 'medium' (600px), 'large' (800px),
+     * 'x-large' (968px)
+     * - integer value for pixel width
+     * - string value for percentage.
+     */
+    width: string
+};
+
+/**
+ * Web dialog that uses atlaskit modal-dialog to display dialogs.
+ */
+class Dialog extends AbstractDialog<Props, State> {
+    /**
+     * Initializes a new Dialog instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props: Props) {
+        super(props);
+
+        // Bind event handlers so they are only bound once per instance.
+        this._onCancel = this._onCancel.bind(this);
+        this._onSubmit = this._onSubmit.bind(this);
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const props = {
+            ...this.props,
+            onCancel: this._onCancel,
+            onSubmit: this._onSubmit
+        };
+
+        // $FlowExpectedError
+        delete props.dispatch;
+
+        return <StatelessDialog { ...props } />;
+    }
+
+    _onCancel: () => void;
+
+    /**
+     * Dispatches action to hide the dialog.
+     *
+     * @returns {void}
+     */
+    _onCancel() {
+        this.props.isModal || super._onCancel();
+    }
+
+    _onSubmit: (?string) => void;
+}
+
+export default connect()(Dialog);

react/features/base/dialog/components/web/DialogWithTabs.js

@@ -0,0 +1,256 @@
+// @flow
+
+import Tabs from '@atlaskit/tabs';
+import React, { Component } from 'react';
+
+import { translate } from '../../../i18n/functions';
+import logger from '../../logger';
+
+import StatelessDialog from './StatelessDialog';
+
+/**
+ * The type of the React {@code Component} props of {@link DialogWithTabs}.
+ */
+export type Props = {
+
+    /**
+     * Function that closes the dialog.
+     */
+    closeDialog: Function,
+
+    /**
+     * Css class name that will be added to the dialog.
+     */
+    cssClassName: string,
+
+    /**
+     * Which settings tab should be initially displayed. If not defined then
+     * the first tab will be displayed.
+     */
+    defaultTab: number,
+
+    /**
+     * Disables dismissing the dialog when the blanket is clicked. Enabled
+     * by default.
+     */
+    disableBlanketClickDismiss: boolean,
+
+    /**
+     * Callback invoked when the Save button has been pressed.
+     */
+    onSubmit: Function,
+
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function,
+
+    /**
+     * Information about the tabs that will be rendered.
+     */
+    tabs: Array<Object>,
+
+    /**
+     * Key to use for showing a title.
+     */
+    titleKey: string
+
+};
+
+/**
+ * The type of the React {@code Component} state of {@link DialogWithTabs}.
+ */
+type State = {
+
+    /**
+     * The index of the tab that should be displayed.
+     */
+    selectedTab: number,
+
+    /**
+     * An array of the states of the tabs.
+     */
+    tabStates: Array<Object>
+};
+
+/**
+ * A React {@code Component} for displaying a dialog with tabs.
+ *
+ * @augments Component
+ */
+class DialogWithTabs extends Component<Props, State> {
+    /**
+     * Initializes a new {@code DialogWithTabs} instance.
+     *
+     * @param {Object} props - The read-only React {@code Component} props with
+     * which the new instance is to be initialized.
+     */
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            selectedTab: this.props.defaultTab || 0,
+            tabStates: this.props.tabs.map(tab => tab.props)
+        };
+        this._onSubmit = this._onSubmit.bind(this);
+        this._onTabSelected = this._onTabSelected.bind(this);
+        this._onTabStateChange = this._onTabStateChange.bind(this);
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const onCancel = this.props.closeDialog;
+
+        return (
+            <StatelessDialog
+                disableBlanketClickDismiss
+                    = { this.props.disableBlanketClickDismiss }
+                onCancel = { onCancel }
+                onSubmit = { this._onSubmit }
+                titleKey = { this.props.titleKey } >
+                <div className = { this.props.cssClassName } >
+                    { this._renderTabs() }
+                </div>
+            </StatelessDialog>
+        );
+    }
+
+    /**
+     * Gets the props to pass into the tab component.
+     *
+     * @param {number} tabId - The index of the tab configuration within
+     * {@link this.state.tabStates}.
+     * @returns {Object}
+     */
+    _getTabProps(tabId) {
+        const { tabs } = this.props;
+        const { tabStates } = this.state;
+        const tabConfiguration = tabs[tabId];
+        const currentTabState = tabStates[tabId];
+
+        if (tabConfiguration.propsUpdateFunction) {
+            return tabConfiguration.propsUpdateFunction(
+                currentTabState,
+                tabConfiguration.props);
+        }
+
+        return { ...currentTabState };
+    }
+
+    _onTabSelected: (Object, number) => void;
+
+    /**
+     * Callback invoked when the desired tab to display should be changed.
+     *
+     * @param {Object} tab - The configuration passed into atlaskit tabs to
+     * describe how to display the selected tab.
+     * @param {number} tabIndex - The index of the tab within the array of
+     * displayed tabs.
+     * @private
+     * @returns {void}
+     */
+    _onTabSelected(tab, tabIndex) { // eslint-disable-line no-unused-vars
+        this.setState({ selectedTab: tabIndex });
+    }
+
+    /**
+     * Renders the tabs from the tab information passed on props.
+     *
+     * @returns {void}
+     */
+    _renderTabs() {
+        const { t, tabs } = this.props;
+
+        if (tabs.length === 1) {
+            return this._renderTab({
+                ...tabs[0],
+                tabId: 0
+            });
+        }
+
+        if (tabs.length > 1) {
+            return (
+                <Tabs
+                    onSelect = { this._onTabSelected }
+                    selected = { this.state.selectedTab }
+                    tabs = {
+                        tabs.map(({ component, label, styles }, idx) => {
+                            return {
+                                content: this._renderTab({
+                                    component,
+                                    styles,
+                                    tabId: idx
+                                }),
+                                label: t(label)
+                            };
+                        })
+                    } />);
+        }
+
+        logger.warn('No settings tabs configured to display.');
+
+        return null;
+    }
+
+    /**
+     * Renders a tab from the tab information passed as parameters.
+     *
+     * @param {Object} tabInfo - Information about the tab.
+     * @returns {Component} - The tab.
+     */
+    _renderTab({ component, styles, tabId }) {
+        const { closeDialog } = this.props;
+        const TabComponent = component;
+
+        return (
+            <div className = { styles }>
+                <TabComponent
+                    closeDialog = { closeDialog }
+                    mountCallback = { this.props.tabs[tabId].onMount }
+                    onTabStateChange
+                        = { this._onTabStateChange }
+                    tabId = { tabId }
+                    { ...this._getTabProps(tabId) } />
+            </div>);
+    }
+
+    _onTabStateChange: (number, Object) => void;
+
+    /**
+     * Changes the state for a tab.
+     *
+     * @param {number} tabId - The id of the tab which state will be changed.
+     * @param {Object} state - The new state.
+     * @returns {void}
+     */
+    _onTabStateChange(tabId, state) {
+        const tabStates = [ ...this.state.tabStates ];
+
+        tabStates[tabId] = state;
+        this.setState({ tabStates });
+    }
+
+    _onSubmit: () => void;
+
+    /**
+     * Submits the information filled in the dialog.
+     *
+     * @returns {void}
+     */
+    _onSubmit() {
+        const { onSubmit, tabs } = this.props;
+
+        tabs.forEach(({ submit }, idx) => {
+            submit && submit(this.state.tabStates[idx]);
+        });
+
+        onSubmit();
+    }
+}
+
+export default translate(DialogWithTabs);

react/features/base/dialog/components/web/ModalHeader.tsx

@@ -0,0 +1,172 @@
+/* eslint-disable lines-around-comment */
+/* eslint-disable react/no-multi-comp */
+import ErrorIcon from '@atlaskit/icon/glyph/error';
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import {
+    Header,
+    Title,
+    TitleText,
+    titleIconWrapperStyles
+    // @ts-ignore
+} from '@atlaskit/modal-dialog/dist/es2019/styled/Content';
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
+import React from 'react';
+import { WithTranslation } from 'react-i18next';
+
+import { translate } from '../../../i18n/functions';
+import { IconCloseLarge } from '../../../icons/svg';
+import { withPixelLineHeight } from '../../../styles/functions.web';
+import Button from '../../../ui/components/web/Button';
+import { BUTTON_TYPES } from '../../../ui/constants.web';
+
+const TitleIcon = ({ appearance }: { appearance?: 'danger' | 'warning'; }) => {
+    if (!appearance) {
+        return null;
+    }
+
+    const IconSymbol = appearance === 'danger' ? ErrorIcon : WarningIcon;
+
+    return (
+        <span css = { titleIconWrapperStyles(appearance) }>
+            <IconSymbol label = { `${appearance} icon` } />
+        </span>
+    );
+};
+
+interface IProps extends WithTranslation {
+    appearance?: 'danger' | 'warning';
+    classes: any;
+    heading: string;
+    hideCloseIconButton: boolean;
+    id?: string;
+    isHeadingMultiline: boolean;
+    onClose: (e?: any) => void;
+    showKeyline: boolean;
+    testId?: string;
+}
+
+/**
+ * Creates the styles for the component.
+ *
+ * @param {Object} theme - The current UI theme.
+ *
+ * @returns {Object}
+ */
+const styles = (theme: Theme) => {
+    return {
+        closeButton: {
+            borderRadius: theme.shape.borderRadius,
+            cursor: 'pointer',
+            padding: 13,
+
+            [theme.breakpoints.down(480)]: {
+                background: theme.palette.action02
+            },
+
+            '&:hover': {
+                background: theme.palette.ui04
+            }
+        },
+        header: {
+            boxShadow: 'none',
+
+            '& h4': {
+                ...withPixelLineHeight(theme.typography.heading5),
+                color: theme.palette.text01
+            }
+        }
+    };
+};
+
+
+/**
+ * A default header for modal-dialog components.
+ *
+ * @class ModalHeader
+ * @augments {React.Component<IProps>}
+ */
+class ModalHeader extends React.Component<IProps> {
+    static defaultProps = {
+        isHeadingMultiline: true
+    };
+
+    /**
+     * Initializes a new {@code ModalHeader} instance.
+     *
+     * @param {*} props - The read-only properties with which the new instance
+     * is to be initialized.
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        // Bind event handler so it is only bound once for every instance.
+        this._onKeyPress = this._onKeyPress.bind(this);
+    }
+
+    /**
+     * KeyPress handler for accessibility.
+     *
+     * @param {Object} e - The key event to handle.
+     *
+     * @returns {void}
+     */
+    _onKeyPress(e: React.KeyboardEvent) {
+        if (this.props.onClose && (e.key === ' ' || e.key === 'Enter')) {
+            e.preventDefault();
+            this.props.onClose();
+        }
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const {
+            id,
+            appearance,
+            classes,
+            heading,
+            hideCloseIconButton,
+            onClose,
+            showKeyline,
+            isHeadingMultiline,
+            testId,
+            t
+        } = this.props;
+
+        if (!heading) {
+            return null;
+        }
+
+        return (
+            <Header
+                className = { classes.header }
+                showKeyline = { showKeyline }>
+                <Title>
+                    <TitleIcon appearance = { appearance } />
+                    <TitleText
+                        data-testid = { testId && `${testId}-heading` }
+                        id = { id }
+                        isHeadingMultiline = { isHeadingMultiline }>
+                        {heading}
+                    </TitleText>
+                </Title>
+
+                {
+                    !hideCloseIconButton && <Button
+                        accessibilityLabel = { t('dialog.close') }
+                        icon = { IconCloseLarge }
+                        id = 'modal-header-close-button'
+                        onClick = { onClose }
+                        size = 'large'
+                        type = { BUTTON_TYPES.TERTIARY } />
+                }
+            </Header>
+        );
+    }
+}
+export default translate(withStyles(styles)(ModalHeader));

react/features/base/dialog/components/web/StatelessDialog.tsx

@@ -0,0 +1,377 @@
+/* eslint-disable lines-around-comment */
+import Modal, { ModalFooter } from '@atlaskit/modal-dialog';
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
+import React, { Component, ReactElement } from 'react';
+import { WithTranslation } from 'react-i18next';
+
+import { translate } from '../../../i18n/functions';
+import Button from '../../../ui/components/web/Button';
+import { BUTTON_TYPES } from '../../../ui/constants.web';
+import type { DialogProps } from '../../constants';
+
+import ModalHeader from './ModalHeader';
+
+/**
+ * The ID to be used for the cancel button if enabled.
+ *
+ * @type {string}
+ */
+const CANCEL_BUTTON_ID = 'modal-dialog-cancel-button';
+
+/**
+ * The ID to be used for the ok button if enabled.
+ *
+ * @type {string}
+ */
+const OK_BUTTON_ID = 'modal-dialog-ok-button';
+
+/**
+ * The type of the React {@code Component} props of {@link StatelessDialog}.
+ *
+ * @static
+ */
+interface IProps extends DialogProps, WithTranslation {
+
+    /**
+     * An object containing the CSS classes.
+     */
+    classes: any;
+
+    /**
+     * Custom dialog header that replaces the standard heading.
+     */
+    customHeader?: ReactElement<any> | Function;
+
+    /**
+     * Disables dismissing the dialog when the blanket is clicked. Enabled
+     * by default.
+     */
+    disableBlanketClickDismiss: boolean;
+
+    /*
+     * True if listening for the Enter key should be disabled.
+     */
+    disableEnter: boolean;
+
+    /**
+     * If true, no footer will be displayed.
+     */
+    disableFooter?: boolean;
+
+    /**
+     * If true, the cancel button will not display but cancel actions, like
+     * clicking the blanket, will cancel.
+     */
+    hideCancelButton: boolean;
+
+    /**
+     * If true, the close icon button will not be displayed.
+     */
+    hideCloseIconButton: boolean;
+
+    /**
+     * Whether the dialog is modal. This means clicking on the blanket will
+     * leave the dialog open. No cancel button.
+     */
+    isModal: boolean;
+
+    /**
+     * The handler for the event when clicking the 'confirmNo' button.
+     * Defaults to onCancel if absent.
+     */
+    onDecline?: () => void;
+
+    /**
+     * Callback invoked when setting the ref of the Dialog.
+     */
+    onDialogRef?: Function;
+
+    /**
+     * Disables rendering of the submit button.
+     */
+    submitDisabled: boolean;
+
+    /**
+     * Width of the dialog, can be:
+     * - 'small' (400px), 'medium' (600px), 'large' (800px),
+     *   'x-large' (968px)
+     * - integer value for pixel width
+     * - string value for percentage.
+     */
+    width: string;
+}
+
+/**
+ * Creates the styles for the component.
+ *
+ * @param {Object} theme - The theme.
+ * @returns {Object}
+ */
+const styles = (theme: Theme) => {
+    return {
+        footer: {
+            boxShadow: 'none'
+        },
+
+        buttonContainer: {
+            display: 'flex',
+
+            '& > button:first-child': {
+                marginRight: theme.spacing(2)
+            }
+        }
+    };
+};
+
+/**
+ * Web dialog that uses atlaskit modal-dialog to display dialogs.
+ */
+class StatelessDialog extends Component<IProps> {
+    static defaultProps = {
+        hideCloseIconButton: false
+    };
+
+    /**
+     * Initializes a new {@code StatelessDialog} instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        // Bind event handlers so they are only bound once for every instance.
+        this._onCancel = this._onCancel.bind(this);
+        this._onDialogDismissed = this._onDialogDismissed.bind(this);
+        this._onKeyPress = this._onKeyPress.bind(this);
+        this._onSubmit = this._onSubmit.bind(this);
+        this._renderFooter = this._renderFooter.bind(this);
+        this._onDialogRef = this._onDialogRef.bind(this);
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const {
+            customHeader,
+            children,
+            hideCloseIconButton,
+            t,
+            titleString,
+            titleKey,
+            width
+        } = this.props;
+
+        return (
+            <Modal
+                autoFocus = { true }
+                components = {{
+                    // @ts-ignore
+                    Header: customHeader ? customHeader : props => (
+                        // @ts-ignore
+                        <ModalHeader
+                            { ...props }
+                            heading = { titleString || t(titleKey ?? '') }
+                            hideCloseIconButton = { hideCloseIconButton } />
+                    )
+                }}
+                footer = { this._renderFooter }
+                i18n = { this.props.i18n }
+                onClose = { this._onDialogDismissed }
+                onDialogDismissed = { this._onDialogDismissed }
+                shouldCloseOnEscapePress = { true }
+                width = { width || 'medium' }>
+                <div
+                    onKeyPress = { this._onKeyPress }
+                    ref = { this._onDialogRef }>
+                    <form
+                        className = 'modal-dialog-form'
+                        id = 'modal-dialog-form'
+                        onSubmit = { this._onSubmit }>
+                        { children }
+                    </form>
+                </div>
+            </Modal>
+        );
+    }
+
+    /**
+     * Returns a ReactElement to display buttons for closing the modal.
+     *
+     * @param {Object} propsFromModalFooter - The props passed in from the
+     * {@link ModalFooter} component.
+     * @private
+     * @returns {ReactElement}
+     */
+    _renderFooter(propsFromModalFooter: any) {
+        // Filter out falsy (null) values because {@code ButtonGroup} will error
+        // if passed in anything but buttons with valid type props.
+        const buttons = [
+            this._renderCancelButton(),
+            this._renderOKButton()
+        ].filter(Boolean);
+
+        if (this.props.disableFooter) {
+            return null;
+        }
+
+        return (
+            <ModalFooter
+                className = { this.props.classes.footer }
+                showKeyline = { propsFromModalFooter.showKeyline } >
+                {
+
+                    /**
+                     * Atlaskit has this empty span (JustifySim) so...
+                     */
+                }
+                <span />
+                <div className = { this.props.classes.buttonContainer }>
+                    { buttons }
+                </div>
+            </ModalFooter>
+        );
+    }
+
+    /**
+     * Dispatches action to hide the dialog.
+     *
+     * @returns {void}
+     */
+    _onCancel() {
+        if (!this.props.isModal) {
+            const { onCancel } = this.props;
+
+            onCancel?.();
+        }
+    }
+
+    /**
+     * Handles click on the blanket area.
+     *
+     * @returns {void}
+     */
+    _onDialogDismissed() {
+        if (!this.props.disableBlanketClickDismiss) {
+            this._onCancel();
+        }
+    }
+
+    /**
+     * Dispatches the action when submitting the dialog.
+     *
+     * @private
+     * @param {string} value - The submitted value if any.
+     * @returns {void}
+     */
+    _onSubmit(value?: any) {
+        const { onSubmit } = this.props;
+
+        onSubmit?.(value);
+    }
+
+    /**
+     * Renders Cancel button.
+     *
+     * @private
+     * @returns {ReactElement|null} The Cancel button if enabled and dialog is
+     * not modal.
+     */
+    _renderCancelButton() {
+        if (this.props.cancelDisabled
+            || this.props.isModal
+            || this.props.hideCancelButton) {
+            return null;
+        }
+
+        const {
+            t,
+            onDecline
+        } = this.props;
+
+        return (
+            <Button
+                accessibilityLabel = { t(this.props.cancelKey || 'dialog.Cancel') }
+                id = { CANCEL_BUTTON_ID }
+                key = { CANCEL_BUTTON_ID }
+                label = { t(this.props.cancelKey || 'dialog.Cancel') }
+                onClick = { onDecline || this._onCancel }
+                size = 'small'
+                type = { BUTTON_TYPES.TERTIARY } />
+        );
+    }
+
+    /**
+     * Renders OK button.
+     *
+     * @private
+     * @returns {ReactElement|null} The OK button if enabled.
+     */
+    _renderOKButton() {
+        const {
+            submitDisabled,
+            t
+        } = this.props;
+
+        if (submitDisabled) {
+            return null;
+        }
+
+        return (
+            <Button
+                accessibilityLabel = { t(this.props.okKey || 'dialog.Ok') }
+                disabled = { this.props.okDisabled }
+                id = { OK_BUTTON_ID }
+                key = { OK_BUTTON_ID }
+                label = { t(this.props.okKey || 'dialog.Ok') }
+                onClick = { this._onSubmit }
+                size = 'small' />
+        );
+    }
+
+    /**
+     * Callback invoked when setting the ref of the dialog's child passing the Modal ref.
+     * It is done this way because we cannot directly access the ref of the Modal component.
+     *
+     * @param {HTMLElement} element - The DOM element for the dialog.
+     * @private
+     * @returns {void}
+     */
+    _onDialogRef(element?: any) {
+        this.props.onDialogRef?.(element?.parentNode);
+    }
+
+    /**
+     * Handles 'Enter' key in the dialog to submit/hide dialog depending on
+     * the available buttons and their disabled state.
+     *
+     * @param {Object} event - The key event.
+     * @private
+     * @returns {void}
+     */
+    _onKeyPress(event: React.KeyboardEvent) {
+        // If the event coming to the dialog has been subject to preventDefault
+        // we don't handle it here.
+        if (event.defaultPrevented) {
+            return;
+        }
+
+        if (event.key === 'Enter' && !this.props.disableEnter) {
+            event.preventDefault();
+            event.stopPropagation();
+
+            if (this.props.submitDisabled && !this.props.cancelDisabled) {
+                this._onCancel();
+            } else if (!this.props.okDisabled) {
+                this._onSubmit();
+            }
+        }
+    }
+}
+
+export default translate(withStyles(styles)(StatelessDialog));

react/features/base/dialog/components/web/ThemedDialog.js

@@ -0,0 +1,31 @@
+// @flow
+
+import {
+    Dialog,
+    FillScreen,
+    PositionerAbsolute,
+    PositionerRelative,
+    dialogHeight,
+    dialogWidth
+} from '@atlaskit/modal-dialog/dist/es2019/styled/Modal.js';
+import { DN50, N0 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+import React from 'react';
+
+type Props = {
+    isChromeless: boolean
+}
+
+const ThemedDialog = (props: Props) => {
+    const style = { backgroundColor: props.isChromeless ? 'transparent' : themed({ light: N0,
+        dark: DN50 })({ theme: { mode: 'dark' } }) };
+
+    return (<Dialog
+        { ...props }
+        aria-modal = { true }
+        style = { style }
+        theme = {{ mode: 'dark' }} />);
+};
+
+
+export { ThemedDialog as Dialog, FillScreen, dialogWidth, dialogHeight, PositionerAbsolute, PositionerRelative };

react/features/base/dialog/components/web/index.js

@@ -2,4 +2,7 @@
 
 export { default as AbstractDialogTab } from './AbstractDialogTab';
 export type { Props as AbstractDialogTabProps } from './AbstractDialogTab';
+export { default as Dialog } from './Dialog-old';
+export { default as DialogWithTabs } from './DialogWithTabs';
+export { default as StatelessDialog } from './StatelessDialog';
 export { default as DialogContainer } from '../../../ui/components/web/DialogContainer';

react/features/base/dialog/functions.ts

@@ -2,7 +2,9 @@ import { ComponentType } from 'react';
 
 import { IReduxState } from '../../app/types';
 import { IStateful } from '../app/types';
-import ColorSchemeRegistry from '../color-scheme/ColorSchemeRegistry';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
+import { ColorSchemeRegistry } from '../color-scheme';
 import { toState } from '../redux/functions';
 
 /**
@@ -26,7 +28,7 @@ export function isAnyDialogOpen(stateful: IStateful) {
  * {@code Dialog} to be checked.
  * @returns {boolean}
  */
-export function isDialogOpen(stateful: IStateful, component: ComponentType<any>) {
+export function isDialogOpen(stateful: IStateful, component: ComponentType) {
     return toState(stateful)['features/base/dialog'].component === component;
 }
 

react/features/base/dialog/middleware.web.ts

@@ -0,0 +1,72 @@
+/* eslint-disable lines-around-comment */
+import LoginDialog from '../../authentication/components/web/LoginDialog';
+import WaitForOwnerDialog from '../../authentication/components/web/WaitForOwnerDialog';
+import ChatPrivacyDialog from '../../chat/components/web/ChatPrivacyDialog';
+import DesktopPicker from '../../desktop-picker/components/DesktopPicker';
+import DisplayNamePrompt from '../../display-name/components/web/DisplayNamePrompt';
+import ParticipantVerificationDialog from '../../e2ee/components/ParticipantVerificationDialog';
+import EmbedMeetingDialog from '../../embed-meeting/components/EmbedMeetingDialog';
+// @ts-ignore
+import FeedbackDialog from '../../feedback/components/FeedbackDialog.web';
+import AddPeopleDialog from '../../invite/components/add-people-dialog/web/AddPeopleDialog';
+import PremiumFeatureDialog from '../../jaas/components/web/PremiumFeatureDialog';
+import KeyboardShortcutsDialog from '../../keyboard-shortcuts/components/web/KeyboardShortcutsDialog';
+// @ts-ignore
+import StartLiveStreamDialog from '../../recording/components/LiveStream/web/StartLiveStreamDialog';
+// @ts-ignore
+import StopLiveStreamDialog from '../../recording/components/LiveStream/web/StopLiveStreamDialog';
+// @ts-ignore
+import StartRecordingDialog from '../../recording/components/Recording/web/StartRecordingDialog';
+// @ts-ignore
+import StopRecordingDialog from '../../recording/components/Recording/web/StopRecordingDialog';
+// @ts-ignore
+import RemoteControlAuthorizationDialog from '../../remote-control/components/RemoteControlAuthorizationDialog';
+import SalesforceLinkDialog from '../../salesforce/components/web/SalesforceLinkDialog';
+import ShareAudioDialog from '../../screen-share/components/web/ShareAudioDialog';
+import ShareScreenWarningDialog from '../../screen-share/components/web/ShareScreenWarningDialog';
+import SecurityDialog from '../../security/components/security-dialog/web/SecurityDialog';
+import LogoutDialog from '../../settings/components/web/LogoutDialog';
+import SharedVideoDialog from '../../shared-video/components/web/SharedVideoDialog';
+import SpeakerStats from '../../speaker-stats/components/web/SpeakerStats';
+import LanguageSelectorDialog from '../../subtitles/components/LanguageSelectorDialog.web';
+import GrantModeratorDialog from '../../video-menu/components/web/GrantModeratorDialog';
+import KickRemoteParticipantDialog from '../../video-menu/components/web/KickRemoteParticipantDialog';
+import MuteEveryoneDialog from '../../video-menu/components/web/MuteEveryoneDialog';
+import MuteEveryonesVideoDialog from '../../video-menu/components/web/MuteEveryonesVideoDialog';
+import MuteRemoteParticipantsVideoDialog from '../../video-menu/components/web/MuteRemoteParticipantsVideoDialog';
+// @ts-ignore
+import VideoQualityDialog from '../../video-quality/components/VideoQualityDialog.web';
+import VirtualBackgroundDialog from '../../virtual-background/components/VirtualBackgroundDialog';
+import MiddlewareRegistry from '../redux/MiddlewareRegistry';
+
+import { OPEN_DIALOG } from './actionTypes';
+
+// ! IMPORTANT - This whole middleware is only needed for the transition from from @atlaskit dialog to our component.
+// ! It should be removed when the transition is over.
+
+const NEW_DIALOG_LIST = [ KeyboardShortcutsDialog, ChatPrivacyDialog, DisplayNamePrompt, EmbedMeetingDialog,
+    FeedbackDialog, AddPeopleDialog, PremiumFeatureDialog, StartLiveStreamDialog, StopLiveStreamDialog,
+    StartRecordingDialog, StopRecordingDialog, ShareAudioDialog, ShareScreenWarningDialog, SecurityDialog,
+    SharedVideoDialog, SpeakerStats, LanguageSelectorDialog, MuteEveryoneDialog, MuteEveryonesVideoDialog,
+    GrantModeratorDialog, KickRemoteParticipantDialog, MuteRemoteParticipantsVideoDialog, VideoQualityDialog,
+    VirtualBackgroundDialog, LoginDialog, WaitForOwnerDialog, DesktopPicker, RemoteControlAuthorizationDialog,
+    LogoutDialog, SalesforceLinkDialog, ParticipantVerificationDialog ];
+
+// This function is necessary while the transition from @atlaskit dialog to our component is ongoing.
+const isNewDialog = (component: any) => NEW_DIALOG_LIST.some(comp => comp === component);
+
+/**
+ * Implements the entry point of the middleware of the feature base/media.
+ *
+ * @param {IStore} store - The redux store.
+ * @returns {Function}
+ */
+MiddlewareRegistry.register(() => (next: Function) => (action: any) => {
+    switch (action.type) {
+    case OPEN_DIALOG: {
+        action.isNewDialog = isNewDialog(action.component);
+    }
+    }
+
+    return next(action);
+});