mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-24 10:15:43 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix unnecessary blurhash rendering

Browse source
This commit is contained in:
Dariusz Niemczyk 2021-09-02 21:07:08 +02:00
parent b8f6d2926c
commit 40cb8e8fc6
No known key found for this signature in database
GPG key ID: 3E8DC619E3C59A05
1 changed files with 14 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -55,6 +55,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
static contextType = MatrixClientContext; static contextType = MatrixClientContext;
private unmounted = true; private unmounted = true;
private image = createRef<HTMLImageElement>(); private image = createRef<HTMLImageElement>();
private timeout?: number;
constructor(props: IBodyProps) { constructor(props: IBodyProps) {
super(props); super(props);
@ -146,12 +147,14 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
}; };
private onImageError = (): void => { private onImageError = (): void => {
this.clearBlurhashTimeout();
this.setState({ this.setState({
imgError: true, imgError: true,
}); });
}; };
private onImageLoad = (): void => { private onImageLoad = (): void => {
this.clearBlurhashTimeout();
this.props.onHeightChanged(); this.props.onHeightChanged();
let loadedImageDimensions; let loadedImageDimensions;
@ -267,6 +270,13 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
} }
} }
private clearBlurhashTimeout() {
if (this.timeout) {
clearTimeout(this.timeout);
this.timeout = undefined;
}
}
componentDidMount() { componentDidMount() {
this.unmounted = false; this.unmounted = false;
this.context.on('sync', this.onClientSync); this.context.on('sync', this.onClientSync);
@ -281,8 +291,9 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
} // else don't download anything because we don't want to display anything. } // else don't download anything because we don't want to display anything.
// Add a 150ms timer for blurhash to first appear. // Add a 150ms timer for blurhash to first appear.
if (this.media.isEncrypted) { if (this.props.mxEvent.getContent().info?.[BLURHASH_FIELD]) {
setTimeout(() => { this.clearBlurhashTimeout();
this.timeout = setTimeout(() => {
if (!this.state.imgLoaded || !this.state.imgError) { if (!this.state.imgLoaded || !this.state.imgError) {
this.setState({ this.setState({
placeholder: 'blurhash', placeholder: 'blurhash',
@ -295,6 +306,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
componentWillUnmount() { componentWillUnmount() {
this.unmounted = true; this.unmounted = true;
this.context.removeListener('sync', this.onClientSync); this.context.removeListener('sync', this.onClientSync);
this.clearBlurhashTimeout();
} }
protected messageContent( protected messageContent(