Click grid raised hand participant to open queue

2023-12-11 07:10:31 -08:00 · 2023-12-11 07:10:31 -08:00 · 96d5e97318
commit 96d5e97318
parent 9a08070262
5 changed files with 82 additions and 33 deletions
--- a/stylesheets/_modules.scss
+++ b/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 {
--- a/ts/components/CallScreen.tsx
+++ b/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(
--- a/ts/components/GroupCallOverflowArea.tsx
+++ b/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(
--- a/ts/components/GroupCallRemoteParticipant.tsx
+++ b/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">
-                  {isHandRaised && (
-                    <div className="CallingStatusIndicator CallingStatusIndicator--HandRaised" />
-                  )}
-                  <ContactName
-                    module="module-ongoing-call__group-call-remote-participant__info__contact-name"
-                    title={title}
-                  />
-                </div>
+                {footerInfoElement}
              </div>
            </>
          )}
--- a/ts/components/GroupCallRemoteParticipants.tsx
+++ b/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}