Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Always use current profile on thread events #9524

Merged
germain-gg merged 6 commits into from
Nov 8, 2022
Merged

Always use current profile on thread events #9524

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4c30ecd
Always use current profile on thread events
germain-gg Oct 31, 2022
578b8b0
Fix snapshot tests
germain-gg Oct 31, 2022
5484e2b
create useRoomMemberProfile hook
germain-gg Nov 2, 2022
9732efa
Merge branch 'develop' into gsouquet/thread-profile-current-avatar-23648
germain-gg Nov 8, 2022
21c4c57
Strict types
germain-gg Nov 8, 2022
ebe34a4
strict ts
germain-gg Nov 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 64 additions & 78 deletions src/components/views/avatars/MemberAvatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import React from 'react';
import React, { useContext, useEffect, useState } from 'react';
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials';
import { logger } from "matrix-js-sdk/src/logger";
Expand All @@ -27,7 +27,8 @@ import { mediaFromMxc } from "../../../customisations/Media";
import { CardContext } from '../right_panel/context';
import UserIdentifierCustomisations from '../../../customisations/UserIdentifier';
import SettingsStore from "../../../settings/SettingsStore";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import MatrixClientContext from '../../../contexts/MatrixClientContext';
import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';

interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
member: RoomMember | null;
Expand All @@ -46,100 +47,85 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
hideTitle?: boolean;
}

interface IState {
name: string;
title: string;
imageUrl?: string;
}

export default class MemberAvatar extends React.PureComponent<IProps, IState> {
public static defaultProps = {
width: 40,
height: 40,
resizeMethod: 'crop',
viewUserOnClick: false,
};

constructor(props: IProps) {
super(props);

this.state = MemberAvatar.getState(props);
}
export default function MemberAvatar({
width,
height,
resizeMethod = 'crop',
viewUserOnClick,
...props
}: IProps) {
const cli = useContext(MatrixClientContext);
const card = useContext(CardContext);
const roomContext = useContext(RoomContext);

const [name, setName] = useState<string | undefined>();
const [title, setTitle] = useState<string | undefined>();
const [imageUrl, setImageUrl] = useState<string | undefined>();
const [userId, setUserId] = useState<string | undefined>();

useEffect(() => {
let member = props.member;

public static getDerivedStateFromProps(nextProps: IProps): IState {
return MemberAvatar.getState(nextProps);
}
const useOnlyCurrentProfiles = (member && !props.forceHistorical
&& SettingsStore.getValue("useOnlyCurrentProfiles"))
|| roomContext?.timelineRenderingType === TimelineRenderingType.ThreadsList
|| roomContext?.timelineRenderingType === TimelineRenderingType.Thread;

private static getState(props: IProps): IState {
let member = props.member;
if (member && !props.forceHistorical && SettingsStore.getValue("useOnlyCurrentProfiles")) {
const room = MatrixClientPeg.get().getRoom(member.roomId);
if (useOnlyCurrentProfiles) {
const room = cli.getRoom(member.roomId);
if (room) {
member = room.getMember(member.userId);
}
}
if (member?.name) {
let imageUrl = null;
const userTitle = UserIdentifierCustomisations.getDisplayUserIdentifier(
member.userId, { roomId: member?.roomId },
);
if (member.getMxcAvatarUrl()) {
imageUrl = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
props.width,
props.height,
props.resizeMethod,
);
setImageUrl(mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
width,
height,
resizeMethod,
));
}
return {
name: member.name,
title: props.title || userTitle,
imageUrl: imageUrl,
};
setName(member.name);
setTitle(props.title || userTitle);
} else if (props.fallbackUserId) {
return {
name: props.fallbackUserId,
title: props.fallbackUserId,
};
setName(props.fallbackUserId);
setTitle(props.fallbackUserId);
} else {
logger.error("MemberAvatar called somehow with null member or fallbackUserId");
return {} as IState; // prevent an explosion
}
}

render() {
let {
member,
fallbackUserId,
onClick,
viewUserOnClick,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
forceHistorical,
hideTitle,
...otherProps
} = this.props;
const userId = member ? member.userId : fallbackUserId;

if (viewUserOnClick) {
onClick = () => {
setUserId(member?.userId ?? props.fallbackUserId);
}, [cli,
height,
props.fallbackUserId,
props.forceHistorical,
props.member,
props.title,
resizeMethod,
roomContext?.timelineRenderingType,
width,
]);

return (
<BaseAvatar
{...props}
width={width}
height={height}
resizeMethod={resizeMethod}
name={name}
title={props.hideTitle ? undefined : title}
idName={userId}
url={imageUrl}
onClick={viewUserOnClick ? () => {
dis.dispatch({
action: Action.ViewUser,
member: this.props.member,
push: this.context.isCard,
member: props.member,
push: card.isCard,
});
};
}

return (
<BaseAvatar
{...otherProps}
name={this.state.name}
title={hideTitle ? undefined : this.state.title}
idName={userId}
url={this.state.imageUrl}
onClick={onClick}
/>
);
}
} : props.onClick}
/>
);
}

MemberAvatar.contextType = CardContext;
57 changes: 23 additions & 34 deletions src/components/views/messages/SenderProfile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,55 +14,44 @@
limitations under the License.
*/

import React from 'react';
import React, { useContext } from 'react';
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { MsgType } from "matrix-js-sdk/src/@types/event";

import MatrixClientContext from "../../../contexts/MatrixClientContext";
import DisambiguatedProfile from "./DisambiguatedProfile";
import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
import SettingsStore from "../../../settings/SettingsStore";
import { MatrixClientPeg } from "../../../MatrixClientPeg";

