From 0a99f76e7fc91be25a379a47f2217b2ae8f9fa4c Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 14 Jul 2021 20:51:20 -0600 Subject: [PATCH 01/16] Simple POC for moving download button to action bar --- src/components/views/messages/IMediaBody.ts | 32 +++++++ src/components/views/messages/MVideoBody.tsx | 50 ++++++----- .../views/messages/MessageActionBar.js | 22 +++++ src/components/views/messages/MessageEvent.js | 8 ++ src/utils/LazyValue.ts | 59 ++++++++++++ src/utils/MediaEventHelper.ts | 90 +++++++++++++++++++ 6 files changed, 237 insertions(+), 24 deletions(-) create mode 100644 src/components/views/messages/IMediaBody.ts create mode 100644 src/utils/LazyValue.ts create mode 100644 src/utils/MediaEventHelper.ts diff --git a/src/components/views/messages/IMediaBody.ts b/src/components/views/messages/IMediaBody.ts new file mode 100644 index 00000000000..dcbdfff2848 --- /dev/null +++ b/src/components/views/messages/IMediaBody.ts @@ -0,0 +1,32 @@ +/* +Copyright 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 EventTile from "../rooms/EventTile"; +import { MediaEventHelper } from "../../../utils/MediaEventHelper"; + +export interface IMediaBody { + getMediaHelper(): MediaEventHelper; +} + +export function canTileDownload(tile: EventTile): boolean { + if (!tile) return false; + + // Cast so we can check for IMediaBody interface safely. + // Note that we don't cast to the IMediaBody interface as that causes IDEs + // to complain about conditions always being true. + const tileAsAny = tile; + return !!tileAsAny.getMediaHelper; +} diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx index d882bb1eb04..bb58a13c4d5 100644 --- a/src/components/views/messages/MVideoBody.tsx +++ b/src/components/views/messages/MVideoBody.tsx @@ -26,10 +26,14 @@ 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"; interface IProps { /* the MatrixEvent to show */ - mxEvent: any; + mxEvent: MatrixEvent; /* called when the video has loaded */ onHeightChanged: () => void; } @@ -45,11 +49,13 @@ interface IState { } @replaceableComponent("views.messages.MVideoBody") -export default class MVideoBody extends React.PureComponent { +export default class MVideoBody extends React.PureComponent implements IMediaBody { private videoRef = React.createRef(); + private mediaHelper: MediaEventHelper; constructor(props) { super(props); + this.state = { fetchingData: false, decryptedUrl: null, @@ -59,6 +65,8 @@ export default class MVideoBody extends React.PureComponent { posterLoading: false, blurhashUrl: null, }; + + this.mediaHelper = new MediaEventHelper(this.props.mxEvent); } thumbScale(fullWidth: number, fullHeight: number, thumbWidth = 480, thumbHeight = 360) { @@ -82,6 +90,10 @@ export default class MVideoBody extends React.PureComponent { } } + public getMediaHelper(): MediaEventHelper { + return this.mediaHelper; + } + private getContentUrl(): string|null { const media = mediaFromContent(this.props.mxEvent.getContent()); if (media.isEncrypted) { @@ -97,7 +109,7 @@ export default class MVideoBody extends React.PureComponent { } private getThumbUrl(): string|null { - const content = this.props.mxEvent.getContent(); + const content = this.props.mxEvent.getContent(); const media = mediaFromContent(content); if (media.isEncrypted && this.state.decryptedThumbnailUrl) { @@ -139,7 +151,7 @@ export default class MVideoBody extends React.PureComponent { posterLoading: true, }); - const content = this.props.mxEvent.getContent(); + const content = this.props.mxEvent.getContent(); const media = mediaFromContent(content); if (media.hasThumbnail) { const image = new Image(); @@ -152,30 +164,22 @@ export default class MVideoBody extends React.PureComponent { async componentDidMount() { const autoplay = SettingsStore.getValue("autoplayGifsAndVideos") as boolean; - const content = this.props.mxEvent.getContent(); this.loadBlurhash(); - if (content.file !== undefined && this.state.decryptedUrl === null) { - let thumbnailPromise = Promise.resolve(null); - if (content?.info?.thumbnail_file) { - thumbnailPromise = decryptFile(content.info.thumbnail_file) - .then(blob => URL.createObjectURL(blob)); - } - + if (this.mediaHelper.media.isEncrypted && this.state.decryptedUrl === null) { try { - const thumbnailUrl = await thumbnailPromise; + const thumbnailUrl = await this.mediaHelper.thumbnailUrl.value; if (autoplay) { console.log("Preloading video"); - const decryptedBlob = await decryptFile(content.file); - const contentUrl = URL.createObjectURL(decryptedBlob); this.setState({ - decryptedUrl: contentUrl, + decryptedUrl: await this.mediaHelper.sourceUrl.value, decryptedThumbnailUrl: thumbnailUrl, - decryptedBlob: decryptedBlob, + decryptedBlob: await this.mediaHelper.sourceBlob.value, }); this.props.onHeightChanged(); } else { console.log("NOT preloading video"); + const content = this.props.mxEvent.getContent(); this.setState({ // For Chrome and Electron, we need to set some non-empty `src` to // enable the play button. Firefox does not seem to care either @@ -202,6 +206,7 @@ export default class MVideoBody extends React.PureComponent { if (this.state.decryptedThumbnailUrl) { URL.revokeObjectURL(this.state.decryptedThumbnailUrl); } + this.mediaHelper.destroy(); } private videoOnPlay = async () => { @@ -213,18 +218,15 @@ export default class MVideoBody extends React.PureComponent { // To stop subsequent download attempts fetchingData: true, }); - const content = this.props.mxEvent.getContent(); - if (!content.file) { + if (!this.mediaHelper.media.isEncrypted) { this.setState({ error: "No file given in content", }); return; } - const decryptedBlob = await decryptFile(content.file); - const contentUrl = URL.createObjectURL(decryptedBlob); this.setState({ - decryptedUrl: contentUrl, - decryptedBlob: decryptedBlob, + decryptedUrl: await this.mediaHelper.sourceUrl.value, + decryptedBlob: await this.mediaHelper.sourceBlob.value, fetchingData: false, }, () => { if (!this.videoRef.current) return; @@ -295,7 +297,7 @@ export default class MVideoBody extends React.PureComponent { onPlay={this.videoOnPlay} > - + {/**/} ); } diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js index 75325546667..13854aebfcf 100644 --- a/src/components/views/messages/MessageActionBar.js +++ b/src/components/views/messages/MessageActionBar.js @@ -32,6 +32,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; import { canCancel } from "../context_menus/MessageContextMenu"; import Resend from "../../../Resend"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; +import { canTileDownload } from "./IMediaBody"; const OptionsButton = ({ mxEvent, getTile, getReplyThread, permalinkCreator, onFocusChange }) => { const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu(); @@ -175,6 +176,16 @@ export default class MessageActionBar extends React.PureComponent { }); }; + onDownloadClick = async (ev) => { + // TODO: Maybe just call into MFileBody and render it as null + const src = this.props.getTile().getMediaHelper(); + const a = document.createElement("a"); + a.href = await src.sourceUrl.value; + a.download = "todo.png"; + a.target = "_blank"; + a.click(); + }; + /** * Runs a given fn on the set of possible events to test. The first event * that passes the checkFn will have fn executed on it. Both functions take @@ -267,6 +278,17 @@ export default class MessageActionBar extends React.PureComponent { key="react" />); } + + const tile = this.props.getTile && this.props.getTile(); + if (canTileDownload(tile)) { + toolbarOpts.splice(0, 0, ); + } } if (allowCancel) { diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js index cd071ebb349..49b50b610ce 100644 --- a/src/components/views/messages/MessageEvent.js +++ b/src/components/views/messages/MessageEvent.js @@ -22,6 +22,7 @@ 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 { @@ -69,6 +70,13 @@ export default class MessageEvent extends React.Component { 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'), diff --git a/src/utils/LazyValue.ts b/src/utils/LazyValue.ts new file mode 100644 index 00000000000..9cdcda489a3 --- /dev/null +++ b/src/utils/LazyValue.ts @@ -0,0 +1,59 @@ +/* +Copyright 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. +*/ + +/** + * Utility class for lazily getting a variable. + */ +export class LazyValue { + private val: T; + private prom: Promise; + private done = false; + + public constructor(private getFn: () => Promise) { + } + + /** + * Whether or not a cached value is present. + */ + public get present(): boolean { + // we use a tracking variable just in case the final value is falsey + return this.done; + } + + /** + * Gets the value without invoking a get. May be undefined until the + * value is fetched properly. + */ + public get cachedValue(): T { + return this.val; + } + + /** + * Gets a promise which resolves to the value, eventually. + */ + public get value(): Promise { + if (this.prom) return this.prom; + this.prom = this.getFn(); + + // Fork the promise chain to avoid accidentally making it return undefined always. + this.prom.then(v => { + this.val = v; + this.done = true; + }); + + return this.prom; + } +} diff --git a/src/utils/MediaEventHelper.ts b/src/utils/MediaEventHelper.ts new file mode 100644 index 00000000000..316ee54edf6 --- /dev/null +++ b/src/utils/MediaEventHelper.ts @@ -0,0 +1,90 @@ +/* +Copyright 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 { MatrixEvent } from "matrix-js-sdk/src"; +import { LazyValue } from "./LazyValue"; +import { Media, mediaFromContent } from "../customisations/Media"; +import { decryptFile } from "./DecryptFile"; +import { IMediaEventContent } from "../customisations/models/IMediaEventContent"; +import { IDestroyable } from "./IDestroyable"; + +// TODO: We should consider caching the blobs. https://github.com/vector-im/element-web/issues/17192 + +export class MediaEventHelper implements IDestroyable { + public readonly sourceUrl: LazyValue; + public readonly thumbnailUrl: LazyValue; + public readonly sourceBlob: LazyValue; + public readonly thumbnailBlob: LazyValue; + public readonly media: Media; + + public constructor(private event: MatrixEvent) { + this.sourceUrl = new LazyValue(this.prepareSourceUrl); + this.thumbnailUrl = new LazyValue(this.prepareThumbnailUrl); + this.sourceBlob = new LazyValue(this.fetchSource); + this.thumbnailBlob = new LazyValue(this.fetchThumbnail); + + this.media = mediaFromContent(this.event.getContent()); + } + + public destroy() { + if (this.media.isEncrypted) { + if (this.sourceUrl.present) URL.revokeObjectURL(this.sourceUrl.cachedValue); + if (this.thumbnailUrl.present) URL.revokeObjectURL(this.thumbnailUrl.cachedValue); + } + } + + private prepareSourceUrl = async () => { + if (this.media.isEncrypted) { + const blob = await this.sourceBlob.value; + return URL.createObjectURL(blob); + } else { + return this.media.srcHttp; + } + }; + + private prepareThumbnailUrl = async () => { + if (this.media.isEncrypted) { + const blob = await this.thumbnailBlob.value; + return URL.createObjectURL(blob); + } else { + return this.media.thumbnailHttp; + } + }; + + private fetchSource = () => { + if (this.media.isEncrypted) { + return decryptFile(this.event.getContent().file); + } + return this.media.downloadSource().then(r => r.blob()); + }; + + private fetchThumbnail = () => { + if (!this.media.hasThumbnail) return Promise.resolve(null); + + if (this.media.isEncrypted) { + const content = this.event.getContent(); + if (content.info?.thumbnail_file) { + return decryptFile(content.info.thumbnail_file); + } else { + // "Should never happen" + console.warn("Media claims to have thumbnail and is encrypted, but no thumbnail_file found"); + return Promise.resolve(null); + } + } + + return fetch(this.media.thumbnailHttp).then(r => r.blob()); + }; +} From 703cf7375912898597ec42a92ca85833c242e79a Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 15 Jul 2021 14:19:07 -0600 Subject: [PATCH 02/16] 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 1fb9ba4303e..36ef7a9ace7 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 999e98f4ad1..7092be43e9c 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 bb58a13c4d5..2b873f65063 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 49b50b610ce..00000000000 --- 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 00000000000..3c59e68c8bd --- /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 316ee54edf6..b4deb1a8ce4 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; + } } From 584ffbd32777199263ad67c6b5331edc1a03b6a2 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 15 Jul 2021 14:25:43 -0600 Subject: [PATCH 03/16] Fix refreshing the page not showing a download --- src/components/views/messages/MessageActionBar.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js index 13854aebfcf..730a929ddd5 100644 --- a/src/components/views/messages/MessageActionBar.js +++ b/src/components/views/messages/MessageActionBar.js @@ -33,6 +33,7 @@ import { canCancel } from "../context_menus/MessageContextMenu"; import Resend from "../../../Resend"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { canTileDownload } from "./IMediaBody"; +import {MediaEventHelper} from "../../../utils/MediaEventHelper"; const OptionsButton = ({ mxEvent, getTile, getReplyThread, permalinkCreator, onFocusChange }) => { const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu(); @@ -177,6 +178,11 @@ export default class MessageActionBar extends React.PureComponent { }; onDownloadClick = async (ev) => { + if (!this.props.getTile || !this.props.getTile().getMediaHelper) { + console.warn("Action bar triggered a download but the event tile is missing a media helper"); + return; + } + // TODO: Maybe just call into MFileBody and render it as null const src = this.props.getTile().getMediaHelper(); const a = document.createElement("a"); @@ -279,8 +285,8 @@ export default class MessageActionBar extends React.PureComponent { />); } - const tile = this.props.getTile && this.props.getTile(); - if (canTileDownload(tile)) { + // XXX: Assuming that the underlying tile will be a media event if it is eligible media. + if (MediaEventHelper.isEligible(this.props.mxEvent)) { toolbarOpts.splice(0, 0, Date: Thu, 15 Jul 2021 14:34:40 -0600 Subject: [PATCH 04/16] Clean up after POC --- src/components/views/messages/IMediaBody.ts | 11 ----------- src/components/views/messages/MessageActionBar.js | 3 +-- 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/src/components/views/messages/IMediaBody.ts b/src/components/views/messages/IMediaBody.ts index dcbdfff2848..27b5f242757 100644 --- a/src/components/views/messages/IMediaBody.ts +++ b/src/components/views/messages/IMediaBody.ts @@ -14,19 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -import EventTile from "../rooms/EventTile"; import { MediaEventHelper } from "../../../utils/MediaEventHelper"; export interface IMediaBody { getMediaHelper(): MediaEventHelper; } - -export function canTileDownload(tile: EventTile): boolean { - if (!tile) return false; - - // Cast so we can check for IMediaBody interface safely. - // Note that we don't cast to the IMediaBody interface as that causes IDEs - // to complain about conditions always being true. - const tileAsAny = tile; - return !!tileAsAny.getMediaHelper; -} diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js index 730a929ddd5..1cb86f168d6 100644 --- a/src/components/views/messages/MessageActionBar.js +++ b/src/components/views/messages/MessageActionBar.js @@ -32,8 +32,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; import { canCancel } from "../context_menus/MessageContextMenu"; import Resend from "../../../Resend"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; -import { canTileDownload } from "./IMediaBody"; -import {MediaEventHelper} from "../../../utils/MediaEventHelper"; +import { MediaEventHelper } from "../../../utils/MediaEventHelper"; const OptionsButton = ({ mxEvent, getTile, getReplyThread, permalinkCreator, onFocusChange }) => { const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu(); From 5fce0ccd9d23e5dd8c5114b4cf2a50f506f608a5 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 15 Jul 2021 16:37:48 -0600 Subject: [PATCH 05/16] Convert images, audio, and voice messages over to the new helper --- src/components/views/messages/MAudioBody.tsx | 43 +++++++------ src/components/views/messages/MImageBody.tsx | 51 +++++---------- .../views/messages/MVoiceMessageBody.tsx | 64 ++----------------- 3 files changed, 41 insertions(+), 117 deletions(-) diff --git a/src/components/views/messages/MAudioBody.tsx b/src/components/views/messages/MAudioBody.tsx index bc7216f42c8..4f688fd1363 100644 --- a/src/components/views/messages/MAudioBody.tsx +++ b/src/components/views/messages/MAudioBody.tsx @@ -18,22 +18,22 @@ import React from "react"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import { Playback } from "../../../voice/Playback"; -import MFileBody from "./MFileBody"; import InlineSpinner from '../elements/InlineSpinner'; import { _t } from "../../../languageHandler"; -import { mediaFromContent } from "../../../customisations/Media"; -import { decryptFile } from "../../../utils/DecryptFile"; -import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent"; import AudioPlayer from "../audio_messages/AudioPlayer"; +import { MediaEventHelper } from "../../../utils/MediaEventHelper"; +import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent"; +import { TileShape } from "../rooms/EventTile"; interface IProps { mxEvent: MatrixEvent; + tileShape?: TileShape; + mediaEventHelper: MediaEventHelper; } interface IState { error?: Error; playback?: Playback; - decryptedBlob?: Blob; } @replaceableComponent("views.messages.MAudioBody") @@ -46,33 +46,34 @@ export default class MAudioBody extends React.PureComponent { public async componentDidMount() { let buffer: ArrayBuffer; - const content: IMediaEventContent = this.props.mxEvent.getContent(); - const media = mediaFromContent(content); - if (media.isEncrypted) { + + try { try { - const blob = await decryptFile(content.file); + const blob = await this.props.mediaEventHelper.sourceBlob.value; buffer = await blob.arrayBuffer(); - this.setState({ decryptedBlob: blob }); } catch (e) { this.setState({ error: e }); console.warn("Unable to decrypt audio message", e); return; // stop processing the audio file } - } else { - try { - buffer = await media.downloadSource().then(r => r.blob()).then(r => r.arrayBuffer()); - } catch (e) { - this.setState({ error: e }); - console.warn("Unable to download audio message", e); - return; // stop processing the audio file - } + } catch (e) { + this.setState({ error: e }); + console.warn("Unable to decrypt/download audio message", e); + return; // stop processing the audio file } // We should have a buffer to work with now: let's set it up - const playback = new Playback(buffer); + + // Note: we don't actually need a waveform to render an audio event, but voice messages do. + const content = this.props.mxEvent.getContent(); + const waveform = content?.["org.matrix.msc1767.audio"]?.waveform?.map(p => p / 1024); + + // We should have a buffer to work with now: let's set it up + const playback = new Playback(buffer, waveform); playback.clockInfo.populatePlaceholdersFrom(this.props.mxEvent); this.setState({ playback }); - // Note: the RecordingPlayback component will handle preparing the Playback class for us. + + // Note: the components later on will handle preparing the Playback class for us. } public componentWillUnmount() { @@ -103,7 +104,7 @@ export default class MAudioBody extends React.PureComponent { return ( - + {/**/} ); } diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index 96c8652aeec..9325c39982e 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -1,6 +1,5 @@ /* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2018 New Vector Ltd +Copyright 2015 - 2021 The Matrix.org Foundation C.I.C. Copyright 2018, 2019 Michael Telatynski <7t3chguy@gmail.com> Licensed under the Apache License, Version 2.0 (the "License"); @@ -21,7 +20,6 @@ import { Blurhash } from "react-blurhash"; import MFileBody from './MFileBody'; import Modal from '../../../Modal'; -import { decryptFile } from '../../../utils/DecryptFile'; import { _t } from '../../../languageHandler'; import SettingsStore from "../../../settings/SettingsStore"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; @@ -34,6 +32,7 @@ import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks'; import { IMediaEventContent } from '../../../customisations/models/IMediaEventContent'; import ImageView from '../elements/ImageView'; import { SyncState } from 'matrix-js-sdk/src/sync.api'; +import { MediaEventHelper } from "../../../utils/MediaEventHelper"; export interface IProps { /* the MatrixEvent to show */ @@ -46,6 +45,7 @@ export interface IProps { /* the permalinkCreator */ permalinkCreator?: RoomPermalinkCreator; + mediaEventHelper: MediaEventHelper; } interface IState { @@ -257,38 +257,24 @@ export default class MImageBody extends React.Component { } } - private downloadImage(): void { + private async downloadImage() { const content = this.props.mxEvent.getContent(); - if (content.file !== undefined && this.state.decryptedUrl === null) { - let thumbnailPromise = Promise.resolve(null); - if (content.info && content.info.thumbnail_file) { - thumbnailPromise = decryptFile( - content.info.thumbnail_file, - ).then(function(blob) { - return URL.createObjectURL(blob); - }); - } - let decryptedBlob; - thumbnailPromise.then((thumbnailUrl) => { - return decryptFile(content.file).then(function(blob) { - decryptedBlob = blob; - return URL.createObjectURL(blob); - }).then((contentUrl) => { - if (this.unmounted) return; - this.setState({ - decryptedUrl: contentUrl, - decryptedThumbnailUrl: thumbnailUrl, - decryptedBlob: decryptedBlob, - }); + if (this.props.mediaEventHelper.media.isEncrypted && this.state.decryptedUrl === null) { + try { + const thumbnailUrl = await this.props.mediaEventHelper.thumbnailUrl.value; + this.setState({ + decryptedUrl: await this.props.mediaEventHelper.sourceUrl.value, + decryptedThumbnailUrl: thumbnailUrl, + decryptedBlob: await this.props.mediaEventHelper.sourceBlob.value, }); - }).catch((err) => { + } catch (err) { if (this.unmounted) return; console.warn("Unable to decrypt attachment: ", err); // Set a placeholder image when we can't decrypt the image. this.setState({ error: err, }); - }); + } } } @@ -300,10 +286,10 @@ export default class MImageBody extends React.Component { localStorage.getItem("mx_ShowImage_" + this.props.mxEvent.getId()) === "true"; if (showImage) { - // Don't download anything becaue we don't want to display anything. + // noinspection JSIgnoredPromiseFromCall this.downloadImage(); this.setState({ showImage: true }); - } + } // else don't download anything because we don't want to display anything. this._afterComponentDidMount(); } @@ -316,13 +302,6 @@ export default class MImageBody extends React.Component { componentWillUnmount() { this.unmounted = true; this.context.removeListener('sync', this.onClientSync); - - if (this.state.decryptedUrl) { - URL.revokeObjectURL(this.state.decryptedUrl); - } - if (this.state.decryptedThumbnailUrl) { - URL.revokeObjectURL(this.state.decryptedThumbnailUrl); - } } protected messageContent( diff --git a/src/components/views/messages/MVoiceMessageBody.tsx b/src/components/views/messages/MVoiceMessageBody.tsx index bec224dd2de..65426cdad22 100644 --- a/src/components/views/messages/MVoiceMessageBody.tsx +++ b/src/components/views/messages/MVoiceMessageBody.tsx @@ -15,72 +15,16 @@ limitations under the License. */ import React from "react"; -import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { replaceableComponent } from "../../../utils/replaceableComponent"; -import { Playback } from "../../../voice/Playback"; -import MFileBody from "./MFileBody"; import InlineSpinner from '../elements/InlineSpinner'; import { _t } from "../../../languageHandler"; -import { mediaFromContent } from "../../../customisations/Media"; -import { decryptFile } from "../../../utils/DecryptFile"; import RecordingPlayback from "../audio_messages/RecordingPlayback"; -import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent"; -import { TileShape } from "../rooms/EventTile"; - -interface IProps { - mxEvent: MatrixEvent; - tileShape?: TileShape; -} - -interface IState { - error?: Error; - playback?: Playback; - decryptedBlob?: Blob; -} +import MAudioBody from "./MAudioBody"; @replaceableComponent("views.messages.MVoiceMessageBody") -export default class MVoiceMessageBody extends React.PureComponent { - constructor(props: IProps) { - super(props); - - this.state = {}; - } +export default class MVoiceMessageBody extends MAudioBody { - public async componentDidMount() { - let buffer: ArrayBuffer; - const content: IMediaEventContent = this.props.mxEvent.getContent(); - const media = mediaFromContent(content); - if (media.isEncrypted) { - try { - const blob = await decryptFile(content.file); - buffer = await blob.arrayBuffer(); - this.setState({ decryptedBlob: blob }); - } catch (e) { - this.setState({ error: e }); - console.warn("Unable to decrypt voice message", e); - return; // stop processing the audio file - } - } else { - try { - buffer = await media.downloadSource().then(r => r.blob()).then(r => r.arrayBuffer()); - } catch (e) { - this.setState({ error: e }); - console.warn("Unable to download voice message", e); - return; // stop processing the audio file - } - } - - const waveform = content?.["org.matrix.msc1767.audio"]?.waveform?.map(p => p / 1024); - - // We should have a buffer to work with now: let's set it up - const playback = new Playback(buffer, waveform); - this.setState({ playback }); - // Note: the RecordingPlayback component will handle preparing the Playback class for us. - } - - public componentWillUnmount() { - this.state.playback?.destroy(); - } + // A voice message is an audio file but rendered in a special way. public render() { if (this.state.error) { @@ -106,7 +50,7 @@ export default class MVoiceMessageBody extends React.PureComponent - + {/**/} ); } From ea7513fc16fd902d86069d45274f02dca2d292e8 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 15 Jul 2021 16:48:21 -0600 Subject: [PATCH 06/16] Convert MFileBody to TS and use media helper --- .../messages/{MFileBody.js => MFileBody.tsx} | 93 ++++++++++--------- 1 file changed, 47 insertions(+), 46 deletions(-) rename src/components/views/messages/{MFileBody.js => MFileBody.tsx} (86%) diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.tsx similarity index 86% rename from src/components/views/messages/MFileBody.js rename to src/components/views/messages/MFileBody.tsx index 9236c77e8dc..f1f004ef215 100644 --- a/src/components/views/messages/MFileBody.js +++ b/src/components/views/messages/MFileBody.tsx @@ -25,6 +25,9 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; import { mediaFromContent } from "../../../customisations/Media"; import ErrorDialog from "../dialogs/ErrorDialog"; import { TileShape } from "../rooms/EventTile"; +import { IContent, MatrixEvent } from "matrix-js-sdk/src"; +import { MediaEventHelper } from "../../../utils/MediaEventHelper"; +import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent"; let downloadIconUrl; // cached copy of the download.svg asset for the sandboxed iframe later on @@ -35,6 +38,7 @@ async function cacheDownloadIcon() { } // Cache the asset immediately +// noinspection JSIgnoredPromiseFromCall cacheDownloadIcon(); // User supplied content can contain scripts, we have to be careful that @@ -98,7 +102,7 @@ function computedStyle(element) { * @param {boolean} withSize Whether to include size information. Default true. * @return {string} the human readable link text for the attachment. */ -export function presentableTextForFile(content, withSize = true) { +export function presentableTextForFile(content: IContent, withSize = true): string { let linkText = _t("Attachment"); if (content.body && content.body.length > 0) { // The content body should be the name of the file including a @@ -119,53 +123,56 @@ export function presentableTextForFile(content, withSize = true) { return linkText; } -@replaceableComponent("views.messages.MFileBody") -export default class MFileBody extends React.Component { - static propTypes = { - /* the MatrixEvent to show */ - mxEvent: PropTypes.object.isRequired, - /* already decrypted blob */ - decryptedBlob: PropTypes.object, - /* called when the download link iframe is shown */ - onHeightChanged: PropTypes.func, - /* the shape of the tile, used */ - tileShape: PropTypes.string, - /* whether or not to show the default placeholder for the file. Defaults to true. */ - showGenericPlaceholder: PropTypes.bool, - }; +interface IProps { + /* the MatrixEvent to show */ + mxEvent: MatrixEvent; + /* called when the download link iframe is shown */ + onHeightChanged: () => void; + /* the shape of the tile, used */ + tileShape: TileShape; + /* whether or not to show the default placeholder for the file. Defaults to true. */ + showGenericPlaceholder: boolean; + /* helper which contains the file access */ + mediaEventHelper: MediaEventHelper; +} +interface IState { + decryptedBlob?: Blob; +} + +@replaceableComponent("views.messages.MFileBody") +export default class MFileBody extends React.Component { static defaultProps = { showGenericPlaceholder: true, }; - constructor(props) { - super(props); + private iframe: React.RefObject = createRef(); + private dummyLink: React.RefObject = createRef(); + private userDidClick = false; - this.state = { - decryptedBlob: (this.props.decryptedBlob ? this.props.decryptedBlob : null), - }; + public constructor(props: IProps) { + super(props); - this._iframe = createRef(); - this._dummyLink = createRef(); + this.state = {}; } - _getContentUrl() { + private getContentUrl(): string { const media = mediaFromContent(this.props.mxEvent.getContent()); return media.srcHttp; } - componentDidUpdate(prevProps, prevState) { + public componentDidUpdate(prevProps, prevState) { if (this.props.onHeightChanged && !prevState.decryptedBlob && this.state.decryptedBlob) { this.props.onHeightChanged(); } } - render() { - const content = this.props.mxEvent.getContent(); + public render() { + const content = this.props.mxEvent.getContent(); const text = presentableTextForFile(content); - const isEncrypted = content.file !== undefined; + const isEncrypted = this.props.mediaEventHelper.media.isEncrypted; const fileName = content.body && content.body.length > 0 ? content.body : _t("Attachment"); - const contentUrl = this._getContentUrl(); + const contentUrl = this.getContentUrl(); const fileSize = content.info ? content.info.size : null; const fileType = content.info ? content.info.mimetype : "application/octet-stream"; @@ -182,29 +189,23 @@ export default class MFileBody extends React.Component { } if (isEncrypted) { - if (this.state.decryptedBlob === null) { + if (!this.state.decryptedBlob) { // Need to decrypt the attachment // Wait for the user to click on the link before downloading // and decrypting the attachment. - let decrypting = false; - const decrypt = (e) => { - if (decrypting) { - return false; - } - decrypting = true; - decryptFile(content.file).then((blob) => { + const decrypt = async () => { + try { + this.userDidClick = true; this.setState({ - decryptedBlob: blob, + decryptedBlob: await this.props.mediaEventHelper.sourceBlob.value, }); - }).catch((err) => { + } catch (err) { console.warn("Unable to decrypt attachment: ", err); Modal.createTrackedDialog('Error decrypting attachment', '', ErrorDialog, { title: _t("Error"), description: _t("Error decrypting attachment"), }); - }).finally(() => { - decrypting = false; - }); + } }; // This button should actually Download because usercontent/ will try to click itself @@ -226,7 +227,7 @@ export default class MFileBody extends React.Component { ev.target.contentWindow.postMessage({ imgSrc: downloadIconUrl, imgStyle: null, // it handles this internally for us. Useful if a downstream changes the icon. - style: computedStyle(this._dummyLink.current), + style: computedStyle(this.dummyLink.current), blob: this.state.decryptedBlob, // Set a download attribute for encrypted files so that the file // will have the correct name when the user tries to download it. @@ -234,7 +235,7 @@ export default class MFileBody extends React.Component { download: fileName, textContent: _t("Download %(text)s", { text: text }), // only auto-download if a user triggered this iframe explicitly - auto: !this.props.decryptedBlob, + auto: this.userDidClick, }, "*"); }; @@ -251,12 +252,12 @@ export default class MFileBody extends React.Component { * We'll use it to learn how the download link * would have been styled if it was rendered inline. */ } - +