fix(virtual-background) fix tainted canvas when using the CDN

When we use a CDN the images come from an origin different than the site so
unless we mark them for CORS the canvas where they are painted will be tainted.

Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

.eslintignore

@@ -6,7 +6,8 @@ build/*
 flow-typed/*
 libs/*
 resources/*
-react/features/stream-effects/blur/vendor/*
+react/features/stream-effects/virtual-background/vendor/*
+load-test/*
 
 # ESLint will by default ignore its own configuration file. However, there does
 # not seem to be a reason why we will want to risk being inconsistent with our

Makefile

@@ -5,8 +5,8 @@ LIBJITSIMEET_DIR = node_modules/lib-jitsi-meet/
 LIBFLAC_DIR = node_modules/libflacjs/dist/min/
 OLM_DIR = node_modules/olm
 RNNOISE_WASM_DIR = node_modules/rnnoise-wasm/dist/
-TFLITE_WASM = react/features/stream-effects/blur/vendor/tflite
-MEET_MODELS_DIR  = react/features/stream-effects/blur/vendor/models/
+TFLITE_WASM = react/features/stream-effects/virtual-background/vendor/tflite
+MEET_MODELS_DIR  = react/features/stream-effects/virtual-background/vendor/models/
 NODE_SASS = ./node_modules/.bin/sass
 NPM = npm
 OUTPUT_DIR = .
@@ -51,10 +51,6 @@ deploy-appbundle:
 		$(OUTPUT_DIR)/analytics-ga.js \
 		$(BUILD_DIR)/analytics-ga.min.js \
 		$(BUILD_DIR)/analytics-ga.min.map \
-		$(BUILD_DIR)/video-blur-effect.min.js \
-		$(BUILD_DIR)/video-blur-effect.min.map \
-		$(BUILD_DIR)/rnnoise-processor.min.js \
-		$(BUILD_DIR)/rnnoise-processor.min.map \
 		$(BUILD_DIR)/close3.min.js \
 		$(BUILD_DIR)/close3.min.map \
 		$(DEPLOY_DIR)

android/app/build.gradle

@@ -122,7 +122,7 @@ gradle.projectsEvaluated {
         android.applicationVariants.all { variant ->
             variant.outputs.each { output ->
                 output.getProcessManifestProvider().get().doLast {
-                    def outputDir = manifestOutputDirectory.get().asFile
+                    def outputDir = multiApkManifestOutputDirectory.get().asFile
                     def manifestPath = new File(outputDir, 'AndroidManifest.xml')
                     def charset = 'UTF-8'
                     def text

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

@@ -132,6 +132,7 @@ public class JitsiMeetOngoingConferenceService extends Service
     public void onCurrentConferenceChanged(String conferenceUrl) {
         if (conferenceUrl == null) {
             stopSelf();
+            OngoingNotification.resetStartingtime();
             JitsiMeetLogger.i(TAG + "Service stopped");
         }
     }

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

@@ -43,6 +43,7 @@ class OngoingNotification {
     private static final String CHANNEL_NAME = "Ongoing Conference Notifications";
 
     static final int NOTIFICATION_ID = new Random().nextInt(99999) + 10000;
+    private static long startingTime = 0;
 
     static void createOngoingConferenceNotificationChannel() {
         if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {
@@ -85,6 +86,10 @@ class OngoingNotification {
 
         NotificationCompat.Builder builder = new NotificationCompat.Builder(context, CHANNEL_ID);
 
+        if (startingTime == 0) {
+            startingTime = System.currentTimeMillis();
+        }
+
         builder
             .setCategory(NotificationCompat.CATEGORY_CALL)
             .setContentTitle(context.getString(R.string.ongoing_notification_title))
@@ -92,6 +97,8 @@ class OngoingNotification {
             .setPriority(NotificationCompat.PRIORITY_DEFAULT)
             .setContentIntent(pendingIntent)
             .setOngoing(true)
+            .setWhen(startingTime)
+            .setUsesChronometer(true)
             .setAutoCancel(false)
             .setVisibility(NotificationCompat.VISIBILITY_PUBLIC)
             .setOnlyAlertOnce(true)
@@ -110,6 +117,10 @@ class OngoingNotification {
         return builder.build();
     }
 
+    static void resetStartingtime() {
+        startingTime = 0;
+    }
+
     private static NotificationCompat.Action createAction(Context context, JitsiMeetOngoingConferenceService.Action action, @StringRes int titleId) {
         Intent intent = new Intent(context, JitsiMeetOngoingConferenceService.class);
         intent.setAction(action.getName());

config.js

@@ -430,7 +430,7 @@ var config = {
     //    'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
     //    'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
     //    'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts',
-    //    'tileview', 'videobackgroundblur', 'download', 'help', 'mute-everyone', 'mute-video-everyone', 'security'
+    //    'tileview', 'select-background', 'download', 'help', 'mute-everyone', 'mute-video-everyone', 'security'
     // ],
 
     // Stats

css/_atlaskit_overrides.scss

@@ -73,9 +73,17 @@
  */
  .toolbox-button-wth-dialog > div:nth-child(2) {
     max-height: calc(100vh - #{$newToolbarSizeWithPadding} - 46px);
+    margin-bottom: 4px;
     overflow-y: auto;
 }
 
+.audio-preview > div:nth-child(2),
+.video-preview > div:nth-child(2) {
+    margin-bottom: 4px;
+    outline: none;
+    padding: 0;
+}
+
 /**
  * The following selectors keep the chat modal full-size anywhere between 100px
  * and 580px for desktop or 680px for mobile.

css/_audio-preview.scss

@@ -72,7 +72,7 @@
 
                 &--selected {
                     padding-left: 18px;
-                    background: #131519;
+                    background: $newToolbarBackgroundColor;
                 }
             }
 
@@ -104,7 +104,7 @@
                 padding-left: 48px;
 
                 &--selected {
-                    background: #131519;
+                    background: $newToolbarBackgroundColor;
                     padding-left: 18px;
                 }
             }
@@ -162,10 +162,4 @@
         right: 16px;
         top: 14px;
     }
-
-    // Override @atlaskit/InlineDialog container which is made with styled components
-    & > div:nth-child(2) {
-        outline: none;
-        padding: 0;
-    }
 }

css/_drawer.scss

@@ -7,7 +7,6 @@
 }
 
 .drawer-menu {
-    padding: 0 16px;
     max-height: 50vh;
     background: #242528;
     border-radius: 16px 16px 0 0;

css/_mini_toolbox.scss

@@ -23,44 +23,10 @@
     flex-direction: row;
     left: 50%;
     position: absolute;
-    top: 10px;
+    bottom: 10px;
     transform: translateX(-50%);
-
-    .toolbox-button {
-        &:first-child {
-            .toolbox-icon {
-                border-top-left-radius: 3px;
-                border-bottom-left-radius: 3px;
-            }
-        }
-
-        &:nth-child(2) {
-            svg {
-                fill: $hangupColor;
-            }
-        }
-
-        &:last-child {
-            .toolbox-icon {
-                border-top-right-radius: 3px;
-                border-bottom-right-radius: 3px;
-            }
-        }
-    }
 }
 
 .filmstrip-toolbox {
     flex-direction: column;
-
-    .toolbox-button {
-        &:nth-child(1) {
-            svg {
-                fill: $hangupColor;
-            }
-        }
-
-        .toolbox-icon {
-            border-radius: 3px;
-        }
-    }
-}
+}

css/_settings-button.scss

@@ -25,16 +25,30 @@
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
     border-radius: 3px;
     cursor: pointer;
-    height: 18px;
+    padding: 4px;
     position: absolute;
-    text-align: center;
-    top: 0;
-    right: -4;
-    width: 18px;
+    right: -4px;
+    top: -3px;
+
+   &: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;
+        }
+
+        &.settings-button-small-icon--disabled {
+            background: #36383C;
+
+            &> svg {
+               fill: #929292;
+           }
+        }
+    }
 
     &> svg {
         fill: #fff;
-        margin-top: 5px;
     }
 
     &--disabled {
@@ -45,19 +59,4 @@
             fill: #929292;
         }
     }
-
-    &--hovered {
-        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;
-        }
-
-        &.settings-button-small-icon--disabled {
-            &> svg {
-               fill: #929292;
-           }
-        }
-    }
 }

css/_toolbars.scss

@@ -75,6 +75,7 @@
 
         &> div {
             padding: 0;
+            background: $menuBG;
         }
     }
 }
@@ -104,7 +105,7 @@
 
 
 .toolbox-content-items {
-    background: #131519;
+    background: $newToolbarBackgroundColor;
     box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
     border-radius: 6px;
     margin: 0 auto;
@@ -112,7 +113,7 @@
     text-align: center;
 
     >div {
-        margin-left: 6px;
+        margin-left: 8px;
 
         &:first-child {
             margin-left: 0;
@@ -163,7 +164,11 @@
     }
     &.disabled {
         cursor: initial;
-        color: #3b475c;
+        color: #929292;
+
+        svg {
+            fill: #929292;
+        }
     }
 
     @media (hover: hover) and (pointer: fine) {
@@ -231,6 +236,11 @@
         }
     }
 
+    @media (max-width: 320px) {
+        height: 36px;
+        width: 36px;
+    }
+
     &.toggled {
         background: $newToolbarButtonToggleColor;
     }
@@ -288,3 +298,20 @@
     }
 
 }
+
+/**
+ * On small mobile devices make the toolbar full width.
+ */
+.toolbox-content-mobile {
+    @media (max-width: 500px) {
+        margin-bottom: 0;
+
+        .toolbox-content-items {
+            border-radius: 0;
+            display: flex;
+            justify-content: space-evenly;
+            padding: 6px 0;
+            width: 100%;
+        }
+    }
+}

css/_variables.scss

@@ -38,7 +38,7 @@ $presence-idle: rgb(172, 172, 172);
 /**
  * Toolbar
  */
-$newToolbarBackgroundColor: rgba(22, 38, 55, 0.8);
+$newToolbarBackgroundColor: #131519;
 $newToolbarButtonHoverColor: rgba(255, 255, 255, 0.2);
 $newToolbarButtonToggleColor: rgba(255, 255, 255, 0.15);
 $AOTToolbarButtonHoverColor: rgba(14, 20, 35, 0.6);

css/_video-preview.scss

@@ -5,6 +5,7 @@
 
     &-container {
         background: $menuBG;
+        border-radius: 3px;
         overflow: auto;
         padding: 8px;
     }
@@ -56,26 +57,26 @@
     &-label {
         bottom: 8px;
         color: #fff;
-        overflow: hidden;
         position: absolute;
-        text-overflow: ellipsis;
-        white-space: nowrap;
         width: 100%;
         z-index: 2;
 
+        &-container {
+            margin: 0 16px;
+        }
+
         &-text {
             background-color: #131519;
             border-radius: 3px;
+            padding: 2px 8px;
             font-size: 13px;
             line-height: 20px;
-            padding: 2px 8px;
-
+            margin: 0 auto;
+            max-width: calc(100% - 16px);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            width: fit-content;
+            white-space: nowrap;
         }
     }
-
-    // Override @atlaskit/InlineDialog container which is made with styled components
-    & > div:nth-child(2) {
-        outline: none;
-        padding: 0;
-    }
 }

css/main.scss

@@ -43,6 +43,7 @@ $flagsImagePath: "../images/";
 @import 'modals/settings/settings';
 @import 'modals/speaker_stats/speaker_stats';
 @import 'modals/video-quality/video-quality';
+@import 'modals/virtual-background/virtual-background';
 @import 'modals/local-recording/local-recording';
 @import 'videolayout_default';
 @import 'notice';

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

@@ -0,0 +1,44 @@
+.virtual-background-dialog{
+  display: inline-flex;
+  cursor: pointer;
+  .thumbnail{
+    object-fit: cover;
+    padding: 5px;
+    height: 40px;
+    width: 40px;
+  }
+  .thumbnail-selected{
+    object-fit: cover;
+    padding: 5px;
+    height: 40px;
+    width: 40px;
+    border: 2px solid #a4b8d1;
+  }
+  .blur-selected{
+    border: 2px solid #a4b8d1;
+  }
+  .virtual-background-none{
+    font-weight: bold;
+    padding: 5px;
+    height: 35px;
+    width: 35px;
+    border-radius: 10px;
+    border: 1px solid #a4b8d1;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 35px;
+    margin-right: 5px;
+  }
+  .none-selected{
+    font-weight: bold;
+    padding: 5px;
+    height: 35px;
+    width: 35px;
+    border-radius: 10px;
+    border: 2px solid #a4b8d1;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 35px;
+    margin-right: 5px;
+  }
+}

interface_config.js

