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.

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);
+}