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

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,11 +62,10 @@ import {ContentHelpers} from 'matrix-js-sdk';
 import AccessibleButton from '../elements/AccessibleButton';
 import {findEditableEvent} from '../../../utils/EventUtils';
 import ComposerHistoryManager from "../../../ComposerHistoryManager";
+import TypingStore from "../../../stores/TypingStore";
 
 const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s$');
 
-const TYPING_USER_TIMEOUT = 10000; const TYPING_SERVER_TIMEOUT = 30000;
-
 // the Slate node type to default to for unstyled text
 const DEFAULT_NODE = 'paragraph';
 
@@ -424,74 +424,6 @@ export default class MessageComposerInput extends React.Component {
  }
  };
 
- onTypingActivity() {
- this.isTyping = true;
- if (!this.userTypingTimer) {
- this.sendTyping(true);
- }
- this.startUserTypingTimer();
- this.startServerTypingTimer();
- }
-
- onFinishedTyping() {
- this.isTyping = false;
- this.sendTyping(false);
- this.stopUserTypingTimer();
- this.stopServerTypingTimer();
- }
-
- startUserTypingTimer() {
- this.stopUserTypingTimer();
- const self = this;
- this.userTypingTimer = setTimeout(function() {
- self.isTyping = false;
- self.sendTyping(self.isTyping);
- self.userTypingTimer = null;
- }, TYPING_USER_TIMEOUT);
- }
-
- stopUserTypingTimer() {
- if (this.userTypingTimer) {
- clearTimeout(this.userTypingTimer);
- this.userTypingTimer = null;
- }
- }
-
- startServerTypingTimer() {
- if (!this.serverTypingTimer) {
- const self = this;
- this.serverTypingTimer = setTimeout(function() {
- if (self.isTyping) {
- self.sendTyping(self.isTyping);
- self.startServerTypingTimer();
- }
- }, TYPING_SERVER_TIMEOUT / 2);
- }
- }
-
- stopServerTypingTimer() {
- if (this.serverTypingTimer) {
- clearTimeout(this.serverTypingTimer);
- this.serverTypingTimer = null;
- }
- }
-
- 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;
- }
- }
-
  onChange = (change: Change, originalEditorState?: Value) => {
  let editorState = change.value;
 
@@ -522,9 +454,9 @@ export default class MessageComposerInput extends React.Component {
  }
 
  if (Plain.serialize(editorState) !== '') {
- this.onTypingActivity();
+ TypingStore.sharedInstance().setSelfTyping(this.props.room.roomId, true);
  } else {
- this.onFinishedTyping();
+ TypingStore.sharedInstance().setSelfTyping(this.props.room.roomId, false);
  }
 
  if (editorState.startText !== null) {

src/stores/TypingStore.js

@@ -0,0 +1,94 @@
+/*
+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";
+import Timer from "../utils/Timer";
+
+const TYPING_USER_TIMEOUT = 10000;
+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: bool, // Whether the user is typing or not
+ // userTimer: Timer, // Local timeout for "user has stopped typing"
+ // serverTimer: Timer, // Maximum timeout for the typing state
+ // },
+ };
+ }
+
+ /**
+ * 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;
+
+ let 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;
+ }
+
+ if (!currentTyping) {
+ currentTyping = this._typingStates[roomId] = {
+ isTyping: isTyping,
+ serverTimer: new Timer(TYPING_SERVER_TIMEOUT),
+ userTimer: new Timer(TYPING_USER_TIMEOUT),
+ };
+ }
+
+ currentTyping.isTyping = isTyping;
+
+ if (isTyping) {
+ currentTyping.serverTimer.restart().finished().then(() => {
+ const currentTyping = this._typingStates[roomId];
+ if (currentTyping) currentTyping.isTyping = false;
+
+ // The server will (should) time us out on typing, so we don't
+ // need to advertise a stop of typing.
+ });
+
+ currentTyping.userTimer.restart().finished().then(() => {
+ this.setSelfTyping(roomId, false);
+ });
+ }
+
+ MatrixClientPeg.get().sendTyping(roomId, isTyping, TYPING_SERVER_TIMEOUT);
+ }
+}