@@ -206,7 +206,7 @@ var interfaceConfig = {
     //     'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
     //     'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
     //     'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts',
-    //     'tileview', 'videobackgroundblur', 'download', 'help', 'mute-everyone', 'mute-video-everyone', 'security'
+    //     'tileview', 'select-background', 'download', 'help', 'mute-everyone', 'mute-video-everyone', 'security'
     // ],
 
     TOOLBAR_TIMEOUT: 4000,

ios/Podfile.lock

@@ -292,7 +292,7 @@ PODS:
     - React
   - react-native-splash-screen (3.2.0):
     - React
-  - react-native-webrtc (1.87.3):
+  - react-native-webrtc (1.89.1):
     - React-Core
   - react-native-webview (11.0.2):
     - React-Core
@@ -563,7 +563,7 @@ SPEC CHECKSUMS:
   react-native-keep-awake: eba3137546b10003361b37c761f6c429b59814ae
   react-native-netinfo: 8d8db463bcc5db66a8ac5c48a7d86beb3b92f61a
   react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
-  react-native-webrtc: dc1208bdca2c4d091f7b57859e69332bff6f1986
+  react-native-webrtc: ccb0c21eb4fb04326648fbdb4a5d49977e2cf274
   react-native-webview: b2542d6fd424bcc3e3b2ec5f854f0abb4ec86c87
   React-RCTActionSheet: bcbc311dc3b47bc8efb2737ff0940239a45789a9
   React-RCTAnimation: 65f61080ce632f6dea23d52e354ffac9948396c6

ios/app/src/AppDelegate.m

@@ -51,7 +51,7 @@
   if ([FIRUtilities appContainsRealServiceInfoPlist]) {
         NSLog(@"Enabling Firebase");
         [FIRApp configure];
-        // Crashlytics defaults to disabled wirth the FirebaseCrashlyticsCollectionEnabled Info.plist key.
+        // Crashlytics defaults to disabled with the FirebaseCrashlyticsCollectionEnabled Info.plist key.
         [[FIRCrashlytics crashlytics] setCrashlyticsCollectionEnabled:![jitsiMeet isCrashReportingDisabled]];
     }
 

ios/ci/build-ipa.sh

@@ -35,7 +35,7 @@ fi
 
 echo "PR_REPO_SLUG=${PR_REPO_SLUG} PR_BRANCH=${PR_BRANCH}"
 
-# do the marge and git log
+# do the merge and git log
 
 if [ $PR_BRANCH != "master" ]; then
     echo "Will merge ${PR_REPO_SLUG}/${PR_BRANCH} into master"

ios/ci/setup-certificates.sh

@@ -90,7 +90,7 @@ echo "importing dev-key.p12"
 security import ${CERT_DIR}/dev-key.p12 -k ios-build.keychain -P $IOS_SIGNING_CERT_PASSWORD -A
 
 echo "will set-key-partition-list"
-# Fix for OS X Sierra that hungs in the codesign step
+# Fix for OS X Sierra that hangs in the codesign step
 security set-key-partition-list -S apple-tool:,apple: -s -k $ENCRYPTION_PASSWORD ios-build.keychain > /dev/null
 echo "done set-key-partition-list"
 

ios/sdk/src/JitsiMeetView.m

@@ -184,7 +184,7 @@ static void initializeViewsMap() {
     // conference. However, React and, respectively,
     // appProperties/initialProperties are declarative expressions i.e. one and
     // the same URL will not trigger an automatic re-render in the JavaScript
-    // source code. The workaround implemented bellow introduces imperativeness
+    // source code. The workaround implemented below introduces imperativeness
     // in React Component props by defining a unique value per invocation.
     props[@"timestamp"] = @(mach_absolute_time());
 

ios/sdk/src/callkit/JMCallKitEmitter.swift

@@ -76,7 +76,7 @@ internal final class JMCallKitEmitter: NSObject, CXProviderDelegate {
 
         // Avoid mute actions ping-pong: if the mute action was caused by
         // the JS side (we requested a transaction) don't call the delegate
-        // method. If it was called by the provder itself (when the user presses
+        // method. If it was called by the provider itself (when the user presses
         // the mute button in the CallKit view) then call the delegate method.
         //
         // NOTE: don't try to be clever and remove this. Been there, done that.

ios/sdk/src/picture-in-picture/PiPViewCoordinator.swift

@@ -29,7 +29,7 @@ public protocol PiPViewCoordinatorDelegate: class {
 /// when is presented in Picure in Picture mode.
 public class PiPViewCoordinator {
 
-    /// Limits the boundries of view position on screen when minimized
+    /// Limits the boundaries of view position on screen when minimized
     public var dragBoundInsets: UIEdgeInsets = UIEdgeInsets(top: 25,
                                                             left: 5,
                                                             bottom: 5,

ios/travis-ci/build-ipa.sh

@@ -60,7 +60,7 @@ fi
 
 echo "PR_REPO_SLUG=${PR_REPO_SLUG} PR_BRANCH=${PR_BRANCH}"
 
-# do the marge and git log
+# do the merge and git log
 
 if [ $PR_BRANCH != "master" ]; then
     echo "Will merge ${PR_REPO_SLUG}/${PR_BRANCH} into master"

lang/main.json

@@ -332,6 +332,11 @@
     "embedMeeting": {
         "title": "Embed this meeting"
     },
+    "virtualBackground": {
+        "title": "Backgrounds",
+        "enableBlur": "Enable blur",
+        "removeBackground": "Remove background"
+    },
     "feedback": {
         "average": "Average",
         "bad": "Bad",
@@ -748,7 +753,7 @@
             "toggleCamera": "Toggle camera",
             "toggleFilmstrip": "Toggle filmstrip",
             "videomute": "Toggle mute video",
-            "videoblur": "Toggle video blur"
+            "selectBackground": "Select Background"
         },
         "addPeople": "Add people to your call",
         "audioSettings": "Audio settings",
@@ -810,9 +815,7 @@
         "tileViewToggle": "Toggle tile view",
         "toggleCamera": "Toggle camera",
         "videomute": "Start / Stop camera",
-        "videoSettings": "Video settings",
-        "startvideoblur": "Blur my background",
-        "stopvideoblur": "Disable background blur"
+        "selectBackground": "Select background"
     },
     "transcribing": {
         "ccButtonTooltip": "Start / Stop subtitles",

modules/API/external/external_api.js

@@ -197,7 +197,7 @@ function parseArguments(args) {
  * @param {any} value - The value to be parsed.
  * @returns {string|undefined} The parsed value that can be used for setting
  * sizes through the style property. If invalid value is passed the method
- * retuns undefined.
+ * returns undefined.
  */
 function parseSizeParam(value) {
     let parsedValue;

modules/UI/authentication/AuthHandler.js

@@ -63,7 +63,7 @@ function doExternalAuth(room, lockPassword) {
 
 /**
  * Redirect the user to the token authentication service for the login to be
- * performed. Once complete it is expected that the service wil bring the user
+ * performed. Once complete it is expected that the service will bring the user
  * back with "?jwt={the JWT token}" query parameter added.
  * @param {string} [roomName] the name of the conference room.
  */
@@ -76,7 +76,7 @@ function redirectToTokenAuthService(roomName) {
 /**
  * Initializes 'message' listener that will wait for a JWT token to be received
  * from the token authentication service opened in a popup window.
- * @param room the name fo the conference room.
+ * @param room the name of the conference room.
  */
 function initJWTTokenListener(room) {
     /**
@@ -108,7 +108,7 @@ function initJWTTokenListener(room) {
                     roomName, APP.conference._getConferenceOptions());
 
                 // Authenticate from the new connection to get
-                // the session-ID from the focus, which wil then be used
+                // the session-ID from the focus, which will then be used
                 // to upgrade current connection's user role
 
                 newRoom.room.moderator.authenticate()
@@ -116,7 +116,7 @@ function initJWTTokenListener(room) {
                     connection.disconnect();
 
                     // At this point we'll have session-ID stored in
-                    // the settings. It wil be used in the call below
+                    // the settings. It will be used in the call below
                     // to upgrade user's role
                     room.room.moderator.authenticate()
                         .then(() => {

modules/UI/shared_video/SharedVideo.js

@@ -498,7 +498,7 @@ export default class SharedVideoManager {
      * Receives events for local audio mute/unmute by local user.
      * @param muted boolena whether it is muted or not.
      * @param {boolean} indicates if this mute was a result of user interaction,
-     * i.e. pressing the mute button or it was programatically triggerred
+     * i.e. pressing the mute button or it was programmatically triggered
      */
     onLocalAudioMuted(muted, userInteraction) {
         if (!this.player) {

modules/UI/util/UIUtil.js

@@ -37,7 +37,7 @@ const UIUtil = {
      * @param {string} url - The redirect URL.
      * NOTE: Currently used to redirect to 3rd party location for
      * authentication. In most cases redirectWithStoredParams action must be
-     * used instead of this method in order to preserve curent URL params.
+     * used instead of this method in order to preserve current URL params.
      */
     redirect(url) {
         window.location.href = url;

modules/UI/videolayout/SmallVideo.js

@@ -350,7 +350,7 @@ export default class SmallVideo {
     }
 
     /**
-     * Initalizes any browser specific properties. Currently sets the overflow
+     * Initializes any browser specific properties. Currently sets the overflow
      * property for Qt browsers on Windows to hidden, thus fixing the following
      * problem:
      * Some browsers don't have full support of the object-fit property for the
@@ -428,9 +428,9 @@ export default class SmallVideo {
     _shouldTriggerPin(event) {
         // TODO Checking the classes is a workround to allow events to bubble into
         // the DisplayName component if it was clicked. React's synthetic events
-        // will fire after jQuery handlers execute, so stop propogation at this
+        // will fire after jQuery handlers execute, so stop propagation at this
         // point will prevent DisplayName from getting click events. This workaround
-        // should be removeable once LocalVideo is a React Component because then
+        // should be removable once LocalVideo is a React Component because then
         // the components share the same eventing system.
         const $source = $(event.target || event.srcElement);
 

modules/UI/videolayout/VideoContainer.js

@@ -46,7 +46,7 @@ function computeDesktopVideoSize( // eslint-disable-line max-params
         videoSpaceWidth,
         videoSpaceHeight) {
     if (videoWidth === 0 || videoHeight === 0 || videoSpaceWidth === 0 || videoSpaceHeight === 0) {
-        // Avoid NaN values caused by devision by 0.
+        // Avoid NaN values caused by division by 0.
         return [ 0, 0 ];
     }
 
@@ -94,7 +94,7 @@ function computeCameraVideoSize( // eslint-disable-line max-params
         videoSpaceHeight,
         videoLayoutFit) {
     if (videoWidth === 0 || videoHeight === 0 || videoSpaceWidth === 0 || videoSpaceHeight === 0) {
-        // Avoid NaN values caused by devision by 0.
+        // Avoid NaN values caused by division by 0.
         return [ 0, 0 ];
     }
 
@@ -411,7 +411,7 @@ export class VideoContainer extends LargeContainer {
         const [ width, height ] = this._getVideoSize(containerWidth, containerHeight);
 
         if (width === 0 || height === 0) {
-            // We don't need to set 0 for width or height since the visibility is controled by the visibility css prop
+            // We don't need to set 0 for width or height since the visibility is controlled by the visibility css prop
             // on the largeVideoElementsContainer. Also if the width/height of the video element is 0 the attached
             // stream won't be played. Normally if we attach a new stream we won't resize the video element until the
             // stream has been played. But setting width/height to 0 will prevent the video from playing.

modules/UI/videolayout/VideoLayout.js

@@ -596,7 +596,7 @@ const VideoLayout = {
         localVideoThumbnail && localVideoThumbnail.updateDOMLocation();
         VideoLayout.resizeVideoArea();
 
-        // Rerender the thumbnails since they are dependant on the layout because of the tooltip positioning.
+        // Rerender the thumbnails since they are dependent on the layout because of the tooltip positioning.
         localVideoThumbnail && localVideoThumbnail.rerender();
         Object.values(remoteVideos).forEach(remoteVideoThumbnail => remoteVideoThumbnail.rerender());
     },

package-lock.json

@@ -2586,9 +2586,9 @@
       }
     },
     "@jitsi/js-utils": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@jitsi/js-utils/-/js-utils-1.0.5.tgz",
-      "integrity": "sha512-1APQyuqQaYDR+W7cdgzsaBo6x8dpF8sfelcBf3ngNU3Jd+DzuuwUvCMTbr2+cCuy6w59ZAuQ7e2ixCnnOXOW4Q==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@jitsi/js-utils/-/js-utils-1.0.6.tgz",
+      "integrity": "sha512-XdLvgzhEhMsrzHBDgBydvWneGXSZ8ycg+dEK9bs2CLQhH5A9cHOOToDl9p/skts7WHQp4C8nkhsNzWC/cRvszQ==",
       "requires": {
         "bowser": "2.7.0",
         "js-md5": "0.7.3"
@@ -10265,8 +10265,8 @@
       }
     },
     "lib-jitsi-meet": {
-      "version": "github:jitsi/lib-jitsi-meet#0ec072378c84206b90f0e001e34cf4d746384cc5",
-      "from": "github:jitsi/lib-jitsi-meet#0ec072378c84206b90f0e001e34cf4d746384cc5",
+      "version": "github:jitsi/lib-jitsi-meet#676c7a910505833810314a665ad1e825a158850c",
+      "from": "github:jitsi/lib-jitsi-meet#676c7a910505833810314a665ad1e825a158850c",
       "requires": {
         "@jitsi/js-utils": "1.0.2",
         "@jitsi/sdp-interop": "1.0.3",
@@ -14077,8 +14077,8 @@
       "integrity": "sha512-iqdJ1KpZbR4XGahgVmaeibB7kDhyMT7wrylINgJaYBY38IAiI0LF32VX1umO4pko6n21YF5I/kSeNQ+OXGqqow=="
     },
     "react-native-webrtc": {
-      "version": "github:react-native-webrtc/react-native-webrtc#1066b92d48048d67ff23288d68ab1734ec364cab",
-      "from": "github:react-native-webrtc/react-native-webrtc#1066b92d48048d67ff23288d68ab1734ec364cab",
+      "version": "github:react-native-webrtc/react-native-webrtc#1343580c0322f265ff0fb22722ac5501c5fd77ad",
+      "from": "github:react-native-webrtc/react-native-webrtc#1343580c0322f265ff0fb22722ac5501c5fd77ad",
       "requires": {
         "base64-js": "^1.1.2",
         "cross-os": "^1.3.0",

package.json

@@ -32,7 +32,7 @@
     "@atlaskit/theme": "11.0.2",
     "@atlaskit/toggle": "12.0.3",
     "@atlaskit/tooltip": "17.1.2",
-    "@jitsi/js-utils": "1.0.5",
+    "@jitsi/js-utils": "1.0.6",
     "@microsoft/microsoft-graph-client": "1.1.0",
     "@react-native-async-storage/async-storage": "1.13.2",
     "@react-native-community/google-signin": "3.0.1",
@@ -55,7 +55,7 @@
     "jquery-i18next": "1.2.1",
     "js-md5": "0.6.1",
     "jwt-decode": "2.2.0",
-    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#0ec072378c84206b90f0e001e34cf4d746384cc5",
+    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#676c7a910505833810314a665ad1e825a158850c",
     "libflacjs": "github:mmig/libflac.js#93d37e7f811f01cf7d8b6a603e38bd3c3810907d",
     "lodash": "4.17.21",
     "moment": "2.29.1",
@@ -84,7 +84,7 @@
     "react-native-svg-transformer": "0.14.3",
     "react-native-url-polyfill": "1.2.0",
     "react-native-watch-connectivity": "0.4.3",
-    "react-native-webrtc": "github:react-native-webrtc/react-native-webrtc#1066b92d48048d67ff23288d68ab1734ec364cab",
+    "react-native-webrtc": "github:react-native-webrtc/react-native-webrtc#1343580c0322f265ff0fb22722ac5501c5fd77ad",
     "react-native-webview": "11.0.2",
     "react-native-youtube-iframe": "1.2.3",
     "react-redux": "7.1.0",

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

@@ -48,7 +48,7 @@ export default class Toolbar extends Component<Props> {
 
         return (
             <div
-                className = { `always-on-top-toolbox ${className}` }
+                className = { `toolbox-content-items always-on-top-toolbox ${className}` }
                 onMouseOut = { onMouseOut }
                 onMouseOver = { onMouseOver }>
                 <AudioMuteButton />

react/features/app/reducers.any.js

@@ -25,7 +25,6 @@ import '../base/testing/reducer';
 import '../base/tracks/reducer';
 import '../base/user-interaction/reducer';
 import '../billing-counter/reducer';
-import '../blur/reducer';
 import '../calendar-sync/reducer';
 import '../chat/reducer';
 import '../deep-linking/reducer';

react/features/app/reducers.web.js

@@ -12,5 +12,5 @@ import '../remote-control/reducer';
 import '../screenshot-capture/reducer';
 import '../shared-video/reducer';
 import '../talk-while-muted/reducer';
-
+import '../virtual-background/reducer';
 import './reducers.any';

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

@@ -55,6 +55,6 @@ export default {
         button: 'rgb(255, 255, 255)',
         buttonToggled: 'rgb(38, 58, 76)',
         buttonToggledBorder: getRGBAFormat('#a4b8d1', 0.6),
-        hangup: 'rgb(225, 45, 45)'
+        hangup: 'rgb(227,79,86)'
     }
 };

react/features/base/config/constants.js

@@ -18,5 +18,6 @@ export const TOOLBAR_BUTTONS = [
     'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
     'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
     'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts',
-    'tileview', 'videobackgroundblur', 'download', 'help', 'mute-everyone', 'mute-video-everyone', 'security'
+    'tileview', 'select-background', 'download', 'help', 'mute-everyone', 'mute-video-everyone',
+    'security', 'toggle-camera'
 ];

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

@@ -43,7 +43,11 @@ export const bottomSheetStyles = {
         alignItems: 'stretch',
         flex: 1,
         flexDirection: 'column',
-        justifyContent: 'flex-end'
+        justifyContent: 'flex-end',
+        maxWidth: 500,
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        width: '100%'
     },
 
     sheetItemContainer: {

react/features/base/flags/constants.js

@@ -11,7 +11,7 @@ export const ADD_PEOPLE_ENABLED = 'add-people.enabled';
  * Used by apps that do not use Jitsi audio.
  * Default: disabled (false)
  */
-export const ANDROID_AUDIO_FOCUS_DISABLED = 'android.audio-focus.disabled';
+export const AUDIO_FOCUS_DISABLED = 'audio-focus.disabled';
 
 /**
  * Flag indicating if the audio mute button should be displayed.

react/features/base/icons/svg/arrow_up.svg

@@ -1,3 +1,3 @@
 <svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.41115 6.05746C8.71903 6.39955 9.24594 6.42729 9.58803 6.1194C9.93012 5.81152 9.95786 5.28461 9.64997 4.94252L5.72917 0.562752C5.39813 0.194935 4.82138 0.194935 4.49034 0.562752L0.63061 4.94252C0.322728 5.28461 0.35046 5.81152 0.692552 6.1194C1.03464 6.42729 1.56155 6.39955 1.86943 6.05746L5.10975 2.36593L8.41115 6.05746Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.41115 6.05746C8.71903 6.39955 9.24594 6.42729 9.58803 6.1194C9.93012 5.81152 9.95786 5.28461 9.64997 4.94252L5.72917 0.562752C5.39813 0.194935 4.82138 0.194935 4.49034 0.562752L0.63061 4.94252C0.322728 5.28461 0.35046 5.81152 0.692552 6.1194C1.03464 6.42729 1.56155 6.39955 1.86943 6.05746L5.10975 2.36593L8.41115 6.05746Z" />
 </svg>

react/features/base/icons/svg/blur-background.svg

@@ -1,3 +1,3 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 4.58333C8.75626 4.58333 9.16667 4.17293 9.16667 3.66667C9.16667 3.16041 8.75626 2.75 8.25 2.75C7.74374 2.75 7.33333 3.16041 7.33333 3.66667C7.33333 4.17293 7.74374 4.58333 8.25 4.58333ZM8.25 10.0833C9.26252 10.0833 10.0833 9.26252 10.0833 8.25C10.0833 7.23748 9.26252 6.41667 8.25 6.41667C7.23748 6.41667 6.41667 7.23748 6.41667 8.25C6.41667 9.26252 7.23748 10.0833 8.25 10.0833ZM13.75 10.0833C14.7625 10.0833 15.5833 9.26252 15.5833 8.25C15.5833 7.23748 14.7625 6.41667 13.75 6.41667C12.7375 6.41667 11.9167 7.23748 11.9167 8.25C11.9167 9.26252 12.7375 10.0833 13.75 10.0833ZM10.0833 13.75C10.0833 14.7625 9.26252 15.5833 8.25 15.5833C7.23748 15.5833 6.41667 14.7625 6.41667 13.75C6.41667 12.7375 7.23748 11.9167 8.25 11.9167C9.26252 11.9167 10.0833 12.7375 10.0833 13.75ZM8.25 19.25C8.75626 19.25 9.16667 18.8396 9.16667 18.3333C9.16667 17.8271 8.75626 17.4167 8.25 17.4167C7.74374 17.4167 7.33333 17.8271 7.33333 18.3333C7.33333 18.8396 7.74374 19.25 8.25 19.25ZM14.6667 18.3333C14.6667 18.8396 14.2563 19.25 13.75 19.25C13.2437 19.25 12.8333 18.8396 12.8333 18.3333C12.8333 17.8271 13.2437 17.4167 13.75 17.4167C14.2563 17.4167 14.6667 17.8271 14.6667 18.3333ZM3.66667 14.6667C4.17293 14.6667 4.58333 14.2563 4.58333 13.75C4.58333 13.2437 4.17293 12.8333 3.66667 12.8333C3.16041 12.8333 2.75 13.2437 2.75 13.75C2.75 14.2563 3.16041 14.6667 3.66667 14.6667ZM4.58333 8.25C4.58333 8.75626 4.17293 9.16667 3.66667 9.16667C3.16041 9.16667 2.75 8.75626 2.75 8.25C2.75 7.74374 3.16041 7.33333 3.66667 7.33333C4.17293 7.33333 4.58333 7.74374 4.58333 8.25ZM18.3333 14.6667C18.8396 14.6667 19.25 14.2563 19.25 13.75C19.25 13.2437 18.8396 12.8333 18.3333 12.8333C17.8271 12.8333 17.4167 13.2437 17.4167 13.75C17.4167 14.2563 17.8271 14.6667 18.3333 14.6667ZM19.25 8.25C19.25 8.75626 18.8396 9.16667 18.3333 9.16667C17.8271 9.16667 17.4167 8.75626 17.4167 8.25C17.4167 7.74374 17.8271 7.33333 18.3333 7.33333C18.8396 7.33333 19.25 7.74374 19.25 8.25ZM14.6667 3.66667C14.6667 4.17293 14.2563 4.58333 13.75 4.58333C13.2437 4.58333 12.8333 4.17293 12.8333 3.66667C12.8333 3.16041 13.2437 2.75 13.75 2.75C14.2563 2.75 14.6667 3.16041 14.6667 3.66667ZM13.75 15.5833C14.7625 15.5833 15.5833 14.7625 15.5833 13.75C15.5833 12.7375 14.7625 11.9167 13.75 11.9167C12.7375 11.9167 11.9167 12.7375 11.9167 13.75C11.9167 14.7625 12.7375 15.5833 13.75 15.5833Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 4.58333C8.75626 4.58333 9.16667 4.17293 9.16667 3.66667C9.16667 3.16041 8.75626 2.75 8.25 2.75C7.74374 2.75 7.33333 3.16041 7.33333 3.66667C7.33333 4.17293 7.74374 4.58333 8.25 4.58333ZM8.25 10.0833C9.26252 10.0833 10.0833 9.26252 10.0833 8.25C10.0833 7.23748 9.26252 6.41667 8.25 6.41667C7.23748 6.41667 6.41667 7.23748 6.41667 8.25C6.41667 9.26252 7.23748 10.0833 8.25 10.0833ZM13.75 10.0833C14.7625 10.0833 15.5833 9.26252 15.5833 8.25C15.5833 7.23748 14.7625 6.41667 13.75 6.41667C12.7375 6.41667 11.9167 7.23748 11.9167 8.25C11.9167 9.26252 12.7375 10.0833 13.75 10.0833ZM10.0833 13.75C10.0833 14.7625 9.26252 15.5833 8.25 15.5833C7.23748 15.5833 6.41667 14.7625 6.41667 13.75C6.41667 12.7375 7.23748 11.9167 8.25 11.9167C9.26252 11.9167 10.0833 12.7375 10.0833 13.75ZM8.25 19.25C8.75626 19.25 9.16667 18.8396 9.16667 18.3333C9.16667 17.8271 8.75626 17.4167 8.25 17.4167C7.74374 17.4167 7.33333 17.8271 7.33333 18.3333C7.33333 18.8396 7.74374 19.25 8.25 19.25ZM14.6667 18.3333C14.6667 18.8396 14.2563 19.25 13.75 19.25C13.2437 19.25 12.8333 18.8396 12.8333 18.3333C12.8333 17.8271 13.2437 17.4167 13.75 17.4167C14.2563 17.4167 14.6667 17.8271 14.6667 18.3333ZM3.66667 14.6667C4.17293 14.6667 4.58333 14.2563 4.58333 13.75C4.58333 13.2437 4.17293 12.8333 3.66667 12.8333C3.16041 12.8333 2.75 13.2437 2.75 13.75C2.75 14.2563 3.16041 14.6667 3.66667 14.6667ZM4.58333 8.25C4.58333 8.75626 4.17293 9.16667 3.66667 9.16667C3.16041 9.16667 2.75 8.75626 2.75 8.25C2.75 7.74374 3.16041 7.33333 3.66667 7.33333C4.17293 7.33333 4.58333 7.74374 4.58333 8.25ZM18.3333 14.6667C18.8396 14.6667 19.25 14.2563 19.25 13.75C19.25 13.2437 18.8396 12.8333 18.3333 12.8333C17.8271 12.8333 17.4167 13.2437 17.4167 13.75C17.4167 14.2563 17.8271 14.6667 18.3333 14.6667ZM19.25 8.25C19.25 8.75626 18.8396 9.16667 18.3333 9.16667C17.8271 9.16667 17.4167 8.75626 17.4167 8.25C17.4167 7.74374 17.8271 7.33333 18.3333 7.33333C18.8396 7.33333 19.25 7.74374 19.25 8.25ZM14.6667 3.66667C14.6667 4.17293 14.2563 4.58333 13.75 4.58333C13.2437 4.58333 12.8333 4.17293 12.8333 3.66667C12.8333 3.16041 13.2437 2.75 13.75 2.75C14.2563 2.75 14.6667 3.16041 14.6667 3.66667ZM13.75 15.5833C14.7625 15.5833 15.5833 14.7625 15.5833 13.75C15.5833 12.7375 14.7625 11.9167 13.75 11.9167C12.7375 11.9167 11.9167 12.7375 11.9167 13.75C11.9167 14.7625 12.7375 15.5833 13.75 15.5833Z"/>
 </svg>

react/features/base/icons/svg/camera-refresh.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.33335 7.50001V15C3.33335 15.4602 3.70645 15.8333 4.16669 15.8333H15.8334C16.2936 15.8333 16.6667 15.4602 16.6667 15V7.50001C16.6667 7.03977 16.2936 6.66668 15.8334 6.66668H13.4763L11.8097 5.00001H8.19038L6.52371 6.66668H4.16669C3.70645 6.66668 3.33335 7.03977 3.33335 7.50001ZM5.83335 5.00001L7.01187 3.8215C7.32443 3.50894 7.74835 3.33334 8.19038 3.33334H11.8097C12.2517 3.33334 12.6756 3.50894 12.9882 3.8215L14.1667 5.00001H15.8334C17.2141 5.00001 18.3334 6.1193 18.3334 7.50001V15C18.3334 16.3807 17.2141 17.5 15.8334 17.5H4.16669C2.78598 17.5 1.66669 16.3807 1.66669 15V7.50001C1.66669 6.1193 2.78598 5.00001 4.16669 5.00001H5.83335ZM4.33335 11.6667L6.83335 9.16668L9.33335 11.6667H7.64313C7.98572 12.6298 8.90536 13.3194 9.98605 13.3194C10.5912 13.3194 11.1585 13.1028 11.6011 12.7238L12.7474 13.935C12.0136 14.5888 11.0462 14.986 9.98605 14.986C7.978 14.986 6.30283 13.5608 5.91699 11.6667H4.33335ZM15.8334 10L13.3334 12.5L10.8334 10H12.3618C12.0232 9.02958 11.0999 8.33334 10.014 8.33334C9.4406 8.33334 8.90113 8.52599 8.46348 8.87591C8.44177 8.89327 7.42268 7.57418 7.42268 7.57418C8.13299 7.00625 9.03383 6.66668 10.014 6.66668C12.027 6.66668 13.7054 8.09895 14.0859 10H15.8334Z"/>
+</svg>

react/features/base/icons/svg/camera-take-picture.svg

@@ -1,3 +1,3 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 20.1666C5.93743 20.1666 1.83337 16.0626 1.83337 11C1.83337 5.93737 5.93743 1.83331 11 1.83331C16.0627 1.83331 20.1667 5.93737 20.1667 11C20.1667 16.0626 16.0627 20.1666 11 20.1666ZM11 18.3333C15.0501 18.3333 18.3334 15.0501 18.3334 11C18.3334 6.94989 15.0501 3.66665 11 3.66665C6.94995 3.66665 3.66671 6.94989 3.66671 11C3.66671 15.0501 6.94995 18.3333 11 18.3333ZM15.5834 11C15.5834 13.5313 13.5313 15.5833 11 15.5833C8.46874 15.5833 6.41671 13.5313 6.41671 11C6.41671 8.46867 8.46874 6.41665 11 6.41665C13.5313 6.41665 15.5834 8.46867 15.5834 11Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 20.1666C5.93743 20.1666 1.83337 16.0626 1.83337 11C1.83337 5.93737 5.93743 1.83331 11 1.83331C16.0627 1.83331 20.1667 5.93737 20.1667 11C20.1667 16.0626 16.0627 20.1666 11 20.1666ZM11 18.3333C15.0501 18.3333 18.3334 15.0501 18.3334 11C18.3334 6.94989 15.0501 3.66665 11 3.66665C6.94995 3.66665 3.66671 6.94989 3.66671 11C3.66671 15.0501 6.94995 18.3333 11 18.3333ZM15.5834 11C15.5834 13.5313 13.5313 15.5833 11 15.5833C8.46874 15.5833 6.41671 13.5313 6.41671 11C6.41671 8.46867 8.46874 6.41665 11 6.41665C13.5313 6.41665 15.5834 8.46867 15.5834 11Z" />
 </svg>

react/features/base/icons/svg/chat.svg

@@ -1,3 +1,3 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5834 20.1959C16.0896 20.1959 16.5 19.7854 16.5 19.2792V14.6666H19.25C19.7563 14.6666 20.1667 14.2562 20.1667 13.75V2.74998C20.1667 2.24372 19.7563 1.83331 19.25 1.83331H2.75004C2.24378 1.83331 1.83337 2.24372 1.83337 2.74998V13.75C1.83337 14.2562 2.24378 14.6666 2.75004 14.6666H10.5927L14.8761 19.8623C15.0502 20.0735 15.3096 20.1959 15.5834 20.1959ZM3.66671 3.66665H18.3334V12.8333H14.6667V16.7262L11.4573 12.8333H3.66671V3.66665Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5834 20.1959C16.0896 20.1959 16.5 19.7854 16.5 19.2792V14.6666H19.25C19.7563 14.6666 20.1667 14.2562 20.1667 13.75V2.74998C20.1667 2.24372 19.7563 1.83331 19.25 1.83331H2.75004C2.24378 1.83331 1.83337 2.24372 1.83337 2.74998V13.75C1.83337 14.2562 2.24378 14.6666 2.75004 14.6666H10.5927L14.8761 19.8623C15.0502 20.0735 15.3096 20.1959 15.5834 20.1959ZM3.66671 3.66665H18.3334V12.8333H14.6667V16.7262L11.4573 12.8333H3.66671V3.66665Z" />
 </svg>

react/features/base/icons/svg/exit-full-screen.svg

@@ -1,6 +1,6 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4166 8.24998L17.4166 10.0833L12.8333 10.0833C12.327 10.0833 11.9166 9.67291 11.9166 9.16665L11.9166 4.58331L13.75 4.58331L13.75 8.24998L17.4166 8.24998Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.58337 8.24998L4.58337 10.0833L9.16671 10.0833C9.67297 10.0833 10.0834 9.67291 10.0834 9.16665L10.0834 4.58331L8.25004 4.58331L8.25004 8.24998L4.58337 8.24998Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4166 13.75L17.4166 11.9167L12.8333 11.9167C12.327 11.9167 11.9166 12.3271 11.9166 12.8334L11.9166 17.4167L13.75 17.4167L13.75 13.75L17.4166 13.75Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.58337 13.75L4.58337 11.9167L9.16671 11.9167C9.67297 11.9167 10.0834 12.3271 10.0834 12.8334L10.0834 17.4167L8.25004 17.4167L8.25004 13.75L4.58337 13.75Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4166 8.24998L17.4166 10.0833L12.8333 10.0833C12.327 10.0833 11.9166 9.67291 11.9166 9.16665L11.9166 4.58331L13.75 4.58331L13.75 8.24998L17.4166 8.24998Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.58337 8.24998L4.58337 10.0833L9.16671 10.0833C9.67297 10.0833 10.0834 9.67291 10.0834 9.16665L10.0834 4.58331L8.25004 4.58331L8.25004 8.24998L4.58337 8.24998Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4166 13.75L17.4166 11.9167L12.8333 11.9167C12.327 11.9167 11.9166 12.3271 11.9166 12.8334L11.9166 17.4167L13.75 17.4167L13.75 13.75L17.4166 13.75Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.58337 13.75L4.58337 11.9167L9.16671 11.9167C9.67297 11.9167 10.0834 12.3271 10.0834 12.8334L10.0834 17.4167L8.25004 17.4167L8.25004 13.75L4.58337 13.75Z" />
 </svg>

react/features/base/icons/svg/feedback.svg

@@ -1,3 +1,3 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.27842 7.06629L10.5284 2.11629C10.8187 1.94211 11.1814 1.94211 11.4717 2.11629L19.7217 7.06629C19.9978 7.23195 20.1667 7.53033 20.1667 7.85232V19.25C20.1667 19.7562 19.7563 20.1666 19.25 20.1666H2.75004C2.24378 20.1666 1.83337 19.7562 1.83337 19.25V7.85232C1.83337 7.53033 2.00231 7.23195 2.27842 7.06629ZM3.66671 10.0428V18.3333H18.3334V10.0428L11.5367 14.9514C11.2164 15.1828 10.7837 15.1828 10.4633 14.9514L3.66671 10.0428ZM4.11297 8.10358L11 13.0776L17.8871 8.10358L11 3.97133L4.11297 8.10358ZM9.05228 8.70755C8.62239 8.97492 8.05714 8.84317 7.78976 8.41327C7.52239 7.98337 7.65414 7.41812 8.08404 7.15075L10.5159 5.63825C10.813 5.45351 11.1892 5.45392 11.4859 5.63932L13.9127 7.15608C14.342 7.42439 14.4725 7.98993 14.2042 8.41924C13.9359 8.84855 13.3703 8.97906 12.941 8.71074L11.9167 8.07054V11C11.9167 11.5062 11.5063 11.9166 11 11.9166C10.4938 11.9166 10.0834 11.5062 10.0834 11V8.06626L9.05228 8.70755Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.27842 7.06629L10.5284 2.11629C10.8187 1.94211 11.1814 1.94211 11.4717 2.11629L19.7217 7.06629C19.9978 7.23195 20.1667 7.53033 20.1667 7.85232V19.25C20.1667 19.7562 19.7563 20.1666 19.25 20.1666H2.75004C2.24378 20.1666 1.83337 19.7562 1.83337 19.25V7.85232C1.83337 7.53033 2.00231 7.23195 2.27842 7.06629ZM3.66671 10.0428V18.3333H18.3334V10.0428L11.5367 14.9514C11.2164 15.1828 10.7837 15.1828 10.4633 14.9514L3.66671 10.0428ZM4.11297 8.10358L11 13.0776L17.8871 8.10358L11 3.97133L4.11297 8.10358ZM9.05228 8.70755C8.62239 8.97492 8.05714 8.84317 7.78976 8.41327C7.52239 7.98337 7.65414 7.41812 8.08404 7.15075L10.5159 5.63825C10.813 5.45351 11.1892 5.45392 11.4859 5.63932L13.9127 7.15608C14.342 7.42439 14.4725 7.98993 14.2042 8.41924C13.9359 8.84855 13.3703 8.97906 12.941 8.71074L11.9167 8.07054V11C11.9167 11.5062 11.5063 11.9166 11 11.9166C10.4938 11.9166 10.0834 11.5062 10.0834 11V8.06626L9.05228 8.70755Z" />
 </svg>

react/features/base/icons/svg/full-screen.svg

@@ -1,3 +1,3 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 2.75H3.66667C3.16041 2.75 2.75 3.16041 2.75 3.66667V8.25H4.58333V4.58333H8.25V2.75ZM13.75 4.58333V2.75H18.3333C18.8396 2.75 19.25 3.16041 19.25 3.66667V8.25H17.4167V4.58333H13.75ZM13.75 17.4167H17.4167V13.75H19.25V18.3333C19.25 18.8396 18.8396 19.25 18.3333 19.25H13.75V17.4167ZM4.58333 13.75V17.4167H8.25V19.25H3.66667C3.16041 19.25 2.75 18.8396 2.75 18.3333V13.75H4.58333Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 2.75H3.66667C3.16041 2.75 2.75 3.16041 2.75 3.66667V8.25H4.58333V4.58333H8.25V2.75ZM13.75 4.58333V2.75H18.3333C18.8396 2.75 19.25 3.16041 19.25 3.66667V8.25H17.4167V4.58333H13.75ZM13.75 17.4167H17.4167V13.75H19.25V18.3333C19.25 18.8396 18.8396 19.25 18.3333 19.25H13.75V17.4167ZM4.58333 13.75V17.4167H8.25V19.25H3.66667C3.16041 19.25 2.75 18.8396 2.75 18.3333V13.75H4.58333Z" />
 </svg>

react/features/base/icons/svg/help.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18.3334C5.39765 18.3334 1.66669 14.6024 1.66669 10C1.66669 5.39765 5.39765 1.66669 10 1.66669C14.6024 1.66669 18.3334 5.39765 18.3334 10C18.3334 14.6024 14.6024 18.3334 10 18.3334ZM10 16.6667C13.6819 16.6667 16.6667 13.6819 16.6667 10C16.6667 6.31812 13.6819 3.33335 10 3.33335C6.31812 3.33335 3.33335 6.31812 3.33335 10C3.33335 13.6819 6.31812 16.6667 10 16.6667ZM9.24807 14.8926C9.44555 15.064 9.67667 15.1498 9.94143 15.1498C10.1975 15.1498 10.4232 15.063 10.6185 14.8893C10.8138 14.7157 10.9115 14.477 10.9115 14.1732C10.9115 13.8998 10.8182 13.6697 10.6315 13.4831C10.4449 13.2965 10.2149 13.2031 9.94143 13.2031C9.66365 13.2031 9.42928 13.2965 9.2383 13.4831C9.04733 13.6697 8.95184 13.8998 8.95184 14.1732C8.95184 14.4814 9.05058 14.7212 9.24807 14.8926ZM7.16148 6.76109C6.89672 7.18427 6.76434 7.60202 6.76434 8.01434C6.76434 8.214 6.84789 8.39954 7.01499 8.57098C7.1821 8.74243 7.38717 8.82815 7.63023 8.82815C8.04256 8.82815 8.3225 8.58292 8.47007 8.09247C8.62632 7.62372 8.81729 7.2689 9.04299 7.02802C9.26868 6.78713 9.62024 6.66669 10.0977 6.66669C10.5057 6.66669 10.8388 6.78604 11.097 7.02476C11.3553 7.26348 11.4844 7.55644 11.4844 7.90367C11.4844 8.08162 11.4421 8.24655 11.3574 8.39846C11.2728 8.55037 11.1686 8.68817 11.0449 8.81187C10.9212 8.93557 10.7205 9.11894 10.4427 9.362C10.1259 9.63978 9.87415 9.87958 9.68752 10.0814C9.50089 10.2832 9.35115 10.5176 9.2383 10.7845C9.12545 11.0515 9.06903 11.3672 9.06903 11.7318C9.06903 12.0226 9.14607 12.2418 9.30015 12.3893C9.45423 12.5369 9.64412 12.6107 9.86981 12.6107C10.3038 12.6107 10.5621 12.385 10.6446 11.9336C10.6923 11.7209 10.7281 11.5723 10.752 11.4877C10.7758 11.403 10.8095 11.3184 10.8529 11.2337C10.8963 11.1491 10.9625 11.0558 11.0515 10.9538C11.1404 10.8518 11.2587 10.7335 11.4063 10.599C11.9401 10.1215 12.3101 9.78192 12.5163 9.5801C12.7225 9.37827 12.9004 9.13848 13.0502 8.8607C13.1999 8.58292 13.2748 8.25957 13.2748 7.89065C13.2748 7.42189 13.1435 6.98787 12.8809 6.58856C12.6183 6.18925 12.2461 5.8735 11.7643 5.6413C11.2826 5.40909 10.727 5.29299 10.0977 5.29299C9.42059 5.29299 8.82815 5.43188 8.32033 5.70966C7.81252 5.98743 7.42624 6.33791 7.16148 6.76109Z" fill="white"/>
+<svg width="20" height="20" viewBox="0 0 20 20"  xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18.3334C5.39765 18.3334 1.66669 14.6024 1.66669 10C1.66669 5.39765 5.39765 1.66669 10 1.66669C14.6024 1.66669 18.3334 5.39765 18.3334 10C18.3334 14.6024 14.6024 18.3334 10 18.3334ZM10 16.6667C13.6819 16.6667 16.6667 13.6819 16.6667 10C16.6667 6.31812 13.6819 3.33335 10 3.33335C6.31812 3.33335 3.33335 6.31812 3.33335 10C3.33335 13.6819 6.31812 16.6667 10 16.6667ZM9.24807 14.8926C9.44555 15.064 9.67667 15.1498 9.94143 15.1498C10.1975 15.1498 10.4232 15.063 10.6185 14.8893C10.8138 14.7157 10.9115 14.477 10.9115 14.1732C10.9115 13.8998 10.8182 13.6697 10.6315 13.4831C10.4449 13.2965 10.2149 13.2031 9.94143 13.2031C9.66365 13.2031 9.42928 13.2965 9.2383 13.4831C9.04733 13.6697 8.95184 13.8998 8.95184 14.1732C8.95184 14.4814 9.05058 14.7212 9.24807 14.8926ZM7.16148 6.76109C6.89672 7.18427 6.76434 7.60202 6.76434 8.01434C6.76434 8.214 6.84789 8.39954 7.01499 8.57098C7.1821 8.74243 7.38717 8.82815 7.63023 8.82815C8.04256 8.82815 8.3225 8.58292 8.47007 8.09247C8.62632 7.62372 8.81729 7.2689 9.04299 7.02802C9.26868 6.78713 9.62024 6.66669 10.0977 6.66669C10.5057 6.66669 10.8388 6.78604 11.097 7.02476C11.3553 7.26348 11.4844 7.55644 11.4844 7.90367C11.4844 8.08162 11.4421 8.24655 11.3574 8.39846C11.2728 8.55037 11.1686 8.68817 11.0449 8.81187C10.9212 8.93557 10.7205 9.11894 10.4427 9.362C10.1259 9.63978 9.87415 9.87958 9.68752 10.0814C9.50089 10.2832 9.35115 10.5176 9.2383 10.7845C9.12545 11.0515 9.06903 11.3672 9.06903 11.7318C9.06903 12.0226 9.14607 12.2418 9.30015 12.3893C9.45423 12.5369 9.64412 12.6107 9.86981 12.6107C10.3038 12.6107 10.5621 12.385 10.6446 11.9336C10.6923 11.7209 10.7281 11.5723 10.752 11.4877C10.7758 11.403 10.8095 11.3184 10.8529 11.2337C10.8963 11.1491 10.9625 11.0558 11.0515 10.9538C11.1404 10.8518 11.2587 10.7335 11.4063 10.599C11.9401 10.1215 12.3101 9.78192 12.5163 9.5801C12.7225 9.37827 12.9004 9.13848 13.0502 8.8607C13.1999 8.58292 13.2748 8.25957 13.2748 7.89065C13.2748 7.42189 13.1435 6.98787 12.8809 6.58856C12.6183 6.18925 12.2461 5.8735 11.7643 5.6413C11.2826 5.40909 10.727 5.29299 10.0977 5.29299C9.42059 5.29299 8.82815 5.43188 8.32033 5.70966C7.81252 5.98743 7.42624 6.33791 7.16148 6.76109Z" />
 </svg>

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

@@ -20,6 +20,7 @@ export { default as IconCamera } from './camera.svg';
 export { default as IconCameraDisabled } from './camera-disabled.svg';
 export { default as IconCameraEmpty } from './camera-empty.svg';
 export { default as IconCameraEmptyDisabled } from './camera-empty-disabled.svg';
+export { default as IconCameraRefresh } from './camera-refresh.svg';
 export { default as IconCancelSelection } from './cancel.svg';
 export { default as IconChat } from './chat.svg';
 export { default as IconChatSend } from './send.svg';
@@ -109,6 +110,7 @@ export { default as IconVideoQualityAudioOnly } from './AUD.svg';
 export { default as IconVideoQualityHD } from './HD.svg';
 export { default as IconVideoQualityLD } from './LD.svg';
 export { default as IconVideoQualitySD } from './SD.svg';
+export { default as IconVirtualBackground } from './virtual-background.svg';
 export { default as IconVolume } from './volume.svg';
 export { default as IconVolumeEmpty } from './volume-empty.svg';
 export { default as IconVolumeOff } from './volume-off.svg';

react/features/base/icons/svg/live-streaming.svg

@@ -1,3 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 20.1666C5.93743 20.1666 1.83337 16.0626 1.83337 11C1.83337 5.93737 5.93743 1.83331 11 1.83331C16.0627 1.83331 20.1667 5.93737 20.1667 11C20.1667 16.0626 16.0627 20.1666 11 20.1666ZM11 18.3333C11.1961 18.3333 11.3903 18.3256 11.5824 18.3105C10.5501 17.4264 9.59313 16.3138 8.75825 15.0021C7.49738 15.1948 6.17459 15.1866 4.82269 14.9536C6.12637 16.9863 8.4059 18.3333 11 18.3333ZM10.6533 14.5474C11.6128 15.9231 12.7188 17.0044 13.8859 17.7437C14.1557 17.6281 14.4172 17.4967 14.6691 17.3508C14.6706 17.3303 14.6728 17.3097 14.6757 17.2891C14.9298 15.4814 14.8751 13.8467 14.5451 12.3479C13.4001 13.3267 12.0838 14.0737 10.6533 14.5474ZM13.9392 10.4127C12.7459 11.6082 11.287 12.4733 9.66815 12.9309C8.46905 10.6745 7.6302 7.85533 7.39828 4.61061C7.82671 4.36858 8.28191 4.1684 8.75833 4.01561C8.80512 4.05571 8.86081 4.10342 8.91909 4.15334C9.07324 4.28538 9.24549 4.43294 9.31893 4.49632C9.59915 4.73815 9.83649 4.94781 10.0699 5.16136C10.6639 5.70485 11.1866 6.23341 11.6714 6.79528C12.6385 7.9162 13.4037 9.11177 13.9392 10.4127ZM15.2335 8.82952C14.6633 7.68289 13.9328 6.60978 13.0594 5.59762C12.5235 4.9765 11.9513 4.39785 11.3074 3.80875C11.2561 3.76175 11.2046 3.71502 11.1527 3.6682C13.297 3.712 15.2153 4.6762 16.5286 6.18183C16.2018 7.14657 15.7642 8.03341 15.2335 8.82952ZM16.0362 10.823C16.502 12.3121 16.7196 13.9188 16.6584 15.6652C17.7048 14.3975 18.3334 12.7721 18.3334 11C18.3334 9.96873 18.1205 8.98721 17.7363 8.09693C17.275 9.09641 16.7022 10.0096 16.0362 10.823ZM3.91853 12.8686C5.24374 13.2472 6.54603 13.3714 7.78607 13.2697C6.75554 11.1791 6.01023 8.711 5.68385 5.94863C4.43382 7.26378 3.66671 9.0423 3.66671 11C3.66671 11.6534 3.75216 12.2868 3.9125 12.8897L3.91853 12.8686Z" fill="white"/>
+<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 20.1666C5.93743 20.1666 1.83337 16.0626 1.83337 11C1.83337 5.93737 5.93743 1.83331 11 1.83331C16.0627 1.83331 20.1667 5.93737 20.1667 11C20.1667 16.0626 16.0627 20.1666 11 20.1666ZM11 18.3333C11.1961 18.3333 11.3903 18.3256 11.5824 18.3105C10.5501 17.4264 9.59313 16.3138 8.75825 15.0021C7.49738 15.1948 6.17459 15.1866 4.82269 14.9536C6.12637 16.9863 8.4059 18.3333 11 18.3333ZM10.6533 14.5474C11.6128 15.9231 12.7188 17.0044 13.8859 17.7437C14.1557 17.6281 14.4172 17.4967 14.6691 17.3508C14.6706 17.3303 14.6728 17.3097 14.6757 17.2891C14.9298 15.4814 14.8751 13.8467 14.5451 12.3479C13.4001 13.3267 12.0838 14.0737 10.6533 14.5474ZM13.9392 10.4127C12.7459 11.6082 11.287 12.4733 9.66815 12.9309C8.46905 10.6745 7.6302 7.85533 7.39828 4.61061C7.82671 4.36858 8.28191 4.1684 8.75833 4.01561C8.80512 4.05571 8.86081 4.10342 8.91909 4.15334C9.07324 4.28538 9.24549 4.43294 9.31893 4.49632C9.59915 4.73815 9.83649 4.94781 10.0699 5.16136C10.6639 5.70485 11.1866 6.23341 11.6714 6.79528C12.6385 7.9162 13.4037 9.11177 13.9392 10.4127ZM15.2335 8.82952C14.6633 7.68289 13.9328 6.60978 13.0594 5.59762C12.5235 4.9765 11.9513 4.39785 11.3074 3.80875C11.2561 3.76175 11.2046 3.71502 11.1527 3.6682C13.297 3.712 15.2153 4.6762 16.5286 6.18183C16.2018 7.14657 15.7642 8.03341 15.2335 8.82952ZM16.0362 10.823C16.502 12.3121 16.7196 13.9188 16.6584 15.6652C17.7048 14.3975 18.3334 12.7721 18.3334 11C18.3334 9.96873 18.1205 8.98721 17.7363 8.09693C17.275 9.09641 16.7022 10.0096 16.0362 10.823ZM3.91853 12.8686C5.24374 13.2472 6.54603 13.3714 7.78607 13.2697C6.75554 11.1791 6.01023 8.711 5.68385 5.94863C4.43382 7.26378 3.66671 9.0423 3.66671 11C3.66671 11.6534 3.75216 12.2868 3.9125 12.8897L3.91853 12.8686Z" />
 </svg>

react/features/base/icons/svg/microphone-empty-slash.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.33334 7.65098V10C6.33334 11.7111 7.50533 13.1484 9.09033 13.553C9.08572 13.5902 9.08334 13.6282 9.08334 13.6667V15.424C6.48211 14.9876 4.50001 12.7253 4.50001 10C4.50001 9.49378 4.0896 9.08337 3.58334 9.08337C3.07708 9.08337 2.66668 9.49378 2.66668 10C2.66668 13.7397 5.46589 16.8255 9.08334 17.2766V18.25C9.08334 18.7563 9.49375 19.1667 10 19.1667C10.5063 19.1667 10.9167 18.7563 10.9167 18.25V17.2766C12.2504 17.1103 13.4729 16.5859 14.4849 15.8025L17.576 18.8937C17.94 19.2576 18.53 19.2577 18.8939 18.8939C19.2577 18.53 19.2576 17.94 18.8936 17.5761L15.8025 14.4849C15.8059 14.4806 15.8092 14.4762 15.8126 14.4719L14.5016 13.1609C14.4984 13.1654 14.4952 13.1699 14.492 13.1744L13.1669 11.8493C13.1697 11.8444 13.1726 11.8396 13.1754 11.8347L11.7803 10.4396C11.7788 10.4458 11.7772 10.4519 11.7757 10.4581L8.16668 6.8491V6.82598L6.33334 4.99265V5.01577L2.42398 1.10641C2.06002 0.742445 1.47001 0.742351 1.10617 1.1062C0.74232 1.47004 0.742414 2.06005 1.10638 2.42401L6.33334 7.65098ZM8.16668 9.48431V10C8.16668 11.0126 8.98749 11.8334 10 11.8334C10.1582 11.8334 10.3116 11.8133 10.4581 11.7757L8.16668 9.48431ZM11.8493 13.1669C11.5591 13.3367 11.2436 13.4678 10.9097 13.553C10.9143 13.5902 10.9167 13.6282 10.9167 13.6667V15.424C11.7471 15.2847 12.5145 14.9592 13.1744 14.492L11.8493 13.1669ZM13.6667 9.69077L11.8333 7.85743V4.50004C11.8333 3.48752 11.0125 2.66671 10 2.66671C9.08511 2.66671 8.32673 3.33688 8.189 4.21309L6.75923 2.78332C7.37496 1.62336 8.59523 0.833374 10 0.833374C12.0251 0.833374 13.6667 2.475 13.6667 4.50004V9.69077ZM15.3317 11.3558L16.7787 12.8028C17.1361 11.9393 17.3333 10.9927 17.3333 10C17.3333 9.49378 16.9229 9.08337 16.4167 9.08337C15.9104 9.08337 15.5 9.49378 15.5 10C15.5 10.4679 15.4416 10.9221 15.3317 11.3558Z" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.33331 8.65092V11C7.33331 12.711 8.5053 14.1483 10.0903 14.5529C10.0857 14.5902 10.0833 14.6281 10.0833 14.6666V16.4239C7.48208 15.9875 5.49998 13.7252 5.49998 11C5.49998 10.4937 5.08957 10.0833 4.58331 10.0833C4.07705 10.0833 3.66665 10.4937 3.66665 11C3.66665 14.7396 6.46586 17.8255 10.0833 18.2766V19.25C10.0833 19.7562 10.4937 20.1666 11 20.1666C11.5062 20.1666 11.9166 19.7562 11.9166 19.25V18.2766C13.2504 18.1103 14.4729 17.5858 15.4849 16.8025L18.576 19.8936C18.94 20.2576 19.53 20.2577 19.8938 19.8938C20.2577 19.53 20.2576 18.94 19.8936 18.576L16.8025 15.4849C16.8058 15.4805 16.8092 15.4762 16.8125 15.4718L15.5016 14.1608C15.4984 14.1653 15.4952 14.1699 15.492 14.1744L14.1668 12.8492C14.1697 12.8444 14.1725 12.8395 14.1754 12.8346L12.7803 11.4396C12.7788 11.4457 12.7772 11.4519 12.7756 11.458L9.16665 7.84904V7.82592L7.33331 5.99259V6.01571L3.42395 2.10635C3.05999 1.74238 2.46998 1.74229 2.10614 2.10614C1.74229 2.46998 1.74238 3.05999 2.10635 3.42395L7.33331 8.65092ZM9.16665 10.4843V11C9.16665 12.0125 9.98746 12.8333 11 12.8333C11.1581 12.8333 11.3116 12.8133 11.458 12.7756L9.16665 10.4843ZM12.8492 14.1668C12.5591 14.3366 12.2435 14.4677 11.9097 14.5529C11.9143 14.5902 11.9166 14.6281 11.9166 14.6666V16.4239C12.7471 16.2846 13.5145 15.9592 14.1744 15.492L12.8492 14.1668ZM14.6666 10.6907L12.8333 8.85737V5.49998C12.8333 4.48746 12.0125 3.66665 11 3.66665C10.0851 3.66665 9.3267 4.33681 9.18897 5.21303L7.7592 3.78326C8.37493 2.6233 9.5952 1.83331 11 1.83331C13.025 1.83331 14.6666 3.47494 14.6666 5.49998V10.6907ZM16.3316 12.3557L17.7787 13.8027C18.1361 12.9392 18.3333 11.9926 18.3333 11C18.3333 10.4937 17.9229 10.0833 17.4166 10.0833C16.9104 10.0833 16.5 10.4937 16.5 11C16.5 11.4678 16.4416 11.922 16.3316 12.3557Z"/>
+</svg>

react/features/base/icons/svg/mute-everyone.svg

@@ -1,4 +1,4 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 11.9882V13.75C5.5 15.0333 6.37899 16.1113 7.56774 16.4147C7.56428 16.4427 7.5625 16.4711 7.5625 16.5V17.818C5.61157 17.4907 4.125 15.7939 4.125 13.75C4.125 13.3703 3.8172 13.0625 3.4375 13.0625C3.0578 13.0625 2.75 13.3703 2.75 13.75C2.75 16.5547 4.84941 18.8691 7.5625 19.2074V19.9375C7.5625 20.3172 7.8703 20.625 8.25 20.625C8.6297 20.625 8.9375 20.3172 8.9375 19.9375V19.2074C9.93779 19.0827 10.8547 18.6894 11.6137 18.1019L13.932 20.4202C14.205 20.6932 14.6475 20.6933 14.9204 20.4204C15.1933 20.1475 15.1932 19.705 14.9202 19.432L12.6019 17.1137C12.6044 17.1104 12.6069 17.1071 12.6094 17.1039L11.6262 16.1206C11.6238 16.124 11.6214 16.1274 11.619 16.1308L10.6251 15.1369C10.6273 15.1333 10.6294 15.1296 10.6315 15.126L9.58522 14.0797C9.58409 14.0843 9.58292 14.0889 9.58174 14.0935L6.875 11.3868V11.3695L5.5 9.99445V10.0118L2.56798 7.07978C2.29501 6.8068 1.8525 6.80673 1.57962 7.07962C1.30673 7.3525 1.3068 7.79501 1.57978 8.06798L5.5 11.9882ZM6.875 13.3632V13.75C6.875 14.5094 7.49061 15.125 8.25 15.125C8.36862 15.125 8.48373 15.11 8.59353 15.0817L6.875 13.3632ZM9.63694 16.1251C9.41934 16.2525 9.18267 16.3508 8.93226 16.4147C8.93572 16.4427 8.9375 16.4711 8.9375 16.5V17.818C9.56035 17.7135 10.1359 17.4694 10.6308 17.119L9.63694 16.1251ZM11 13.518L9.625 12.143V9.625C9.625 8.86561 9.00939 8.25 8.25 8.25C7.56382 8.25 6.99504 8.75263 6.89174 9.40979L5.81941 8.33746C6.28121 7.46749 7.19642 6.875 8.25 6.875C9.76878 6.875 11 8.10622 11 9.625V13.518ZM12.2487 14.7668L13.334 15.8521C13.6021 15.2044 13.75 14.4945 13.75 13.75C13.75 13.3703 13.4422 13.0625 13.0625 13.0625C12.6828 13.0625 12.375 13.3703 12.375 13.75C12.375 14.1009 12.3312 14.4415 12.2487 14.7668Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6666 4.32549V5.50002C14.6666 6.35554 15.2526 7.07419 16.0451 7.27649C16.0428 7.29512 16.0416 7.3141 16.0416 7.33335V8.212C14.741 7.9938 13.75 6.86264 13.75 5.50002C13.75 5.24689 13.5448 5.04169 13.2916 5.04169C13.0385 5.04169 12.8333 5.24689 12.8333 5.50002C12.8333 7.36985 14.2329 8.91277 16.0416 9.13832V9.62502C16.0416 9.87815 16.2468 10.0834 16.5 10.0834C16.7531 10.0834 16.9583 9.87815 16.9583 9.62502V9.13832C17.6252 9.05516 18.2364 8.79293 18.7424 8.40126L20.288 9.94684C20.47 10.1288 20.765 10.1289 20.9469 9.94694C21.1288 9.76502 21.1288 9.47001 20.9468 9.28803L19.4012 7.74246C19.4029 7.74029 19.4046 7.73811 19.4062 7.73594L18.7507 7.08044C18.7492 7.0827 18.7476 7.08496 18.746 7.08722L18.0834 6.42465C18.0848 6.42222 18.0862 6.41978 18.0876 6.41734L17.3901 5.71981C17.3893 5.72289 17.3886 5.72597 17.3878 5.72904L15.5833 3.92455V3.91299L14.6666 2.99632V3.00788L12.7119 1.0532C12.53 0.871222 12.235 0.871175 12.053 1.0531C11.8711 1.23502 11.8712 1.53003 12.0531 1.71201L14.6666 4.32549ZM15.5833 5.24216V5.50002C15.5833 6.00628 15.9937 6.41669 16.5 6.41669C16.579 6.41669 16.6558 6.40667 16.729 6.38785L15.5833 5.24216ZM17.4246 7.08345C17.2795 7.16835 17.1217 7.23388 16.9548 7.27649C16.9571 7.29512 16.9583 7.3141 16.9583 7.33335V8.212C17.3735 8.14233 17.7572 7.97962 18.0872 7.74602L17.4246 7.08345ZM18.3333 5.34538L17.4166 4.42872V2.75002C17.4166 2.24376 17.0062 1.83335 16.5 1.83335C16.0425 1.83335 15.6633 2.16844 15.5945 2.60655L14.8796 1.89166C15.1874 1.31168 15.7976 0.916687 16.5 0.916687C17.5125 0.916687 18.3333 1.7375 18.3333 2.75002V5.34538ZM19.1658 6.17788L19.8893 6.90139C20.068 6.46965 20.1666 5.99635 20.1666 5.50002C20.1666 5.24689 19.9614 5.04169 19.7083 5.04169C19.4552 5.04169 19.25 5.24689 19.25 5.50002C19.25 5.73394 19.2208 5.96104 19.1658 6.17788Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 11.9882V13.75C5.5 15.0333 6.37899 16.1113 7.56774 16.4147C7.56428 16.4427 7.5625 16.4711 7.5625 16.5V17.818C5.61157 17.4907 4.125 15.7939 4.125 13.75C4.125 13.3703 3.8172 13.0625 3.4375 13.0625C3.0578 13.0625 2.75 13.3703 2.75 13.75C2.75 16.5547 4.84941 18.8691 7.5625 19.2074V19.9375C7.5625 20.3172 7.8703 20.625 8.25 20.625C8.6297 20.625 8.9375 20.3172 8.9375 19.9375V19.2074C9.93779 19.0827 10.8547 18.6894 11.6137 18.1019L13.932 20.4202C14.205 20.6932 14.6475 20.6933 14.9204 20.4204C15.1933 20.1475 15.1932 19.705 14.9202 19.432L12.6019 17.1137C12.6044 17.1104 12.6069 17.1071 12.6094 17.1039L11.6262 16.1206C11.6238 16.124 11.6214 16.1274 11.619 16.1308L10.6251 15.1369C10.6273 15.1333 10.6294 15.1296 10.6315 15.126L9.58522 14.0797C9.58409 14.0843 9.58292 14.0889 9.58174 14.0935L6.875 11.3868V11.3695L5.5 9.99445V10.0118L2.56798 7.07978C2.29501 6.8068 1.8525 6.80673 1.57962 7.07962C1.30673 7.3525 1.3068 7.79501 1.57978 8.06798L5.5 11.9882ZM6.875 13.3632V13.75C6.875 14.5094 7.49061 15.125 8.25 15.125C8.36862 15.125 8.48373 15.11 8.59353 15.0817L6.875 13.3632ZM9.63694 16.1251C9.41934 16.2525 9.18267 16.3508 8.93226 16.4147C8.93572 16.4427 8.9375 16.4711 8.9375 16.5V17.818C9.56035 17.7135 10.1359 17.4694 10.6308 17.119L9.63694 16.1251ZM11 13.518L9.625 12.143V9.625C9.625 8.86561 9.00939 8.25 8.25 8.25C7.56382 8.25 6.99504 8.75263 6.89174 9.40979L5.81941 8.33746C6.28121 7.46749 7.19642 6.875 8.25 6.875C9.76878 6.875 11 8.10622 11 9.625V13.518ZM12.2487 14.7668L13.334 15.8521C13.6021 15.2044 13.75 14.4945 13.75 13.75C13.75 13.3703 13.4422 13.0625 13.0625 13.0625C12.6828 13.0625 12.375 13.3703 12.375 13.75C12.375 14.1009 12.3312 14.4415 12.2487 14.7668Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6666 4.32549V5.50002C14.6666 6.35554 15.2526 7.07419 16.0451 7.27649C16.0428 7.29512 16.0416 7.3141 16.0416 7.33335V8.212C14.741 7.9938 13.75 6.86264 13.75 5.50002C13.75 5.24689 13.5448 5.04169 13.2916 5.04169C13.0385 5.04169 12.8333 5.24689 12.8333 5.50002C12.8333 7.36985 14.2329 8.91277 16.0416 9.13832V9.62502C16.0416 9.87815 16.2468 10.0834 16.5 10.0834C16.7531 10.0834 16.9583 9.87815 16.9583 9.62502V9.13832C17.6252 9.05516 18.2364 8.79293 18.7424 8.40126L20.288 9.94684C20.47 10.1288 20.765 10.1289 20.9469 9.94694C21.1288 9.76502 21.1288 9.47001 20.9468 9.28803L19.4012 7.74246C19.4029 7.74029 19.4046 7.73811 19.4062 7.73594L18.7507 7.08044C18.7492 7.0827 18.7476 7.08496 18.746 7.08722L18.0834 6.42465C18.0848 6.42222 18.0862 6.41978 18.0876 6.41734L17.3901 5.71981C17.3893 5.72289 17.3886 5.72597 17.3878 5.72904L15.5833 3.92455V3.91299L14.6666 2.99632V3.00788L12.7119 1.0532C12.53 0.871222 12.235 0.871175 12.053 1.0531C11.8711 1.23502 11.8712 1.53003 12.0531 1.71201L14.6666 4.32549ZM15.5833 5.24216V5.50002C15.5833 6.00628 15.9937 6.41669 16.5 6.41669C16.579 6.41669 16.6558 6.40667 16.729 6.38785L15.5833 5.24216ZM17.4246 7.08345C17.2795 7.16835 17.1217 7.23388 16.9548 7.27649C16.9571 7.29512 16.9583 7.3141 16.9583 7.33335V8.212C17.3735 8.14233 17.7572 7.97962 18.0872 7.74602L17.4246 7.08345ZM18.3333 5.34538L17.4166 4.42872V2.75002C17.4166 2.24376 17.0062 1.83335 16.5 1.83335C16.0425 1.83335 15.6633 2.16844 15.5945 2.60655L14.8796 1.89166C15.1874 1.31168 15.7976 0.916687 16.5 0.916687C17.5125 0.916687 18.3333 1.7375 18.3333 2.75002V5.34538ZM19.1658 6.17788L19.8893 6.90139C20.068 6.46965 20.1666 5.99635 20.1666 5.50002C20.1666 5.24689 19.9614 5.04169 19.7083 5.04169C19.4552 5.04169 19.25 5.24689 19.25 5.50002C19.25 5.73394 19.2208 5.96104 19.1658 6.17788Z"/>
 </svg>

react/features/base/icons/svg/presentation.svg

@@ -1,3 +1,3 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6666 3.66669C15.1143 3.66669 14.6666 4.1144 14.6666 4.66669V17.3334C14.6666 17.8856 15.1143 18.3334 15.6666 18.3334H17.3333C17.8856 18.3334 18.3333 17.8856 18.3333 17.3334V4.66669C18.3333 4.1144 17.8856 3.66669 17.3333 3.66669H15.6666ZM9.16663 10.1667C9.16663 9.6144 9.61434 9.16669 10.1666 9.16669H11.8333C12.3856 9.16669 12.8333 9.6144 12.8333 10.1667V17.3334C12.8333 17.8856 12.3856 18.3334 11.8333 18.3334H10.1666C9.61434 18.3334 9.16663 17.8856 9.16663 17.3334V10.1667ZM3.66663 15.6667C3.66663 15.1144 4.11434 14.6667 4.66663 14.6667H6.33329C6.88558 14.6667 7.33329 15.1144 7.33329 15.6667V17.3334C7.33329 17.8856 6.88558 18.3334 6.33329 18.3334H4.66663C4.11434 18.3334 3.66663 17.8856 3.66663 17.3334V15.6667Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6666 3.66669C15.1143 3.66669 14.6666 4.1144 14.6666 4.66669V17.3334C14.6666 17.8856 15.1143 18.3334 15.6666 18.3334H17.3333C17.8856 18.3334 18.3333 17.8856 18.3333 17.3334V4.66669C18.3333 4.1144 17.8856 3.66669 17.3333 3.66669H15.6666ZM9.16663 10.1667C9.16663 9.6144 9.61434 9.16669 10.1666 9.16669H11.8333C12.3856 9.16669 12.8333 9.6144 12.8333 10.1667V17.3334C12.8333 17.8856 12.3856 18.3334 11.8333 18.3334H10.1666C9.61434 18.3334 9.16663 17.8856 9.16663 17.3334V10.1667ZM3.66663 15.6667C3.66663 15.1144 4.11434 14.6667 4.66663 14.6667H6.33329C6.88558 14.6667 7.33329 15.1144 7.33329 15.6667V17.3334C7.33329 17.8856 6.88558 18.3334 6.33329 18.3334H4.66663C4.11434 18.3334 3.66663 17.8856 3.66663 17.3334V15.6667Z" />
 </svg>

react/features/base/icons/svg/raised-hand.svg

@@ -1,3 +1,3 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9167 3.20834L11.9167 4.83334L11.9167 11L11.9167 11.9167C11.9167 12.4229 12.3271 12.8333 12.8333 12.8333C13.3396 12.8333 13.75 12.4229 13.75 11.9167V11V4.83334C13.75 4.73632 13.9183 4.58334 14.2083 4.58334C14.4984 4.58334 14.6667 4.73632 14.6667 4.83334L14.6667 6.875L14.6667 11.9167C14.6667 12.4229 15.0771 12.8333 15.5833 12.8333C16.0896 12.8333 16.5 12.4229 16.5 11.9167L16.5 6.875C16.5 6.62187 16.7052 6.41667 16.9583 6.41667C17.2115 6.41667 17.4167 6.62187 17.4167 6.875V13.788C17.1671 16.3395 14.9919 18.3333 12.375 18.3333C10.6569 18.3333 9.09297 17.4675 8.17032 16.0753L8.16703 16.0762L4.67206 10.8208C4.50437 10.5805 4.55476 10.2948 4.76211 10.1496C4.96947 10.0044 5.25526 10.0548 5.40045 10.2621L6.57295 12.015L6.57177 12.0158C6.85487 12.4355 7.42461 12.5463 7.84432 12.2632C8.09767 12.0923 8.23844 11.8169 8.24797 11.5332L8.25 11.5338V5.04167C8.25 4.78854 8.4552 4.58334 8.70833 4.58334C8.96124 4.58334 9.1663 4.78818 9.16667 5.041L9.16667 5.04167L9.16667 11L9.16667 11.9167C9.16667 12.4229 9.57707 12.8333 10.0833 12.8333C10.5896 12.8333 11 12.4229 11 11.9167V11V5.04167V3.20834C11 2.95521 11.2052 2.75001 11.4583 2.75001C11.7115 2.75001 11.9167 2.95521 11.9167 3.20834ZM19.2337 13.7686L19.25 13.7605V13.2917V6.875C19.25 5.60935 18.224 4.58334 16.9583 4.58334C16.7976 4.58334 16.6408 4.59988 16.4894 4.63136C16.3776 3.57554 15.399 2.75001 14.2083 2.75001C14.0384 2.75001 13.8729 2.76681 13.7135 2.7987C13.5204 1.72851 12.5842 0.916672 11.4583 0.916672C10.3309 0.916672 9.39356 1.73088 9.20233 2.80339C9.04323 2.76843 8.87793 2.75001 8.70833 2.75001C7.44268 2.75001 6.41667 3.77602 6.41667 5.04167V8.70352C5.64445 8.11321 4.54919 8.06056 3.71056 8.64778C2.67379 9.37373 2.42183 10.8027 3.14778 11.8395L6.44893 16.7791C7.64459 18.8065 9.85095 20.1667 12.375 20.1667C16.0117 20.1667 18.9888 17.3431 19.2337 13.7686Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9167 3.20834L11.9167 4.83334L11.9167 11L11.9167 11.9167C11.9167 12.4229 12.3271 12.8333 12.8333 12.8333C13.3396 12.8333 13.75 12.4229 13.75 11.9167V11V4.83334C13.75 4.73632 13.9183 4.58334 14.2083 4.58334C14.4984 4.58334 14.6667 4.73632 14.6667 4.83334L14.6667 6.875L14.6667 11.9167C14.6667 12.4229 15.0771 12.8333 15.5833 12.8333C16.0896 12.8333 16.5 12.4229 16.5 11.9167L16.5 6.875C16.5 6.62187 16.7052 6.41667 16.9583 6.41667C17.2115 6.41667 17.4167 6.62187 17.4167 6.875V13.788C17.1671 16.3395 14.9919 18.3333 12.375 18.3333C10.6569 18.3333 9.09297 17.4675 8.17032 16.0753L8.16703 16.0762L4.67206 10.8208C4.50437 10.5805 4.55476 10.2948 4.76211 10.1496C4.96947 10.0044 5.25526 10.0548 5.40045 10.2621L6.57295 12.015L6.57177 12.0158C6.85487 12.4355 7.42461 12.5463 7.84432 12.2632C8.09767 12.0923 8.23844 11.8169 8.24797 11.5332L8.25 11.5338V5.04167C8.25 4.78854 8.4552 4.58334 8.70833 4.58334C8.96124 4.58334 9.1663 4.78818 9.16667 5.041L9.16667 5.04167L9.16667 11L9.16667 11.9167C9.16667 12.4229 9.57707 12.8333 10.0833 12.8333C10.5896 12.8333 11 12.4229 11 11.9167V11V5.04167V3.20834C11 2.95521 11.2052 2.75001 11.4583 2.75001C11.7115 2.75001 11.9167 2.95521 11.9167 3.20834ZM19.2337 13.7686L19.25 13.7605V13.2917V6.875C19.25 5.60935 18.224 4.58334 16.9583 4.58334C16.7976 4.58334 16.6408 4.59988 16.4894 4.63136C16.3776 3.57554 15.399 2.75001 14.2083 2.75001C14.0384 2.75001 13.8729 2.76681 13.7135 2.7987C13.5204 1.72851 12.5842 0.916672 11.4583 0.916672C10.3309 0.916672 9.39356 1.73088 9.20233 2.80339C9.04323 2.76843 8.87793 2.75001 8.70833 2.75001C7.44268 2.75001 6.41667 3.77602 6.41667 5.04167V8.70352C5.64445 8.11321 4.54919 8.06056 3.71056 8.64778C2.67379 9.37373 2.42183 10.8027 3.14778 11.8395L6.44893 16.7791C7.64459 18.8065 9.85095 20.1667 12.375 20.1667C16.0117 20.1667 18.9888 17.3431 19.2337 13.7686Z" />
 </svg>

react/features/base/icons/svg/share-desktop.svg

@@ -1,3 +1,3 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.66671 2.75H18.3334C19.3459 2.75 20.1667 3.57081 20.1667 4.58333V15.5833C20.1667 16.5959 19.3459 17.4167 18.3334 17.4167H15.5834C16.0896 17.4167 16.5 17.8271 16.5 18.3333C16.5 18.8396 16.0896 19.25 15.5834 19.25H6.41671C5.91045 19.25 5.50004 18.8396 5.50004 18.3333C5.50004 17.8271 5.91045 17.4167 6.41671 17.4167H3.66671C2.65419 17.4167 1.83337 16.5959 1.83337 15.5833V4.58333C1.83337 3.57081 2.65419 2.75 3.66671 2.75ZM3.66671 4.58333V15.5833H18.3334V4.58333H3.66671ZM11.9167 8.25C8.16671 8.25 6.41671 9.85417 6.41671 14.6667C8.41671 10.7708 11.9167 11 11.9167 11V12.274C11.9167 12.6941 12.4034 12.9269 12.7305 12.6633L16.017 10.0143C16.2654 9.81413 16.2654 9.43582 16.017 9.23568L12.7305 6.5867C12.4034 6.32307 11.9167 6.55589 11.9167 6.97599V8.25Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.66671 2.75H18.3334C19.3459 2.75 20.1667 3.57081 20.1667 4.58333V15.5833C20.1667 16.5959 19.3459 17.4167 18.3334 17.4167H15.5834C16.0896 17.4167 16.5 17.8271 16.5 18.3333C16.5 18.8396 16.0896 19.25 15.5834 19.25H6.41671C5.91045 19.25 5.50004 18.8396 5.50004 18.3333C5.50004 17.8271 5.91045 17.4167 6.41671 17.4167H3.66671C2.65419 17.4167 1.83337 16.5959 1.83337 15.5833V4.58333C1.83337 3.57081 2.65419 2.75 3.66671 2.75ZM3.66671 4.58333V15.5833H18.3334V4.58333H3.66671ZM11.9167 8.25C8.16671 8.25 6.41671 9.85417 6.41671 14.6667C8.41671 10.7708 11.9167 11 11.9167 11V12.274C11.9167 12.6941 12.4034 12.9269 12.7305 12.6633L16.017 10.0143C16.2654 9.81413 16.2654 9.43582 16.017 9.23568L12.7305 6.5867C12.4034 6.32307 11.9167 6.55589 11.9167 6.97599V8.25Z" />
 </svg>

react/features/base/icons/svg/tiles-many.svg

@@ -1,3 +1,14 @@
-<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.86667 8.24998V3.66665H8.45V8.24998H3.86667ZM2.03333 2.74998C2.03333 2.24372 2.44374 1.83331 2.95 1.83331H9.36667C9.87293 1.83331 10.2833 2.24372 10.2833 2.74998V9.16665C10.2833 9.67291 9.87293 10.0833 9.36667 10.0833H2.95C2.44374 10.0833 2.03333 9.67291 2.03333 9.16665V2.74998ZM13.95 8.24998V3.66665H18.5333V8.24998H13.95ZM12.1167 2.74998C12.1167 2.24372 12.5271 1.83331 13.0333 1.83331H19.45C19.9563 1.83331 20.3667 2.24372 20.3667 2.74998V9.16665C20.3667 9.67291 19.9563 10.0833 19.45 10.0833H13.0333C12.5271 10.0833 12.1167 9.67291 12.1167 9.16665V2.74998ZM3.86667 13.75V18.3333H8.45V13.75H3.86667ZM2.95 11.9166C2.44374 11.9166 2.03333 12.3271 2.03333 12.8333V19.25C2.03333 19.7562 2.44374 20.1666 2.95 20.1666H9.36667C9.87293 20.1666 10.2833 19.7562 10.2833 19.25V12.8333C10.2833 12.3271 9.87293 11.9166 9.36667 11.9166H2.95ZM13.95 18.3333V13.75H18.5333V18.3333H13.95ZM12.1167 12.8333C12.1167 12.3271 12.5271 11.9166 13.0333 11.9166H19.45C19.9563 11.9166 20.3667 12.3271 20.3667 12.8333V19.25C20.3667 19.7562 19.9563 20.1666 19.45 20.1666H13.0333C12.5271 20.1666 12.1167 19.7562 12.1167 19.25V12.8333Z" fill="white"/>
-</svg>
+<svg viewBox="0 0 22 22">
+	<path d="M7.228,11.464H1.996c-0.723,0-1.308,0.587-1.308,1.309v5.232c0,0.722,0.585,1.308,1.308,1.308h5.232
+		c0.723,0,1.308-0.586,1.308-1.308v-5.232C8.536,12.051,7.95,11.464,7.228,11.464z M7.228,17.351c0,0.361-0.293,0.654-0.654,0.654
+		H2.649c-0.361,0-0.654-0.293-0.654-0.654v-3.924c0-0.361,0.292-0.654,0.654-0.654h3.924c0.361,0,0.654,0.293,0.654,0.654V17.351z
+		 M17.692,11.464H12.46c-0.723,0-1.308,0.587-1.308,1.309v5.232c0,0.722,0.585,1.308,1.308,1.308h5.232
+		c0.722,0,1.308-0.586,1.308-1.308v-5.232C19,12.051,18.414,11.464,17.692,11.464z M17.692,17.351c0,0.361-0.293,0.654-0.654,0.654
+		h-3.924c-0.361,0-0.654-0.293-0.654-0.654v-3.924c0-0.361,0.293-0.654,0.654-0.654h3.924c0.361,0,0.654,0.293,0.654,0.654V17.351z
+		 M7.228,1H1.996C1.273,1,0.688,1.585,0.688,2.308V7.54c0,0.723,0.585,1.308,1.308,1.308h5.232c0.723,0,1.308-0.585,1.308-1.308
+		V2.308C8.536,1.585,7.95,1,7.228,1z M7.228,6.886c0,0.361-0.293,0.654-0.654,0.654H2.649c-0.361,0-0.654-0.292-0.654-0.654V2.962
+		c0-0.361,0.292-0.654,0.654-0.654h3.924c0.361,0,0.654,0.292,0.654,0.654V6.886z M17.692,1H12.46c-0.723,0-1.308,0.585-1.308,1.308
+		V7.54c0,0.723,0.585,1.308,1.308,1.308h5.232C18.414,8.848,19,8.263,19,7.54V2.308C19,1.585,18.414,1,17.692,1z M17.692,6.886
+		c0,0.361-0.293,0.654-0.654,0.654h-3.924c-0.361,0-0.654-0.292-0.654-0.654V2.962c0-0.361,0.293-0.654,0.654-0.654h3.924
+		c0.361,0,0.654,0.292,0.654,0.654V6.886z"></path>
+</svg>

react/features/base/icons/svg/virtual-background.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="white" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6666 1.66667H3.33329C2.41282 1.66667 1.66663 2.41286 1.66663 3.33334V16.6667C1.66663 17.5871 2.41282 18.3333 3.33329 18.3333H3.63257H8.56767H9.14753H15.6942H16.6666C17.5871 18.3333 18.3333 17.5871 18.3333 16.6667V3.33334C18.3333 2.41286 17.5871 1.66667 16.6666 1.66667ZM7.57977 12.3005L9.3687 14.893L12.0223 8.76728C12.2052 8.34496 12.6959 8.15091 13.1182 8.33385C13.2964 8.41106 13.4421 8.54811 13.53 8.72131L16.6666 14.9002V3.33334H3.33329V16.4665L6.208 12.3005C6.4694 11.9217 6.98838 11.8265 7.36718 12.0879C7.45035 12.1453 7.52238 12.2174 7.57977 12.3005ZM7.49996 10C6.11925 10 4.99996 8.88072 4.99996 7.5C4.99996 6.11929 6.11925 5.00001 7.49996 5.00001C8.88067 5.00001 9.99996 6.11929 9.99996 7.5C9.99996 8.88072 8.88067 10 7.49996 10ZM8.33329 7.5C8.33329 7.96024 7.9602 8.33334 7.49996 8.33334C7.03972 8.33334 6.66663 7.96024 6.66663 7.5C6.66663 7.03977 7.03972 6.66667 7.49996 6.66667C7.9602 6.66667 8.33329 7.03977 8.33329 7.5ZM12.8466 11.0572L15.6942 16.6667H10.4167L12.8466 11.0572ZM6.89389 14.2411L8.56767 16.6667H5.2201L6.89389 14.2411Z" />
+</svg>

react/features/base/lib-jitsi-meet/functions.any.js

@@ -14,9 +14,11 @@ const JitsiConnectionErrors = JitsiMeetJS.errors.connection;
  * are "video" or "audio".
  * @param {string} deviceId - The id of the target media source.
  * @param {number} [timeout] - A timeout for the JitsiMeetJS.createLocalTracks function call.
+ * @param {Object} additionalOptions - Extra options to be passed to lib-jitsi-meet's {@code createLocalTracks}.
+ *
  * @returns {Promise<JitsiLocalTrack>}
  */
-export function createLocalTrack(type: string, deviceId: string, timeout: ?number) {
+export function createLocalTrack(type: string, deviceId: string, timeout: ?number, additionalOptions: ?Object) {
     return (
         JitsiMeetJS.createLocalTracks({
             cameraDeviceId: deviceId,
@@ -26,7 +28,8 @@ export function createLocalTrack(type: string, deviceId: string, timeout: ?numbe
             firefox_fake_device:
                 window.config && window.config.firefox_fake_device,
             micDeviceId: deviceId,
-            timeout
+            timeout,
+            ...additionalOptions
         })
             .then(([ jitsiLocalTrack ]) => jitsiLocalTrack));
 }

react/features/base/premeeting/components/web/Preview.js

@@ -8,6 +8,11 @@ import { getLocalVideoTrack } from '../../../tracks';
 
 export type Props = {
 
+    /**
+     * Flag controlling whether the video should be flipped or not.
+     */
+    flipVideo: boolean,
+
     /**
      * Flag signaling the visibility of camera preview.
      */
@@ -26,13 +31,14 @@ export type Props = {
  * @returns {ReactElement}
  */
 function Preview(props: Props) {
-    const { videoMuted, videoTrack } = props;
+    const { videoMuted, videoTrack, flipVideo } = props;
+    const className = flipVideo ? 'flipVideoX' : '';
 
     if (!videoMuted && videoTrack) {
         return (
             <div id = 'preview'>
                 <Video
-                    className = 'flipVideoX'
+                    className = { className }
                     videoTrack = {{ jitsiTrack: videoTrack }} />
             </div>
         );
@@ -50,6 +56,7 @@ function Preview(props: Props) {
  */
 function _mapStateToProps(state, ownProps) {
     return {
+        flipVideo: state['features/base/settings'].localFlipX,
         videoMuted: ownProps.videoTrack ? ownProps.videoMuted : state['features/base/media'].video.muted,
         videoTrack: ownProps.videoTrack || (getLocalVideoTrack(state['features/base/tracks']) || {}).jitsiTrack
     };

react/features/base/react/components/web/InlineDialogFailure.js

@@ -20,7 +20,12 @@ type Props = {
     /**
      * Invoked to obtain translated strings.
      */
-    t: Function
+    t: Function,
+
+    /**
+     * Indicates whether the support link should be shown in case of an error
+     */
+     showSupportLink: Boolean,
 };
 
 /**
@@ -33,12 +38,12 @@ class InlineDialogFailure extends Component<Props> {
      * @returns {ReactElement}
      */
     render() {
-        const { t } = this.props;
+        const { t, showSupportLink } = this.props;
 
         const supportLink = interfaceConfig.SUPPORT_URL;
         const supportString = t('inlineDialogFailure.supportMsg');
         const supportLinkElem
-            = supportLink
+            = supportLink && showSupportLink
                 ? (
                     <div className = 'inline-dialog-error-text'>
                         <span>{ supportString.padEnd(supportString.length + 1) }

react/features/base/react/components/web/MultiSelectAutocomplete.js

@@ -70,7 +70,12 @@ type Props = {
     /**
      * Indicates if we should focus.
      */
-    shouldFocus: boolean
+    shouldFocus: boolean,
+
+    /**
+     * Indicates whether the support link should be shown in case of an error
+     */
+    showSupportLink: Boolean,
 };
 
 /**
@@ -263,7 +268,8 @@ class MultiSelectAutocomplete extends Component<Props, State> {
         const content = (
             <div className = 'autocomplete-error'>
                 <InlineDialogFailure
-                    onRetry = { this._onRetry } />
+                    onRetry = { this._onRetry }
+                    showSupportLink = { this.props.showSupportLink } />
             </div>
         );
 

react/features/base/styles/components/styles/ColorPalette.js

@@ -23,6 +23,7 @@ export const ColorPalette = {
     blueHighlight: '#1081b2',
     buttonUnderlay: '#495258',
     darkGrey: '#555555',
+    darkBackground: 'rgb(19,21,25)',
     green: '#40b183',
     lightGrey: '#AAAAAA',
     overflowMenuItemUnderlay: '#EEEEEE',

react/features/base/toolbox/components/ToolboxButtonWithIcon.js

@@ -1,150 +0,0 @@
-// @flow
-
-import React, { Component } from 'react';
-
-import { Icon } from '../../icons';
-import { Tooltip } from '../../tooltip';
-
-type Props = {
-
-    /**
-     * The decorated component (ToolboxButton).
-     */
-    children: React$Node,
-
-    /**
-     * Icon of the button.
-     */
-    icon: Function,
-
-    /**
-     * Flag used for disabling the small icon.
-     */
-    iconDisabled: boolean,
-
-    /**
-     * Click handler for the small icon.
-     */
-    onIconClick: Function,
-
-    /**
-     * The tooltip used for the icon.
-     */
-    iconTooltip: string,
-
-    /**
-     * Additional styles.
-     */
-    styles?: Object,
-};
-
-type State = {
-
-    /**
-     * Whether the button is hovered or not.
-     */
-    isHovered: boolean,
-};
-
-/**
- * Displayes the `ToolboxButtonWithIcon` component.
- *
- * @returns {ReactElement}
- */
-export default class ToolboxButtonWithIcon extends Component<Props, State> {
-
-    /**
-     * Initializes a new {@code ToolboxButtonWithIcon} instance.
-     *
-     * @param {Props} props - The props of the component.
-     */
-    constructor(props: Props) {
-        super(props);
-
-        this.state = {
-            isHovered: false
-        };
-        this._onMouseEnter = this._onMouseEnter.bind(this);
-        this._onMouseLeave = this._onMouseLeave.bind(this);
-    }
-
-    _onMouseEnter: () => void;
-
-    /**
-     * Handler for when the small button has the mouse over.
-     *
-     * @returns {void}.
-     */
-    _onMouseEnter() {
-        this.setState({
-            isHovered: true
-        });
-    }
-
-    _onMouseLeave: () => void;
-
-    /**
-     * Handler for when the mouse leaves the small button.
-     *
-     * @returns {void}
-     */
-    _onMouseLeave() {
-        this.setState({
-            isHovered: false
-        });
-    }
-
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {React$Node}
-     */
-    render() {
-        const {
-            children,
-            icon,
-            iconDisabled,
-            iconTooltip,
-            onIconClick,
-            styles
-        } = this.props;
-
-        const iconProps = {};
-        let size = 9;
-
-        if (iconDisabled) {
-            iconProps.className
-                = 'settings-button-small-icon settings-button-small-icon--disabled';
-        } else {
-            iconProps.className = 'settings-button-small-icon';
-            iconProps.onClick = onIconClick;
-
-            if (this.state.isHovered) {
-                iconProps.className = `${iconProps.className} settings-button-small-icon--hovered`;
-                size = 11;
-            }
-        }
-
-        return (
-            <div
-                className = 'settings-button-container'
-                styles = { styles }>
-                {children}
-
-                <div
-                    onMouseEnter = { this._onMouseEnter }
-                    onMouseLeave = { this._onMouseLeave }>
-                    <Tooltip
-                        content = { iconTooltip }
-                        position = 'top'>
-                        <Icon
-                            { ...iconProps }
-                            size = { size }
-                            src = { icon } />
-                    </Tooltip>
-                </div>
-            </div>
-        );
-    }
-}

react/features/base/toolbox/components/_.web.js

@@ -0,0 +1,3 @@
+// @flow
+
+export * from './web';

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

@@ -6,5 +6,4 @@ export type { Props as AbstractButtonProps } from './AbstractButton';
 export { default as AbstractHangupButton } from './AbstractHangupButton';
 export { default as AbstractVideoMuteButton } from './AbstractVideoMuteButton';
 export { default as BetaTag } from './BetaTag';
-export { default as OverflowMenuItem } from './OverflowMenuItem';
-export { default as ToolboxButtonWithIcon } from './ToolboxButtonWithIcon';
+export * from './_';

react/features/base/toolbox/components/web/OverflowMenuItem.js

@@ -2,8 +2,8 @@
 
 import React, { Component } from 'react';
 
-import { Icon } from '../../icons';
-import { Tooltip } from '../../tooltip';
+import { Icon } from '../../../icons';
+import { Tooltip } from '../../../tooltip';
 
 /**
  * The type of the React {@code Component} props of {@link OverflowMenuItem}.

react/features/base/toolbox/components/web/ToolboxButtonWithIcon.js

@@ -0,0 +1,86 @@
+// @flow
+
+import React from 'react';
+
+import { Icon } from '../../../icons';
+import { Tooltip } from '../../../tooltip';
+
+type Props = {
+
+    /**
+     * The decorated component (ToolboxButton).
+     */
+    children: React$Node,
+
+    /**
+     * Icon of the button.
+     */
+    icon: Function,
+
+    /**
+     * Flag used for disabling the small icon.
+     */
+    iconDisabled: boolean,
+
+    /**
+     * Click handler for the small icon.
+     */
+    onIconClick: Function,
+
+    /**
+     * The tooltip used for the icon.
+     */
+    iconTooltip: string,
+
+    /**
+     * Additional styles.
+     */
+    styles?: Object,
+};
+
+/**
+ * Displays the `ToolboxButtonWithIcon` component.
+ *
+ * @param {Object} props - Component's props.
+ * @returns {ReactElement}
+ */
+export default function ToolboxButtonWithIcon(props: Props) {
+    const {
+        children,
+        icon,
+        iconDisabled,
+        iconTooltip,
+        onIconClick,
+        styles
+    } = props;
+
+    const iconProps = {};
+
+    if (iconDisabled) {
+        iconProps.className
+            = 'settings-button-small-icon settings-button-small-icon--disabled';
+    } else {
+        iconProps.className = 'settings-button-small-icon';
+        iconProps.onClick = onIconClick;
+    }
+
+
+    return (
+        <div
+            className = 'settings-button-container'
+            styles = { styles }>
+            {children}
+
+            <div>
+                <Tooltip
+                    content = { iconTooltip }
+                    position = 'top'>
+                    <Icon
+                        { ...iconProps }
+                        size = { 9 }
+                        src = { icon } />
+                </Tooltip>
+            </div>
+        </div>
+    );
+}

react/features/base/toolbox/components/web/ToolboxItem.js

@@ -0,0 +1,119 @@
+// @flow
+
+import React, { Fragment } from 'react';
+
+import { Icon } from '../../../icons';
+import { Tooltip } from '../../../tooltip';
+import AbstractToolboxItem from '../AbstractToolboxItem';
+import type { Props } from '../AbstractToolboxItem';
+
+/**
+ * Web implementation of {@code AbstractToolboxItem}.
+ */
+export default class ToolboxItem extends AbstractToolboxItem<Props> {
+    /**
+     * Initializes a new {@code ToolboxItem} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this._onKeyDown = this._onKeyDown.bind(this);
+    }
+
+    _onKeyDown: (Object) => void;
+
+    /**
+     * Handles 'Enter' key on the button to trigger onClick for accessibility.
+     * We should be handling Space onKeyUp but it conflicts with PTT.
+     *
+     * @param {Object} event - The key event.
+     * @private
+     * @returns {void}
+     */
+    _onKeyDown(event) {
+        // 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') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.props.onClick();
+        }
+    }
+
+    /**
+     * Handles rendering of the actual item. If the label is being shown, which
+     * is controlled with the `showLabel` prop, the item is rendered for its
+     * display in an overflow menu, otherwise it will only have an icon, which
+     * can be displayed on any toolbar.
+     *
+     * @protected
+     * @returns {ReactElement}
+     */
+    _renderItem() {
+        const {
+            disabled,
+            elementAfter,
+            onClick,
+            showLabel,
+            tooltipPosition,
+            toggled
+        } = this.props;
+        const className = showLabel ? 'overflow-menu-item' : 'toolbox-button';
+        const props = {
+            'aria-pressed': toggled,
+            'aria-disabled': disabled,
+            'aria-label': this.accessibilityLabel,
+            className: className + (disabled ? ' disabled' : ''),
+            onClick: disabled ? undefined : onClick,
+            onKeyDown: this._onKeyDown,
+            tabIndex: 0,
+            role: 'button'
+        };
+
+        const elementType = showLabel ? 'li' : 'div';
+        const useTooltip = this.tooltip && this.tooltip.length > 0;
+        let children = (
+            <Fragment>
+                { this._renderIcon() }
+                { showLabel && <span>
+                    { this.label }
+                </span> }
+                { elementAfter }
+            </Fragment>
+        );
+
+        if (useTooltip) {
+            children = (
+                <Tooltip
+                    content = { this.tooltip }
+                    position = { tooltipPosition }>
+                    { children }
+                </Tooltip>
+            );
+        }
+
+        return React.createElement(elementType, props, children);
+    }
+
+    /**
+     * Helper function to render the item's icon.
+     *
+     * @private
+     * @returns {ReactElement}
+     */
+    _renderIcon() {
+        const { customClass, disabled, icon, showLabel, toggled } = this.props;
+        const iconComponent = <Icon src = { icon } />;
+        const elementType = showLabel ? 'span' : 'div';
+        const className = `${showLabel ? 'overflow-menu-item-icon' : 'toolbox-icon'} ${
+            toggled ? 'toggled' : ''} ${disabled ? 'disabled' : ''} ${customClass ?? ''}`;
+
+        return React.createElement(elementType, { className }, iconComponent);
+    }
+}

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

@@ -0,0 +1,4 @@
+// @flow
+
+export { default as OverflowMenuItem } from './OverflowMenuItem';
+export { default as ToolboxButtonWithIcon } from './ToolboxButtonWithIcon';

react/features/base/tracks/actions.js

@@ -1,9 +1,11 @@
+/* global APP */
+
 import {
     createTrackMutedEvent,
     sendAnalytics
 } from '../../analytics';
 import { showErrorNotification, showNotification } from '../../notifications';
-import { JitsiTrackErrors, JitsiTrackEvents } from '../lib-jitsi-meet';
+import { JitsiTrackErrors, JitsiTrackEvents, createLocalTrack } from '../lib-jitsi-meet';
 import {
     CAMERA_FACING_MODE,
     MEDIA_TYPE,
@@ -13,6 +15,7 @@ import {
     VIDEO_TYPE
 } from '../media';
 import { getLocalParticipant } from '../participants';
+import { updateSettings } from '../settings';
 
 import {
     SET_NO_SRC_DATA_NOTIFICATION_UID,
@@ -717,3 +720,38 @@ export function updateLastTrackVideoMediaEvent(track, name) {
         name
     };
 }
+
+/**
+ * Toggles the facingMode constraint on the video stream.
+ *
+ * @returns {Function}
+ */
+export function toggleCamera() {
+    return async (dispatch, getState) => {
+        const state = getState();
+        const tracks = state['features/base/tracks'];
+        const localVideoTrack = getLocalVideoTrack(tracks).jitsiTrack;
+        const currentFacingMode = localVideoTrack.getCameraFacingMode();
+
+        /**
+         * FIXME: Ideally, we should be dispatching {@code replaceLocalTrack} here,
+         * but it seems to not trigger the re-rendering of the local video on Chrome;
+         * could be due to a plan B vs unified plan issue. Therefore, we use the legacy
+         * method defined in conference.js that manually takes care of updating the local
+         * video as well.
+         */
+        await APP.conference.useVideoStream(null);
+
+        const targetFacingMode = currentFacingMode === CAMERA_FACING_MODE.USER
+            ? CAMERA_FACING_MODE.ENVIRONMENT
+            : CAMERA_FACING_MODE.USER;
+
+        // Update the flipX value so the environment facing camera is not flipped, before the new track is created.
+        dispatch(updateSettings({ localFlipX: targetFacingMode === CAMERA_FACING_MODE.USER }));
+
+        const newVideoTrack = await createLocalTrack('video', null, null, { facingMode: targetFacingMode });
+
+        // FIXME: See above.
+        await APP.conference.useVideoStream(newVideoTrack);
+    };
+}

react/features/base/tracks/loadEffects.web.js

@@ -1,7 +1,7 @@
 // @flow
 
-import { getBlurEffect } from '../../blur';
 import { createScreenshotCaptureEffect } from '../../stream-effects/screenshot-capture';
+import { createVirtualBackgroundEffect } from '../../stream-effects/virtual-background';
 
 import logger from './logger';
 
@@ -13,11 +13,12 @@ import logger from './logger';
  */
 export default function loadEffects(store: Object): Promise<any> {
     const state = store.getState();
+    const virtualBackground = state['features/virtual-background'];
 
-    const blurPromise = state['features/blur'].blurEnabled
-        ? getBlurEffect()
+    const backgroundPromise = virtualBackground.backgroundEffectEnabled
+        ? createVirtualBackgroundEffect(virtualBackground)
             .catch(error => {
-                logger.error('Failed to obtain the blur effect instance with error: ', error);
+                logger.error('Failed to obtain the background effect instance with error: ', error);
 
                 return Promise.resolve();
             })
@@ -31,5 +32,5 @@ export default function loadEffects(store: Object): Promise<any> {
             })
         : Promise.resolve();
 
-    return Promise.all([ blurPromise, screenshotCapturePromise ]);
+    return Promise.all([ backgroundPromise, screenshotCapturePromise ]);
 }

react/features/billing-counter/constants.js

@@ -1,7 +1,7 @@
 /**
  * The key for the billing id stored in localStorage.
  */
-export const BILLING_ID = 'billingId';
+export const BILLING_ID = 'jitsiMeetId';
 
 /**
  * The prefix for the vpaas tenant.

react/features/blur/actionTypes.js

@@ -1,21 +0,0 @@
-// @flow
-
-/**
- * The type of redux action dispatched which represents that the blur
- * is enabled.
- *
- * {
- *      type: BLUR_ENABLED
- * }
- */
-export const BLUR_ENABLED = 'BLUR_ENABLED';
-
-/**
- * The type of redux action dispatched which represents that the blur
- * is disabled.
- *
- * {
- *      type: BLUR_DISABLED
- * }
- */
-export const BLUR_DISABLED = 'BLUR_DISABLED';

react/features/blur/actions.js

@@ -1,67 +0,0 @@
-// @flow
-
-import { getLocalVideoTrack } from '../../features/base/tracks';
-
-import { BLUR_DISABLED, BLUR_ENABLED } from './actionTypes';
-import { getBlurEffect } from './functions';
-import logger from './logger';
-
-/**
-* Signals the local participant is switching between blurred or non blurred video.
-*
-* @param {boolean} enabled - If true enables video blur, false otherwise.
-* @returns {Promise}
-*/
-export function toggleBlurEffect(enabled: boolean) {
-    return function(dispatch: (Object) => Object, getState: () => any) {
-        const state = getState();
-
-        if (state['features/blur'].blurEnabled !== enabled) {
-            const { jitsiTrack } = getLocalVideoTrack(state['features/base/tracks']);
-
-            return getBlurEffect()
-                .then(blurEffectInstance =>
-                    jitsiTrack.setEffect(enabled ? blurEffectInstance : undefined)
-                        .then(() => {
-                            enabled ? dispatch(blurEnabled()) : dispatch(blurDisabled());
-                        })
-                        .catch(error => {
-                            enabled ? dispatch(blurDisabled()) : dispatch(blurEnabled());
-                            logger.error('setEffect failed with error:', error);
-                        })
-                )
-                .catch(error => {
-                    dispatch(blurDisabled());
-                    logger.error('getBlurEffect failed with error:', error);
-                });
-        }
-
-        return Promise.resolve();
-    };
-}
-
-/**
- * Signals the local participant that the blur has been enabled.
- *
- * @returns {{
- *      type: BLUR_ENABLED
- * }}
- */
-export function blurEnabled() {
-    return {
-        type: BLUR_ENABLED
-    };
-}
-
-/**
- * Signals the local participant that the blur has been disabled.
- *
- * @returns {{
- *      type: BLUR_DISABLED
- * }}
- */
-export function blurDisabled() {
-    return {
-        type: BLUR_DISABLED
-    };
-}

react/features/blur/components/index.js

@@ -1 +0,0 @@
-export { default as VideoBlurButton } from './VideoBlurButton';

react/features/blur/functions.js

@@ -1,38 +0,0 @@
-// @flow
-
-import { getJitsiMeetGlobalNS, loadScript } from '../base/util';
-
-let filterSupport;
-
-/**
- * Returns promise that resolves with the blur effect instance.
- *
- * @returns {Promise<JitsiStreamBlurEffect>} - Resolves with the blur effect instance.
- */
-export function getBlurEffect() {
-    const ns = getJitsiMeetGlobalNS();
-
-    if (ns.effects && ns.effects.createBlurEffect) {
-        return ns.effects.createBlurEffect();
-    }
-
-    return loadScript('libs/video-blur-effect.min.js').then(() => ns.effects.createBlurEffect());
-}
-
-/**
- * Checks context filter support.
- *
- * @returns {boolean} True if the filter is supported and false if the filter is not supported by the browser.
- */
-export function checkBlurSupport() {
-    if (typeof filterSupport === 'undefined') {
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-
-        filterSupport = typeof ctx.filter !== 'undefined';
-
-        canvas.remove();
-    }
-
-    return filterSupport;
-}

react/features/blur/reducer.js

@@ -1,26 +0,0 @@
-// @flow
-
-import { ReducerRegistry } from '../base/redux';
-
-import { BLUR_ENABLED, BLUR_DISABLED } from './actionTypes';
-
-
-ReducerRegistry.register('features/blur', (state = {}, action) => {
-
-    switch (action.type) {
-    case BLUR_ENABLED: {
-        return {
-            ...state,
-            blurEnabled: true
-        };
-    }
-    case BLUR_DISABLED: {
-        return {
-            ...state,
-            blurEnabled: false
-        };
-    }
-    }
-
-    return state;
-});

react/features/chat/components/PrivateMessageButton.js

@@ -1,5 +1,6 @@
 // @flow
 
+import { CHAT_ENABLED, getFeatureFlag } from '../../base/flags';
 import { translate } from '../../base/i18n';
 import { IconMessage, IconReply } from '../../base/icons';
 import { getParticipantById } from '../../base/participants';
@@ -77,8 +78,12 @@ class PrivateMessageButton extends AbstractButton<Props, any> {
  * @returns {Props}
  */
 export function _mapStateToProps(state: Object, ownProps: Props): $Shape<Props> {
+    const enabled = getFeatureFlag(state, CHAT_ENABLED, true);
+    const { visible = enabled } = ownProps;
+
     return {
-        _participant: getParticipantById(state, ownProps.participantID)
+        _participant: getParticipantById(state, ownProps.participantID),
+        visible
     };
 }
 

react/features/conference/components/native/Conference.js

@@ -310,21 +310,10 @@ class Conference extends AbstractConference<Props, *> {
 
                     <LonelyMeetingExperience />
 
-                    {/*
-                      * The Toolbox is in a stacking layer below the Filmstrip.
-                      */}
+                    { _shouldDisplayTileView ? undefined : <Filmstrip /> }
+
                     <Toolbox />
 
-                    {/*
-                      * The Filmstrip is in a stacking layer above the
-                      * LargeVideo. The LargeVideo and the Filmstrip form what
-                      * the Web/React app calls "videospace". Presumably, the
-                      * name and grouping stem from the fact that these two
-                      * React Components depict the videos of the conference's
-                      * participants.
-                      */
-                        _shouldDisplayTileView ? undefined : <Filmstrip />
-                    }
                 </SafeAreaView>
 
                 <SafeAreaView

react/features/conference/components/native/styles.js

@@ -164,7 +164,6 @@ export default {
         flexDirection: 'column',
         justifyContent: 'flex-end',
         left: 0,
-        paddingBottom: BoxModel.padding,
         position: 'absolute',
         right: 0,
 

react/features/conference/functions.web.js

@@ -6,7 +6,7 @@ import { toState } from '../base/redux';
 import { getBackendSafePath, getJitsiMeetGlobalNS } from '../base/util';
 import { getVpaasBillingId } from '../billing-counter/functions';
 import { showWarningNotification } from '../notifications';
-import { createRnnoiseProcessorPromise } from '../rnnoise';
+import { createRnnoiseProcessor } from '../stream-effects/rnnoise';
 
 export * from './functions.any';
 
@@ -84,7 +84,7 @@ export function getConferenceOptions(stateful) {
 
     options.applicationName = getName();
     options.getWiFiStatsMethod = getWiFiStatsMethod;
-    options.createVADProcessor = createRnnoiseProcessorPromise;
+    options.createVADProcessor = createRnnoiseProcessor;
     options.billingId = getVpaasBillingId(state);
 
     // Disable CallStats, if requessted.

react/features/display-name/components/native/styles.js

@@ -5,7 +5,7 @@ import { ColorPalette } from '../../../base/styles';
 export default {
     displayNameBackdrop: {
         alignSelf: 'center',
-        backgroundColor: 'rgba(28, 32, 37, 0.6)',
+        backgroundColor: ColorPalette.darkBackground,
         borderRadius: 4,
         paddingHorizontal: 16,
         paddingVertical: 4

react/features/invite/components/add-people-dialog/web/InviteContactsForm.js

@@ -10,6 +10,7 @@ import { Icon, IconPhone } from '../../../../base/icons';
 import { getLocalParticipant } from '../../../../base/participants';
 import { MultiSelectAutocomplete } from '../../../../base/react';
 import { connect } from '../../../../base/redux';
+import { isVpaasMeeting } from '../../../../billing-counter/functions';
 import { hideAddPeopleDialog } from '../../../actions';
 import AbstractAddPeopleDialog, {
     type Props as AbstractProps,
@@ -31,6 +32,11 @@ type Props = AbstractProps & {
      */
     _footerTextEnabled: boolean,
 
+    /**
+     * Whether the meeting belongs to JaaS user
+     */
+    _isVpaas: boolean,
+
     /**
      * The redux {@code dispatch} function.
      */
@@ -110,6 +116,7 @@ class InviteContactsForm extends AbstractAddPeopleDialog<Props, State> {
         const {
             _addPeopleEnabled,
             _dialOutEnabled,
+            _isVpaas,
             t
         } = this.props;
         const footerText = this._renderFooterText();
@@ -152,7 +159,8 @@ class InviteContactsForm extends AbstractAddPeopleDialog<Props, State> {
                     ref = { this._setMultiSelectElement }
                     resourceClient = { this._resourceClient }
                     shouldFitContainer = { true }
-                    shouldFocus = { true } />
+                    shouldFocus = { true }
+                    showSupportLink = { !_isVpaas } />
                 { this._renderFormActions() }
             </div>
         );
@@ -516,7 +524,8 @@ function _mapStateToProps(state) {
 
     return {
         ..._abstractMapStateToProps(state),
-        _footerTextEnabled: footerTextEnabled
+        _footerTextEnabled: footerTextEnabled,
+        _isVpaas: isVpaasMeeting(state)
     };
 }
 

react/features/mobile/audio-mode/middleware.js

@@ -1,5 +1,5 @@
 // @flow
-import { NativeEventEmitter, NativeModules, Platform } from 'react-native';
+import { NativeEventEmitter, NativeModules } from 'react-native';
 
 import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../base/app';
 import { SET_AUDIO_ONLY } from '../../base/audio-only';
@@ -9,7 +9,7 @@ import {
     CONFERENCE_JOINED,
     getCurrentConference
 } from '../../base/conference';
-import { getFeatureFlag, ANDROID_AUDIO_FOCUS_DISABLED } from '../../base/flags';
+import { getFeatureFlag, AUDIO_FOCUS_DISABLED } from '../../base/flags';
 import { MiddlewareRegistry } from '../../base/redux';
 
 import { _SET_AUDIOMODE_DEVICES, _SET_AUDIOMODE_SUBSCRIPTIONS } from './actionTypes';
@@ -140,8 +140,8 @@ function _updateAudioMode({ getState }, next, action) {
     const { enabled: audioOnly } = state['features/base/audio-only'];
     let mode;
 
-    if (Platform.OS === 'android' && getFeatureFlag(state, ANDROID_AUDIO_FOCUS_DISABLED, false)) {
-        mode = AudioMode.DEFAULT;
+    if (getFeatureFlag(state, AUDIO_FOCUS_DISABLED, false)) {
+        return result;
     } else if (conference) {
         mode = audioOnly ? AudioMode.AUDIO_CALL : AudioMode.VIDEO_CALL;
     } else {

react/features/rnnoise/functions.js

@@ -1,27 +0,0 @@
-// @flow
-
-import { getJitsiMeetGlobalNS, loadScript } from '../base/util';
-
-let loadRnnoisePromise;
-
-/**
- * Returns promise that resolves with a RnnoiseProcessor instance.
- *
- * @returns {Promise<RnnoiseProcessor>} - Resolves with the blur effect instance.
- */
-export function createRnnoiseProcessorPromise() {
-    // Subsequent calls should not attempt to load the script multiple times.
-    if (!loadRnnoisePromise) {
-        loadRnnoisePromise = loadScript('libs/rnnoise-processor.min.js');
-    }
-
-    return loadRnnoisePromise.then(() => {
-        const ns = getJitsiMeetGlobalNS();
-
-        if (ns?.effects?.rnnoise?.createRnnoiseProcessor) {
-            return ns.effects.rnnoise.createRnnoiseProcessor();
-        }
-
-        throw new Error('Rnnoise module binding createRnnoiseProcessor not found!');
-    });
-}

react/features/rnnoise/index.js

@@ -1,2 +0,0 @@
-
-export * from './functions';

react/features/settings/components/web/video/VideoSettingsContent.js

@@ -162,7 +162,10 @@ class VideoSettingsContent extends Component<Props, State> {
         return (
             <div { ...props }>
                 <div className = 'video-preview-label'>
-                    {label && <span className = 'video-preview-label-text'>{label}</span>}
+                    {label && <div className = 'video-preview-label-container'>
+                        <div className = 'video-preview-label-text'>
+                            <span>{label}</span></div>
+                    </div>}
                 </div>
                 <div className = 'video-preview-overlay' />
                 <Video

react/features/settings/components/web/video/VideoSettingsPopup.js

@@ -56,7 +56,7 @@ function VideoSettingsPopup({
                     videoDeviceIds = { videoDeviceIds } /> }
                 isOpen = { isOpen }
                 onClose = { onClose }
-                placement = 'top-end'>
+                placement = 'top-start'>
                 { children }
             </InlineDialog>
         </div>

react/features/stream-effects/audio-mixer/AudioMixerEffect.js

@@ -14,6 +14,16 @@ export class AudioMixerEffect {
      */
     _mixAudio: Object;
 
+    /**
+     * Original MediaStream from the JitsiLocalTrack that uses this effect.
+     */
+    _originalStream: Object;
+
+    /**
+     * MediaStreamTrack obtained from the original MediaStream.
+     */
+    _originalTrack: Object;
+
     /**
      * lib-jitsi-meet AudioMixer.
      */
@@ -51,9 +61,12 @@ export class AudioMixerEffect {
      * @returns {MediaStream} - MediaStream containing both audio tracks mixed together.
      */
     startEffect(audioStream: MediaStream) {
+        this._originalStream = audioStream;
+        this._originalTrack = audioStream.getTracks()[0];
+
         this._audioMixer = JitsiMeetJS.createAudioMixer();
         this._audioMixer.addMediaStream(this._mixAudio.getOriginalStream());
-        this._audioMixer.addMediaStream(audioStream);
+        this._audioMixer.addMediaStream(this._originalStream);
 
         return this._audioMixer.start();
     }
@@ -67,4 +80,22 @@ export class AudioMixerEffect {
         this._audioMixer.reset();
     }
 
+    /**
+     * Change the muted state of the effect.
+     *
+     * @param {boolean} muted - Should effect be muted or not.
+     * @returns {void}
+     */
+    setMuted(muted: boolean) {
+        this._originalTrack.enabled = !muted;
+    }
+
+    /**
+     * Check wether or not this effect is muted.
+     *
+     * @returns {boolean}
+     */
+    isMuted() {
+        return !this._originalTrack.enabled;
+    }
 }

react/features/stream-effects/blur/index.js

@@ -1,61 +0,0 @@
-// @flow
-
-import * as wasmCheck from 'wasm-check';
-
-import JitsiStreamBlurEffect from './JitsiStreamBlurEffect';
-import createTFLiteModule from './vendor/tflite/tflite';
-import createTFLiteSIMDModule from './vendor/tflite/tflite-simd';
-
-const models = {
-    'model96': 'libs/segm_lite_v681.tflite',
-    'model144': 'libs/segm_full_v679.tflite'
-};
-
-const segmentationDimensions = {
-    'model96': {
-        'height': 96,
-        'width': 160
-    },
-    'model144': {
-        'height': 144,
-        'width': 256
-    }
-};
-
-/**
- * Creates a new instance of JitsiStreamBlurEffect. This loads the bodyPix model that is used to
- * extract person segmentation.
- *
- * @returns {Promise<JitsiStreamBlurEffect>}
- */
-export async function createBlurEffect() {
-    if (!MediaStreamTrack.prototype.getSettings && !MediaStreamTrack.prototype.getConstraints) {
-        throw new Error('JitsiStreamBlurEffect not supported!');
-    }
-    let tflite;
-
-    if (wasmCheck.feature.simd) {
-        tflite = await createTFLiteSIMDModule();
-    } else {
-        tflite = await createTFLiteModule();
-    }
-
-    const modelBufferOffset = tflite._getModelBufferMemoryOffset();
-    const modelResponse = await fetch(
-        wasmCheck.feature.simd ? models.model144 : models.model96
-    );
-
-    if (!modelResponse.ok) {
-        throw new Error('Failed to download tflite model!');
-    }
-
-    const model = await modelResponse.arrayBuffer();
-
-    tflite.HEAPU8.set(new Uint8Array(model), modelBufferOffset);
-
-    tflite._loadModel(model.byteLength);
-
-    const options = wasmCheck.feature.simd ? segmentationDimensions.model144 : segmentationDimensions.model96;
-
-    return new JitsiStreamBlurEffect(tflite, options);
-}

react/features/stream-effects/virtual-background/JitsiStreamBackgroundEffect.js

@@ -9,11 +9,11 @@ import {
 const blurValue = '25px';
 
 /**
- * Represents a modified MediaStream that adds blur to video background.
- * <tt>JitsiStreamBlurEffect</tt> does the processing of the original
+ * Represents a modified MediaStream that adds effects to video background.
+ * <tt>JitsiStreamBackgroundEffect</tt> does the processing of the original
  * video stream.
  */
-export default class JitsiStreamBlurEffect {
+export default class JitsiStreamBackgroundEffect {
     _model: Object;
     _options: Object;
     _segmentationPixelCount: number;
@@ -26,6 +26,7 @@ export default class JitsiStreamBlurEffect {
     _segmentationMask: Object;
     _segmentationMaskCanvas: Object;
     _renderMask: Function;
+    _virtualImage: HTMLImageElement;
     isEnabled: Function;
     startEffect: Function;
     stopEffect: Function;
@@ -38,6 +39,13 @@ export default class JitsiStreamBlurEffect {
      * @param {Object} options - Segmentation dimensions.
      */
     constructor(model: Object, options: Object) {
+        this._options = options;
+
+        if (this._options.virtualBackground.isVirtualBackground) {
+            this._virtualImage = document.createElement('img');
+            this._virtualImage.crossOrigin = 'anonymous';
+            this._virtualImage.src = this._options.virtualBackground.virtualSource;
+        }
         this._model = model;
         this._options = options;
         this._segmentationPixelCount = this._options.width * this._options.height;
@@ -73,7 +81,15 @@ export default class JitsiStreamBlurEffect {
         this._outputCanvasCtx.globalCompositeOperation = 'copy';
 
         // Draw segmentation mask.
-        this._outputCanvasCtx.filter = `blur(${blurValue})`;
+        //
+
+        // Smooth out the edges.
+        if (this._options.virtualBackground.isVirtualBackground) {
+            this._outputCanvasCtx.filter = 'blur(4px)';
+        } else {
+            this._outputCanvasCtx.filter = 'blur(8px)';
+        }
+
         this._outputCanvasCtx.drawImage(
             this._segmentationMaskCanvas,
             0,
@@ -85,14 +101,24 @@ export default class JitsiStreamBlurEffect {
             this._inputVideoElement.width,
             this._inputVideoElement.height
         );
-
         this._outputCanvasCtx.globalCompositeOperation = 'source-in';
         this._outputCanvasCtx.filter = 'none';
+
+        // Draw the foreground video.
+        //
+
         this._outputCanvasCtx.drawImage(this._inputVideoElement, 0, 0);
 
+        // Draw the background.
+        //
+
         this._outputCanvasCtx.globalCompositeOperation = 'destination-over';
-        this._outputCanvasCtx.filter = `blur(${blurValue})`;
-        this._outputCanvasCtx.drawImage(this._inputVideoElement, 0, 0);
+        if (this._options.virtualBackground.isVirtualBackground) {
+            this._outputCanvasCtx.drawImage(this._virtualImage, 0, 0);
+        } else {
+            this._outputCanvasCtx.filter = `blur(${blurValue})`;
+            this._outputCanvasCtx.drawImage(this._inputVideoElement, 0, 0);
+        }
     }
 
     /**
@@ -196,6 +222,7 @@ export default class JitsiStreamBlurEffect {
         this._segmentationMaskCanvas.width = this._options.width;
         this._segmentationMaskCanvas.height = this._options.height;
         this._segmentationMaskCtx = this._segmentationMaskCanvas.getContext('2d');
+
         this._outputCanvasElement.width = parseInt(width, 10);
         this._outputCanvasElement.height = parseInt(height, 10);
         this._outputCanvasCtx = this._outputCanvasElement.getContext('2d');