From 393e8ff6125de81800da86861bf3b0cfec81c781 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Mon, 7 Mar 2016 22:27:35 +0000
Subject: [PATCH 1/3] Revert "Revert "Merge pull request #193 from
 matrix-org/rav/shouldComponentUpdates""

Put the shouldComponentUpdate methods back in, now that Matthew has stopped
demoing.

This reverts commit 606fdcb8dff224cf36f5e27ec9a780fb87812a9f.
---
 src/ObjectUtils.js                         | 31 ++++++++++++++++++++++
 src/components/structures/RoomView.js      |  6 +++++
 src/components/structures/TimelinePanel.js |  6 +++++
 3 files changed, 43 insertions(+)

diff --git a/src/ObjectUtils.js b/src/ObjectUtils.js
index 41dc34cca7..07a16df501 100644
--- a/src/ObjectUtils.js
+++ b/src/ObjectUtils.js
@@ -77,3 +77,34 @@ module.exports.getKeyValueArrayDiffs = function(before, after) {
 
     return results;
 };
+
+/**
+ * Shallow-compare two objects for equality: each key and value must be
+ * identical
+ */
+module.exports.shallowEqual = function(objA, objB) {
+    if (objA === objB) {
+        return true;
+    }
+
+    if (typeof objA !== 'object' || objA === null ||
+          typeof objB !== 'object' || objB === null) {
+        return false;
+    }
+
+    var keysA = Object.keys(objA);
+    var keysB = Object.keys(objB);
+
+    if (keysA.length !== keysB.length) {
+        return false;
+    }
+
+    for (var i = 0; i < keysA.length; i++) {
+        var key = keysA[i];
+        if (!objB.hasOwnProperty(key) || objA[key] !== objB[key]) {
+            return false;
+        }
+    }
+
+    return true;
+};
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index e3d60ed83b..fc2190e498 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -38,6 +38,7 @@ var SlashCommands = require("../../SlashCommands");
 var dis = require("../../dispatcher");
 var Tinter = require("../../Tinter");
 var rate_limited_func = require('../../ratelimitedfunc');
+var ObjectUtils = require('../../ObjectUtils');
 
 var DEBUG = false;
 
@@ -164,6 +165,11 @@ module.exports = React.createClass({
         }
     },
 
