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)