mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

New attachment storage system

Browse source
This commit is contained in:
Fedor Indutny 2024-07-11 12:44:09 -07:00 • committed by GitHub
parent 273e1ccb15
commit 28664a606f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
161 changed files with 2418 additions and 1562 deletions
Download patch file Download diff file Expand all files Collapse all files

2
ts/components/AddUserToAnotherGroupModal.tsx
View file

@ -129,7 +129,7 @@ export function AddUserToAnotherGroupModal({
}
return {
...pick(convo, 'id', 'avatarPath', 'title', 'unblurredAvatarPath'),
...pick(convo, 'id', 'avatarUrl', 'title', 'unblurredAvatarUrl'),
memberships,
membersCount,
disabledReason,

22
ts/components/Avatar.stories.tsx
View file

@ -65,7 +65,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
acceptedMessageRequest: isBoolean(overrideProps.acceptedMessageRequest)
? overrideProps.acceptedMessageRequest
: true,
avatarPath: overrideProps.avatarPath || '',
avatarUrl: overrideProps.avatarUrl || '',
badge: overrideProps.badge,
blur: overrideProps.blur,
color: overrideProps.color || AvatarColors[0],
@ -107,7 +107,7 @@ const TemplateSingle: StoryFn<Props> = (args: Props) => (
export const Default = Template.bind({});
Default.args = createProps({
avatarPath: '/fixtures/giphy-GVNvOUpeYmI7e.gif',
avatarUrl: '/fixtures/giphy-GVNvOUpeYmI7e.gif',
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
Default.play = async (context: any) => {
@ -120,13 +120,13 @@ Default.play = async (context: any) => {
export const WithBadge = Template.bind({});
WithBadge.args = createProps({
avatarPath: '/fixtures/kitten-3-64-64.jpg',
avatarUrl: '/fixtures/kitten-3-64-64.jpg',
badge: getFakeBadge(),
});
export const WideImage = Template.bind({});
WideImage.args = createProps({
avatarPath: '/fixtures/wide.jpg',
avatarUrl: '/fixtures/wide.jpg',
});
export const OneWordName = Template.bind({});
@ -186,12 +186,12 @@ BrokenColor.args = createProps({
export const BrokenAvatar = Template.bind({});
BrokenAvatar.args = createProps({
avatarPath: 'badimage.png',
avatarUrl: 'badimage.png',
});
export const BrokenAvatarForGroup = Template.bind({});
BrokenAvatarForGroup.args = createProps({
avatarPath: 'badimage.png',
avatarUrl: 'badimage.png',
conversationType: 'group',
});
@ -203,29 +203,29 @@ Loading.args = createProps({
export const BlurredBasedOnProps = TemplateSingle.bind({});
BlurredBasedOnProps.args = createProps({
acceptedMessageRequest: false,
avatarPath: '/fixtures/kitten-3-64-64.jpg',
avatarUrl: '/fixtures/kitten-3-64-64.jpg',
});
export const ForceBlurred = TemplateSingle.bind({});
ForceBlurred.args = createProps({
avatarPath: '/fixtures/kitten-3-64-64.jpg',
avatarUrl: '/fixtures/kitten-3-64-64.jpg',
blur: AvatarBlur.BlurPicture,
});
export const BlurredWithClickToView = TemplateSingle.bind({});
BlurredWithClickToView.args = createProps({
avatarPath: '/fixtures/kitten-3-64-64.jpg',
avatarUrl: '/fixtures/kitten-3-64-64.jpg',
blur: AvatarBlur.BlurPictureWithClickToView,
});
export const StoryUnread = TemplateSingle.bind({});
StoryUnread.args = createProps({
avatarPath: '/fixtures/kitten-3-64-64.jpg',
avatarUrl: '/fixtures/kitten-3-64-64.jpg',
storyRing: HasStories.Unread,
});
export const StoryRead = TemplateSingle.bind({});
StoryRead.args = createProps({
avatarPath: '/fixtures/kitten-3-64-64.jpg',
avatarUrl: '/fixtures/kitten-3-64-64.jpg',
storyRing: HasStories.Read,
});

28
ts/components/Avatar.tsx
View file

@ -53,7 +53,7 @@ export enum AvatarSize {
type BadgePlacementType = { bottom: number; right: number };
export type Props = {
avatarPath?: string;
avatarUrl?: string;
blur?: AvatarBlur;
color?: AvatarColorType;
loading?: boolean;
@ -67,7 +67,7 @@ export type Props = {
sharedGroupNames: ReadonlyArray<string>;
size: AvatarSize;
title: string;
unblurredAvatarPath?: string;
unblurredAvatarUrl?: string;
searchResult?: boolean;
storyRing?: HasStories;
@ -107,7 +107,7 @@ const getDefaultBlur = (
export function Avatar({
acceptedMessageRequest,
avatarPath,
avatarUrl,
badge,
className,
color = 'A200',
@ -123,15 +123,15 @@ export function Avatar({
size,
theme,
title,
unblurredAvatarPath,
unblurredAvatarUrl,
searchResult,
storyRing,
blur = getDefaultBlur({
acceptedMessageRequest,
avatarPath,
avatarUrl,
isMe,
sharedGroupNames,
unblurredAvatarPath,
unblurredAvatarUrl,
}),
...ariaProps
}: Props): JSX.Element {
@ -139,15 +139,15 @@ export function Avatar({
useEffect(() => {
setImageBroken(false);
}, [avatarPath]);
}, [avatarUrl]);
useEffect(() => {
if (!avatarPath) {
if (!avatarUrl) {
return noop;
}
const image = new Image();
image.src = avatarPath;
image.src = avatarUrl;
image.onerror = () => {
log.warn('Avatar: Image failed to load; failing over to placeholder');
setImageBroken(true);
@ -156,10 +156,10 @@ export function Avatar({
return () => {
image.onerror = noop;
};
}, [avatarPath]);
}, [avatarUrl]);
const initials = getInitials(title);
const hasImage = !noteToSelf && avatarPath && !imageBroken;
const hasImage = !noteToSelf && avatarUrl && !imageBroken;
const shouldUseInitials =
!hasImage &&
conversationType === 'direct' &&
@ -179,7 +179,7 @@ export function Avatar({
</div>
);
} else if (hasImage) {
assertDev(avatarPath, 'avatarPath should be defined here');
assertDev(avatarUrl, 'avatarUrl should be defined here');
assertDev(
blur !== AvatarBlur.BlurPictureWithClickToView ||
@ -195,7 +195,7 @@ export function Avatar({
<div
className="module-Avatar__image"
style={{
backgroundImage: `url('${encodeURI(avatarPath)}')`,
backgroundImage: `url('${avatarUrl}')`,
...(isBlurred ? { filter: `blur(${Math.ceil(size / 2)}px)` } : {}),
}}
/>
@ -316,7 +316,7 @@ export function Avatar({
Boolean(storyRing) && 'module-Avatar--with-story',
storyRing === HasStories.Unread && 'module-Avatar--with-story--unread',
className,
avatarPath === SIGNAL_AVATAR_PATH
avatarUrl === SIGNAL_AVATAR_PATH
? 'module-Avatar--signal-official'
: undefined
)}

4
ts/components/AvatarEditor.stories.tsx
View file

@ -18,7 +18,7 @@ const i18n = setupI18n('en', enMessages);
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
avatarColor: overrideProps.avatarColor || AvatarColors[9],
avatarPath: overrideProps.avatarPath,
avatarUrl: overrideProps.avatarUrl,
conversationId: '123',
conversationTitle: overrideProps.conversationTitle || 'Default Title',
deleteAvatarFromDisk: action('deleteAvatarFromDisk'),
@ -104,7 +104,7 @@ export function HasAvatar(): JSX.Element {
return (
<AvatarEditor
{...createProps({
avatarPath: '/fixtures/kitten-3-64-64.jpg',
avatarUrl: '/fixtures/kitten-3-64-64.jpg',
})}
/>
);

8
ts/components/AvatarEditor.tsx
View file

@ -24,7 +24,7 @@ import { missingCaseError } from '../util/missingCaseError';
export type PropsType = {
avatarColor?: AvatarColorType;
avatarPath?: string;
avatarUrl?: string;
avatarValue?: Uint8Array;
conversationId?: string;
conversationTitle?: string;
@ -46,7 +46,7 @@ enum EditMode {
export function AvatarEditor({
avatarColor,
avatarPath,
avatarUrl,
avatarValue,
conversationId,
conversationTitle,
@ -152,7 +152,7 @@ export function AvatarEditor({
}, []);
const hasChanges =
initialAvatar !== avatarPreview || Boolean(pendingClear && avatarPath);
initialAvatar !== avatarPreview || Boolean(pendingClear && avatarUrl);
let content: JSX.Element | undefined;
@ -162,7 +162,7 @@ export function AvatarEditor({
<div className="AvatarEditor__preview">
<AvatarPreview
avatarColor={avatarColor}
avatarPath={pendingClear ? undefined : avatarPath}
avatarUrl={pendingClear ? undefined : avatarUrl}
avatarValue={avatarPreview}
conversationTitle={conversationTitle}
i18n={i18n}

2
ts/components/AvatarLightbox.stories.tsx
View file

@ -45,5 +45,5 @@ export function Person(args: PropsType): JSX.Element {
}
export function Photo(args: PropsType): JSX.Element {
return <AvatarLightbox {...args} avatarPath="/fixtures/kitten-1-64-64.jpg" />;
return <AvatarLightbox {...args} avatarUrl="/fixtures/kitten-1-64-64.jpg" />;
}

6
ts/components/AvatarLightbox.tsx
View file

@ -11,7 +11,7 @@ import type { LocalizerType } from '../types/Util';
export type PropsType = {
avatarColor?: AvatarColorType;
avatarPath?: string;
avatarUrl?: string;
conversationTitle?: string;
i18n: LocalizerType;
isGroup?: boolean;
@ -20,7 +20,7 @@ export type PropsType = {
export function AvatarLightbox({
avatarColor,
avatarPath,
avatarUrl,
conversationTitle,
i18n,
isGroup,
@ -43,7 +43,7 @@ export function AvatarLightbox({
>
<AvatarPreview
avatarColor={avatarColor}
avatarPath={avatarPath}
avatarUrl={avatarUrl}
conversationTitle={conversationTitle}
i18n={i18n}
isGroup={isGroup}

6
ts/components/AvatarPreview.stories.tsx
View file

@ -24,7 +24,7 @@ const TEST_IMAGE = new Uint8Array(
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
avatarColor: overrideProps.avatarColor,
avatarPath: overrideProps.avatarPath,
avatarUrl: overrideProps.avatarUrl,
avatarValue: overrideProps.avatarValue,
conversationTitle: overrideProps.conversationTitle,
i18n,
@ -81,7 +81,7 @@ export function Value(): JSX.Element {
export function Path(): JSX.Element {
return (
<AvatarPreview
{...createProps({ avatarPath: '/fixtures/kitten-3-64-64.jpg' })}
{...createProps({ avatarUrl: '/fixtures/kitten-3-64-64.jpg' })}
/>
);
}
@ -90,7 +90,7 @@ export function ValueAndPath(): JSX.Element {
return (
<AvatarPreview
{...createProps({
avatarPath: '/fixtures/kitten-3-64-64.jpg',
avatarUrl: '/fixtures/kitten-3-64-64.jpg',
avatarValue: TEST_IMAGE,
})}
/>

18
ts/components/AvatarPreview.tsx
View file

@ -15,7 +15,7 @@ import { imagePathToBytes } from '../util/imagePathToBytes';
export type PropsType = {
avatarColor?: AvatarColorType;
avatarPath?: string;
avatarUrl?: string;
avatarValue?: Uint8Array;
conversationTitle?: string;
i18n: LocalizerType;
@ -35,7 +35,7 @@ enum ImageStatus {
export function AvatarPreview({
avatarColor = AvatarColors[0],
avatarPath,
avatarUrl,
avatarValue,
conversationTitle,
i18n,
@ -48,15 +48,15 @@ export function AvatarPreview({
}: PropsType): JSX.Element {
const [avatarPreview, setAvatarPreview] = useState<Uint8Array | undefined>();
// Loads the initial avatarPath if one is provided, but only if we're in editable mode.
// If we're not editable, we assume that we either have an avatarPath or we show a
// Loads the initial avatarUrl if one is provided, but only if we're in editable mode.
// If we're not editable, we assume that we either have an avatarUrl or we show a
// default avatar.
useEffect(() => {
if (!isEditable) {
return;
}
if (!avatarPath) {
if (!avatarUrl) {
return noop;
}
@ -64,7 +64,7 @@ export function AvatarPreview({
void (async () => {
try {
const buffer = await imagePathToBytes(avatarPath);
const buffer = await imagePathToBytes(avatarUrl);
if (shouldCancel) {
return;
}
@ -85,7 +85,7 @@ export function AvatarPreview({
return () => {
shouldCancel = true;
};
}, [avatarPath, onAvatarLoaded, isEditable]);
}, [avatarUrl, onAvatarLoaded, isEditable]);
// Ensures that when avatarValue changes we generate new URLs
useEffect(() => {
@ -120,8 +120,8 @@ export function AvatarPreview({
} else if (objectUrl) {
encodedPath = objectUrl;
imageStatus = ImageStatus.HasImage;
} else if (avatarPath) {
encodedPath = encodeURI(avatarPath);
} else if (avatarUrl) {
encodedPath = avatarUrl;
imageStatus = ImageStatus.HasImage;
} else {
imageStatus = ImageStatus.Nothing;

10
ts/components/CallBackgroundBlur.tsx
View file

@ -5,13 +5,13 @@ import React from 'react';
import classNames from 'classnames';
export type PropsType = {
avatarPath?: string;
avatarUrl?: string;
children?: React.ReactNode;
className?: string;
};
export function CallBackgroundBlur({
avatarPath,
avatarUrl,
children,
className,
}: PropsType): JSX.Element {
@ -19,15 +19,15 @@ export function CallBackgroundBlur({
<div
className={classNames(
'module-calling__background',
!avatarPath && 'module-calling__background--no-avatar',
!avatarUrl && 'module-calling__background--no-avatar',
className
)}
>
{avatarPath && (
{avatarUrl && (
<div
className="module-calling__background--blur"
style={{
backgroundImage: `url('${encodeURI(avatarPath)}')`,
backgroundImage: `url('${avatarUrl}')`,
}}
/>
)}

2
ts/components/CallManager.stories.tsx
View file

@ -42,7 +42,7 @@ const i18n = setupI18n('en', enMessages);
const getConversation = () =>
getDefaultConversation({
id: '3051234567',
avatarPath: undefined,
avatarUrl: undefined,
color: AvatarColors[0],
title: 'Rick Sanchez',
name: 'Rick Sanchez',

6
ts/components/CallNeedPermissionScreen.tsx
View file

@ -13,7 +13,7 @@ export type Props = {
conversation: Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'avatarUrl'
| 'color'
| 'isMe'
| 'name'
@ -21,7 +21,7 @@ export type Props = {
| 'profileName'
| 'sharedGroupNames'
| 'title'
| 'unblurredAvatarPath'
| 'unblurredAvatarUrl'
>;
i18n: LocalizerType;
close: () => void;
@ -46,7 +46,7 @@ export function CallNeedPermissionScreen({
<div className="module-call-need-permission-screen">
<Avatar
acceptedMessageRequest={conversation.acceptedMessageRequest}
avatarPath={conversation.avatarPath}
avatarUrl={conversation.avatarUrl}
badge={undefined}
color={conversation.color || AvatarColors[0]}
noteToSelf={false}

2
ts/components/CallScreen.stories.tsx
View file

@ -42,7 +42,7 @@ const i18n = setupI18n('en', enMessages);
const conversation = getDefaultConversation({
id: '3051234567',
avatarPath: undefined,
avatarUrl: undefined,
color: AvatarColors[0],
title: 'Rick Sanchez',
name: 'Rick Sanchez',

6
ts/components/CallScreen.tsx
View file

@ -432,7 +432,7 @@ export function CallScreen({
{isSendingVideo ? (
<video ref={localVideoRef} autoPlay />
) : (
<CallBackgroundBlur avatarPath={me.avatarPath}>
<CallBackgroundBlur avatarUrl={me.avatarUrl}>
<div className="module-calling__spacer module-calling__camera-is-off-spacer" />
<div className="module-calling__camera-is-off">
{i18n('icu:calling__your-video-is-off')}
@ -453,10 +453,10 @@ export function CallScreen({
autoPlay
/>
) : (
<CallBackgroundBlur avatarPath={me.avatarPath}>
<CallBackgroundBlur avatarUrl={me.avatarUrl}>
<Avatar
acceptedMessageRequest
avatarPath={me.avatarPath}
avatarUrl={me.avatarUrl}
badge={undefined}
color={me.color || AvatarColors[0]}
noteToSelf={false}

2
ts/components/CallingAdhocCallInfo.stories.tsx
View file

@ -33,7 +33,7 @@ function createParticipant(
sharingScreen: Boolean(participantProps.sharingScreen),
videoAspectRatio: 1.3,
...getDefaultConversationWithServiceId({
avatarPath: participantProps.avatarPath,
avatarUrl: participantProps.avatarUrl,
color: sample(AvatarColors),
isBlocked: Boolean(participantProps.isBlocked),
name: participantProps.name,

4
ts/components/CallingAdhocCallInfo.tsx
View file

@ -80,7 +80,7 @@ function UnknownContacts({
return (
<Avatar
acceptedMessageRequest={participant.acceptedMessageRequest}
avatarPath={participant.avatarPath}
avatarUrl={participant.avatarUrl}
badge={undefined}
className="CallingAdhocCallInfo__UnknownContactAvatar"
color={AvatarColors[colorIndex]}
@ -211,7 +211,7 @@ export function CallingAdhocCallInfo({
<div className="module-calling-participants-list__avatar-and-name">
<Avatar
acceptedMessageRequest={participant.acceptedMessageRequest}
avatarPath={participant.avatarPath}
avatarUrl={participant.avatarUrl}
badge={undefined}
color={participant.color}
conversationType="direct"

2
ts/components/CallingLobby.stories.tsx
View file

@ -129,7 +129,7 @@ export function NoCameraLocalAvatar(): JSX.Element {
const props = createProps({
availableCameras: [],
me: getDefaultConversation({
avatarPath: '/fixtures/kitten-4-112-112.jpg',
avatarUrl: '/fixtures/kitten-4-112-112.jpg',
color: AvatarColors[0],
id: generateUuid(),
serviceId: generateAci(),

8
ts/components/CallingLobby.tsx
View file

@ -37,7 +37,7 @@ export type PropsType = {
conversation: Pick<
CallingConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'avatarUrl'
| 'color'
| 'isMe'
| 'memberships'
@ -49,7 +49,7 @@ export type PropsType = {
| 'systemNickname'
| 'title'
| 'type'
| 'unblurredAvatarPath'
| 'unblurredAvatarUrl'
>;
getIsSharingPhoneNumberWithEverybody: () => boolean;
groupMembers?: Array<
@ -66,7 +66,7 @@ export type PropsType = {
isConversationTooBigToRing: boolean;
isCallFull?: boolean;
me: Readonly<
Pick<ConversationType, 'avatarPath' | 'color' | 'id' | 'serviceId'>
Pick<ConversationType, 'avatarUrl' | 'color' | 'id' | 'serviceId'>
>;
onCallCanceled: () => void;
onJoinCall: () => void;
@ -285,7 +285,7 @@ export function CallingLobby({
) : (
<CallBackgroundBlur
className="module-CallingLobby__local-preview module-CallingLobby__local-preview--camera-is-off"
avatarPath={me.avatarPath}
avatarUrl={me.avatarUrl}
/>
)}

2
ts/components/CallingParticipantsList.stories.tsx
View file

@ -31,7 +31,7 @@ function createParticipant(
sharingScreen: Boolean(participantProps.sharingScreen),
videoAspectRatio: 1.3,
...getDefaultConversationWithServiceId({
avatarPath: participantProps.avatarPath,
avatarUrl: participantProps.avatarUrl,
color: sample(AvatarColors),
isBlocked: Boolean(participantProps.isBlocked),
name: participantProps.name,

2
ts/components/CallingParticipantsList.tsx
View file

@ -129,7 +129,7 @@ export const CallingParticipantsList = React.memo(
acceptedMessageRequest={
participant.acceptedMessageRequest
}
avatarPath={participant.avatarPath}
avatarUrl={participant.avatarUrl}
badge={undefined}
color={participant.color}
conversationType="direct"

4
ts/components/CallingPendingParticipants.tsx
View file

@ -244,7 +244,7 @@ export function CallingPendingParticipants({
<div className="module-calling-participants-list__avatar-and-name">
<Avatar
acceptedMessageRequest={participant.acceptedMessageRequest}
avatarPath={participant.avatarPath}
avatarUrl={participant.avatarUrl}
badge={undefined}
color={participant.color}
conversationType="direct"
@ -306,7 +306,7 @@ export function CallingPendingParticipants({
<div className="module-calling-participants-list__avatar-and-name">
<Avatar
acceptedMessageRequest={participant.acceptedMessageRequest}
avatarPath={participant.avatarPath}
avatarUrl={participant.avatarUrl}
badge={undefined}
color={participant.color}
conversationType="direct"

4
ts/components/CallingPip.stories.tsx
View file

@ -26,7 +26,7 @@ const i18n = setupI18n('en', enMessages);
const conversation: ConversationType = getDefaultConversation({
id: '3051234567',
avatarPath: undefined,
avatarUrl: undefined,
color: AvatarColors[0],
title: 'Rick Sanchez',
name: 'Rick Sanchez',
@ -98,7 +98,7 @@ export function ContactWithAvatarAndNoVideo(args: PropsType): JSX.Element {
...getDefaultCall({}),
conversation: {
...conversation,
avatarPath: 'https://www.fillmurray.com/64/64',
avatarUrl: 'https://www.fillmurray.com/64/64',
},
remoteParticipants: [
{ hasRemoteVideo: false, presenting: false, title: 'Julian' },

6
ts/components/CallingPipRemoteVideo.tsx
View file

@ -40,7 +40,7 @@ function NoVideo({
}): JSX.Element {
const {
acceptedMessageRequest,
avatarPath,
avatarUrl,
color,
type: conversationType,
isMe,
@ -52,11 +52,11 @@ function NoVideo({
return (
<div className="module-calling-pip__video--remote">
<CallBackgroundBlur avatarPath={avatarPath}>
<CallBackgroundBlur avatarUrl={avatarUrl}>
<div className="module-calling-pip__video--avatar">
<Avatar
acceptedMessageRequest={acceptedMessageRequest}
avatarPath={avatarPath}
avatarUrl={avatarUrl}
badge={undefined}
color={color || AvatarColors[0]}
noteToSelf={false}

8
ts/components/CallingPreCallInfo.tsx
View file

@ -20,7 +20,7 @@ export type PropsType = {
conversation: Pick<
CallingConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'avatarUrl'
| 'color'
| 'isMe'
| 'phoneNumber'
@ -30,7 +30,7 @@ export type PropsType = {
| 'systemNickname'
| 'title'
| 'type'
| 'unblurredAvatarPath'
| 'unblurredAvatarUrl'
>;
i18n: LocalizerType;
me: Pick<ConversationType, 'id' | 'serviceId'>;
@ -186,7 +186,7 @@ export function CallingPreCallInfo({
return (
<div className="module-CallingPreCallInfo">
<Avatar
avatarPath={conversation.avatarPath}
avatarUrl={conversation.avatarUrl}
badge={undefined}
color={conversation.color}
acceptedMessageRequest={conversation.acceptedMessageRequest}
@ -198,7 +198,7 @@ export function CallingPreCallInfo({
sharedGroupNames={conversation.sharedGroupNames}
size={AvatarSize.NINETY_SIX}
title={conversation.title}
unblurredAvatarPath={conversation.unblurredAvatarPath}
unblurredAvatarUrl={conversation.unblurredAvatarUrl}
i18n={i18n}
/>
<div className="module-CallingPreCallInfo__title">

2
ts/components/CallingRaisedHandsList.stories.tsx
View file

@ -35,7 +35,7 @@ const i18n = setupI18n('en', enMessages);
const conversation = getDefaultConversationWithServiceId({
id: '3051234567',
avatarPath: undefined,
avatarUrl: undefined,
color: AvatarColors[0],
title: 'Rick Sanchez',
name: 'Rick Sanchez',

2
ts/components/CallingRaisedHandsList.tsx
View file

@ -101,7 +101,7 @@ export function CallingRaisedHandsList({
<div className="CallingRaisedHandsList__AvatarAndName module-calling-participants-list__avatar-and-name">
<Avatar
acceptedMessageRequest={participant.acceptedMessageRequest}
avatarPath={participant.avatarPath}
avatarUrl={participant.avatarUrl}
badge={undefined}
color={participant.color}
conversationType="direct"

2
ts/components/CallsList.tsx
View file

@ -789,7 +789,7 @@ export function CallsList({
leading={
<Avatar
acceptedMessageRequest
avatarPath={conversation.avatarPath}
avatarUrl={conversation.avatarUrl}
color={conversation.color}
conversationType={conversation.type}
i18n={i18n}

2
ts/components/CallsNewCall.tsx
View file

@ -220,7 +220,7 @@ export function CallsNewCall({
leading={
<Avatar
acceptedMessageRequest
avatarPath={item.conversation.avatarPath}
avatarUrl={item.conversation.avatarUrl}
conversationType="group"
i18n={i18n}
isMe={false}

12
ts/components/ContactPill.tsx
View file

@ -15,7 +15,7 @@ export type PropsType = {
ConversationType,
| 'about'
| 'acceptedMessageRequest'
| 'avatarPath'
| 'avatarUrl'
| 'color'
| 'firstName'
| 'id'
@ -24,12 +24,12 @@ export type PropsType = {
| 'profileName'
| 'sharedGroupNames'
| 'title'
| 'unblurredAvatarPath'
| 'unblurredAvatarUrl'
>;
export function ContactPill({
acceptedMessageRequest,
avatarPath,
avatarUrl,
color,
firstName,
i18n,
@ -39,7 +39,7 @@ export function ContactPill({
profileName,
sharedGroupNames,
title,
unblurredAvatarPath,
unblurredAvatarUrl,
onClickRemove,
}: PropsType): JSX.Element {
const removeLabel = i18n('icu:ContactPill--remove');
@ -48,7 +48,7 @@ export function ContactPill({
<div className="module-ContactPill">
<Avatar
acceptedMessageRequest={acceptedMessageRequest}
avatarPath={avatarPath}
avatarUrl={avatarUrl}
badge={undefined}
color={color}
noteToSelf={false}
@ -60,7 +60,7 @@ export function ContactPill({
title={title}
sharedGroupNames={sharedGroupNames}
size={AvatarSize.TWENTY}
unblurredAvatarPath={unblurredAvatarPath}
unblurredAvatarUrl={unblurredAvatarUrl}
/>
<ContactName
firstName={firstName}

2
ts/components/ContactPills.stories.tsx
View file

@ -38,7 +38,7 @@ const contactPillProps = (
): ContactPillPropsType => ({
...(overrideProps ??
getDefaultConversation({
avatarPath: gifUrl,
avatarUrl: gifUrl,
firstName: 'John',
id: 'abc123',
isMe: false,

4
ts/components/ConversationList.stories.tsx
View file

@ -275,7 +275,7 @@ const createConversation = (
: true,
badges: [],
isMe: overrideProps.isMe ?? false,
avatarPath: overrideProps.avatarPath ?? '',
avatarUrl: overrideProps.avatarUrl ?? '',
id: overrideProps.id || '',
isSelected: overrideProps.isSelected ?? false,
title: overrideProps.title ?? 'Some Person',
@ -308,7 +308,7 @@ export const ConversationName = (): JSX.Element => renderConversation();
export const ConversationNameAndAvatar = (): JSX.Element =>
renderConversation({
avatarPath: '/fixtures/kitten-1-64-64.jpg',
avatarUrl: '/fixtures/kitten-1-64-64.jpg',
});
export const ConversationWithYourself = (): JSX.Element =>

4
ts/components/ConversationList.tsx
View file

@ -371,7 +371,7 @@ export function ConversationList({
case RowType.Conversation: {
const itemProps = pick(row.conversation, [
'acceptedMessageRequest',
'avatarPath',
'avatarUrl',
'badges',
'color',
'draftPreview',
@ -393,7 +393,7 @@ export function ConversationList({
'title',
'type',
'typingContactIdTimestamps',
'unblurredAvatarPath',
'unblurredAvatarUrl',
'unreadCount',
'unreadMentionsCount',
'serviceId',

8
ts/components/DirectCallRemoteParticipant.tsx
View file

@ -52,7 +52,7 @@ function renderAvatar(
i18n: LocalizerType,
{
acceptedMessageRequest,
avatarPath,
avatarUrl,
color,
isMe,
phoneNumber,
@ -62,7 +62,7 @@ function renderAvatar(
}: Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'avatarUrl'
| 'color'
| 'isMe'
| 'phoneNumber'
@ -73,10 +73,10 @@ function renderAvatar(
): JSX.Element {
return (
<div className="module-ongoing-call__remote-video-disabled">
<CallBackgroundBlur avatarPath={avatarPath}>
<CallBackgroundBlur avatarUrl={avatarUrl}>
<Avatar
acceptedMessageRequest={acceptedMessageRequest}
avatarPath={avatarPath}
avatarUrl={avatarUrl}
badge={undefined}
color={color || AvatarColors[0]}
noteToSelf={false}

6
ts/components/GroupCallRemoteParticipant.tsx
View file

@ -85,7 +85,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
const {
acceptedMessageRequest,
addedTime,
avatarPath,
avatarUrl,
color,
demuxId,
hasRemoteAudio,
@ -378,7 +378,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
noVideoNode = (
<Avatar
acceptedMessageRequest={acceptedMessageRequest}
avatarPath={avatarPath}
avatarUrl={avatarUrl}
badge={undefined}
color={color || AvatarColors[0]}
noteToSelf={false}
@ -510,7 +510,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
)}
{noVideoNode && (
<CallBackgroundBlur
avatarPath={avatarPath}
avatarUrl={avatarUrl}
className="module-ongoing-call__group-call-remote-participant-background"
>
{noVideoNode}

4
ts/components/GroupDialog.tsx
View file

@ -110,7 +110,7 @@ function Contacts({
<li key={contact.id} className="module-GroupDialog__contacts__contact">
<Avatar
acceptedMessageRequest={contact.acceptedMessageRequest}
avatarPath={contact.avatarPath}
avatarUrl={contact.avatarUrl}
badge={getPreferredBadge(contact.badges)}
color={contact.color}
conversationType={contact.type}
@ -118,7 +118,7 @@ function Contacts({
noteToSelf={contact.isMe}
theme={theme}
title={contact.title}
unblurredAvatarPath={contact.unblurredAvatarPath}
unblurredAvatarUrl={contact.unblurredAvatarUrl}
sharedGroupNames={contact.sharedGroupNames}
size={AvatarSize.TWENTY_EIGHT}
i18n={i18n}

2
ts/components/GroupV2JoinDialog.tsx
View file

@ -70,7 +70,7 @@ export const GroupV2JoinDialog = React.memo(function GroupV2JoinDialogInner({
<div className="module-group-v2-join-dialog__avatar">
<Avatar
acceptedMessageRequest={false}
avatarPath={avatar ? avatar.url : undefined}
avatarUrl={avatar ? avatar.url : undefined}
badge={undefined}
blur={AvatarBlur.NoBlur}
loading={avatar && !avatar.url}

6
ts/components/IncomingCallBar.stories.tsx
View file

@ -25,7 +25,7 @@ const commonProps = {
},
conversation: getDefaultConversation({
id: '3051234567',
avatarPath: undefined,
avatarUrl: undefined,
name: 'Rick Sanchez',
phoneNumber: '3051234567',
profileName: 'Rick Sanchez',
@ -38,7 +38,7 @@ const commonProps = {
const directConversation = getDefaultConversation({
id: '3051234567',
avatarPath: undefined,
avatarUrl: undefined,
name: 'Rick Sanchez',
phoneNumber: '3051234567',
profileName: 'Rick Sanchez',
@ -46,7 +46,7 @@ const directConversation = getDefaultConversation({
});
const groupConversation = getDefaultConversation({
avatarPath: undefined,
avatarUrl: undefined,
name: 'Tahoe Trip',
title: 'Tahoe Trip',
type: 'group',

6
ts/components/IncomingCallBar.tsx
View file

@ -28,7 +28,7 @@ export type PropsType = {
conversation: Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'avatarUrl'
| 'color'
| 'id'
| 'isMe'
@ -194,7 +194,7 @@ export function IncomingCallBar(props: PropsType): JSX.Element | null {
const {
id: conversationId,
acceptedMessageRequest,
avatarPath,
avatarUrl,
color,
isMe,
phoneNumber,
@ -275,7 +275,7 @@ export function IncomingCallBar(props: PropsType): JSX.Element | null {
<div className="IncomingCallBar__conversation--avatar">
<Avatar
acceptedMessageRequest={acceptedMessageRequest}
avatarPath={avatarPath}
avatarUrl={avatarUrl}
badge={undefined}
color={color || AvatarColors[0]}
noteToSelf={false}

4
ts/components/LeftPaneSearchInput.tsx
View file

@ -136,7 +136,7 @@ export function LeftPaneSearchInput({
>
<Avatar
acceptedMessageRequest={searchConversation.acceptedMessageRequest}
avatarPath={searchConversation.avatarPath}
avatarUrl={searchConversation.avatarUrl}
badge={undefined}
color={searchConversation.color}
conversationType={searchConversation.type}
@ -146,7 +146,7 @@ export function LeftPaneSearchInput({
sharedGroupNames={searchConversation.sharedGroupNames}
size={AvatarSize.TWENTY}
title={searchConversation.title}
unblurredAvatarPath={searchConversation.unblurredAvatarPath}
unblurredAvatarUrl={searchConversation.unblurredAvatarUrl}
/>
<button
aria-label={i18n('icu:clearSearch')}

2
ts/components/Lightbox.stories.tsx
View file

@ -311,7 +311,7 @@ export function ConversationHeader(): JSX.Element {
{...createProps({})}
getConversation={() => ({
acceptedMessageRequest: true,
avatarPath: '/fixtures/kitten-1-64-64.jpg',
avatarUrl: '/fixtures/kitten-1-64-64.jpg',
badges: [],
id: '1234',
isMe: false,

4
ts/components/Lightbox.tsx
View file

@ -806,7 +806,7 @@ function LightboxHeader({
<div className="Lightbox__header--avatar">
<Avatar
acceptedMessageRequest={conversation.acceptedMessageRequest}
avatarPath={conversation.avatarPath}
avatarUrl={conversation.avatarUrl}
badge={undefined}
color={conversation.color}
conversationType={conversation.type}
@ -817,7 +817,7 @@ function LightboxHeader({
sharedGroupNames={conversation.sharedGroupNames}
size={AvatarSize.THIRTY_TWO}
title={conversation.title}
unblurredAvatarPath={conversation.unblurredAvatarPath}
unblurredAvatarUrl={conversation.unblurredAvatarUrl}
/>
</div>
<div className="Lightbox__header--content">

6
ts/components/MyStoryButton.tsx
View file

@ -50,7 +50,7 @@ export function MyStoryButton({
const {
acceptedMessageRequest,
avatarPath,
avatarUrl,
color,
isMe,
profileName,
@ -70,7 +70,7 @@ export function MyStoryButton({
<div className="MyStories__avatar-container">
<Avatar
acceptedMessageRequest={acceptedMessageRequest}
avatarPath={avatarPath}
avatarUrl={avatarUrl}
badge={undefined}
color={getAvatarColor(color)}
conversationType="direct"
@ -123,7 +123,7 @@ export function MyStoryButton({
>
<Avatar
acceptedMessageRequest={acceptedMessageRequest}
avatarPath={avatarPath}
avatarUrl={avatarUrl}
badge={undefined}
color={getAvatarColor(color)}
conversationType="direct"

2
ts/components/NavTabs.tsx
View file

@ -372,7 +372,7 @@ export function NavTabs({
<span className="NavTabs__ItemContent">
<Avatar
acceptedMessageRequest
avatarPath={me.avatarPath}
avatarUrl={me.avatarUrl}
badge={badge}
className="module-main-header__avatar"
color={me.color}

4
ts/components/ProfileEditor.stories.tsx
View file

@ -48,7 +48,7 @@ export default {
args: {
aboutEmoji: '',
aboutText: casual.sentence,
profileAvatarPath: undefined,
profileAvatarUrl: undefined,
conversationId: generateUuid(),
color: getRandomColor(),
deleteAvatarFromDisk: action('deleteAvatarFromDisk'),
@ -127,7 +127,7 @@ FullSet.args = {
aboutText: 'Live. Laugh. Love',
familyName: casual.last_name,
firstName: casual.first_name,
profileAvatarPath: '/fixtures/kitten-3-64-64.jpg',
profileAvatarUrl: '/fixtures/kitten-3-64-64.jpg',
};
export const WithFullName = Template.bind({});

13
ts/components/ProfileEditor.tsx
View file

@ -72,7 +72,7 @@ type PropsExternalType = {
export type PropsDataType = {
aboutEmoji?: string;
aboutText?: string;
profileAvatarPath?: string;
profileAvatarUrl?: string;
color?: AvatarColorType;
conversationId: string;
familyName?: string;
@ -155,7 +155,7 @@ export function ProfileEditor({
onProfileChanged,
onSetSkinTone,
openUsernameReservationModal,
profileAvatarPath,
profileAvatarUrl,
recentEmojis,
renderEditUsernameModalBody,
replaceAvatar,
@ -192,8 +192,7 @@ export function ProfileEditor({
aboutEmoji,
aboutText,
});
const [startingAvatarPath, setStartingAvatarPath] =
useState(profileAvatarPath);
const [startingAvatarUrl, setStartingAvatarUrl] = useState(profileAvatarUrl);
const [oldAvatarBuffer, setOldAvatarBuffer] = useState<
Uint8Array | undefined
@ -239,7 +238,7 @@ export function ProfileEditor({
const handleAvatarChanged = useCallback(
(avatar: Uint8Array | undefined) => {
// Do not display stale avatar from disk anymore.
setStartingAvatarPath(undefined);
setStartingAvatarUrl(undefined);
setAvatarBuffer(avatar);
setEditState(EditState.None);
@ -301,7 +300,7 @@ export function ProfileEditor({
content = (
<AvatarEditor
avatarColor={color || AvatarColors[0]}
avatarPath={startingAvatarPath}
avatarUrl={startingAvatarUrl}
avatarValue={avatarBuffer}
conversationId={conversationId}
conversationTitle={getFullNameText()}
@ -675,7 +674,7 @@ export function ProfileEditor({
<>
<AvatarPreview
avatarColor={color}
avatarPath={startingAvatarPath}
avatarUrl={startingAvatarUrl}
avatarValue={avatarBuffer}
conversationTitle={getFullNameText()}
i18n={i18n}

4
ts/components/ProfileEditorModal.tsx
View file

@ -40,7 +40,7 @@ export function ProfileEditorModal({
myProfileChanged,
onSetSkinTone,
openUsernameReservationModal,
profileAvatarPath,
profileAvatarUrl,
recentEmojis,
renderEditUsernameModalBody,
replaceAvatar,
@ -117,7 +117,7 @@ export function ProfileEditorModal({
onProfileChanged={myProfileChanged}
onSetSkinTone={onSetSkinTone}
openUsernameReservationModal={openUsernameReservationModal}
profileAvatarPath={profileAvatarPath}
profileAvatarUrl={profileAvatarUrl}
recentEmojis={recentEmojis}
renderEditUsernameModalBody={renderEditUsernameModalBody}
replaceAvatar={replaceAvatar}

8
ts/components/SafetyNumberChangeDialog.stories.tsx
View file

@ -18,7 +18,7 @@ const i18n = setupI18n('en', enMessages);
const contactWithAllData = getDefaultConversation({
id: 'abc',
avatarPath: undefined,
avatarUrl: undefined,
profileName: '-*Smartest Dude*-',
title: 'Rick Sanchez',
name: 'Rick Sanchez',
@ -27,7 +27,7 @@ const contactWithAllData = getDefaultConversation({
const contactWithJustProfileVerified = getDefaultConversation({
id: 'def',
avatarPath: undefined,
avatarUrl: undefined,
title: '-*Smartest Dude*-',
profileName: '-*Smartest Dude*-',
name: undefined,
@ -37,7 +37,7 @@ const contactWithJustProfileVerified = getDefaultConversation({
const contactWithJustNumberVerified = getDefaultConversation({
id: 'xyz',
avatarPath: undefined,
avatarUrl: undefined,
profileName: undefined,
name: undefined,
title: '(305) 123-4567',
@ -47,7 +47,7 @@ const contactWithJustNumberVerified = getDefaultConversation({
const contactWithNothing = getDefaultConversation({
id: 'some-guid',
avatarPath: undefined,
avatarUrl: undefined,
profileName: undefined,
name: undefined,
phoneNumber: undefined,

4
ts/components/SafetyNumberChangeDialog.tsx
View file

@ -452,7 +452,7 @@ function ContactRow({
<li className="module-SafetyNumberChangeDialog__row" key={contact.id}>
<Avatar
acceptedMessageRequest={contact.acceptedMessageRequest}
avatarPath={contact.avatarPath}
avatarUrl={contact.avatarUrl}
badge={getPreferredBadge(contact.badges)}
color={contact.color}
conversationType="direct"
@ -464,7 +464,7 @@ function ContactRow({
title={contact.title}
sharedGroupNames={contact.sharedGroupNames}
size={AvatarSize.THIRTY_TWO}
unblurredAvatarPath={contact.unblurredAvatarPath}
unblurredAvatarUrl={contact.unblurredAvatarUrl}
/>
<div className="module-SafetyNumberChangeDialog__row--wrapper">
<div className="module-SafetyNumberChangeDialog__row--name">

6
ts/components/SafetyNumberViewer.stories.tsx
View file

@ -40,7 +40,7 @@ const contactWithAllData = getDefaultConversation({
});
const contactWithJustProfile = getDefaultConversation({
avatarPath: undefined,
avatarUrl: undefined,
title: '-*Smartest Dude*-',
profileName: '-*Smartest Dude*-',
name: undefined,
@ -48,7 +48,7 @@ const contactWithJustProfile = getDefaultConversation({
});
const contactWithJustNumber = getDefaultConversation({
avatarPath: undefined,
avatarUrl: undefined,
profileName: undefined,
name: undefined,
title: '(305) 123-4567',
@ -57,7 +57,7 @@ const contactWithJustNumber = getDefaultConversation({
const contactWithNothing = getDefaultConversation({
id: 'some-guid',
avatarPath: undefined,
avatarUrl: undefined,
profileName: undefined,
title: 'Unknown contact',
name: undefined,

6
ts/components/SendStoryModal.tsx
View file

@ -558,7 +558,7 @@ export function SendStoryModal({
>
<Avatar
acceptedMessageRequest={group.acceptedMessageRequest}
avatarPath={group.avatarPath}
avatarUrl={group.avatarUrl}
badge={undefined}
color={group.color}
conversationType={group.type}
@ -708,7 +708,7 @@ export function SendStoryModal({
{list.id === MY_STORY_ID ? (
<Avatar
acceptedMessageRequest={me.acceptedMessageRequest}
avatarPath={me.avatarPath}
avatarUrl={me.avatarUrl}
badge={undefined}
color={me.color}
conversationType={me.type}
@ -823,7 +823,7 @@ export function SendStoryModal({
>
<Avatar
acceptedMessageRequest={group.acceptedMessageRequest}
avatarPath={group.avatarPath}
avatarUrl={group.avatarUrl}
badge={undefined}
color={group.color}
conversationType={group.type}

14
ts/components/StoriesSettingsModal.tsx
View file

@ -161,7 +161,7 @@ function DistributionListItem({
{isMyStory ? (
<Avatar
acceptedMessageRequest={me.acceptedMessageRequest}
avatarPath={me.avatarPath}
avatarUrl={me.avatarUrl}
badge={undefined}
color={me.color}
conversationType={me.type}
@ -215,7 +215,7 @@ function GroupStoryItem({
<span className="StoriesSettingsModal__list__left">
<Avatar
acceptedMessageRequest={groupStory.acceptedMessageRequest}
avatarPath={groupStory.avatarPath}
avatarUrl={groupStory.avatarUrl}
badge={undefined}
color={groupStory.color}
conversationType={groupStory.type}
@ -676,7 +676,7 @@ export function DistributionListSettingsModal({
<span className="StoriesSettingsModal__list__left">
<Avatar
acceptedMessageRequest={member.acceptedMessageRequest}
avatarPath={member.avatarPath}
avatarUrl={member.avatarUrl}
badge={getPreferredBadge(member.badges)}
color={member.color}
conversationType={member.type}
@ -1095,7 +1095,7 @@ export function EditDistributionListModal({
<span className="StoriesSettingsModal__list__left">
<Avatar
acceptedMessageRequest={contact.acceptedMessageRequest}
avatarPath={contact.avatarPath}
avatarUrl={contact.avatarUrl}
badge={getPreferredBadge(contact.badges)}
color={contact.color}
conversationType={contact.type}
@ -1191,7 +1191,7 @@ export function EditDistributionListModal({
<ContactPill
key={contact.id}
acceptedMessageRequest={contact.acceptedMessageRequest}
avatarPath={contact.avatarPath}
avatarUrl={contact.avatarUrl}
color={contact.color}
firstName={contact.firstName}
i18n={i18n}
@ -1286,7 +1286,7 @@ export function GroupStorySettingsModal({
<div className="GroupStorySettingsModal__header">
<Avatar
acceptedMessageRequest={group.acceptedMessageRequest}
avatarPath={group.avatarPath}
avatarUrl={group.avatarUrl}
badge={undefined}
color={group.color}
conversationType={group.type}
@ -1315,7 +1315,7 @@ export function GroupStorySettingsModal({
>
<Avatar
acceptedMessageRequest={member.acceptedMessageRequest}
avatarPath={member.avatarPath}
avatarUrl={member.avatarUrl}
badge={undefined}
color={member.color}
conversationType={member.type}

6
ts/components/StoryDetailsModal.tsx
View file

@ -129,7 +129,7 @@ export function StoryDetailsModal({
<div key={contact.id} className="StoryDetailsModal__contact">
<Avatar
acceptedMessageRequest={contact.acceptedMessageRequest}
avatarPath={contact.avatarPath}
avatarUrl={contact.avatarUrl}
badge={getPreferredBadge(contact.badges)}
color={contact.color}
conversationType="direct"
@ -141,7 +141,7 @@ export function StoryDetailsModal({
size={AvatarSize.THIRTY_TWO}
theme={ThemeType.dark}
title={contact.title}
unblurredAvatarPath={contact.unblurredAvatarPath}
unblurredAvatarUrl={contact.unblurredAvatarUrl}
/>
<div className="StoryDetailsModal__contact__text">
<ContactName title={contact.title} />
@ -172,7 +172,7 @@ export function StoryDetailsModal({
<div className="StoryDetailsModal__contact">
<Avatar
acceptedMessageRequest={sender.acceptedMessageRequest}
avatarPath={sender.avatarPath}
avatarUrl={sender.avatarUrl}
badge={getPreferredBadge(sender.badges)}
color={sender.color}
conversationType="direct"

6
ts/components/StoryListItem.tsx
View file

@ -35,7 +35,7 @@ export type PropsType = Pick<ConversationStoryType, 'group' | 'isHidden'> & {
function StoryListItemAvatar({
acceptedMessageRequest,
avatarPath,
avatarUrl,
avatarStoryRing,
badges,
color,
@ -49,7 +49,7 @@ function StoryListItemAvatar({
}: Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'avatarUrl'
| 'color'
| 'profileName'
| 'sharedGroupNames'
@ -65,7 +65,7 @@ function StoryListItemAvatar({
return (
<Avatar
acceptedMessageRequest={acceptedMessageRequest}
avatarPath={avatarPath}
avatarUrl={avatarUrl}
badge={badges ? getPreferredBadge(badges) : undefined}
color={getAvatarColor(color)}
conversationType="direct"

2
ts/components/StoryViewer.stories.tsx
View file

@ -80,7 +80,7 @@ export function InAGroup(args: PropsType): JSX.Element {
<StoryViewer
{...args}
group={getDefaultConversation({
avatarPath: '/fixtures/kitten-4-112-112.jpg',
avatarUrl: '/fixtures/kitten-4-112-112.jpg',
title: 'Family Group',
type: 'group',
})}

8
ts/components/StoryViewer.tsx
View file

@ -74,7 +74,7 @@ export type PropsType = {
group?: Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'avatarUrl'
| 'color'
| 'id'
| 'name'
@ -204,7 +204,7 @@ export function StoryViewer({
} = story;
const {
acceptedMessageRequest,
avatarPath,
avatarUrl,
color,
isMe,
firstName,
@ -783,7 +783,7 @@ export function StoryViewer({
<div className="StoryViewer__meta__playback-bar__container">
<Avatar
acceptedMessageRequest={acceptedMessageRequest}
avatarPath={avatarPath}
avatarUrl={avatarUrl}
badge={undefined}
color={getAvatarColor(color)}
conversationType="direct"
@ -797,7 +797,7 @@ export function StoryViewer({
{group && (
<Avatar
acceptedMessageRequest={group.acceptedMessageRequest}
avatarPath={group.avatarPath}
avatarUrl={group.avatarUrl}
badge={undefined}
className="StoryViewer__meta--group-avatar"
color={getAvatarColor(group.color)}

4
ts/components/StoryViewsNRepliesModal.tsx
View file

@ -368,7 +368,7 @@ export function StoryViewsNRepliesModal({
<div>
<Avatar
acceptedMessageRequest={view.recipient.acceptedMessageRequest}
avatarPath={view.recipient.avatarPath}
avatarUrl={view.recipient.avatarUrl}
badge={undefined}
color={getAvatarColor(view.recipient.color)}
conversationType="direct"
@ -550,7 +550,7 @@ function ReplyOrReactionMessage({
<div className="StoryViewsNRepliesModal__reaction--container">
<Avatar
acceptedMessageRequest={reply.author.acceptedMessageRequest}
avatarPath={reply.author.avatarPath}
avatarUrl={reply.author.avatarUrl}
badge={getPreferredBadge(reply.author.badges)}
color={getAvatarColor(reply.author.color)}
conversationType="direct"

4
ts/components/conversation/AboutContactModal.tsx
View file

@ -120,7 +120,7 @@ export function AboutContactModal({
<div className="AboutContactModal__row AboutContactModal__row--centered">
<Avatar
acceptedMessageRequest={conversation.acceptedMessageRequest}
avatarPath={conversation.avatarPath}
avatarUrl={conversation.avatarUrl}
blur={avatarBlur}
onClick={avatarBlur === AvatarBlur.NoBlur ? undefined : onAvatarClick}
badge={undefined}
@ -132,7 +132,7 @@ export function AboutContactModal({
sharedGroupNames={[]}
size={AvatarSize.TWO_HUNDRED_SIXTEEN}
title={conversation.title}
unblurredAvatarPath={conversation.unblurredAvatarPath}
unblurredAvatarUrl={conversation.unblurredAvatarUrl}
/>
</div>

2
ts/components/conversation/AttachmentList.tsx
View file

@ -126,7 +126,7 @@ export function AttachmentList<T extends AttachmentType | AttachmentDraftType>({
if (isImage && canEditImages) {
return (
<div className="module-attachments--editable">
<div className="module-attachments--editable" key={key}>
{imgElement}
<div className="module-attachments__edit-icon" />
</div>

6
ts/components/conversation/ContactModal.tsx
View file

@ -314,7 +314,7 @@ export function ContactModal({
<div className="ContactModal">
<Avatar
acceptedMessageRequest={contact.acceptedMessageRequest}
avatarPath={contact.avatarPath}
avatarUrl={contact.avatarUrl}
badge={preferredBadge}
color={contact.color}
conversationType="direct"
@ -338,7 +338,7 @@ export function ContactModal({
storyRing={hasStories}
theme={theme}
title={contact.title}
unblurredAvatarPath={contact.unblurredAvatarPath}
unblurredAvatarUrl={contact.unblurredAvatarUrl}
/>
<button
type="button"
@ -472,7 +472,7 @@ export function ContactModal({
return (
<AvatarLightbox
avatarColor={contact.color}
avatarPath={contact.avatarPath}
avatarUrl={contact.avatarUrl}
conversationTitle={contact.title}
i18n={i18n}
onClose={() => setView(ContactModalView.Default)}

2
ts/components/conversation/ConversationHeader.stories.tsx
View file

@ -87,7 +87,7 @@ export function PrivateConvo(): JSX.Element {
conversation: getDefaultConversation({
color: getRandomColor(),
isVerified: true,
avatarPath: gifUrl,
avatarUrl: gifUrl,
title: 'Someone 🔥 Somewhere',
name: 'Someone 🔥 Somewhere',
phoneNumber: '(202) 555-0001',

4
ts/components/conversation/ConversationHeader.tsx
View file

@ -443,7 +443,7 @@ function HeaderContent({
<span className="module-ConversationHeader__header__avatar">
<Avatar
acceptedMessageRequest={conversation.acceptedMessageRequest}
avatarPath={conversation.avatarPath ?? undefined}
avatarUrl={conversation.avatarUrl ?? undefined}
badge={badge ?? undefined}
color={conversation.color ?? undefined}
conversationType={conversation.type}
@ -459,7 +459,7 @@ function HeaderContent({
storyRing={conversation.isMe ? undefined : hasStories ?? undefined}
theme={theme}
title={conversation.title}
unblurredAvatarPath={conversation.unblurredAvatarPath ?? undefined}
unblurredAvatarUrl={conversation.unblurredAvatarUrl ?? undefined}
/>
</span>
);

8
ts/components/conversation/ConversationHero.stories.tsx
View file

@ -84,7 +84,7 @@ DirectNoGroupsJustPhoneNumber.args = {
export const DirectNoGroupsNoData = Template.bind({});
DirectNoGroupsNoData.args = {
avatarPath: undefined,
avatarUrl: undefined,
phoneNumber: '',
profileName: '',
title: casual.phone,
@ -93,7 +93,7 @@ DirectNoGroupsNoData.args = {
export const DirectNoGroupsNoDataNotAccepted = Template.bind({});
DirectNoGroupsNoDataNotAccepted.args = {
acceptedMessageRequest: false,
avatarPath: undefined,
avatarUrl: undefined,
phoneNumber: '',
profileName: '',
title: '',
@ -116,7 +116,7 @@ GroupManyMembers.args = {
export const GroupOneMember = Template.bind({});
GroupOneMember.args = {
avatarPath: undefined,
avatarUrl: undefined,
conversationType: 'group',
groupDescription: casual.sentence,
membersCount: 1,
@ -125,7 +125,7 @@ GroupOneMember.args = {
export const GroupZeroMembers = Template.bind({});
GroupZeroMembers.args = {
avatarPath: undefined,
avatarUrl: undefined,
conversationType: 'group',
groupDescription: casual.sentence,
membersCount: 0,

12
ts/components/conversation/ConversationHero.tsx
View file

@ -31,7 +31,7 @@ export type Props = {
phoneNumber?: string;
sharedGroupNames?: ReadonlyArray<string>;
unblurAvatar: (conversationId: string) => void;
unblurredAvatarPath?: string;
unblurredAvatarUrl?: string;
updateSharedGroups: (conversationId: string) => unknown;
theme: ThemeType;
viewUserStories: ViewUserStoriesActionCreatorType;
@ -136,7 +136,7 @@ export function ConversationHero({
i18n,
about,
acceptedMessageRequest,
avatarPath,
avatarUrl,
badge,
color,
conversationType,
@ -152,7 +152,7 @@ export function ConversationHero({
theme,
title,
unblurAvatar,
unblurredAvatarPath,
unblurredAvatarUrl,
updateSharedGroups,
viewUserStories,
toggleAboutContactModal,
@ -174,10 +174,10 @@ export function ConversationHero({
if (
shouldBlurAvatar({
acceptedMessageRequest,
avatarPath,
avatarUrl,
isMe,
sharedGroupNames,
unblurredAvatarPath,
unblurredAvatarUrl,
})
) {
avatarBlur = AvatarBlur.BlurPictureWithClickToView;
@ -221,7 +221,7 @@ export function ConversationHero({
<div className="module-conversation-hero">
<Avatar
acceptedMessageRequest={acceptedMessageRequest}
avatarPath={avatarPath}
avatarUrl={avatarUrl}
badge={badge}
blur={avatarBlur}
className="module-conversation-hero__avatar"

8
ts/components/conversation/Message.tsx
View file

@ -229,7 +229,7 @@ export type PropsData = {
author: Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'avatarUrl'
| 'badges'
| 'color'
| 'id'
@ -238,7 +238,7 @@ export type PropsData = {
| 'profileName'
| 'sharedGroupNames'
| 'title'
| 'unblurredAvatarPath'
| 'unblurredAvatarUrl'
>;
conversationType: ConversationTypeType;
attachments?: ReadonlyArray<AttachmentType>;
@ -1814,7 +1814,7 @@ export class Message extends React.PureComponent<Props, State> {
) : (
<Avatar
acceptedMessageRequest={author.acceptedMessageRequest}
avatarPath={author.avatarPath}
avatarUrl={author.avatarUrl}
badge={getPreferredBadge(author.badges)}
color={author.color}
conversationType="direct"
@ -1832,7 +1832,7 @@ export class Message extends React.PureComponent<Props, State> {
size={GROUP_AVATAR_SIZE}
theme={theme}
title={author.title}
unblurredAvatarPath={author.unblurredAvatarPath}
unblurredAvatarUrl={author.unblurredAvatarUrl}
/>
)}
</div>

12
ts/components/conversation/MessageDetail.tsx
View file

@ -37,7 +37,7 @@ import {
export type Contact = Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'avatarUrl'
| 'badges'
| 'color'
| 'id'
@ -46,7 +46,7 @@ export type Contact = Pick<
| 'profileName'
| 'sharedGroupNames'
| 'title'
| 'unblurredAvatarPath'
| 'unblurredAvatarUrl'
> & {
status?: SendStatus;
statusTimestamp?: number;
@ -154,7 +154,7 @@ export function MessageDetail({
function renderAvatar(contact: Contact): JSX.Element {
const {
acceptedMessageRequest,
avatarPath,
avatarUrl,
badges,
color,
isMe,
@ -162,13 +162,13 @@ export function MessageDetail({
profileName,
sharedGroupNames,
title,
unblurredAvatarPath,
unblurredAvatarUrl,
} = contact;
return (
<Avatar
acceptedMessageRequest={acceptedMessageRequest}
avatarPath={avatarPath}
avatarUrl={avatarUrl}
badge={getPreferredBadge(badges)}
color={color}
conversationType="direct"
@ -180,7 +180,7 @@ export function MessageDetail({
title={title}
sharedGroupNames={sharedGroupNames}
size={AvatarSize.THIRTY_TWO}
unblurredAvatarPath={unblurredAvatarPath}
unblurredAvatarUrl={unblurredAvatarUrl}
/>
);
}

4
ts/components/conversation/Quote.tsx
View file

@ -614,9 +614,7 @@ function ThumbnailImage({
return (
<div
className={className}
style={
loadedSrc ? { backgroundImage: `url('${encodeURI(loadedSrc)}')` } : {}
}
style={loadedSrc ? { backgroundImage: `url('${loadedSrc}')` } : {}}
>
{children}
</div>

4
ts/components/conversation/ReactionViewer.tsx
View file

@ -22,7 +22,7 @@ export type Reaction = {
from: Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'avatarUrl'
| 'badges'
| 'color'
| 'id'
@ -226,7 +226,7 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
<div className="module-reaction-viewer__body__row__avatar">
<Avatar
acceptedMessageRequest={from.acceptedMessageRequest}
avatarPath={from.avatarPath}
avatarUrl={from.avatarUrl}
badge={getPreferredBadge(from.badges)}
conversationType="direct"
sharedGroupNames={from.sharedGroupNames}

2
ts/components/conversation/Timeline.stories.tsx
View file

@ -399,7 +399,7 @@ const renderHeroRow = () => {
<ConversationHero
about={getAbout()}
acceptedMessageRequest
avatarPath={getAvatarPath()}
avatarUrl={getAvatarPath()}
badge={undefined}
conversationType="direct"
id={getDefaultConversation().id}

2
ts/components/conversation/TimelineMessage.stories.tsx
View file

@ -721,7 +721,7 @@ ReactionsShortMessage.args = {
export const AvatarInGroup = Template.bind({});
AvatarInGroup.args = {
author: getDefaultConversation({ avatarPath: pngUrl }),
author: getDefaultConversation({ avatarUrl: pngUrl }),
conversationType: 'group',
status: 'sent',
text: 'Hello it is me, the saxophone.',

2
ts/components/conversation/TypingBubble.stories.tsx
View file

@ -27,7 +27,7 @@ const CONTACTS = times(10, index => {
return getDefaultConversation({
id: `contact-${index}`,
acceptedMessageRequest: false,
avatarPath: '',
avatarUrl: '',
badges: [],
color: AvatarColors[index],
name: `${letter} ${letter}`,

4
ts/components/conversation/TypingBubble.tsx
View file

@ -19,7 +19,7 @@ const MAX_AVATARS_COUNT = 3;
type TypingContactType = Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'avatarUrl'
| 'badges'
| 'color'
| 'id'
@ -120,7 +120,7 @@ function TypingBubbleAvatar({
<animated.div className="module-message__typing-avatar" style={springProps}>
<Avatar
acceptedMessageRequest={contact.acceptedMessageRequest}
avatarPath={contact.avatarPath}
avatarUrl={contact.avatarUrl}
badge={getPreferredBadge(contact.badges)}
color={contact.color}
conversationType="direct"

4
ts/components/conversation/contactUtil.tsx
View file

@ -25,7 +25,7 @@ export function renderAvatar({
}): JSX.Element {
const { avatar } = contact;
const avatarPath = avatar && avatar.avatar && avatar.avatar.path;
const avatarUrl = avatar && avatar.avatar && avatar.avatar.path;
const pending = avatar && avatar.avatar && avatar.avatar.pending;
const title = getName(contact) || '';
const spinnerSvgSize = size < 50 ? 'small' : 'normal';
@ -46,7 +46,7 @@ export function renderAvatar({
return (
<Avatar
acceptedMessageRequest={false}
avatarPath={avatarPath}
avatarUrl={avatarUrl}
badge={undefined}
blur={AvatarBlur.NoBlur}
color={AvatarColors[0]}

2
ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.tsx
View file

@ -412,7 +412,7 @@ export function ChooseGroupMembersModal({
<ContactPill
key={contact.id}
acceptedMessageRequest={contact.acceptedMessageRequest}
avatarPath={contact.avatarPath}
avatarUrl={contact.avatarUrl}
color={contact.color}
firstName={contact.systemGivenName ?? contact.firstName}
i18n={i18n}

2
ts/components/conversation/conversation-details/ConversationDetails.tsx
View file

@ -245,7 +245,7 @@ export function ConversationDetails({
modalNode = (
<EditConversationAttributesModal
avatarColor={conversation.color}
avatarPath={conversation.avatarPath}
avatarUrl={conversation.avatarUrl}
conversationId={conversation.id}
groupDescription={conversation.groupDescription}
i18n={i18n}

2
ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx
View file

@ -107,7 +107,7 @@ export function ConversationDetailsHeader({
modal = (
<AvatarLightbox
avatarColor={conversation.color}
avatarPath={conversation.avatarPath}
avatarUrl={conversation.avatarUrl}
conversationTitle={conversation.title}
i18n={i18n}
isGroup={isGroup}

4
ts/components/conversation/conversation-details/EditConversationAttributesModal.stories.tsx
View file

@ -20,7 +20,7 @@ export default {
type PropsType = ComponentProps<typeof EditConversationAttributesModal>;
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
avatarPath: undefined,
avatarUrl: undefined,
conversationId: '123',
i18n,
initiallyFocusDescription: false,
@ -43,7 +43,7 @@ export function AvatarAndTitle(): JSX.Element {
return (
<EditConversationAttributesModal
{...createProps({
avatarPath: '/fixtures/kitten-3-64-64.jpg',
avatarUrl: '/fixtures/kitten-3-64-64.jpg',
})}
/>
);

16
ts/components/conversation/conversation-details/EditConversationAttributesModal.tsx
View file

@ -23,7 +23,7 @@ import type { AvatarColorType } from '../../../types/Colors';
type PropsType = {
avatarColor?: AvatarColorType;
avatarPath?: string;
avatarUrl?: string;
conversationId: string;
groupDescription?: string;
i18n: LocalizerType;
@ -46,7 +46,7 @@ type PropsType = {
export function EditConversationAttributesModal({
avatarColor,
avatarPath: externalAvatarPath,
avatarUrl: externalAvatarUrl,
conversationId,
groupDescription: externalGroupDescription = '',
i18n,
@ -66,7 +66,7 @@ export function EditConversationAttributesModal({
const focusDescription = focusDescriptionRef.current;
const startingTitleRef = useRef<string>(externalTitle);
const startingAvatarPathRef = useRef<undefined | string>(externalAvatarPath);
const startingAvatarUrlRef = useRef<undefined | string>(externalAvatarUrl);
const [editingAvatar, setEditingAvatar] = useState(false);
const [avatar, setAvatar] = useState<undefined | Uint8Array>();
@ -87,7 +87,7 @@ export function EditConversationAttributesModal({
};
const hasChangedExternally =
startingAvatarPathRef.current !== externalAvatarPath ||
startingAvatarUrlRef.current !== externalAvatarUrl ||
startingTitleRef.current !== externalTitle;
const hasTitleChanged = trimmedTitle !== externalTitle.trim();
const hasGroupDescriptionChanged =
@ -123,16 +123,14 @@ export function EditConversationAttributesModal({
makeRequest(request);
};
const avatarPathForPreview = hasAvatarChanged
? undefined
: externalAvatarPath;
const avatarUrlForPreview = hasAvatarChanged ? undefined : externalAvatarUrl;
let content: JSX.Element;
if (editingAvatar) {
content = (
<AvatarEditor
avatarColor={avatarColor}
avatarPath={avatarPathForPreview}
avatarUrl={avatarUrlForPreview}
avatarValue={avatar}
conversationId={conversationId}
deleteAvatarFromDisk={deleteAvatarFromDisk}
@ -161,7 +159,7 @@ export function EditConversationAttributesModal({
>
<AvatarPreview
avatarColor={avatarColor}
avatarPath={avatarPathForPreview}
avatarUrl={avatarUrlForPreview}
avatarValue={avatar}
i18n={i18n}
isEditable

12
ts/components/conversationList/BaseConversationListItem.tsx
View file

@ -58,7 +58,7 @@ type PropsType = {
} & Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'avatarUrl'
| 'color'
| 'groupId'
| 'isMe'
@ -67,7 +67,7 @@ type PropsType = {
| 'profileName'
| 'sharedGroupNames'
| 'title'
| 'unblurredAvatarPath'
| 'unblurredAvatarUrl'
| 'serviceId'
> &
(
@ -79,7 +79,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
React.memo(function BaseConversationListItem(props) {
const {
acceptedMessageRequest,
avatarPath,
avatarUrl,
avatarSize,
buttonAriaLabel,
checked,
@ -106,7 +106,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
shouldShowSpinner,
testId: overrideTestId,
title,
unblurredAvatarPath,
unblurredAvatarUrl,
unreadCount,
unreadMentionsCount,
serviceId,
@ -194,7 +194,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
<div className={AVATAR_CONTAINER_CLASS_NAME}>
<Avatar
acceptedMessageRequest={acceptedMessageRequest}
avatarPath={avatarPath}
avatarUrl={avatarUrl}
color={color}
conversationType={conversationType}
noteToSelf={isAvatarNoteToSelf}
@ -206,7 +206,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
title={title}
sharedGroupNames={sharedGroupNames}
size={avatarSize ?? AvatarSize.FORTY_EIGHT}
unblurredAvatarPath={unblurredAvatarPath}
unblurredAvatarUrl={unblurredAvatarUrl}
// This is here to appease the type checker.
{...(props.badge
? { badge: props.badge, theme: props.theme }

12
ts/components/conversationList/ContactCheckbox.tsx
View file

@ -27,7 +27,7 @@ export type PropsDataType = {
ConversationType,
| 'about'
| 'acceptedMessageRequest'
| 'avatarPath'
| 'avatarUrl'
| 'color'
| 'groupId'
| 'id'
@ -37,7 +37,7 @@ export type PropsDataType = {
| 'sharedGroupNames'
| 'title'
| 'type'
| 'unblurredAvatarPath'
| 'unblurredAvatarUrl'
| 'serviceId'
>;
@ -56,7 +56,7 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
function ContactCheckbox({
about,
acceptedMessageRequest,
avatarPath,
avatarUrl,
badge,
color,
disabledReason,
@ -71,7 +71,7 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
theme,
title,
type,
unblurredAvatarPath,
unblurredAvatarUrl,
}) {
const disabled = Boolean(disabledReason);
@ -104,7 +104,7 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
leading={
<Avatar
acceptedMessageRequest={acceptedMessageRequest}
avatarPath={avatarPath}
avatarUrl={avatarUrl}
color={color}
conversationType={type}
noteToSelf={Boolean(isMe)}
@ -115,7 +115,7 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
title={title}
sharedGroupNames={sharedGroupNames}
size={AvatarSize.THIRTY_TWO}
unblurredAvatarPath={unblurredAvatarPath}
unblurredAvatarUrl={unblurredAvatarUrl}
// appease the type checker.
{...(badge ? { badge, theme } : { badge: undefined })}
/>

12
ts/components/conversationList/ContactListItem.tsx
View file

@ -23,7 +23,7 @@ export type ContactListItemConversationType = Pick<
ConversationType,
| 'about'
| 'acceptedMessageRequest'
| 'avatarPath'
| 'avatarUrl'
| 'badges'
| 'color'
| 'groupId'
@ -37,7 +37,7 @@ export type ContactListItemConversationType = Pick<
| 'systemFamilyName'
| 'title'
| 'type'
| 'unblurredAvatarPath'
| 'unblurredAvatarUrl'
| 'username'
| 'e164'
| 'serviceId'
@ -64,7 +64,7 @@ export const ContactListItem: FunctionComponent<PropsType> = React.memo(
function ContactListItem({
about,
acceptedMessageRequest,
avatarPath,
avatarUrl,
badge,
color,
hasContextMenu,
@ -85,7 +85,7 @@ export const ContactListItem: FunctionComponent<PropsType> = React.memo(
theme,
title,
type,
unblurredAvatarPath,
unblurredAvatarUrl,
serviceId,
}) {
const [isConfirmingBlocking, setConfirmingBlocking] = useState(false);
@ -265,7 +265,7 @@ export const ContactListItem: FunctionComponent<PropsType> = React.memo(
leading={
<Avatar
acceptedMessageRequest={acceptedMessageRequest}
avatarPath={avatarPath}
avatarUrl={avatarUrl}
color={color}
conversationType={type}
noteToSelf={Boolean(isMe)}
@ -276,7 +276,7 @@ export const ContactListItem: FunctionComponent<PropsType> = React.memo(
title={title}
sharedGroupNames={sharedGroupNames}
size={AvatarSize.THIRTY_TWO}
unblurredAvatarPath={unblurredAvatarPath}
unblurredAvatarUrl={unblurredAvatarUrl}
// This is here to appease the type checker.
{...(badge ? { badge, theme } : { badge: undefined })}
/>

12
ts/components/conversationList/ConversationListItem.tsx
View file

@ -39,7 +39,7 @@ export type MessageStatusType = typeof MessageStatuses[number];
export type PropsData = Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'avatarUrl'
| 'badges'
| 'color'
| 'draftPreview'
@ -62,7 +62,7 @@ export type PropsData = Pick<
| 'title'
| 'type'
| 'typingContactIdTimestamps'
| 'unblurredAvatarPath'
| 'unblurredAvatarUrl'
| 'unreadCount'
| 'unreadMentionsCount'
| 'serviceId'
@ -82,7 +82,7 @@ export type Props = PropsData & PropsHousekeeping;
export const ConversationListItem: FunctionComponent<Props> = React.memo(
function ConversationListItem({
acceptedMessageRequest,
avatarPath,
avatarUrl,
badge,
buttonAriaLabel,
color,
@ -107,7 +107,7 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
title,
type,
typingContactIdTimestamps,
unblurredAvatarPath,
unblurredAvatarUrl,
unreadCount,
unreadMentionsCount,
serviceId,
@ -206,7 +206,7 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
return (
<BaseConversationListItem
acceptedMessageRequest={acceptedMessageRequest}
avatarPath={avatarPath}
avatarUrl={avatarUrl}
badge={badge}
buttonAriaLabel={buttonAriaLabel}
color={color}
@ -230,7 +230,7 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
title={title}
unreadCount={unreadCount}
unreadMentionsCount={unreadMentionsCount}
unblurredAvatarPath={unblurredAvatarPath}
unblurredAvatarUrl={unblurredAvatarUrl}
serviceId={serviceId}
/>
);

4
ts/components/conversationList/GroupListItem.tsx
View file

@ -16,7 +16,7 @@ export enum DisabledReason {
export type GroupListItemConversationType = Pick<
ConversationType,
'id' | 'title' | 'avatarPath'
'id' | 'title' | 'avatarUrl'
> & {
disabledReason: DisabledReason | undefined;
membersCount: number;
@ -56,7 +56,7 @@ export function GroupListItem({
leading={
<Avatar
acceptedMessageRequest
avatarPath={group.avatarPath}
avatarUrl={group.avatarUrl}
conversationType="group"
i18n={i18n}
isMe={false}

8
ts/components/conversationList/MessageSearchResult.tsx
View file

@ -39,7 +39,7 @@ export type PropsDataType = {
from: Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'avatarUrl'
| 'badges'
| 'color'
| 'isMe'
@ -48,7 +48,7 @@ export type PropsDataType = {
| 'sharedGroupNames'
| 'title'
| 'type'
| 'unblurredAvatarPath'
| 'unblurredAvatarUrl'
>;
to: Pick<
@ -184,7 +184,7 @@ export const MessageSearchResult: FunctionComponent<PropsType> = React.memo(
return (
<BaseConversationListItem
acceptedMessageRequest={from.acceptedMessageRequest}
avatarPath={from.avatarPath}
avatarUrl={from.avatarUrl}
badge={getPreferredBadge(from.badges)}
color={from.color}
conversationType="direct"
@ -202,7 +202,7 @@ export const MessageSearchResult: FunctionComponent<PropsType> = React.memo(
sharedGroupNames={from.sharedGroupNames}
theme={theme}
title={from.title}
unblurredAvatarPath={from.unblurredAvatarPath}
unblurredAvatarUrl={from.unblurredAvatarUrl}
/>
);
}

2
ts/components/leftPane/LeftPaneChooseGroupMembersHelper.tsx
View file

@ -228,7 +228,7 @@ export class LeftPaneChooseGroupMembersHelper extends LeftPaneHelper<LeftPaneCho
<ContactPill
key={contact.id}
acceptedMessageRequest={contact.acceptedMessageRequest}
avatarPath={contact.avatarPath}
avatarUrl={contact.avatarUrl}
color={contact.color}
firstName={contact.systemGivenName ?? contact.firstName}
i18n={i18n}