PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Move MessageComposer typing timeout to TypingStore

Browse source
This commit is contained in:
Travis Ralston 2019-06-27 10:35:44 -06:00
parent eb1f911d15
commit 17ed62de7d
2 changed files with 18 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/components/views/rooms/MessageComposerInput.js
View file

@ -62,12 +62,10 @@ import {ContentHelpers} from 'matrix-js-sdk';
import AccessibleButton from '../elements/AccessibleButton'; import AccessibleButton from '../elements/AccessibleButton';
import {findEditableEvent} from '../../../utils/EventUtils'; import {findEditableEvent} from '../../../utils/EventUtils';
import ComposerHistoryManager from "../../../ComposerHistoryManager"; 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 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 // the Slate node type to default to for unstyled text
const DEFAULT_NODE = 'paragraph'; const DEFAULT_NODE = 'paragraph';
@ -427,55 +425,11 @@ export default class MessageComposerInput extends React.Component {
}; };
onTypingActivity() { onTypingActivity() {
this.isTyping = true; this.sendTyping(true);
if (!this.userTypingTimer) {
this.sendTyping(true);
}
this.startUserTypingTimer();
this.startServerTypingTimer();
} }
onFinishedTyping() { onFinishedTyping() {
this.isTyping = false;
this.sendTyping(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) { sendTyping(isTyping) {

21
src/stores/TypingStore.js
View file

@ -18,7 +18,8 @@ import MatrixClientPeg from "../MatrixClientPeg";
import SettingsStore from "../settings/SettingsStore"; import SettingsStore from "../settings/SettingsStore";
import Timer from "../utils/Timer"; 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. * Tracks typing state for users.
@ -40,7 +41,13 @@ export default class TypingStore {
* MatrixClientPeg client changes. * MatrixClientPeg client changes.
*/ */
reset() { 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) { if (!currentTyping) {
currentTyping = this._typingStates[roomId] = { currentTyping = this._typingStates[roomId] = {
isTyping: isTyping, isTyping: isTyping,
timer: new Timer(TYPING_SERVER_TIMEOUT), serverTimer: new Timer(TYPING_SERVER_TIMEOUT),
userTimer: new Timer(TYPING_USER_TIMEOUT),
}; };
} }
currentTyping.isTyping = isTyping; currentTyping.isTyping = isTyping;
if (isTyping) { if (isTyping) {
currentTyping.timer.restart(); currentTyping.serverTimer.restart().finished().then(() => {
currentTyping.timer.finished().then(() => {
const currentTyping = this._typingStates[roomId]; const currentTyping = this._typingStates[roomId];
if (currentTyping) currentTyping.isTyping = false; if (currentTyping) currentTyping.isTyping = false;
// The server will (should) time us out on typing, so we don't // The server will (should) time us out on typing, so we don't
// need to advertise a stop of typing. // need to advertise a stop of typing.
}); });
currentTyping.userTimer.restart().finished().then(() => {
this.setSelfTyping(roomId, false);
});
} }
MatrixClientPeg.get().sendTyping(roomId, isTyping, TYPING_SERVER_TIMEOUT); MatrixClientPeg.get().sendTyping(roomId, isTyping, TYPING_SERVER_TIMEOUT);