feat: Sends the statisticsDisplayName to rtcstats.

https://github.com/jitsi/lib-jitsi-meet/compare/v1585.0.0+362d1b2c...v1586.0.0+df2c3096

.github/workflows/ci-lua.yml

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

.luacheckrc

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

Makefile

@@ -44,12 +44,8 @@ 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 \
@@ -70,7 +66,6 @@ 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)
 
@@ -131,7 +126,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 connection_optimization favicon.ico fonts images libs static sounds LICENSE lang source_package/jitsi-meet && \
+	cp -r *.js *.html resources/*.txt 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,7 +76,6 @@ 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,7 +119,6 @@ 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,8 +31,6 @@ 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,17 +33,6 @@ 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

@@ -103,6 +103,7 @@ import {
     participantMutedUs,
     participantPresenceChanged,
     participantRoleChanged,
+    participantSourcesUpdated,
     participantUpdated,
     screenshareParticipantDisplayNameChanged,
     updateRemoteParticipantFeatures
@@ -140,7 +141,7 @@ import {
     showNotification,
     showWarningNotification
 } from './react/features/notifications';
-import { mediaPermissionPromptVisibilityChanged } from './react/features/overlay';
+import { mediaPermissionPromptVisibilityChanged } from './react/features/overlay/actions';
 import { suspendDetected } from './react/features/power-monitor';
 import { initPrejoin, makePrecallTest, setJoiningInProgress } from './react/features/prejoin/actions';
 import { isPrejoinPageVisible } from './react/features/prejoin/functions';
@@ -152,6 +153,7 @@ 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);
@@ -341,6 +343,8 @@ 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']);
@@ -1987,6 +1991,11 @@ export default {
             APP.store.dispatch(participantKicked(kicker, kicked));
         });
 
+        room.on(JitsiConferenceEvents.PARTICIPANT_SOURCE_UPDATED,
+            jitsiParticipant => {
+                APP.store.dispatch(participantSourcesUpdated(jitsiParticipant));
+            });
+
         room.on(JitsiConferenceEvents.SUSPEND_DETECTED, () => {
             APP.store.dispatch(suspendDetected());
         });

config.js

@@ -46,7 +46,7 @@ var config = {
     },
 
     // BOSH URL. FIXME: use XEP-0156 to discover it.
-    bosh: '//jitsi-meet.example.com/' + subdir + 'http-bind',
+    bosh: 'https://jitsi-meet.example.com/' + subdir + 'http-bind',
 
     // Websocket URL
     // websocket: 'wss://jitsi-meet.example.com/' + subdir + 'xmpp-websocket',
@@ -542,12 +542,15 @@ var config = {
     // Disables responsive tiles.
     // disableResponsiveTiles: false,
 
-    // Hides lobby button
+    // DEPRECATED. Please use `securityUi?.hideLobbyButton` instead.
+    // 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,
 
@@ -572,6 +575,22 @@ 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,
 
@@ -799,6 +818,14 @@ 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
     //
 
@@ -1119,6 +1146,13 @@ 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,
@@ -1335,9 +1369,9 @@ var config = {
      deploymentInfo
      dialOutAuthUrl
      dialOutCodesUrl
+     dialOutRegionUrl
      disableRemoteControl
      displayJids
-     externalConnectUrl
      e2eeLabels
      firefox_fake_device
      googleApiApplicationClientID
@@ -1515,6 +1549,8 @@ 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,54 +32,6 @@ 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]
@@ -182,7 +134,10 @@ export async function connect(id, password) {
             APP.store.dispatch(setPrejoinDisplayNameRequired());
         }
 
-        checkForAttachParametersAndConnect(id, password, connection);
+        connection.connect({
+            id,
+            password
+        });
     });
 }
 

connection_optimization/.eslintrc.js

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

connection_optimization/do_external_connect.js

@@ -1,86 +0,0 @@
-/* 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 {
-        background: $menuBG;
-        border-radius: 3px;
-        font-size: 14px;
-        line-height: 24px;
+        position: relative;
+        right: auto;
+        margin-bottom: 4px;
         max-height: 456px;
         overflow: auto;
         width: 300px;
+
         &-ul {
             margin:0;
             padding:0;
@@ -16,90 +16,33 @@
         }
     }
 
-    &-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;
-        }
+    &-header:hover {
+        background-color: initial;
+        cursor: initial;
     }
 
-    &-entry {
-        align-items: center;
-        color: #fff;
-        cursor: pointer;
-        display: flex;
-        padding: 8px 0;
-        margin-left: 48px;
+    &-entry-text {
+        max-width: 213px;
 
-        &--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;
+        &.left-margin {
+            margin-left: 36px;
         }
     }
 
     &-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;
         }
@@ -108,19 +51,6 @@
     &-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;
@@ -140,42 +70,21 @@
         display: inline-block;
         width: 14px;
 
-        & svg {
-            fill: #1C2025;
-        }
-
-        &--check {
-            background: #31B76A;
-            margin-right: 16px;
-        }
-
         &--exclamation {
             margin-left: 6px;
+
             & svg {
                 fill: #E54B4B;
             }
         }
     }
 
-    &-hr {
-        border-top: 1px solid #4C4D50;
-        border-bottom: 0;
-    }
-
     &-test-button {
         display: none;
-        background: #FFF;
-        border: 1px solid #D1DBE8;
-        border-radius: 3px;
-        color: #1C2025;
-        cursor: pointer;
-        font-weight: 600;
-        font-size: 0.8rem;
-        line-height: 24px;
-        padding: 2px 8px;
+        padding: 4px 10px;
         position: absolute;
         right: 16px;
-        top: 5px;
+        top: 6px;
     }
 
     &-meter-mic {
@@ -184,9 +93,7 @@
         top: 14px;
     }
 
-    // Override @atlaskit/InlineDialog container which is made with styled components
-    & > div:nth-child(2) {
-        outline: none;
-        padding: 0;
+    &-checkbox-container {
+        padding: 10px 16px;
     }
 }

css/_meter.scss

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

css/_polls.scss

@@ -1,353 +1,3 @@
-.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: $popupSliderColor;
+                background-color: #246FE5;
             }
 
             &::-moz-range-track {
-                background-color: $popupSliderColor;
+                background-color: #246FE5;
             }
 
             &::-ms-fill-lower {
-                background-color: $popupSliderColor;
+                background-color: #246FE5;
             }
         }
 }

css/_recording.scss

@@ -18,6 +18,7 @@
             align-items: center;
             font-size: 14px;
             margin-left: 16px;
+            max-width: 70%;
         }
 
         &.space-top {
@@ -82,7 +83,7 @@
         background-color: #FFFFFF;
         border-radius: 4px;
         height: 40px;
-        width: 56px;
+        width: 40px;
     }
 
     .jitsi-content-recording-icon-container-without-switch {

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: #000;
+        & > svg {
+            fill: #040404;
         }
 
         &.settings-button-small-icon--disabled {
             background: #36383C;
 
             &> svg {
-               fill: #929292;
-           }
+                fill: #929292;
+            }
         }
     }
 
-    &> svg {
+    & > svg {
         fill: #fff;
     }
 

css/_subject.scss

@@ -12,7 +12,6 @@
     &#autoHide.with-always-on {
         overflow: hidden;
         animation: hideSubject forwards .6s ease-out;
-        margin-left: 4px;
 
         & > .subject-info-container {
             justify-content: flex-start;
@@ -43,43 +42,6 @@
     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,12 +120,16 @@
     margin: 8px 0;
 }
 
-.hangup-button {
-    background-color: $hangupColor;
+div.hangup-button {
+    background-color: #CB2233;
 
     @media (hover: hover) and (pointer: fine) {
         &:hover {
-            background-color: $hangupHoverColor;
+            background-color: #E04757;
+        }
+
+        &:active {
+            background-color: #A21B29;
         }
     }
 
@@ -134,12 +138,16 @@
     }
 }
 
-.hangup-menu-button {
-    background-color: $hangupMenuButtonColor;
+div.hangup-menu-button {
+    background-color: #CB2233;
 
     @media (hover: hover) and (pointer: fine) {
         &:hover {
-            background-color: $hangupMenuButtonHoverColor;
+            background-color: #E04757;
+        }
+
+        &:active {
+            background-color: #A21B29;
         }
     }
 

css/_variables.scss

@@ -4,10 +4,6 @@
  * Style variables
  */
 $baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$hangupColor:#DD3849;
