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 = (
+
+
+
+ );
+
return (
-
-
-
+ { 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);
}
}