fix(moderation) highlight dominant speaker (#9750)

css/_participants-pane.scss

@@ -48,4 +48,11 @@
     .participants_pane-content {
         width: 100%;
     }
-}
+}
+
+.jitsi-icon {
+    &-dominant-speaker {
+        background-color: #1EC26A;
+        border-radius: 3px;
+    }
+}

react/features/base/participants/functions.js

@@ -458,9 +458,12 @@ export function getSortedParticipants(stateful: Object | Function) {
     const remoteParticipants = getRemoteParticipants(stateful);
 
     const items = [];
+    const dominantSpeaker = getDominantSpeakerParticipant(stateful);
 
     remoteParticipants.forEach(p => {
-        items.push(p);
+        if (p !== dominantSpeaker) {
+            items.push(p);
+        }
     });
 
     items.sort((a, b) =>
@@ -469,6 +472,10 @@ export function getSortedParticipants(stateful: Object | Function) {
 
     items.unshift(localParticipant);
 
+    if (dominantSpeaker && dominantSpeaker !== localParticipant) {
+        items.unshift(dominantSpeaker);
+    }
+
     return items;
 }
 

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

@@ -259,6 +259,10 @@ export const ParticipantStates = styled.div`
   & > *:not(:last-child) {
     margin-right: 8px;
   }
+
+  .jitsi-icon {
+    padding: 3px;
+  }
 `;
 
 export const ParticipantContainer = styled.div`

react/features/participants-pane/constants.js

@@ -65,7 +65,7 @@ export const QUICK_ACTION_BUTTON: {
 export const AudioStateIcons: {[MediaState]: React$Element<any> | null} = {
     [MEDIA_STATE.DOMINANT_SPEAKER]: (
         <Icon
-            color = '#1EC26A'
+            className = 'jitsi-icon-dominant-speaker'
             size = { 16 }
             src = { IconMicrophoneEmpty } />
     ),