Add new thread message preview (#18958) (#6953)

Closes https://github.com/vector-im/element-web/issues/18958
This commit is contained in:
Dariusz Niemczyk 2021-10-15 15:29:17 +02:00 committed by GitHub
parent 9c753765d5
commit f8c516d927
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 83 additions and 16 deletions

View file

@ -59,6 +59,7 @@ import { getEventDisplayInfo } from '../../../utils/EventUtils';
import SettingsStore from "../../../settings/SettingsStore";
import MKeyVerificationConclusion from "../messages/MKeyVerificationConclusion";
import { dispatchShowThreadEvent } from '../../../dispatcher/dispatch-actions/threads';
import { MessagePreviewStore } from '../../../stores/room-list/MessagePreviewStore';
const eventTileTypes = {
[EventType.RoomMessage]: 'messages.MessageEvent',
@ -532,15 +533,13 @@ export default class EventTile extends React.Component<IProps, IState> {
}
const thread = this.state.thread;
const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
if (!thread || this.props.showThreadInfo === false || thread.length <= 1) {
return null;
}
const avatars = Array.from(thread.participants).map((mxId: string) => {
const member = room.getMember(mxId);
return <MemberAvatar key={member.userId} member={member} width={14} height={14} />;
});
const threadMessagePreview = MessagePreviewStore.instance.generateThreadPreview(this.state.thread);
if (!threadMessagePreview) return null;
return (
<div
@ -549,10 +548,18 @@ export default class EventTile extends React.Component<IProps, IState> {
dispatchShowThreadEvent(this.props.mxEvent);
}}
>
<span className="mx_EventListSummary_avatars">
{ avatars }
<span className="mx_ThreadInfo_thread-icon" />
<span className="mx_ThreadInfo_threads-amount">
{ _t("%(count)s reply", {
count: thread.length - 1,
}) }
</span>
{ thread.length - 1 } { thread.length === 2 ? 'reply' : 'replies' }
<MemberAvatar member={thread.replyToEvent.sender} width={24} height={24} />
<div className="mx_ThreadInfo_content">
<span className="mx_ThreadInfo_message-preview">
{ threadMessagePreview }
</span>
</div>
</div>
);
}