sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Refactor room avatar event to MVVM (#33473)

Browse Source 
* Refactor room avatar event to MVVM

* Cover room avatar event factory wrapper

* Fix prettier

* added screenshots
This commit is contained in:
Zack
2026-05-12 08:17:33 +00:00
committed by GitHub
parent 2933b51fea
commit 67ea6bfa53
18 changed files with 628 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/views/messages/RoomAvatarEvent.tsx
-81
View File
@@ -1,81 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
Copyright 2019 The Matrix.org Foundation C.I.C.
Copyright 2017 Vector Creations Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { _t } from "../../../languageHandler";
import Modal from "../../../Modal";
import AccessibleButton from "../elements/AccessibleButton";
import { mediaFromMxc } from "../../../customisations/Media";
import RoomAvatar from "../avatars/RoomAvatar";
import ImageView from "../elements/ImageView";
interface IProps {
/* the MatrixEvent to show */
mxEvent: MatrixEvent;
}
export default class RoomAvatarEvent extends React.Component<IProps> {
private onAvatarClick = (): void => {
const cli = MatrixClientPeg.safeGet();
const ev = this.props.mxEvent;
const httpUrl = mediaFromMxc(ev.getContent().url).srcHttp;
if (!httpUrl) return;
const room = cli.getRoom(this.props.mxEvent.getRoomId());
const text = _t("timeline|m.room.avatar|lightbox_title", {
senderDisplayName: ev.sender && ev.sender.name ? ev.sender.name : ev.getSender(),
roomName: room ? room.name : "",
});
const params = {
src: httpUrl,
name: text,
};
Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", undefined, true);
};
public render(): React.ReactNode {
const ev = this.props.mxEvent;
const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
if (!ev.getContent().url || ev.getContent().url.trim().length === 0) {
return <div className="mx_TextualEvent">{_t("timeline|m.room.avatar|removed", { senderDisplayName })}</div>;
}
const room = MatrixClientPeg.safeGet().getRoom(ev.getRoomId());
// Provide all arguments to RoomAvatar via oobData because the avatar is historic
const oobData = {
avatarUrl: ev.getContent().url,
name: room ? room.name : "",
};
return (
<>
{_t(
"timeline|m.room.avatar|changed_img",
{ senderDisplayName: senderDisplayName },
{
img: () => (
<AccessibleButton
key="avatar"
className="mx_RoomAvatarEvent_avatar"
onClick={this.onAvatarClick}
>
<RoomAvatar room={room ?? undefined} size="14px" oobData={oobData} />
</AccessibleButton>
),
},
)}
</>
);
}
}
apps/web/src/events/EventTileFactory.tsx
+34 -2
View File
@@ -22,6 +22,7 @@ import {
EncryptionEventView,
HiddenBodyView,
MKeyVerificationRequestView,
RoomAvatarEventView,
TextualEventView,
useCreateAutoDisposedViewModel,
} from "@element-hq/web-shared-components";
@@ -34,7 +35,7 @@ import MessageEvent from "../components/views/messages/MessageEvent";
import LegacyCallEvent from "../components/views/messages/LegacyCallEvent";
import { CallEvent } from "../components/views/messages/CallEvent";
import { RoomPredecessorTile } from "../components/views/messages/RoomPredecessorTile";
import RoomAvatarEvent from "../components/views/messages/RoomAvatarEvent";
import RoomAvatar from "../components/views/avatars/RoomAvatar";
import { WIDGET_LAYOUT_EVENT_TYPE } from "../stores/widgets/WidgetLayoutStore";
import { ALL_RULE_TYPES } from "../mjolnir/BanList";
import { MatrixClientPeg } from "../MatrixClientPeg";
@@ -49,6 +50,7 @@ import { type IBodyProps } from "../components/views/messages/IBodyProps";
import { ModuleApi } from "../modules/Api";
import { EncryptionEventViewModel } from "../viewmodels/room/timeline/event-tile/EncryptionEventViewModel";
import { MKeyVerificationRequestViewModel } from "../viewmodels/room/timeline/event-tile/MKeyVerificationRequestViewModel";
import { RoomAvatarEventViewModel } from "../viewmodels/room/timeline/event-tile/RoomAvatarEventViewModel";
import { TextualEventViewModel } from "../viewmodels/room/timeline/event-tile/TextualEventViewModel";
import { HiddenBodyViewModel } from "../viewmodels/room/timeline/event-tile/body/HiddenBodyViewModel";
import { ElementCallEventType } from "../call-types";
@@ -124,6 +126,36 @@ function HiddenBodyWrappedView({ mxEvent, ref }: IBodyProps): JSX.Element {
}
const HiddenEventFactory: Factory = (ref, props) => <HiddenBodyWrappedView ref={ref} {...props} />;
function RoomAvatarEventWrappedView({ mxEvent, ref }: IBodyProps): JSX.Element {
const cli = useMatrixClientContext() ?? MatrixClientPeg.safeGet();
const vm = useCreateAutoDisposedViewModel(() => new RoomAvatarEventViewModel({ mxEvent, cli }));
useEffect(() => {
vm.setEvent(mxEvent);
}, [mxEvent, vm]);
const roomId = mxEvent.getRoomId();
const room = roomId ? cli.getRoom(roomId) : null;
return (
<RoomAvatarEventView
vm={vm}
ref={ref}
renderAvatar={(snapshot) => (
<RoomAvatar
room={room ?? undefined}
size="14px"
oobData={{
avatarUrl: snapshot.avatarUrl,
name: snapshot.roomName,
}}
/>
)}
/>
);
}
const RoomAvatarEventFactory: Factory = (ref, props) => <RoomAvatarEventWrappedView ref={ref} {...props} />;
function CallStartedTileViewWrapped({ mxEvent }: IBodyProps): JSX.Element {
const vm = useCreateAutoDisposedViewModel(() => new CallStartedTileViewModel({ mxEvent }));
return <CallStartedTileView vm={vm} />;
@@ -155,7 +187,7 @@ const STATE_EVENT_TILE_TYPES = new Map<string, Factory>([
[EventType.RoomCreate, RoomCreateEventFactory],
[EventType.RoomMember, TextualEventFactory],
[EventType.RoomName, TextualEventFactory],
[EventType.RoomAvatar, (ref, props) => <RoomAvatarEvent ref={ref} {...props} />],
[EventType.RoomAvatar, RoomAvatarEventFactory],
[EventType.RoomThirdPartyInvite, TextualEventFactory],
[EventType.RoomHistoryVisibility, TextualEventFactory],
[EventType.RoomTopic, TextualEventFactory],
apps/web/src/i18n/strings/en_EN.json
+1 -3
View File
@@ -3462,9 +3462,7 @@
"m.poll.start": "%(senderName)s has started a poll - %(pollQuestion)s",
"m.room.avatar": {
"changed": "%(senderDisplayName)s changed the room avatar.",
"changed_img": "%(senderDisplayName)s changed the room avatar to <img/>",
"lightbox_title": "%(senderDisplayName)s changed the avatar for %(roomName)s",
"removed": "%(senderDisplayName)s removed the room avatar."
"lightbox_title": "%(senderDisplayName)s changed the avatar for %(roomName)s"
},
"m.room.canonical_alias": {
"alt_added": {
apps/web/src/viewmodels/room/timeline/event-tile/RoomAvatarEventViewModel.ts
+109
View File
@@ -0,0 +1,109 @@
/*
* Copyright 2026 Element Creations Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
import { type MatrixClient, type MatrixEvent } from "matrix-js-sdk/src/matrix";
import { type RoomAvatarEventContent } from "matrix-js-sdk/src/types";
import {
BaseViewModel,
type RoomAvatarEventViewModel as RoomAvatarEventViewModelInterface,
type RoomAvatarEventViewSnapshot,
} from "@element-hq/web-shared-components";
import { mediaFromMxc } from "../../../../customisations/Media";
import { _t } from "../../../../languageHandler";
import Modal from "../../../../Modal";
import ImageView from "../../../../components/views/elements/ImageView";
export interface RoomAvatarEventViewModelProps {
/**
* Caller-provided client.
*/
cli: MatrixClient;
/**
* Room avatar state event.
*/
mxEvent: MatrixEvent;
}
/**
* ViewModel for room avatar state events.
*/
export class RoomAvatarEventViewModel
extends BaseViewModel<RoomAvatarEventViewSnapshot, RoomAvatarEventViewModelProps>
implements RoomAvatarEventViewModelInterface
{
public constructor(props: RoomAvatarEventViewModelProps) {
super(props, RoomAvatarEventViewModel.computeSnapshot(props));
}
public setEvent(mxEvent: MatrixEvent): void {
this.props = { ...this.props, mxEvent };
this.updateSnapshotFromProps();
}
public onAvatarClick = (): void => {
const avatarUrl = RoomAvatarEventViewModel.getAvatarUrl(this.props.mxEvent);
if (!avatarUrl) return;
const httpUrl = mediaFromMxc(avatarUrl, this.props.cli).srcHttp;
if (!httpUrl) return;
Modal.createDialog(
ImageView,
{
src: httpUrl,
name: RoomAvatarEventViewModel.computeLightboxLabel(this.props),
},
"mx_Dialog_lightbox",
undefined,
true,
);
};
private updateSnapshotFromProps(): void {
this.snapshot.merge(RoomAvatarEventViewModel.computeSnapshot(this.props));
}
private static computeSnapshot(props: RoomAvatarEventViewModelProps): RoomAvatarEventViewSnapshot {
const avatarUrl = RoomAvatarEventViewModel.getAvatarUrl(props.mxEvent);
const senderDisplayName = RoomAvatarEventViewModel.getSenderDisplayName(props.mxEvent);
const roomName = RoomAvatarEventViewModel.getRoomName(props);
return {
senderDisplayName,
roomName,
avatarUrl,
lightboxLabel: RoomAvatarEventViewModel.computeLightboxLabel(props),
isRemoved: !avatarUrl,
};
}
private static computeLightboxLabel(props: RoomAvatarEventViewModelProps): string {
return _t("timeline|m.room.avatar|lightbox_title", {
senderDisplayName: RoomAvatarEventViewModel.getSenderDisplayName(props.mxEvent),
roomName: RoomAvatarEventViewModel.getRoomName(props),
});
}
private static getSenderDisplayName(mxEvent: MatrixEvent): string {
return mxEvent.sender?.name || mxEvent.getSender() || "";
}
private static getRoomName({ cli, mxEvent }: RoomAvatarEventViewModelProps): string {
const roomId = mxEvent.getRoomId();
if (!roomId) return "";
return cli.getRoom(roomId)?.name ?? "";
}
private static getAvatarUrl(mxEvent: MatrixEvent): string | undefined {
const avatarUrl = mxEvent.getContent<RoomAvatarEventContent>().url;
if (!avatarUrl || avatarUrl.trim().length === 0) return undefined;
return avatarUrl;
}
}