feat(rn,filmstrip) add 1on1 mode

When there are only 2 participants in a call, don't show the remote thumbnail,
unless the `disable1On1Mode` config option is set or the local participant pin
themselves.

android/gradle.properties

@@ -25,5 +25,5 @@ android.enableDexingArtifactTransform.desugaring=false
 android.useAndroidX=true
 android.enableJetifier=true
 
-appVersion=21.2.0
-sdkVersion=3.7.0
+appVersion=21.3.0
+sdkVersion=3.8.0

ios/app/broadcast-extension/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
 	<key>CFBundleShortVersionString</key>
-	<string>21.2.0</string>
+	<string>21.3.0</string>
 	<key>CFBundleVersion</key>
 	<string>1</string>
 	<key>NSExtension</key>

ios/app/src/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>21.2.0</string>
+	<string>21.3.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>

ios/app/watchos/app/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>21.2.0</string>
+	<string>21.3.0</string>
 	<key>CFBundleVersion</key>
 	<string>1</string>
 	<key>UISupportedInterfaceOrientations</key>

ios/app/watchos/extension/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>XPC!</string>
 	<key>CFBundleShortVersionString</key>
-	<string>21.2.0</string>
+	<string>21.3.0</string>
 	<key>CFBundleVersion</key>
 	<string>1</string>
 	<key>CLKComplicationPrincipalClass</key>

ios/sdk/src/Info.plist

@@ -15,7 +15,7 @@
 	<key>CFBundlePackageType</key>
 	<string>FMWK</string>
 	<key>CFBundleShortVersionString</key>
-	<string>3.7.0</string>
+	<string>3.8.0</string>
 	<key>CFBundleVersion</key>
 	<string>$(CURRENT_PROJECT_VERSION)</string>
 	<key>NSPrincipalClass</key>

modules/API/external/external_api.js

