fix(filmstrip): Always sort the participants alphabetically.

Reorder the sub-groups (shares, speakers and rest of the participants) always on dominant speaker changes and when participants join or leave.

react/features/base/participants/reducer.js

@@ -1,5 +1,6 @@
 // @flow
 
+import { SCREEN_SHARE_REMOTE_PARTICIPANTS_UPDATED } from '../../video-layout/actionTypes';
 import { ReducerRegistry, set } from '../redux';
 
 import {
@@ -61,6 +62,7 @@ const DEFAULT_STATE = {
     pinnedParticipant: undefined,
     remote: new Map(),
     sortedRemoteParticipants: new Map(),
+    sortedRemoteScreenshares: new Map(),
     speakersList: new Map()
 };
 
@@ -96,26 +98,18 @@ ReducerRegistry.register('features/base/participants', (state = DEFAULT_STATE, a
     case DOMINANT_SPEAKER_CHANGED: {
         const { participant } = action;
         const { id, previousSpeakers = [] } = participant;
-        const { dominantSpeaker, local, speakersList } = state;
+        const { dominantSpeaker, local } = state;
         const newSpeakers = [ id, ...previousSpeakers ];
-        const sortedSpeakersList = Array.from(speakersList);
+        const sortedSpeakersList = [];
 
-        // Update the speakers list.
         for (const speaker of newSpeakers) {
-            if (!state.speakersList.has(speaker) && speaker !== local?.id) {
+            if (speaker !== local?.id) {
                 const remoteParticipant = state.remote.get(speaker);
 
                 remoteParticipant && sortedSpeakersList.push([ speaker, _getDisplayName(remoteParticipant.name) ]);
             }
         }
 
-        // Also check if any of the existing speakers have been kicked off the list.
-        for (const existingSpeaker of sortedSpeakersList.keys()) {
-            if (!newSpeakers.find(s => s === existingSpeaker)) {
-                sortedSpeakersList.filter(sortedSpeaker => sortedSpeaker[0] !== existingSpeaker);
-            }
-        }
-
         // Keep the remote speaker list sorted alphabetically.
         sortedSpeakersList.sort((a, b) => a[1].localeCompare(b[1]));
 
@@ -324,6 +318,26 @@ ReducerRegistry.register('features/base/participants', (state = DEFAULT_STATE, a
 
         return { ...state };
     }
+    case SCREEN_SHARE_REMOTE_PARTICIPANTS_UPDATED: {
+        const { participantIds } = action;
+        const sortedSharesList = [];
+
+        for (const participant of participantIds) {
+            const remoteParticipant = state.remote.get(participant);
+
+            if (remoteParticipant) {
+                const displayName = _getDisplayName(remoteParticipant.name);
+
+                sortedSharesList.push([ participant, displayName ]);
+            }
+        }
+
+        // Keep the remote screen share list sorted alphabetically.
+        sortedSharesList.length && sortedSharesList.sort((a, b) => a[1].localeCompare(b[1]));
+        state.sortedRemoteScreenshares = new Map(sortedSharesList);
+
+        return { ...state };
+    }
     }
 
     return state;

react/features/filmstrip/functions.any.js

@@ -26,14 +26,18 @@ import { setRemoteParticipants } from './actions';
         return;
     }
 
-    const { fakeParticipants, sortedRemoteParticipants, speakersList } = state['features/base/participants'];
-    const { remoteScreenShares } = state['features/video-layout'];
-    const screenShares = (remoteScreenShares || []).slice();
-    const speakers = new Map(speakersList);
+    const {
+        fakeParticipants,
+        sortedRemoteParticipants,
+        sortedRemoteScreenshares,
+        speakersList
+    } = state['features/base/participants'];
     const remoteParticipants = new Map(sortedRemoteParticipants);
+    const screenShares = new Map(sortedRemoteScreenshares);
     const sharedVideos = fakeParticipants ? Array.from(fakeParticipants.keys()) : [];
+    const speakers = new Map(speakersList);
 
-    for (const screenshare of screenShares) {
+    for (const screenshare of screenShares.keys()) {
         remoteParticipants.delete(screenshare);
         speakers.delete(screenshare);
     }
@@ -47,7 +51,7 @@ import { setRemoteParticipants } from './actions';
 
     // Always update the order of the thumnails.
     reorderedParticipants = [
-        ...screenShares.reverse(),
+        ...Array.from(screenShares.keys()),
         ...sharedVideos,
         ...Array.from(speakers.keys()),
         ...Array.from(remoteParticipants.keys())

react/features/filmstrip/reducer.js

@@ -123,7 +123,7 @@ ReducerRegistry.register(
             if (navigator.product !== 'ReactNative') {
                 const { visibleParticipantsStartIndex: startIndex, visibleParticipantsEndIndex: endIndex } = state;
 
-                state.visibleRemoteParticipants = new Set(state.remoteParticipants.slice(startIndex, endIndex));
+                state.visibleRemoteParticipants = new Set(state.remoteParticipants.slice(startIndex, endIndex + 1));
             }
 
             return { ...state };