From 703cf7375912898597ec42a92ca85833c242e79a Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 15 Jul 2021 14:19:07 -0600 Subject: [PATCH] Convert MessageEvent to TS and hoist MediaEventHelper --- src/@types/common.ts | 3 +- .../context_menus/MessageContextMenu.tsx | 6 +- src/components/views/messages/MVideoBody.tsx | 37 +--- src/components/views/messages/MessageEvent.js | 146 --------------- .../views/messages/MessageEvent.tsx | 176 ++++++++++++++++++ src/utils/MediaEventHelper.ts | 21 +++ 6 files changed, 213 insertions(+), 176 deletions(-) delete mode 100644 src/components/views/messages/MessageEvent.js create mode 100644 src/components/views/messages/MessageEvent.tsx diff --git a/src/@types/common.ts b/src/@types/common.ts index 1fb9ba4303..36ef7a9ace 100644 --- a/src/@types/common.ts +++ b/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 = {[P in Exclude]?: never}; @@ -22,3 +22,4 @@ export type XOR = (T | U) extends object ? (Without & U) | (Without< export type Writeable = { -readonly [P in keyof T]: T[P] }; export type ComponentClass = keyof JSX.IntrinsicElements | JSXElementConstructor; +export type ReactAnyComponent = React.Component | React.ExoticComponent; diff --git a/src/components/views/context_menus/MessageContextMenu.tsx b/src/components/views/context_menus/MessageContextMenu.tsx index 999e98f4ad..7092be43e9 100644 --- a/src/components/views/context_menus/MessageContextMenu.tsx +++ b/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; diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx index bb58a13c4d..2b873f6506 100644 --- a/src/components/views/messages/MVideoBody.tsx +++ b/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 implements IMediaBody { +export default class MVideoBody extends React.PureComponent { private videoRef = React.createRef(); - private mediaHelper: MediaEventHelper; constructor(props) { super(props); @@ -65,8 +62,6 @@ export default class MVideoBody extends React.PureComponent 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 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 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 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 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, - decryptedBlob: await this.mediaHelper.sourceBlob.value, + decryptedUrl: await this.props.mediaEventHelper.sourceUrl.value, + decryptedBlob: await this.props.mediaEventHelper.sourceBlob.value, fetchingData: false, }, () => { if (!this.videoRef.current) return; diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js deleted file mode 100644 index 49b50b610c..0000000000 --- a/src/components/views/messages/MessageEvent.js +++ /dev/null @@ -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 ? : null; - } -} diff --git a/src/components/views/messages/MessageEvent.tsx b/src/components/views/messages/MessageEvent.tsx new file mode 100644 index 0000000000..3c59e68c8b --- /dev/null +++ b/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; + overrideEventTypes?: Record; + + /* the permalinkCreator */ + permalinkCreator: PermalinkConstructor; + + replacingEventId?: string; + editState?: unknown; +} + +@replaceableComponent("views.messages.MessageEvent") +export default class MessageEvent extends React.Component implements IMediaBody, IOperableEventTile { + private body: React.RefObject = 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) { + 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 { + 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 { + 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 ? : null; + } +} diff --git a/src/utils/MediaEventHelper.ts b/src/utils/MediaEventHelper.ts index 316ee54edf..b4deb1a8ce 100644 --- a/src/utils/MediaEventHelper.ts +++ b/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; + } }