Refactor how 'readReceipts' are passed into EventTiles
Instead of passing a list of RoomMembers, pass a list of records with a `roomMember` prop and a `ts` prop so we can display the timestamp on hover.
This commit is contained in:
parent
bd7553d1ea
commit
49010c3e93
2 changed files with 26 additions and 36 deletions
|
@ -471,27 +471,33 @@ module.exports = React.createClass({
|
||||||
!== new Date(nextEventTs).toDateString());
|
!== new Date(nextEventTs).toDateString());
|
||||||
},
|
},
|
||||||
|
|
||||||
// get a list of the userids whose read receipts should
|
// get a list of read receipts that should be shown next to this event
|
||||||
// be shown next to this event
|
// Receipts are objects which have a 'roomMember' and 'ts'.
|
||||||
_getReadReceiptsForEvent: function(event) {
|
_getReadReceiptsForEvent: function(event) {
|
||||||
var myUserId = MatrixClientPeg.get().credentials.userId;
|
const myUserId = MatrixClientPeg.get().credentials.userId;
|
||||||
|
|
||||||
// get list of read receipts, sorted most recent first
|
// get list of read receipts, sorted most recent first
|
||||||
var room = MatrixClientPeg.get().getRoom(event.getRoomId());
|
const room = MatrixClientPeg.get().getRoom(event.getRoomId());
|
||||||
if (!room) {
|
if (!room) {
|
||||||
// huh.
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
let receipts = [];
|
||||||
|
room.getReceiptsForEvent(event).forEach((r) => {
|
||||||
|
if (!r.userId || r.type !== "m.read" || r.userId === myUserId) {
|
||||||
|
return; // ignore non-read receipts and receipts from self.
|
||||||
|
}
|
||||||
|
let member = room.getMember(r.userId);
|
||||||
|
if (!member) {
|
||||||
|
return; // ignore unknown user IDs
|
||||||
|
}
|
||||||
|
receipts.push({
|
||||||
|
roomMember: member,
|
||||||
|
ts: r.data ? r.data.ts : 0,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
return room.getReceiptsForEvent(event).filter(function(r) {
|
return receipts.sort((r1, r2) => {
|
||||||
return r.type === "m.read" && r.userId != myUserId;
|
return r2.ts - r1.ts;
|
||||||
}).sort(function(r1, r2) {
|
|
||||||
return r2.data.ts - r1.data.ts;
|
|
||||||
}).map(function(r) {
|
|
||||||
return room.getMember(r.userId);
|
|
||||||
}).filter(function(m) {
|
|
||||||
// check that the user is a known room member
|
|
||||||
return m;
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -103,7 +103,7 @@ module.exports = WithMatrixClient(React.createClass({
|
||||||
/* callback called when dynamic content in events are loaded */
|
/* callback called when dynamic content in events are loaded */
|
||||||
onWidgetLoad: React.PropTypes.func,
|
onWidgetLoad: React.PropTypes.func,
|
||||||
|
|
||||||
/* a list of Room Members whose read-receipts we should show */
|
/* a list of read-receipts we should show. Each object has a 'roomMember' and 'ts'. */
|
||||||
readReceipts: React.PropTypes.arrayOf(React.PropTypes.object),
|
readReceipts: React.PropTypes.arrayOf(React.PropTypes.object),
|
||||||
|
|
||||||
/* opaque readreceipt info for each userId; used by ReadReceiptMarker
|
/* opaque readreceipt info for each userId; used by ReadReceiptMarker
|
||||||
|
@ -231,7 +231,7 @@ module.exports = WithMatrixClient(React.createClass({
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
for (var j = 0; j < rA.length; j++) {
|
for (var j = 0; j < rA.length; j++) {
|
||||||
if (rA[j].userId !== rB[j].userId) {
|
if (rA[j].roomMember.userId !== rB[j].roomMember.userId) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -287,31 +287,18 @@ module.exports = WithMatrixClient(React.createClass({
|
||||||
getReadAvatars: function() {
|
getReadAvatars: function() {
|
||||||
var ReadReceiptMarker = sdk.getComponent('rooms.ReadReceiptMarker');
|
var ReadReceiptMarker = sdk.getComponent('rooms.ReadReceiptMarker');
|
||||||
var avatars = [];
|
var avatars = [];
|
||||||
|
|
||||||
var left = 0;
|
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 || [];
|
var receipts = this.props.readReceipts || [];
|
||||||
for (var i = 0; i < receipts.length; ++i) {
|
for (var i = 0; i < receipts.length; ++i) {
|
||||||
var member = receipts[i];
|
var receipt = receipts[i];
|
||||||
|
|
||||||
var hidden = true;
|
var hidden = true;
|
||||||
if ((i < MAX_READ_AVATARS) || this.state.allReadAvatars) {
|
if ((i < MAX_READ_AVATARS) || this.state.allReadAvatars) {
|
||||||
hidden = false;
|
hidden = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
var userId = member.userId;
|
var userId = receipt.roomMember.userId;
|
||||||
var readReceiptInfo;
|
var readReceiptInfo;
|
||||||
|
|
||||||
if (this.props.readReceiptMap) {
|
if (this.props.readReceiptMap) {
|
||||||
|
@ -323,18 +310,15 @@ module.exports = WithMatrixClient(React.createClass({
|
||||||
}
|
}
|
||||||
|
|
||||||
//console.log("i = " + i + ", MAX_READ_AVATARS = " + MAX_READ_AVATARS + ", allReadAvatars = " + this.state.allReadAvatars + " visibility = " + style.visibility);
|
//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)
|
// add to the start so the most recent is on the end (ie. ends up rightmost)
|
||||||
avatars.unshift(
|
avatars.unshift(
|
||||||
<ReadReceiptMarker key={userId} member={member}
|
<ReadReceiptMarker key={userId} member={receipt.roomMember}
|
||||||
leftOffset={left} hidden={hidden}
|
leftOffset={left} hidden={hidden}
|
||||||
readReceiptInfo={readReceiptInfo}
|
readReceiptInfo={readReceiptInfo}
|
||||||
checkUnmounting={this.props.checkUnmounting}
|
checkUnmounting={this.props.checkUnmounting}
|
||||||
suppressAnimation={this._suppressReadReceiptAnimation}
|
suppressAnimation={this._suppressReadReceiptAnimation}
|
||||||
onClick={this.toggleAllReadAvatars}
|
onClick={this.toggleAllReadAvatars}
|
||||||
timestamp={rData ? rData.ts : null}
|
timestamp={receipt.ts}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue