Click grid raised hand participant to open queue

This commit is contained in:
ayumi-signal 2023-12-11 07:10:31 -08:00 committed by GitHub
parent 9a08070262
commit 96d5e97318
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 82 additions and 33 deletions

View file

@ -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>
</>
)}