From 1d8b08040e886e972a4cbc9d577552b313eeb4b3 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 7 Apr 2016 18:58:50 +0100 Subject: [PATCH] incorporate PR feedback --- src/components/structures/MessagePanel.js | 1 + src/components/views/messages/MImageBody.js | 5 +- src/components/views/messages/MessageEvent.js | 2 +- src/components/views/messages/TextualBody.js | 26 +++++----- .../views/rooms/LinkPreviewWidget.js | 49 ++++++++++--------- 5 files changed, 42 insertions(+), 41 deletions(-) diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js index 69f622e0d4..773c223331 100644 --- a/src/components/structures/MessagePanel.js +++ b/src/components/structures/MessagePanel.js @@ -405,6 +405,7 @@ module.exports = React.createClass({ var scrollPanel = this.refs.scrollPanel; if (scrollPanel) { scrollPanel.checkScroll(); + scrollPanel.refs.geminiPanel.forceUpdate(); } }, diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js index 2ec2e8ec8f..13f9cf4c19 100644 --- a/src/components/views/messages/MImageBody.js +++ b/src/components/views/messages/MImageBody.js @@ -31,9 +31,6 @@ module.exports = React.createClass({ propTypes: { /* the MatrixEvent to show */ mxEvent: React.PropTypes.object.isRequired, - - /* callback called when images in events are loaded */ - onWidgetLoad: React.PropTypes.func, }, onClick: function onClick(ev) { @@ -50,7 +47,7 @@ module.exports = React.createClass({ if (content.info) { params.width = content.info.w; params.height = content.info.h; - params.size = content.info.size; + params.fileSize = content.info.size; } Modal.createDialog(ImageView, params, "mx_Dialog_lightbox"); diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js index 48512dad22..38a25d4904 100644 --- a/src/components/views/messages/MessageEvent.js +++ b/src/components/views/messages/MessageEvent.js @@ -38,7 +38,7 @@ module.exports = React.createClass({ /* link URL for the highlights */ highlightLink: React.PropTypes.string, - /* callback called when images in events are loaded */ + /* callback called when dynamic content in events are loaded */ onWidgetLoad: React.PropTypes.func, }, diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js index 771bddf86e..36120a3b81 100644 --- a/src/components/views/messages/TextualBody.js +++ b/src/components/views/messages/TextualBody.js @@ -66,6 +66,7 @@ module.exports = React.createClass({ // lazy-load the hidden state of the preview widget from localstorage if (global.localStorage) { var hidden = global.localStorage.getItem("hide_preview_" + this.props.mxEvent.getId()); + // XXX: we're gutwrenching mxEvent here by setting our own custom property on it this.props.mxEvent.widgetHidden = hidden; this.setState({ widgetHidden: hidden }); } @@ -75,18 +76,6 @@ module.exports = React.createClass({ HtmlUtils.highlightDom(ReactDOM.findDOMNode(this)); }, - findLink: function(nodes) { - for (var i = 0; i < nodes.length; i++) { - var node = nodes[i]; - if (node.tagName === "A" && node.getAttribute("href")) { - return node; - } - else if (node.children && node.children.length) { - return this.findLink(node.children) - } - } - }, - shouldComponentUpdate: function(nextProps, nextState) { // exploit that events are immutable :) return (nextProps.mxEvent.getId() !== this.props.mxEvent.getId() || @@ -100,7 +89,20 @@ module.exports = React.createClass({ this.setState({ widgetHidden: nextProps.mxEvent.widgetHidden }); }, + findLink: function(nodes) { + for (var i = 0; i < nodes.length; i++) { + var node = nodes[i]; + if (node.tagName === "A" && node.getAttribute("href")) { + return node; + } + else if (node.children && node.children.length) { + return this.findLink(node.children) + } + } + }, + onCancelClick: function(event) { + // XXX: we're gutwrenching mxEvent here by setting our own custom property on it this.props.mxEvent.widgetHidden = true; this.setState({ widgetHidden: true }); // FIXME: persist this somewhere smarter than local storage diff --git a/src/components/views/rooms/LinkPreviewWidget.js b/src/components/views/rooms/LinkPreviewWidget.js index adfdc1b3d2..302e0f1e75 100644 --- a/src/components/views/rooms/LinkPreviewWidget.js +++ b/src/components/views/rooms/LinkPreviewWidget.js @@ -32,10 +32,10 @@ module.exports = React.createClass({ displayName: 'LinkPreviewWidget', propTypes: { - link: React.PropTypes.string.isRequired, - mxEvent: React.PropTypes.object.isRequired, - onCancelClick: React.PropTypes.func, - onWidgetLoad: React.PropTypes.func, + link: React.PropTypes.string.isRequired, // the URL being previewed + mxEvent: React.PropTypes.object.isRequired, // the Event associated with the preview + onCancelClick: React.PropTypes.func, // called when the preview's cancel ('hide') button is clicked + onWidgetLoad: React.PropTypes.func, // called when the preview's contents has loaded }, getInitialState: function() { @@ -46,8 +46,10 @@ module.exports = React.createClass({ componentWillMount: function() { MatrixClientPeg.get().getUrlPreview(this.props.link, this.props.mxEvent.getTs()).then((res)=>{ - this.setState({ preview: res }); - this.props.onWidgetLoad(); + this.setState( + { preview: res }, + this.props.onWidgetLoad + ); }, (error)=>{ console.error("Failed to get preview for " + this.props.link + " " + error); }); @@ -65,26 +67,25 @@ module.exports = React.createClass({ onImageClick: function(ev) { var p = this.state.preview; - if (ev.button == 0 && !ev.metaKey) { - ev.preventDefault(); - var ImageView = sdk.getComponent("elements.ImageView"); + 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, - size: p["matrix:image:size"], - link: this.props.link, - }; - - Modal.createDialog(ImageView, params, "mx_Dialog_lightbox"); + 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() {