2018-11-12 18:09:51 +03:00
|
|
|
/*
|
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
|
|
|
Copyright 2017, 2018 New Vector Ltd
|
|
|
|
|
|
|
|
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 React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import sdk from '../../../index';
|
|
|
|
import WhoIsTyping from '../../../WhoIsTyping';
|
2019-01-17 18:30:55 +03:00
|
|
|
import Timer from '../../../utils/Timer';
|
2018-11-12 18:09:51 +03:00
|
|
|
import MatrixClientPeg from '../../../MatrixClientPeg';
|
|
|
|
import MemberAvatar from '../avatars/MemberAvatar';
|
|
|
|
|
|
|
|
module.exports = React.createClass({
|
|
|
|
displayName: 'WhoIsTypingTile',
|
|
|
|
|
|
|
|
propTypes: {
|
|
|
|
// the room this statusbar is representing.
|
|
|
|
room: PropTypes.object.isRequired,
|
2018-11-13 11:15:16 +03:00
|
|
|
onVisible: PropTypes.func,
|
2018-11-12 18:09:51 +03:00
|
|
|
// Number of names to display in typing indication. E.g. set to 3, will
|
|
|
|
// result in "X, Y, Z and 100 others are typing."
|
|
|
|
whoIsTypingLimit: PropTypes.number,
|
|
|
|
},
|
|
|
|
|
|
|
|
getDefaultProps: function() {
|
|
|
|
return {
|
|
|
|
whoIsTypingLimit: 3,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
usersTyping: WhoIsTyping.usersTypingApartFromMe(this.props.room),
|
2019-01-17 20:32:53 +03:00
|
|
|
// a map with userid => Timer to delay
|
|
|
|
// hiding the "x is typing" message for a
|
|
|
|
// user so hiding it can coincide
|
|
|
|
// with the sent message by the other side
|
|
|
|
// resulting in less timeline jumpiness
|
2019-01-17 20:52:22 +03:00
|
|
|
delayedStopTypingTimers: {},
|
2018-11-12 18:09:51 +03:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
componentWillMount: function() {
|
2018-11-12 20:19:18 +03:00
|
|
|
MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
|
2019-01-17 18:30:55 +03:00
|
|
|
MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
|
2018-11-12 18:09:51 +03:00
|
|
|
},
|
|
|
|
|
2018-11-13 11:15:16 +03:00
|
|
|
componentDidUpdate: function(_, prevState) {
|
|
|
|
if (this.props.onVisible &&
|
|
|
|
!prevState.usersTyping.length &&
|
2018-11-13 11:17:37 +03:00
|
|
|
this.state.usersTyping.length
|
|
|
|
) {
|
2018-11-13 11:15:16 +03:00
|
|
|
this.props.onVisible();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2018-11-12 18:09:51 +03:00
|
|
|
componentWillUnmount: function() {
|
|
|
|
// we may have entirely lost our client as we're logging out before clicking login on the guest bar...
|
|
|
|
const client = MatrixClientPeg.get();
|
|
|
|
if (client) {
|
2018-11-12 20:19:18 +03:00
|
|
|
client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
|
2019-01-17 18:30:55 +03:00
|
|
|
client.removeListener("Room.timeline", this.onRoomTimeline);
|
|
|
|
}
|
2019-01-17 20:52:22 +03:00
|
|
|
Object.values(this.state.delayedStopTypingTimers).forEach((t) => t.abort());
|
2019-01-17 18:30:55 +03:00
|
|
|
},
|
|
|
|
|
2019-01-21 19:35:40 +03:00
|
|
|
isVisible: function() {
|
2019-01-22 13:34:54 +03:00
|
|
|
return this.state.usersTyping.length !== 0 || Object.keys(this.state.delayedStopTypingTimers).length !== 0;
|
2019-01-21 19:35:40 +03:00
|
|
|
},
|
|
|
|
|
2019-01-17 18:30:55 +03:00
|
|
|
onRoomTimeline: function(event, room) {
|
|
|
|
if (room.roomId === this.props.room.roomId) {
|
2019-01-17 20:26:11 +03:00
|
|
|
const userId = event.getSender();
|
2019-01-17 20:32:46 +03:00
|
|
|
// remove user from usersTyping
|
2019-01-17 20:26:11 +03:00
|
|
|
const usersTyping = this.state.usersTyping.filter((m) => m.userId !== userId);
|
|
|
|
this.setState({usersTyping});
|
2019-01-17 20:32:53 +03:00
|
|
|
// abort timer if any
|
2019-01-17 20:32:46 +03:00
|
|
|
this._abortUserTimer(userId);
|
2018-11-12 18:09:51 +03:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onRoomMemberTyping: function(ev, member) {
|
2019-01-17 18:30:55 +03:00
|
|
|
const usersTyping = WhoIsTyping.usersTypingApartFromMeAndIgnored(this.props.room);
|
2018-11-12 18:09:51 +03:00
|
|
|
this.setState({
|
2019-01-17 20:52:22 +03:00
|
|
|
delayedStopTypingTimers: this._updateDelayedStopTypingTimers(usersTyping),
|
2019-01-17 18:30:55 +03:00
|
|
|
usersTyping,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2019-01-17 20:52:22 +03:00
|
|
|
_updateDelayedStopTypingTimers(usersTyping) {
|
2019-01-17 18:30:55 +03:00
|
|
|
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);
|
2018-11-12 18:09:51 +03:00
|
|
|
});
|
2019-01-17 18:30:55 +03:00
|
|
|
// abort all the timers for the users that started typing again
|
|
|
|
usersThatStartedTyping.forEach((m) => {
|
2019-01-17 20:52:22 +03:00
|
|
|
const timer = this.state.delayedStopTypingTimers[m.userId];
|
2019-01-17 18:30:55 +03:00
|
|
|
timer && timer.abort();
|
|
|
|
});
|
2019-01-17 20:52:22 +03:00
|
|
|
// prepare new delayedStopTypingTimers object to update state with
|
|
|
|
let delayedStopTypingTimers = Object.assign({}, this.state.delayedStopTypingTimers);
|
2019-01-17 18:30:55 +03:00
|
|
|
// remove members that started typing again
|
2019-01-17 20:52:22 +03:00
|
|
|
delayedStopTypingTimers = usersThatStartedTyping.reduce((delayedStopTypingTimers, m) => {
|
|
|
|
delete delayedStopTypingTimers[m.userId];
|
|
|
|
return delayedStopTypingTimers;
|
|
|
|
}, delayedStopTypingTimers);
|
2019-01-17 18:30:55 +03:00
|
|
|
// start timer for members that stopped typing
|
2019-01-17 20:52:22 +03:00
|
|
|
delayedStopTypingTimers = usersThatStoppedTyping.reduce((delayedStopTypingTimers, m) => {
|
|
|
|
if (!delayedStopTypingTimers[m.userId]) {
|
2019-01-17 18:30:55 +03:00
|
|
|
const timer = new Timer(5000);
|
2019-01-17 20:52:22 +03:00
|
|
|
delayedStopTypingTimers[m.userId] = timer;
|
2019-01-17 18:30:55 +03:00
|
|
|
timer.start();
|
|
|
|
timer.finished().then(
|
2019-01-17 20:32:46 +03:00
|
|
|
() => this._removeUserTimer(m.userId), //on elapsed
|
2019-01-17 18:30:55 +03:00
|
|
|
() => {/* aborted */},
|
|
|
|
);
|
|
|
|
}
|
2019-01-17 20:52:22 +03:00
|
|
|
return delayedStopTypingTimers;
|
|
|
|
}, delayedStopTypingTimers);
|
2019-01-17 18:30:55 +03:00
|
|
|
|
2019-01-17 20:52:22 +03:00
|
|
|
return delayedStopTypingTimers;
|
2018-11-12 18:09:51 +03:00
|
|
|
},
|
|
|
|
|
2019-01-17 20:32:46 +03:00
|
|
|
_abortUserTimer: function(userId) {
|
2019-01-17 20:52:22 +03:00
|
|
|
const timer = this.state.delayedStopTypingTimers[userId];
|
2019-01-17 18:30:55 +03:00
|
|
|
if (timer) {
|
|
|
|
timer.abort();
|
|
|
|
this._removeUserTimer(userId);
|
|
|
|
}
|
|
|
|
},
|
2018-11-12 18:09:51 +03:00
|
|
|
|
2019-01-17 18:30:55 +03:00
|
|
|
_removeUserTimer: function(userId) {
|
2019-01-17 20:52:22 +03:00
|
|
|
const timer = this.state.delayedStopTypingTimers[userId];
|
2019-01-17 18:30:55 +03:00
|
|
|
if (timer) {
|
2019-01-17 20:52:22 +03:00
|
|
|
const delayedStopTypingTimers = Object.assign({}, this.state.delayedStopTypingTimers);
|
|
|
|
delete delayedStopTypingTimers[userId];
|
|
|
|
this.setState({delayedStopTypingTimers});
|
2019-01-17 18:30:55 +03:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_renderTypingIndicatorAvatars: function(users, limit) {
|
2018-11-12 18:09:51 +03:00
|
|
|
let othersCount = 0;
|
|
|
|
if (users.length > limit) {
|
|
|
|
othersCount = users.length - limit + 1;
|
|
|
|
users = users.slice(0, limit - 1);
|
|
|
|
}
|
|
|
|
|
|
|
|
const avatars = users.map((u) => {
|
|
|
|
return (
|
|
|
|
<MemberAvatar
|
|
|
|
key={u.userId}
|
|
|
|
member={u}
|
|
|
|
width={24}
|
|
|
|
height={24}
|
|
|
|
resizeMethod="crop"
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
if (othersCount > 0) {
|
|
|
|
avatars.push(
|
2018-11-12 20:19:18 +03:00
|
|
|
<span className="mx_WhoIsTypingTile_remainingAvatarPlaceholder" key="others">
|
2018-11-12 18:09:51 +03:00
|
|
|
+{ othersCount }
|
|
|
|
</span>,
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return avatars;
|
|
|
|
},
|
|
|
|
|
2018-11-12 20:19:18 +03:00
|
|
|
render: function() {
|
2019-01-17 18:30:55 +03:00
|
|
|
let usersTyping = this.state.usersTyping;
|
2019-01-17 20:52:22 +03:00
|
|
|
const stoppedUsersOnTimer = Object.keys(this.state.delayedStopTypingTimers)
|
2019-01-17 18:30:55 +03:00
|
|
|
.map((userId) => this.props.room.getMember(userId));
|
2019-01-17 20:32:53 +03:00
|
|
|
// append the users that have been reported not typing anymore
|
|
|
|
// but have a timeout timer running so they can disappear
|
|
|
|
// when a message comes in
|
2019-01-17 18:30:55 +03:00
|
|
|
usersTyping = usersTyping.concat(stoppedUsersOnTimer);
|
2019-01-21 19:49:46 +03:00
|
|
|
// sort them so the typing members don't change order when
|
|
|
|
// moved to delayedStopTypingTimers
|
|
|
|
usersTyping.sort((a, b) => a.name.localeCompare(b.name));
|
2019-01-17 18:30:55 +03:00
|
|
|
|
2018-11-12 18:09:51 +03:00
|
|
|
const typingString = WhoIsTyping.whoIsTypingString(
|
2019-01-17 18:30:55 +03:00
|
|
|
usersTyping,
|
2018-11-12 18:09:51 +03:00
|
|
|
this.props.whoIsTypingLimit,
|
|
|
|
);
|
2018-11-12 20:19:18 +03:00
|
|
|
if (!typingString) {
|
|
|
|
return (<div className="mx_WhoIsTypingTile_empty" />);
|
2018-11-12 18:09:51 +03:00
|
|
|
}
|
|
|
|
|
2018-11-12 20:19:18 +03:00
|
|
|
const EmojiText = sdk.getComponent('elements.EmojiText');
|
|
|
|
|
2018-11-12 18:09:51 +03:00
|
|
|
return (
|
2018-11-13 11:15:43 +03:00
|
|
|
<li className="mx_WhoIsTypingTile">
|
2018-11-12 20:19:18 +03:00
|
|
|
<div className="mx_WhoIsTypingTile_avatars">
|
2019-01-17 18:30:55 +03:00
|
|
|
{ this._renderTypingIndicatorAvatars(usersTyping, this.props.whoIsTypingLimit) }
|
2018-11-12 18:09:51 +03:00
|
|
|
</div>
|
2018-11-12 20:19:18 +03:00
|
|
|
<div className="mx_WhoIsTypingTile_label">
|
|
|
|
<EmojiText>{ typingString }</EmojiText>
|
2018-11-12 18:09:51 +03:00
|
|
|
</div>
|
2018-11-13 11:15:43 +03:00
|
|
|
</li>
|
2018-11-12 18:09:51 +03:00
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|