Merge pull request #354 from vector-im/ignore-non-mxc

Display some sensible UI for non-mxc content URLs.

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();
 
+        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 {this.presentableTextForFile(content)}
+                            Download {text}
                         </a>
                     </div>
                 </span>
             );
+        } else {
+            var extra = text ? ': '+text : '';
+            return <span className="mx_MFileTile">
+                Invalid file{extra}
+            </span>
+        }
     },
 });

src/skins/vector/views/molecules/MImageTile.js

@@ -73,10 +73,12 @@ module.exports = React.createClass({
         var imgStyle = {};
         if (thumbHeight) imgStyle['height'] = thumbHeight;
 
+        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={cli.mxcUrlToHttp(content.url, 480, 360)} alt={content.body} style={imgStyle} />
+                        <img className="mx_MImageTile_thumbnail" src={thumbUrl} alt={content.body} style={imgStyle} />
                     </a>
                     <div className="mx_MImageTile_download">
                         <a href={cli.mxcUrlToHttp(content.url)} target="_blank">
@@ -86,5 +88,18 @@ module.exports = React.createClass({
                     </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>
+            );
+        }
     },
 });