Let users ring members when starting a group call

Co-Authored-By: Josh Perez <60019601+josh-signal@users.noreply.github.com>
This commit is contained in:
Evan Hahn 2021-08-25 16:42:51 -05:00 committed by GitHub
parent 4afe4649ec
commit 0e7f641dc1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 556 additions and 97 deletions

View file

@ -12,7 +12,7 @@ import { CallingButton, CallingButtonType } from './CallingButton';
import { TooltipPlacement } from './Tooltip';
import { CallBackgroundBlur } from './CallBackgroundBlur';
import { CallingHeader } from './CallingHeader';
import { CallingPreCallInfo } from './CallingPreCallInfo';
import { CallingPreCallInfo, RingMode } from './CallingPreCallInfo';
import {
CallingLobbyJoinButton,
CallingLobbyJoinButtonVariant,
@ -37,23 +37,28 @@ export type PropsType = {
| 'type'
| 'unblurredAvatarPath'
>;
groupMembers?: Array<Pick<ConversationType, 'title'>>;
groupMembers?: Array<Pick<ConversationType, 'id' | 'firstName' | 'title'>>;
hasLocalAudio: boolean;
hasLocalVideo: boolean;
i18n: LocalizerType;
isGroupCall: boolean;
isGroupCallOutboundRingEnabled: boolean;
isCallFull?: boolean;
maxGroupCallRingSize: number;
me: {
avatarPath?: string;
id: string;
color?: AvatarColorType;
uuid: string;
};
onCallCanceled: () => void;
onJoinCall: () => void;
outgoingRing: boolean;
peekedParticipants: Array<ConversationType>;
setLocalAudio: (_: SetLocalAudioType) => void;
setLocalVideo: (_: SetLocalVideoType) => void;
setLocalPreview: (_: SetLocalPreviewType) => void;
setOutgoingRing: (_: boolean) => void;
showParticipantsList: boolean;
toggleParticipants: () => void;
toggleSettings: () => void;
@ -67,7 +72,9 @@ export const CallingLobby = ({
hasLocalVideo,
i18n,
isGroupCall = false,
isGroupCallOutboundRingEnabled,
isCallFull = false,
maxGroupCallRingSize,
me,
onCallCanceled,
onJoinCall,
@ -75,9 +82,11 @@ export const CallingLobby = ({
setLocalAudio,
setLocalPreview,
setLocalVideo,
setOutgoingRing,
showParticipantsList,
toggleParticipants,
toggleSettings,
outgoingRing,
}: PropsType): JSX.Element => {
const localVideoRef = React.useRef<null | HTMLVideoElement>(null);
@ -91,6 +100,10 @@ export const CallingLobby = ({
setLocalVideo({ enabled: !hasLocalVideo });
}, [hasLocalVideo, setLocalVideo]);
const toggleOutgoingRing = React.useCallback((): void => {
setOutgoingRing(!outgoingRing);
}, [outgoingRing, setOutgoingRing]);
React.useEffect(() => {
setLocalPreview({ element: localVideoRef });
@ -132,10 +145,36 @@ export const CallingLobby = ({
: availableCameras.length === 0
? CallingButtonType.VIDEO_DISABLED
: CallingButtonType.VIDEO_OFF;
const audioButtonType = hasLocalAudio
? CallingButtonType.AUDIO_ON
: CallingButtonType.AUDIO_OFF;
const isRingButtonVisible: boolean =
isGroupCall &&
isGroupCallOutboundRingEnabled &&
peekedParticipants.length === 0 &&
(groupMembers || []).length > 1;
const preCallInfoRingMode: RingMode =
isGroupCall && !outgoingRing ? RingMode.WillNotRing : RingMode.WillRing;
let ringButtonType:
| CallingButtonType.RING_DISABLED
| CallingButtonType.RING_ON
| CallingButtonType.RING_OFF;
if (isRingButtonVisible) {
if ((groupMembers || []).length > maxGroupCallRingSize) {
ringButtonType = CallingButtonType.RING_DISABLED;
} else if (outgoingRing) {
ringButtonType = CallingButtonType.RING_ON;
} else {
ringButtonType = CallingButtonType.RING_OFF;
}
} else {
ringButtonType = CallingButtonType.RING_DISABLED;
}
const canJoin = !isCallFull && !isCallConnecting;
let callingLobbyJoinButtonVariant: CallingLobbyJoinButtonVariant;
@ -182,6 +221,7 @@ export const CallingLobby = ({
isCallFull={isCallFull}
me={me}
peekedParticipants={peekedParticipants}
ringMode={preCallInfoRingMode}
/>
<div
@ -208,6 +248,13 @@ export const CallingLobby = ({
onClick={toggleAudio}
tooltipDirection={TooltipPlacement.Top}
/>
<CallingButton
buttonType={ringButtonType}
i18n={i18n}
isVisible={isRingButtonVisible}
onClick={toggleOutgoingRing}
tooltipDirection={TooltipPlacement.Top}
/>
</div>
<CallingLobbyJoinButton