b483fdda35
* Use new `CryptoEvent` import * Remove remaining old `CryptoEvent` import * Replace `import` by `import type`
1575 lines
65 KiB
TypeScript
1575 lines
65 KiB
TypeScript
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
Copyright 2015-2023 The Matrix.org Foundation C.I.C.
|
|
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
|
|
Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
import React, { createRef, forwardRef, JSX, MouseEvent, ReactNode } from "react";
|
|
import classNames from "classnames";
|
|
import {
|
|
EventStatus,
|
|
EventType,
|
|
MatrixEvent,
|
|
MatrixEventEvent,
|
|
MsgType,
|
|
NotificationCountType,
|
|
Relations,
|
|
RelationType,
|
|
Room,
|
|
RoomEvent,
|
|
RoomMember,
|
|
Thread,
|
|
ThreadEvent,
|
|
} from "matrix-js-sdk/src/matrix";
|
|
import { logger } from "matrix-js-sdk/src/logger";
|
|
import { CallErrorCode } from "matrix-js-sdk/src/webrtc/call";
|
|
import {
|
|
CryptoEvent,
|
|
EventShieldColour,
|
|
EventShieldReason,
|
|
UserVerificationStatus,
|
|
} from "matrix-js-sdk/src/crypto-api";
|
|
import { Tooltip } from "@vector-im/compound-web";
|
|
|
|
import ReplyChain from "../elements/ReplyChain";
|
|
import { _t } from "../../../languageHandler";
|
|
import dis from "../../../dispatcher/dispatcher";
|
|
import { Layout } from "../../../settings/enums/Layout";
|
|
import { formatTime } from "../../../DateUtils";
|
|
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
|
import { DecryptionFailureBody } from "../messages/DecryptionFailureBody";
|
|
import RoomAvatar from "../avatars/RoomAvatar";
|
|
import MessageContextMenu from "../context_menus/MessageContextMenu";
|
|
import { aboveRightOf } from "../../structures/ContextMenu";
|
|
import { objectHasDiff } from "../../../utils/objects";
|
|
import EditorStateTransfer from "../../../utils/EditorStateTransfer";
|
|
import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
|
|
import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
|
|
import NotificationBadge from "./NotificationBadge";
|
|
import LegacyCallEventGrouper from "../../structures/LegacyCallEventGrouper";
|
|
import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
|
|
import { Action } from "../../../dispatcher/actions";
|
|
import PlatformPeg from "../../../PlatformPeg";
|
|
import MemberAvatar from "../avatars/MemberAvatar";
|
|
import SenderProfile from "../messages/SenderProfile";
|
|
import MessageTimestamp from "../messages/MessageTimestamp";
|
|
import { IReadReceiptPosition } from "./ReadReceiptMarker";
|
|
import MessageActionBar from "../messages/MessageActionBar";
|
|
import ReactionsRow from "../messages/ReactionsRow";
|
|
import { getEventDisplayInfo } from "../../../utils/EventRenderingUtils";
|
|
import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore";
|
|
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
|
|
import { MediaEventHelper } from "../../../utils/MediaEventHelper";
|
|
import { ButtonEvent } from "../elements/AccessibleButton";
|
|
import { copyPlaintext, getSelectedText } from "../../../utils/strings";
|
|
import { DecryptionFailureTracker } from "../../../DecryptionFailureTracker";
|
|
import RedactedBody from "../messages/RedactedBody";
|
|
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
|
|
import { shouldDisplayReply } from "../../../utils/Reply";
|
|
import PosthogTrackers from "../../../PosthogTrackers";
|
|
import TileErrorBoundary from "../messages/TileErrorBoundary";
|
|
import { haveRendererForEvent, isMessageEvent, renderTile } from "../../../events/EventTileFactory";
|
|
import ThreadSummary, { ThreadMessagePreview } from "./ThreadSummary";
|
|
import { ReadReceiptGroup } from "./ReadReceiptGroup";
|
|
import { ShowThreadPayload } from "../../../dispatcher/payloads/ShowThreadPayload";
|
|
import { isLocalRoom } from "../../../utils/localRoom/isLocalRoom";
|
|
import { ElementCall } from "../../../models/Call";
|
|
import { UnreadNotificationBadge } from "./NotificationBadge/UnreadNotificationBadge";
|
|
import { EventTileThreadToolbar } from "./EventTile/EventTileThreadToolbar";
|
|
import { getLateEventInfo } from "../../structures/grouper/LateEventGrouper";
|
|
import PinningUtils from "../../../utils/PinningUtils";
|
|
import { PinnedMessageBadge } from "../messages/PinnedMessageBadge";
|
|
|
|
export type GetRelationsForEvent = (
|
|
eventId: string,
|
|
relationType: RelationType | string,
|
|
eventType: EventType | string,
|
|
) => Relations | null | undefined;
|
|
|
|
// Our component structure for EventTiles on the timeline is:
|
|
//
|
|
// .-EventTile------------------------------------------------.
|
|
// | MemberAvatar (SenderProfile) TimeStamp |
|
|
// | .-{Message,Textual}Event---------------. Read Avatars |
|
|
// | | .-MFooBody-------------------. | |
|
|
// | | | (only if MessageEvent) | | |
|
|
// | | '----------------------------' | |
|
|
// | '--------------------------------------' |
|
|
// '----------------------------------------------------------'
|
|
|
|
export interface IReadReceiptProps {
|
|
userId: string;
|
|
roomMember: RoomMember | null;
|
|
ts: number;
|
|
}
|
|
|
|
export interface IEventTileOps {
|
|
isWidgetHidden(): boolean;
|
|
unhideWidget(): void;
|
|
}
|
|
|
|
export interface IEventTileType extends React.Component {
|
|
getEventTileOps?(): IEventTileOps;
|
|
getMediaHelper(): MediaEventHelper | undefined;
|
|
}
|
|
|
|
export interface EventTileProps {
|
|
// the MatrixEvent to show
|
|
mxEvent: MatrixEvent;
|
|
|
|
// true if mxEvent is redacted. This is a prop because using mxEvent.isRedacted()
|
|
// might not be enough when deciding shouldComponentUpdate - prevProps.mxEvent
|
|
// references the same this.props.mxEvent.
|
|
isRedacted?: boolean;
|
|
|
|
// true if this is a continuation of the previous event (which has the
|
|
// effect of not showing another avatar/displayname
|
|
continuation?: boolean;
|
|
|
|
// true if this is the last event in the timeline (which has the effect
|
|
// of always showing the timestamp)
|
|
last?: boolean;
|
|
|
|
// true if the event is the last event in a section (adds a css class for
|
|
// targeting)
|
|
lastInSection?: boolean;
|
|
|
|
// True if the event is the last successful (sent) event.
|
|
lastSuccessful?: boolean;
|
|
|
|
// true if this is search context (which has the effect of greying out
|
|
// the text
|
|
contextual?: boolean;
|
|
|
|
// a list of words to highlight, ordered by longest first
|
|
highlights?: string[];
|
|
|
|
// link URL for the highlights
|
|
highlightLink?: string;
|
|
|
|
// should show URL previews for this event
|
|
showUrlPreview?: boolean;
|
|
|
|
// is this the focused event
|
|
isSelectedEvent?: boolean;
|
|
|
|
// callback called when dynamic content in events are loaded
|
|
onHeightChanged?: () => void;
|
|
|
|
// a list of read-receipts we should show. Each object has a 'roomMember' and 'ts'.
|
|
readReceipts?: IReadReceiptProps[];
|
|
|
|
// opaque readreceipt info for each userId; used by ReadReceiptMarker
|
|
// to manage its animations. Should be an empty object when the room
|
|
// first loads
|
|
readReceiptMap?: { [userId: string]: IReadReceiptPosition };
|
|
|
|
// A function which is used to check if the parent panel is being
|
|
// unmounted, to avoid unnecessary work. Should return true if we
|
|
// are being unmounted.
|
|
checkUnmounting?: () => boolean;
|
|
|
|
// the status of this event - ie, mxEvent.status. Denormalised to here so
|
|
// that we can tell when it changes.
|
|
eventSendStatus?: string;
|
|
|
|
forExport?: boolean;
|
|
|
|
// show twelve hour timestamps
|
|
isTwelveHour?: boolean;
|
|
|
|
// helper function to access relations for this event
|
|
getRelationsForEvent?: GetRelationsForEvent;
|
|
|
|
// whether to show reactions for this event
|
|
showReactions?: boolean;
|
|
|
|
// which layout to use
|
|
layout?: Layout;
|
|
|
|
// whether or not to show read receipts
|
|
showReadReceipts?: boolean;
|
|
|
|
// Used while editing, to pass the event, and to preserve editor state
|
|
// from one editor instance to another when remounting the editor
|
|
// upon receiving the remote echo for an unsent event.
|
|
editState?: EditorStateTransfer;
|
|
|
|
// Event ID of the event replacing the content of this event, if any
|
|
replacingEventId?: string;
|
|
|
|
// Helper to build permalinks for the room
|
|
permalinkCreator?: RoomPermalinkCreator;
|
|
|
|
// LegacyCallEventGrouper for this event
|
|
callEventGrouper?: LegacyCallEventGrouper;
|
|
|
|
// Symbol of the root node
|
|
as?: string;
|
|
|
|
// whether or not to always show timestamps
|
|
alwaysShowTimestamps?: boolean;
|
|
|
|
// whether or not to display the sender
|
|
hideSender?: boolean;
|
|
|
|
// whether or not to display thread info
|
|
showThreadInfo?: boolean;
|
|
|
|
// if specified and `true`, the message is being
|
|
// hidden for moderation from other users but is
|
|
// displayed to the current user either because they're
|
|
// the author or they are a moderator
|
|
isSeeingThroughMessageHiddenForModeration?: boolean;
|
|
|
|
// The following properties are used by EventTilePreview to disable tab indexes within the event tile
|
|
hideTimestamp?: boolean;
|
|
inhibitInteraction?: boolean;
|
|
}
|
|
|
|
interface IState {
|
|
// Whether the action bar is focused.
|
|
actionBarFocused: boolean;
|
|
|
|
/**
|
|
* E2EE shield we should show for decryption problems.
|
|
*
|
|
* Note this will be `EventShieldColour.NONE` for all unencrypted events, **including those in encrypted rooms**.
|
|
*/
|
|
shieldColour: EventShieldColour;
|
|
|
|
/**
|
|
* Reason code for the E2EE shield. `null` if `shieldColour` is `EventShieldColour.NONE`
|
|
*/
|
|
shieldReason: EventShieldReason | null;
|
|
|
|
// The Relations model from the JS SDK for reactions to `mxEvent`
|
|
reactions?: Relations | null | undefined;
|
|
|
|
hover: boolean;
|
|
|
|
// Position of the context menu
|
|
contextMenu?: {
|
|
position: Pick<DOMRect, "top" | "left" | "bottom">;
|
|
link?: string;
|
|
};
|
|
|
|
isQuoteExpanded?: boolean;
|
|
|
|
thread: Thread | null;
|
|
threadNotification?: NotificationCountType;
|
|
}
|
|
|
|
/**
|
|
* When true, the tile qualifies for some sort of special read receipt.
|
|
* This could be a 'sending' or 'sent' receipt, for example.
|
|
* @returns {boolean}
|
|
*/
|
|
export function isEligibleForSpecialReceipt(event: MatrixEvent): boolean {
|
|
// Determine if the type is relevant to the user.
|
|
// This notably excludes state events and pretty much anything that can't be sent by the composer as a message.
|
|
// For those we rely on local echo giving the impression of things changing, and expect them to be quick.
|
|
if (!isMessageEvent(event) && event.getType() !== EventType.RoomMessageEncrypted) return false;
|
|
|
|
// Default case
|
|
return true;
|
|
}
|
|
|
|
// MUST be rendered within a RoomContext with a set timelineRenderingType
|
|
export class UnwrappedEventTile extends React.Component<EventTileProps, IState> {
|
|
private suppressReadReceiptAnimation: boolean;
|
|
private isListeningForReceipts: boolean;
|
|
private tile = createRef<IEventTileType>();
|
|
private replyChain = createRef<ReplyChain>();
|
|
|
|
public readonly ref = createRef<HTMLElement>();
|
|
|
|
public static defaultProps = {
|
|
// no-op function because onHeightChanged is optional yet some sub-components assume its existence
|
|
onHeightChanged: function () {},
|
|
forExport: false,
|
|
layout: Layout.Group,
|
|
};
|
|
|
|
public static contextType = RoomContext;
|
|
public declare context: React.ContextType<typeof RoomContext>;
|
|
|
|
private unmounted = false;
|
|
|
|
public constructor(props: EventTileProps, context: React.ContextType<typeof RoomContext>) {
|
|
super(props, context);
|
|
|
|
const thread = this.thread;
|
|
|
|
this.state = {
|
|
// Whether the action bar is focused.
|
|
actionBarFocused: false,
|
|
|
|
shieldColour: EventShieldColour.NONE,
|
|
shieldReason: null,
|
|
|
|
// The Relations model from the JS SDK for reactions to `mxEvent`
|
|
reactions: this.getReactions(),
|
|
|
|
hover: false,
|
|
|
|
thread,
|
|
};
|
|
|
|
// don't do RR animations until we are mounted
|
|
this.suppressReadReceiptAnimation = true;
|
|
|
|
// Throughout the component we manage a read receipt listener to see if our tile still
|
|
// qualifies for a "sent" or "sending" state (based on their relevant conditions). We
|
|
// don't want to over-subscribe to the read receipt events being fired, so we use a flag
|
|
// to determine if we've already subscribed and use a combination of other flags to find
|
|
// out if we should even be subscribed at all.
|
|
this.isListeningForReceipts = false;
|
|
}
|
|
|
|
/**
|
|
* When true, the tile qualifies for some sort of special read receipt. This could be a 'sending'
|
|
* or 'sent' receipt, for example.
|
|
* @returns {boolean}
|
|
*/
|
|
private get isEligibleForSpecialReceipt(): boolean {
|
|
// First, if there are other read receipts then just short-circuit this.
|
|
if (this.props.readReceipts && this.props.readReceipts.length > 0) return false;
|
|
if (!this.props.mxEvent) return false;
|
|
|
|
// Sanity check (should never happen, but we shouldn't explode if it does)
|
|
const room = MatrixClientPeg.safeGet().getRoom(this.props.mxEvent.getRoomId());
|
|
if (!room) return false;
|
|
|
|
// Quickly check to see if the event was sent by us. If it wasn't, it won't qualify for
|
|
// special read receipts.
|
|
const myUserId = MatrixClientPeg.safeGet().getSafeUserId();
|
|
// Check to see if the event was sent by us. If it wasn't, it won't qualify for special read receipts.
|
|
if (this.props.mxEvent.getSender() !== myUserId) return false;
|
|
return isEligibleForSpecialReceipt(this.props.mxEvent);
|
|
}
|
|
|
|
private get shouldShowSentReceipt(): boolean {
|
|
// If we're not even eligible, don't show the receipt.
|
|
if (!this.isEligibleForSpecialReceipt) return false;
|
|
|
|
// We only show the 'sent' receipt on the last successful event.
|
|
if (!this.props.lastSuccessful) return false;
|
|
|
|
// Check to make sure the sending state is appropriate. A null/undefined send status means
|
|
// that the message is 'sent', so we're just double checking that it's explicitly not sent.
|
|
if (this.props.eventSendStatus && this.props.eventSendStatus !== EventStatus.SENT) return false;
|
|
|
|
// If anyone has read the event besides us, we don't want to show a sent receipt.
|
|
const receipts = this.props.readReceipts || [];
|
|
const myUserId = MatrixClientPeg.safeGet().getUserId();
|
|
if (receipts.some((r) => r.userId !== myUserId)) return false;
|
|
|
|
// Finally, we should show a receipt.
|
|
return true;
|
|
}
|
|
|
|
private get shouldShowSendingReceipt(): boolean {
|
|
// If we're not even eligible, don't show the receipt.
|
|
if (!this.isEligibleForSpecialReceipt) return false;
|
|
|
|
// Check the event send status to see if we are pending. Null/undefined status means the
|
|
// message was sent, so check for that and 'sent' explicitly.
|
|
if (!this.props.eventSendStatus || this.props.eventSendStatus === EventStatus.SENT) return false;
|
|
|
|
// Default to showing - there's no other event properties/behaviours we care about at
|
|
// this point.
|
|
return true;
|
|
}
|
|
|
|
public componentDidMount(): void {
|
|
this.suppressReadReceiptAnimation = false;
|
|
const client = MatrixClientPeg.safeGet();
|
|
if (!this.props.forExport) {
|
|
client.on(CryptoEvent.UserTrustStatusChanged, this.onUserVerificationChanged);
|
|
this.props.mxEvent.on(MatrixEventEvent.Decrypted, this.onDecrypted);
|
|
this.props.mxEvent.on(MatrixEventEvent.Replaced, this.onReplaced);
|
|
DecryptionFailureTracker.instance.addVisibleEvent(this.props.mxEvent);
|
|
if (this.props.showReactions) {
|
|
this.props.mxEvent.on(MatrixEventEvent.RelationsCreated, this.onReactionsCreated);
|
|
}
|
|
|
|
if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
|
|
client.on(RoomEvent.Receipt, this.onRoomReceipt);
|
|
this.isListeningForReceipts = true;
|
|
}
|
|
}
|
|
|
|
this.props.mxEvent.on(ThreadEvent.Update, this.updateThread);
|
|
|
|
client.decryptEventIfNeeded(this.props.mxEvent);
|
|
|
|
const room = client.getRoom(this.props.mxEvent.getRoomId());
|
|
room?.on(ThreadEvent.New, this.onNewThread);
|
|
|
|
this.verifyEvent();
|
|
}
|
|
|
|
private updateThread = (thread: Thread): void => {
|
|
this.setState({ thread });
|
|
};
|
|
|
|
public shouldComponentUpdate(nextProps: EventTileProps, nextState: IState): boolean {
|
|
if (objectHasDiff(this.state, nextState)) {
|
|
return true;
|
|
}
|
|
|
|
return !this.propsEqual(this.props, nextProps);
|
|
}
|
|
|
|
public componentWillUnmount(): void {
|
|
const client = MatrixClientPeg.get();
|
|
if (client) {
|
|
client.removeListener(CryptoEvent.UserTrustStatusChanged, this.onUserVerificationChanged);
|
|
client.removeListener(RoomEvent.Receipt, this.onRoomReceipt);
|
|
const room = client.getRoom(this.props.mxEvent.getRoomId());
|
|
room?.off(ThreadEvent.New, this.onNewThread);
|
|
}
|
|
this.isListeningForReceipts = false;
|
|
this.props.mxEvent.removeListener(MatrixEventEvent.Decrypted, this.onDecrypted);
|
|
this.props.mxEvent.removeListener(MatrixEventEvent.Replaced, this.onReplaced);
|
|
if (this.props.showReactions) {
|
|
this.props.mxEvent.removeListener(MatrixEventEvent.RelationsCreated, this.onReactionsCreated);
|
|
}
|
|
this.props.mxEvent.off(ThreadEvent.Update, this.updateThread);
|
|
this.unmounted = false;
|
|
}
|
|
|
|
public componentDidUpdate(prevProps: Readonly<EventTileProps>, prevState: Readonly<IState>): void {
|
|
// If the shield state changed, the height might have changed.
|
|
// XXX: does the shield *actually* cause a change in height? Not sure.
|
|
if (prevState.shieldColour !== this.state.shieldColour && this.props.onHeightChanged) {
|
|
this.props.onHeightChanged();
|
|
}
|
|
// If we're not listening for receipts and expect to be, register a listener.
|
|
if (!this.isListeningForReceipts && (this.shouldShowSentReceipt || this.shouldShowSendingReceipt)) {
|
|
MatrixClientPeg.safeGet().on(RoomEvent.Receipt, this.onRoomReceipt);
|
|
this.isListeningForReceipts = true;
|
|
}
|
|
// re-check the sender verification as outgoing events progress through the send process.
|
|
if (prevProps.eventSendStatus !== this.props.eventSendStatus) {
|
|
this.verifyEvent();
|
|
}
|
|
}
|
|
|
|
private onNewThread = (thread: Thread): void => {
|
|
if (thread.id === this.props.mxEvent.getId()) {
|
|
this.updateThread(thread);
|
|
const room = MatrixClientPeg.safeGet().getRoom(this.props.mxEvent.getRoomId());
|
|
room?.off(ThreadEvent.New, this.onNewThread);
|
|
}
|
|
};
|
|
|
|
private get thread(): Thread | null {
|
|
let thread: Thread | undefined = this.props.mxEvent.getThread();
|
|
/**
|
|
* Accessing the threads value through the room due to a race condition
|
|
* that will be solved when there are proper backend support for threads
|
|
* We currently have no reliable way to discover than an event is a thread
|
|
* when we are at the sync stage
|
|
*/
|
|
if (!thread) {
|
|
const room = MatrixClientPeg.safeGet().getRoom(this.props.mxEvent.getRoomId());
|
|
thread = room?.findThreadForEvent(this.props.mxEvent) ?? undefined;
|
|
}
|
|
return thread ?? null;
|
|
}
|
|
|
|
private renderThreadPanelSummary(): JSX.Element | null {
|
|
if (!this.state.thread) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="mx_ThreadPanel_replies">
|
|
<span className="mx_ThreadPanel_replies_amount">{this.state.thread.length}</span>
|
|
<ThreadMessagePreview thread={this.state.thread} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
private renderThreadInfo(): React.ReactNode {
|
|
if (this.state.thread && this.state.thread.id === this.props.mxEvent.getId()) {
|
|
return (
|
|
<ThreadSummary mxEvent={this.props.mxEvent} thread={this.state.thread} data-testid="thread-summary" />
|
|
);
|
|
}
|
|
|
|
if (this.context.timelineRenderingType === TimelineRenderingType.Search && this.props.mxEvent.threadRootId) {
|
|
if (this.props.highlightLink) {
|
|
return (
|
|
<a className="mx_ThreadSummary_icon" href={this.props.highlightLink}>
|
|
{_t("timeline|thread_info_basic")}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return <p className="mx_ThreadSummary_icon">{_t("timeline|thread_info_basic")}</p>;
|
|
}
|
|
}
|
|
|
|
private viewInRoom = (evt: ButtonEvent): void => {
|
|
evt.preventDefault();
|
|
evt.stopPropagation();
|
|
dis.dispatch<ViewRoomPayload>({
|
|
action: Action.ViewRoom,
|
|
event_id: this.props.mxEvent.getId(),
|
|
highlighted: true,
|
|
room_id: this.props.mxEvent.getRoomId(),
|
|
metricsTrigger: undefined, // room doesn't change
|
|
});
|
|
};
|
|
|
|
private copyLinkToThread = async (evt: ButtonEvent): Promise<void> => {
|
|
evt.preventDefault();
|
|
evt.stopPropagation();
|
|
const { permalinkCreator, mxEvent } = this.props;
|
|
if (!permalinkCreator) return;
|
|
const matrixToUrl = permalinkCreator.forEvent(mxEvent.getId()!);
|
|
await copyPlaintext(matrixToUrl);
|
|
};
|
|
|
|
private onRoomReceipt = (ev: MatrixEvent, room: Room): void => {
|
|
// ignore events for other rooms
|
|
const tileRoom = MatrixClientPeg.safeGet().getRoom(this.props.mxEvent.getRoomId());
|
|
if (room !== tileRoom) return;
|
|
|
|
if (!this.shouldShowSentReceipt && !this.shouldShowSendingReceipt && !this.isListeningForReceipts) {
|
|
return;
|
|
}
|
|
|
|
// We force update because we have no state or prop changes to queue up, instead relying on
|
|
// the getters we use here to determine what needs rendering.
|
|
this.forceUpdate(() => {
|
|
// Per elsewhere in this file, we can remove the listener once we will have no further purpose for it.
|
|
if (!this.shouldShowSentReceipt && !this.shouldShowSendingReceipt) {
|
|
MatrixClientPeg.safeGet().removeListener(RoomEvent.Receipt, this.onRoomReceipt);
|
|
this.isListeningForReceipts = false;
|
|
}
|
|
});
|
|
};
|
|
|
|
/** called when the event is decrypted after we show it.
|
|
*/
|
|
private onDecrypted = (): void => {
|
|
// we need to re-verify the sending device.
|
|
this.verifyEvent();
|
|
// decryption might, of course, trigger a height change, so call onHeightChanged after the re-render
|
|
this.forceUpdate(this.props.onHeightChanged);
|
|
};
|
|
|
|
private onUserVerificationChanged = (userId: string, _trustStatus: UserVerificationStatus): void => {
|
|
if (userId === this.props.mxEvent.getSender()) {
|
|
this.verifyEvent();
|
|
}
|
|
};
|
|
|
|
/** called when the event is edited after we show it. */
|
|
private onReplaced = (): void => {
|
|
// re-verify the event if it is replaced (the edit may not be verified)
|
|
this.verifyEvent();
|
|
};
|
|
|
|
private verifyEvent(): void {
|
|
this.doVerifyEvent().catch((e) => {
|
|
const event = this.props.mxEvent;
|
|
logger.error(`Error getting encryption info on event ${event.getId()} in room ${event.getRoomId()}`, e);
|
|
});
|
|
}
|
|
|
|
private async doVerifyEvent(): Promise<void> {
|
|
// if the event was edited, show the verification info for the edit, not
|
|
// the original
|
|
const mxEvent = this.props.mxEvent.replacingEvent() ?? this.props.mxEvent;
|
|
|
|
if (!mxEvent.isEncrypted() || mxEvent.isRedacted()) {
|
|
this.setState({ shieldColour: EventShieldColour.NONE, shieldReason: null });
|
|
return;
|
|
}
|
|
|
|
const encryptionInfo =
|
|
(await MatrixClientPeg.safeGet().getCrypto()?.getEncryptionInfoForEvent(mxEvent)) ?? null;
|
|
if (this.unmounted) return;
|
|
if (encryptionInfo === null) {
|
|
// likely a decryption error
|
|
this.setState({ shieldColour: EventShieldColour.NONE, shieldReason: null });
|
|
return;
|
|
}
|
|
|
|
this.setState({ shieldColour: encryptionInfo.shieldColour, shieldReason: encryptionInfo.shieldReason });
|
|
}
|
|
|
|
private propsEqual(objA: EventTileProps, objB: EventTileProps): boolean {
|
|
const keysA = Object.keys(objA) as Array<keyof EventTileProps>;
|
|
const keysB = Object.keys(objB) as Array<keyof EventTileProps>;
|
|
|
|
if (keysA.length !== keysB.length) {
|
|
return false;
|
|
}
|
|
|
|
for (let i = 0; i < keysA.length; i++) {
|
|
const key = keysA[i];
|
|
|
|
if (!objB.hasOwnProperty(key)) {
|
|
return false;
|
|
}
|
|
|
|
// need to deep-compare readReceipts
|
|
if (key === "readReceipts") {
|
|
const rA = objA[key];
|
|
const rB = objB[key];
|
|
if (rA === rB) {
|
|
continue;
|
|
}
|
|
|
|
if (!rA || !rB) {
|
|
return false;
|
|
}
|
|
|
|
if (rA.length !== rB.length) {
|
|
return false;
|
|
}
|
|
for (let j = 0; j < rA.length; j++) {
|
|
if (rA[j].userId !== rB[j].userId) {
|
|
return false;
|
|
}
|
|
// one has a member set and the other doesn't?
|
|
if (rA[j].roomMember !== rB[j].roomMember) {
|
|
return false;
|
|
}
|
|
}
|
|
} else {
|
|
if (objA[key] !== objB[key]) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* Determine whether an event should be highlighted
|
|
* For edited events, if a previous version of the event was highlighted
|
|
* the event should remain highlighted as the user may have been notified
|
|
* (Clearer explanation of why an event is highlighted is planned -
|
|
* https://github.com/vector-im/element-web/issues/24927)
|
|
* @returns boolean
|
|
*/
|
|
private shouldHighlight(): boolean {
|
|
if (this.props.forExport) return false;
|
|
if (this.context.timelineRenderingType === TimelineRenderingType.Notification) return false;
|
|
if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList) return false;
|
|
|
|
const cli = MatrixClientPeg.safeGet();
|
|
const actions = cli.getPushActionsForEvent(this.props.mxEvent.replacingEvent() || this.props.mxEvent);
|
|
// get the actions for the previous version of the event too if it is an edit
|
|
const previousActions = this.props.mxEvent.replacingEvent()
|
|
? cli.getPushActionsForEvent(this.props.mxEvent)
|
|
: undefined;
|
|
if (!actions?.tweaks && !previousActions?.tweaks) {
|
|
return false;
|
|
}
|
|
|
|
// don't show self-highlights from another of our clients
|
|
if (this.props.mxEvent.getSender() === cli.credentials.userId) {
|
|
return false;
|
|
}
|
|
|
|
return !!(actions?.tweaks.highlight || previousActions?.tweaks.highlight);
|
|
}
|
|
|
|
private onSenderProfileClick = (): void => {
|
|
dis.dispatch<ComposerInsertPayload>({
|
|
action: Action.ComposerInsert,
|
|
userId: this.props.mxEvent.getSender()!,
|
|
timelineRenderingType: this.context.timelineRenderingType,
|
|
});
|
|
};
|
|
|
|
private onPermalinkClicked = (e: MouseEvent): void => {
|
|
// This allows the permalink to be opened in a new tab/window or copied as
|
|
// matrix.to, but also for it to enable routing within Element when clicked.
|
|
e.preventDefault();
|
|
dis.dispatch<ViewRoomPayload>({
|
|
action: Action.ViewRoom,
|
|
event_id: this.props.mxEvent.getId(),
|
|
highlighted: true,
|
|
room_id: this.props.mxEvent.getRoomId(),
|
|
metricsTrigger:
|
|
this.context.timelineRenderingType === TimelineRenderingType.Search ? "MessageSearch" : undefined,
|
|
});
|
|
};
|
|
|
|
private renderE2EPadlock(): ReactNode {
|
|
// if the event was edited, show the verification info for the edit, not
|
|
// the original
|
|
const ev = this.props.mxEvent.replacingEvent() ?? this.props.mxEvent;
|
|
|
|
// no icon for local rooms
|
|
if (isLocalRoom(ev.getRoomId()!)) return null;
|
|
|
|
// event could not be decrypted
|
|
if (ev.isDecryptionFailure()) {
|
|
return <E2ePadlockDecryptionFailure />;
|
|
}
|
|
|
|
if (this.state.shieldColour !== EventShieldColour.NONE) {
|
|
let shieldReasonMessage: string;
|
|
switch (this.state.shieldReason) {
|
|
case null:
|
|
case EventShieldReason.UNKNOWN:
|
|
shieldReasonMessage = _t("error|unknown");
|
|
break;
|
|
|
|
case EventShieldReason.UNVERIFIED_IDENTITY:
|
|
shieldReasonMessage = _t("encryption|event_shield_reason_unverified_identity");
|
|
break;
|
|
|
|
case EventShieldReason.UNSIGNED_DEVICE:
|
|
shieldReasonMessage = _t("encryption|event_shield_reason_unsigned_device");
|
|
break;
|
|
|
|
case EventShieldReason.UNKNOWN_DEVICE:
|
|
shieldReasonMessage = _t("encryption|event_shield_reason_unknown_device");
|
|
break;
|
|
|
|
case EventShieldReason.AUTHENTICITY_NOT_GUARANTEED:
|
|
shieldReasonMessage = _t("encryption|event_shield_reason_authenticity_not_guaranteed");
|
|
break;
|
|
|
|
case EventShieldReason.MISMATCHED_SENDER_KEY:
|
|
shieldReasonMessage = _t("encryption|event_shield_reason_mismatched_sender_key");
|
|
break;
|
|
}
|
|
|
|
if (this.state.shieldColour === EventShieldColour.GREY) {
|
|
return <E2ePadlock icon={E2ePadlockIcon.Normal} title={shieldReasonMessage} />;
|
|
} else {
|
|
// red, by elimination
|
|
return <E2ePadlock icon={E2ePadlockIcon.Warning} title={shieldReasonMessage} />;
|
|
}
|
|
}
|
|
|
|
if (MatrixClientPeg.safeGet().isRoomEncrypted(ev.getRoomId()!)) {
|
|
// else if room is encrypted
|
|
// and event is being encrypted or is not_sent (Unknown Devices/Network Error)
|
|
if (ev.status === EventStatus.ENCRYPTING) {
|
|
return null;
|
|
}
|
|
if (ev.status === EventStatus.NOT_SENT) {
|
|
return null;
|
|
}
|
|
if (ev.isState()) {
|
|
return null; // we expect this to be unencrypted
|
|
}
|
|
if (ev.isRedacted()) {
|
|
return null; // we expect this to be unencrypted
|
|
}
|
|
if (!ev.isEncrypted()) {
|
|
// if the event is not encrypted, but it's an e2e room, show a warning
|
|
return <E2ePadlockUnencrypted />;
|
|
}
|
|
}
|
|
|
|
// no padlock needed
|
|
return null;
|
|
}
|
|
|
|
private onActionBarFocusChange = (actionBarFocused: boolean): void => {
|
|
this.setState({ actionBarFocused });
|
|
};
|
|
|
|
private getTile: () => IEventTileType | null = () => this.tile.current;
|
|
|
|
private getReplyChain = (): ReplyChain | null => this.replyChain.current;
|
|
|
|
private getReactions = (): Relations | null => {
|
|
if (!this.props.showReactions || !this.props.getRelationsForEvent) {
|
|
return null;
|
|
}
|
|
const eventId = this.props.mxEvent.getId()!;
|
|
return this.props.getRelationsForEvent(eventId, "m.annotation", "m.reaction") ?? null;
|
|
};
|
|
|
|
private onReactionsCreated = (relationType: string, eventType: string): void => {
|
|
if (relationType !== "m.annotation" || eventType !== "m.reaction") {
|
|
return;
|
|
}
|
|
this.setState({
|
|
reactions: this.getReactions(),
|
|
});
|
|
};
|
|
|
|
private onContextMenu = (ev: React.MouseEvent): void => {
|
|
this.showContextMenu(ev);
|
|
};
|
|
|
|
private onTimestampContextMenu = (ev: React.MouseEvent): void => {
|
|
this.showContextMenu(ev, this.props.permalinkCreator?.forEvent(this.props.mxEvent.getId()!));
|
|
};
|
|
|
|
private showContextMenu(ev: React.MouseEvent, permalink?: string): void {
|
|
const clickTarget = ev.target as HTMLElement;
|
|
|
|
// Try to find an anchor element
|
|
const anchorElement = clickTarget instanceof HTMLAnchorElement ? clickTarget : clickTarget.closest("a");
|
|
|
|
// There is no way to copy non-PNG images into clipboard, so we can't
|
|
// have our own handling for copying images, so we leave it to the
|
|
// Electron layer (webcontents-handler.ts)
|
|
if (clickTarget instanceof HTMLImageElement) return;
|
|
|
|
// Return if we're in a browser and click either an a tag or we have
|
|
// selected text, as in those cases we want to use the native browser
|
|
// menu
|
|
if (!PlatformPeg.get()?.allowOverridingNativeContextMenus() && (getSelectedText() || anchorElement)) return;
|
|
|
|
// We don't want to show the menu when editing a message
|
|
if (this.props.editState) return;
|
|
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
this.setState({
|
|
contextMenu: {
|
|
position: {
|
|
left: ev.clientX,
|
|
top: ev.clientY,
|
|
bottom: ev.clientY,
|
|
},
|
|
link: anchorElement?.href || permalink,
|
|
},
|
|
actionBarFocused: true,
|
|
});
|
|
}
|
|
|
|
private onCloseMenu = (): void => {
|
|
this.setState({
|
|
contextMenu: undefined,
|
|
actionBarFocused: false,
|
|
});
|
|
};
|
|
|
|
private setQuoteExpanded = (expanded: boolean): void => {
|
|
this.setState({
|
|
isQuoteExpanded: expanded,
|
|
});
|
|
};
|
|
|
|
/**
|
|
* In some cases we can't use shouldHideEvent() since whether or not we hide
|
|
* an event depends on other things that the event itself
|
|
* @returns {boolean} true if event should be hidden
|
|
*/
|
|
private shouldHideEvent(): boolean {
|
|
// If the call was replaced we don't render anything since we render the other call
|
|
if (this.props.callEventGrouper?.hangupReason === CallErrorCode.Replaced) return true;
|
|
|
|
return false;
|
|
}
|
|
|
|
private renderContextMenu(): ReactNode {
|
|
if (!this.state.contextMenu) return null;
|
|
|
|
const tile = this.getTile();
|
|
const replyChain = this.getReplyChain();
|
|
const eventTileOps = tile?.getEventTileOps ? tile.getEventTileOps() : undefined;
|
|
const collapseReplyChain = replyChain?.canCollapse() ? replyChain.collapse : undefined;
|
|
|
|
return (
|
|
<MessageContextMenu
|
|
{...aboveRightOf(this.state.contextMenu.position)}
|
|
mxEvent={this.props.mxEvent}
|
|
permalinkCreator={this.props.permalinkCreator}
|
|
eventTileOps={eventTileOps}
|
|
collapseReplyChain={collapseReplyChain}
|
|
onFinished={this.onCloseMenu}
|
|
rightClick={true}
|
|
reactions={this.state.reactions}
|
|
link={this.state.contextMenu.link}
|
|
getRelationsForEvent={this.props.getRelationsForEvent}
|
|
/>
|
|
);
|
|
}
|
|
|
|
public render(): ReactNode {
|
|
const msgtype = this.props.mxEvent.getContent().msgtype;
|
|
const eventType = this.props.mxEvent.getType();
|
|
const {
|
|
hasRenderer,
|
|
isBubbleMessage,
|
|
isInfoMessage,
|
|
isLeftAlignedBubbleMessage,
|
|
noBubbleEvent,
|
|
isSeeingThroughMessageHiddenForModeration,
|
|
} = getEventDisplayInfo(
|
|
MatrixClientPeg.safeGet(),
|
|
this.props.mxEvent,
|
|
this.context.showHiddenEvents,
|
|
this.shouldHideEvent(),
|
|
);
|
|
const { isQuoteExpanded } = this.state;
|
|
// This shouldn't happen: the caller should check we support this type
|
|
// before trying to instantiate us
|
|
if (!hasRenderer) {
|
|
const { mxEvent } = this.props;
|
|
logger.warn(`Event type not supported: type:${eventType} isState:${mxEvent.isState()}`);
|
|
return (
|
|
<div className="mx_EventTile mx_EventTile_info mx_MNoticeBody">
|
|
<div className="mx_EventTile_line">{_t("timeline|error_no_renderer")}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const isProbablyMedia = MediaEventHelper.isEligible(this.props.mxEvent);
|
|
|
|
const lineClasses = classNames("mx_EventTile_line", {
|
|
mx_EventTile_mediaLine: isProbablyMedia,
|
|
mx_EventTile_image:
|
|
this.props.mxEvent.getType() === EventType.RoomMessage &&
|
|
this.props.mxEvent.getContent().msgtype === MsgType.Image,
|
|
mx_EventTile_sticker: this.props.mxEvent.getType() === EventType.Sticker,
|
|
mx_EventTile_emote:
|
|
this.props.mxEvent.getType() === EventType.RoomMessage &&
|
|
this.props.mxEvent.getContent().msgtype === MsgType.Emote,
|
|
});
|
|
|
|
const isSending = ["sending", "queued", "encrypting"].includes(this.props.eventSendStatus!);
|
|
const isRedacted = isMessageEvent(this.props.mxEvent) && this.props.isRedacted;
|
|
const isEncryptionFailure = this.props.mxEvent.isDecryptionFailure();
|
|
|
|
let isContinuation = this.props.continuation;
|
|
if (
|
|
this.context.timelineRenderingType !== TimelineRenderingType.Room &&
|
|
this.context.timelineRenderingType !== TimelineRenderingType.Search &&
|
|
this.context.timelineRenderingType !== TimelineRenderingType.Thread &&
|
|
this.props.layout !== Layout.Bubble
|
|
) {
|
|
isContinuation = false;
|
|
}
|
|
|
|
const isRenderingNotification = this.context.timelineRenderingType === TimelineRenderingType.Notification;
|
|
|
|
const isEditing = !!this.props.editState;
|
|
const classes = classNames({
|
|
mx_EventTile_bubbleContainer: isBubbleMessage,
|
|
mx_EventTile_leftAlignedBubble: isLeftAlignedBubbleMessage,
|
|
mx_EventTile: true,
|
|
mx_EventTile_isEditing: isEditing,
|
|
mx_EventTile_info: isInfoMessage,
|
|
mx_EventTile_12hr: this.props.isTwelveHour,
|
|
// Note: we keep the `sending` state class for tests, not for our styles
|
|
mx_EventTile_sending: !isEditing && isSending,
|
|
mx_EventTile_highlight: this.shouldHighlight(),
|
|
mx_EventTile_selected: this.props.isSelectedEvent || this.state.contextMenu,
|
|
mx_EventTile_continuation:
|
|
isContinuation || eventType === EventType.CallInvite || ElementCall.CALL_EVENT_TYPE.matches(eventType),
|
|
mx_EventTile_last: this.props.last,
|
|
mx_EventTile_lastInSection: this.props.lastInSection,
|
|
mx_EventTile_contextual: this.props.contextual,
|
|
mx_EventTile_actionBarFocused: this.state.actionBarFocused,
|
|
mx_EventTile_bad: isEncryptionFailure,
|
|
mx_EventTile_emote: msgtype === MsgType.Emote,
|
|
mx_EventTile_noSender: this.props.hideSender,
|
|
mx_EventTile_clamp:
|
|
this.context.timelineRenderingType === TimelineRenderingType.ThreadsList || isRenderingNotification,
|
|
mx_EventTile_noBubble: noBubbleEvent,
|
|
});
|
|
|
|
// If the tile is in the Sending state, don't speak the message.
|
|
const ariaLive = this.props.eventSendStatus !== null ? "off" : undefined;
|
|
|
|
let permalink = "#";
|
|
if (this.props.permalinkCreator) {
|
|
permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId()!);
|
|
}
|
|
|
|
// we can't use local echoes as scroll tokens, because their event IDs change.
|
|
// Local echos have a send "status".
|
|
const scrollToken = this.props.mxEvent.status ? undefined : this.props.mxEvent.getId();
|
|
|
|
let avatar: JSX.Element | null = null;
|
|
let sender: JSX.Element | null = null;
|
|
let avatarSize: string | null;
|
|
let needsSenderProfile: boolean;
|
|
|
|
if (isRenderingNotification) {
|
|
avatarSize = "24px";
|
|
needsSenderProfile = true;
|
|
} else if (isInfoMessage) {
|
|
// a small avatar, with no sender profile, for
|
|
// joins/parts/etc
|
|
avatarSize = "14px";
|
|
needsSenderProfile = false;
|
|
} else if (
|
|
this.context.timelineRenderingType === TimelineRenderingType.ThreadsList ||
|
|
(this.context.timelineRenderingType === TimelineRenderingType.Thread && !this.props.continuation)
|
|
) {
|
|
avatarSize = "32px";
|
|
needsSenderProfile = true;
|
|
} else if (eventType === EventType.RoomCreate || isBubbleMessage) {
|
|
avatarSize = null;
|
|
needsSenderProfile = false;
|
|
} else if (this.props.layout == Layout.IRC) {
|
|
avatarSize = "14px";
|
|
needsSenderProfile = true;
|
|
} else if (
|
|
(this.props.continuation && this.context.timelineRenderingType !== TimelineRenderingType.File) ||
|
|
eventType === EventType.CallInvite ||
|
|
ElementCall.CALL_EVENT_TYPE.matches(eventType)
|
|
) {
|
|
// no avatar or sender profile for continuation messages and call tiles
|
|
avatarSize = null;
|
|
needsSenderProfile = false;
|
|
} else if (this.context.timelineRenderingType === TimelineRenderingType.File) {
|
|
avatarSize = "20px";
|
|
needsSenderProfile = true;
|
|
} else {
|
|
avatarSize = "30px";
|
|
needsSenderProfile = true;
|
|
}
|
|
|
|
if (this.props.mxEvent.sender && avatarSize !== null) {
|
|
let member: RoomMember | null = null;
|
|
// set member to receiver (target) if it is a 3PID invite
|
|
// so that the correct avatar is shown as the text is
|
|
// `$target accepted the invitation for $email`
|
|
if (this.props.mxEvent.getContent().third_party_invite) {
|
|
member = this.props.mxEvent.target;
|
|
} else {
|
|
member = this.props.mxEvent.sender;
|
|
}
|
|
// In the ThreadsList view we use the entire EventTile as a click target to open the thread instead
|
|
const viewUserOnClick =
|
|
!this.props.inhibitInteraction &&
|
|
![TimelineRenderingType.ThreadsList, TimelineRenderingType.Notification].includes(
|
|
this.context.timelineRenderingType,
|
|
);
|
|
avatar = (
|
|
<div className="mx_EventTile_avatar">
|
|
<MemberAvatar
|
|
member={member}
|
|
size={avatarSize}
|
|
viewUserOnClick={viewUserOnClick}
|
|
forceHistorical={this.props.mxEvent.getType() === EventType.RoomMember}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (needsSenderProfile && this.props.hideSender !== true) {
|
|
if (
|
|
this.context.timelineRenderingType === TimelineRenderingType.Room ||
|
|
this.context.timelineRenderingType === TimelineRenderingType.Search ||
|
|
this.context.timelineRenderingType === TimelineRenderingType.Pinned ||
|
|
this.context.timelineRenderingType === TimelineRenderingType.Thread
|
|
) {
|
|
sender = <SenderProfile onClick={this.onSenderProfileClick} mxEvent={this.props.mxEvent} />;
|
|
} else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList) {
|
|
sender = <SenderProfile mxEvent={this.props.mxEvent} withTooltip />;
|
|
} else {
|
|
sender = <SenderProfile mxEvent={this.props.mxEvent} />;
|
|
}
|
|
}
|
|
|
|
const showMessageActionBar = !isEditing && !this.props.forExport;
|
|
const actionBar = showMessageActionBar ? (
|
|
<MessageActionBar
|
|
mxEvent={this.props.mxEvent}
|
|
reactions={this.state.reactions}
|
|
permalinkCreator={this.props.permalinkCreator}
|
|
getTile={this.getTile}
|
|
getReplyChain={this.getReplyChain}
|
|
onFocusChange={this.onActionBarFocusChange}
|
|
isQuoteExpanded={isQuoteExpanded}
|
|
toggleThreadExpanded={() => this.setQuoteExpanded(!isQuoteExpanded)}
|
|
getRelationsForEvent={this.props.getRelationsForEvent}
|
|
/>
|
|
) : undefined;
|
|
|
|
const showTimestamp =
|
|
this.props.mxEvent.getTs() &&
|
|
!this.props.hideTimestamp &&
|
|
(this.props.alwaysShowTimestamps ||
|
|
this.props.last ||
|
|
this.state.hover ||
|
|
this.state.actionBarFocused ||
|
|
Boolean(this.state.contextMenu));
|
|
|
|
// Thread panel shows the timestamp of the last reply in that thread
|
|
let ts =
|
|
this.context.timelineRenderingType !== TimelineRenderingType.ThreadsList
|
|
? this.props.mxEvent.getTs()
|
|
: this.state.thread?.replyToEvent?.getTs();
|
|
if (typeof ts !== "number") {
|
|
// Fall back to something we can use
|
|
ts = this.props.mxEvent.getTs();
|
|
}
|
|
|
|
const messageTimestamp = (
|
|
<MessageTimestamp
|
|
showRelative={this.context.timelineRenderingType === TimelineRenderingType.ThreadsList}
|
|
showTwelveHour={this.props.isTwelveHour}
|
|
ts={ts}
|
|
receivedTs={getLateEventInfo(this.props.mxEvent)?.received_ts}
|
|
/>
|
|
);
|
|
|
|
const timestamp = showTimestamp && ts ? messageTimestamp : null;
|
|
|
|
let pinnedMessageBadge: JSX.Element | undefined;
|
|
if (PinningUtils.isPinned(MatrixClientPeg.safeGet(), this.props.mxEvent)) {
|
|
pinnedMessageBadge = <PinnedMessageBadge />;
|
|
}
|
|
|
|
let reactionsRow: JSX.Element | undefined;
|
|
if (!isRedacted) {
|
|
reactionsRow = (
|
|
<ReactionsRow
|
|
mxEvent={this.props.mxEvent}
|
|
reactions={this.state.reactions}
|
|
key="mx_EventTile_reactionsRow"
|
|
/>
|
|
);
|
|
}
|
|
|
|
// If we have reactions or a pinned message badge, we need a footer
|
|
const hasFooter = Boolean((reactionsRow && this.state.reactions) || pinnedMessageBadge);
|
|
|
|
const linkedTimestamp = !this.props.hideTimestamp ? (
|
|
<a
|
|
href={permalink}
|
|
onClick={this.onPermalinkClicked}
|
|
aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
|
|
onContextMenu={this.onTimestampContextMenu}
|
|
>
|
|
{timestamp}
|
|
</a>
|
|
) : null;
|
|
|
|
const useIRCLayout = this.props.layout === Layout.IRC;
|
|
const groupTimestamp = !useIRCLayout ? linkedTimestamp : null;
|
|
const ircTimestamp = useIRCLayout ? linkedTimestamp : null;
|
|
const bubbleTimestamp = this.props.layout === Layout.Bubble ? messageTimestamp : undefined;
|
|
const groupPadlock = !useIRCLayout && !isBubbleMessage && this.renderE2EPadlock();
|
|
const ircPadlock = useIRCLayout && !isBubbleMessage && this.renderE2EPadlock();
|
|
|
|
let msgOption: JSX.Element | undefined;
|
|
if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
|
|
msgOption = <SentReceipt messageState={this.props.mxEvent.getAssociatedStatus()} />;
|
|
} else if (this.props.showReadReceipts) {
|
|
msgOption = (
|
|
<ReadReceiptGroup
|
|
readReceipts={this.props.readReceipts ?? []}
|
|
readReceiptMap={this.props.readReceiptMap ?? {}}
|
|
checkUnmounting={this.props.checkUnmounting}
|
|
suppressAnimation={this.suppressReadReceiptAnimation}
|
|
isTwelveHour={this.props.isTwelveHour}
|
|
/>
|
|
);
|
|
}
|
|
|
|
let replyChain: JSX.Element | undefined;
|
|
if (
|
|
haveRendererForEvent(this.props.mxEvent, MatrixClientPeg.safeGet(), this.context.showHiddenEvents) &&
|
|
shouldDisplayReply(this.props.mxEvent)
|
|
) {
|
|
replyChain = (
|
|
<ReplyChain
|
|
parentEv={this.props.mxEvent}
|
|
onHeightChanged={this.props.onHeightChanged}
|
|
ref={this.replyChain}
|
|
forExport={this.props.forExport}
|
|
permalinkCreator={this.props.permalinkCreator}
|
|
layout={this.props.layout}
|
|
alwaysShowTimestamps={this.props.alwaysShowTimestamps || this.state.hover}
|
|
isQuoteExpanded={isQuoteExpanded}
|
|
setQuoteExpanded={this.setQuoteExpanded}
|
|
getRelationsForEvent={this.props.getRelationsForEvent}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// Use `getSender()` because searched events might not have a proper `sender`.
|
|
const isOwnEvent = this.props.mxEvent?.getSender() === MatrixClientPeg.safeGet().getUserId();
|
|
|
|
switch (this.context.timelineRenderingType) {
|
|
case TimelineRenderingType.Thread: {
|
|
return React.createElement(
|
|
this.props.as || "li",
|
|
{
|
|
"ref": this.ref,
|
|
"className": classes,
|
|
"aria-live": ariaLive,
|
|
"aria-atomic": true,
|
|
"data-scroll-tokens": scrollToken,
|
|
"data-has-reply": !!replyChain,
|
|
"data-layout": this.props.layout,
|
|
"data-self": isOwnEvent,
|
|
"data-event-id": this.props.mxEvent.getId(),
|
|
"onMouseEnter": () => this.setState({ hover: true }),
|
|
"onMouseLeave": () => this.setState({ hover: false }),
|
|
},
|
|
[
|
|
<div className="mx_EventTile_senderDetails" key="mx_EventTile_senderDetails">
|
|
{avatar}
|
|
{sender}
|
|
</div>,
|
|
<div className={lineClasses} key="mx_EventTile_line" onContextMenu={this.onContextMenu}>
|
|
{this.renderContextMenu()}
|
|
{replyChain}
|
|
{renderTile(
|
|
TimelineRenderingType.Thread,
|
|
{
|
|
...this.props,
|
|
|
|
// overrides
|
|
ref: this.tile,
|
|
isSeeingThroughMessageHiddenForModeration,
|
|
|
|
// appease TS
|
|
highlights: this.props.highlights,
|
|
highlightLink: this.props.highlightLink,
|
|
onHeightChanged: () => this.props.onHeightChanged,
|
|
permalinkCreator: this.props.permalinkCreator!,
|
|
},
|
|
this.context.showHiddenEvents,
|
|
)}
|
|
{actionBar}
|
|
<a href={permalink} onClick={this.onPermalinkClicked}>
|
|
{timestamp}
|
|
</a>
|
|
{msgOption}
|
|
</div>,
|
|
hasFooter && (
|
|
<div className="mx_EventTile_footer" key="mx_EventTile_footer">
|
|
{(this.props.layout === Layout.Group || !isOwnEvent) && pinnedMessageBadge}
|
|
{reactionsRow}
|
|
{this.props.layout === Layout.Bubble && isOwnEvent && pinnedMessageBadge}
|
|
</div>
|
|
),
|
|
],
|
|
);
|
|
}
|
|
case TimelineRenderingType.Notification:
|
|
case TimelineRenderingType.ThreadsList: {
|
|
const room = MatrixClientPeg.safeGet().getRoom(this.props.mxEvent.getRoomId());
|
|
// tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
|
|
return React.createElement(
|
|
this.props.as || "li",
|
|
{
|
|
"ref": this.ref,
|
|
"className": classes,
|
|
"tabIndex": -1,
|
|
"aria-live": ariaLive,
|
|
"aria-atomic": "true",
|
|
"data-scroll-tokens": scrollToken,
|
|
"data-layout": this.props.layout,
|
|
"data-shape": this.context.timelineRenderingType,
|
|
"data-self": isOwnEvent,
|
|
"data-has-reply": !!replyChain,
|
|
"onMouseEnter": () => this.setState({ hover: true }),
|
|
"onMouseLeave": () => this.setState({ hover: false }),
|
|
"onClick": (ev: MouseEvent) => {
|
|
const target = ev.currentTarget as HTMLElement;
|
|
let index = -1;
|
|
if (target.parentElement) index = Array.from(target.parentElement.children).indexOf(target);
|
|
switch (this.context.timelineRenderingType) {
|
|
case TimelineRenderingType.Notification:
|
|
this.viewInRoom(ev);
|
|
break;
|
|
case TimelineRenderingType.ThreadsList:
|
|
dis.dispatch<ShowThreadPayload>({
|
|
action: Action.ShowThread,
|
|
rootEvent: this.props.mxEvent,
|
|
push: true,
|
|
});
|
|
PosthogTrackers.trackInteraction("WebThreadsPanelThreadItem", ev, index ?? -1);
|
|
break;
|
|
}
|
|
},
|
|
},
|
|
<>
|
|
<div className="mx_EventTile_details">
|
|
{sender}
|
|
{isRenderingNotification && room ? (
|
|
<span className="mx_EventTile_truncated">
|
|
{" "}
|
|
{_t(
|
|
"timeline|in_room_name",
|
|
{ room: room.name },
|
|
{ strong: (sub) => <strong>{sub}</strong> },
|
|
)}
|
|
</span>
|
|
) : (
|
|
""
|
|
)}
|
|
{timestamp}
|
|
<UnreadNotificationBadge
|
|
room={room || undefined}
|
|
threadId={this.props.mxEvent.getId()}
|
|
forceDot={true}
|
|
/>
|
|
</div>
|
|
{isRenderingNotification && room ? (
|
|
<div className="mx_EventTile_avatar">
|
|
<RoomAvatar room={room} size="28px" />
|
|
</div>
|
|
) : (
|
|
avatar
|
|
)}
|
|
<div className={lineClasses} key="mx_EventTile_line">
|
|
<div className="mx_EventTile_body">
|
|
{this.props.mxEvent.isRedacted() ? (
|
|
<RedactedBody mxEvent={this.props.mxEvent} />
|
|
) : this.props.mxEvent.isDecryptionFailure() ? (
|
|
<DecryptionFailureBody mxEvent={this.props.mxEvent} />
|
|
) : (
|
|
MessagePreviewStore.instance.generatePreviewForEvent(this.props.mxEvent)
|
|
)}
|
|
</div>
|
|
{this.renderThreadPanelSummary()}
|
|
</div>
|
|
{this.context.timelineRenderingType === TimelineRenderingType.ThreadsList && (
|
|
<EventTileThreadToolbar
|
|
viewInRoom={this.viewInRoom}
|
|
copyLinkToThread={this.copyLinkToThread}
|
|
/>
|
|
)}
|
|
|
|
{msgOption}
|
|
</>,
|
|
);
|
|
}
|
|
case TimelineRenderingType.File: {
|
|
return React.createElement(
|
|
this.props.as || "li",
|
|
{
|
|
"className": classes,
|
|
"aria-live": ariaLive,
|
|
"aria-atomic": true,
|
|
"data-scroll-tokens": scrollToken,
|
|
},
|
|
[
|
|
<a
|
|
className="mx_EventTile_senderDetailsLink"
|
|
key="mx_EventTile_senderDetailsLink"
|
|
href={permalink}
|
|
onClick={this.onPermalinkClicked}
|
|
>
|
|
<div className="mx_EventTile_senderDetails" onContextMenu={this.onTimestampContextMenu}>
|
|
{avatar}
|
|
{sender}
|
|
{timestamp}
|
|
</div>
|
|
</a>,
|
|
<div className={lineClasses} key="mx_EventTile_line" onContextMenu={this.onContextMenu}>
|
|
{this.renderContextMenu()}
|
|
{renderTile(
|
|
TimelineRenderingType.File,
|
|
{
|
|
...this.props,
|
|
|
|
// overrides
|
|
ref: this.tile,
|
|
isSeeingThroughMessageHiddenForModeration,
|
|
|
|
// appease TS
|
|
highlights: this.props.highlights,
|
|
highlightLink: this.props.highlightLink,
|
|
onHeightChanged: this.props.onHeightChanged,
|
|
permalinkCreator: this.props.permalinkCreator,
|
|
},
|
|
this.context.showHiddenEvents,
|
|
)}
|
|
</div>,
|
|
],
|
|
);
|
|
}
|
|
|
|
default: {
|
|
// Pinned, Room, Search
|
|
// tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
|
|
return React.createElement(
|
|
this.props.as || "li",
|
|
{
|
|
"ref": this.ref,
|
|
"className": classes,
|
|
"tabIndex": -1,
|
|
"aria-live": ariaLive,
|
|
"aria-atomic": "true",
|
|
"data-scroll-tokens": scrollToken,
|
|
"data-layout": this.props.layout,
|
|
"data-self": isOwnEvent,
|
|
"data-event-id": this.props.mxEvent.getId(),
|
|
"data-has-reply": !!replyChain,
|
|
"onMouseEnter": () => this.setState({ hover: true }),
|
|
"onMouseLeave": () => this.setState({ hover: false }),
|
|
},
|
|
<>
|
|
{ircTimestamp}
|
|
{sender}
|
|
{ircPadlock}
|
|
{avatar}
|
|
<div className={lineClasses} key="mx_EventTile_line" onContextMenu={this.onContextMenu}>
|
|
{this.renderContextMenu()}
|
|
{groupTimestamp}
|
|
{groupPadlock}
|
|
{replyChain}
|
|
{renderTile(
|
|
this.context.timelineRenderingType,
|
|
{
|
|
...this.props,
|
|
|
|
// overrides
|
|
ref: this.tile,
|
|
isSeeingThroughMessageHiddenForModeration,
|
|
timestamp: bubbleTimestamp,
|
|
|
|
// appease TS
|
|
highlights: this.props.highlights,
|
|
highlightLink: this.props.highlightLink,
|
|
onHeightChanged: this.props.onHeightChanged,
|
|
permalinkCreator: this.props.permalinkCreator,
|
|
},
|
|
this.context.showHiddenEvents,
|
|
)}
|
|
{actionBar}
|
|
{this.props.layout === Layout.IRC && (
|
|
<>
|
|
{hasFooter && (
|
|
<div className="mx_EventTile_footer">
|
|
{pinnedMessageBadge}
|
|
{reactionsRow}
|
|
</div>
|
|
)}
|
|
{this.renderThreadInfo()}
|
|
</>
|
|
)}
|
|
</div>
|
|
{this.props.layout !== Layout.IRC && (
|
|
<>
|
|
{hasFooter && (
|
|
<div className="mx_EventTile_footer">
|
|
{(this.props.layout === Layout.Group || !isOwnEvent) && pinnedMessageBadge}
|
|
{reactionsRow}
|
|
{this.props.layout === Layout.Bubble && isOwnEvent && pinnedMessageBadge}
|
|
</div>
|
|
)}
|
|
{this.renderThreadInfo()}
|
|
</>
|
|
)}
|
|
{msgOption}
|
|
</>,
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Wrap all event tiles with the tile error boundary so that any throws even during construction are captured
|
|
const SafeEventTile = forwardRef<UnwrappedEventTile, EventTileProps>((props, ref) => {
|
|
return (
|
|
<>
|
|
<TileErrorBoundary mxEvent={props.mxEvent} layout={props.layout ?? Layout.Group}>
|
|
<UnwrappedEventTile ref={ref} {...props} />
|
|
</TileErrorBoundary>
|
|
</>
|
|
);
|
|
});
|
|
export default SafeEventTile;
|
|
|
|
function E2ePadlockUnencrypted(props: Omit<IE2ePadlockProps, "title" | "icon">): JSX.Element {
|
|
return <E2ePadlock title={_t("common|unencrypted")} icon={E2ePadlockIcon.Warning} {...props} />;
|
|
}
|
|
|
|
function E2ePadlockDecryptionFailure(props: Omit<IE2ePadlockProps, "title" | "icon">): JSX.Element {
|
|
return (
|
|
<E2ePadlock title={_t("timeline|undecryptable_tooltip")} icon={E2ePadlockIcon.DecryptionFailure} {...props} />
|
|
);
|
|
}
|
|
|
|
enum E2ePadlockIcon {
|
|
/** grey shield */
|
|
Normal = "normal",
|
|
|
|
/** red shield with (!) */
|
|
Warning = "warning",
|
|
|
|
/** key in grey circle */
|
|
DecryptionFailure = "decryption_failure",
|
|
}
|
|
|
|
interface IE2ePadlockProps {
|
|
icon: E2ePadlockIcon;
|
|
title: string;
|
|
}
|
|
|
|
class E2ePadlock extends React.Component<IE2ePadlockProps> {
|
|
public constructor(props: IE2ePadlockProps) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
hover: false,
|
|
};
|
|
}
|
|
|
|
public render(): ReactNode {
|
|
const classes = `mx_EventTile_e2eIcon mx_EventTile_e2eIcon_${this.props.icon}`;
|
|
// We specify isTriggerInteractive=true and make the div interactive manually as a workaround for
|
|
// https://github.com/element-hq/compound/issues/294
|
|
return (
|
|
<Tooltip label={this.props.title} isTriggerInteractive={true}>
|
|
<div className={classes} tabIndex={0} aria-label={_t("timeline|e2e_state")} />
|
|
</Tooltip>
|
|
);
|
|
}
|
|
}
|
|
|
|
interface ISentReceiptProps {
|
|
messageState: EventStatus | null;
|
|
}
|
|
|
|
function SentReceipt({ messageState }: ISentReceiptProps): JSX.Element {
|
|
const isSent = !messageState || messageState === "sent";
|
|
const isFailed = messageState === "not_sent";
|
|
const receiptClasses = classNames({
|
|
mx_EventTile_receiptSent: isSent,
|
|
mx_EventTile_receiptSending: !isSent && !isFailed,
|
|
});
|
|
|
|
let nonCssBadge: JSX.Element | undefined;
|
|
if (isFailed) {
|
|
nonCssBadge = <NotificationBadge notification={StaticNotificationState.RED_EXCLAMATION} />;
|
|
}
|
|
|
|
let label = _t("timeline|send_state_sending");
|
|
if (messageState === "encrypting") {
|
|
label = _t("timeline|send_state_encrypting");
|
|
} else if (isSent) {
|
|
label = _t("timeline|send_state_sent");
|
|
} else if (isFailed) {
|
|
label = _t("timeline|send_state_failed");
|
|
}
|
|
|
|
return (
|
|
<div className="mx_EventTile_msgOption">
|
|
<div className="mx_ReadReceiptGroup">
|
|
<Tooltip label={label} placement="top-end">
|
|
<div className="mx_ReadReceiptGroup_button" role="status">
|
|
<span className="mx_ReadReceiptGroup_container">
|
|
<span className={receiptClasses}>{nonCssBadge}</span>
|
|
</span>
|
|
</div>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|