-$hangupHoverColor: #F25363;
-$hangupMenuButtonColor:#0056E0;;
-$hangupMenuButtonHoverColor: #246FE5;
 
 /**
  * Size variables.
@@ -205,11 +201,6 @@ $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,49 +3,38 @@
     display: inline-block;
 
     &-container {
-        max-height: 344px;
-        background: $menuBG;
-        border-radius: 3px;
+        max-height: 456px;
         overflow: auto;
-        padding: 8px;
-        margin-bottom: 8px;
+        margin-bottom: 4px;
+        position: relative;
+        right: auto;
     }
 
     &-entry {
         cursor: pointer;
-        height: 168px;
-        margin-bottom: 8px;
+        height: 138px;
+        width: 244px;
         position: relative;
-        width: 284px;
+        margin: 0 7px 4px;
+        border-radius: 6px;
+        box-sizing: border-box;
+        overflow: hidden;
 
         &:last-child {
             margin-bottom: 0;
         }
 
         &--selected {
-            border: 3px solid #31B76A;
-            border-radius: 3px;
-            cursor: default;
-            height: 162px;
-            width: 278px;
+            border: 2px solid #4687ED;
         }
     }
 
     &-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;
@@ -56,23 +45,22 @@
     }
 
     &-label {
-        bottom: 8px;
-        color: #fff;
         position: absolute;
-        width: 100%;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        max-width: 100%;
+        padding: 8px;
         z-index: 2;
 
-        &-container {
-            margin: 0 16px;
-        }
-
         &-text {
-            background-color: #131519;
-            border-radius: 3px;
-            padding: 2px 8px;
-            font-size: 13px;
-            line-height: 20px;
-            margin: 0 auto;
+            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;
             max-width: calc(100% - 16px);
             overflow: hidden;
             text-overflow: ellipsis;
@@ -80,8 +68,8 @@
             white-space: nowrap;
         }
     }
-    // Override @atlaskit/InlineDialog container which is made with styled components
-    & > div:nth-child(2) {
-        padding: 0;
+
+    &-checkbox-container {
+        padding: 10px 14px;
     }
 }

css/deep-linking/_mobile.scss

@@ -67,6 +67,13 @@
             font-size: 1em;
         }
 
+
+        .dial-in-conference-id {
+            text-align: center;
+            min-width: 200px;
+            margin-top: 40px;
+        }
+
         .dial-in-conference-id {
             margin: $deepLinkingDialInConferenceIdMargin;
             padding: $deepLinkingDialInConferenceIdPadding;
@@ -74,24 +81,12 @@
             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/modals/desktop-picker/_desktop-picker.scss

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

css/modals/invite/_info.scss

@@ -50,6 +50,8 @@
 }
 
 .dial-in-numbers-list {
+    max-width: 334px;
+    width: 100%;
     margin-top: 20px;
     font-size: 12px;
     line-height: 24px;
@@ -59,10 +61,6 @@
         text-align: left;
     }
 
-    tr {
-        border-bottom: 1px solid #d1dbe8;
-    }
-
     .flag-cell {
         vertical-align: top;
         width: 30px;
@@ -91,6 +89,7 @@
         font-weight: bold;
         list-style: none;
         vertical-align: top;
+        text-align: right;
     }
 
     li.toll-free:empty:before {
@@ -119,11 +118,6 @@
         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,5 +56,13 @@
             width: 100%;
         }
     }
-  }
-  
+}
+
+.prejoin-input {
+    margin-bottom: 16px;
+    width: 100%;
+
+    & input {
+        text-align: center;
+    }
+}

css/premeeting/_premeeting-screens.scss

@@ -1,14 +1,4 @@
- .premeeting-screen {
-    background: #292929;
-    bottom: 0;
-    display: flex;
-    font-size: 1.3em;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: $toolbarZ + 2;
-
+.premeeting-screen {
     .action-btn {
         border-radius: 6px;
         box-sizing: border-box;
@@ -75,139 +65,44 @@
         }
     }
 
-    .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;
+    #new-toolbox {
+        bottom: 0;
         position: relative;
-        width: $prejoinDefaultContentWidth;
-        z-index: $toolbarZ + 2;
+        transition: none;
 
-        &-controls {
-            align-items: center;
+        .toolbox-content {
+            margin-bottom: 4px;
+        }
+
+        .toolbox-content-items {
+            @include ltr;
+            background: transparent;
+            box-shadow: none;
             display: flex;
-            flex-direction: column;
-            margin: auto;
+            justify-content: space-between;
+            padding: 8px 0;
+        }
+
+        .toolbox-content,
+        .toolbox-content-wrapper,
+        .toolbox-content-items {
+            box-sizing: border-box;
             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,7 +65,6 @@ $errorColor: #c61600;
 
 // Popover colors
 $popoverFontColor: #ffffff !important;
-$popupSliderColor: #0376da;
 
 // Toolbar
 $toolbarBackground: rgba(0, 0, 0, 0.5);

debian/jitsi-meet-web.install

@@ -8,7 +8,6 @@ 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|connection_optimization|.well-known)/(.*)$
+    location ~ ^/(libs|css|static|images|fonts|lang|sounds|.well-known)/(.*)$
     {
         add_header 'Access-Control-Allow-Origin' '*';
         alias /usr/share/jitsi-meet/$1/$2;

index.html

@@ -182,8 +182,6 @@
             '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>

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.4):
+  - react-native-webrtc (106.0.6):
     - JitsiWebRTC (~> 106.0.0)
     - React-Core
   - react-native-webview (11.15.1):
@@ -465,13 +465,11 @@ 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.8.0):
+  - RNGestureHandler (2.9.0):
     - React-Core
   - RNGoogleSignin (7.0.4):
     - GoogleSignIn (~> 6.0.0)
@@ -547,7 +545,6 @@ 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`)
@@ -682,8 +679,6 @@ 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:
@@ -759,7 +754,7 @@ SPEC CHECKSUMS:
   react-native-slider: 6e9b86e76cce4b9e35b3403193a6432ed07e0c81
   react-native-splash-screen: 4312f786b13a81b5169ef346d76d33bc0c6dc457
   react-native-video: bb6f12a7198db53b261fefb5d609dc77417acc8b
-  react-native-webrtc: 4522d420ead45fff83c4ecc7e5a706797857a185
+  react-native-webrtc: 22ac6c64a1e38552bb173dde81ffea6979a58ef3
   react-native-webview: ea4899a1056c782afa96dd082179a66cbebf5504
   React-perflogger: 0458a87ea9a7342079e7a31b0d32b3734fb8415f
   React-RCTActionSheet: 22538001ea2926dea001111dd2846c13a0730bc9
@@ -776,10 +771,9 @@ SPEC CHECKSUMS:
   RNCalendarEvents: 7e65eb4a94f53c1744d1e275f7fafcfaa619f7a3
   RNCAsyncStorage: 005c0e2f09575360f142d0d1f1f15e4ec575b1af
   RNCClipboard: 41d8d918092ae8e676f18adada19104fa3e68495
-  RNCMaskedView: c298b644a10c0c142055b3ae24d83879ecb13ccd
   RNDefaultPreference: 08bdb06cfa9188d5da97d4642dac745218d7fb31
   RNDeviceInfo: 0400a6d0c94186d1120c3cbd97b23abc022187a9
-  RNGestureHandler: 62232ba8f562f7dea5ba1b3383494eb5bf97a4d3
+  RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39
   RNGoogleSignin: c4381751eefd73c552b923ba347a9bfc6f18771c
   RNScreens: 40a2cb40a02a609938137a1e0acfbf8fc9eebf19
   RNSound: 27e8268bdb0a1f191f219a33267f7e0445e8d62f

ios/sdk/src/JitsiMeetView.m

@@ -40,19 +40,10 @@ 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 initWithXXX];
+        [self doInitialize];
     }
 
     return self;
@@ -61,7 +52,7 @@ static NSString *const PiPEnabledFeatureFlag = @"pip.enabled";
 - (instancetype)initWithFrame:(CGRect)frame {
     self = [super initWithFrame:frame];
     if (self) {
-        [self initWithXXX];
+        [self doInitialize];
     }
 
     return self;
@@ -71,9 +62,9 @@ static NSString *const PiPEnabledFeatureFlag = @"pip.enabled";
  * Internal initialization:
  *
  * - sets the background color
- * - initializes the external API scope
+ * - registers necessary observers
  */
