Implement unread message status when scrolled up.

skins/base/views/organisms/RoomView.js

@@ -64,6 +64,13 @@ module.exports = React.createClass({
         );
     },
 
+    getUnreadMessagesString: function() {
+        if (!this.state.numUnreadMessages) {
+            return "";
+        }
+        return this.state.numUnreadMessages + " unread messages";
+    },
+
     render: function() {
         if (!this.state.room) {
             return (
@@ -120,7 +127,18 @@ module.exports = React.createClass({
                 );
             } else {
                 var typingString = this.getWhoIsTypingString();
-                if (typingString) {
+                var unreadMsgs = this.getUnreadMessagesString();
+                // unread count trumps who is typing since the unread count is only
+                // set when you've scrolled up
+                if (unreadMsgs) {
+                    statusBar = (
+                        <div className="mx_RoomView_typingBar">
+                            <img src="img/typing.png" width="40" height="40" alt=""/>
+                            {unreadMsgs}
+                        </div>
+                    );
+                }
+                else if (typingString) {
                     statusBar = (
                         <div className="mx_RoomView_typingBar">
                             <img src="img/typing.png" width="40" height="40" alt=""/>

src/controllers/organisms/RoomView.js

@@ -52,6 +52,7 @@ module.exports = {
             messageCap: INITIAL_SIZE,
             editingRoomSettings: false,
             uploadingRoomSettings: false,
+            numUnreadMessages: 0
         }
     },
 
@@ -130,8 +131,23 @@ module.exports = {
                 (messageWrapper.clientHeight + 150)
             );
         }
+
+        var currentUnread = this.state.numUnreadMessages;
+        if (!toStartOfTimeline && 
+                (ev.getSender() !== MatrixClientPeg.get().credentials.userId)) {
+            // update unread count when scrolled up
+            if (this.atBottom) {
+                currentUnread = 0;
+            }
+            else {
+                currentUnread += 1;
+            }
+        }
+
+
         this.setState({
-            room: MatrixClientPeg.get().getRoom(this.props.roomId)
+            room: MatrixClientPeg.get().getRoom(this.props.roomId),
+            numUnreadMessages: currentUnread
         });
 
         if (toStartOfTimeline && !this.state.paginating) {
@@ -178,6 +194,9 @@ module.exports = {
             }
         } else if (this.atBottom) {
             messageWrapper.scrollTop = messageWrapper.scrollHeight;
+            if (this.state.numUnreadMessages !== 0) {
+                this.setState({numUnreadMessages: 0});
+            }
         }
     },
 
@@ -234,7 +253,11 @@ module.exports = {
     onMessageListScroll: function(ev) {
         if (this.refs.messageWrapper) {
             var messageWrapper = this.refs.messageWrapper.getDOMNode();
+            var wasAtBottom = this.atBottom;
             this.atBottom = messageWrapper.scrollHeight - messageWrapper.scrollTop <= messageWrapper.clientHeight;
+            if (this.atBottom && !wasAtBottom) {
+                this.forceUpdate(); // remove unread msg count
+            }
         }
         if (!this.state.paginating) this.fillSpace();
     },