Let users ring members when starting a group call

Co-Authored-By: Josh Perez <60019601+josh-signal@users.noreply.github.com>

ts/components/CallingLobby.tsx

@@ -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