fix(filmstrip) Push dominant speaker to the top of the active speaker list.

The active speaker list in redux is alpha sorted, we need to ensure dominant speaker is at the top otherwise it can get truncated based on the available number of visible slots in the filmstrip.

react/features/base/participants/functions.ts

@@ -71,7 +71,7 @@ export function getActiveSpeakersToBeDisplayed(stateful: IStore | Function) {
         speakersList
     } = state['features/base/participants'];
     const { visibleRemoteParticipants } = state['features/filmstrip'];
-    const activeSpeakers = new Map(speakersList);
+    let activeSpeakers = new Map(speakersList);
 
     // Do not re-sort the active speakers if dominant speaker is currently visible.
     if (dominantSpeaker && visibleRemoteParticipants.has(dominantSpeaker)) {
@@ -79,6 +79,19 @@ export function getActiveSpeakersToBeDisplayed(stateful: IStore | Function) {
     }
     let availableSlotsForActiveSpeakers = visibleRemoteParticipants.size;
 
+    if (activeSpeakers.has(dominantSpeaker)) {
+        activeSpeakers.delete(dominantSpeaker);
+    }
+
+    // Add dominant speaker to the beginning of the list (not including self) since the active speaker list is always
+    // alphabetically sorted.
+    if (dominantSpeaker && dominantSpeaker !== getLocalParticipant(state).id) {
+        const updatedSpeakers = Array.from(activeSpeakers);
+
+        updatedSpeakers.splice(0, 0, [ dominantSpeaker, getParticipantById(state, dominantSpeaker)?.name ]);
+        activeSpeakers = new Map(updatedSpeakers);
+    }
+
     // Remove screenshares from the count.
     if (getMultipleVideoSupportFeatureFlag(state)) {
         if (sortedRemoteVirtualScreenshareParticipants) {