PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Refactor how 'readReceipts' are passed into EventTiles

Browse source 
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:
Kegan Dougal 2016-12-09 11:24:10 +00:00
parent bd7553d1ea
commit 49010c3e93
2 changed files with 26 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/components/structures/MessagePanel.js
View file

@ -471,27 +471,33 @@ module.exports = React.createClass({
!== new Date(nextEventTs).toDateString());
},
// get a list of the userids whose read receipts should
// be shown next to this event
// get a list of read receipts that should be shown next to this event
// Receipts are objects which have a 'roomMember' and 'ts'.
_getReadReceiptsForEvent: function(event) {
var myUserId = MatrixClientPeg.get().credentials.userId;
const myUserId = MatrixClientPeg.get().credentials.userId;
// 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) {
// huh.
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 r.type === "m.read" && r.userId != myUserId;
}).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;
return receipts.sort((r1, r2) => {
return r2.ts - r1.ts;
});
},

28
src/components/views/rooms/EventTile.js
View file

@ -103,7 +103,7 @@ module.exports = WithMatrixClient(React.createClass({
/* callback called when dynamic content in events are loaded */
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),
/* opaque readreceipt info for each userId; used by ReadReceiptMarker
@ -231,7 +231,7 @@ module.exports = WithMatrixClient(React.createClass({
return false;
}
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;
}
}
@ -287,31 +287,18 @@ module.exports = WithMatrixClient(React.createClass({
getReadAvatars: function() {
var ReadReceiptMarker = sdk.getComponent('rooms.ReadReceiptMarker');
var avatars = [];
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];
var receipt = receipts[i];
var hidden = true;
if ((i < MAX_READ_AVATARS) || this.state.allReadAvatars) {
hidden = false;
}
var userId = member.userId;
var userId = receipt.roomMember.userId;
var readReceiptInfo;
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);
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}
<ReadReceiptMarker key={userId} member={receipt.roomMember}
leftOffset={left} hidden={hidden}
readReceiptInfo={readReceiptInfo}
checkUnmounting={this.props.checkUnmounting}
suppressAnimation={this._suppressReadReceiptAnimation}
onClick={this.toggleAllReadAvatars}
timestamp={rData ? rData.ts : null}
timestamp={receipt.ts}
/>
);