imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improve layout and make thumbnails work

Browse source
This commit is contained in:
Matthew Hodgson 2016-04-01 02:16:11 +01:00
parent e6842eab94
commit 4d959fc33b
1 changed files with 12 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/views/rooms/LinkPreviewWidget.js
View file

@ -29,7 +29,7 @@ module.exports = React.createClass({
getInitialState: function() { getInitialState: function() {
return { return {
preview: {} preview: null;
}; };
}, },
@ -37,23 +37,27 @@ module.exports = React.createClass({
MatrixClientPeg.get().getUrlPreview(this.props.link).then((res)=>{ MatrixClientPeg.get().getUrlPreview(this.props.link).then((res)=>{
this.setState({ preview: res }); this.setState({ preview: res });
}, (error)=>{ }, (error)=>{
console.error("Failed to get preview for URL: " + error); console.error("Failed to get preview for " + this.props.link + " " + error);
}); });
}, },
render: function() { render: function() {
var p = this.state.preview; var p = this.state.preview;
if (!p) return <div/>;
var img = p["og:image"]
if (img && img.startsWith("mxc://")) img = MatrixClientPeg.get().mxcUrlToHttp(img, 100, 100)
return ( return (
<div className="mx_LinkPreviewWidget"> <div className="mx_LinkPreviewWidget">
<div className="mx_LinkPreviewWidget_title">{ p["og:title"] }</div>
<div className="mx_LinkPreviewWidget_siteName">{ p["og:site_name"] ? (" &emdash; " + p["og:site_name"]) : null }</div>
<div className="mx_LinkPreviewWidget_image"> <div className="mx_LinkPreviewWidget_image">
<img src={ p["og:image"] }/> <a href={ this.props.link } target="_blank"><img style={{ maxWidth: 100, maxHeight: 100 }} src={ img }/></a>
</div> </div>
<div className="mx_LinkPreviewWidget_description"> <div className="mx_LinkPreviewWidget_caption">
{ p["og:description"] } <div className="mx_LinkPreviewWidget_title"><a href={ this.props.link } target="_blank">{ p["og:title"] }</a></div>
<div className="mx_LinkPreviewWidget_siteName">{ p["og:site_name"] ? (" - " + p["og:site_name"]) : null }</div>
<div className="mx_LinkPreviewWidget_description">
{ p["og:description"] }
</div>
</div> </div>
</div> </div>
); );
} }