diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js index 1e0db2321d..53bf560673 100644 --- a/src/components/structures/MessagePanel.js +++ b/src/components/structures/MessagePanel.js @@ -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; }); }, diff --git a/src/components/views/avatars/MemberAvatar.js b/src/components/views/avatars/MemberAvatar.js index 1f6736138d..c8a9abb4fe 100644 --- a/src/components/views/avatars/MemberAvatar.js +++ b/src/components/views/avatars/MemberAvatar.js @@ -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, diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index 8dd84f9364..42dbe78630 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -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,19 +287,28 @@ module.exports = WithMatrixClient(React.createClass({ getReadAvatars: function() { var ReadReceiptMarker = sdk.getComponent('rooms.ReadReceiptMarker'); var avatars = []; - var left = 0; + // It's possible that the receipt was sent several days AFTER the event. + // If it is, we want to display the complete date along with the HH:MM:SS, + // rather than just HH:MM:SS. + let dayAfterEvent = new Date(this.props.mxEvent.getTs()); + dayAfterEvent.setDate(dayAfterEvent.getDate() + 1) + dayAfterEvent.setHours(0); + dayAfterEvent.setMinutes(0); + dayAfterEvent.setSeconds(0); + let dayAfterEventTime = dayAfterEvent.getTime(); + 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) { @@ -311,15 +320,16 @@ module.exports = WithMatrixClient(React.createClass({ } //console.log("i = " + i + ", MAX_READ_AVATARS = " + MAX_READ_AVATARS + ", allReadAvatars = " + this.state.allReadAvatars + " visibility = " + style.visibility); - // add to the start so the most recent is on the end (ie. ends up rightmost) avatars.unshift( -