incorporate PR feedback

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();
         }
     },
 

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");

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,
     },
 

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

src/components/views/rooms/LinkPreviewWidget.js

@@ -32,10 +32,10 @@ module.exports = React.createClass({
     displayName: 'LinkPreviewWidget',
 
     propTypes: {
-        link: React.PropTypes.string.isRequired,
+        link: React.PropTypes.string.isRequired, // the URL being previewed
-        mxEvent: React.PropTypes.object.isRequired,
+        mxEvent: React.PropTypes.object.isRequired, // the Event associated with the preview
-        onCancelClick: React.PropTypes.func,
+        onCancelClick: React.PropTypes.func, // called when the preview's cancel ('hide') button is clicked
-        onWidgetLoad: React.PropTypes.func,
+        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.setState(
-            this.props.onWidgetLoad();
+                { 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) {
+        if (ev.button != 0 || ev.metaKey) return;
-            ev.preventDefault();
+        ev.preventDefault();
-            var ImageView = sdk.getComponent("elements.ImageView");
+        var ImageView = sdk.getComponent("elements.ImageView");
 
-            var src = p["og:image"];
+        var src = p["og:image"];
-            if (src && src.startsWith("mxc://")) {
+        if (src && src.startsWith("mxc://")) {
-                src = MatrixClientPeg.get().mxcUrlToHttp(src);
+            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 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() {