wait to hide typing bar until event arrives or 5s timeout
This commit is contained in:
parent
89b576936b
commit
7df8951efa
1 changed files with 84 additions and 5 deletions
|
@ -19,6 +19,7 @@ import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import sdk from '../../../index';
|
import sdk from '../../../index';
|
||||||
import WhoIsTyping from '../../../WhoIsTyping';
|
import WhoIsTyping from '../../../WhoIsTyping';
|
||||||
|
import Timer from '../../../utils/Timer';
|
||||||
import MatrixClientPeg from '../../../MatrixClientPeg';
|
import MatrixClientPeg from '../../../MatrixClientPeg';
|
||||||
import MemberAvatar from '../avatars/MemberAvatar';
|
import MemberAvatar from '../avatars/MemberAvatar';
|
||||||
|
|
||||||
|
@ -43,11 +44,13 @@ module.exports = React.createClass({
|
||||||
getInitialState: function() {
|
getInitialState: function() {
|
||||||
return {
|
return {
|
||||||
usersTyping: WhoIsTyping.usersTypingApartFromMe(this.props.room),
|
usersTyping: WhoIsTyping.usersTypingApartFromMe(this.props.room),
|
||||||
|
userTimers: {},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
componentWillMount: function() {
|
componentWillMount: function() {
|
||||||
MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
|
MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
|
||||||
|
MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
|
||||||
},
|
},
|
||||||
|
|
||||||
componentDidUpdate: function(_, prevState) {
|
componentDidUpdate: function(_, prevState) {
|
||||||
|
@ -64,18 +67,89 @@ module.exports = React.createClass({
|
||||||
const client = MatrixClientPeg.get();
|
const client = MatrixClientPeg.get();
|
||||||
if (client) {
|
if (client) {
|
||||||
client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
|
client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
|
||||||
|
client.removeListener("Room.timeline", this.onRoomTimeline);
|
||||||
|
}
|
||||||
|
Object.values(this.state.userTimers).forEach((t) => t.abort());
|
||||||
|
},
|
||||||
|
|
||||||
|
onRoomTimeline: function(event, room) {
|
||||||
|
if (room.roomId === this.props.room.roomId) {
|
||||||
|
console.log(`WhoIsTypingTile: incoming timeline event for ${event.getSender()}`);
|
||||||
|
this._abortUserTimer(event.getSender(), "timeline event");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
onRoomMemberTyping: function(ev, member) {
|
onRoomMemberTyping: function(ev, member) {
|
||||||
|
console.log(`WhoIsTypingTile: incoming typing event for`, ev.getContent().user_ids);
|
||||||
|
const usersTyping = WhoIsTyping.usersTypingApartFromMeAndIgnored(this.props.room);
|
||||||
this.setState({
|
this.setState({
|
||||||
usersTyping: WhoIsTyping.usersTypingApartFromMeAndIgnored(this.props.room),
|
userTimers: this._updateUserTimers(usersTyping),
|
||||||
|
usersTyping,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
_renderTypingIndicatorAvatars: function(limit) {
|
_updateUserTimers(usersTyping) {
|
||||||
let users = this.state.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.userTimers[m.userId];
|
||||||
|
timer && timer.abort();
|
||||||
|
});
|
||||||
|
// prepare new userTimers object to update state with
|
||||||
|
let userTimers = Object.assign({}, this.state.userTimers);
|
||||||
|
// remove members that started typing again
|
||||||
|
userTimers = usersThatStartedTyping.reduce((userTimers, m) => {
|
||||||
|
if (userTimers[m.userId]) {
|
||||||
|
console.log(`WhoIsTypingTile: stopping timer for ${m.userId} because started typing again`);
|
||||||
|
}
|
||||||
|
delete userTimers[m.userId];
|
||||||
|
return userTimers;
|
||||||
|
}, userTimers);
|
||||||
|
// start timer for members that stopped typing
|
||||||
|
userTimers = usersThatStoppedTyping.reduce((userTimers, m) => {
|
||||||
|
if (!userTimers[m.userId]) {
|
||||||
|
console.log(`WhoIsTypingTile: starting 5s timer for ${m.userId}`);
|
||||||
|
const timer = new Timer(5000);
|
||||||
|
userTimers[m.userId] = timer;
|
||||||
|
timer.start();
|
||||||
|
timer.finished().then(
|
||||||
|
() => {
|
||||||
|
console.log(`WhoIsTypingTile: elapsed 5s timer for ${m.userId}`);
|
||||||
|
this._removeUserTimer(m.userId);
|
||||||
|
}, //on elapsed
|
||||||
|
() => {/* aborted */},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return userTimers;
|
||||||
|
}, userTimers);
|
||||||
|
|
||||||
|
return userTimers;
|
||||||
|
},
|
||||||
|
|
||||||
|
_abortUserTimer: function(userId, reason) {
|
||||||
|
const timer = this.state.userTimers[userId];
|
||||||
|
if (timer) {
|
||||||
|
console.log(`WhoIsTypingTile: aborting timer for ${userId} because ${reason}`);
|
||||||
|
timer.abort();
|
||||||
|
this._removeUserTimer(userId);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_removeUserTimer: function(userId) {
|
||||||
|
const timer = this.state.userTimers[userId];
|
||||||
|
if (timer) {
|
||||||
|
const userTimers = Object.assign({}, this.state.userTimers);
|
||||||
|
delete userTimers[userId];
|
||||||
|
this.setState({userTimers});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_renderTypingIndicatorAvatars: function(users, limit) {
|
||||||
let othersCount = 0;
|
let othersCount = 0;
|
||||||
if (users.length > limit) {
|
if (users.length > limit) {
|
||||||
othersCount = users.length - limit + 1;
|
othersCount = users.length - limit + 1;
|
||||||
|
@ -106,8 +180,13 @@ module.exports = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
|
let usersTyping = this.state.usersTyping;
|
||||||
|
const stoppedUsersOnTimer = Object.keys(this.state.userTimers)
|
||||||
|
.map((userId) => this.props.room.getMember(userId));
|
||||||
|
usersTyping = usersTyping.concat(stoppedUsersOnTimer);
|
||||||
|
|
||||||
const typingString = WhoIsTyping.whoIsTypingString(
|
const typingString = WhoIsTyping.whoIsTypingString(
|
||||||
this.state.usersTyping,
|
usersTyping,
|
||||||
this.props.whoIsTypingLimit,
|
this.props.whoIsTypingLimit,
|
||||||
);
|
);
|
||||||
if (!typingString) {
|
if (!typingString) {
|
||||||
|
@ -119,7 +198,7 @@ module.exports = React.createClass({
|
||||||
return (
|
return (
|
||||||
<li className="mx_WhoIsTypingTile">
|
<li className="mx_WhoIsTypingTile">
|
||||||
<div className="mx_WhoIsTypingTile_avatars">
|
<div className="mx_WhoIsTypingTile_avatars">
|
||||||
{ this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit) }
|
{ this._renderTypingIndicatorAvatars(usersTyping, this.props.whoIsTypingLimit) }
|
||||||
</div>
|
</div>
|
||||||
<div className="mx_WhoIsTypingTile_label">
|
<div className="mx_WhoIsTypingTile_label">
|
||||||
<EmojiText>{ typingString }</EmojiText>
|
<EmojiText>{ typingString }</EmojiText>
|
||||||
|
|
Loading…
Reference in a new issue