imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Reload map on reconnect (#8848)

Browse source 
PSD-282
This commit is contained in:
Michael Weimann 2022-06-15 16:38:35 +02:00 • committed by GitHub
parent 9333e609b0
commit aac97e01e3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 158 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/components/views/messages/MImageBody.tsx
View file

@ -17,11 +17,10 @@ limitations under the License.
import React, { ComponentProps, createRef } from 'react';
import { Blurhash } from "react-blurhash";
import { SyncState } from 'matrix-js-sdk/src/sync';
import classNames from 'classnames';
import { CSSTransition, SwitchTransition } from 'react-transition-group';
import { logger } from "matrix-js-sdk/src/logger";
import { ClientEvent } from "matrix-js-sdk/src/client";
import { ClientEvent, ClientEventHandlerMap } from "matrix-js-sdk/src/client";
import MFileBody from './MFileBody';
import Modal from '../../../Modal';
@ -38,6 +37,7 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg';
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
import { blobIsAnimated, mayBeAnimated } from '../../../utils/Image';
import { presentableTextForFile } from "../../../utils/FileUtils";
import { createReconnectedListener } from '../../../utils/connection';
enum Placeholder {
NoImage,
@ -68,10 +68,13 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
private image = createRef<HTMLImageElement>();
private timeout?: number;
private sizeWatcher: string;
private reconnectedListener: ClientEventHandlerMap[ClientEvent.Sync];
constructor(props: IBodyProps) {
super(props);
this.reconnectedListener = createReconnectedListener(this.clearError);
this.state = {
imgError: false,
imgLoaded: false,
@ -81,20 +84,6 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
};
}
// FIXME: factor this out and apply it to MVideoBody and MAudioBody too!
private onClientSync = (syncState: SyncState, prevState: SyncState): void => {
if (this.unmounted) return;
// Consider the client reconnected if there is no error with syncing.
// This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
const reconnected = syncState !== SyncState.Error && prevState !== syncState;
if (reconnected && this.state.imgError) {
// Load the image again
this.setState({
imgError: false,
});
}
};
protected showImage(): void {
localStorage.setItem("mx_ShowImage_" + this.props.mxEvent.getId(), "true");
this.setState({ showImage: true });
@ -159,11 +148,17 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
imgElement.src = this.state.thumbUrl ?? this.state.contentUrl;
};
private clearError = () => {
MatrixClientPeg.get().off(ClientEvent.Sync, this.reconnectedListener);
this.setState({ imgError: false });
};
private onImageError = (): void => {
this.clearBlurhashTimeout();
this.setState({
imgError: true,
});
MatrixClientPeg.get().on(ClientEvent.Sync, this.reconnectedListener);
};
private onImageLoad = (): void => {
@ -317,7 +312,6 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
componentDidMount() {
this.unmounted = false;
MatrixClientPeg.get().on(ClientEvent.Sync, this.onClientSync);
const showImage = this.state.showImage ||
localStorage.getItem("mx_ShowImage_" + this.props.mxEvent.getId()) === "true";
@ -347,7 +341,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
componentWillUnmount() {
this.unmounted = true;
MatrixClientPeg.get().removeListener(ClientEvent.Sync, this.onClientSync);
MatrixClientPeg.get().off(ClientEvent.Sync, this.reconnectedListener);
this.clearBlurhashTimeout();
SettingsStore.unwatchSetting(this.sizeWatcher);
if (this.state.isAnimated && this.state.thumbUrl) {