From c8a830616555d75385320dda1758604d2a47a4f1 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 12 Nov 2015 14:16:57 +0000
Subject: [PATCH] Display some sensible UI for non-mxc content URLs.

---
 src/skins/vector/views/molecules/MFileTile.js | 28 ++++++++-----
 .../vector/views/molecules/MImageTile.js      | 39 +++++++++++++------
 2 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/src/skins/vector/views/molecules/MFileTile.js b/src/skins/vector/views/molecules/MFileTile.js
index f7e8991f..9180bd6b 100644
--- a/src/skins/vector/views/molecules/MFileTile.js
+++ b/src/skins/vector/views/molecules/MFileTile.js
@@ -30,15 +30,25 @@ module.exports = React.createClass({
         var content = this.props.mxEvent.getContent();
         var cli = MatrixClientPeg.get();
 
-        return (
-            <span className="mx_MFileTile">
-                <div className="mx_MImageTile_download">
-                    <a href={cli.mxcUrlToHttp(content.url)} target="_blank">
-                        <img src="img/download.png" width="10" height="12"/>
-                        Download {this.presentableTextForFile(content)}
-                    </a>
-                </div>                
+        var httpUrl = cli.mxcUrlToHttp(content.url);
+        var text = this.presentableTextForFile(content);
+
+        if (httpUrl) {
+            return (
+                <span className="mx_MFileTile">
+                    <div className="mx_MImageTile_download">
+                        <a href={cli.mxcUrlToHttp(content.url)} target="_blank">
+                            <img src="img/download.png" width="10" height="12"/>
+                            Download {text}
+                        </a>
+                    </div>
+                </span>
+            );
+        } else {
+            var extra = text ? ': '+text : '';
+            return <span className="mx_MFileTile">
+                Invalid file{extra}
             </span>
-        );
+        }
     },
 });
diff --git a/src/skins/vector/views/molecules/MImageTile.js b/src/skins/vector/views/molecules/MImageTile.js
index 0667dabd..2f3b7a55 100644
--- a/src/skins/vector/views/molecules/MImageTile.js
+++ b/src/skins/vector/views/molecules/MImageTile.js
@@ -73,18 +73,33 @@ module.exports = React.createClass({
         var imgStyle = {};
         if (thumbHeight) imgStyle['height'] = thumbHeight;
 
-        return (
-            <span className="mx_MImageTile">
-                <a href={cli.mxcUrlToHttp(content.url)} onClick={ this.onClick }>
-                    <img className="mx_MImageTile_thumbnail" src={cli.mxcUrlToHttp(content.url, 480, 360)} alt={content.body} style={imgStyle} />
-                </a>
-                <div className="mx_MImageTile_download">
-                    <a href={cli.mxcUrlToHttp(content.url)} target="_blank">
-                        <img src="img/download.png" width="10" height="12"/>
-                        Download {content.body} ({ content.info && content.info.size ? filesize(content.info.size) : "Unknown size" })
+        var thumbUrl = cli.mxcUrlToHttp(content.url, 480, 360);
+        if (thumbUrl) {
+            return (
+                <span className="mx_MImageTile">
+                    <a href={cli.mxcUrlToHttp(content.url)} onClick={ this.onClick }>
+                        <img className="mx_MImageTile_thumbnail" src={thumbUrl} alt={content.body} style={imgStyle} />
                     </a>
-                </div>
-            </span>
-        );
+                    <div className="mx_MImageTile_download">
+                        <a href={cli.mxcUrlToHttp(content.url)} target="_blank">
+                            <img src="img/download.png" width="10" height="12"/>
+                            Download {content.body} ({ content.info && content.info.size ? filesize(content.info.size) : "Unknown size" })
+                        </a>
+                    </div>
+                </span>
+            );
+        } else if (content.body) {
+            return (
+                <span className="mx_MImageTile">
+                    Image '{content.body}' cannot be displayed.
+                </span>
+            );
+        } else {
+            return (
+                <span className="mx_MImageTile">
+                    This image cannot be displayed.
+                </span>
+            );
+        }
     },
 });