Convert MessageEvent to TS and hoist MediaEventHelper

src/components/views/messages/MessageEvent.tsx

@@ -0,0 +1,176 @@
+/*
+Copyright 2015 - 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { createRef } from 'react';
+import * as sdk from '../../../index';
+import SettingsStore from "../../../settings/SettingsStore";
+import { Mjolnir } from "../../../mjolnir/Mjolnir";
+import RedactedBody from "./RedactedBody";
+import UnknownBody from "./UnknownBody";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { IMediaBody } from "./IMediaBody";
+import { MatrixEvent } from "matrix-js-sdk/src";
+import { TileShape } from "../rooms/EventTile";
+import PermalinkConstructor from "../../../utils/permalinks/PermalinkConstructor";
+import { IOperableEventTile } from "../context_menus/MessageContextMenu";
+import { MediaEventHelper } from "../../../utils/MediaEventHelper";
+import { ReactAnyComponent } from "../../../@types/common";
+import { EventType, MsgType } from "matrix-js-sdk/src/@types/event";
+
+interface IProps {
+    /* the MatrixEvent to show */
+    mxEvent: MatrixEvent;
+
+    /* a list of words to highlight */
+    highlights: string[];
+
+    /* link URL for the highlights */
+    highlightLink: string;
+
+    /* should show URL previews for this event */
+    showUrlPreview: boolean;
+
+    /* callback called when dynamic content in events are loaded */
+    onHeightChanged: () => void;
+
+    /* the shape of the tile, used */
+    tileShape: TileShape;
+
+    /* the maximum image height to use, if the event is an image */
+    maxImageHeight?: number;
+
+    /* overrides for the msgtype-specific components, used by ReplyTile to override file rendering */
+    overrideBodyTypes?: Record<string, React.Component>;
+    overrideEventTypes?: Record<string, React.Component>;
+
+    /* the permalinkCreator */
+    permalinkCreator: PermalinkConstructor;
+
+    replacingEventId?: string;
+    editState?: unknown;
+}
+
+@replaceableComponent("views.messages.MessageEvent")
+export default class MessageEvent extends React.Component<IProps> implements IMediaBody, IOperableEventTile {
+    private body: React.RefObject<React.Component | IOperableEventTile> = createRef();
+    private mediaHelper: MediaEventHelper;
+
+    public constructor(props: IProps) {
+        super(props);
+
+        if (MediaEventHelper.isEligible(this.props.mxEvent)) {
+            this.mediaHelper = new MediaEventHelper(this.props.mxEvent);
+        }
+    }
+
+    public componentWillUnmount() {
+        this.mediaHelper?.destroy();
+    }
+
+    public componentDidUpdate(prevProps: Readonly<IProps>) {
+        if (this.props.mxEvent !== prevProps.mxEvent && MediaEventHelper.isEligible(this.props.mxEvent)) {
+            this.mediaHelper?.destroy();
+            this.mediaHelper = new MediaEventHelper(this.props.mxEvent);
+        }
+    }
+
+    private get bodyTypes(): Record<string, React.Component> {
+        return {
+            [MsgType.Text]: sdk.getComponent('messages.TextualBody'),
+            [MsgType.Notice]: sdk.getComponent('messages.TextualBody'),
+            [MsgType.Emote]: sdk.getComponent('messages.TextualBody'),
+            [MsgType.Image]: sdk.getComponent('messages.MImageBody'),
+            [MsgType.File]: sdk.getComponent('messages.MFileBody'),
+            [MsgType.Audio]: sdk.getComponent('messages.MVoiceOrAudioBody'),
+            [MsgType.Video]: sdk.getComponent('messages.MVideoBody'),
+
+            ...(this.props.overrideBodyTypes || {}),
+        };
+    }
+
+    private get evTypes(): Record<string, React.Component> {
+        return {
+            [EventType.Sticker]: sdk.getComponent('messages.MStickerBody'),
+
+            ...(this.props.overrideEventTypes || {}),
+        };
+    }
+
+    public getEventTileOps = () => {
+        return (this.body.current as IOperableEventTile)?.getEventTileOps?.() || null;
+    };
+
+    public getMediaHelper() {
+        return this.mediaHelper;
+    }
+
+    private onTileUpdate = () => {
+        this.forceUpdate();
+    };
+
+    public render() {
+        const content = this.props.mxEvent.getContent();
+        const type = this.props.mxEvent.getType();
+        const msgtype = content.msgtype;
+        let BodyType: ReactAnyComponent = RedactedBody;
+        if (!this.props.mxEvent.isRedacted()) {
+            // only resolve BodyType if event is not redacted
+            if (type && this.evTypes[type]) {
+                BodyType = this.evTypes[type];
+            } else if (msgtype && this.bodyTypes[msgtype]) {
+                BodyType = this.bodyTypes[msgtype];
+            } else if (content.url) {
+                // Fallback to MFileBody if there's a content URL
+                BodyType = this.bodyTypes[MsgType.File];
+            } else {
+                // Fallback to UnknownBody otherwise if not redacted
+                BodyType = UnknownBody;
+            }
+        }
+
+        if (SettingsStore.getValue("feature_mjolnir")) {
+            const key = `mx_mjolnir_render_${this.props.mxEvent.getRoomId()}__${this.props.mxEvent.getId()}`;
+            const allowRender = localStorage.getItem(key) === "true";
+
+            if (!allowRender) {
+                const userDomain = this.props.mxEvent.getSender().split(':').slice(1).join(':');
+                const userBanned = Mjolnir.sharedInstance().isUserBanned(this.props.mxEvent.getSender());
+                const serverBanned = Mjolnir.sharedInstance().isServerBanned(userDomain);
+
+                if (userBanned || serverBanned) {
+                    BodyType = sdk.getComponent('messages.MjolnirBody');
+                }
+            }
+        }
+
+        // @ts-ignore - this is a dynamic react component
+        return BodyType ? <BodyType
+            ref={this.body}
+            mxEvent={this.props.mxEvent}
+            highlights={this.props.highlights}
+            highlightLink={this.props.highlightLink}
+            showUrlPreview={this.props.showUrlPreview}
+            tileShape={this.props.tileShape}
+            maxImageHeight={this.props.maxImageHeight}
+            replacingEventId={this.props.replacingEventId}
+            editState={this.props.editState}
+            onHeightChanged={this.props.onHeightChanged}
+            onMessageAllowed={this.onTileUpdate}
+            permalinkCreator={this.props.permalinkCreator}
+            mediaEventHelper={this.mediaHelper}
+        /> : null;
+    }
+}