Convert MessageEvent to TS and hoist MediaEventHelper
Travis Ralston
parent
0a99f76e7f
commit
703cf73759
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue