From 1692687c321d2ae620797eb50ea5f179bd11e35a Mon Sep 17 00:00:00 2001
From: Christopher Poile <cpoile@gmail.com>
Date: Sat, 20 Aug 2022 08:56:44 -0400
Subject: [PATCH] display multiple speakers in call screen UI (#6585)

---
 .../calls/screens/call_screen/call_screen.tsx      | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/products/calls/screens/call_screen/call_screen.tsx b/app/products/calls/screens/call_screen/call_screen.tsx
index f14816abdc..aa31d2c55f 100644
--- a/app/products/calls/screens/call_screen/call_screen.tsx
+++ b/app/products/calls/screens/call_screen/call_screen.tsx
@@ -257,6 +257,7 @@ const CallScreen = ({componentId, currentCall, participantsDict, teammateNameDis
     const myParticipant = currentCall?.participants[currentCall.myUserId];
     const style = getStyleSheet(theme);
     const showControls = !isLandscape || showControlsInLandscape;
+    const [speakers, setSpeakers] = useState<Dictionary<boolean>>({});
 
     useEffect(() => {
         mergeNavigationOptions('Call', {
@@ -269,16 +270,19 @@ const CallScreen = ({componentId, currentCall, participantsDict, teammateNameDis
         });
     }, []);
 
-    const [speaker, setSpeaker] = useState('');
     useEffect(() => {
         const handleVoiceOn = (data: VoiceEventData) => {
             if (data.channelId === currentCall?.channelId) {
-                setSpeaker(data.userId);
+                setSpeakers((prev) => ({...prev, [data.userId]: true}));
             }
         };
         const handleVoiceOff = (data: VoiceEventData) => {
-            if (data.channelId === currentCall?.channelId && ((speaker === data.userId) || !speaker)) {
-                setSpeaker('');
+            if (data.channelId === currentCall?.channelId && speakers.hasOwnProperty(data.userId) && speakers[data.userId]) {
+                setSpeakers((prev) => {
+                    const next = {...prev};
+                    delete next[data.userId];
+                    return next;
+                });
             }
         };
 
@@ -424,7 +428,7 @@ const CallScreen = ({componentId, currentCall, participantsDict, teammateNameDis
                             >
                                 <CallAvatar
                                     userModel={user.userModel}
-                                    volume={speaker === user.id ? 1 : 0}
+                                    volume={speakers[user.id] ? 1 : 0}
                                     muted={user.muted}
                                     sharingScreen={user.id === currentCall.screenOn}
                                     raisedHand={Boolean(user.raisedHand)}