Prevent deletion of active call links and style join button
This commit is contained in:
parent
5835e9033d
commit
dec06209e7
8 changed files with 198 additions and 65 deletions
|
@ -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);
|
||||
}}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue