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 = ( + + {content.body} + + ); + return ( - - {content.body} - + { thumbUrl && !this.state.imgError ? thumbnail : '' } - + ); } @@ -286,14 +302,6 @@ export default class extends React.Component { ); } - if (this.state.imgError) { - return ( - - { _t("This image cannot be displayed.") } - - ); - } - 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 ( - - { _t("Image '%(Body)s' cannot be displayed.", {Body: content.body}) } - - ); - } else { - return ( - - { _t("This image cannot be displayed.") } - - ); - } + return this._messageContent(contentUrl, thumbUrl, content); } }