Show 'join anyway' in verify dialog when joining call

_locales/en/messages.json

@@ -611,6 +611,10 @@
     "messageformat": "Call anyway",
     "description": "Used on a warning dialog to make it clear that it might be risky to call the conversation."
   },
+  "icu:joinAnyway": {
+    "messageformat": "Join anyway",
+    "description": "Used on a warning dialog to make it clear that it might be risky to join the call."
+  },
   "icu:continueCall": {
     "messageformat": "Continue Call",
     "description": "Used on a warning dialog to make it clear that it might be risky to continue the group call."

ts/components/SafetyNumberChangeDialog.tsx

@@ -26,7 +26,8 @@ import type { StoryDistributionIdString } from '../types/StoryDistributionId';
 import { UserText } from './UserText';
 
 export enum SafetyNumberChangeSource {
-  Calling = 'Calling',
+  InitiateCall = 'InitiateCall',
+  JoinCall = 'JoinCall',
   MessageSend = 'MessageSend',
   Story = 'Story',
 }

ts/components/conversation/CallingNotification.stories.tsx

@@ -61,8 +61,13 @@ const getCommonProps = (options: {
     conversationId: conversation.id,
     i18n,
     isNextItemCallingNotification: false,
+    onOutgoingAudioCallInConversation: action(
+      'onOutgoingAudioCallInConversation'
+    ),
+    onOutgoingVideoCallInConversation: action(
+      'onOutgoingVideoCallInConversation'
+    ),
     returnToActiveCall: action('returnToActiveCall'),
-    startCallingLobby: action('startCallingLobby'),
     callHistory: {
       callId: '123',
       peerId: conversation.id,

ts/components/conversation/CallingNotification.tsx

@@ -26,11 +26,9 @@ import {
 } from '../../types/CallDisposition';
 
 export type PropsActionsType = {
+  onOutgoingAudioCallInConversation: (conversationId: string) => void;
+  onOutgoingVideoCallInConversation: (conversationId: string) => void;
   returnToActiveCall: () => void;
-  startCallingLobby: (_: {
-    conversationId: string;
-    isVideoCall: boolean;
-  }) => void;
 };
 
 type PropsHousekeeping = {
@@ -86,8 +84,9 @@ function renderCallingNotificationButton(
     conversationId,
     i18n,
     isNextItemCallingNotification,
+    onOutgoingAudioCallInConversation,
+    onOutgoingVideoCallInConversation,
     returnToActiveCall,
-    startCallingLobby,
   } = props;
 
   if (isNextItemCallingNotification) {
@@ -114,10 +113,11 @@ function renderCallingNotificationButton(
         onClick = noop;
       } else {
         onClick = () => {
-          startCallingLobby({
+          if (type === CallType.Video) {
-            conversationId,
+            onOutgoingVideoCallInConversation(conversationId);
-            isVideoCall: type === CallType.Video,
+          } else {
-          });
+            onOutgoingAudioCallInConversation(conversationId);
+          }
         };
       }
       break;
@@ -147,7 +147,7 @@ function renderCallingNotificationButton(
       } else {
         buttonText = i18n('icu:calling__join');
         onClick = () => {
-          startCallingLobby({ conversationId, isVideoCall: true });
+          onOutgoingVideoCallInConversation(conversationId);
         };
       }
       break;

ts/components/conversation/Timeline.stories.tsx

@@ -313,7 +313,12 @@ const actions = () => ({
 
   toggleSafetyNumberModal: action('toggleSafetyNumberModal'),
 
-  startCallingLobby: action('startCallingLobby'),
+  onOutgoingAudioCallInConversation: action(
+    'onOutgoingAudioCallInConversation'
+  ),
+  onOutgoingVideoCallInConversation: action(
+    'onOutgoingVideoCallInConversation'
+  ),
   startConversation: action('startConversation'),
   returnToActiveCall: action('returnToActiveCall'),
 

ts/components/conversation/TimelineItem.stories.tsx

@@ -79,6 +79,12 @@ const getDefaultProps = () => ({
   showConversation: action('showConversation'),
   openGiftBadge: action('openGiftBadge'),
   saveAttachment: action('saveAttachment'),
+  onOutgoingAudioCallInConversation: action(
+    'onOutgoingAudioCallInConversation'
+  ),
+  onOutgoingVideoCallInConversation: action(
+    'onOutgoingVideoCallInConversation'
+  ),
   pushPanelForConversation: action('pushPanelForConversation'),
   showContactModal: action('showContactModal'),
   showLightbox: action('showLightbox'),
@@ -94,7 +100,6 @@ const getDefaultProps = () => ({
   ),
   scrollToQuotedMessage: action('scrollToQuotedMessage'),
   showSpoiler: action('showSpoiler'),
-  startCallingLobby: action('startCallingLobby'),
   startConversation: action('startConversation'),
   returnToActiveCall: action('returnToActiveCall'),
   shouldCollapseAbove: false,

ts/components/conversation/TimelineItem.tsx

@@ -193,6 +193,8 @@ export const TimelineItem = memo(function TimelineItem({
   isNextItemCallingNotification,
   isTargeted,
   item,
+  onOutgoingAudioCallInConversation,
+  onOutgoingVideoCallInConversation,
   platform,
   renderUniversalTimerNotification,
   returnToActiveCall,
@@ -202,7 +204,6 @@ export const TimelineItem = memo(function TimelineItem({
   shouldCollapseBelow,
   shouldHideMetadata,
   shouldRenderDateHeader,
-  startCallingLobby,
   theme,
   ...reducedProps
 }: PropsType): JSX.Element | null {
@@ -248,8 +249,9 @@ export const TimelineItem = memo(function TimelineItem({
           conversationId={conversationId}
           i18n={i18n}
           isNextItemCallingNotification={isNextItemCallingNotification}
+          onOutgoingAudioCallInConversation={onOutgoingAudioCallInConversation}
+          onOutgoingVideoCallInConversation={onOutgoingVideoCallInConversation}
           returnToActiveCall={returnToActiveCall}
-          startCallingLobby={startCallingLobby}
           {...item.data}
         />
       );

ts/state/ducks/calling.ts

@@ -56,6 +56,7 @@ import type { ShowToastActionType } from './toast';
 import type { BoundActionCreatorsMapObject } from '../../hooks/useBoundActions';
 import { useBoundActions } from '../../hooks/useBoundActions';
 import { isAnybodyElseInGroupCall } from './callingHelpers';
+import { SafetyNumberChangeSource } from '../../components/SafetyNumberChangeDialog';
 
 // State
 
@@ -1259,17 +1260,10 @@ function onOutgoingVideoCallInConversation(
 
     log.info('onOutgoingVideoCallInConversation: about to start a video call');
 
-    // if it's a group call on an announcementsOnly group
+    const call = getOwn(getState().calling.callsByConversation, conversationId);
-    // only allow join if the call has already been started (presumably by the admin)
-    if (conversation.get('announcementsOnly') && !conversation.areWeAdmin()) {
-      const call = getOwn(
-        getState().calling.callsByConversation,
-        conversationId
-      );
 
-      // technically not necessary, but isAnybodyElseInGroupCall requires it
+    // Technically not necessary, but isAnybodyElseInGroupCall requires it
     const ourAci = window.storage.user.getCheckedAci();
-
     const isOngoingGroupCall =
       call &&
       ourAci &&
@@ -1277,6 +1271,9 @@ function onOutgoingVideoCallInConversation(
       call.peekInfo &&
       isAnybodyElseInGroupCall(call.peekInfo, ourAci);
 
+    // If it's a group call on an announcementsOnly group, only allow join if the call
+    //   has already been started (presumably by the admin)
+    if (conversation.get('announcementsOnly') && !conversation.areWeAdmin()) {
       if (!isOngoingGroupCall) {
         dispatch({
           type: SHOW_TOAST,
@@ -1288,7 +1285,11 @@ function onOutgoingVideoCallInConversation(
       }
     }
 
-    if (await isCallSafe(conversation.attributes)) {
+    const source = isOngoingGroupCall
+      ? SafetyNumberChangeSource.JoinCall
+      : SafetyNumberChangeSource.InitiateCall;
+
+    if (await isCallSafe(conversation.attributes, source)) {
       log.info(
         'onOutgoingVideoCallInConversation: call is deemed "safe". Making call'
       );
@@ -1323,10 +1324,13 @@ function onOutgoingAudioCallInConversation(
         `onOutgoingAudioCallInConversation: Conversation ${conversation.idForLogging()} is not 1:1`
       );
     }
+    // Because audio calls are currently restricted to 1:1 conversations, this will always
+    //   be a new call we are initiating.
+    const source = SafetyNumberChangeSource.InitiateCall;
 
     log.info('onOutgoingAudioCallInConversation: about to start an audio call');
 
-    if (await isCallSafe(conversation.attributes)) {
+    if (await isCallSafe(conversation.attributes, source)) {
       log.info(
         'onOutgoingAudioCallInConversation: call is deemed "safe". Making call'
       );

ts/state/smart/SendAnywayDialog.tsx

@@ -45,12 +45,18 @@ export function SmartSendAnywayDialog(): JSX.Element {
   let confirmText: string | undefined = i18n(
     'icu:safetyNumberChangeDialog__pending-messages'
   );
-  if (safetyNumberChangedBlockingData?.source) {
+  if (
-    confirmText =
     safetyNumberChangedBlockingData?.source ===
-      SafetyNumberChangeSource.Calling
+    SafetyNumberChangeSource.InitiateCall
-        ? i18n('icu:callAnyway')
+  ) {
-        : undefined;
+    confirmText = i18n('icu:callAnyway');
+  } else if (
+    safetyNumberChangedBlockingData?.source ===
+    SafetyNumberChangeSource.JoinCall
+  ) {
+    confirmText = i18n('icu:joinAnyway');
+  } else {
+    confirmText = undefined;
   }
 
   return (

ts/state/smart/TimelineItem.tsx

@@ -149,7 +149,11 @@ export function SmartTimelineItem(props: ExternalProps): JSX.Element {
 
   const { viewStory } = useStoriesActions();
 
-  const { returnToActiveCall, startCallingLobby } = useCallingActions();
+  const {
+    onOutgoingAudioCallInConversation,
+    onOutgoingVideoCallInConversation,
+    returnToActiveCall,
+  } = useCallingActions();
 
   return (
     <TimelineItem
@@ -186,6 +190,8 @@ export function SmartTimelineItem(props: ExternalProps): JSX.Element {
       pushPanelForConversation={pushPanelForConversation}
       reactToMessage={reactToMessage}
       copyMessageText={copyMessageText}
+      onOutgoingAudioCallInConversation={onOutgoingAudioCallInConversation}
+      onOutgoingVideoCallInConversation={onOutgoingVideoCallInConversation}
       retryDeleteForEveryone={retryDeleteForEveryone}
       retryMessageSend={retryMessageSend}
       returnToActiveCall={returnToActiveCall}
@@ -201,7 +207,6 @@ export function SmartTimelineItem(props: ExternalProps): JSX.Element {
       showLightbox={showLightbox}
       showLightboxForViewOnceMedia={showLightboxForViewOnceMedia}
       showSpoiler={showSpoiler}
-      startCallingLobby={startCallingLobby}
       startConversation={startConversation}
       toggleDeleteMessagesModal={toggleDeleteMessagesModal}
       toggleForwardMessagesModal={toggleForwardMessagesModal}

ts/util/isCallSafe.ts

@@ -4,18 +4,20 @@
 import type { ConversationAttributesType } from '../model-types';
 
 import * as log from '../logging/log';
-import { SafetyNumberChangeSource } from '../components/SafetyNumberChangeDialog';
 import { blockSendUntilConversationsAreVerified } from './blockSendUntilConversationsAreVerified';
 import { getRecipientsByConversation } from './getRecipientsByConversation';
 
+import type { SafetyNumberChangeSource } from '../components/SafetyNumberChangeDialog';
+
 export async function isCallSafe(
-  attributes: ConversationAttributesType
+  attributes: ConversationAttributesType,
+  source: SafetyNumberChangeSource
 ): Promise<boolean> {
   const recipientsByConversation = getRecipientsByConversation([attributes]);
 
   const callAnyway = await blockSendUntilConversationsAreVerified(
     recipientsByConversation,
-    SafetyNumberChangeSource.Calling
+    source
   );
 
   if (!callAnyway) {