Call details screen disable call buttons if call is active

This commit is contained in:
Evan Hahn 2022-02-16 12:33:52 -06:00 committed by GitHub
parent da68def79f
commit fd81d38931
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 60 additions and 22 deletions

View file

@ -137,9 +137,7 @@ function renderCallingNotificationButton(
? i18n('calling__call-back')
: i18n('calling__call-again');
if (activeCallConversationId) {
disabledTooltipText = i18n(
'calling__call-notification__button__in-another-call-tooltip'
);
disabledTooltipText = i18n('calling__in-another-call-tooltip');
onClick = noop;
} else {
onClick = () => {
@ -159,9 +157,7 @@ function renderCallingNotificationButton(
onClick = returnToActiveCall;
} else {
buttonText = i18n('calling__join');
disabledTooltipText = i18n(
'calling__call-notification__button__in-another-call-tooltip'
);
disabledTooltipText = i18n('calling__in-another-call-tooltip');
onClick = noop;
}
} else if (deviceCount >= maxDevices) {

View file

@ -1,4 +1,4 @@
// Copyright 2021 Signal Messenger, LLC
// Copyright 2021-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
@ -46,6 +46,7 @@ const createProps = (hasGroupLink = false, expireTimer?: number): Props => ({
expireTimer,
}
: conversation,
hasActiveCall: false,
hasGroupLink,
getPreferredBadge: () => undefined,
i18n,

View file

@ -1,10 +1,11 @@
// Copyright 2021 Signal Messenger, LLC
// Copyright 2021-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { ReactNode } from 'react';
import React, { useState } from 'react';
import { Button, ButtonIconType, ButtonVariant } from '../../Button';
import { Tooltip } from '../../Tooltip';
import type { ConversationType } from '../../../state/ducks/conversations';
import type { PreferredBadgeSelectorType } from '../../../state/selectors/badges';
import { assert } from '../../../util/assert';
@ -62,6 +63,7 @@ export type StateProps = {
conversation?: ConversationType;
hasGroupLink: boolean;
getPreferredBadge: PreferredBadgeSelectorType;
hasActiveCall: boolean;
i18n: LocalizerType;
isAdmin: boolean;
isGroup: boolean;
@ -118,6 +120,7 @@ export const ConversationDetails: React.ComponentType<Props> = ({
deleteAvatarFromDisk,
hasGroupLink,
getPreferredBadge,
hasActiveCall,
i18n,
isAdmin,
isGroup,
@ -339,21 +342,19 @@ export const ConversationDetails: React.ComponentType<Props> = ({
<div className="ConversationDetails__header-buttons">
{!conversation.isMe && (
<>
<Button
icon={ButtonIconType.video}
<ConversationDetailsCallButton
disabled={hasActiveCall}
i18n={i18n}
onClick={onOutgoingVideoCallInConversation}
variant={ButtonVariant.Details}
>
{i18n('video')}
</Button>
type="video"
/>
{!isGroup && (
<Button
icon={ButtonIconType.audio}
<ConversationDetailsCallButton
disabled={hasActiveCall}
i18n={i18n}
onClick={onOutgoingAudioCallInConversation}
variant={ButtonVariant.Details}
>
{i18n('audio')}
</Button>
type="audio"
/>
)}
</>
)}
@ -546,3 +547,36 @@ export const ConversationDetails: React.ComponentType<Props> = ({
</div>
);
};
function ConversationDetailsCallButton({
disabled,
i18n,
onClick,
type,
}: Readonly<{
disabled: boolean;
i18n: LocalizerType;
onClick: () => unknown;
type: 'audio' | 'video';
}>) {
const button = (
<Button
disabled={disabled}
icon={ButtonIconType[type]}
onClick={onClick}
variant={ButtonVariant.Details}
>
{i18n(type)}
</Button>
);
if (disabled) {
return (
<Tooltip content={i18n('calling__in-another-call-tooltip')}>
{button}
</Tooltip>
);
}
return button;
}