Hide RoomStatusBar when it displays nothing

src/components/structures/RoomStatusBar.js

@@ -20,6 +20,8 @@ var dis = require("../../dispatcher");
 var WhoIsTyping = require("../../WhoIsTyping");
 var MatrixClientPeg = require("../../MatrixClientPeg");
 
+const HIDE_DEBOUNCE_MS = 2000;
+
 module.exports = React.createClass({
     displayName: 'RoomStatusBar',
 
@@ -60,6 +62,13 @@ module.exports = React.createClass({
         // status bar. This is used to trigger a re-layout in the parent
         // component.
         onResize: React.PropTypes.func,
+
+        // callback for when the status bar can be hidden from view, as it is
+        // not displaying anything
+        onHidden: React.PropTypes.func,
+        // callback for when the status bar is displaying something and should
+        // be visible
+        onVisible: React.PropTypes.func,
     },
 
     getInitialState: function() {
@@ -78,6 +87,18 @@ module.exports = React.createClass({
         if(this.props.onResize && this._checkForResize(prevProps, prevState)) {
             this.props.onResize();
         }
+
+        const size = this._getSize(this.state, this.props);
+        if (size > 0) {
+            this.props.onVisible();
+        } else {
+            if (this.hideDebouncer) {
+                clearTimeout(this.hideDebouncer);
+            }
+            this.hideDebouncer = setTimeout(() => {
+                this.props.onHidden();
+            }, HIDE_DEBOUNCE_MS);
+        }
     },
 
     componentWillUnmount: function() {
@@ -104,35 +125,24 @@ 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;
+    // 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.
+    _getSize: function(state, props) {
+        if (state.syncState === "ERROR" || state.whoisTypingString) {
+            return 1;
+        } else if (props.tabCompleteEntries) {
+            return 0;
+        } else if (props.hasUnsentMessages) {
+            return 2;
         }
+        return 0;
+    },
 
-        return newSize != oldSize;
+    // determine if we need to call onResize
+    _checkForResize: function(prevProps, prevState) {
+        // figure out the old height and the new height of the status bar.
+        return this._getSize(prevProps, prevState) !== this._getSize(this.props, this.state);
     },
 
     // return suitable content for the image on the left of the status bar.

src/components/structures/RoomView.js

@@ -146,6 +146,8 @@ module.exports = React.createClass({
             showTopUnreadMessagesBar: false,
 
             auxPanelMaxHeight: undefined,
+
+            statusBarVisible: true,
         }
     },
 
@@ -1331,6 +1333,18 @@ module.exports = React.createClass({
         // no longer anything to do here
     },
 
+    onStatusBarVisible: function() {
+        this.setState({
+            statusBarVisible: true,
+        });
+    },
+
+    onStatusBarHidden: function() {
+        this.setState({
+            statusBarVisible: false,
+        });
+    },
+
     showSettings: function(show) {
         // XXX: this is a bit naughty; we should be doing this via props
         if (show) {
@@ -1513,7 +1527,9 @@ module.exports = React.createClass({
                 onCancelAllClick={this.onCancelAllClick}
                 onScrollToBottomClick={this.jumpToLiveTimeline}
                 onResize={this.onChildResize}
-                />
+                onVisible={this.onStatusBarVisible}
+                onHidden={this.onStatusBarHidden}
+            />
         }
 
         var aux = null;
@@ -1667,6 +1683,13 @@ module.exports = React.createClass({
                 </div>
             );
         }
+        let statusBarAreaClass = "mx_RoomView_statusArea mx_fadable mx_max_height_animated mx_margin_top_animated";
+        if (this.state.statusBarVisible) {
+            statusBarAreaClass += " mx_RoomView_statusArea_expanded";
+        }
+        if (!this.state.atEndOfLiveTimeline) {
+            statusBarAreaClass += " mx_RoomView_statusArea_mid_timeline";
+        }
 
         return (
             <div className={ "mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "") } ref="roomView">
@@ -1689,7 +1712,7 @@ module.exports = React.createClass({
                 { topUnreadMessagesBar }
                 { messagePanel }
                 { searchResultsPanel }
-                <div className="mx_RoomView_statusArea mx_fadable" style={{ opacity: this.props.opacity }}>
+                <div className={statusBarAreaClass} style={{opacity: this.props.opacity}}>
                     <div className="mx_RoomView_statusAreaBox">
                         <div className="mx_RoomView_statusAreaBox_line"></div>
                         { statusBar }