Track the user's own typing state external to the composer

Fixes element-hq/element-web#9986

There's a few reasons for pushing this out to its own place:
* In future, we might want to move WhoIsTyping here.
* We have multiple composers now, and although they don't send typing notifications, they could (see https://github.com/vector-im/riot-web/issues/10188)
* In future we may have status for where/what the user is typing (https://github.com/matrix-org/matrix-doc/issues/437)
* The composer is complicated enough - it doesn't need to dedupe typing states too.

Note: This makes use of the principles introduced in element-hq/element-web#8923 and element-hq/element-web#9090

Author: turt2live

src/Lifecycle.js

@@ -34,6 +34,7 @@ import PlatformPeg from "./PlatformPeg";
 import { sendLoginRequest } from "./Login";
 import * as StorageManager from './utils/StorageManager';
 import SettingsStore from "./settings/SettingsStore";
+import TypingStore from "./stores/TypingStore";
 
 /**
  * Called at startup, to attempt to build a logged-in Matrix session. It tries
@@ -505,6 +506,7 @@ async function startMatrixClient() {
 
     Notifier.start();
     UserActivity.sharedInstance().start();
+    TypingStore.sharedInstance().reset(); // just in case
     if (!SettingsStore.getValue("lowBandwidth")) {
         Presence.start();
     }
@@ -553,6 +555,7 @@ function _clearStorage() {
 export function stopMatrixClient() {
     Notifier.stop();
     UserActivity.sharedInstance().stop();
+    TypingStore.sharedInstance().reset();
     Presence.stop();
     ActiveWidgetStore.stop();
     if (DMRoomMap.shared()) DMRoomMap.shared().stop();

src/components/views/rooms/MessageComposerInput.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017, 2018 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -61,10 +62,11 @@ import {ContentHelpers} from 'matrix-js-sdk';
 import AccessibleButton from '../elements/AccessibleButton';
 import {findEditableEvent} from '../../../utils/EventUtils';
 import ComposerHistoryManager from "../../../ComposerHistoryManager";
+import TypingStore, {TYPING_SERVER_TIMEOUT} from "../../../stores/TypingStore";
 
 const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s$');
 
-const TYPING_USER_TIMEOUT = 10000; const TYPING_SERVER_TIMEOUT = 30000;
+const TYPING_USER_TIMEOUT = 10000;
 
 // the Slate node type to default to for unstyled text
 const DEFAULT_NODE = 'paragraph';
@@ -477,19 +479,7 @@ export default class MessageComposerInput extends React.Component {
     }
 
     sendTyping(isTyping) {
-        if (!SettingsStore.getValue('sendTypingNotifications')) return;
-        if (SettingsStore.getValue('lowBandwidth')) return;
-        MatrixClientPeg.get().sendTyping(
-            this.props.room.roomId,
-            this.isTyping, TYPING_SERVER_TIMEOUT,
-        ).done();
-    }
-
-    refreshTyping() {
-        if (this.typingTimeout) {
-            clearTimeout(this.typingTimeout);
-            this.typingTimeout = null;
-        }
+        TypingStore.sharedInstance().setSelfTyping(this.props.room.roomId, isTyping);
     }
 
     onChange = (change: Change, originalEditorState?: Value) => {

src/stores/TypingStore.js

@@ -0,0 +1,79 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import MatrixClientPeg from "../MatrixClientPeg";
+import SettingsStore from "../settings/SettingsStore";
+
+export const TYPING_SERVER_TIMEOUT = 30000;
+
+/**
+ * Tracks typing state for users.
+ */
+export default class TypingStore {
+    constructor() {
+        this.reset();
+    }
+
+    static sharedInstance(): TypingStore {
+        if (global.mxTypingStore === undefined) {
+            global.mxTypingStore = new TypingStore();
+        }
+        return global.mxTypingStore;
+    }
+
+    /**
+     * Clears all cached typing states. Intended to be called when the
+     * MatrixClientPeg client changes.
+     */
+    reset() {
+        this._typingStates = {}; // roomId => { isTyping, expireMs }
+    }
+
+    /**
+     * Changes the typing status for the MatrixClientPeg user.
+     * @param {string} roomId The room ID to set the typing state in.
+     * @param {boolean} isTyping Whether the user is typing or not.
+     */
+    setSelfTyping(roomId: string, isTyping: boolean): void {
+        if (!SettingsStore.getValue('sendTypingNotifications')) return;
+        if (SettingsStore.getValue('lowBandwidth')) return;
+
+        const currentTyping = this._typingStates[roomId];
+        if ((!isTyping && !currentTyping) || (currentTyping && currentTyping.isTyping === isTyping)) {
+            // No change in state, so don't do anything. We'll let the timer run its course.
+            return;
+        }
+
+        const now = new Date().getTime();
+        this._typingStates[roomId] = {
+            isTyping: isTyping,
+            expireMs: now + TYPING_SERVER_TIMEOUT,
+        };
+
+        if (isTyping) {
+            setTimeout(() => {
+                const currentTyping = this._typingStates[roomId];
+                const now = new Date().getTime();
+
+                if (currentTyping && currentTyping.expireMs >= now) {
+                    currentTyping.isTyping = false;
+                }
+            }, TYPING_SERVER_TIMEOUT);
+        }
+
+        MatrixClientPeg.get().sendTyping(roomId, isTyping, TYPING_SERVER_TIMEOUT);
+    }
+}