diff --git a/_locales/en/messages.json b/_locales/en/messages.json index bdc370751..0b6f15b45 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1881,6 +1881,10 @@ "messageformat": "Can't receive audio and video from {name}", "description": "When you can't view someone's audio and video in a call because their media keys are unavailable" }, + "icu:calling__missing-media-keys--unknown-contact": { + "messageformat": "Can't receive audio and video", + "description": "When you can't view someone's audio and video in a call because their media keys are unavailable, and their profile information is not available" + }, "icu:calling__missing-media-keys-info": { "messageformat": "This may be because they have not verified your safety number change, there's a problem with their device, or they have blocked you.", "description": "Detailed explanation why you can't view someone's audio and video in a call because their media keys are unavailable." diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index d8d547f89..4892bcec9 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -3873,10 +3873,6 @@ button.module-image__border-overlay:focus { padding-inline: 16px; } - .module-ongoing-call__group-call-remote-participant__error-icon { - margin-block-end: 16px; - } - .module-ongoing-call__group-call-remote-participant__error { display: block; } @@ -4099,7 +4095,7 @@ button.module-image__border-overlay:focus { // when @container size is big enough display: none; - margin-block-end: 12px; + margin-block-end: 16px; margin-inline: 8px; font-size: 12px; line-height: 16px; @@ -4113,7 +4109,7 @@ button.module-image__border-overlay:focus { padding-block: 3px; padding-inline: 10px; border-radius: 16px; - background-color: $color-gray-75; + background-color: $color-black-alpha-30; color: $color-white; font-size: 12px; line-height: 16px; @@ -4128,12 +4124,29 @@ button.module-image__border-overlay:focus { overflow: hidden; text-overflow: ellipsis; } + + // Shown in the mini version / overflow sidebar + &--icon { + width: 20px; + height: 20px; + } + + &--icon-blocked { + @include color-svg('../images/icons/v3/block/block.svg', $color-white); + } + + &--icon-missing-media-keys { + @include color-svg( + '../images/icons/v3/error/error-circle.svg', + $color-white + ); + } } &__error-icon { - width: 24px; - height: 24px; - margin-block-end: 8px; + width: 20px; + height: 20px; + margin-block-end: 12px; &--blocked { @include color-svg('../images/icons/v3/block/block.svg', $color-white); @@ -4141,7 +4154,7 @@ button.module-image__border-overlay:focus { &--missing-media-keys { @include color-svg( - '../images/icons/v3/error/error-circle-solid.svg', + '../images/icons/v3/error/error-circle.svg', $color-white ); } diff --git a/ts/components/CallScreen.stories.tsx b/ts/components/CallScreen.stories.tsx index 1673b7f5e..62fd4b06d 100644 --- a/ts/components/CallScreen.stories.tsx +++ b/ts/components/CallScreen.stories.tsx @@ -65,8 +65,9 @@ type DirectCallOverrideProps = OverridePropsBase & { }; type GroupCallOverrideProps = OverridePropsBase & { - callMode: CallMode.Group; + callMode: CallMode.Group | CallMode.Adhoc; connectionState?: GroupCallConnectionState; + groupMembers?: Array; peekedParticipants?: Array; pendingParticipants?: Array; raisedHands?: Set; @@ -131,7 +132,8 @@ const createActiveGroupCallProp = (overrideProps: GroupCallOverrideProps) => ({ localDemuxId: LOCAL_DEMUX_ID, maxDevices: 5, deviceCount: (overrideProps.remoteParticipants || []).length, - groupMembers: overrideProps.remoteParticipants || [], + groupMembers: + overrideProps.groupMembers || overrideProps.remoteParticipants || [], // Because remote participants are a superset, we can use them in place of peeked // participants. isConversationTooBigToRing: false, @@ -173,6 +175,12 @@ const createActiveCallProp = ( return { ...baseResult, ...createActiveDirectCallProp(overrideProps) }; case CallMode.Group: return { ...baseResult, ...createActiveGroupCallProp(overrideProps) }; + case CallMode.Adhoc: + return { + ...baseResult, + ...createActiveGroupCallProp(overrideProps), + callMode: CallMode.Adhoc as CallMode.Adhoc, + }; default: throw missingCaseError(overrideProps); } @@ -872,3 +880,26 @@ export function GroupCallSomeoneBlocked(): JSX.Element { /> ); } + +export function CallLinkUnknownContactMissingMediaKeys(): JSX.Element { + return ( + ({ + ...participant, + title: index === 1 ? 'Unknown Contact' : participant.title, + titleNoDefault: + index === 1 ? undefined : participant.titleNoDefault, + addedTime: index === 1 ? Date.now() - 60000 : undefined, + hasRemoteAudio: false, + hasRemoteVideo: false, + mediaKeysReceived: index !== 1, + })), + })} + /> + ); +} diff --git a/ts/components/GroupCallOverflowArea.tsx b/ts/components/GroupCallOverflowArea.tsx index eb28fca75..71036da15 100644 --- a/ts/components/GroupCallOverflowArea.tsx +++ b/ts/components/GroupCallOverflowArea.tsx @@ -137,6 +137,7 @@ export function GroupCallOverflowArea({ remoteParticipantsCount={remoteParticipantsCount} isActiveSpeakerInSpeakerView={false} isCallReconnecting={isCallReconnecting} + isInOverflow /> ))} diff --git a/ts/components/GroupCallRemoteParticipant.tsx b/ts/components/GroupCallRemoteParticipant.tsx index 2e0a841f4..057555d49 100644 --- a/ts/components/GroupCallRemoteParticipant.tsx +++ b/ts/components/GroupCallRemoteParticipant.tsx @@ -43,6 +43,7 @@ type BasePropsType = { imageDataCache: React.RefObject; isActiveSpeakerInSpeakerView: boolean; isCallReconnecting: boolean; + isInOverflow?: boolean; onClickRaisedHand?: () => void; onVisibilityChanged?: (demuxId: number, isVisible: boolean) => unknown; remoteParticipant: GroupCallRemoteParticipantType; @@ -80,6 +81,7 @@ export const GroupCallRemoteParticipant: React.FC = React.memo( remoteParticipantsCount, isActiveSpeakerInSpeakerView, isCallReconnecting, + isInOverflow, } = props; const { @@ -98,6 +100,7 @@ export const GroupCallRemoteParticipant: React.FC = React.memo( sharedGroupNames, sharingScreen, title, + titleNoDefault, videoAspectRatio, } = props.remoteParticipant; @@ -357,26 +360,60 @@ export const GroupCallRemoteParticipant: React.FC = React.memo( {i18n('icu:moreInfo')} ); + if (isBlocked) { - noVideoNode = ( - <> - -
- {i18n('icu:calling__blocked-participant', { name: title })} -
- {showDialogButton} - - ); + if (isInOverflow) { + noVideoNode = ( +