2015-09-17 18:23:38 +01:00
|
|
|
/*
|
2024-09-09 14:57:16 +01:00
|
|
|
Copyright 2024 New Vector Ltd.
|
|
|
|
|
Copyright 2019-2022 The Matrix.org Foundation C.I.C.
|
2023-02-02 10:22:19 +00:00
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2015-09-17 18:23:38 +01:00
|
|
|
|
2025-01-06 11:18:54 +00:00
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
2024-09-09 14:57:16 +01:00
|
|
|
Please see LICENSE files in the repository root for full details.
|
2015-09-17 18:23:38 +01:00
|
|
|
*/
|
|
|
|
|
|
2025-02-05 13:25:06 +00:00
|
|
|
import React, { forwardRef, type ReactNode, type Ref, useContext } from "react";
|
|
|
|
|
import { type RoomMember, type ResizeMethod } from "matrix-js-sdk/src/matrix";
|
2021-06-29 10:36:24 +05:30
|
|
|
|
2020-05-13 20:41:41 -06:00
|
|
|
import dis from "../../../dispatcher/dispatcher";
|
2021-06-01 12:40:03 +05:30
|
|
|
import { Action } from "../../../dispatcher/actions";
|
2020-07-06 22:42:46 +01:00
|
|
|
import BaseAvatar from "./BaseAvatar";
|
2021-06-01 12:40:03 +05:30
|
|
|
import { mediaFromMxc } from "../../../customisations/Media";
|
2022-03-24 15:35:01 -06:00
|
|
|
import { CardContext } from "../right_panel/context";
|
2022-01-25 10:40:02 +01:00
|
|
|
import UserIdentifierCustomisations from "../../../customisations/UserIdentifier";
|
2022-11-08 10:58:26 +00:00
|
|
|
import { useRoomMemberProfile } from "../../../hooks/room/useRoomMemberProfile";
|
2023-07-07 04:54:43 -06:00
|
|
|
import { _t } from "../../../languageHandler";
|
2015-09-17 18:23:38 +01:00
|
|
|
|
2020-09-29 10:10:32 +01:00
|
|
|
interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
|
2022-04-26 12:35:05 +02:00
|
|
|
member: RoomMember | null;
|
2020-09-03 15:00:14 +01:00
|
|
|
fallbackUserId?: string;
|
2023-08-24 04:48:35 +01:00
|
|
|
size: string;
|
2021-03-08 17:03:14 -07:00
|
|
|
resizeMethod?: ResizeMethod;
|
2023-02-02 10:22:19 +00:00
|
|
|
// Whether the onClick of the avatar should be overridden to dispatch `Action.ViewUser`
|
2020-09-03 15:00:14 +01:00
|
|
|
viewUserOnClick?: boolean;
|
2022-01-05 17:25:41 +01:00
|
|
|
pushUserOnClick?: boolean;
|
2020-09-03 15:00:14 +01:00
|
|
|
title?: string;
|
2023-02-02 10:22:19 +00:00
|
|
|
style?: any;
|
|
|
|
|
forceHistorical?: boolean; // true to deny `useOnlyCurrentProfiles` usage. Default false.
|
2022-04-22 17:09:44 +02:00
|
|
|
hideTitle?: boolean;
|
2023-03-08 13:28:07 +00:00
|
|
|
children?: ReactNode;
|
2020-07-06 22:42:46 +01:00
|
|
|
}
|
2015-11-26 12:02:31 +00:00
|
|
|
|
2023-12-19 14:39:34 +00:00
|
|
|
function MemberAvatar(
|
|
|
|
|
{
|
|
|
|
|
size,
|
|
|
|
|
resizeMethod = "crop",
|
|
|
|
|
viewUserOnClick,
|
|
|
|
|
forceHistorical,
|
|
|
|
|
fallbackUserId,
|
|
|
|
|
hideTitle,
|
|
|
|
|
member: propsMember,
|
|
|
|
|
...props
|
|
|
|
|
}: IProps,
|
|
|
|
|
ref: Ref<HTMLElement>,
|
|
|
|
|
): JSX.Element {
|
2022-11-08 10:58:26 +00:00
|
|
|
const card = useContext(CardContext);
|
2015-09-17 18:23:38 +01:00
|
|
|
|
2022-11-08 10:58:26 +00:00
|
|
|
const member = useRoomMemberProfile({
|
2022-11-18 09:22:43 +00:00
|
|
|
userId: propsMember?.userId,
|
|
|
|
|
member: propsMember,
|
|
|
|
|
forceHistorical: forceHistorical,
|
2022-11-08 10:58:26 +00:00
|
|
|
});
|
2015-09-17 18:23:38 +01:00
|
|
|
|
2022-11-18 09:22:43 +00:00
|
|
|
const name = member?.name ?? fallbackUserId;
|
2022-11-08 10:58:26 +00:00
|
|
|
let title: string | undefined = props.title;
|
2023-02-28 10:25:36 +00:00
|
|
|
let imageUrl: string | null | undefined;
|
2022-11-08 10:58:26 +00:00
|
|
|
if (member?.name) {
|
|
|
|
|
if (member.getMxcAvatarUrl()) {
|
|
|
|
|
imageUrl = mediaFromMxc(member.getMxcAvatarUrl() ?? "").getThumbnailOfSourceHttp(
|
2023-08-24 04:48:35 +01:00
|
|
|
parseInt(size, 10),
|
|
|
|
|
parseInt(size, 10),
|
2022-11-08 10:58:26 +00:00
|
|
|
resizeMethod,
|
2022-01-25 10:40:02 +01:00
|
|
|
);
|
2022-11-08 10:58:26 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!title) {
|
|
|
|
|
title =
|
2023-02-02 10:22:19 +00:00
|
|
|
UserIdentifierCustomisations.getDisplayUserIdentifier(member?.userId ?? "", {
|
|
|
|
|
roomId: member?.roomId ?? "",
|
2022-11-18 09:22:43 +00:00
|
|
|
}) ?? fallbackUserId;
|
2016-08-27 01:18:48 +01:00
|
|
|
}
|
2020-07-06 22:42:46 +01:00
|
|
|
}
|
2016-08-01 17:10:46 +01:00
|
|
|
|
2022-11-11 16:02:01 +00:00
|
|
|
return (
|
|
|
|
|
<BaseAvatar
|
|
|
|
|
{...props}
|
2023-08-24 04:48:35 +01:00
|
|
|
size={size}
|
2022-11-11 16:02:01 +00:00
|
|
|
name={name ?? ""}
|
2022-11-18 09:22:43 +00:00
|
|
|
title={hideTitle ? undefined : title}
|
|
|
|
|
idName={member?.userId ?? fallbackUserId}
|
2022-11-11 16:02:01 +00:00
|
|
|
url={imageUrl}
|
|
|
|
|
onClick={
|
|
|
|
|
viewUserOnClick
|
|
|
|
|
? () => {
|
2023-02-02 10:22:19 +00:00
|
|
|
dis.dispatch({
|
2022-11-11 16:02:01 +00:00
|
|
|
action: Action.ViewUser,
|
2023-02-02 10:22:19 +00:00
|
|
|
member: propsMember,
|
2022-11-11 16:02:01 +00:00
|
|
|
push: card.isCard,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
: props.onClick
|
|
|
|
|
}
|
2023-09-26 13:04:17 +01:00
|
|
|
altText={_t("common|user_avatar")}
|
2023-12-19 14:39:34 +00:00
|
|
|
ref={ref}
|
2022-11-11 16:02:01 +00:00
|
|
|
/>
|
|
|
|
|
);
|
2020-07-06 22:42:46 +01:00
|
|
|
}
|
2022-11-11 09:39:35 +00:00
|
|
|
|
2023-12-19 14:39:34 +00:00
|
|
|
export default forwardRef(MemberAvatar);
|