From cc69e982a75985964afdccb3e9fcc264e221ff5e Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Thu, 9 Feb 2017 10:01:51 +0000 Subject: [PATCH 1/3] Use single state to set both avatars and typing notif --- src/WhoIsTyping.js | 3 +-- src/components/structures/RoomStatusBar.js | 21 +++++++++------------ 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/src/WhoIsTyping.js b/src/WhoIsTyping.js index ecd7c495f9..bff536a61e 100644 --- a/src/WhoIsTyping.js +++ b/src/WhoIsTyping.js @@ -48,8 +48,7 @@ module.exports = { return whoIsTyping; }, - whoIsTypingString: function(room, limit) { - const whoIsTyping = this.usersTypingApartFromMe(room); + whoIsTypingString: function(whoIsTyping, limit) { const othersCount = limit === undefined ? 0 : Math.max(whoIsTyping.length - limit, 0); if (whoIsTyping.length == 0) { diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js index 3fd0a3b751..d0f4fbfa0f 100644 --- a/src/components/structures/RoomStatusBar.js +++ b/src/components/structures/RoomStatusBar.js @@ -89,10 +89,7 @@ module.exports = React.createClass({ getInitialState: function() { return { syncState: MatrixClientPeg.get().getSyncState(), - whoisTypingString: WhoIsTyping.whoIsTypingString( - this.props.room, - this.props.whoIsTypingLimit - ), + usersTyping: WhoIsTyping.usersTypingApartFromMe(this.props.room), }; }, @@ -141,10 +138,7 @@ module.exports = React.createClass({ onRoomMemberTyping: function(ev, member) { this.setState({ - whoisTypingString: WhoIsTyping.whoIsTypingString( - this.props.room, - this.props.whoIsTypingLimit - ), + usersTyping: WhoIsTyping.usersTypingApartFromMe(this.props.room), }); }, @@ -153,7 +147,7 @@ module.exports = React.createClass({ // indicate other sizes. _getSize: function(state, props) { if (state.syncState === "ERROR" || - state.whoisTypingString || + (state.usersTyping.length > 0) || props.numUnreadMessages || !props.atEndOfLiveTimeline || props.hasActiveCall) { @@ -220,7 +214,7 @@ module.exports = React.createClass({ }, _renderTypingIndicatorAvatars: function(limit) { - let users = WhoIsTyping.usersTypingApartFromMe(this.props.room); + let users = this.state.usersTyping; let othersCount = Math.max(users.length - limit, 0); users = users.slice(0, limit); @@ -324,7 +318,10 @@ module.exports = React.createClass({ ); } - var typingString = this.state.whoisTypingString; + const typingString = WhoIsTyping.whoIsTypingString( + this.state.usersTyping, + this.props.whoIsTypingLimit + ); if (typingString) { return (
@@ -347,7 +344,7 @@ module.exports = React.createClass({ render: function() { var content = this._getContent(); - var indicator = this._getIndicator(this.state.whoisTypingString !== null); + var indicator = this._getIndicator(this.state.usersTyping.length > 0); return (
From 553054409fdd930656da2a755c7d3d0dff8a8d6a Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Thu, 9 Feb 2017 10:01:59 +0000 Subject: [PATCH 2/3] Use (props,state) ordering of arguments There was a bug here that meant that sometimes arguments were given in the wrong order; presumably leading to the status bar not appearing for calls etc. --- src/components/structures/RoomStatusBar.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js index d0f4fbfa0f..adbfb25337 100644 --- a/src/components/structures/RoomStatusBar.js +++ b/src/components/structures/RoomStatusBar.js @@ -103,7 +103,7 @@ module.exports = React.createClass({ this.props.onResize(); } - const size = this._getSize(this.state, this.props); + const size = this._getSize(this.props, this.state); if (size > 0) { this.props.onVisible(); } else { @@ -145,7 +145,7 @@ module.exports = React.createClass({ // 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) { + _getSize: function(props, state) { if (state.syncState === "ERROR" || (state.usersTyping.length > 0) || props.numUnreadMessages || @@ -163,7 +163,8 @@ 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. - return this._getSize(prevProps, prevState) !== this._getSize(this.props, this.state); + return this._getSize(prevProps, prevState) + !== this._getSize(this.props, this.state); }, // return suitable content for the image on the left of the status bar. From 103710728f74f3c74e5ead0a65eaf59084788f5a Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Thu, 9 Feb 2017 10:30:06 +0000 Subject: [PATCH 3/3] Do not show "+1 other" Instead show a user name or avatar. --- src/WhoIsTyping.js | 8 +++++--- src/components/structures/RoomStatusBar.js | 9 ++++++--- src/components/structures/RoomView.js | 2 +- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/WhoIsTyping.js b/src/WhoIsTyping.js index bff536a61e..4502b0ccd9 100644 --- a/src/WhoIsTyping.js +++ b/src/WhoIsTyping.js @@ -49,8 +49,10 @@ module.exports = { }, whoIsTypingString: function(whoIsTyping, limit) { - const othersCount = limit === undefined ? - 0 : Math.max(whoIsTyping.length - limit, 0); + let othersCount = 0; + if (whoIsTyping.length > limit) { + othersCount = whoIsTyping.length - limit + 1; + } if (whoIsTyping.length == 0) { return ''; } else if (whoIsTyping.length == 1) { @@ -61,7 +63,7 @@ module.exports = { }); if (othersCount) { const other = ' other' + (othersCount > 1 ? 's' : ''); - return names.slice(0, limit).join(', ') + ' and ' + + return names.slice(0, limit - 1).join(', ') + ' and ' + othersCount + other + ' are typing'; } else { const lastPerson = names.pop(); diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js index adbfb25337..288ca0b974 100644 --- a/src/components/structures/RoomStatusBar.js +++ b/src/components/structures/RoomStatusBar.js @@ -82,7 +82,7 @@ module.exports = React.createClass({ getDefaultProps: function() { return { - whoIsTypingLimit: 2, + whoIsTypingLimit: 3, }; }, @@ -217,8 +217,11 @@ module.exports = React.createClass({ _renderTypingIndicatorAvatars: function(limit) { let users = this.state.usersTyping; - let othersCount = Math.max(users.length - limit, 0); - users = users.slice(0, limit); + let othersCount = 0; + if (users.length > limit) { + othersCount = users.length - limit + 1; + users = users.slice(0, limit - 1); + } let avatars = users.map((u, index) => { let showInitial = othersCount === 0 && index === users.length - 1; diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index a7d52019c4..432dc5b724 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -1537,7 +1537,7 @@ module.exports = React.createClass({ onResize={this.onChildResize} onVisible={this.onStatusBarVisible} onHidden={this.onStatusBarHidden} - whoIsTypingLimit={2} + whoIsTypingLimit={3} />; }