-- (void)initWithXXX {
+- (void)doInitialize {
     // 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,6 +7,7 @@
     "cs": "Čeština",
     "da": "Dansk",
     "de": "Deutsch",
+    "dsb": "Dolnoserbšćina",
     "el": "Ελληνικά",
     "en": "English",
     "enGB": "English (United Kingdom)",

lang/main-de.json

@@ -916,6 +916,7 @@
         "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",
@@ -1285,6 +1286,7 @@
         "grantModerator": "Moderationsrechte vergeben",
         "hideSelfView": "Eigene Ansicht ausblenden",
         "kick": "Hinauswerfen",
+        "mirrorVideo": "Mein Video spiegeln",
         "moderator": "Moderation",
         "mute": "Person ist stumm geschaltet",
         "muted": "Stummgeschaltet",

lang/main-nl.json

@@ -882,6 +882,7 @@
             "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",
@@ -889,6 +890,7 @@
             "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",
@@ -938,6 +940,7 @@
         "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",
@@ -948,6 +951,7 @@
         "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": "Escreva aqui a sua mensagem",
+        "fieldPlaceHolder": "Aa",
         "lobbyChatMessageTo": "Mensagem de chat na sala de espera para {{recipient}}",
         "message": "Mensagem",
         "messageAccessibleTitle": "{{user}} disse:",
@@ -147,6 +147,7 @@
         "bridgeCount": "Servidores: ",
         "codecs": "Codecs (A/V): ",
         "connectedTo": "Ligado a:",
+        "e2eeVerified": "E2EE verificada:",
         "framerate": "Taxa de frames:",
         "less": "Mostrar menos",
         "localaddress": "Endereço local:",
@@ -266,7 +267,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 aqui",
+        "enterDisplayName": "Digite o seu nome",
         "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}}?",
@@ -408,6 +409,10 @@
         "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.",
@@ -437,9 +442,6 @@
         "noResults": "Não foram encontrados resultados :(",
         "search": "Procurar no GIPHY"
     },
-    "helpView": {
-        "title": "Centro de ajuda"
-    },
     "incomingCall": {
         "answer": "Responder",
         "audioCallTitle": "Chamada recebida",
@@ -563,7 +565,6 @@
     "lobby": {
         "admit": "Aceitar",
         "admitAll": "Aceitar todos",
-        "allow": "Permitir",
         "backToKnockModeButton": "Peça para aderir",
         "chat": "Chat",
         "dialogTitle": "Modo sala de espera",
@@ -649,6 +650,8 @@
         "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",
@@ -709,6 +712,8 @@
         "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",
@@ -858,9 +863,6 @@
         "rejected": "Rejeitado",
         "ringing": "Tocando..."
     },
-    "privacyView": {
-        "title": "Privacidade"
-    },
     "profile": {
         "avatar": "avatar",
         "setDisplayNameLabel": "Definir seu nome de exibição",
@@ -914,6 +916,7 @@
         "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",
@@ -964,7 +967,7 @@
         "incomingMessage": "Receber uma mensagem",
         "language": "Idioma",
         "loggedIn": "Sessão iniciada como {{name}}",
-        "maxStageParticipants": "Número máximo de participantes que podem ser afixados",
+        "maxStageParticipants": "Número máximo de participantes que podem ser afixados (EXPERIMENTAL)",
         "microphones": "Microfones",
         "moderator": "Moderador",
         "more": "Mais",
@@ -983,7 +986,7 @@
         "sounds": "Sons",
         "speakers": "Participantes",
         "startAudioMuted": "Todos começam com microfone desligado",
-        "startReactionsMuted": "Sons de reação silenciados para todos",
+        "startReactionsMuted": "Todos começam com os sons de reação desativados",
         "startVideoMuted": "Todos começam com câmara desligada",
         "talkWhileMuted": "Falar com o microfone desligado",
         "title": "Definições"
@@ -1003,6 +1006,7 @@
         "displayName": "Nome de exibição",
         "displayNamePlaceholderText": "Ex: João Dias",
         "email": "Email",
+        "emailPlaceholderText": "email@example.com",
         "goTo": "Ir para",
         "header": "Configurações",
         "help": "Ajuda",
@@ -1291,6 +1295,7 @@
         "show": "Mostrar no palco",
         "showSelfView": "Mostrar autovisualização",
         "unpinFromStage": "Desafixar",
+        "verify": "Verificar participante",
         "videoMuted": "Câmara desativada",
         "videomute": "Participante parou a câmara"
     },
@@ -1358,6 +1363,7 @@
         "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",
@@ -1366,6 +1372,7 @@
         "settings": "Definições",
         "startMeeting": "Iniciar reunião",
         "terms": "Termos",
-        "title": "Videoconferências mais seguras, flexíveis e totalmente gratuitas"
+        "title": "Videoconferências mais seguras, flexíveis e totalmente gratuitas",
+        "upcomingMeetings": "As suas próximas reuniões"
     }
 }

