Display who's typing

pull/1/head
David Baker 2015-07-19 16:38:56 +01:00
parent 73c8eb7738
commit e1f3c80f19
3 changed files with 75 additions and 0 deletions

View File

@ -71,6 +71,20 @@ module.exports = React.createClass({
mx_RoomView_scrollheader: true, mx_RoomView_scrollheader: true,
loading: this.state.paginating loading: this.state.paginating
}); });
var statusBar = (
<div />
);
var typingString = this.getWhoIsTypingString();
if (typingString) {
statusBar = (
<div className="mx_RoomView_typingBar">
{typingString}
</div>
);
}
return ( return (
<div className="mx_RoomView"> <div className="mx_RoomView">
<RoomHeader room={this.state.room} /> <RoomHeader room={this.state.room} />
@ -88,6 +102,7 @@ module.exports = React.createClass({
</div> </div>
<div className="mx_RoomView_statusArea"> <div className="mx_RoomView_statusArea">
<div className="mx_RoomView_statusAreaBox"> <div className="mx_RoomView_statusAreaBox">
{statusBar}
</div> </div>
</div> </div>
<MessageComposer room={this.state.room} /> <MessageComposer room={this.state.room} />

49
src/WhoIsTyping.js Normal file
View File

@ -0,0 +1,49 @@
var MatrixClientPeg = require("./MatrixClientPeg");
module.exports = {
usersTypingApartFromMe: function(room) {
return this.usersTyping(
room, [MatrixClientPeg.get().credentials.userId]
);
},
/**
* Given a Room object and, optionally, a list of userID strings
* to exclude, return a list of user objects who are typing.
*/
usersTyping: function(room, exclude) {
var whoIsTyping = [];
if (exclude === undefined) {
exclude = [];
}
var memberKeys = Object.keys(room.currentState.members);
for (var i = 0; i < memberKeys.length; ++i) {
var userId = memberKeys[i];
if (room.currentState.members[userId].typing) {
if (exclude.indexOf(userId) == -1) {
whoIsTyping.push(room.currentState.members[userId]);
}
}
}
return whoIsTyping;
},
whoIsTypingString: function(room) {
var whoIsTyping = this.usersTypingApartFromMe(room);
if (whoIsTyping.length == 0) {
return null;
} else if (whoIsTyping.length == 1) {
return whoIsTyping[0].name + ' is typing';
} else {
var names = whoIsTyping.map(function(m) {
return m.name;
});
var lastPerson = names.shift();
return names.join(', ') + ' and ' + lastPerson + ' are typing';
}
}
}

View File

@ -20,6 +20,7 @@ var MatrixClientPeg = require("../../MatrixClientPeg");
var React = require("react"); var React = require("react");
var q = require("q"); var q = require("q");
var ContentMessages = require("../../ContentMessages"); var ContentMessages = require("../../ContentMessages");
var WhoIsTyping = require("../../WhoIsTyping");
var dis = require("../../dispatcher"); var dis = require("../../dispatcher");
@ -51,6 +52,7 @@ module.exports = {
this.dispatcherRef = dis.register(this.onAction); this.dispatcherRef = dis.register(this.onAction);
MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline); MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
MatrixClientPeg.get().on("Room.name", this.onRoomName); MatrixClientPeg.get().on("Room.name", this.onRoomName);
MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
this.atBottom = true; this.atBottom = true;
}, },
@ -64,6 +66,7 @@ module.exports = {
if (MatrixClientPeg.get()) { if (MatrixClientPeg.get()) {
MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline); MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
MatrixClientPeg.get().removeListener("Room.name", this.onRoomName); MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
MatrixClientPeg.get().removeListener("RoomMember.typing", this.onRoomMemberTyping);
} }
}, },
@ -118,6 +121,10 @@ module.exports = {
} }
}, },
onRoomMemberTyping: function(ev, member) {
this.forceUpdate();
},
componentDidMount: function() { componentDidMount: function() {
if (this.refs.messageWrapper) { if (this.refs.messageWrapper) {
var messageWrapper = this.refs.messageWrapper.getDOMNode(); var messageWrapper = this.refs.messageWrapper.getDOMNode();
@ -236,6 +243,10 @@ module.exports = {
} }
}, },
getWhoIsTypingString() {
return WhoIsTyping.whoIsTypingString(this.state.room);
},
getEventTiles: function() { getEventTiles: function() {
var ret = []; var ret = [];
var count = 0; var count = 0;