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:
parent
4afe4649ec
commit
0e7f641dc1
25 changed files with 556 additions and 97 deletions
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue