fix(participants) sort participants alphabetically (#9741)

react/features/base/participants/functions.js

@@ -443,3 +443,45 @@ async function _getFirstLoadableAvatarUrl(participant, store) {
 
     return undefined;
 }
+
+
+/**
+ * Selector for retrieving sorted participants by display name.
+ *
+ * @param {(Function|Object)} stateful - The (whole) redux state, or redux's
+ * {@code getState} function to be used to retrieve the state
+ * features/base/participants.
+ * @returns {Array<Object>}
+ */
+export function getSortedParticipants(stateful: Object | Function) {
+    const localParticipant = getLocalParticipant(stateful);
+    const remoteParticipants = getRemoteParticipants(stateful);
+
+    const items = [];
+
+    remoteParticipants.forEach(p => {
+        items.push(p);
+    });
+
+    items.sort((a, b) =>
+        getParticipantDisplayName(stateful, a.id).localeCompare(getParticipantDisplayName(stateful, b.id))
+    );
+
+    items.unshift(localParticipant);
+
+    return items;
+}
+
+/**
+ * Selector for retrieving ids of alphabetically sorted participants by name.
+ *
+ * @param {(Function|Object)} stateful - The (whole) redux state, or redux's
+ * {@code getState} function to be used to retrieve the state
+ * features/base/participants.
+ * @returns {Array<string>}
+ */
+export function getSortedParticipantIds(stateful: Object | Function): Array<string> {
+    const participantIds = getSortedParticipants(stateful).map((p): Object => p.id);
+
+    return participantIds;
+}

react/features/base/participants/reducer.js

@@ -30,8 +30,6 @@ import { isParticipantModerator } from './functions';
  * @property {string} email - Participant email.
  */
 
-declare var APP: Object;
-
 /**
  * The participant properties which cannot be updated through
  * {@link PARTICIPANT_UPDATED}. They either identify the participant or can only

react/features/lobby/components/AbstractKnockingParticipantList.js

@@ -4,7 +4,7 @@ import { PureComponent } from 'react';
 
 import { isLocalParticipantModerator } from '../../base/participants';
 import { setKnockingParticipantApproval } from '../actions';
-import { getLobbyState } from '../functions';
+import { getKnockingParticipants, getLobbyEnabled } from '../functions';
 
 export type Props = {
 
@@ -67,7 +67,8 @@ export default class AbstractKnockingParticipantList<P: Props = Props> extends P
  * @returns {Props}
  */
 export function mapStateToProps(state: Object): $Shape<Props> {
-    const { knockingParticipants, lobbyEnabled } = getLobbyState(state);
+    const lobbyEnabled = getLobbyEnabled(state);
+    const knockingParticipants = getKnockingParticipants(state);
 
     return {
         _participants: knockingParticipants,

react/features/lobby/functions.js

@@ -1,15 +1,24 @@
 // @flow
 
 /**
- * Selector to return lobby state.
- *
- * @param {any} state - State object.
- * @returns {any}
- */
-export function getLobbyState(state: any) {
-    return state['features/lobby'];
+* Selector to return lobby enable state.
+*
+* @param {any} state - State object.
+* @returns {boolean}
+*/
+export function getLobbyEnabled(state: any) {
+    return state['features/lobby'].lobbyEnabled;
 }
 
+/**
+* Selector to return a list of knocking participants.
+*
+* @param {any} state - State object.
+* @returns {Array<Object>}
+*/
+export function getKnockingParticipants(state: any) {
+    return state['features/lobby'].knockingParticipants;
+}
 
 /**
  * Selector to return array with knocking participant ids.
@@ -18,7 +27,5 @@ export function getLobbyState(state: any) {
  * @returns {Array}
  */
 export function getKnockingParticipantsById(state: any) {
-    const { knockingParticipants } = state['features/lobby'];
-
-    return knockingParticipants.map(participant => participant.id);
+    return getKnockingParticipants(state).map(participant => participant.id);
 }

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

@@ -7,7 +7,7 @@ import { Button, withTheme } from 'react-native-paper';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { admitMultiple } from '../../../lobby/actions.native';
-import { getLobbyState } from '../../../lobby/functions';
+import { getKnockingParticipants, getLobbyEnabled } from '../../../lobby/functions';
 
 import { LobbyParticipantItem } from './LobbyParticipantItem';
 import styles from './styles';
@@ -21,10 +21,9 @@ type Props = {
 };
 
 const LobbyParticipantList = ({ theme }: Props) => {
-    const {
-        lobbyEnabled,
-        knockingParticipants: participants
-    } = useSelector(getLobbyState);
+    const lobbyEnabled = useSelector(getLobbyEnabled);
+    const participants = useSelector(getKnockingParticipants);
+
     const dispatch = useDispatch();
     const admitAll = useCallback(() =>
         dispatch(admitMultiple(participants)),

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

@@ -11,7 +11,7 @@ import { Icon, IconInviteMore } from '../../../base/icons';
 import {
     getLocalParticipant,
     getParticipantCountWithFake,
-    getRemoteParticipants
+    getSortedParticipants
 } from '../../../base/participants';
 import { connect } from '../../../base/redux';
 import { doInvitePeople } from '../../../invite/actions.native';
@@ -35,11 +35,9 @@ type Props = {
 
 const MeetingParticipantList = ({ _localVideoOwner }: Props) => {
     const dispatch = useDispatch();
-    const items = [];
-    const localParticipant = useSelector(getLocalParticipant);
     const onInvite = useCallback(() => dispatch(doInvitePeople()), [ dispatch ]);
-    const participants = useSelector(getRemoteParticipants);
     const participantsCount = useSelector(getParticipantCountWithFake);
+    const sortedParticipants = useSelector(getSortedParticipants);
     const showInviteButton = useSelector(shouldRenderInviteButton);
     const { t } = useTranslation();
 
@@ -73,12 +71,6 @@ const MeetingParticipantList = ({ _localVideoOwner }: Props) => {
         );
     };
 
-    items.push(renderParticipant(localParticipant));
-
-    participants.forEach(p => {
-        items.push(renderParticipant(p));
-    });
-
     return (
         <View style = { styles.meetingList }>
             <Text style = { styles.meetingListDescription }>
@@ -100,7 +92,7 @@ const MeetingParticipantList = ({ _localVideoOwner }: Props) => {
                     onPress = { onInvite }
                     style = { styles.inviteButton } />
             }
-            { items }
+            { sortedParticipants.map(renderParticipant) }
         </View>
     );
 };

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

@@ -7,7 +7,7 @@ import { useSelector, useDispatch } from 'react-redux';
 
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import { admitMultiple } from '../../../lobby/actions.web';
-import { getLobbyState } from '../../../lobby/functions';
+import { getKnockingParticipants, getLobbyEnabled } from '../../../lobby/functions';
 
 import { LobbyParticipantItem } from './LobbyParticipantItem';
 
@@ -32,10 +32,9 @@ const useStyles = makeStyles(theme => {
 
 
 export const LobbyParticipantList = () => {
-    const {
-        lobbyEnabled,
-        knockingParticipants: participants
-    } = useSelector(getLobbyState);
+    const lobbyEnabled = useSelector(getLobbyEnabled);
+    const participants = useSelector(getKnockingParticipants);
+
     const { t } = useTranslation();
     const classes = useStyles();
     const dispatch = useDispatch();

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

@@ -6,9 +6,8 @@ import { useSelector, useDispatch } from 'react-redux';
 
 import { openDialog } from '../../../base/dialog';
 import {
-    getLocalParticipant,
     getParticipantCountWithFake,
-    getRemoteParticipants
+    getSortedParticipantIds
 } from '../../../base/participants';
 import MuteRemoteParticipantDialog from '../../../video-menu/components/web/MuteRemoteParticipantDialog';
 import { findStyledAncestor, shouldRenderInviteButton } from '../../functions';
@@ -46,8 +45,7 @@ const initialState = Object.freeze(Object.create(null));
 export function MeetingParticipantList() {
     const dispatch = useDispatch();
     const isMouseOverMenu = useRef(false);
-    const participants = useSelector(getRemoteParticipants);
-    const localParticipant = useSelector(getLocalParticipant);
+    const sortedParticipantIds = useSelector(getSortedParticipantIds);
 
     // This is very important as getRemoteParticipants is not changing its reference object
     // and we will not re-render on change, but if count changes we will do
@@ -130,19 +128,12 @@ export function MeetingParticipantList() {
             youText = { youText } />
     );
 
-    const items = [];
-
-    localParticipant && items.push(renderParticipant(localParticipant?.id));
-    participants.forEach(p => {
-        items.push(renderParticipant(p?.id));
-    });
-
     return (
     <>
         <Heading>{t('participantsPane.headings.participantsList', { count: participantsCount })}</Heading>
         {showInviteButton && <InviteButton />}
         <div>
-            { items }
+            {sortedParticipantIds.map(renderParticipant)}
         </div>
         <MeetingParticipantContextMenu
             muteAudio = { muteAudio }