Wire up StatusBar size changes to a geminipanel update

When the statusbar changes size, we need to tell the gemini panel to
update. This is slightly tortuous as figuring out the size of the statusbar
isn't completely trivial.

Fixes https://github.com/vector-im/vector-web/issues/945 and
https://github.com/vector-im/vector-web/issues/986

src/components/structures/RoomStatusBar.js

@@ -51,6 +51,11 @@ module.exports = React.createClass({
 
         // callback for when the user clicks on the 'scroll to bottom' button
         onScrollToBottomClick: React.PropTypes.func,
+
+        // callback for when we do something that changes the size of the
+        // status bar. This is used to trigger a re-layout in the parent
+        // component.
+        onResize: React.PropTypes.func,
     },
 
     getInitialState: function() {
@@ -63,6 +68,12 @@ module.exports = React.createClass({
         MatrixClientPeg.get().on("sync", this.onSyncStateChange);
     },
 
+    componentDidUpdate: function(prevProps, prevState) {
+        if(this.props.onResize && this._checkForResize(prevProps, prevState)) {
+            this.props.onResize();
+        }
+    },
+
     componentWillUnmount: function() {
         // we may have entirely lost our client as we're logging out before clicking login on the guest bar...
         if (MatrixClientPeg.get()) {
@@ -79,6 +90,37 @@ module.exports = React.createClass({
         });
     },
 
+    // determine if we need to call onResize
+    _checkForResize: function(prevProps, prevState) {
+        // figure out the old height and the new height of the status bar. We
+        // don't need the actual height - just whether it is likely to have
+        // changed - so we use '0' to indicate normal size, and other values to
+        // indicate other sizes.
+        var oldSize, newSize;
+
+        if (prevState.syncState === "ERROR") {
+            oldSize = 1;
+        } else if (prevProps.tabCompleteEntries) {
+            oldSize = 0;
+        } else if (prevProps.hasUnsentMessages) {
+            oldSize = 2;
+        } else {
+            oldSize = 0;
+        }
+
+        if (this.state.syncState === "ERROR") {
+            newSize = 1;
+        } else if (this.props.tabCompleteEntries) {
+            newSize = 0;
+        } else if (this.props.hasUnsentMessages) {
+            newSize = 2;
+        } else {
+            newSize = 0;
+        }
+
+        return newSize != oldSize;
+    },
+
     // return suitable content for the image on the left of the status bar.
     //
     // if wantPlaceholder is true, we include a "..." placeholder if

src/components/structures/RoomView.js

@@ -1444,9 +1444,10 @@ module.exports = React.createClass({
     },
 
     onChildResize: function() {
-        // When the video or the message composer resizes, the scroll panel
+        // When the video, status bar, or the message composer resizes, the
-        // also changes size.  Work around GeminiScrollBar fail by telling it
+        // scroll panel also changes size.  Work around GeminiScrollBar fail by
-        // about it. This also ensures that the scroll offset is updated.
+        // telling it about it. This also ensures that the scroll offset is
+        // updated.
         if (this.refs.messagePanel) {
             this.refs.messagePanel.forceUpdate();
         }
@@ -1577,6 +1578,7 @@ module.exports = React.createClass({
                 hasActiveCall={inCall}
                 onResendAllClick={this.onResendAllClick}
                 onScrollToBottomClick={this.jumpToLiveTimeline}
+                onResize={this.onChildResize}
                 />
         }