OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Revert "Amends react template and removes opening image in lightbox"

pull/21833/head
Matthew Hodgson 2016-07-15 16:54:56 +01:00 committed by GitHub
parent 41bff38713
commit a61168d943
1 changed files with 34 additions and 12 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,13 +73,36 @@ 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 = 600, imageMaxHeight = 400; var imageMaxWidth = 100, imageMaxHeight = 100;
if (image && image.startsWith("mxc://")) { if (image && image.startsWith("mxc://")) {
image = MatrixClientPeg.get().mxcUrlToHttp(image, imageMaxWidth, imageMaxHeight); image = MatrixClientPeg.get().mxcUrlToHttp(image, imageMaxWidth, imageMaxHeight);
} }
@ -91,24 +114,23 @@ module.exports = React.createClass({
var img; var img;
if (image) { if (image) {
img = ( img = <div className="mx_LinkPreviewWidget_image" style={{ height: thumbHeight }}>
<div className="mx_LinkPreviewWidget_image" style={{ height: thumbHeight }}> <img style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }} src={ image } onClick={ this.onImageClick }/>
<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"] ? ("from " + p["og:site_name"]) : null }</div> <div className="mx_LinkPreviewWidget_siteName">{ p["og:site_name"] ? (" - " + p["og:site_name"]) : null }</div>
<div className="mx_LinkPreviewWidget_description" ref="description">
{ p["og:description"] }
</div> </div>
{ img } </div>
<div className="mx_LinkPreviewWidget_description" ref="description">{ p["og:description"] } <a href={ this.props.link } target="_blank">Read more</a></div> <img className="mx_LinkPreviewWidget_cancel" src="img/cancel.svg" width="18" height="18"
<img className="mx_LinkPreviewWidget_indicator" src="img/icon-link.svg" width="13" height="16" /> onClick={ this.props.onCancelClick }/>
</div> </div>
); );
} }