Skip to content

Commit

Permalink
make joinCall async; adding loading spinner to join/start button
Browse files Browse the repository at this point in the history
  • Loading branch information
@cpoile
cpoile committed May 23, 2024
1 parent aecd50c commit e7a604b
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 41 deletions.
69 changes: 38 additions & 31 deletions app/products/calls/alerts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export const leaveAndJoinWithAlert = async (
}
} catch (error) {
logError('failed to getServerDatabase in leaveAndJoinWithAlert', error);
return;
return false;
}

if (leaveServerUrl && leaveChannelId) {
Expand All @@ -119,33 +119,38 @@ export const leaveAndJoinWithAlert = async (
}, {leaveChannelName, joinChannelName});
}

Alert.alert(
formatMessage({
id: 'mobile.leave_and_join_title',
defaultMessage: 'Are you sure you want to switch to a different call?',
}),
joinMessage,
[
{
text: formatMessage({
id: 'mobile.post.cancel',
defaultMessage: 'Cancel',
}),
style: 'destructive',
},
{
text: formatMessage({
id: 'mobile.leave_and_join_confirmation',
defaultMessage: 'Leave & Join',
}),
onPress: () => doJoinCall(joinServerUrl, joinChannelId, joinChannelIsDMorGM, newCall, intl, title, rootId),
style: 'cancel',
},
],
);
} else {
doJoinCall(joinServerUrl, joinChannelId, joinChannelIsDMorGM, newCall, intl, title, rootId);
const asyncAlert = async () => new Promise((resolve) => {
Alert.alert(
formatMessage({
id: 'mobile.leave_and_join_title',
defaultMessage: 'Are you sure you want to switch to a different call?',
}),
joinMessage,
[
{
text: formatMessage({
id: 'mobile.post.cancel',
defaultMessage: 'Cancel',
}),
onPress: async () => resolve(false),
style: 'destructive',
},
{
text: formatMessage({
id: 'mobile.leave_and_join_confirmation',
defaultMessage: 'Leave & Join',
}),
onPress: async () => resolve(await doJoinCall(joinServerUrl, joinChannelId, joinChannelIsDMorGM, newCall, intl, title, rootId)),
style: 'cancel',
},
],
);
});

return asyncAlert();
}

return doJoinCall(joinServerUrl, joinChannelId, joinChannelIsDMorGM, newCall, intl, title, rootId);
};

const doJoinCall = async (
Expand All @@ -166,7 +171,7 @@ const doJoinCall = async (
user = await getCurrentUser(database);
if (!user) {
// This shouldn't happen, so don't bother localizing and displaying an alert.
return;
return false;
}

if (newCall) {
Expand All @@ -189,12 +194,12 @@ const doJoinCall = async (
// continue through and start the call
} else {
contactAdminAlert(intl);
return;
return false;
}
}
} catch (error) {
logError('failed to getServerDatabaseAndOperator in doJoinCall', error);
return;
return false;
}

recordingAlertLock = false;
Expand All @@ -215,12 +220,14 @@ const doJoinCall = async (
if (res.error) {
const seeLogs = formatMessage({id: 'mobile.calls_see_logs', defaultMessage: 'See server logs'});
errorAlert(res.error?.toString() || seeLogs, intl);
return;
return false;
}

if (joinChannelIsDMorGM) {
unmuteMyself();
}

return true;
};

const contactAdminAlert = ({formatMessage}: IntlShape) => {
Expand Down
73 changes: 63 additions & 10 deletions app/products/calls/components/channel_info_start/channel_info_start_button.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React, {useCallback} from 'react';
import React, {useCallback, useState} from 'react';
import {useIntl} from 'react-intl';

import {leaveCall} from '@calls/actions';
import {leaveAndJoinWithAlert, showLimitRestrictedAlert} from '@calls/alerts';
import {useTryCallsFunction} from '@calls/hooks';
import OptionBox from '@components/option_box';
import Loading from '@components/loading';
import OptionBox, {OPTIONS_HEIGHT} from '@components/option_box';
import {useTheme} from '@context/theme';
import {preventDoubleTap} from '@utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {typography} from '@utils/typography';

import type {LimitRestrictedInfo} from '@calls/observers';

Expand All @@ -21,6 +25,27 @@ export interface Props {
limitRestrictedInfo: LimitRestrictedInfo;
}

const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
container: {
alignItems: 'center',
backgroundColor: changeOpacity(theme.buttonBg, 0.08),
borderRadius: 4,
flex: 1,
maxHeight: OPTIONS_HEIGHT,
justifyContent: 'center',
minWidth: 60,
paddingTop: 12,
paddingBottom: 10,
},
text: {
color: theme.buttonBg,
paddingTop: 3,
width: '100%',
textAlign: 'center',
...typography('Body', 50, 'SemiBold'),
},
}));

const ChannelInfoStartButton = ({
serverUrl,
channelId,
Expand All @@ -30,33 +55,61 @@ const ChannelInfoStartButton = ({
limitRestrictedInfo,
}: Props) => {
const intl = useIntl();
const theme = useTheme();
const styles = getStyleSheet(theme);
const isLimitRestricted = limitRestrictedInfo.limitRestricted;
const [connecting, setConnecting] = useState(false);
const [joiningMsg, setJoiningMsg] = useState('');

const starting = intl.formatMessage({id: 'mobile.calls_starting', defaultMessage: 'Starting...'});
const joining = intl.formatMessage({id: 'mobile.calls_joining', defaultMessage: 'Joining...'});

const toggleJoinLeave = useCallback(() => {
const toggleJoinLeave = useCallback(async () => {
if (alreadyInCall) {
leaveCall();
dismissChannelInfo();
} else if (isLimitRestricted) {
showLimitRestrictedAlert(limitRestrictedInfo, intl);
dismissChannelInfo();
} else {
leaveAndJoinWithAlert(intl, serverUrl, channelId);
}
setJoiningMsg(isACallInCurrentChannel ? joining : starting);
setConnecting(true);

dismissChannelInfo();
const connected = await leaveAndJoinWithAlert(intl, serverUrl, channelId);
setConnecting(false);
if (connected) {
dismissChannelInfo();
}
}
}, [isLimitRestricted, alreadyInCall, dismissChannelInfo, intl, serverUrl, channelId, isACallInCurrentChannel]);

const [tryJoin, msgPostfix] = useTryCallsFunction(toggleJoinLeave);

const joinText = intl.formatMessage({id: 'mobile.calls_join_call', defaultMessage: 'Join call'});
const startText = intl.formatMessage({id: 'mobile.calls_start_call', defaultMessage: 'Start call'});
const leaveText = intl.formatMessage({id: 'mobile.calls_leave_call', defaultMessage: 'Leave call'});
const text = isACallInCurrentChannel ? joinText + msgPostfix : startText + msgPostfix;
const icon = isACallInCurrentChannel ? 'phone-in-talk' : 'phone';

if (connecting) {
return (
<Loading
color={theme.buttonBg}
size={'small'}
footerText={joiningMsg}
containerStyle={styles.container}
footerTextStyles={styles.text}
/>
);
}

return (
<OptionBox
onPress={preventDoubleTap(tryJoin)}
text={startText + msgPostfix}
iconName='phone'
activeText={joinText + msgPostfix}
activeIconName='phone-in-talk'
text={text}
iconName={icon}
activeText={isACallInCurrentChannel ? text : starting}
activeIconName={icon}
isActive={isACallInCurrentChannel}
destructiveText={leaveText}
destructiveIconName={'phone-hangup'}
Expand Down

0 comments on commit e7a604b

Please sign in to comment.