PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #346 from matrix-org/revert-343-feature-inline-link-preview

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

46
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"> </div>
<img style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }} src={ image } />
</a>
</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> </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>
); );
} }