[MM-58581] Calls: End call confirmations (#8004)

* end call confirmations

* i18n

* remove unneeded asyncs

* better alert for android

Author: cpoile

app/actions/websocket/index.ts

@@ -24,7 +24,10 @@ import {
     handleCallRecordingState,
     handleCallScreenOff,
     handleCallScreenOn,
-    handleCallStarted, handleCallUserConnected, handleCallUserDisconnected,
+    handleCallStarted,
+    handleCallState,
+    handleCallUserConnected,
+    handleCallUserDisconnected,
     handleCallUserJoined,
     handleCallUserLeft,
     handleCallUserMuted,
@@ -450,6 +453,9 @@ export async function handleEvent(serverUrl: string, msg: WebSocketMessage) {
         case WebsocketEvents.CALLS_HOST_REMOVED:
             handleHostRemoved(serverUrl, msg);
             break;
+        case WebsocketEvents.CALLS_CALL_STATE:
+            handleCallState(serverUrl, msg);
+            break;
 
         case WebsocketEvents.GROUP_RECEIVED:
             handleGroupReceivedEvent(serverUrl, msg);

app/components/post_list/post/post.tsx

@@ -341,6 +341,12 @@ const Post = ({
             <CallsCustomMessage
                 serverUrl={serverUrl}
                 post={post}
+
+                // Note: the below are provided by the index, but typescript seems to be having problems.
+                otherParticipants={false}
+                isAdmin={false}
+                isHost={false}
+                joiningChannelId={null}
             />
         );
     } else {

app/constants/websocket.ts

@@ -91,6 +91,7 @@ const WebsocketEvents = {
     CALLS_HOST_MUTE: `custom_${Calls.PluginId}_host_mute`,
     CALLS_HOST_LOWER_HAND: `custom_${Calls.PluginId}_host_lower_hand`,
     CALLS_HOST_REMOVED: `custom_${Calls.PluginId}_host_removed`,
+    CALLS_CALL_STATE: `custom_${Calls.PluginId}_call_state`,
 
     GROUP_RECEIVED: 'received_group',
     GROUP_MEMBER_ADD: 'group_member_add',

app/products/calls/actions/calls.ts

@@ -8,6 +8,7 @@ import {forceLogoutIfNecessary} from '@actions/remote/session';
 import {updateThreadFollowing} from '@actions/remote/thread';
 import {fetchUsersByIds} from '@actions/remote/user';
 import {
+    endCallConfirmationAlert,
     leaveAndJoinWithAlert,
     needsRecordingErrorAlert,
     needsRecordingWillBePostedAlert,
@@ -28,6 +29,7 @@ import {
     setScreenShareURL,
     setSpeakerPhone,
 } from '@calls/state';
+import {type AudioDevice, type Call, type CallSession, type CallsConnection, EndCallReturn} from '@calls/types/calls';
 import {General, Preferences} from '@constants';
 import Calls from '@constants/calls';
 import DatabaseManager from '@database/manager';
@@ -44,7 +46,6 @@ import {displayUsername, getUserIdFromChannelName, isSystemAdmin} from '@utils/u
 
 import {newConnection} from '../connection/connection';
 
-import type {AudioDevice, Call, CallSession, CallsConnection} from '@calls/types/calls';
 import type {CallChannelState, CallState, EmojiData, SessionState} from '@mattermost/calls/lib/types';
 import type {IntlShape} from 'react-intl';
 
@@ -132,7 +133,7 @@ export const loadCallForChannel = async (serverUrl: string, channelId: string) =
         fetchUsersByIds(serverUrl, Array.from(ids));
     }
 
-    setCallForChannel(serverUrl, channelId, resp.enabled, call);
+    setCallForChannel(serverUrl, channelId, call, resp.enabled);
 
     return {data: {call, enabled: resp.enabled}};
 };
@@ -160,11 +161,12 @@ const convertOldCallToNew = (call: CallState): CallState => {
     };
 };
 
-const createCallAndAddToIds = (channelId: string, call: CallState, ids: Set<string>) => {
-    return {
+export const createCallAndAddToIds = (channelId: string, call: CallState, ids?: Set<string>) => {
+    // Don't cast so that we get alerted to missing types
+    const convertedCall: Call = {
         sessions: Object.values(call.sessions).reduce((accum, cur) => {
             // Add the id to the set of UserModels we want to ensure are loaded.
-            ids.add(cur.user_id);
+            ids?.add(cur.user_id);
 
             // Create the CallParticipant
             accum[cur.session_id] = {
@@ -184,7 +186,9 @@ const createCallAndAddToIds = (channelId: string, call: CallState, ids: Set<stri
         hostId: call.host_id,
         recState: call.recording,
         dismissed: call.dismissed_notification || {},
-    } as Call;
+    };
+
+    return convertedCall;
 };
 
 export const loadConfigAndCalls = async (serverUrl: string, userId: string) => {
@@ -302,6 +306,29 @@ export const leaveCall = (err?: Error) => {
     }
 };
 
+export const leaveCallConfirmation = async (
+    intl: IntlShape,
+    otherParticipants: boolean,
+    isAdmin: boolean,
+    isHost: boolean,
+    serverUrl: string,
+    channelId: string,
+    leaveCb?: () => void) => {
+    const showHostControls = (isHost || isAdmin) && otherParticipants;
+    const ret = await endCallConfirmationAlert(intl, showHostControls) as EndCallReturn;
+    switch (ret) {
+        case EndCallReturn.Cancel:
+            return;
+        case EndCallReturn.LeaveCall:
+            leaveCall();
+            leaveCb?.();
+            return;
+        case EndCallReturn.EndCall:
+            endCall(serverUrl, channelId);
+            leaveCb?.();
+    }
+};
+
 export const muteMyself = () => {
     if (connection) {
         connection.mute();

app/products/calls/alerts.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {Alert} from 'react-native';
+import {Alert, type AlertButton, Platform} from 'react-native';
 
 import {hasMicrophonePermission, joinCall, leaveCall, unmuteMyself} from '@calls/actions';
 import {dismissIncomingCall, hostRemove} from '@calls/actions/calls';
@@ -15,6 +15,7 @@ import {
     removeIncomingCall,
     setMicPermissionsGranted,
 } from '@calls/state';
+import {EndCallReturn} from '@calls/types/calls';
 import {errorAlert} from '@calls/utils';
 import DatabaseManager from '@database/manager';
 import {getChannelById} from '@queries/servers/channel';
@@ -132,7 +133,7 @@ export const leaveAndJoinWithAlert = async (
                             id: 'mobile.post.cancel',
                             defaultMessage: 'Cancel',
                         }),
-                        onPress: async () => resolve(false),
+                        onPress: () => resolve(false),
                         style: 'destructive',
                     },
                     {
@@ -473,3 +474,61 @@ export const removeFromCall = (serverUrl: string, displayName: string, callId: s
         style: 'destructive',
     }]);
 };
+
+export const endCallConfirmationAlert = (intl: IntlShape, showHostControls: boolean) => {
+    const {formatMessage} = intl;
+
+    const asyncAlert = async () => new Promise((resolve) => {
+        const buttons: AlertButton[] = [{
+            text: formatMessage({
+                id: 'mobile.calls_cancel',
+                defaultMessage: 'Cancel',
+            }),
+            onPress: () => resolve(EndCallReturn.Cancel),
+            style: 'cancel',
+        }, {
+            text: formatMessage({
+                id: 'mobile.calls_host_leave_confirm',
+                defaultMessage: 'Leave call',
+            }),
+            onPress: () => resolve(EndCallReturn.LeaveCall),
+            style: 'destructive',
+        }];
+        const questionMsg = formatMessage({
+            id: 'mobile.calls_host_leave_title',
+            defaultMessage: 'Are you sure you want to leave this call?',
+        });
+
+        if (showHostControls) {
+            const endCallButton: AlertButton = {
+                text: formatMessage({
+                    id: 'mobile.calls_host_end_confirm',
+                    defaultMessage: 'End call for everyone',
+                }),
+                onPress: () => resolve(EndCallReturn.EndCall),
+                style: 'destructive',
+            };
+            const leaveCallButton = {
+                text: formatMessage({
+                    id: 'mobile.calls_host_leave_confirm',
+                    defaultMessage: 'Leave call',
+                }),
+                onPress: () => resolve(EndCallReturn.LeaveCall),
+            };
+
+            if (Platform.OS === 'ios') {
+                buttons.splice(1, 1, endCallButton, leaveCallButton);
+            } else {
+                buttons.splice(1, 1, leaveCallButton, endCallButton);
+            }
+        }
+
+        if (Platform.OS === 'ios') {
+            Alert.alert(questionMsg, '', buttons);
+        } else {
+            Alert.alert('', questionMsg, buttons);
+        }
+    });
+
+    return asyncAlert();
+};

app/products/calls/components/calls_custom_message/calls_custom_message.tsx

@@ -6,7 +6,7 @@ import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
 import {Text, TouchableOpacity, View} from 'react-native';
 
-import {leaveCall} from '@calls/actions';
+import {leaveCallConfirmation} from '@calls/actions/calls';
 import {leaveAndJoinWithAlert, showLimitRestrictedAlert} from '@calls/alerts';
 import {setJoiningChannelId} from '@calls/state';
 import CompassIcon from '@components/compass_icon';
@@ -26,11 +26,14 @@ import type UserModel from '@typings/database/models/servers/user';
 
 type Props = {
     post: PostModel;
-    currentUser?: UserModel;
     isMilitaryTime: boolean;
+    joiningChannelId: string | null;
+    otherParticipants: boolean;
+    isAdmin: boolean;
+    isHost: boolean;
+    currentUser?: UserModel;
     limitRestrictedInfo?: LimitRestrictedInfo;
     ccChannelId?: string;
-    joiningChannelId: string | null;
 }
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
@@ -131,6 +134,9 @@ export const CallsCustomMessage = ({
     ccChannelId,
     limitRestrictedInfo,
     joiningChannelId,
+    otherParticipants,
+    isAdmin,
+    isHost,
 }: Props) => {
     const intl = useIntl();
     const theme = useTheme();
@@ -154,9 +160,9 @@ export const CallsCustomMessage = ({
         setJoiningChannelId(null);
     }, [limitRestrictedInfo, intl, serverUrl, post.channelId]);
 
-    const leaveHandler = useCallback(() => {
-        leaveCall();
-    }, []);
+    const leaveCallHandler = useCallback(() => {
+        leaveCallConfirmation(intl, otherParticipants, isAdmin, isHost, serverUrl, post.channelId);
+    }, [intl, otherParticipants, isAdmin, isHost, serverUrl, post.channelId]);
 
     const title = post.props.title ? (
         <Text style={style.title}>
@@ -210,7 +216,7 @@ export const CallsCustomMessage = ({
     const button = alreadyInTheCall ? (
         <TouchableOpacity
             style={[style.callButton, style.leaveCallButton]}
-            onPress={leaveHandler}
+            onPress={leaveCallHandler}
         >
             <CompassIcon
                 name='phone-hangup'

app/products/calls/components/calls_custom_message/index.ts

@@ -6,7 +6,7 @@ import {of as of$} from 'rxjs';
 import {distinctUntilChanged, switchMap} from 'rxjs/operators';
 
 import {CallsCustomMessage} from '@calls/components/calls_custom_message/calls_custom_message';
-import {observeIsCallLimitRestricted} from '@calls/observers';
+import {observeEndCallDetails, observeIsCallLimitRestricted} from '@calls/observers';
 import {observeCurrentCall, observeGlobalCallsState} from '@calls/state';
 import {Preferences} from '@constants';
 import {getDisplayNamePreferenceAsBool} from '@helpers/api/preference';
@@ -52,6 +52,7 @@ const enhanced = withObservables(['post'], ({serverUrl, post, database}: OwnProp
         limitRestrictedInfo: observeIsCallLimitRestricted(database, serverUrl, post.channelId),
         ccChannelId,
         joiningChannelId,
+        ...observeEndCallDetails(),
     };
 });
 

app/products/calls/components/channel_info_start/channel_info_start_button.tsx

@@ -4,7 +4,7 @@
 import React, {useCallback, useState} from 'react';
 import {useIntl} from 'react-intl';
 
-import {leaveCall} from '@calls/actions';
+import {leaveCallConfirmation} from '@calls/actions/calls';
 import {leaveAndJoinWithAlert, showLimitRestrictedAlert} from '@calls/alerts';
 import {useTryCallsFunction} from '@calls/hooks';
 import Loading from '@components/loading';
@@ -23,6 +23,9 @@ export interface Props {
     alreadyInCall: boolean;
     dismissChannelInfo: () => void;
     limitRestrictedInfo: LimitRestrictedInfo;
+    otherParticipants: boolean;
+    isAdmin: boolean;
+    isHost: boolean;
 }
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
@@ -53,6 +56,9 @@ const ChannelInfoStartButton = ({
     alreadyInCall,
     dismissChannelInfo,
     limitRestrictedInfo,
+    otherParticipants,
+    isAdmin,
+    isHost,
 }: Props) => {
     const intl = useIntl();
     const theme = useTheme();
@@ -66,8 +72,7 @@ const ChannelInfoStartButton = ({
 
     const toggleJoinLeave = useCallback(async () => {
         if (alreadyInCall) {
-            leaveCall();
-            dismissChannelInfo();
+            await leaveCallConfirmation(intl, otherParticipants, isAdmin, isHost, serverUrl, channelId, dismissChannelInfo);
         } else if (isLimitRestricted) {
             showLimitRestrictedAlert(limitRestrictedInfo, intl);
             dismissChannelInfo();
@@ -79,7 +84,7 @@ const ChannelInfoStartButton = ({
             setConnecting(false);
             dismissChannelInfo();
         }
-    }, [isLimitRestricted, alreadyInCall, dismissChannelInfo, intl, serverUrl, channelId, isACallInCurrentChannel]);
+    }, [isLimitRestricted, alreadyInCall, dismissChannelInfo, intl, serverUrl, channelId, isACallInCurrentChannel, otherParticipants]);
 
     const [tryJoin, msgPostfix] = useTryCallsFunction(toggleJoinLeave);
 

app/products/calls/components/channel_info_start/index.ts

@@ -6,7 +6,7 @@ import {of as of$} from 'rxjs';
 import {distinctUntilChanged, switchMap} from 'rxjs/operators';
 
 import ChannelInfoStartButton from '@calls/components/channel_info_start/channel_info_start_button';
-import {observeIsCallLimitRestricted} from '@calls/observers';
+import {observeEndCallDetails, observeIsCallLimitRestricted} from '@calls/observers';
 import {observeChannelsWithCalls, observeCurrentCall} from '@calls/state';
 
 import type {WithDatabaseArgs} from '@typings/database/database';
@@ -33,6 +33,7 @@ const enhanced = withObservables([], ({serverUrl, channelId, database}: EnhanceP
         confirmToJoin,
         alreadyInCall,
         limitRestrictedInfo: observeIsCallLimitRestricted(database, serverUrl, channelId),
+        ...observeEndCallDetails(),
     };
 });