Read receipts modal

client/main.js

@@ -0,0 +1 @@
+import '/imports/startup/client';

imports/message-read-receipt/client/index.js

@@ -0,0 +1 @@
+import './readReceipts';

imports/message-read-receipt/client/readReceipts.html

@@ -0,0 +1,8 @@
+<template name="readReceipts">
+	{{#each receipts}}
+	<div class="message background-transparent-dark-hover">
+		<div class="user color-primary-font-color">{{user}}</div>
+		<span class="time color-info-font-color" title="{{dateTime}}">{{time}}</span>
+	</div>
+	{{/each}}
+</template>

imports/message-read-receipt/client/readReceipts.js

@@ -0,0 +1,29 @@
+import { ReactiveVar } from 'meteor/reactive-var';
+import moment from 'moment';
+
+import './readReceipts.html';
+
+Template.readReceipts.helpers({
+	receipts() {
+		return Template.instance().readReceipts.get();
+	},
+	user() {
+		return this.user.name || this.user.username;
+	},
+	time() {
+		return moment(this.ts).format('L LTS');
+	}
+});
+
+Template.readReceipts.onCreated(function readReceiptsOnCreated() {
+	this.loading = new ReactiveVar(false);
+	this.readReceipts = new ReactiveVar([]);
+});
+
+Template.readReceipts.onRendered(function readReceiptsOnRendered() {
+	this.loading.set(true);
+	Meteor.call('getReadReceipts', { messageId: this.data.messageId }, (error, result) => {
+		this.loading.set(false);
+		this.readReceipts.set(result);
+	});
+});

imports/message-read-receipt/server/api/methods/getReadReceipts.js

@@ -0,0 +1,11 @@
+import { Meteor } from 'meteor/meteor';
+
+import { ReadReceipt } from '../../lib/ReadReceipt';
+
+Meteor.methods({
+	getReadReceipts({ messageId }) {
+		const message = RocketChat.models.Messages.findOneById(messageId);
+
+		return ReadReceipt.getReceipts(message);
+	}
+});

imports/message-read-receipt/server/index.js

@@ -1,2 +1,4 @@
 import './dbIndexes';
 import './settings';
+
+import './api/methods/getReadReceipts';

imports/message-read-receipt/server/lib/ReadReceipt.js

@@ -34,12 +34,14 @@ export const ReadReceipt = {
 		// if firstSubscription on room didn't change
 
 		if (RocketChat.settings.get('Message_Read_Receipt_Store_Users')) {
+			const ts = new Date();
 			const receipts = RocketChat.models.Messages.findUnreadMessagesByRoomAndDate(roomId, userLastSeen).map(message => {
 				return {
 					_id: Random.id(),
 					roomId,
 					userId,
-					messageId: message._id
+					messageId: message._id,
+					ts
 				};
 			});
 
@@ -51,5 +53,12 @@ export const ReadReceipt = {
 		}
 
 		RocketChat.models.Messages.setAsRead(roomId, firstSubscription.ls);
+	},
+
+	getReceipts(message) {
+		return ModelReadReceipts.findByMessageId(message._id).map(receipt => ({
+			...receipt,
+			user: RocketChat.models.Users.findOneById(receipt.userId, { fields: { username: 1, name: 1 }})
+		}));
 	}
 };

imports/message-read-receipt/server/models/ReadReceipts.js

@@ -10,6 +10,10 @@ class ModelReadReceipts extends RocketChat.models._Base {
 			unique: 1
 		});
 	}
+
+	findByMessageId(messageId) {
+		return this.find({ messageId });
+	}
 }
 
-export default new ModelReadReceipts('message_read_receipt', true);
+export default new ModelReadReceipts('message_read_receipt');

imports/startup/client/index.js

@@ -0,0 +1 @@
+import '../../message-read-receipt/client';

packages/rocketchat-ui/client/views/app/room.js

@@ -718,6 +718,20 @@ Template.room.events({
 			showCancelButton: true,
 			cancelButtonText: t('Close')
 		});
+	},
+	'click .read-receipt'(event) {
+		const data = Blaze.getData(event.currentTarget);
+		const messageId = data && data._arguments && data._arguments[1] && data._arguments[1]._id;
+		modal.open({
+			title: 'Read receipts',
+			content: 'readReceipts',
+			data: {
+				messageId
+			},
+			showConfirmButton: true,
+			showCancelButton: false,
+			confirmButtonText: t('Close')
+		});
 	}
 });