Click grid raised hand participant to open queue

stylesheets/_modules.scss

@@ -3969,6 +3969,7 @@ button.module-image__border-overlay:focus {
       transition-duration: 300ms;
       transition-delay: 1000ms;
       transition-timing-function: ease-in-out;
+      pointer-events: none;
     }
     &--speaking:after {
       border-width: 3px;
@@ -4038,8 +4039,13 @@ button.module-image__border-overlay:focus {
         overflow: hidden;
         text-overflow: ellipsis;
         visibility: hidden;
+        direction: inherit;
         white-space: nowrap;
       }
+
+      &--clickable {
+        @include button-reset;
+      }
     }
 
     &--hand-raised &__footer {

ts/components/CallScreen.tsx

@@ -335,7 +335,6 @@ export function CallScreen({
   let hasCallStarted: boolean;
   let isConnected: boolean;
   let participantCount: number;
-  let remoteParticipantsElement: ReactNode;
   let conversationsByDemuxId: ConversationsByDemuxIdType;
   let localDemuxId: number | undefined;
 
@@ -348,17 +347,6 @@ export function CallScreen({
       isConnected = activeCall.callState === CallState.Accepted;
       participantCount = isConnected ? 2 : 0;
       conversationsByDemuxId = new Map();
-      remoteParticipantsElement = hasCallStarted ? (
-        <DirectCallRemoteParticipant
-          conversation={conversation}
-          hasRemoteVideo={hasRemoteVideo}
-          i18n={i18n}
-          isReconnecting={isReconnecting}
-          setRendererCanvas={setRendererCanvas}
-        />
-      ) : (
-        <div className="module-ongoing-call__direct-call-ringing-spacer" />
-      );
       break;
     }
     case CallMode.Group:
@@ -373,17 +361,6 @@ export function CallScreen({
 
       isConnected =
         activeCall.connectionState === GroupCallConnectionState.Connected;
-      remoteParticipantsElement = (
-        <GroupCallRemoteParticipants
-          callViewMode={activeCall.viewMode}
-          getGroupCallVideoFrameSource={getGroupCallVideoFrameSource}
-          i18n={i18n}
-          remoteParticipants={activeCall.remoteParticipants}
-          setGroupCallVideoRequest={setGroupCallVideoRequest}
-          remoteAudioLevels={activeCall.remoteAudioLevels}
-          isCallReconnecting={isReconnecting}
-        />
-      );
       break;
     default:
       throw missingCaseError(activeCall);
@@ -627,6 +604,44 @@ export function CallScreen({
     toggleParticipants,
   ]);
 
+  let remoteParticipantsElement: ReactNode;
+  switch (activeCall.callMode) {
+    case CallMode.Direct: {
+      remoteParticipantsElement = hasCallStarted ? (
+        <DirectCallRemoteParticipant
+          conversation={conversation}
+          hasRemoteVideo={hasRemoteVideo}
+          i18n={i18n}
+          isReconnecting={isReconnecting}
+          setRendererCanvas={setRendererCanvas}
+        />
+      ) : (
+        <div className="module-ongoing-call__direct-call-ringing-spacer" />
+      );
+      break;
+    }
+    case CallMode.Group:
+      remoteParticipantsElement = (
+        <GroupCallRemoteParticipants
+          callViewMode={activeCall.viewMode}
+          getGroupCallVideoFrameSource={getGroupCallVideoFrameSource}
+          i18n={i18n}
+          remoteParticipants={activeCall.remoteParticipants}
+          setGroupCallVideoRequest={setGroupCallVideoRequest}
+          remoteAudioLevels={activeCall.remoteAudioLevels}
+          isCallReconnecting={isReconnecting}
+          onClickRaisedHand={
+            raisedHandsCount > 0
+              ? () => setShowRaisedHandsList(true)
+              : undefined
+          }
+        />
+      );
+      break;
+    default:
+      throw missingCaseError(activeCall);
+  }
+
   return (
     <div
       className={classNames(

ts/components/GroupCallOverflowArea.tsx

@@ -20,6 +20,7 @@ export type PropsType = {
   getGroupCallVideoFrameSource: (demuxId: number) => VideoFrameSource;
   i18n: LocalizerType;
   isCallReconnecting: boolean;
+  onClickRaisedHand?: () => void;
   onParticipantVisibilityChanged: (
     demuxId: number,
     isVisible: boolean
@@ -34,6 +35,7 @@ export function GroupCallOverflowArea({
   getGroupCallVideoFrameSource,
   i18n,
   isCallReconnecting,
+  onClickRaisedHand,
   onParticipantVisibilityChanged,
   overflowedParticipants,
   remoteAudioLevels,
@@ -121,6 +123,7 @@ export function GroupCallOverflowArea({
             getGroupCallVideoFrameSource={getGroupCallVideoFrameSource}
             i18n={i18n}
             audioLevel={remoteAudioLevels.get(remoteParticipant.demuxId) ?? 0}
+            onClickRaisedHand={onClickRaisedHand}
             onVisibilityChanged={onParticipantVisibilityChanged}
             width={OVERFLOW_PARTICIPANT_WIDTH}
             height={Math.floor(

ts/components/GroupCallRemoteParticipant.tsx

@@ -1,7 +1,7 @@
 // Copyright 2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import React, {
   useState,
   useRef,
@@ -37,6 +37,7 @@ type BasePropsType = {
   i18n: LocalizerType;
   isActiveSpeakerInSpeakerView: boolean;
   isCallReconnecting: boolean;
+  onClickRaisedHand?: () => void;
   onVisibilityChanged?: (demuxId: number, isVisible: boolean) => unknown;
   remoteParticipant: GroupCallRemoteParticipantType;
   remoteParticipantsCount: number;
@@ -67,6 +68,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
       getFrameBuffer,
       getGroupCallVideoFrameSource,
       i18n,
+      onClickRaisedHand,
       onVisibilityChanged,
       remoteParticipantsCount,
       isActiveSpeakerInSpeakerView,
@@ -238,6 +240,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
     }
 
     let avatarSize: number;
+    let footerInfoElement: ReactNode;
 
     if (props.isInPip) {
       containerStyles = canvasStyles;
@@ -262,6 +265,32 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
         containerStyles.insetInlineStart = `${props.left}px`;
         containerStyles.top = `${props.top}px`;
       }
+
+      const nameElement = (
+        <ContactName
+          module="module-ongoing-call__group-call-remote-participant__info__contact-name"
+          title={title}
+        />
+      );
+
+      if (isHandRaised) {
+        footerInfoElement = (
+          <button
+            className="module-ongoing-call__group-call-remote-participant__info module-ongoing-call__group-call-remote-participant__info--clickable"
+            onClick={onClickRaisedHand}
+            type="button"
+          >
+            <div className="CallingStatusIndicator CallingStatusIndicator--HandRaised" />
+            {nameElement}
+          </button>
+        );
+      } else {
+        footerInfoElement = (
+          <div className="module-ongoing-call__group-call-remote-participant__info">
+            {nameElement}
+          </div>
+        );
+      }
     }
 
     return (
@@ -311,15 +340,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
                 shouldShowSpeaking={isSpeaking}
               />
               <div className="module-ongoing-call__group-call-remote-participant__footer">
-                <div className="module-ongoing-call__group-call-remote-participant__info">
+                {footerInfoElement}
-                  {isHandRaised && (
-                    <div className="CallingStatusIndicator CallingStatusIndicator--HandRaised" />
-                  )}
-                  <ContactName
-                    module="module-ongoing-call__group-call-remote-participant__info__contact-name"
-                    title={title}
-                  />
-                </div>
               </div>
             </>
           )}

ts/components/GroupCallRemoteParticipants.tsx

@@ -67,6 +67,7 @@ type PropsType = {
     speakerHeight: number
   ) => void;
   remoteAudioLevels: Map<number, number>;
+  onClickRaisedHand?: () => void;
 };
 
 enum VideoRequestMode {
@@ -114,6 +115,7 @@ export function GroupCallRemoteParticipants({
   remoteParticipants,
   setGroupCallVideoRequest,
   remoteAudioLevels,
+  onClickRaisedHand,
 }: PropsType): JSX.Element {
   const [gridDimensions, setGridDimensions] = useState<Dimensions>({
     width: 0,
@@ -342,6 +344,7 @@ export function GroupCallRemoteParticipants({
             key={tile.demuxId}
             getFrameBuffer={getFrameBuffer}
             getGroupCallVideoFrameSource={getGroupCallVideoFrameSource}
+            onClickRaisedHand={onClickRaisedHand}
             height={gridParticipantHeight}
             i18n={i18n}
             audioLevel={remoteAudioLevels.get(tile.demuxId) ?? 0}
@@ -509,6 +512,7 @@ export function GroupCallRemoteParticipants({
           getGroupCallVideoFrameSource={getGroupCallVideoFrameSource}
           i18n={i18n}
           isCallReconnecting={isCallReconnecting}
+          onClickRaisedHand={onClickRaisedHand}
           onParticipantVisibilityChanged={onParticipantVisibilityChanged}
           overflowedParticipants={overflowedParticipants}
           remoteAudioLevels={remoteAudioLevels}