Add read receipt times to the hovertip of read markers

Fixes #2709. Surprisingly, this data was never passed down to
ReadReceiptMarker.
This commit is contained in:
Kegan Dougal 2016-12-08 16:23:20 +00:00
parent 587325b36c
commit bd7553d1ea
3 changed files with 27 additions and 1 deletions

View file

@ -33,6 +33,7 @@ module.exports = React.createClass({
onClick: React.PropTypes.func,
// Whether the onClick of the avatar should be overriden to dispatch 'view_user'
viewUserOnClick: React.PropTypes.bool,
title: React.PropTypes.string,
},
getDefaultProps: function() {
@ -58,7 +59,7 @@ module.exports = React.createClass({
}
return {
name: props.member.name,
title: props.member.userId,
title: props.title || props.member.userId,
imageUrl: Avatar.avatarUrlForMember(props.member,
props.width,
props.height,

View file

@ -290,6 +290,18 @@ module.exports = WithMatrixClient(React.createClass({
var left = 0;
var readReceiptData = Object.create(null);
var room = this.props.matrixClient.getRoom(this.props.mxEvent.getRoomId());
if (room) {
// [ {type/userId/data} ]
room.getReceiptsForEvent(this.props.mxEvent).forEach(function(r) {
if (r.type !== "m.read" || !r.data.ts) {
return;
}
readReceiptData[r.userId] = r.data;
})
}
var receipts = this.props.readReceipts || [];
for (var i = 0; i < receipts.length; ++i) {
var member = receipts[i];
@ -312,6 +324,8 @@ module.exports = WithMatrixClient(React.createClass({
//console.log("i = " + i + ", MAX_READ_AVATARS = " + MAX_READ_AVATARS + ", allReadAvatars = " + this.state.allReadAvatars + " visibility = " + style.visibility);
var rData = readReceiptData[member.userId];
// add to the start so the most recent is on the end (ie. ends up rightmost)
avatars.unshift(
<ReadReceiptMarker key={userId} member={member}
@ -320,6 +334,7 @@ module.exports = WithMatrixClient(React.createClass({
checkUnmounting={this.props.checkUnmounting}
suppressAnimation={this._suppressReadReceiptAnimation}
onClick={this.toggleAllReadAvatars}
timestamp={rData ? rData.ts : null}
/>
);

View file

@ -60,6 +60,9 @@ module.exports = React.createClass({
// callback for clicks on this RR
onClick: React.PropTypes.func,
// Timestamp when the receipt was read
timestamp: React.PropTypes.number,
},
getDefaultProps: function() {
@ -162,6 +165,12 @@ module.exports = React.createClass({
visibility: this.props.hidden ? 'hidden' : 'visible',
};
var title;
if (this.props.timestamp) {
// "7:05:45 PM (@alice:matrix.org)"
title = new Date(this.props.timestamp).toLocaleTimeString() + " (" + this.props.member.userId + ")";
}
return (
<Velociraptor
startStyles={this.state.startStyles}
@ -170,6 +179,7 @@ module.exports = React.createClass({
member={this.props.member}
width={14} height={14} resizeMethod="crop"
style={style}
title={title}
onClick={this.props.onClick}
/>
</Velociraptor>