diff --git a/skins/base/views/organisms/RoomView.js b/skins/base/views/organisms/RoomView.js index 557943b4f..11ca840df 100644 --- a/skins/base/views/organisms/RoomView.js +++ b/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 = ( +
+ + {unreadMsgs} +
+ ); + } + else if (typingString) { statusBar = (
diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js index dca3881c0..e03c9a972 100644 --- a/src/controllers/organisms/RoomView.js +++ b/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(); },