@@ -170,7 +170,7 @@ function parseArguments(args) {
 
     switch (typeof firstArg) {
     case 'string': // old arguments format
-    case undefined: {
+    case 'undefined': {
         // Not sure which format but we are trying to parse the old
         // format because if the new format is used everything will be undefined
         // anyway.

package-lock.json

@@ -11087,8 +11087,8 @@
       }
     },
     "lib-jitsi-meet": {
-      "version": "github:jitsi/lib-jitsi-meet#fa834c2923e78fe00cc206b1bc99248874d544c6",
-      "from": "github:jitsi/lib-jitsi-meet#fa834c2923e78fe00cc206b1bc99248874d544c6",
+      "version": "github:jitsi/lib-jitsi-meet#6a3df11ffa7a2204b579326e23cdaa85a79521d1",
+      "from": "github:jitsi/lib-jitsi-meet#6a3df11ffa7a2204b579326e23cdaa85a79521d1",
       "requires": {
         "@jitsi/js-utils": "1.0.2",
         "@jitsi/sdp-interop": "github:jitsi/sdp-interop#5fc4af6dcf8a6e6af9fedbcd654412fd47b1b4ae",

package.json

@@ -56,7 +56,7 @@
     "jquery-i18next": "1.2.1",
     "js-md5": "0.6.1",
     "jwt-decode": "2.2.0",
-    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#fa834c2923e78fe00cc206b1bc99248874d544c6",
+    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#6a3df11ffa7a2204b579326e23cdaa85a79521d1",
     "libflacjs": "github:mmig/libflac.js#93d37e7f811f01cf7d8b6a603e38bd3c3810907d",
     "lodash": "4.17.21",
     "moment": "2.29.1",

react/features/base/tracks/actions.js

@@ -227,7 +227,7 @@ export function noDataFromSource(track) {
  * @returns {Function}
  */
 export function showNoDataFromSourceVideoError(jitsiTrack) {
-    return (dispatch, getState) => {
+    return async (dispatch, getState) => {
         let notificationInfo;
 
         const track = getTrackByJitsiTrack(getState()['features/base/tracks'], jitsiTrack);
@@ -239,12 +239,11 @@ export function showNoDataFromSourceVideoError(jitsiTrack) {
         if (track.isReceivingData) {
             notificationInfo = undefined;
         } else {
-            const notificationAction = showErrorNotification({
+            const notificationAction = await dispatch(showErrorNotification({
                 descriptionKey: 'dialog.cameraNotSendingData',
                 titleKey: 'dialog.cameraNotSendingDataTitle'
-            });
+            }));
 
-            dispatch(notificationAction);
             notificationInfo = {
                 uid: notificationAction.uid
             };
@@ -362,7 +361,7 @@ function replaceStoredTracks(oldTrack, newTrack) {
  * @returns {{ type: TRACK_ADDED, track: Track }}
  */
 export function trackAdded(track) {
-    return (dispatch, getState) => {
+    return async (dispatch, getState) => {
         track.on(
             JitsiTrackEvents.TRACK_MUTE_CHANGED,
             () => dispatch(trackMutedChanged(track)));
@@ -389,12 +388,10 @@ export function trackAdded(track) {
             track.on(JitsiTrackEvents.NO_DATA_FROM_SOURCE, () => dispatch(noDataFromSource({ jitsiTrack: track })));
             if (!isReceivingData) {
                 if (mediaType === MEDIA_TYPE.AUDIO) {
-                    const notificationAction = showNotification({
+                    const notificationAction = await dispatch(showNotification({
                         descriptionKey: 'dialog.micNotSendingData',
                         titleKey: 'dialog.micNotSendingDataTitle'
-                    });
-
-                    dispatch(notificationAction);
+                    }));
 
                     // Set the notification ID so that other parts of the application know that this was
                     // displayed in the context of the current device.

react/features/conference/components/web/ConferenceInfo.js

@@ -120,6 +120,13 @@ function ConferenceInfo(props: Props) {
                     }
                     { _showParticipantCount && <ParticipantsCount /> }
                     <E2EELabel />
+                    {_hideRecordingLabel && (
+                        <>
+                            <RecordingLabel mode = { JitsiRecordingConstants.mode.FILE } />
+                            <RecordingLabel mode = { JitsiRecordingConstants.mode.STREAM } />
+                            <LocalRecordingLabel />
+                        </>
+                    )}
                     <TranscribingLabel />
                     <VideoQualityLabel />
                     <InsecureRoomNameLabel />
@@ -148,10 +155,12 @@ function _mapStateToProps(state) {
         hideConferenceTimer,
         hideConferenceSubject,
         hideParticipantsStats,
-        hideRecordingLabel
+        hideRecordingLabel,
+        iAmRecorder
     } = state['features/base/config'];
     const { clientWidth } = state['features/base/responsive-ui'];
 
+    const shouldHideRecordingLabel = hideRecordingLabel || iAmRecorder;
     const fileRecordingStatus = getSessionStatusToShow(state, JitsiRecordingConstants.mode.FILE);
     const streamRecordingStatus = getSessionStatusToShow(state, JitsiRecordingConstants.mode.STREAM);
     const isFileRecording = fileRecordingStatus ? fileRecordingStatus !== JitsiRecordingConstants.status.OFF : false;
@@ -162,12 +171,12 @@ function _mapStateToProps(state) {
     return {
         _hideConferenceNameAndTimer: clientWidth < 300,
         _hideConferenceTimer: Boolean(hideConferenceTimer),
-        _hideRecordingLabel: hideRecordingLabel,
+        _hideRecordingLabel: shouldHideRecordingLabel,
         _fullWidth: state['features/video-layout'].tileViewEnabled,
         _showParticipantCount: participantCount > 2 && !hideParticipantsStats,
         _subject: hideConferenceSubject ? '' : getConferenceName(state),
         _visible: isToolboxVisible(state),
-        _recordingLabel: (isFileRecording || isStreamRecording || isEngaged) && !hideRecordingLabel
+        _recordingLabel: (isFileRecording || isStreamRecording || isEngaged) && !shouldHideRecordingLabel
     };
 }
 

react/features/filmstrip/components/native/Filmstrip.js

@@ -6,12 +6,15 @@ import { SafeAreaView, ScrollView } from 'react-native';
 import { Platform } from '../../../base/react';
 import { connect } from '../../../base/redux';
 import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants';
-import { isFilmstripVisible } from '../../functions';
+import { isFilmstripVisible, shouldRemoteVideosBeVisible } from '../../functions';
 
 import LocalThumbnail from './LocalThumbnail';
 import Thumbnail from './Thumbnail';
 import styles from './styles';
 
+// Immutable reference to avoid re-renders.
+const NO_REMOTE_VIDEOS = [];
+
 /**
  * Filmstrip component's property types.
  */
@@ -167,10 +170,11 @@ class Filmstrip extends Component<Props> {
  */
 function _mapStateToProps(state) {
     const { enabled, remoteParticipants } = state['features/filmstrip'];
+    const showRemoteVideos = shouldRemoteVideosBeVisible(state);
 
     return {
         _aspectRatio: state['features/base/responsive-ui'].aspectRatio,
-        _participants: remoteParticipants,
+        _participants: showRemoteVideos ? remoteParticipants : NO_REMOTE_VIDEOS,
         _visible: enabled && isFilmstripVisible(state)
     };
 }

react/features/filmstrip/functions.native.js

@@ -1,7 +1,7 @@
 // @flow
 
 import { getFeatureFlag, FILMSTRIP_ENABLED } from '../base/flags';
-import { getParticipantCountWithFake } from '../base/participants';
+import { getParticipantCountWithFake, getPinnedParticipant } from '../base/participants';
 import { toState } from '../base/redux';
 
 /**
@@ -26,3 +26,34 @@ export function isFilmstripVisible(stateful: Object | Function) {
     return getParticipantCountWithFake(state) > 1;
 }
 
+/**
+ * Determines whether the remote video thumbnails should be displayed/visible in
+ * the filmstrip.
+ *
+ * @param {Object} state - The full redux state.
+ * @returns {boolean} - If remote video thumbnails should be displayed/visible
+ * in the filmstrip, then {@code true}; otherwise, {@code false}.
+ */
+export function shouldRemoteVideosBeVisible(state: Object) {
+    if (state['features/invite'].calleeInfoVisible) {
+        return false;
+    }
+
+    // Include fake participants to derive how many thumbnails are dispalyed,
+    // as it is assumed all participants, including fake, will be displayed
+    // in the filmstrip.
+    const participantCount = getParticipantCountWithFake(state);
+    const pinnedParticipant = getPinnedParticipant(state);
+    const { disable1On1Mode } = state['features/base/config'];
+
+    return Boolean(
+        participantCount > 2
+
+            // Always show the filmstrip when there is another participant to
+            // show and the local video is pinned. Note we are not taking the
+            // toolbar visibility into account here (unlike web) because
+            // showing / hiding views in quick succession on mobile is taxing.
+            || (participantCount > 1 && pinnedParticipant?.local)
+
+            || disable1On1Mode);
+}

react/features/mobile/watchos/middleware.js

@@ -98,7 +98,7 @@ function _appWillMount({ dispatch, getState }) {
 
         switch (command) {
         case CMD_HANG_UP:
-            if (typeof getCurrentConferenceUrl(getState()) !== undefined) {
+            if (typeof getCurrentConferenceUrl(getState()) !== 'undefined') {
                 dispatch(appNavigate(undefined));
             }
             break;

react/features/toolbox/components/native/OverflowMenu.js

@@ -1,6 +1,7 @@
 // @flow
 
 import React, { PureComponent } from 'react';
+import { Divider } from 'react-native-paper';
 
 import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import { BottomSheet, hideDialog, isDialogOpen } from '../../../base/dialog';
@@ -16,6 +17,7 @@ import SecurityDialogButton from '../../../security/components/security-dialog/S
 import { SharedVideoButton } from '../../../shared-video/components';
 import { ClosedCaptionButton } from '../../../subtitles';
 import { TileViewButton } from '../../../video-layout';
+import styles from '../../../video-menu/components/native/styles';
 import { getMovableButtons } from '../../functions.native';
 import HelpButton from '../HelpButton';
 import MuteEveryoneButton from '../MuteEveryoneButton';
@@ -140,17 +142,20 @@ class OverflowMenu extends PureComponent<Props, State> {
                 <ParticipantsPaneButton { ...buttonProps } />
                 <AudioOnlyButton { ...buttonProps } />
                 {!_reactionsEnabled && !toolbarButtons.has('raisehand') && <RaiseHandButton { ...buttonProps } />}
+                <Divider style = { styles.divider } />
                 <SecurityDialogButton { ...buttonProps } />
+                <RecordButton { ...buttonProps } />
+                <LiveStreamButton { ...buttonProps } />
+                <MuteEveryoneButton { ...buttonProps } />
+                <MuteEveryonesVideoButton { ...buttonProps } />
+                <Divider style = { styles.divider } />
+                <SharedVideoButton { ...buttonProps } />
                 <ScreenSharingButton { ...buttonProps } />
                 {!toolbarButtons.has('togglecamera') && <ToggleCameraButton { ...buttonProps } />}
                 {!toolbarButtons.has('tileview') && <TileViewButton { ...buttonProps } />}
-                <RecordButton { ...buttonProps } />
-                <LiveStreamButton { ...buttonProps } />
-                <SharedVideoButton { ...buttonProps } />
+                <Divider style = { styles.divider } />
                 <ClosedCaptionButton { ...buttonProps } />
                 <SharedDocumentButton { ...buttonProps } />
-                <MuteEveryoneButton { ...buttonProps } />
-                <MuteEveryonesVideoButton { ...buttonProps } />
                 <HelpButton { ...buttonProps } />
             </BottomSheet>
         );

react/features/toolbox/components/web/Toolbox.js

@@ -655,6 +655,12 @@ class Toolbox extends Component<Props> {
             group: 2
         };
 
+        const livestreaming = {
+            key: 'livestreaming',
+            Content: LiveStreamButton,
+            group: 2
+        };
+
         const muteEveryone = {
             key: 'mute-everyone',
             Content: MuteEveryoneButton,
@@ -667,12 +673,6 @@ class Toolbox extends Component<Props> {
             group: 2
         };
 
-        const livestreaming = {
-            key: 'livestreaming',
-            Content: LiveStreamButton,
-            group: 2
-        };
-
         const shareVideo = {
             key: 'sharedvideo',
             Content: SharedVideoButton,
@@ -755,9 +755,9 @@ class Toolbox extends Component<Props> {
             cc,
             recording,
             localRecording,
+            livestreaming,
             muteEveryone,
             muteVideoEveryone,
-            livestreaming,
             shareVideo,
             shareAudio,
             etherpad,

react/features/video-quality/subscriber.js

@@ -189,9 +189,15 @@ function _updateReceiverVideoConstraints({ getState }) {
     }
     const { lastN } = state['features/base/lastn'];
     const { maxReceiverVideoQuality, preferredVideoQuality } = state['features/video-quality'];
-    const { visibleParticipants } = state['features/filmstrip'];
     const { participantId: largeVideoParticipantId } = state['features/large-video'];
     const maxFrameHeight = Math.min(maxReceiverVideoQuality, preferredVideoQuality);
+    let { visibleParticipants } = state['features/filmstrip'];
+
+    // TODO: implement this on mobile.
+    if (navigator.product === 'ReactNative') {
+        visibleParticipants = Array.from(state['features/base/participants'].remote.keys());
+    }
+
     const receiverConstraints = {
         constraints: {},
         defaultConstraints: { 'maxHeight': VIDEO_QUALITY_LEVELS.NONE },

resources/load-test/package-lock.json

@@ -1709,14 +1709,36 @@
       }
     },
     "browserslist": {
-      "version": "4.7.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.7.3.tgz",
-      "integrity": "sha512-jWvmhqYpx+9EZm/FxcZSbUZyDEvDTLDi3nSAKbzEkyWvtI0mNSmUosey+5awDW1RUlrgXbQb5A6qY1xQH9U6MQ==",
+      "version": "4.16.6",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
+      "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001010",
-        "electron-to-chromium": "^1.3.306",
-        "node-releases": "^1.1.40"
+        "caniuse-lite": "^1.0.30001219",
+        "colorette": "^1.2.2",
+        "electron-to-chromium": "^1.3.723",
+        "escalade": "^3.1.1",
+        "node-releases": "^1.1.71"
+      },
+      "dependencies": {
+        "caniuse-lite": {
+          "version": "1.0.30001228",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz",
+          "integrity": "sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==",
+          "dev": true
+        },
+        "electron-to-chromium": {
+          "version": "1.3.736",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.736.tgz",
+          "integrity": "sha512-DY8dA7gR51MSo66DqitEQoUMQ0Z+A2DSXFi7tK304bdTVqczCAfUuyQw6Wdg8hIoo5zIxkU1L24RQtUce1Ioig==",
+          "dev": true
+        },
+        "node-releases": {
+          "version": "1.1.72",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.72.tgz",
+          "integrity": "sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==",
+          "dev": true
+        }
       }
     },
     "buffer": {
@@ -1825,12 +1847,6 @@
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
       "dev": true
     },
-    "caniuse-lite": {
-      "version": "1.0.30001012",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001012.tgz",
-      "integrity": "sha512-7RR4Uh04t9K1uYRWzOJmzplgEOAXbfK72oVNokCdMzA67trrhPzy93ahKk1AWHiA0c58tD2P+NHqxrA8FZ+Trg==",
-      "dev": true
-    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -2049,6 +2065,12 @@
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
       "dev": true
     },
+    "colorette": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
+      "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
+      "dev": true
+    },
     "commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -2426,12 +2448,6 @@
       "integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==",
       "dev": true
     },
-    "electron-to-chromium": {
-      "version": "1.3.314",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.314.tgz",
-      "integrity": "sha512-IKDR/xCxKFhPts7h+VaSXS02Z1mznP3fli1BbXWXeN89i2gCzKraU8qLpEid8YzKcmZdZD3Mly3cn5/lY9xsBQ==",
-      "dev": true
-    },
     "elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
@@ -2552,6 +2568,12 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "dev": true
+    },
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -4547,23 +4569,6 @@
         }
       }
     },
-    "node-releases": {
-      "version": "1.1.41",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.41.tgz",
-      "integrity": "sha512-+IctMa7wIs8Cfsa8iYzeaLTFwv5Y4r5jZud+4AnfymzeEXKBCavFX0KBgzVaPVqf0ywa6PrO8/b+bPqdwjGBSg==",
-      "dev": true,
-      "requires": {
-        "semver": "^6.3.0"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        }
-      }
-    },
     "normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",