interface IProps {
mxEvent: MatrixEvent;
onClick?(): void;
}

export default class SenderProfile extends React.PureComponent<IProps> {
public static contextType = MatrixClientContext;
public context!: React.ContextType<typeof MatrixClientContext>;
export default function SenderProfile({ mxEvent, onClick }: IProps) {
const roomContext = useContext(RoomContext);
const cli = useContext(MatrixClientContext);

render() {
const { mxEvent, onClick } = this.props;
const msgtype = mxEvent.getContent().msgtype;
if (mxEvent.getContent().msgtype === MsgType.Emote) {
return null;
}

let member = mxEvent.sender;
if (SettingsStore.getValue("useOnlyCurrentProfiles")) {
const room = MatrixClientPeg.get().getRoom(mxEvent.getRoomId());
if (room) {
member = room.getMember(mxEvent.getSender());
}
let member = mxEvent.sender;
if (SettingsStore.getValue("useOnlyCurrentProfiles")
|| roomContext.timelineRenderingType === TimelineRenderingType.ThreadsList
|| roomContext.timelineRenderingType === TimelineRenderingType.Thread
) {
const room = cli.getRoom(mxEvent.getRoomId());
if (room) {
member = room.getMember(mxEvent.getSender());
}

return <RoomContext.Consumer>
{ roomContext => {
if (msgtype === MsgType.Emote &&
roomContext.timelineRenderingType !== TimelineRenderingType.ThreadsList
) {
return null; // emote message must include the name so don't duplicate it
}

return (
<DisambiguatedProfile
fallbackName={mxEvent.getSender() || ""}
onClick={onClick}
member={member}
colored={true}
emphasizeDisplayName={true}
/>
);
} }
</RoomContext.Consumer>;
}

return <DisambiguatedProfile
fallbackName={mxEvent.getSender() ?? ""}
onClick={onClick}
member={member}
colored={true}
emphasizeDisplayName={true}
/>;
}
7 changes: 0 additions & 7 deletions src/components/views/rooms/EventTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1311,7 +1311,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
]);
}
case TimelineRenderingType.Thread: {
const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
return React.createElement(this.props.as || "li", {
"ref": this.ref,
"className": classes,
Expand All @@ -1325,12 +1324,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
"onMouseEnter": () => this.setState({ hover: true }),
"onMouseLeave": () => this.setState({ hover: false }),
}, [
<div className="mx_EventTile_roomName" key="mx_EventTile_roomName">
<RoomAvatar room={room} width={28} height={28} />
<a href={permalink} onClick={this.onPermalinkClicked}>
{ room ? room.name : '' }
</a>
</div>,
<div className="mx_EventTile_senderDetails" key="mx_EventTile_senderDetails">
{ avatar }
{ sender }
Expand Down
48 changes: 46 additions & 2 deletions test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,21 +184,65 @@ exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
Symbol(kCapture): false,
}
}
resizeMethod="crop"
viewUserOnClick={false}
width={36}
>
<BaseAvatar
height={36}
hideTitle={false}
idName="@alice:server"
member={
RoomMember {
"_events": Object {},
"_eventsCount": 0,
"_isOutOfBand": false,
"_maxListeners": undefined,
"disambiguate": false,
"events": Object {},
"membership": undefined,
"modified": 1647270879403,
"name": "@alice:server",
"powerLevel": 0,
"powerLevelNorm": 0,
"rawDisplayName": "@alice:server",
"requestedProfileInfo": false,
"roomId": "!room:server",
"typing": false,
"user": undefined,
"userId": "@alice:server",
Symbol(kCapture): false,
}
}
name="@alice:server"
resizeMethod="crop"
title="@alice:server"
url={null}
width={36}
>
<span
className="mx_BaseAvatar"
hideTitle={false}
member={
RoomMember {
"_events": Object {},
"_eventsCount": 0,
"_isOutOfBand": false,
"_maxListeners": undefined,
"disambiguate": false,
"events": Object {},
"membership": undefined,
"modified": 1647270879403,
"name": "@alice:server",
"powerLevel": 0,
"powerLevelNorm": 0,
"rawDisplayName": "@alice:server",
"requestedProfileInfo": false,
"roomId": "!room:server",
"typing": false,
"user": undefined,
"userId": "@alice:server",
Symbol(kCapture): false,
}
}
role="presentation"
>
<span
Expand Down
2 changes: 1 addition & 1 deletion test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,4 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
</span>"
`;

exports[`<TextualBody /> renders formatted m.text correctly pills get injected correctly into the DOM 1`] = `"<span class=\\"mx_EventTile_body markdown-body\\" dir=\\"auto\\">Hey <span><bdi><a class=\\"mx_Pill mx_UserPill\\"><img class=\\"mx_BaseAvatar mx_BaseAvatar_image\\" src=\\"mxc://avatar.url/image.png\\" style=\\"width: 16px; height: 16px;\\" alt=\\"\\" aria-hidden=\\"true\\"><span class=\\"mx_Pill_linkText\\">Member</span></a></bdi></span></span>"`;
exports[`<TextualBody /> renders formatted m.text correctly pills get injected correctly into the DOM 1`] = `"<span class=\\"mx_EventTile_body markdown-body\\" dir=\\"auto\\">Hey <span><bdi><a class=\\"mx_Pill mx_UserPill\\"><img class=\\"mx_BaseAvatar mx_BaseAvatar_image\\" src=\\"mxc://avatar.url/image.png\\" style=\\"width: 16px; height: 16px;\\" alt=\\"\\" member=\\"[object Object]\\" aria-hidden=\\"true\\"><span class=\\"mx_Pill_linkText\\">Member</span></a></bdi></span></span>"`;