From 551d3ebda0e78c4a0d505d1cb12705a8edbad71c Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sun, 29 Apr 2018 04:28:15 +0100
Subject: [PATCH] correctly fix up thumbnail height onload.

fixes https://github.com/vector-im/riot-web/issues/6492, although popping is inevitable in
the current implementation as it only fixes up the thumbnail size once the image has loaded.
---
 src/components/views/messages/MImageBody.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 034e700793c..99135fdf8c8 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -50,6 +50,7 @@ export default class extends React.Component {
 
         this.onAction = this.onAction.bind(this);
         this.onImageError = this.onImageError.bind(this);
+        this.onImageLoad = this.onImageLoad.bind(this);
         this.onImageEnter = this.onImageEnter.bind(this);
         this.onImageLeave = this.onImageLeave.bind(this);
         this.onClientSync = this.onClientSync.bind(this);
@@ -137,6 +138,11 @@ export default class extends React.Component {
         });
     }
 
+    onImageLoad() {
+        this.fixupHeight();
+        this.props.onWidgetLoad();
+    }
+
     _getContentUrl() {
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined) {
@@ -170,7 +176,6 @@ export default class extends React.Component {
 
     componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
-        this.fixupHeight();
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined && this.state.decryptedUrl === null) {
             let thumbnailPromise = Promise.resolve(null);
@@ -192,7 +197,6 @@ export default class extends React.Component {
                         decryptedThumbnailUrl: thumbnailUrl,
                         decryptedBlob: decryptedBlob,
                     });
-                    this.props.onWidgetLoad();
                 });
             }).catch((err) => {
                 console.warn("Unable to decrypt attachment: ", err);
@@ -244,7 +248,7 @@ export default class extends React.Component {
 
         // FIXME: It will also break really badly for images with broken or missing thumbnails
 
-        //console.log("trying to fit image into timelineWidth of " + this.refs.body.offsetWidth + " or " + this.refs.body.clientWidth);
+        // console.log("trying to fit image into timelineWidth of " + this.refs.body.offsetWidth + " or " + this.refs.body.clientWidth);
         let thumbHeight = null;
         if (content.info) {
             thumbHeight = ImageUtils.thumbHeight(content.info.w, content.info.h, timelineWidth, maxHeight);
@@ -259,7 +263,7 @@ export default class extends React.Component {
                 <img className="mx_MImageBody_thumbnail" src={thumbUrl} ref="image"
                     alt={content.body}
                     onError={this.onImageError}
-                    onLoad={this.props.onWidgetLoad}
+                    onLoad={this.onImageLoad}
                     onMouseEnter={this.onImageEnter}
                     onMouseLeave={this.onImageLeave} />
             </a>