Properly style call buttons across app, when already in a call
This commit is contained in:
parent
3c25092f50
commit
c251867699
39 changed files with 610 additions and 189 deletions
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue