diff --git a/ts/components/CallManager.stories.tsx b/ts/components/CallManager.stories.tsx index a89d398c545..35068960958 100644 --- a/ts/components/CallManager.stories.tsx +++ b/ts/components/CallManager.stories.tsx @@ -7,7 +7,6 @@ import type { Meta } from '@storybook/react'; import type { PropsType } from './CallManager'; import { CallManager } from './CallManager'; import { - type ActiveGroupCallType, CallEndedReason, CallMode, CallState, @@ -15,6 +14,10 @@ import { GroupCallConnectionState, GroupCallJoinState, } from '../types/Calling'; +import type { + ActiveGroupCallType, + GroupCallRemoteParticipantType, +} from '../types/Calling'; import type { ConversationType, ConversationTypeType, @@ -55,6 +58,20 @@ const getUnknownContact = (): ConversationType => ({ serviceId: generateAci(), }); +const getUnknownParticipant = (): GroupCallRemoteParticipantType => ({ + ...getPlaceholderContact(), + serviceId: generateAci(), + aci: generateAci(), + demuxId: Math.round(10000 * Math.random()), + hasRemoteAudio: true, + hasRemoteVideo: true, + isHandRaised: false, + mediaKeysReceived: false, + presenting: false, + sharingScreen: false, + videoAspectRatio: 1, +}); + const getCommonActiveCallData = () => ({ conversation: getConversation(), joinedAt: Date.now(), @@ -420,6 +437,27 @@ export function CallLinkWithJoinRequestsMany(): JSX.Element { ); } +export function CallLinkWithJoinRequestUnknownContact(): JSX.Element { + return ( + + ); +} + export function CallLinkWithJoinRequestsSystemContact(): JSX.Element { return ( ); } + +export function CallLinkWithUnknownContacts(): JSX.Element { + return ( + + ); +} diff --git a/ts/components/CallManager.tsx b/ts/components/CallManager.tsx index b20a78d1428..c3c77b2564c 100644 --- a/ts/components/CallManager.tsx +++ b/ts/components/CallManager.tsx @@ -396,6 +396,7 @@ function ActiveCallManager({ callLink={callLink} i18n={i18n} isCallLinkAdmin={isCallLinkAdmin} + isUnknownContactDiscrete={false} ourServiceId={me.serviceId} participants={peekedParticipants} onClose={toggleParticipants} @@ -495,6 +496,7 @@ function ActiveCallManager({ callLink={callLink} i18n={i18n} isCallLinkAdmin={isCallLinkAdmin} + isUnknownContactDiscrete ourServiceId={me.serviceId} participants={groupCallParticipantsForParticipantsList} onClose={toggleParticipants} diff --git a/ts/components/CallingAdhocCallInfo.stories.tsx b/ts/components/CallingAdhocCallInfo.stories.tsx index 6585fc7ee04..13e33ece311 100644 --- a/ts/components/CallingAdhocCallInfo.stories.tsx +++ b/ts/components/CallingAdhocCallInfo.stories.tsx @@ -62,6 +62,7 @@ const createProps = (overrideProps: Partial = {}): PropsType => ({ callLink: getCallLink(overrideProps.callLink || {}), i18n, isCallLinkAdmin: overrideProps.isCallLinkAdmin || false, + isUnknownContactDiscrete: overrideProps.isUnknownContactDiscrete || false, ourServiceId: generateAci(), participants: overrideProps.participants || [], onClose: action('on-close'), diff --git a/ts/components/CallingAdhocCallInfo.tsx b/ts/components/CallingAdhocCallInfo.tsx index 0b76725c496..8e9516f31f8 100644 --- a/ts/components/CallingAdhocCallInfo.tsx +++ b/ts/components/CallingAdhocCallInfo.tsx @@ -36,6 +36,7 @@ export type PropsType = { readonly callLink: CallLinkType; readonly i18n: LocalizerType; readonly isCallLinkAdmin: boolean; + readonly isUnknownContactDiscrete: boolean; readonly ourServiceId: ServiceIdString | undefined; readonly participants: Array; readonly onClose: () => void; @@ -145,6 +146,7 @@ function UnknownContacts({ export function CallingAdhocCallInfo({ i18n, isCallLinkAdmin, + isUnknownContactDiscrete, ourServiceId, participants, blockClient, @@ -170,18 +172,20 @@ export function CallingAdhocCallInfo({ onShareCallLinkViaSignal(); }, [onClose, onShareCallLinkViaSignal]); - const [knownParticipants, unknownParticipants] = React.useMemo< + const [visibleParticipants, unknownParticipants] = React.useMemo< [Array, Array] >( () => - partition(participants, (participant: ParticipantType) => - Boolean(participant.titleNoDefault) + partition( + participants, + (participant: ParticipantType) => + isUnknownContactDiscrete || Boolean(participant.titleNoDefault) ), - [participants] + [isUnknownContactDiscrete, participants] ); const sortedParticipants = React.useMemo>( - () => sortByTitle(knownParticipants), - [knownParticipants] + () => sortByTitle(visibleParticipants), + [visibleParticipants] ); const renderParticipant = React.useCallback( @@ -377,7 +381,9 @@ export function CallingAdhocCallInfo({ {unknownParticipants.length > 0 && ( setIsUnknownContactDialogVisible(true)