From cd089a3f95a5849b2ef25a366273714333106a9a Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 26 Jun 2019 22:36:55 -0600 Subject: [PATCH 1/7] Track the user's own typing state external to the composer Fixes https://github.com/vector-im/riot-web/issues/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 https://github.com/vector-im/riot-web/issues/8923 and https://github.com/vector-im/riot-web/issues/9090 --- src/Lifecycle.js | 3 + .../views/rooms/MessageComposerInput.js | 18 +---- src/stores/TypingStore.js | 79 +++++++++++++++++++ 3 files changed, 86 insertions(+), 14 deletions(-) create mode 100644 src/stores/TypingStore.js diff --git a/src/Lifecycle.js b/src/Lifecycle.js index 195377fbe9..32c96c1a8f 100644 --- a/src/Lifecycle.js +++ b/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(); diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js index 7a64e9ad51..b61e1191b6 100644 --- a/src/components/views/rooms/MessageComposerInput.js +++ b/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) => { diff --git a/src/stores/TypingStore.js b/src/stores/TypingStore.js new file mode 100644 index 0000000000..d0d8297963 --- /dev/null +++ b/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); + } +} \ No newline at end of file From 1546cb292379ba66aec14a864ad63bde11dd1236 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 26 Jun 2019 22:40:08 -0600 Subject: [PATCH 2/7] You win this time, linter. --- src/stores/TypingStore.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/TypingStore.js b/src/stores/TypingStore.js index d0d8297963..d32ca9ba65 100644 --- a/src/stores/TypingStore.js +++ b/src/stores/TypingStore.js @@ -76,4 +76,4 @@ export default class TypingStore { MatrixClientPeg.get().sendTyping(roomId, isTyping, TYPING_SERVER_TIMEOUT); } -} \ No newline at end of file +} From 67ecf9db62c77259a3008dbc4319b1fda6375d68 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 27 Jun 2019 09:44:13 -0600 Subject: [PATCH 3/7] expireMs -> expireTs --- src/stores/TypingStore.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/stores/TypingStore.js b/src/stores/TypingStore.js index d32ca9ba65..58d0e70392 100644 --- a/src/stores/TypingStore.js +++ b/src/stores/TypingStore.js @@ -39,7 +39,7 @@ export default class TypingStore { * MatrixClientPeg client changes. */ reset() { - this._typingStates = {}; // roomId => { isTyping, expireMs } + this._typingStates = {}; // roomId => { isTyping, expireTs } } /** @@ -60,7 +60,7 @@ export default class TypingStore { const now = new Date().getTime(); this._typingStates[roomId] = { isTyping: isTyping, - expireMs: now + TYPING_SERVER_TIMEOUT, + expireTs: now + TYPING_SERVER_TIMEOUT, }; if (isTyping) { @@ -68,7 +68,7 @@ export default class TypingStore { const currentTyping = this._typingStates[roomId]; const now = new Date().getTime(); - if (currentTyping && currentTyping.expireMs >= now) { + if (currentTyping && currentTyping.expireTs >= now) { currentTyping.isTyping = false; } }, TYPING_SERVER_TIMEOUT); From eb1f911d151ad737445043415c05a408e2ae27e0 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 27 Jun 2019 10:27:11 -0600 Subject: [PATCH 4/7] Use a Timer --- src/stores/TypingStore.js | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/src/stores/TypingStore.js b/src/stores/TypingStore.js index 58d0e70392..17be8ca14b 100644 --- a/src/stores/TypingStore.js +++ b/src/stores/TypingStore.js @@ -16,6 +16,7 @@ limitations under the License. import MatrixClientPeg from "../MatrixClientPeg"; import SettingsStore from "../settings/SettingsStore"; +import Timer from "../utils/Timer"; export const TYPING_SERVER_TIMEOUT = 30000; @@ -39,7 +40,7 @@ export default class TypingStore { * MatrixClientPeg client changes. */ reset() { - this._typingStates = {}; // roomId => { isTyping, expireTs } + this._typingStates = {}; // roomId => { isTyping, Timer } } /** @@ -51,27 +52,30 @@ export default class TypingStore { if (!SettingsStore.getValue('sendTypingNotifications')) return; if (SettingsStore.getValue('lowBandwidth')) return; - const currentTyping = this._typingStates[roomId]; + 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; } - const now = new Date().getTime(); - this._typingStates[roomId] = { - isTyping: isTyping, - expireTs: now + TYPING_SERVER_TIMEOUT, - }; + if (!currentTyping) { + currentTyping = this._typingStates[roomId] = { + isTyping: isTyping, + timer: new Timer(TYPING_SERVER_TIMEOUT), + }; + } + + currentTyping.isTyping = isTyping; if (isTyping) { - setTimeout(() => { + currentTyping.timer.restart(); + currentTyping.timer.finished().then(() => { const currentTyping = this._typingStates[roomId]; - const now = new Date().getTime(); + if (currentTyping) currentTyping.isTyping = false; - if (currentTyping && currentTyping.expireTs >= now) { - currentTyping.isTyping = false; - } - }, TYPING_SERVER_TIMEOUT); + // The server will (should) time us out on typing, so we don't + // need to advertise a stop of typing. + }); } MatrixClientPeg.get().sendTyping(roomId, isTyping, TYPING_SERVER_TIMEOUT); From 17ed62de7db29714ed5559283dd1138fb486ed73 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 27 Jun 2019 10:35:44 -0600 Subject: [PATCH 5/7] Move MessageComposer typing timeout to TypingStore --- .../views/rooms/MessageComposerInput.js | 50 +------------------ src/stores/TypingStore.js | 21 ++++++-- 2 files changed, 18 insertions(+), 53 deletions(-) diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js index b61e1191b6..274e347c5f 100644 --- a/src/components/views/rooms/MessageComposerInput.js +++ b/src/components/views/rooms/MessageComposerInput.js @@ -62,12 +62,10 @@ 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"; +import TypingStore from "../../../stores/TypingStore"; const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s$'); -const TYPING_USER_TIMEOUT = 10000; - // the Slate node type to default to for unstyled text const DEFAULT_NODE = 'paragraph'; @@ -427,55 +425,11 @@ export default class MessageComposerInput extends React.Component { }; onTypingActivity() { - this.isTyping = true; - if (!this.userTypingTimer) { - this.sendTyping(true); - } - this.startUserTypingTimer(); - this.startServerTypingTimer(); + this.sendTyping(true); } 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) { diff --git a/src/stores/TypingStore.js b/src/stores/TypingStore.js index 17be8ca14b..02778ee4f4 100644 --- a/src/stores/TypingStore.js +++ b/src/stores/TypingStore.js @@ -18,7 +18,8 @@ import MatrixClientPeg from "../MatrixClientPeg"; import SettingsStore from "../settings/SettingsStore"; import Timer from "../utils/Timer"; -export const TYPING_SERVER_TIMEOUT = 30000; +const TYPING_USER_TIMEOUT = 10000; +const TYPING_SERVER_TIMEOUT = 30000; /** * Tracks typing state for users. @@ -40,7 +41,13 @@ export default class TypingStore { * MatrixClientPeg client changes. */ reset() { - this._typingStates = {}; // roomId => { isTyping, Timer } + 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 + // }, + }; } /** @@ -61,21 +68,25 @@ export default class TypingStore { if (!currentTyping) { currentTyping = this._typingStates[roomId] = { isTyping: isTyping, - timer: new Timer(TYPING_SERVER_TIMEOUT), + serverTimer: new Timer(TYPING_SERVER_TIMEOUT), + userTimer: new Timer(TYPING_USER_TIMEOUT), }; } currentTyping.isTyping = isTyping; if (isTyping) { - currentTyping.timer.restart(); - currentTyping.timer.finished().then(() => { + 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); From 8bb860e870b8a6ea632e2b0669ce0dc967c003e9 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 27 Jun 2019 10:37:33 -0600 Subject: [PATCH 6/7] Use fewer functions for typing in the composer --- .../views/rooms/MessageComposerInput.js | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js index 274e347c5f..6feb9e264e 100644 --- a/src/components/views/rooms/MessageComposerInput.js +++ b/src/components/views/rooms/MessageComposerInput.js @@ -424,18 +424,6 @@ export default class MessageComposerInput extends React.Component { } }; - onTypingActivity() { - this.sendTyping(true); - } - - onFinishedTyping() { - this.sendTyping(false); - } - - sendTyping(isTyping) { - TypingStore.sharedInstance().setSelfTyping(this.props.room.roomId, isTyping); - } - onChange = (change: Change, originalEditorState?: Value) => { let editorState = change.value; @@ -466,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) { From c2ad9d4f53af77e23c2b8bea09258ba0f647f3af Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 28 Jun 2019 12:29:03 -0600 Subject: [PATCH 7/7] Attach timer finished state once --- src/stores/TypingStore.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/stores/TypingStore.js b/src/stores/TypingStore.js index 02778ee4f4..71ae4f55a3 100644 --- a/src/stores/TypingStore.js +++ b/src/stores/TypingStore.js @@ -76,17 +76,21 @@ export default class TypingStore { currentTyping.isTyping = isTyping; if (isTyping) { - currentTyping.serverTimer.restart().finished().then(() => { - const currentTyping = this._typingStates[roomId]; - if (currentTyping) currentTyping.isTyping = false; + if (!currentTyping.serverTimer.isRunning()) { + 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. - }); + // The server will (should) time us out on typing, so we don't + // need to advertise a stop of typing. + }); + } else currentTyping.serverTimer.restart(); - currentTyping.userTimer.restart().finished().then(() => { - this.setSelfTyping(roomId, false); - }); + if (!currentTyping.userTimer.isRunning()) { + currentTyping.userTimer.restart().finished().then(() => { + this.setSelfTyping(roomId, false); + }); + } else currentTyping.userTimer.restart(); } MatrixClientPeg.get().sendTyping(roomId, isTyping, TYPING_SERVER_TIMEOUT);