+    shouldComponentUpdate: function(nextProps, nextState) {
+        return (!ObjectUtils.shallowEqual(this.props, nextProps) ||
+                !ObjectUtils.shallowEqual(this.state, nextState));
+    },
+
     componentWillUnmount: function() {
         // set a boolean to say we've been unmounted, which any pending
         // promises can use to throw away their results.
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index f4747cb026..c320d0b99b 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -24,6 +24,7 @@ var EventTimeline = Matrix.EventTimeline;
 var sdk = require('../../index');
 var MatrixClientPeg = require("../../MatrixClientPeg");
 var dis = require("../../dispatcher");
+var ObjectUtils = require('../../ObjectUtils');
 
 var PAGINATE_SIZE = 20;
 var INITIAL_SIZE = 20;
@@ -146,6 +147,11 @@ var TimelinePanel = React.createClass({
         }
     },
 
+    shouldComponentUpdate: function(nextProps, nextState) {
+        return (!ObjectUtils.shallowEqual(this.props, nextProps) ||
+                !ObjectUtils.shallowEqual(this.state, nextState));
+    },
+
     componentWillUnmount: function() {
         // set a boolean to say we've been unmounted, which any pending
         // promises can use to throw away their results.

From 6c928f12b2f25dd5b866d23f5022016d3ab1229b Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 8 Mar 2016 12:16:34 +0000
Subject: [PATCH 2/3] ForceUpdate the scrollpanel when the aux panel changes
 size

Catch some more cases when we ought to be updating the gemini scroll stuff.
---
 src/components/structures/RoomView.js  | 28 ++++++++++++++------------
 src/components/views/rooms/AuxPanel.js | 21 +++++++++++++++----
 src/components/views/voip/CallView.js  |  8 ++++++--
 3 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index fc2190e498..84ad8f595c 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -991,10 +991,10 @@ module.exports = React.createClass({
         // but it's better than the video going missing entirely
         if (auxPanelMaxHeight < 50) auxPanelMaxHeight = 50;
 
-        // we may need to resize the gemini panel after changing the aux panel
-        // size, so add a callback to onChildResize.
-        this.setState({auxPanelMaxHeight: auxPanelMaxHeight},
-                      this.onChildResize);
+        this.setState({auxPanelMaxHeight: auxPanelMaxHeight});
+
+        // changing the maxHeight on the auxpanel will trigger a callback go
+        // onChildResize, so no need to worry about that here.
     },
 
     onFullscreenClick: function() {
@@ -1042,8 +1042,15 @@ module.exports = React.createClass({
         // XXX: this is a bit naughty; we should be doing this via props
         if (show) {
             this.setState({editingRoomSettings: true});
-            var self = this;
-            setTimeout(function() { self.onResize() }, 0);
+        }
+    },
+
+    // this has to be a proper method rather than an unnamed function,
+    // otherwise react calls it with null on each update.
+    _gatherTimelinePanelRef: function(r) {
+        this.refs.messagePanel = r;
+        if(r) {
+            this.updateTint();
         }
     },
 
@@ -1206,7 +1213,7 @@ module.exports = React.createClass({
               draggingFile={this.state.draggingFile}
               displayConfCallNotification={this.state.displayConfCallNotification}
               maxHeight={this.state.auxPanelMaxHeight}
-              onCallViewVideoRezize={this.onChildResize} >
+              onResize={this.onChildResize} >
                 { aux }
             </AuxPanel>
         );
@@ -1285,12 +1292,7 @@ module.exports = React.createClass({
         }
 
         var messagePanel = (
-            <TimelinePanel ref={(r) => {
-                    this.refs.messagePanel = r;
-                    if(r) {
-                        this.updateTint();
-                    }
-                }}
+            <TimelinePanel ref={this._gatherTimelinePanelRef}
                 room={this.state.room}
                 hidden={hideMessagePanel}
                 highlightedEventId={this.props.highlightedEventId}
diff --git a/src/components/views/rooms/AuxPanel.js b/src/components/views/rooms/AuxPanel.js
index 49c7dfc6e5..ec885989bc 100644
--- a/src/components/views/rooms/AuxPanel.js
+++ b/src/components/views/rooms/AuxPanel.js
@@ -18,6 +18,7 @@ var React = require('react');
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 var sdk = require('../../../index');
 var dis = require("../../../dispatcher");
+var ObjectUtils = require('../../../ObjectUtils');
 
 module.exports = React.createClass({
     displayName: 'AuxPanel',
@@ -39,9 +40,21 @@ module.exports = React.createClass({
         // therein
         maxHeight: React.PropTypes.number,
 
-        // a callback which is called when the video element in a voip call is
-        // resized due to a change in video metadata
-        onCallViewVideoResize: React.PropTypes.func,
+        // a callback which is called when the content of the aux panel changes
+        // content in a way that is likely to make it change size.
+        onResize: React.PropTypes.func,
+    },
+
+    shouldComponentUpdate: function(nextProps, nextState) {
+        return (!ObjectUtils.shallowEqual(this.props, nextProps) ||
+                !ObjectUtils.shallowEqual(this.state, nextState));
+    },
+
+    componentDidUpdate: function(prevProps, prevState) {
+        // most changes are likely to cause a resize
+        if (this.props.onResize) {
+            this.props.onResize();
+        }
     },
 
     onConferenceNotificationClick: function() {
@@ -87,7 +100,7 @@ module.exports = React.createClass({
         var callView = (
             <CallView ref="callView" room={this.props.room}
                 ConferenceHandler={this.props.conferenceHandler}
-                onResize={this.props.onCallViewVideoResize}
+                onResize={this.props.onResize}
                 maxVideoHeight={this.props.maxHeight}
             />
         );
diff --git a/src/components/views/voip/CallView.js b/src/components/views/voip/CallView.js
index f4b85f83bf..cc5289e7f1 100644
--- a/src/components/views/voip/CallView.js
+++ b/src/components/views/voip/CallView.js
@@ -38,8 +38,8 @@ module.exports = React.createClass({
         // a callback which is called when the user clicks on the video div
         onClick: React.PropTypes.func,
 
-        // a callback which is called when the video within the callview is
-        // resized due to a change in video metadata
+        // a callback which is called when the content in the callview changes
+        // in a way that is likely to cause a resize.
         onResize: React.PropTypes.func,
     },
 
@@ -96,6 +96,10 @@ module.exports = React.createClass({
             this.getVideoView().getRemoteVideoElement().style.display = "none";
             dis.dispatch({action: 'video_fullscreen', fullscreen: false});
         }
+
+        if (this.props.onResize) {
+            this.props.onResize();
+        }
     },
 
     getVideoView: function() {

From 4b333d2363ad2fc25fea4e159bbce1ba0e586dc3 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 9 Mar 2016 15:45:56 +0000
Subject: [PATCH 3/3] Update the timeline when a local echo arrives

---
 src/components/structures/TimelinePanel.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index c320d0b99b..431f5bf615 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -120,6 +120,7 @@ var TimelinePanel = React.createClass({
         MatrixClientPeg.get().on("Room.timelineReset", this.onRoomTimelineReset);
         MatrixClientPeg.get().on("Room.redaction", this.onRoomRedaction);
         MatrixClientPeg.get().on("Room.receipt", this.onRoomReceipt);
+        MatrixClientPeg.get().on("Room.localEchoUpdated", this.onLocalEchoUpdated);
 
         this._initTimeline(this.props);
     },
@@ -167,6 +168,7 @@ var TimelinePanel = React.createClass({
             client.removeListener("Room.timelineReset", this.onRoomTimelineReset);
             client.removeListener("Room.redaction", this.onRoomRedaction);
             client.removeListener("Room.receipt", this.onRoomReceipt);
+            client.removeListener("Room.localEchoUpdated", this.onLocalEchoUpdated);
         }
     },
 
@@ -297,6 +299,21 @@ var TimelinePanel = React.createClass({
         this.forceUpdate();
     },
 
+    onLocalEchoUpdated: function(ev, room, oldEventId) {
+        if (this.unmounted) return;
+
+        // ignore events for other rooms
+        if (room !== this.props.room) return;
+
+        // Once the remote echo for an event arrives, we need to turn the
+        // greyed-out event black.  When the localEchoUpdated event is raised,
+        // the nested 'event' property within one of the events in
+        // _timelineWindow will have been replaced with the new event. So
+        // all that is left to do here is to make the message-panel re-render.
+        this.forceUpdate();
+    },
+
+
     sendReadReceipt: function() {
         if (!this.refs.messagePanel) return;