Merge pull request #2456 from matrix-org/bwindels/extendtypingbartiming

Avoid "jumpiness" with inline typing indicator

src/components/views/rooms/WhoIsTypingTile.js

@@ -19,6 +19,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import WhoIsTyping from '../../../WhoIsTyping';
+import Timer from '../../../utils/Timer';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import MemberAvatar from '../avatars/MemberAvatar';
 
@@ -43,11 +44,18 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             usersTyping: WhoIsTyping.usersTypingApartFromMe(this.props.room),
+            // a map with userid => Timer to delay
+            // hiding the "x is typing" message for a
+            // user so hiding it can coincide
+            // with the sent message by the other side
+            // resulting in less timeline jumpiness
+            delayedStopTypingTimers: {},
         };
     },
 
     componentWillMount: function() {
         MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
+        MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
     },
 
     componentDidUpdate: function(_, prevState) {
@@ -64,18 +72,90 @@ module.exports = React.createClass({
         const client = MatrixClientPeg.get();
         if (client) {
             client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
+            client.removeListener("Room.timeline", this.onRoomTimeline);
+        }
+        Object.values(this.state.delayedStopTypingTimers).forEach((t) => t.abort());
+    },
+
+    isVisible: function() {
+        return this.state.usersTyping.length !== 0 || Object.keys(this.state.delayedStopTypingTimers).length !== 0;
+    },
+
+    onRoomTimeline: function(event, room) {
+        if (room.roomId === this.props.room.roomId) {
+            const userId = event.getSender();
+            // remove user from usersTyping
+            const usersTyping = this.state.usersTyping.filter((m) => m.userId !== userId);
+            this.setState({usersTyping});
+            // abort timer if any
+            this._abortUserTimer(userId);
         }
     },
 
     onRoomMemberTyping: function(ev, member) {
+        const usersTyping = WhoIsTyping.usersTypingApartFromMeAndIgnored(this.props.room);
         this.setState({
-            usersTyping: WhoIsTyping.usersTypingApartFromMeAndIgnored(this.props.room),
+            delayedStopTypingTimers: this._updateDelayedStopTypingTimers(usersTyping),
+            usersTyping,
         });
     },
 
-    _renderTypingIndicatorAvatars: function(limit) {
-        let users = this.state.usersTyping;
+    _updateDelayedStopTypingTimers(usersTyping) {
+        const usersThatStoppedTyping = this.state.usersTyping.filter((a) => {
+            return !usersTyping.some((b) => a.userId === b.userId);
+        });
+        const usersThatStartedTyping = usersTyping.filter((a) => {
+            return !this.state.usersTyping.some((b) => a.userId === b.userId);
+        });
+        // abort all the timers for the users that started typing again
+        usersThatStartedTyping.forEach((m) => {
+            const timer = this.state.delayedStopTypingTimers[m.userId];
+            if (timer) {
+                timer.abort();
+            }
+        });
+        // prepare new delayedStopTypingTimers object to update state with
+        let delayedStopTypingTimers = Object.assign({}, this.state.delayedStopTypingTimers);
+        // remove members that started typing again
+        delayedStopTypingTimers = usersThatStartedTyping.reduce((delayedStopTypingTimers, m) => {
+            delete delayedStopTypingTimers[m.userId];
+            return delayedStopTypingTimers;
+        }, delayedStopTypingTimers);
+        // start timer for members that stopped typing
+        delayedStopTypingTimers = usersThatStoppedTyping.reduce((delayedStopTypingTimers, m) => {
+            if (!delayedStopTypingTimers[m.userId]) {
+                const timer = new Timer(5000);
+                delayedStopTypingTimers[m.userId] = timer;
+                timer.start();
+                timer.finished().then(
+                    () => this._removeUserTimer(m.userId), // on elapsed
+                    () => {/* aborted */},
+                );
+            }
+            return delayedStopTypingTimers;
+        }, delayedStopTypingTimers);
 
+        return delayedStopTypingTimers;
+    },
+
+    _abortUserTimer: function(userId) {
+        const timer = this.state.delayedStopTypingTimers[userId];
+        if (timer) {
+            timer.abort();
+            this._removeUserTimer(userId);
+        }
+    },
+
+    _removeUserTimer: function(userId) {
+        const timer = this.state.delayedStopTypingTimers[userId];
+        if (timer) {
+            const delayedStopTypingTimers = Object.assign({}, this.state.delayedStopTypingTimers);
+            delete delayedStopTypingTimers[userId];
+            this.setState({delayedStopTypingTimers});
+        }
+    },
+
+    _renderTypingIndicatorAvatars: function(users, limit) {
         let othersCount = 0;
         if (users.length > limit) {
             othersCount = users.length - limit + 1;
@@ -106,8 +186,19 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        let usersTyping = this.state.usersTyping;
+        const stoppedUsersOnTimer = Object.keys(this.state.delayedStopTypingTimers)
+            .map((userId) => this.props.room.getMember(userId));
+        // append the users that have been reported not typing anymore
+        // but have a timeout timer running so they can disappear
+        // when a message comes in
+        usersTyping = usersTyping.concat(stoppedUsersOnTimer);
+        // sort them so the typing members don't change order when
+        // moved to delayedStopTypingTimers
+        usersTyping.sort((a, b) => a.name.localeCompare(b.name));
+
         const typingString = WhoIsTyping.whoIsTypingString(
-            this.state.usersTyping,
+            usersTyping,
             this.props.whoIsTypingLimit,
         );
         if (!typingString) {
@@ -119,7 +210,7 @@ module.exports = React.createClass({
         return (
             <li className="mx_WhoIsTypingTile">
                 <div className="mx_WhoIsTypingTile_avatars">
-                    { this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit) }
+                    { this._renderTypingIndicatorAvatars(usersTyping, this.props.whoIsTypingLimit) }
                 </div>
                 <div className="mx_WhoIsTypingTile_label">
                     <EmojiText>{ typingString }</EmojiText>