Show raise hand status in call participant list

ts/components/CallManager.tsx

@@ -324,6 +324,14 @@ function ActiveCallManager({
     );
   }
 
+  let isHandRaised = false;
+  if (activeCall.callMode === CallMode.Group) {
+    const { raisedHands, localDemuxId } = activeCall;
+    if (localDemuxId) {
+      isHandRaised = raisedHands.has(localDemuxId);
+    }
+  }
+
   const groupCallParticipantsForParticipantsList =
     activeCall.callMode === CallMode.Group
       ? [
@@ -337,6 +345,7 @@ function ActiveCallManager({
             ...me,
             hasRemoteAudio: hasLocalAudio,
             hasRemoteVideo: hasLocalVideo,
+            isHandRaised,
             presenting: Boolean(activeCall.presentingSource),
           },
         ]

ts/components/CallingParticipantsList.stories.tsx

@@ -75,6 +75,7 @@ export function ManyParticipants(): JSX.Element {
       }),
       createParticipant({
         hasRemoteAudio: true,
+        hasRemoteVideo: true,
         presenting: true,
         name: 'Rage Trunks',
         title: 'Rage Trunks',
@@ -90,8 +91,18 @@ export function ManyParticipants(): JSX.Element {
         title: 'Goku Black',
       }),
       createParticipant({
+        isHandRaised: true,
         title: 'Supreme Kai Zamasu',
       }),
+      createParticipant({
+        hasRemoteAudio: false,
+        hasRemoteVideo: true,
+        isHandRaised: true,
+        title: 'Chi Chi',
+      }),
+      createParticipant({
+        title: 'Someone With A Really Long Name',
+      }),
     ],
   });
   return <CallingParticipantsList {...props} />;

ts/components/CallingParticipantsList.tsx

@@ -6,6 +6,7 @@
 import React, { useContext } from 'react';
 import { createPortal } from 'react-dom';
 import FocusTrap from 'focus-trap-react';
+import classNames from 'classnames';
 
 import { Avatar, AvatarSize } from './Avatar';
 import { ContactName } from './conversation/ContactName';
@@ -20,6 +21,7 @@ import { ModalContainerContext } from './ModalHost';
 type ParticipantType = ConversationType & {
   hasRemoteAudio?: boolean;
   hasRemoteVideo?: boolean;
+  isHandRaised?: boolean;
   presenting?: boolean;
 };
 
@@ -146,17 +148,29 @@ export const CallingParticipantsList = React.memo(
                         </>
                       )}
                     </div>
-                    <div className="module-calling-participants-list__status">
-                      {participant.hasRemoteVideo === false ? (
-                        <span className="module-calling-participants-list__muted--video" />
-                      ) : null}
-                      {participant.presenting ? (
-                        <span className="module-calling-participants-list__presenting" />
-                      ) : null}
-                      {participant.hasRemoteAudio === false ? (
-                        <span className="module-calling-participants-list__muted--audio" />
-                      ) : null}
-                    </div>
+                    <span
+                      className={classNames(
+                        'module-calling-participants-list__status-icon',
+                        participant.isHandRaised &&
+                          'module-calling-participants-list__hand-raised'
+                      )}
+                    />
+                    <span
+                      className={classNames(
+                        'module-calling-participants-list__status-icon',
+                        participant.presenting &&
+                          'module-calling-participants-list__presenting',
+                        !participant.hasRemoteVideo &&
+                          'module-calling-participants-list__muted--video'
+                      )}
+                    />
+                    <span
+                      className={classNames(
+                        'module-calling-participants-list__status-icon',
+                        !participant.hasRemoteAudio &&
+                          'module-calling-participants-list__muted--audio'
+                      )}
+                    />
                   </li>
                 )
               )}

ts/components/CallingRaisedHandsList.tsx

@@ -114,20 +114,18 @@ export function CallingRaisedHandsList({
                   />
                 )}
               </div>
-              <div className="module-calling-participants-list__status">
-                {localHandRaised &&
-                  ourServiceId &&
-                  participant.serviceId === ourServiceId && (
-                    <button
-                      className="CallingRaisedHandsList__LowerMyHandLink"
-                      type="button"
-                      onClick={onLowerMyHand}
-                    >
-                      {i18n('icu:CallControls__RaiseHands--lower')}
-                    </button>
-                  )}
-                <div className="CallingRaisedHandsList__NameHandIcon" />
-              </div>
+              {localHandRaised &&
+                ourServiceId &&
+                participant.serviceId === ourServiceId && (
+                  <button
+                    className="CallingRaisedHandsList__LowerMyHandLink"
+                    type="button"
+                    onClick={onLowerMyHand}
+                  >
+                    {i18n('icu:CallControls__RaiseHands--lower')}
+                  </button>
+                )}
+              <div className="module-calling-participants-list__status-icon CallingRaisedHandsList__NameHandIcon" />
             </li>
           ))}
         </ul>