Show raise hand status in call participant list

stylesheets/_modules.scss

@@ -4335,10 +4335,10 @@ button.module-image__border-overlay:focus {
     @include font-body-1;
     display: flex;
     align-items: center;
-    justify-content: space-between;
     margin-block: 2px;
-    padding-block: 5px;
-    padding-inline: 10px;
+    padding-block: 8px;
+    padding-inline-start: 10px;
+    padding-inline-end: 2px;
     list-style-type: none;
     border-radius: 6px;
     &:hover {
@@ -4348,8 +4348,9 @@ button.module-image__border-overlay:focus {
 
   &__avatar-and-name {
     display: flex;
+    flex-grow: 1;
+    min-width: 0;
     align-items: center;
-    max-width: 172px;
   }
 
   &__name {
@@ -4387,12 +4388,19 @@ button.module-image__border-overlay:focus {
     }
   }
 
-  &__status {
+  &__status-icon {
     display: flex;
-    flex-basis: 64px;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: end;
+    flex: none;
+    margin-inline: 8px;
+    height: 16px;
+    width: 16px;
+  }
+
+  &__hand-raised {
+    @include color-svg(
+      '../images/icons/v3/raise_hand/raise_hand-light.svg',
+      $color-white
+    );
   }
 
   &__muted {
@@ -4401,10 +4409,6 @@ button.module-image__border-overlay:focus {
         '../images/icons/v3/video/video-slash-compact-light.svg',
         $color-white
       );
-      display: inline-block;
-      margin-inline-start: 16px;
-      height: 16px;
-      width: 16px;
     }
 
     &--audio {
@@ -4412,10 +4416,6 @@ button.module-image__border-overlay:focus {
         '../images/icons/v3/mic/mic-slash-compact-light.svg',
         $color-white
       );
-      display: inline-block;
-      margin-inline-start: 16px;
-      height: 16px;
-      width: 16px;
     }
   }
 
@@ -4424,10 +4424,6 @@ button.module-image__border-overlay:focus {
       '../images/icons/v3/share_screen/share_screen-fill-light.svg',
       $color-white
     );
-    display: inline-block;
-    margin-inline-start: 16px;
-    height: 16px;
-    width: 16px;
   }
 }
 

stylesheets/components/CallingRaisedHandsList.scss

@@ -71,10 +71,6 @@
   );
 }
 
-.CallingRaisedHandsList__AvatarAndName {
-  max-width: 205px;
-}
-
 .CallingRaisedHandsList__NameHandIcon {
   display: inline-block;
   $icon-size: 16px;
@@ -90,7 +86,8 @@
 
 .CallingRaisedHandsList__LowerMyHandLink {
   @include button-reset;
-  margin-inline-end: 24px;
+  display: flex;
+  margin-inline-end: 16px;
   font-size: 13px;
   font-weight: 500;
   color: $color-ultramarine-pastel;

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>