From c227b2279b367185a34eea772df364f68e263a08 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 24 Mar 2016 16:58:27 +0000
Subject: [PATCH] Minor fixes to image sizing

* use string refs instead of callback funcs
* Add a null-guard in case we don't have an image
---
 src/components/views/messages/MImageBody.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 04559ce4fe..02ccfbd107 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -121,16 +121,21 @@ module.exports = React.createClass({
     },
 
     fixupHeight: function() {
+        if (!this.refs.image) {
+            return;
+        }
+
         var content = this.props.mxEvent.getContent();
 
         var thumbHeight = null;
-        var timelineWidth = this._body.offsetWidth;
+        var timelineWidth = this.refs.body.offsetWidth;
         var maxHeight = 600; // let images take up as much width as they can so long as the height doesn't exceed 600px.
         // the alternative here would be 600*timelineWidth/800; to scale them down to fit inside a 4:3 bounding box
 
-        //console.log("trying to fit image into timelineWidth of " + this._body.offsetWidth + " or " + this._body.clientWidth);
+        //console.log("trying to fit image into timelineWidth of " + this.refs.body.offsetWidth + " or " + this.refs.body.clientWidth);
         if (content.info) thumbHeight = this.thumbHeight(content.info.w, content.info.h, timelineWidth, maxHeight);
-        this._image.style.height = thumbHeight + "px";
+        this.refs.image.style.height = thumbHeight + "px";
+        console.log("Imageheight now", thumbHeight);
     },
 
     render: function() {
@@ -141,9 +146,9 @@ module.exports = React.createClass({
         var thumbUrl = this._getThumbUrl();
         if (thumbUrl) {
             return (
-                <span className="mx_MImageBody" ref={(c) => this._body = c}>
+                <span className="mx_MImageBody" ref="body">
                     <a href={cli.mxcUrlToHttp(content.url)} onClick={ this.onClick }>
-                        <img className="mx_MImageBody_thumbnail" src={thumbUrl} ref={(c) => this._image = c}
+                        <img className="mx_MImageBody_thumbnail" src={thumbUrl} ref="image"
                             alt={content.body}
                             onMouseEnter={this.onImageEnter}
                             onMouseLeave={this.onImageLeave}