Show the full date and time if the receipt was sent days after the event

pull/21833/head
Kegan Dougal 2016-12-09 11:43:23 +00:00
parent 49010c3e93
commit 5d99d68a64
2 changed files with 25 additions and 3 deletions

View File

@ -289,6 +289,16 @@ module.exports = WithMatrixClient(React.createClass({
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 receipt = receipts[i];
@ -319,6 +329,7 @@ module.exports = WithMatrixClient(React.createClass({
suppressAnimation={this._suppressReadReceiptAnimation}
onClick={this.toggleAllReadAvatars}
timestamp={receipt.ts}
showFullTimestamp={receipt.ts >= dayAfterEventTime}
/>
);

View File

@ -63,6 +63,9 @@ module.exports = React.createClass({
// Timestamp when the receipt was read
timestamp: React.PropTypes.number,
// True to show the full date/time rather than just the time
showFullTimestamp: React.PropTypes.bool,
},
getDefaultProps: function() {
@ -165,10 +168,18 @@ module.exports = React.createClass({
visibility: this.props.hidden ? 'hidden' : 'visible',
};
var title;
let title;
if (this.props.timestamp) {
// "7:05:45 PM (@alice:matrix.org)"
title = new Date(this.props.timestamp).toLocaleTimeString() + " (" + this.props.member.userId + ")";
let suffix = " (" + this.props.member.userId + ")";
let ts = new Date(this.props.timestamp);
if (this.props.showFullTimestamp) {
// "15/12/2016, 7:05:45 PM (@alice:matrix.org)"
title = ts.toLocaleString() + suffix;
}
else {
// "7:05:45 PM (@alice:matrix.org)"
title = ts.toLocaleTimeString() + suffix;
}
}
return (