lang/main.json

@@ -184,13 +184,21 @@
     "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."
     },
@@ -203,6 +211,12 @@
         "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",
@@ -438,6 +452,11 @@
         "veryBad": "Very Bad",
         "veryGood": "Very Good"
     },
+    "filmstrip": {
+        "accessibilityLabel": {
+            "heading": "Video thumbnails"
+        }
+    },
     "giphy": {
         "noResults": "No results found :(",
         "search": "Search GIPHY"
@@ -751,6 +770,7 @@
         "headings": {
             "lobby": "Lobby ({{count}})",
             "participantsList": "Meeting participants ({{count}})",
+            "visitors": "Visitors ({{count}})",
             "waitingLobby": "Waiting in lobby ({{count}})"
         },
         "search": "Search participants",
@@ -758,6 +778,7 @@
     },
     "passwordDigitsOnly": "Up to {{number}} digits",
     "passwordSetRemotely": "Set by another participant",
+    "pinParticipant": "{{participantName}} - Pin",
     "pinnedParticipant": "The participant is pinned",
     "polls": {
         "answer": {
@@ -916,6 +937,7 @@
         "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",
@@ -1080,6 +1102,7 @@
             "giphy": "Toggle GIPHY menu",
             "grantModerator": "Grant Moderator Rights",
             "hangup": "Leave the meeting",
+            "heading": "Toolbar",
             "help": "Help",
             "invite": "Invite people",
             "kick": "Kick participant",
@@ -1233,6 +1256,7 @@
         "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.",
@@ -1271,9 +1295,11 @@
         "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"
+        "standardDefinition": "Standard definition",
+        "streaming": "Streaming in progress"
     },
     "videothumbnail": {
         "connectionInfo": "Connection Info",
@@ -1285,6 +1311,7 @@
         "grantModerator": "Grant Moderator Rights",
         "hideSelfView": "Hide self view",
         "kick": "Kick out",
+        "mirrorVideo": "Mirror my video",
         "moderator": "Moderator",
         "mute": "Participant is muted",
         "muted": "Muted",
@@ -1322,6 +1349,7 @@
         "webAssemblyWarning": "WebAssembly not supported",
         "webAssemblyWarningDescription": "WebAssembly disabled or not supported by this browser"
     },
+    "visitorsLabel": "Number of visitors: {{count}}",
     "volumeSlider": "Volume slider",
     "welcomepage": {
         "accessibilityLabel": {
@@ -1373,5 +1401,10 @@
         "terms": "Terms",
         "title": "Secure, fully featured, and completely free video conferencing",
         "upcomingMeetings": "Your upcoming meetings"
+    },
+    "whiteboard": {
+        "accessibilityLabel": {
+            "heading": "Whiteboard"
+        }
     }
 }

modules/API/API.js

@@ -71,8 +71,13 @@ 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 } from '../../react/features/filmstrip/actions.web';
-import { isStageFilmstripAvailable } from '../../react/features/filmstrip/functions.web';
+import {
+    addStageParticipant,
+    resizeFilmStrip,
+    setVolume,
+    togglePinStageParticipant
+} from '../../react/features/filmstrip/actions.web';
+import { getPinnedActiveParticipants, isStageFilmstripAvailable } from '../../react/features/filmstrip/functions.web';
 import { invite } from '../../react/features/invite';
 import {
     selectParticipantInLargeVideo
@@ -241,6 +246,22 @@ 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);
 
