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 18:30:55 +03:00
|
|
|
userTimers: {},
|
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);
|
|
|
|
}
|
|
|
|
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");
|
2018-11-12 18:09:51 +03:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onRoomMemberTyping: function(ev, member) {
|
2019-01-17 18:30:55 +03:00
|
|
|
console.log(`WhoIsTypingTile: incoming typing event for`, ev.getContent().user_ids);
|
|
|
|
const usersTyping = WhoIsTyping.usersTypingApartFromMeAndIgnored(this.props.room);
|
2018-11-12 18:09:51 +03:00
|
|
|
this.setState({
|
2019-01-17 18:30:55 +03:00
|
|
|
userTimers: this._updateUserTimers(usersTyping),
|
|
|
|
usersTyping,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
_updateUserTimers(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);
|
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) => {
|
|
|
|
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;
|
2018-11-12 18:09:51 +03:00
|
|
|
},
|
|
|
|
|
2019-01-17 18:30:55 +03:00
|
|
|
_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);
|
|
|
|
}
|
|
|
|
},
|
2018-11-12 18:09:51 +03:00
|
|
|
|
2019-01-17 18:30:55 +03:00
|
|
|
_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) {
|
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;
|
|
|
|
const stoppedUsersOnTimer = Object.keys(this.state.userTimers)
|
|
|
|
.map((userId) => this.props.room.getMember(userId));
|
|
|
|
usersTyping = usersTyping.concat(stoppedUsersOnTimer);
|
|
|
|
|
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
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|