mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-24 02:05:45 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #343 from ribot/feature-inline-link-preview

Browse source 
Amends react template and removes opening image in lightbox
This commit is contained in:
Matthew Hodgson 2016-07-15 13:55:07 +01:00 committed by GitHub
commit 78b7d04710
1 changed files with 12 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -73,36 +73,13 @@ module.exports = React.createClass({
this.unmounted = true; this.unmounted = true;
}, },
onImageClick: function(ev) {
var p = this.state.preview;
if (ev.button != 0 || ev.metaKey) return;
ev.preventDefault();
var ImageView = sdk.getComponent("elements.ImageView");
var src = p["og:image"];
if (src && src.startsWith("mxc://")) {
src = MatrixClientPeg.get().mxcUrlToHttp(src);
}
var params = {
src: src,
width: p["og:image:width"],
height: p["og:image:height"],
name: p["og:title"] || p["og:description"] || this.props.link,
fileSize: p["matrix:image:size"],
link: this.props.link,
};
Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
},
render: function() { render: function() {
var p = this.state.preview; var p = this.state.preview;
if (!p) return <div/>; if (!p) return <div/>;
// FIXME: do we want to factor out all image displaying between this and MImageBody - especially for lightboxing? // FIXME: do we want to factor out all image displaying between this and MImageBody - especially for lightboxing?
var image = p["og:image"]; var image = p["og:image"];
var imageMaxWidth = 100, imageMaxHeight = 100; var imageMaxWidth = 600, imageMaxHeight = 400;
if (image && image.startsWith("mxc://")) { if (image && image.startsWith("mxc://")) {
image = MatrixClientPeg.get().mxcUrlToHttp(image, imageMaxWidth, imageMaxHeight); image = MatrixClientPeg.get().mxcUrlToHttp(image, imageMaxWidth, imageMaxHeight);
} }
@ -114,23 +91,24 @@ module.exports = React.createClass({
var img; var img;
if (image) { if (image) {
img = <div className="mx_LinkPreviewWidget_image" style={{ height: thumbHeight }}> img = (
<img style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }} src={ image } onClick={ this.onImageClick }/> <div className="mx_LinkPreviewWidget_image" style={{ height: thumbHeight }}>
<a href={ this.props.link } target="_blank">
<img style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }} src={ image } />
</a>
</div> </div>
);
} }
return ( return (
<div className="mx_LinkPreviewWidget" > <div className="mx_LinkPreviewWidget" >
{ img }
<div className="mx_LinkPreviewWidget_caption"> <div className="mx_LinkPreviewWidget_caption">
<div className="mx_LinkPreviewWidget_title"><a href={ this.props.link } target="_blank">{ p["og:title"] }</a></div> <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_siteName">{ p["og:site_name"] ? ("from " + p["og:site_name"]) : null }</div>
<div className="mx_LinkPreviewWidget_description" ref="description">
{ p["og:description"] }
</div> </div>
</div> { img }
<img className="mx_LinkPreviewWidget_cancel" src="img/cancel.svg" width="18" height="18" <div className="mx_LinkPreviewWidget_description" ref="description">{ p["og:description"] } <a href={ this.props.link } target="_blank">Read more</a></div>
onClick={ this.props.onCancelClick }/> <img className="mx_LinkPreviewWidget_indicator" src="img/icon-link.svg" width="13" height="16" />
</div> </div>
); );
} }