PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #6732 from matrix-org/palid/fix/blurhash-being-stuck-forever

Browse source 
Fix unnecessary blurhash rendering
This commit is contained in:
Dariusz Niemczyk 2021-09-03 06:03:36 +02:00 committed by GitHub
commit 781662ded7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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(