Prevent deletion of active call links and style join button

This commit is contained in:
ayumi-signal 2024-09-09 15:09:57 -07:00 committed by GitHub
parent 5835e9033d
commit dec06209e7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 198 additions and 65 deletions

View file

@ -1,6 +1,7 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { useState } from 'react';
import classNames from 'classnames';
import type { CallHistoryGroup } from '../types/CallDisposition';
import type { LocalizerType } from '../types/I18N';
import { CallHistoryGroupPanelSection } from './conversation/conversation-details/CallHistoryGroupPanelSection';
@ -21,6 +22,8 @@ import { isCallLinkAdmin } from '../types/CallLink';
import { CallLinkRestrictionsSelect } from './CallLinkRestrictionsSelect';
import { ConfirmationDialog } from './ConfirmationDialog';
import { InAnotherCallTooltip } from './conversation/InAnotherCallTooltip';
import { offsetDistanceModifier } from '../util/popperUtil';
import { Tooltip, TooltipPlacement } from './Tooltip';
function toUrlWithoutProtocol(url: URL): string {
return `${url.hostname}${url.pathname}${url.search}${url.hash}`;
@ -29,7 +32,9 @@ function toUrlWithoutProtocol(url: URL): string {
export type CallLinkDetailsProps = Readonly<{
callHistoryGroup: CallHistoryGroup;
callLink: CallLinkType;
hasActiveCall: boolean;
isAnybodyInCall: boolean;
isInCall: boolean;
isInAnotherCall: boolean;
i18n: LocalizerType;
onDeleteCallLink: () => void;
onOpenCallLinkAddNameModal: () => void;
@ -42,7 +47,9 @@ export function CallLinkDetails({
callHistoryGroup,
callLink,
i18n,
hasActiveCall,
isAnybodyInCall,
isInCall,
isInAnotherCall,
onDeleteCallLink,
onOpenCallLinkAddNameModal,
onStartCallLinkLobby,
@ -56,15 +63,32 @@ export function CallLinkDetails({
});
const joinButton = (
<Button
className="CallLinkDetails__HeaderButton"
variant={ButtonVariant.SecondaryAffirmative}
discouraged={hasActiveCall}
className={classNames({
CallLinkDetails__HeaderButton: true,
'CallLinkDetails__HeaderButton--active-call': isAnybodyInCall,
})}
variant={
isAnybodyInCall
? ButtonVariant.Calling
: ButtonVariant.SecondaryAffirmative
}
discouraged={isInAnotherCall}
size={ButtonSize.Small}
onClick={onStartCallLinkLobby}
>
{i18n('icu:CallLinkDetails__Join')}
{isInCall
? i18n('icu:CallsNewCallButton--return')
: i18n('icu:CallLinkDetails__Join')}
</Button>
);
const callLinkRestrictionsSelect = (
<CallLinkRestrictionsSelect
disabled={isAnybodyInCall}
i18n={i18n}
value={callLink.restrictions}
onChange={onUpdateCallLinkRestrictions}
/>
);
return (
<div className="CallLinkDetails__Container">
@ -92,7 +116,7 @@ export function CallLinkDetails({
</p>
</div>
<div className="CallLinkDetails__HeaderActions">
{hasActiveCall ? (
{isInAnotherCall ? (
<InAnotherCallTooltip i18n={i18n}>
{joinButton}
</InAnotherCallTooltip>
@ -130,11 +154,20 @@ export function CallLinkDetails({
}
label={i18n('icu:CallLinkDetails__ApproveAllMembersLabel')}
right={
<CallLinkRestrictionsSelect
i18n={i18n}
value={callLink.restrictions}
onChange={onUpdateCallLinkRestrictions}
/>
isAnybodyInCall ? (
<Tooltip
className="CallLinkDetails__ApproveAllMembersDisabledTooltip"
content={i18n(
'icu:CallLinkDetails__SettingTooltip--disabled-for-active-call'
)}
direction={TooltipPlacement.Top}
popperModifiers={[offsetDistanceModifier(5)]}
>
{callLinkRestrictionsSelect}
</Tooltip>
) : (
callLinkRestrictionsSelect
)
}
/>
</PanelSection>
@ -166,14 +199,34 @@ export function CallLinkDetails({
{isCallLinkAdmin(callLink) && (
<PanelSection>
<PanelRow
className="CallLinkDetails__DeleteLink"
className={classNames({
CallLinkDetails__DeleteLink: true,
'CallLinkDetails__DeleteLink--disabled-for-active-call':
isAnybodyInCall,
})}
disabled={isAnybodyInCall}
icon={
<ConversationDetailsIcon
ariaLabel={i18n('icu:CallLinkDetails__DeleteLink')}
icon={IconType.trash}
/>
}
label={i18n('icu:CallLinkDetails__DeleteLink')}
label={
isAnybodyInCall ? (
<Tooltip
className="CallLinkDetails__DeleteLinkTooltip"
content={i18n(
'icu:CallLinkDetails__DeleteLinkTooltip--disabled-for-active-call'
)}
direction={TooltipPlacement.Top}
popperModifiers={[offsetDistanceModifier(5)]}
>
{i18n('icu:CallLinkDetails__DeleteLink')}
</Tooltip>
) : (
i18n('icu:CallLinkDetails__DeleteLink')
)
}
onClick={() => {
setIsDeleteCallLinkModalOpen(true);
}}