Convert MessageEvent to TS and hoist MediaEventHelper

src/@types/common.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { JSXElementConstructor } from "react";
+import React, { JSXElementConstructor } from "react";
 
 // Based on https://stackoverflow.com/a/53229857/3532235
 export type Without<T, U> = {[P in Exclude<keyof T, keyof U>]?: never};
@@ -22,3 +22,4 @@ export type XOR<T, U> = (T | U) extends object ? (Without<T, U> & U) | (Without<
 export type Writeable<T> = { -readonly [P in keyof T]: T[P] };
 
 export type ComponentClass = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
+export type ReactAnyComponent = React.Component | React.ExoticComponent;

src/components/views/context_menus/MessageContextMenu.tsx

@@ -43,11 +43,15 @@ export function canCancel(eventStatus: EventStatus): boolean {
     return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
 }
 
-interface IEventTileOps {
+export interface IEventTileOps {
     isWidgetHidden(): boolean;
     unhideWidget(): void;
 }
 
+export interface IOperableEventTile {
+    getEventTileOps(): IEventTileOps;
+}
+
 interface IProps {
     /* the MatrixEvent associated with the context menu */
     mxEvent: MatrixEvent;

src/components/views/messages/MVideoBody.tsx

@@ -18,15 +18,12 @@ limitations under the License.
 import React from 'react';
 import { decode } from "blurhash";
 
-import MFileBody from './MFileBody';
-import { decryptFile } from '../../../utils/DecryptFile';
 import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import InlineSpinner from '../elements/InlineSpinner';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromContent } from "../../../customisations/Media";
 import { BLURHASH_FIELD } from "../../../ContentMessages";
-import { IMediaBody } from "./IMediaBody";
 import { MediaEventHelper } from "../../../utils/MediaEventHelper";
 import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
 import { MatrixEvent } from "matrix-js-sdk/src";
@@ -36,6 +33,7 @@ interface IProps {
     mxEvent: MatrixEvent;
     /* called when the video has loaded */
     onHeightChanged: () => void;
+    mediaEventHelper: MediaEventHelper;
 }
 
 interface IState {
@@ -49,9 +47,8 @@ interface IState {
 }
 
 @replaceableComponent("views.messages.MVideoBody")
-export default class MVideoBody extends React.PureComponent<IProps, IState> implements IMediaBody {
+export default class MVideoBody extends React.PureComponent<IProps, IState> {
     private videoRef = React.createRef<HTMLVideoElement>();
-    private mediaHelper: MediaEventHelper;
 
     constructor(props) {
         super(props);
@@ -65,8 +62,6 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> impl
             posterLoading: false,
             blurhashUrl: null,
         };
-
-        this.mediaHelper = new MediaEventHelper(this.props.mxEvent);
     }
 
     thumbScale(fullWidth: number, fullHeight: number, thumbWidth = 480, thumbHeight = 360) {
@@ -90,10 +85,6 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> impl
         }
     }
 
-    public getMediaHelper(): MediaEventHelper {
-        return this.mediaHelper;
-    }
-
     private getContentUrl(): string|null {
         const media = mediaFromContent(this.props.mxEvent.getContent());
         if (media.isEncrypted) {
@@ -166,15 +157,15 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> impl
         const autoplay = SettingsStore.getValue("autoplayGifsAndVideos") as boolean;
         this.loadBlurhash();
 
-        if (this.mediaHelper.media.isEncrypted && this.state.decryptedUrl === null) {
+        if (this.props.mediaEventHelper.media.isEncrypted && this.state.decryptedUrl === null) {
             try {
-                const thumbnailUrl = await this.mediaHelper.thumbnailUrl.value;
+                const thumbnailUrl = await this.props.mediaEventHelper.thumbnailUrl.value;
                 if (autoplay) {
                     console.log("Preloading video");
                     this.setState({
-                        decryptedUrl: await this.mediaHelper.sourceUrl.value,
+                        decryptedUrl: await this.props.mediaEventHelper.sourceUrl.value,
                         decryptedThumbnailUrl: thumbnailUrl,
-                        decryptedBlob: await this.mediaHelper.sourceBlob.value,
+                        decryptedBlob: await this.props.mediaEventHelper.sourceBlob.value,
                     });
                     this.props.onHeightChanged();
                 } else {
@@ -199,16 +190,6 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> impl
         }
     }
 
-    componentWillUnmount() {
-        if (this.state.decryptedUrl) {
-            URL.revokeObjectURL(this.state.decryptedUrl);
-        }
-        if (this.state.decryptedThumbnailUrl) {
-            URL.revokeObjectURL(this.state.decryptedThumbnailUrl);
-        }
-        this.mediaHelper.destroy();
-    }
-
     private videoOnPlay = async () => {
         if (this.hasContentUrl() || this.state.fetchingData || this.state.error) {
             // We have the file, we are fetching the file, or there is an error.
@@ -218,15 +199,15 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> impl
             // To stop subsequent download attempts
             fetchingData: true,
         });
-        if (!this.mediaHelper.media.isEncrypted) {
+        if (!this.props.mediaEventHelper.media.isEncrypted) {
             this.setState({
                 error: "No file given in content",
             });
             return;
         }
         this.setState({
-            decryptedUrl: await this.mediaHelper.sourceUrl.value,
+            decryptedUrl: await this.props.mediaEventHelper.sourceUrl.value,
-            decryptedBlob: await this.mediaHelper.sourceBlob.value,
+            decryptedBlob: await this.props.mediaEventHelper.sourceBlob.value,
             fetchingData: false,
         }, () => {
             if (!this.videoRef.current) return;

src/components/views/messages/MessageEvent.js

@@ -1,146 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-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 PropTypes from 'prop-types';
-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";
-
-@replaceableComponent("views.messages.MessageEvent")
-export default class MessageEvent extends React.Component {
-    static propTypes = {
-        /* the MatrixEvent to show */
-        mxEvent: PropTypes.object.isRequired,
-
-        /* a list of words to highlight */
-        highlights: PropTypes.array,
-
-        /* link URL for the highlights */
-        highlightLink: PropTypes.string,
-
-        /* should show URL previews for this event */
-        showUrlPreview: PropTypes.bool,
-
-        /* callback called when dynamic content in events are loaded */
-        onHeightChanged: PropTypes.func,
-
-        /* the shape of the tile, used */
-        tileShape: PropTypes.string, // TODO: Use TileShape enum
-
-        /* the maximum image height to use, if the event is an image */
-        maxImageHeight: PropTypes.number,
-
-        /* overrides for the msgtype-specific components, used by ReplyTile to override file rendering */
-        overrideBodyTypes: PropTypes.object,
-        overrideEventTypes: PropTypes.object,
-
-        /* the permalinkCreator */
-        permalinkCreator: PropTypes.object,
-    };
-
-    constructor(props) {
-        super(props);
-
-        this._body = createRef();
-    }
-
-    getEventTileOps = () => {
-        return this._body.current && this._body.current.getEventTileOps ? this._body.current.getEventTileOps() : null;
-    };
-
-    onTileUpdate = () => {
-        this.forceUpdate();
-    };
-
-    getMediaHelper() {
-        if (!this._body.current || !this._body.current.getMediaHelper) {
-            return null;
-        }
-        return this._body.current.getMediaHelper();
-    }
-
-    render() {
-        const bodyTypes = {
-            'm.text': sdk.getComponent('messages.TextualBody'),
-            'm.notice': sdk.getComponent('messages.TextualBody'),
-            'm.emote': sdk.getComponent('messages.TextualBody'),
-            'm.image': sdk.getComponent('messages.MImageBody'),
-            'm.file': sdk.getComponent('messages.MFileBody'),
-            'm.audio': sdk.getComponent('messages.MVoiceOrAudioBody'),
-            'm.video': sdk.getComponent('messages.MVideoBody'),
-
-            ...(this.props.overrideBodyTypes || {}),
-        };
-        const evTypes = {
-            'm.sticker': sdk.getComponent('messages.MStickerBody'),
-            ...(this.props.overrideEventTypes || {}),
-        };
-
-        const content = this.props.mxEvent.getContent();
-        const type = this.props.mxEvent.getType();
-        const msgtype = content.msgtype;
-        let BodyType = RedactedBody;
-        if (!this.props.mxEvent.isRedacted()) {
-            // only resolve BodyType if event is not redacted
-            if (type && evTypes[type]) {
-                BodyType = evTypes[type];
-            } else if (msgtype && bodyTypes[msgtype]) {
-                BodyType = bodyTypes[msgtype];
-            } else if (content.url) {
-                // Fallback to MFileBody if there's a content URL
-                BodyType = bodyTypes['m.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');
-                }
-            }
-        }
-
-        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}
-        /> : null;
-    }
-}

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;
+    }
+}

src/utils/MediaEventHelper.ts

@@ -20,6 +20,7 @@ import { Media, mediaFromContent } from "../customisations/Media";
 import { decryptFile } from "./DecryptFile";
 import { IMediaEventContent } from "../customisations/models/IMediaEventContent";
 import { IDestroyable } from "./IDestroyable";
+import { EventType, MsgType } from "matrix-js-sdk/src/@types/event";
 
 // TODO: We should consider caching the blobs. https://github.com/vector-im/element-web/issues/17192
 
@@ -87,4 +88,24 @@ export class MediaEventHelper implements IDestroyable {
 
         return fetch(this.media.thumbnailHttp).then(r => r.blob());
     };
+
+    public static isEligible(event: MatrixEvent): boolean {
+        if (!event) return false;
+        if (event.isRedacted()) return false;
+        if (event.getType() === EventType.Sticker) return true;
+        if (event.getType() !== EventType.RoomMessage) return false;
+
+        const content = event.getContent();
+        const mediaMsgTypes: string[] = [
+            MsgType.Video,
+            MsgType.Audio,
+            MsgType.Image,
+            MsgType.File,
+        ];
+        if (mediaMsgTypes.includes(content.msgtype)) return true;
+        if (typeof(content.url) === 'string') return true;
+
+        // Finally, it's probably not media
+        return false;
+    }
 }