From 7c66d1c8673f0a67282d2cfeeb9e98b94b05af4d Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 24 Jan 2017 16:01:39 +0000
Subject: [PATCH] Sync typing indication with avatar typing indication

Follow the same rules for displaying "is typing" as with the typing avatars.
---
 src/WhoIsTyping.js                         | 19 ++++++++++++-------
 src/components/structures/RoomStatusBar.js |  8 ++++++--
 src/components/structures/RoomView.js      |  1 +
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/WhoIsTyping.js b/src/WhoIsTyping.js
index 8c3838d615..f8e3f1c7fd 100644
--- a/src/WhoIsTyping.js
+++ b/src/WhoIsTyping.js
@@ -32,17 +32,22 @@ module.exports = {
         return whoIsTyping;
     },
 
-    whoIsTypingString: function(room) {
-        var whoIsTyping = this.usersTypingApartFromMe(room);
+    whoIsTypingString: function(room, limit) {
+        const whoIsTyping = this.usersTypingApartFromMe(room);
+        const othersCount = limit === undefined ? 0 : Math.max(whoIsTyping.length - limit, 0);
         if (whoIsTyping.length == 0) {
-            return null;
+            return '';
         } else if (whoIsTyping.length == 1) {
             return whoIsTyping[0].name + ' is typing';
+        }
+        const names = whoIsTyping.map(function(m) {
+            return m.name;
+        });
+        if (othersCount) {
+            const other = ' other' + (othersCount > 1 ? 's' : '');
+            return names.slice(0, limit).join(', ') + ' and ' + othersCount + other + ' are typing';
         } else {
-            var names = whoIsTyping.map(function(m) {
-                return m.name;
-            });
-            var lastPerson = names.shift();
+            const lastPerson = names.pop();
             return names.join(', ') + ' and ' + lastPerson + ' are typing';
         }
     }
diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index c80c4db7cc..a691196219 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -53,6 +53,10 @@ module.exports = React.createClass({
         // more interesting)
         hasActiveCall: React.PropTypes.bool,
 
+        // Number of names to display in typing indication. E.g. set to 3, will
+        // result in "X, Y, Z and 100 others are typing."
+        whoIsTypingLimit: React.PropTypes.number,
+
         // callback for when the user clicks on the 'resend all' button in the
         // 'unsent messages' bar
         onResendAllClick: React.PropTypes.func,
@@ -80,7 +84,7 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             syncState: MatrixClientPeg.get().getSyncState(),
-            whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room),
+            whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room, this.props.whoIsTypingLimit),
         };
     },
 
@@ -127,7 +131,7 @@ module.exports = React.createClass({
 
     onRoomMemberTyping: function(ev, member) {
         this.setState({
-            whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room),
+            whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room, this.props.whoIsTypingLimit),
         });
     },
 
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 8753540e48..b7f05de339 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1531,6 +1531,7 @@ module.exports = React.createClass({
                 onResize={this.onChildResize}
                 onVisible={this.onStatusBarVisible}
                 onHidden={this.onStatusBarHidden}
+                whoIsTypingLimit={2}
             />;
         }