@@ -254,7 +275,7 @@ function initCommands() {
 
             const participantId = participant.id;
 
-            if (isStageFilmstripAvailable(APP.store.getState())) {
+            if (isStageFilmstripAvailable(state)) {
                 APP.store.dispatch(addStageParticipant(participantId, true));
             } else {
                 APP.store.dispatch(pinParticipant(participantId));
@@ -1208,6 +1229,22 @@ 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.
      *
@@ -1941,6 +1978,21 @@ 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,6 +127,7 @@ const events = {
     'mouse-enter': 'mouseEnter',
     'mouse-leave': 'mouseLeave',
     'mouse-move': 'mouseMove',
+    'notification-triggered': 'notificationTriggered',
     'outgoing-message': 'outgoingMessage',
     'participant-joined': 'participantJoined',
     'participant-kicked-out': 'participantKickedOut',
@@ -140,6 +141,7 @@ 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',
@@ -391,7 +393,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';
+        this._frame.sandbox = 'allow-scripts allow-same-origin allow-popups allow-forms allow-downloads';
         this._frame.setAttribute('allowFullScreen', 'true');
         this._frame.style.border = 0;
 

modules/UI/etherpad/Etherpad.js

@@ -8,39 +8,6 @@ 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.
@@ -68,7 +35,7 @@ class Etherpad extends LargeContainer {
 
         iframe.id = 'etherpadIFrame';
         iframe.src = url;
-        iframe.frameBorder = 0;
+        iframe.style.border = 0;
         iframe.scrolling = 'no';
         iframe.width = DEFAULT_WIDTH;
         iframe.height = DEFAULT_HEIGHT;
@@ -76,26 +43,6 @@ 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/LargeVideoManager.js

@@ -14,11 +14,13 @@ import { i18next } from '../../../react/features/base/i18n';
 import { JitsiTrackEvents } from '../../../react/features/base/lib-jitsi-meet';
 import { VIDEO_TYPE } from '../../../react/features/base/media';
 import {
+    getLocalParticipant,
     getParticipantById,
     getParticipantDisplayName,
     isLocalScreenshareParticipant,
     isScreenShareParticipant
 } from '../../../react/features/base/participants';
+import { getHideSelfView } from '../../../react/features/base/settings/functions.any';
 import {
     getVideoTrackByParticipant,
     trackStreamingStatusChanged
@@ -232,6 +234,10 @@ export default class LargeVideoManager {
 
         preUpdate.then(() => {
             const { id, stream, videoType, resolve } = this.newStreamData;
+            const state = APP.store.getState();
+            const shouldHideSelfView = getHideSelfView(state);
+            const localId = getLocalParticipant(state)?.id;
+
 
             // FIXME this does not really make sense, because the videoType
             // (camera or desktop) is a completely different thing than
@@ -245,13 +251,16 @@ export default class LargeVideoManager {
             // eslint-disable-next-line no-shadow
             const container = this.getCurrentContainer();
 
+            if (shouldHideSelfView && localId === id) {
+                return container.hide();
+            }
+
             container.setStream(id, stream, videoType);
 
             // change the avatar url on large
             this.updateAvatar();
 
             const isVideoMuted = !stream || stream.isMuted();
-            const state = APP.store.getState();
             const participant = getParticipantById(state, id);
             const videoTrack = getVideoTrackByParticipant(state, participant);
 

package.json

@@ -20,15 +20,13 @@
     "@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.1.2",
+    "@giphy/js-fetch-api": "4.7.1",
     "@giphy/react-components": "5.6.0",
     "@giphy/react-native-sdk": "1.7.0",
     "@hapi/bourne": "2.0.0",
@@ -46,7 +44,6 @@
     "@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",
@@ -58,6 +55,7 @@
     "@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",
@@ -79,7 +77,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/v1574.0.0+4d6873c2/lib-jitsi-meet.tgz",
+    "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1586.0.0+df2c3096/lib-jitsi-meet.tgz",
     "lodash": "4.17.21",
     "moment": "2.29.4",
     "moment-duration-format": "2.2.2",
@@ -97,11 +95,10 @@
     "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.8.0",
+    "react-native-gesture-handler": "2.9.0",
     "react-native-get-random-values": "1.7.2",
     "react-native-immersive": "2.0.0",
     "react-native-keep-awake": "4.0.0",
@@ -119,7 +116,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.4",
+    "react-native-webrtc": "106.0.6",
     "react-native-webview": "11.15.1",
     "react-native-youtube-iframe": "2.2.1",
     "react-redux": "7.1.0",
@@ -147,11 +144,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",
@@ -166,20 +163,18 @@
     "circular-dependency-plugin": "5.2.0",
     "clean-css-cli": "4.3.0",
     "css-loader": "3.6.0",
-    "eslint": "8.25.0",
+    "eslint": "8.35.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 = { displayName ? null : avatarURL } />)
+                        url = { avatarURL } />)
                 </div>
                 <div
                     className = 'displayname'

react/features/app/actions.native.ts

@@ -30,12 +30,10 @@ 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 { IStore } from './types';
+import { IReloadNowOptions, IStore } from './types';
 
 export * from './actions.any';
 
@@ -46,9 +44,10 @@ 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) {
+export function appNavigate(uri?: string, options: IReloadNowOptions = {}) {
     logger.info(`appNavigate to ${uri}`);
 
     return async (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
@@ -144,7 +143,10 @@ export function appNavigate(uri?: string) {
             dispatch(createDesiredLocalTracks());
             dispatch(clearNotifications());
 
-            if (isPrejoinPageEnabled(getState())) {
+            // @ts-ignore
+            const { hidePrejoin } = options;
+
+            if (!hidePrejoin && isPrejoinPageEnabled(getState())) {
                 navigateRoot(screen.preJoin);
             } else {
                 dispatch(connect());
@@ -177,7 +179,6 @@ 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'];
@@ -188,6 +189,8 @@ export function reloadNow() {
 
         logger.info(`Reloading the conference using URL: ${locationURL}`);
 
-        dispatch(appNavigate(toURLString(newURL)));
+        dispatch(appNavigate(toURLString(newURL), {
+            hidePrejoin: true
+        }));
     };
 }

react/features/app/actions.web.ts

@@ -20,7 +20,6 @@ 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 {
@@ -222,7 +221,6 @@ 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,10 +1,7 @@
-// @flow
-
-import React, { Fragment } from 'react';
+import React from 'react';
 
 import { BaseApp } from '../../base/app';
 import { toURLString } from '../../base/util';
-import { OverlayContainer } from '../../overlay';
 import { appNavigate } from '../actions';
 import { getDefaultURL } from '../functions';
 
@@ -73,23 +70,7 @@ export class AbstractApp extends BaseApp<Props, *> {
         }
     }
 
-    /**
-     * 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<*>;
+    _createMainElement: (React.ReactElement, Object) => ?React.ReactElement;
 
     /**
      * Gets the default URL to be opened when this {@code App} mounts.

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

@@ -1,12 +1,11 @@
-// @flow
-
 import { AtlasKitThemeProvider } from '@atlaskit/theme';
-import React from 'react';
+import React, { Fragment } 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';
 
@@ -14,12 +13,30 @@ 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,5 +48,6 @@ 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

@@ -15,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,3 +56,4 @@ import '../transcribing/reducer';
 import '../video-layout/reducer';
 import '../video-quality/reducer';
 import '../videosipgw/reducer';
+import '../visitors/reducer';

react/features/app/reducers.web.ts

@@ -16,5 +16,6 @@ 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,6 +76,8 @@ 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 {
@@ -90,6 +92,7 @@ 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;
@@ -162,5 +165,11 @@ 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 = authenticationError ? 0.5 : 0;
+        progress = 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 = t('connection.FETCH_SESSION_ID');
+            messageKey = '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 = t('dialog.incorrectPassword');
+                    messageKey = 'dialog.incorrectPassword';
                 }
             } else if (name) {
-                messageKey = t('dialog.connectErrorWithMsg');
+                messageKey = 'dialog.connectErrorWithMsg';
                 messageOptions.msg = `${name} ${error.message}`;
             }
         } else if (connecting) {
-            messageKey = t('connection.CONNECTING');
+            messageKey = 'connection.CONNECTING';
         }
 
         if (messageKey) {

react/features/authentication/middleware.web.ts

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

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

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

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

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

@@ -1,5 +1,3 @@
-// @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': {
+            '&:hover, &:focus-within': {
                 backgroundColor: theme.palette.ui02,
 
                 '& .indicators': {
@@ -97,6 +97,8 @@ const useStyles = makeStyles()(theme => {
 
                 '& .actions': {
                     display: 'flex',
+                    position: 'relative',
+                    top: 'auto',
                     boxShadow: `-15px 0px 10px -5px ${theme.palette.ui02}`,
                     backgroundColor: theme.palette.ui02
                 }
@@ -154,7 +156,8 @@ const useStyles = makeStyles()(theme => {
         },
 
         actionsContainer: {
-            display: 'none',
+            position: 'absolute',
+            top: '-1000px',
             boxShadow: `-15px 0px 10px -5px ${theme.palette.ui02}`,
             backgroundColor: theme.palette.ui02
         },

react/features/base/conference/actions.ts

@@ -15,9 +15,11 @@ import {
     participantMutedUs,
     participantPresenceChanged,
     participantRoleChanged,
+    participantSourcesUpdated,
     participantUpdated
 } from '../participants/actions';
 import { getNormalizedDisplayName } from '../participants/functions';
+import { IJitsiParticipant } from '../participants/types';
 import { toState } from '../redux/functions';
 import {
     destroyLocalTracks,
@@ -128,6 +130,10 @@ function _addConferenceListeners(conference: IJitsiConference, dispatch: IStore[
         JitsiConferenceEvents.PARTICIPANT_KICKED,
         (kicker: any, kicked: any) => dispatch(participantKicked(kicker, kicked)));
 
+    conference.on(
+        JitsiConferenceEvents.PARTICIPANT_SOURCE_UPDATED,
+        (jitsiParticipant: IJitsiParticipant) => dispatch(participantSourcesUpdated(jitsiParticipant)));
+
     conference.on(
         JitsiConferenceEvents.LOCK_STATE_CHANGED, // @ts-ignore
         (...args: any[]) => dispatch(lockStateChanged(conference, ...args)));

react/features/base/conference/functions.ts

@@ -105,7 +105,8 @@ export function commonUserJoinedHandling(
             name: displayName,
             presence: user.getStatus(),
             role: user.getRole(),
-            isReplacing
+            isReplacing,
+            sources: user.getSources()
         }));
     }
 }

react/features/base/conference/reducer.ts

@@ -85,6 +85,7 @@ 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: Object = {}) {
+export function setConfig(config: IConfig = {}) {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const { locationURL } = getState()['features/base/connection'];
 
@@ -119,6 +119,26 @@ export function setConfig(config: Object = {}) {
                 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,6 +206,8 @@ 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;
@@ -336,12 +338,14 @@ export interface IConfig {
     };
     firefox_fake_device?: string;
     flags?: {
+        ssrcRewritingEnabled: boolean;
     };
     focusUserJid?: string;
     gatherStats?: boolean;
     giphy?: {
         displayMode?: 'all' | 'tile' | 'chat';
         enabled?: boolean;
+        proxyUrl?: string;
         rating?: 'g' | 'pg' | 'pg-13' | 'r';
         sdkKey?: string;
         tileTime?: number;
@@ -384,6 +388,11 @@ export interface IConfig {
     lastNLimits?: {
         [key: number]: number;
     };
+    legalUrls?: {
+        helpCentre: string;
+        privacy: string;
+        terms: string;
+    };
     liveStreaming?: {
         dataPrivacyLink?: string;
         enabled?: boolean;
@@ -392,6 +401,10 @@ export interface IConfig {
         validatorRegExpString?: string;
     };
     liveStreamingEnabled?: boolean;
+    lobby?: {
+        autoKnock?: boolean;
+        enableChat?: boolean;
+    };
     localRecording?: {
         disable?: boolean;
         disableSelfRecording?: boolean;
@@ -462,6 +475,10 @@ 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,6 +185,7 @@ export default [
     'inviteAppName',
     'liveStreaming',
     'liveStreamingEnabled',
+    'lobby',
     'localRecording',
     'localSubject',
     'logging',
@@ -209,6 +210,7 @@ export default [
     'resolution',
     'salesforceUrl',
     'screenshotCapture',
+    'securityUi',
     'speakerStats',
     'startAudioMuted',
     'startAudioOnly',

react/features/base/config/constants.ts

@@ -60,3 +60,33 @@ export const PREMEETING_BUTTONS = [ 'microphone', 'camera', 'select-background',
   * The toolbar buttons to show on 3rdParty prejoin screen.
   */
 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.
+ *
+ * @enum {string}
+ */
+
+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,7 +11,13 @@ import { parseURLParams } from '../util/parseURLParams';
 
 import { IConfig } from './configType';
 import CONFIG_WHITELIST from './configWhitelist';
-import { _CONFIG_STORE_PREFIX } from './constants';
+import {
+    DEFAULT_HELP_CENTRE_URL,
+    DEFAULT_PRIVACY_URL,
+    DEFAULT_TERMS_URL,
+    FEATURE_FLAGS,
+    _CONFIG_STORE_PREFIX
+} from './constants';
 import INTERFACE_CONFIG_WHITELIST from './interfaceConfigWhitelist';
 import logger from './logger';
 
@@ -63,6 +69,16 @@ export function getMultipleVideoSendingSupportFeatureFlag(state: IReduxState) {
     return isUnifiedPlanEnabled(state);
 }
 
+/**
+ * Selector used to get the SSRC-rewriting feature flag.
+ *
+ * @param {Object} state - The global state.
+ * @returns {boolean}
+ */
+export function getSsrcRewritingFeatureFlag(state: IReduxState) {
+    return getFeatureFlag(state, FEATURE_FLAGS.SSRC_REWRITING);
+}
+
 /**
  * Selector used to get a feature flag.
  *
@@ -306,3 +322,34 @@ 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,9 +32,16 @@ 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 } = state['features/base/config'];
+    const { toolbarButtons, customToolbarButtons } = state['features/base/config'];
+    const customButtons = customToolbarButtons?.map(({ id }) => id);
 
-    return Array.isArray(toolbarButtons) ? toolbarButtons : TOOLBAR_BUTTONS;
+    const buttons = Array.isArray(toolbarButtons) ? toolbarButtons : TOOLBAR_BUTTONS;
+
+    if (customButtons) {
+        buttons.push(...customButtons);
+    }
+
+    return buttons;
 }
 
 /**
@@ -101,3 +108,30 @@ 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,9 +52,7 @@ function _setConfig({ dispatch, getState }: IStore, next: Function, action: AnyA
     const settings = state['features/base/settings'];
     const config: IConfig = {};
 
-    // FIXME: P2P is currently temporality disabled on mobile.
-    // eslint-disable-next-line no-constant-condition
-    if (false && typeof settings.disableP2P !== 'undefined') {
+    if (typeof settings.disableP2P !== 'undefined') {
         config.p2p = { enabled: !settings.disableP2P };
     }
 

react/features/base/config/reducer.ts

@@ -57,10 +57,8 @@ 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: 'h264'
+        preferredCodec: 'vp8'
     },
 
     videoQuality: {
@@ -535,6 +533,30 @@ 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,8 +3,7 @@ import _ from 'lodash';
 import { IReduxState } from '../../app/types';
 import {
     appendURLParam,
-    getBackendSafeRoomName,
-    parseURIString
+    getBackendSafeRoomName
 } from '../util/uri';
 
 import {
@@ -145,7 +144,8 @@ export function constructOptions(state: IReduxState) {
     // redux store.
     const options = _.cloneDeep(state['features/base/config']);
 
-    let { bosh, websocket } = options;
+    const { bosh } = options;
+    let { websocket } = options;
 
     // TESTING: Only enable WebSocket for some percentage of users.
     if (websocket && navigator.product === 'ReactNative') {
@@ -154,25 +154,6 @@ 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

@@ -1,43 +0,0 @@
-// @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,5 +1,3 @@
 // @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

@@ -0,0 +1,231 @@
+/* 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,6 +5,7 @@ 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

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

@@ -1,5 +0,0 @@
-/**
- * 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,11 +5,6 @@ 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

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

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

@@ -1,172 +0,0 @@
-/* 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

@@ -1,377 +0,0 @@
-/* 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

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

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

@@ -1,72 +0,0 @@
-/* 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);
-});

react/features/base/dialog/reducer.ts

@@ -13,7 +13,6 @@ import {
 export interface IDialogState {
     component?: ComponentType;
     componentProps?: Object;
-    isNewDialog?: boolean;
     sheet?: ComponentType;
     sheetProps?: Object;
 }
@@ -44,8 +43,7 @@ ReducerRegistry.register<IDialogState>('features/base/dialog', (state = {}, acti
     case OPEN_DIALOG:
         return assign(state, {
             component: action.component,
-            componentProps: action.componentProps,
-            isNewDialog: action.isNewDialog
+            componentProps: action.componentProps
         });
 
     case HIDE_SHEET:

react/features/base/icons/components/Icon.tsx

@@ -2,9 +2,7 @@ import React, { useCallback } from 'react';
 
 // @ts-ignore
 import { Container } from '../../react/base';
-// eslint-disable-next-line lines-around-comment
-// @ts-ignore
-import { styleTypeToObject } from '../../styles';
+import { styleTypeToObject } from '../../styles/functions';
 
 interface IProps {
 
@@ -141,6 +139,8 @@ export default function Icon(props: IProps) {
         color: styleColor,
         fontSize: styleSize,
         ...restStyle
+
+        // @ts-ignore
     } = styleTypeToObject(style ?? {});
     const calculatedColor = color ?? styleColor ?? DEFAULT_COLOR;
     const calculatedSize = size ?? styleSize ?? DEFAULT_SIZE;

react/features/base/icons/svg/bell.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.5C11.5858 1.5 11.25 1.83579 11.25 2.25V3C11.25 3.01239 11.2503 3.0247 11.2509 3.03694C7.46047 3.41282 4.5 6.61068 4.5 10.5V12.0949C4.5 12.9852 4.10453 13.8296 3.42055 14.3995L3.07702 14.6858C2.55299 15.1225 2.25 15.7694 2.25 16.4515C2.25 17.7209 3.27906 18.75 4.54846 18.75H8.25C8.25 20.8211 9.92893 22.5 12 22.5C14.0711 22.5 15.75 20.8211 15.75 18.75H19.3635C20.6815 18.75 21.75 17.6815 21.75 16.3635C21.75 15.7306 21.4986 15.1236 21.051 14.676L20.3787 14.0037C19.8161 13.4411 19.5 12.678 19.5 11.8824V10.5C19.5 6.61068 16.5395 3.41282 12.7491 3.03694C12.7497 3.0247 12.75 3.01239 12.75 3V2.25C12.75 1.83579 12.4142 1.5 12 1.5ZM18 10.5C18 7.18629 15.3137 4.5 12 4.5C8.68629 4.5 6 7.18629 6 10.5V12.7974C6 13.6878 5.60453 14.5321 4.92055 15.1021L4.0373 15.8381C3.85526 15.9898 3.75 16.2146 3.75 16.4515C3.75 16.8925 4.10748 17.25 4.54846 17.25H19.3635C19.8531 17.25 20.25 16.8531 20.25 16.3635C20.25 16.1284 20.1566 15.9029 19.9904 15.7367L18.8787 14.625C18.3161 14.0624 18 13.2993 18 12.5037V10.5ZM14.25 18.75H9.75C9.75 19.9926 10.7574 21 12 21C13.2426 21 14.25 19.9926 14.25 18.75Z" fill="white"/>
+</svg>

react/features/base/icons/svg/burger.svg

@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M1.5 6.75C1.5 6.33579 1.83579 6 2.25 6H21.75C22.1642 6 22.5 6.33579 22.5 6.75C22.5 7.16421 22.1642 7.5 21.75 7.5H2.25C1.83579 7.5 1.5 7.16421 1.5 6.75Z" />
-    <path d="M1.5 17.25C1.5 16.8358 1.83579 16.5 2.25 16.5H21.75C22.1642 16.5 22.5 16.8358 22.5 17.25C22.5 17.6642 22.1642 18 21.75 18H2.25C1.83579 18 1.5 17.6642 1.5 17.25Z" />
-    <path d="M2.25 11.25C1.83579 11.25 1.5 11.5858 1.5 12C1.5 12.4142 1.83579 12.75 2.25 12.75H21.75C22.1642 12.75 22.5 12.4142 22.5 12C22.5 11.5858 22.1642 11.25 21.75 11.25H2.25Z" />
-</svg>

react/features/base/icons/svg/host.svg

@@ -1,6 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.1602 8.24439C13.3281 8.16225 14.25 7.18879 14.25 6C14.25 4.75736 13.2426 3.75 12 3.75C10.7574 3.75 9.75 4.75736 9.75 6C9.75 7.18151 10.6607 8.15032 11.8184 8.24278C11.5197 8.21896 11.2375 8.13687 10.9831 8.00775C9.85816 9.83693 8.19346 10.3318 6.74461 10.3424C6.66364 9.17333 5.68961 8.25 4.5 8.25C3.25736 8.25 2.25 9.25736 2.25 10.5C2.25 11.7426 3.25736 12.75 4.5 12.75C5.32135 12.75 6.03995 12.31 6.43279 11.6527C6.39557 11.715 6.35542 11.7754 6.31253 11.8336C6.67901 11.8506 7.06503 11.8447 7.4618 11.805C8.64456 11.6868 9.95784 11.2623 11.0918 10.2228C11.4736 9.87283 11.8205 9.46641 12.1289 9.0006C12.4727 9.47803 12.8468 9.89069 13.2474 10.2432C14.3929 11.2513 15.6592 11.6829 16.8118 11.8042C17.1152 11.8362 17.4101 11.8467 17.6932 11.8412C17.6739 11.8152 17.6551 11.7887 17.6369 11.7619C18.0415 12.3582 18.725 12.75 19.5 12.75C20.7426 12.75 21.75 11.7426 21.75 10.5C21.75 9.25736 20.7426 8.25 19.5 8.25C18.3129 8.25 17.3405 9.16938 17.256 10.335C15.9245 10.2658 14.3912 9.7053 13.1957 7.90649C12.8918 8.09752 12.5389 8.21778 12.1602 8.24439ZM12 6.75C12.4142 6.75 12.75 6.41421 12.75 6C12.75 5.58579 12.4142 5.25 12 5.25C11.5858 5.25 11.25 5.58579 11.25 6C11.25 6.41421 11.5858 6.75 12 6.75ZM20.25 10.5C20.25 10.9142 19.9142 11.25 19.5 11.25C19.0858 11.25 18.75 10.9142 18.75 10.5C18.75 10.0858 19.0858 9.75 19.5 9.75C19.9142 9.75 20.25 10.0858 20.25 10.5ZM4.5 11.25C4.91421 11.25 5.25 10.9142 5.25 10.5C5.25 10.0858 4.91421 9.75 4.5 9.75C4.08579 9.75 3.75 10.0858 3.75 10.5C3.75 10.9142 4.08579 11.25 4.5 11.25Z" />
-    <path d="M17.9485 12.1296C18.3135 12.4773 18.7952 12.7036 19.3289 12.7437L19.2591 12.9706C19.1623 13.2853 18.8715 13.5 18.5423 13.5C18.0377 13.5 17.677 13.0117 17.8254 12.5294L17.9485 12.1296Z" />
-    <path d="M12.75 18.0001C13.1642 18.0001 13.5 18.3359 13.5 18.7501C13.5 19.1643 13.1642 19.5001 12.75 19.5001H7.85792C7.19941 19.5001 6.61791 19.0706 6.42425 18.4412L4.6712 12.7437C5.20487 12.7036 5.6866 12.4773 6.05164 12.1296L7.85792 18.0001H12.75Z" />
-    <path d="M11.25 18.0002C10.8358 18.0002 10.5 18.336 10.5 18.7502C10.5 19.1644 10.8358 19.5002 11.25 19.5002H16.1421C16.8006 19.5002 17.3821 19.0707 17.5757 18.4413L19.3289 12.7437C18.7952 12.7036 18.3135 12.4773 17.9485 12.1296L16.1421 18.0002H11.25Z" />
-</svg>

react/features/base/icons/svg/index.ts

@@ -8,6 +8,7 @@ export { default as IconArrowUpLarge } from './arrow-up-large.svg';
 export { default as IconAudioOnly } from './visibility.svg';
 export { default as IconAudioOnlyOff } from './visibility-off.svg';
 export { default as IconBluetooth } from './bluetooth.svg';
+export { default as IconBell } from './bell.svg';
 export { default as IconCalendar } from './calendar.svg';
 export { default as IconCameraRefresh } from './camera-refresh.svg';
 export { default as IconCar } from './car.svg';
@@ -20,7 +21,6 @@ export { default as IconCode } from './code.svg';
 export { default as IconConnection } from './connection.svg';
 export { default as IconConnectionInactive } from './ninja.svg';
 export { default as IconCopy } from './copy.svg';
-export { default as IconCrown } from './host.svg';
 export { default as IconDeviceHeadphone } from './headset.svg';
 export { default as IconDotsHorizontal } from './dots-horizontal.svg';
 export { default as IconDownload } from './download.svg';
@@ -47,11 +47,11 @@ export { default as IconHelp } from './help.svg';
 export { default as IconHighlight } from './highlight.svg';
 export { default as IconImage } from './image.svg';
 export { default as IconInfoCircle } from './info-circle.svg';
-export { default as IconBurger } from './burger.svg';
 export { default as IconMessage } from './message.svg';
 export { default as IconMeter } from './meter.svg';
 export { default as IconMic } from './mic.svg';
 export { default as IconMicSlash } from './mic-slash.svg';
+export { default as IconModerator } from './moderator.svg';
 export { default as IconNoiseSuppressionOff } from './noise-suppression-off.svg';
 export { default as IconNoiseSuppressionOn } from './noise-suppression-on.svg';
 export { default as IconArrowRight } from './arrow-right.svg';
@@ -81,6 +81,7 @@ export { default as IconSend } from './send.svg';
 export { default as IconShare } from './share.svg';
 export { default as IconShareDoc } from './share-doc.svg';
 export { default as IconShortcuts } from './shortcuts.svg';
+export { default as IconSip } from './sip.svg';
 export { default as IconSites } from './sites.svg';
 export { default as IconStop } from './stop.svg';
 export { default as IconStopScreenshare } from './stop-screenshare.svg';
@@ -89,6 +90,7 @@ export { default as IconTileView } from './tile-view.svg';
 export { default as IconTrash } from './trash.svg';
 export { default as IconUserDeleted } from './user-deleted.svg';
 export { default as IconUsers } from './users.svg';
+export { default as IconUser } from './user.svg';
 export { default as IconVideo } from './video.svg';
 export { default as IconVideoOff } from './video-off.svg';
 export { default as IconVolumeOff } from './volume-off.svg';

react/features/base/icons/svg/meter.svg

@@ -1,10 +1,10 @@
-<svg width="38" height="12" viewBox="0 0 38 12" fill="#5E6D7A" xmlns="http://www.w3.org/2000/svg">
-<rect width="3" height="12" rx="1"/>
-<rect x="5" width="3" height="12" rx="1" />
-<rect x="10" width="3" height="12" rx="1" />
-<rect x="15" width="3" height="12" rx="1" />
-<rect x="20" width="3" height="12" rx="1" />
-<rect x="25" width="3" height="12" rx="1" />
-<rect x="30" width="3" height="12" rx="1" />
-<rect x="35" width="3" height="12" rx="1" />
+<svg width="38" height="12" viewBox="0 0 38 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="3" height="12" rx="1" />
+    <rect x="5" width="3" height="12" rx="1" />
+    <rect x="10" width="3" height="12" rx="1" />
+    <rect x="15" width="3" height="12" rx="1" />
+    <rect x="20" width="3" height="12" rx="1" />
+    <rect x="25" width="3" height="12" rx="1" />
+    <rect x="30" width="3" height="12" rx="1" />
+    <rect x="35" width="3" height="12" rx="1" />
 </svg>