Properly style call buttons across app, when already in a call

This commit is contained in:
Scott Nonnenberg 2024-08-27 06:48:41 +10:00 committed by GitHub
parent 3c25092f50
commit c251867699
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
39 changed files with 610 additions and 189 deletions

View file

@ -37,6 +37,7 @@ import {
} from '../../hooks/useKeyboardShortcuts';
import { MINUTE } from '../../util/durations';
import { isMoreRecentThan } from '../../util/timestamp';
import { InAnotherCallTooltip } from './InAnotherCallTooltip';
export type PropsActionsType = {
onOutgoingAudioCallInConversation: (conversationId: string) => void;
@ -162,6 +163,11 @@ function renderCallingNotificationButton(
let disabledTooltipText: undefined | string;
let onClick: () => void;
const inThisCall = Boolean(
props.activeConversationId &&
props.activeConversationId === props.conversationId
);
if (props.callHistory == null) {
return null;
}
@ -169,25 +175,20 @@ function renderCallingNotificationButton(
switch (props.callHistory.mode) {
case CallMode.Direct: {
const { direction, type } = props.callHistory;
if (props.callHistory.status === DirectCallStatus.Pending) {
if (props.callHistory.status === DirectCallStatus.Pending || inThisCall) {
return null;
}
buttonText =
direction === CallDirection.Incoming
? i18n('icu:calling__call-back')
: i18n('icu:calling__call-again');
if (props.activeConversationId != null) {
disabledTooltipText = i18n('icu:calling__in-another-call-tooltip');
onClick = noop;
} else {
onClick = () => {
if (type === CallType.Video) {
onOutgoingVideoCallInConversation(conversationId);
} else {
onOutgoingAudioCallInConversation(conversationId);
}
};
}
onClick = () => {
if (type === CallType.Video) {
onOutgoingVideoCallInConversation(conversationId);
} else {
onOutgoingAudioCallInConversation(conversationId);
}
};
break;
}
case CallMode.Group: {
@ -207,15 +208,16 @@ function renderCallingNotificationButton(
return null;
}
} else if (props.activeConversationId != null) {
if (props.activeConversationId === conversationId) {
if (inThisCall) {
buttonText = i18n('icu:calling__return');
onClick = returnToActiveCall;
} else {
buttonText = i18n('icu:calling__join');
disabledTooltipText = i18n('icu:calling__in-another-call-tooltip');
onClick = noop;
onClick = () => {
onOutgoingVideoCallInConversation(conversationId);
};
}
} else if (props.deviceCount > props.maxDevices) {
} else if (props.deviceCount >= props.maxDevices) {
buttonText = i18n('icu:calling__call-is-full');
disabledTooltipText = i18n(
'icu:calling__call-notification__button__call-full-tooltip',
@ -240,9 +242,16 @@ function renderCallingNotificationButton(
return null;
}
const disabled = Boolean(disabledTooltipText);
const inAnotherCall = Boolean(
!disabled &&
props.activeConversationId &&
props.activeConversationId !== props.conversationId
);
const button = (
<Button
disabled={Boolean(disabledTooltipText)}
disabled={disabled}
discouraged={inAnotherCall}
onClick={onClick}
size={ButtonSize.Small}
variant={ButtonVariant.SystemMessage}
@ -258,5 +267,9 @@ function renderCallingNotificationButton(
</Tooltip>
);
}
if (inAnotherCall) {
return <InAnotherCallTooltip i18n={i18n}>{button}</InAnotherCallTooltip>;
}
return button;
}