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;
private unmounted = true;
private image = createRef<HTMLImageElement>();
private timeout?: number;
constructor(props: IBodyProps) {
super(props);
@ -146,12 +147,14 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
};
private onImageError = (): void => {
this.clearBlurhashTimeout();
this.setState({
imgError: true,
});
};
private onImageLoad = (): void => {
this.clearBlurhashTimeout();
this.props.onHeightChanged();
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() {
this.unmounted = false;
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.
// Add a 150ms timer for blurhash to first appear.
if (this.media.isEncrypted) {
setTimeout(() => {
if (this.props.mxEvent.getContent().info?.[BLURHASH_FIELD]) {
this.clearBlurhashTimeout();
this.timeout = setTimeout(() => {
if (!this.state.imgLoaded || !this.state.imgError) {
this.setState({
placeholder: 'blurhash',
@ -295,6 +306,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
componentWillUnmount() {
this.unmounted = true;
this.context.removeListener('sync', this.onClientSync);
this.clearBlurhashTimeout();
}
protected messageContent(