fix(rn,ParticipantPane) optimize

Use a FlatList to avoid loading all participants at once.

react/features/participants-pane/actions.native.js

@@ -29,28 +29,28 @@ export function showContextMenuReject(participant: Object) {
  * @param {string} participantID - The selected meeting participant id.
  * @returns {Function}
  */
-export function showConnectionStatus(participantID: String) {
+export function showConnectionStatus(participantID: string) {
     return openDialog(ConnectionStatusComponent, { participantID });
 }
 
 /**
  * Displays the context menu for the selected meeting participant.
  *
- * @param {Object} participant - The selected meeting participant.
+ * @param {string} participantId - The ID of the selected meeting participant.
  * @returns {Function}
  */
-export function showContextMenuDetails(participant: Object) {
+export function showContextMenuDetails(participantId: string) {
-    return openDialog(RemoteVideoMenu, { participant });
+    return openDialog(RemoteVideoMenu, { participantId });
 }
 
 /**
  * Displays the shared video menu.
  *
- * @param {Object} participant - The selected meeting participant.
+ * @param {string} participantId - The ID of the selected meeting participant.
  * @returns {Function}
  */
-export function showSharedVideoMenu(participant: Object) {
+export function showSharedVideoMenu(participantId: string) {
-    return openDialog(SharedVideoMenu, { participant });
+    return openDialog(SharedVideoMenu, { participantId });
 }
 
 /**

react/features/participants-pane/components/native/LobbyParticipantList.js

@@ -2,7 +2,7 @@
 
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Text, View } from 'react-native';
+import { ScrollView, Text, View } from 'react-native';
 import { Button, withTheme } from 'react-native-paper';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -54,6 +54,7 @@ const LobbyParticipantList = ({ theme }: Props) => {
                     )
                 }
             </View>
+            <ScrollView>
                 {
                     participants.map(p => (
                         <LobbyParticipantItem
@@ -61,6 +62,7 @@ const LobbyParticipantList = ({ theme }: Props) => {
                             participant = { p } />)
                     )
                 }
+            </ScrollView>
         </View>
     );
 };

react/features/participants-pane/components/native/MeetingParticipantItem.js

@@ -1,9 +1,10 @@
 // @flow
 
-import React from 'react';
+import React, { PureComponent } from 'react';
 
 import { translate } from '../../../base/i18n';
 import {
+    getLocalParticipant,
     getParticipantByIdOrUndefined,
     getParticipantDisplayName
 } from '../../../base/participants';
@@ -12,6 +13,7 @@ import {
     isParticipantAudioMuted,
     isParticipantVideoMuted
 } from '../../../base/tracks';
+import { showConnectionStatus, showContextMenuDetails, showSharedVideoMenu } from '../../actions.native';
 import { MEDIA_STATE } from '../../constants';
 import type { MediaState } from '../../constants';
 import { getParticipantAudioMediaState } from '../../functions';
@@ -31,6 +33,11 @@ type Props = {
      */
     _displayName: string,
 
+    /**
+     * True if the participant is fake.
+     */
+    _isFakeParticipant: boolean,
+
     /**
      * True if the participant is video muted.
      */
@@ -41,6 +48,11 @@ type Props = {
      */
     _local: boolean,
 
+    /**
+     * Shared video local participant owner.
+     */
+    _localVideoOwner: boolean,
+
     /**
      * The participant ID.
      */
@@ -52,9 +64,9 @@ type Props = {
     _raisedHand: boolean,
 
     /**
-     * Callback to invoke when item is pressed.
+     * The redux dispatch function.
      */
-    onPress: Function,
+    dispatch: Function,
 
     /**
      * The ID of the participant.
@@ -64,30 +76,75 @@ type Props = {
 
 /**
  * Implements the MeetingParticipantItem component.
+ */
+class MeetingParticipantItem extends PureComponent<Props> {
+
+    /**
+     * Creates new MeetingParticipantItem instance.
      *
      * @param {Props} props - The props of the component.
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this._onPress = this._onPress.bind(this);
+    }
+
+    _onPress: () => void;
+
+    /**
+     * Handles MeetingParticipantItem press events.
+     *
+     * @returns {void}
+     */
+    _onPress() {
+        const {
+            _local,
+            _localVideoOwner,
+            _isFakeParticipant,
+            _participantID,
+            dispatch
+        } = this.props;
+
+        if (_isFakeParticipant && _localVideoOwner) {
+            dispatch(showSharedVideoMenu(_participantID));
+        } else if (!_isFakeParticipant) {
+            if (_local) {
+                dispatch(showConnectionStatus(_participantID));
+            } else {
+                dispatch(showContextMenuDetails(_participantID));
+            }
+        } // else no-op
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
      * @returns {ReactElement}
      */
-function MeetingParticipantItem({
+    render() {
+        const {
             _audioMediaState,
             _displayName,
             _isVideoMuted,
             _local,
             _participantID,
-    _raisedHand,
+            _raisedHand
-    onPress
+        } = this.props;
-}: Props) {
+
         return (
             <ParticipantItem
                 audioMediaState = { _audioMediaState }
                 displayName = { _displayName }
                 isKnockingParticipant = { false }
                 local = { _local }
-            onPress = { onPress }
+                onPress = { this._onPress }
                 participantID = { _participantID }
                 raisedHand = { _raisedHand }
                 videoMediaState = { _isVideoMuted ? MEDIA_STATE.MUTED : MEDIA_STATE.UNMUTED } />
         );
+    }
 }
 
 /**
@@ -100,19 +157,21 @@ function MeetingParticipantItem({
  */
 function mapStateToProps(state, ownProps): Object {
     const { participantID } = ownProps;
+    const { ownerId } = state['features/shared-video'];
+    const localParticipantId = getLocalParticipant(state).id;
     const participant = getParticipantByIdOrUndefined(state, participantID);
     const _isAudioMuted = isParticipantAudioMuted(participant, state);
     const isVideoMuted = isParticipantVideoMuted(participant, state);
-    const audioMediaState = getParticipantAudioMediaState(
+    const audioMediaState = getParticipantAudioMediaState(participant, _isAudioMuted, state);
-        participant, _isAudioMuted, state
-    );
 
     return {
         _audioMediaState: audioMediaState,
         _displayName: getParticipantDisplayName(state, participant?.id),
         _isAudioMuted,
+        _isFakeParticipant: Boolean(participant?.isFakeParticipant),
         _isVideoMuted: isVideoMuted,
         _local: Boolean(participant?.local),
+        _localVideoOwner: Boolean(ownerId === localParticipantId),
         _participantID: participant?.id,
         _raisedHand: Boolean(participant?.raisedHand)
     };

react/features/participants-pane/components/native/MeetingParticipantList.js

@@ -1,25 +1,14 @@
 // @flow
 
-import React, { useCallback } from 'react';
+import React, { PureComponent } from 'react';
-import { useTranslation } from 'react-i18next';
+import { FlatList, Text, View } from 'react-native';
-import { Text, View } from 'react-native';
 import { Button } from 'react-native-paper';
-import { useDispatch, useSelector } from 'react-redux';
-
 
+import { translate } from '../../../base/i18n';
 import { Icon, IconInviteMore } from '../../../base/icons';
-import {
+import { getLocalParticipant, getParticipantCountWithFake } from '../../../base/participants';
-    getLocalParticipant,
-    getParticipantCountWithFake,
-    getSortedParticipants
-} from '../../../base/participants';
 import { connect } from '../../../base/redux';
 import { doInvitePeople } from '../../../invite/actions.native';
-import {
-    showConnectionStatus,
-    showContextMenuDetails,
-    showSharedVideoMenu
-} from '../../actions.native';
 import { shouldRenderInviteButton } from '../../functions';
 
 import MeetingParticipantItem from './MeetingParticipantItem';
@@ -28,74 +17,150 @@ import styles from './styles';
 type Props = {
 
     /**
-     * Shared video local participant owner.
+     * The ID of the local participant.
      */
-    _localVideoOwner: boolean
+    _localParticipantId: string,
+
+    /**
+     * The number of participants in the conference.
+     */
+    _participantsCount: number,
+
+    /**
+     * Whether or not to show the invite button.
+     */
+    _showInviteButton: boolean,
+
+    /**
+     * The remote participants.
+     */
+    _sortedRemoteParticipants: Map<string, string>,
+
+    /**
+     * The redux dispatch function.
+     */
+    dispatch: Function,
+
+    /**
+     * Translation function.
+     */
+    t: Function
 }
 
-const MeetingParticipantList = ({ _localVideoOwner }: Props) => {
+/**
-    const dispatch = useDispatch();
+ *  The meeting participant list component.
-    const onInvite = useCallback(() => dispatch(doInvitePeople()), [ dispatch ]);
+ */
-    const participantsCount = useSelector(getParticipantCountWithFake);
+class MeetingParticipantList extends PureComponent<Props> {
-    const sortedParticipants = useSelector(getSortedParticipants);
-    const showInviteButton = useSelector(shouldRenderInviteButton);
-    const { t } = useTranslation();
 
-    // eslint-disable-next-line react/no-multi-comp
+    /**
-    const renderParticipant = p => {
+     * Creates new MeetingParticipantList instance.
-        if (p.isFakeParticipant) {
+     *
-            if (_localVideoOwner) {
+     * @param {Props} props - The props of the component.
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this._keyExtractor = this._keyExtractor.bind(this);
+        this._onInvite = this._onInvite.bind(this);
+        this._renderParticipant = this._renderParticipant.bind(this);
+    }
+
+    _keyExtractor: Function;
+
+    /**
+     * Returns a key for a passed item of the list.
+     *
+     * @param {string} item - The user ID.
+     * @returns {string} - The user ID.
+     */
+    _keyExtractor(item) {
+        return item;
+    }
+
+    _onInvite: () => void;
+
+    /**
+     * Handles ivite button presses.
+     *
+     * @returns {void}
+     */
+    _onInvite() {
+        this.props.dispatch(doInvitePeople());
+    }
+
+    /**
+     * Renders the "invite more" icon.
+     *
+     * @returns {ReactElement}
+     */
+    _renderInviteMoreIcon() {
         return (
-                    <MeetingParticipantItem
+            <Icon
-                        key = { p.id }
+                size = { 20 }
-                        /* eslint-disable-next-line react/jsx-no-bind,no-confusing-arrow */
+                src = { IconInviteMore } />
-                        onPress = { () => dispatch(showSharedVideoMenu(p)) }
-                        participantID = { p.id } />
         );
     }
 
+    _renderParticipant: Object => Object;
+
+    /**
+     * Renders a participant.
+     *
+     * @param {Object} flatListItem - Information about the item to be rendered.
+     * @param {string} flatListItem.item - The ID of the participant.
+     * @returns {ReactElement}
+     */
+    _renderParticipant({ item/* , index, separators */ }) {
         return (
             <MeetingParticipantItem
-                    key = { p.id }
+                key = { item }
-                    participantID = { p.id } />
+                participantID = { item } />
         );
     }
 
-        return (
+    /**
-            <MeetingParticipantItem
+     * Implements React's {@link Component#render()}.
-                key = { p.id }
+     *
-                /* eslint-disable-next-line react/jsx-no-bind,no-confusing-arrow */
+     * @inheritdoc
-                onPress = { () => p.local
+     * @returns {ReactElement}
-                    ? dispatch(showConnectionStatus(p.id)) : dispatch(showContextMenuDetails(p)) }
+     */
-                participantID = { p.id } />
+    render() {
-        );
+        const {
-    };
+            _localParticipantId,
+            _participantsCount,
+            _showInviteButton,
+            _sortedRemoteParticipants,
+            t
+        } = this.props;
 
         return (
             <View style = { styles.meetingList }>
                 <Text style = { styles.meetingListDescription }>
                     {t('participantsPane.headings.participantsList',
-                    { count: participantsCount })}
+                        { count: _participantsCount })}
                 </Text>
                 {
-                showInviteButton
+                    _showInviteButton
                     && <Button
                         children = { t('participantsPane.actions.invite') }
-                    /* eslint-disable-next-line react/jsx-no-bind */
+                        icon = { this._renderInviteMoreIcon }
-                    icon = { () =>
-                        (<Icon
-                            size = { 20 }
-                            src = { IconInviteMore } />)
-                    }
                         labelStyle = { styles.inviteLabel }
                         mode = 'contained'
-                    onPress = { onInvite }
+                        onPress = { this._onInvite }
                         style = { styles.inviteButton } />
                 }
-            { sortedParticipants.map(renderParticipant) }
+                <FlatList
+                    bounces = { false }
+                    data = { [ _localParticipantId, ..._sortedRemoteParticipants ] }
+                    horizontal = { false }
+                    keyExtractor = { this._keyExtractor }
+                    renderItem = { this._renderParticipant }
+                    showsHorizontalScrollIndicator = { false }
+                    windowSize = { 2 } />
             </View>
         );
-};
+    }
+}
 
 /**
  * Maps (parts of) the redux state to the associated props for this component.
@@ -105,12 +170,16 @@ const MeetingParticipantList = ({ _localVideoOwner }: Props) => {
  * @returns {Props}
  */
 function _mapStateToProps(state): Object {
-    const { ownerId } = state['features/shared-video'];
+    const _participantsCount = getParticipantCountWithFake(state);
-    const localParticipantId = getLocalParticipant(state).id;
+    const { remoteParticipants } = state['features/filmstrip'];
+    const _showInviteButton = shouldRenderInviteButton(state);
 
     return {
-        _localVideoOwner: Boolean(ownerId === localParticipantId)
+        _participantsCount,
+        _showInviteButton,
+        _sortedRemoteParticipants: remoteParticipants,
+        _localParticipantId: getLocalParticipant(state)?.id
     };
 }
 
-export default connect(_mapStateToProps)(MeetingParticipantList);
+export default translate(connect(_mapStateToProps)(MeetingParticipantList));

react/features/participants-pane/components/native/ParticipantsPane.js

@@ -2,7 +2,7 @@
 
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ScrollView, View } from 'react-native';
+import { View } from 'react-native';
 import { Button } from 'react-native-paper';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -45,10 +45,8 @@ const ParticipantsPane = () => {
             }}
             onClose = { closePane }
             style = { styles.participantsPane }>
-            <ScrollView>
             <LobbyParticipantList />
             <MeetingParticipantList />
-            </ScrollView>
             {
                 isLocalModerator
                 && <View style = { styles.footer }>