From c254d043c5f69838be4feab0fc08fe652a691ddc Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sun, 29 Apr 2018 03:58:17 +0100
Subject: [PATCH] fix ugly img errors and correctly render SVG thumbnails

Fixes https://github.com/vector-im/riot-web/issues/6271
Fixes https://github.com/vector-im/riot-web/issues/1341
---
 src/components/views/messages/MImageBody.js | 60 ++++++++++-----------
 1 file changed, 27 insertions(+), 33 deletions(-)

diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index d5ce533bda..7ecbf91365 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -154,7 +154,16 @@ export default class extends React.Component {
                 return this.state.decryptedThumbnailUrl;
             }
             return this.state.decryptedUrl;
-        } else {
+        }
+        else if (content.info.mimetype == "image/svg+xml" && content.info.thumbnail_url) {
+            // special case to return client-generated thumbnails for SVGs, if any,
+            // given we deliberately don't thumbnail them serverside to prevent
+            // billion lol attacks and similar
+            return this.context.matrixClient.mxcUrlToHttp(
+                content.info.thumbnail_url, 800, 600
+            );
+        }
+        else {
             return this.context.matrixClient.mxcUrlToHttp(content.url, 800, 600);
         }
     }
@@ -230,6 +239,9 @@ export default class extends React.Component {
         const 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
 
+        // FIXME: this will break on clientside generated thumbnails (as per e2e rooms)
+        // which may well be much smaller than the 800x600 bounding box.
+
         //console.log("trying to fit image into timelineWidth of " + this.refs.body.offsetWidth + " or " + this.refs.body.clientWidth);
         let thumbHeight = null;
         if (content.info) {
@@ -240,18 +252,22 @@ export default class extends React.Component {
     }
 
     _messageContent(contentUrl, thumbUrl, content) {
+        const thumbnail = (
+            <a href={contentUrl} onClick={this.onClick}>
+                <img className="mx_MImageBody_thumbnail" src={thumbUrl} ref="image"
+                    alt={content.body}
+                    onError={this.onImageError}
+                    onLoad={this.props.onWidgetLoad}
+                    onMouseEnter={this.onImageEnter}
+                    onMouseLeave={this.onImageLeave} />
+            </a>
+        );
+
         return (
             <span className="mx_MImageBody" ref="body">
-                <a href={contentUrl} onClick={this.onClick}>
-                    <img className="mx_MImageBody_thumbnail" src={thumbUrl} ref="image"
-                        alt={content.body}
-                        onError={this.onImageError}
-                        onLoad={this.props.onWidgetLoad}
-                        onMouseEnter={this.onImageEnter}
-                        onMouseLeave={this.onImageLeave} />
-                </a>
+                { thumbUrl && !this.state.imgError ? thumbnail : '' }
                 <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} />
-          </span>
+            </span>
       );
     }
 
@@ -286,14 +302,6 @@ export default class extends React.Component {
             );
         }
 
-        if (this.state.imgError) {
-            return (
-                <span className="mx_MImageBody">
-                    { _t("This image cannot be displayed.") }
-                </span>
-            );
-        }
-
         const contentUrl = this._getContentUrl();
         let thumbUrl;
         if (this._isGif() && SettingsStore.getValue("autoplayGifsAndVideos")) {
@@ -302,20 +310,6 @@ export default class extends React.Component {
           thumbUrl = this._getThumbUrl();
         }
 
-        if (thumbUrl) {
-            return this._messageContent(contentUrl, thumbUrl, content);
-        } else if (content.body) {
-            return (
-                <span className="mx_MImageBody">
-                    { _t("Image '%(Body)s' cannot be displayed.", {Body: content.body}) }
-                </span>
-            );
-        } else {
-            return (
-                <span className="mx_MImageBody">
-                    { _t("This image cannot be displayed.") }
-                </span>
-            );
-        }
+        return this._messageContent(contentUrl, thumbUrl, content);
     }
 }