Display some sensible UI for non-mxc content URLs.

This commit is contained in:
David Baker 2015-11-12 14:16:57 +00:00
parent c12c716dc0
commit c8a8306165
2 changed files with 46 additions and 21 deletions

View file

@ -30,15 +30,25 @@ module.exports = React.createClass({
var content = this.props.mxEvent.getContent(); var content = this.props.mxEvent.getContent();
var cli = MatrixClientPeg.get(); var cli = MatrixClientPeg.get();
var httpUrl = cli.mxcUrlToHttp(content.url);
var text = this.presentableTextForFile(content);
if (httpUrl) {
return ( return (
<span className="mx_MFileTile"> <span className="mx_MFileTile">
<div className="mx_MImageTile_download"> <div className="mx_MImageTile_download">
<a href={cli.mxcUrlToHttp(content.url)} target="_blank"> <a href={cli.mxcUrlToHttp(content.url)} target="_blank">
<img src="img/download.png" width="10" height="12"/> <img src="img/download.png" width="10" height="12"/>
Download {this.presentableTextForFile(content)} Download {text}
</a> </a>
</div> </div>
</span> </span>
); );
} else {
var extra = text ? ': '+text : '';
return <span className="mx_MFileTile">
Invalid file{extra}
</span>
}
}, },
}); });

View file

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