@nodebb/nodebb-plugin-reactions 2.1.0 → 2.1.1

package/languages/en-GB/reactions.json

@@ -5,9 +5,11 @@
   "error.maximum-reached": "Maximum reactions reached",
   "error.maximum-per-user-per-post-reached": "Maximum reactions per user per post reached",
   "settings.title": "Reactions plugin settings",
+  "settings.enable-post-reactions": "Enable post reactions",
   "settings.max-reactions-per-post": "Maximum unique reactions per post (0 for unlimited, default: 4)",
   "settings.max-reactions-per-user-per-post": "Maximum reactions per user per post (0 for unlimited)",
   "settings.max-reactions-per-user-per-post-help": "The limit is enforced only when adding a new reaction and not when joining an existing reaction.",
+  "settings.enable-message-reactions": "Enable message reactions",
   "settings.max-reactions-per-message": "Maximum unique reactions per message (0 for unlimited, default: 4)",
   "settings.max-reactions-per-user-per-message": "Maximum reactions per user per message (0 for unlimited)",
   "settings.max-reactions-per-user-per-message-help": "The limit is enforced only when adding a new reaction and not when joining an existing reaction.",

package/library.js

@@ -1,10 +1,10 @@
 'use strict';
 
-const _ = require.main.require('lodash');
 const meta = require.main.require('./src/meta');
 const user = require.main.require('./src/user');
 const posts = require.main.require('./src/posts');
 const messaging = require.main.require('./src/messaging');
+const privileges = require.main.require('./src/privileges');
 const db = require.main.require('./src/database');
 const routesHelpers = require.main.require('./src/routes/helpers');
 const websockets = require.main.require('./src/socket.io/index');
@@ -45,12 +45,27 @@ ReactionsPlugin.getPluginConfig = async function (config) {
 		config.maximumReactions = settings.maximumReactions ? parseInt(settings.maximumReactions, 10) : DEFAULT_MAX_EMOTES;
 		config.maximumReactionsPerMessage = settings.maximumReactionsPerMessage ?
 			parseInt(settings.maximumReactionsPerMessage, 10) : DEFAULT_MAX_EMOTES;
+		config.enablePostReactions = settings.enablePostReactions === 'on';
+		config.enableMessageReactions = settings.enableMessageReactions === 'on';
 	} catch (e) {
 		console.error(e);
 	}
 	return config;
 };
 
+ReactionsPlugin.filterSettingsGet = async function (hookData) {
+	if (hookData.plugin === 'reactions') {
+		const { values } = hookData;
+		if (!values.hasOwnProperty('enablePostReactions')) {
+			values.enablePostReactions = 'on';
+		}
+		if (!values.hasOwnProperty('enableMessageReactions')) {
+			values.enableMessageReactions = 'on';
+		}
+	}
+	return hookData;
+};
+
 ReactionsPlugin.getPostReactions = async function (data) {
 	if (data.uid === 0) {
 		return data;
@@ -83,42 +98,24 @@ ReactionsPlugin.getPostReactions = async function (data) {
 			}
 		}
 
-		const reactionSetToUsersMap = new Map(); // reactionSet -> { uid, username }
-		if (reactionSets.length > 0) {
-			const uidsForReactions = await db.getSetsMembers(reactionSets);
-			const allUids = _.union(...uidsForReactions).filter(Boolean);
-			const usersData = await user.getUsersFields(allUids, ['uid', 'username']);
-			const uidToUserdataMap = _.keyBy(usersData, 'uid');
-
-			for (let i = 0, len = reactionSets.length; i < len; i++) {
-				const uidsForReaction = uidsForReactions[i];
-				if (uidsForReaction && uidsForReaction.length > 0) {
-					const usersData = uidsForReaction.map(uid => uidToUserdataMap[uid]).filter(Boolean);
-					reactionSetToUsersMap.set(reactionSets[i], usersData);
-				}
-			}
-		}
+		const reactionSetToUsersMap = await getReactionSetsUidsMap(reactionSets);
 
 		for (const post of data.posts) {
 			post.maxReactionsReached = pidToIsMaxReactionsReachedMap.get(post.pid);
 			post.reactions = [];
 
-			if (pidToReactionsMap.has(post.pid)) {
-				for (const reaction of pidToReactionsMap.get(post.pid)) {
+			const reactions = pidToReactionsMap.get(post.pid);
+			if (reactions) {
+				for (const reaction of reactions) {
 					const reactionSet = `pid:${post.pid}:reaction:${reaction}`;
-					if (reactionSetToUsersMap.has(reactionSet)) {
-						const usersData = reactionSetToUsersMap.get(reactionSet);
-						const reactionCount = usersData.length;
-						const reactedUsernames = usersData.map(userData => userData.username).join(', ');
-						const reactedUids = usersData.map(userData => userData.uid);
-
+					const uids = reactionSetToUsersMap.get(reactionSet);
+					if (Array.isArray(uids)) {
 						post.reactions.push({
 							pid: post.pid,
-							reacted: reactedUids.includes(data.uid),
+							reacted: uids.includes(String(data.uid)),
 							reaction,
-							usernames: reactedUsernames,
 							reactionImage: parse(reaction),
-							reactionCount,
+							reactionCount: uids.length,
 						});
 					}
 				}
@@ -158,42 +155,23 @@ ReactionsPlugin.getMessageReactions = async function (data) {
 			}
 		}
 
-		const reactionSetToUsersMap = new Map(); // reactionSet -> { uid, username }
-		if (reactionSets.length > 0) {
-			const uidsForReactions = await db.getSetsMembers(reactionSets);
-			const allUids = _.union(...uidsForReactions).filter(Boolean);
-			const usersData = await user.getUsersFields(allUids, ['uid', 'username']);
-			const uidToUserdataMap = _.keyBy(usersData, 'uid');
-
-			for (let i = 0, len = reactionSets.length; i < len; i++) {
-				const uidsForReaction = uidsForReactions[i];
-				if (uidsForReaction && uidsForReaction.length > 0) {
-					const usersData = uidsForReaction.map(uid => uidToUserdataMap[uid]).filter(Boolean);
-					reactionSetToUsersMap.set(reactionSets[i], usersData);
-				}
-			}
-		}
+		const reactionSetToUsersMap = await getReactionSetsUidsMap(reactionSets);
 
 		for (const msg of data.messages) {
 			msg.maxReactionsReached = midToIsMaxReactionsReachedMap.get(msg.mid);
 			msg.reactions = [];
-
-			if (midToReactionsMap.has(msg.mid)) {
-				for (const reaction of midToReactionsMap.get(msg.mid)) {
+			const reactions = midToReactionsMap.get(msg.mid);
+			if (reactions) {
+				for (const reaction of reactions) {
 					const reactionSet = `mid:${msg.mid}:reaction:${reaction}`;
-					if (reactionSetToUsersMap.has(reactionSet)) {
-						const usersData = reactionSetToUsersMap.get(reactionSet);
-						const reactionCount = usersData.length;
-						const reactedUsernames = usersData.map(userData => userData.username).join(', ');
-						const reactedUids = usersData.map(userData => userData.uid);
-
+					const uids = reactionSetToUsersMap.get(reactionSet);
+					if (Array.isArray(uids)) {
 						msg.reactions.push({
 							mid: msg.mid,
-							reacted: reactedUids.includes(data.uid),
+							reacted: uids.includes(String(data.uid)),
 							reaction,
-							usernames: reactedUsernames,
 							reactionImage: parse(reaction),
-							reactionCount,
+							reactionCount: uids.length,
 						});
 					}
 				}
@@ -205,6 +183,22 @@ ReactionsPlugin.getMessageReactions = async function (data) {
 	return data;
 };
 
+
+async function getReactionSetsUidsMap(reactionSets) {
+	const reactionSetToUsersMap = new Map(); // reactionSet -> uids
+	if (reactionSets.length > 0) {
+		const uidsForReactions = await db.getSetsMembers(reactionSets);
+
+		for (let i = 0, len = reactionSets.length; i < len; i++) {
+			const uidsForReaction = uidsForReactions[i];
+			if (uidsForReaction && uidsForReaction.length > 0) {
+				reactionSetToUsersMap.set(reactionSets[i], uidsForReaction);
+			}
+		}
+	}
+	return reactionSetToUsersMap;
+}
+
 ReactionsPlugin.onReply = async function (data) {
 	if (data.uid !== 0) {
 		data.reactions = [];
@@ -229,15 +223,11 @@ ReactionsPlugin.deleteReactions = async function (hookData) {
 
 async function sendPostEvent(data, eventName) {
 	try {
-		const [reactionCount, totalReactions, uids] = await Promise.all([
+		const [reactionCount, totalReactions] = await Promise.all([
 			db.setCount(`pid:${data.pid}:reaction:${data.reaction}`),
 			db.setCount(`pid:${data.pid}:reactions`),
-			db.getSetMembers(`pid:${data.pid}:reaction:${data.reaction}`),
 		]);
 
-		const userdata = await user.getUsersFields(uids, ['uid', 'username']);
-		const usernames = userdata.map(user => user.username).join(', ');
-
 		if (parseInt(reactionCount, 10) === 0) {
 			await db.setRemove(`pid:${data.pid}:reactions`, data.reaction);
 		}
@@ -248,7 +238,6 @@ async function sendPostEvent(data, eventName) {
 			reaction: data.reaction,
 			reactionCount,
 			totalReactions,
-			usernames,
 			reactionImage: parse(data.reaction),
 		});
 	} catch (e) {
@@ -258,15 +247,11 @@ async function sendPostEvent(data, eventName) {
 
 async function sendMessageEvent(data, eventName) {
 	try {
-		const [reactionCount, totalReactions, uids] = await Promise.all([
+		const [reactionCount, totalReactions] = await Promise.all([
 			db.setCount(`mid:${data.mid}:reaction:${data.reaction}`),
 			db.setCount(`mid:${data.mid}:reactions`),
-			db.getSetMembers(`mid:${data.mid}:reaction:${data.reaction}`),
 		]);
 
-		const userdata = await user.getUsersFields(uids, ['uid', 'username']);
-		const usernames = userdata.map(user => user.username).join(', ');
-
 		if (parseInt(reactionCount, 10) === 0) {
 			await db.setRemove(`mid:${data.mid}:reactions`, data.reaction);
 		}
@@ -277,7 +262,6 @@ async function sendMessageEvent(data, eventName) {
 			reaction: data.reaction,
 			reactionCount,
 			totalReactions,
-			usernames,
 			reactionImage: parse(data.reaction),
 		});
 	} catch (e) {
@@ -310,6 +294,9 @@ SocketPlugins.reactions = {
 		}
 
 		const settings = await meta.settings.get('reactions');
+		if (settings.enablePostReactions === 'off') {
+			throw new Error('[[error:post-reactions-disabled]]');
+		}
 		const maximumReactions = settings.maximumReactions || DEFAULT_MAX_EMOTES;
 		const [tid, totalReactions, emojiIsAlreadyExist, alreadyReacted, reactionReputation] = await Promise.all([
 			posts.getPostField(data.pid, 'tid'),
@@ -360,11 +347,15 @@ SocketPlugins.reactions = {
 			throw new Error('[[reactions:error.invalid-reaction]]');
 		}
 
-		const [tid, hasReacted, reactionReputation] = await Promise.all([
+		const [settings, tid, hasReacted, reactionReputation] = await Promise.all([
+			meta.settings.get('reactions'),
 			posts.getPostField(data.pid, 'tid'),
 			db.isSetMember(`pid:${data.pid}:reaction:${data.reaction}`, socket.uid),
 			getReactionReputation(data.reaction),
 		]);
+		if (settings.enablePostReactions === 'off') {
+			throw new Error('[[error:post-reactions-disabled]]');
+		}
 		if (!tid) {
 			throw new Error('[[error:no-post]]');
 		}
@@ -395,6 +386,9 @@ SocketPlugins.reactions = {
 		}
 
 		const settings = await meta.settings.get('reactions');
+		if (settings.enableMessageReactions === 'off') {
+			throw new Error('[[error:post-reactions-disabled]]');
+		}
 		const maximumReactionsPerMessage = settings.maximumReactionsPerMessage || DEFAULT_MAX_EMOTES;
 		const [roomId, totalReactions, emojiIsAlreadyExist] = await Promise.all([
 			messaging.getMessageField(data.mid, 'roomId'),
@@ -442,10 +436,14 @@ SocketPlugins.reactions = {
 			throw new Error('[[reactions:error.invalid-reaction]]');
 		}
 
-		const [roomId, hasReacted] = await Promise.all([
+		const [settings, roomId, hasReacted] = await Promise.all([
+			meta.settings.get('reactions'),
 			messaging.getMessageField(data.mid, 'roomId'),
 			db.isSetMember(`mid:${data.mid}:reaction:${data.reaction}`, socket.uid),
 		]);
+		if (settings.enableMessageReactions === 'off') {
+			throw new Error('[[error:post-reactions-disabled]]');
+		}
 		if (!roomId) {
 			throw new Error('[[error:no-message]]');
 		}
@@ -462,5 +460,43 @@ SocketPlugins.reactions = {
 
 		await sendMessageEvent(data, 'event:reactions.removeMessageReaction');
 	},
+	getReactionUsernames: async function (socket, data) {
+		if (!socket.uid) {
+			throw new Error('[[error:not-logged-in]]');
+		}
+		if (!emojiTable[data.reaction]) {
+			throw new Error('[[reactions:error.invalid-reaction]]');
+		}
+		let set = '';
+		if (data.type === 'post') {
+			if (!await privileges.posts.can('topics:read', data.pid, socket.uid)) {
+				throw new Error('[[error:not-allowed]]');
+			}
+			set = `pid:${data.pid}:reaction:${data.reaction}`;
+		} else if (data.type === 'message') {
+			const roomId = await messaging.getMessageField(data.mid, 'roomId');
+			if (!await messaging.canViewMessage(data.mid, roomId, socket.uid)) {
+				throw new Error('[[error:not-allowed]]');
+			}
+			set = `mid:${data.mid}:reaction:${data.reaction}`;
+		} else {
+			throw new Error('[[error:invalid-data]]');
+		}
+		let uids = await db.getSetMembers(set);
+		const cutoff = 6;
+
+		let otherCount = 0;
+		if (uids.length > cutoff) {
+			otherCount = uids.length - (cutoff - 1);
+			uids = uids.slice(0, cutoff - 1);
+		}
+
+		const usernames = await user.getUsernamesByUids(uids);
+		return {
+			cutoff: cutoff,
+			otherCount,
+			usernames,
+		};
+	},
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nodebb/nodebb-plugin-reactions",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "nbbpm": {
     "compatibility": "^3.3.0"
   },

package/plugin.json

@@ -25,6 +25,9 @@
         {
             "hook": "filter:config.get", "method": "getPluginConfig"
         },
+        {
+            "hook": "filter:settings.get", "method": "filterSettingsGet"
+        },
         {
             "hook": "filter:post.getPosts", "method": "getPostReactions"
         },

package/public/client.js

@@ -3,6 +3,8 @@
 $(document).ready(function () {
 	setupReactions();
 	let alerts;
+	let mouseOverReactionEl;
+	let tooltipTimeoutId = 0;
 	function setupReactions() {
 		createReactionTooltips();
 		require(['hooks', 'alerts'], function (hooks, _alerts) {
@@ -10,7 +12,11 @@ $(document).ready(function () {
 			hooks.on('action:ajaxify.end', function () {
 				if (ajaxify.data.template.topic) {
 					setupPostReactions();
-				} else if (ajaxify.data.template.chats && ajaxify.data.roomId) {
+				}
+			});
+			// switchChat uses action:chat.loaded and not action:ajaxify.end
+			hooks.on('action:chat.loaded', function () {
+				if (ajaxify.data.template.chats && ajaxify.data.roomId) {
 					setupMessageReactions();
 				}
 			});
@@ -186,11 +192,18 @@ $(document).ready(function () {
 				mid: data.mid,
 				reaction: data.reaction,
 				reactionCount: data.reactionCount,
-				usernames: data.usernames,
 				reacted: isSelf && type === 'add',
 				reactionImage: data.reactionImage,
 			}, function (html) {
-				$('[component="message/reactions"][data-mid="' + data.mid + '"]').append(html);
+				require(['forum/chats/messages'], function (messages) {
+					const reactionEl = $('[component="message/reactions"][data-mid="' + data.mid + '"]');
+					const chatContentEl = reactionEl.parents('[component="chat/message/content"]');
+					const isAtBottom = messages.isAtBottom(chatContentEl);
+					reactionEl.append(html);
+					if (isAtBottom || isSelf) {
+						messages.scrollToBottom(chatContentEl);
+					}
+				});
 			});
 		} else {
 			reactionEl.find('.reaction-emoji-count').attr('data-count', data.reactionCount);
@@ -203,13 +216,65 @@ $(document).ready(function () {
 	}
 
 	function createReactionTooltips() {
-		if (!utils.isTouchDevice()) {
-			$('#content').tooltip({
-				selector: '.reaction',
-				placement: 'top',
-				container: '#content',
-				animation: false,
-			});
-		}
+		require(['bootstrap', 'translator'], function (bootstrap, translator) {
+			async function createTooltip(data) {
+				if (!mouseOverReactionEl || !mouseOverReactionEl.length) {
+					return;
+				}
+				const el = mouseOverReactionEl;
+				let usernames = data.usernames.filter(name => name !== '[[global:former_user]]');
+				if (!usernames.length) {
+					return;
+				}
+				if (usernames.length + data.otherCount > data.cutoff) {
+					usernames = usernames.join(', ').replace(/,/g, '|');
+					usernames = await translator.translate('[[topic:users_and_others, ' + usernames + ', ' + data.otherCount + ']]');
+					usernames = usernames.replace(/\|/g, ',');
+				} else {
+					usernames = usernames.join(', ');
+				}
+
+				el.attr('title', usernames);
+				(new bootstrap.Tooltip(el, {
+					container: '#content',
+					html: true,
+					placement: 'top',
+					animation: false,
+				})).show();
+			}
+
+			if (!utils.isTouchDevice()) {
+				$('#content').on('mouseenter', '.reaction', function () {
+					const $this = $(this);
+					mouseOverReactionEl = $this;
+					const mid = $this.attr('data-mid');
+					const pid = $this.attr('data-pid');
+					tooltipTimeoutId = setTimeout(async () => {
+						if (mouseOverReactionEl && mouseOverReactionEl.length) {
+							const d = await socket.emit('plugins.reactions.getReactionUsernames', {
+								type: pid ? 'post' : 'message',
+								mid: mid,
+								pid: pid,
+								reaction: $this.attr('data-reaction'),
+							});
+							createTooltip(d);
+						}
+					}, 200);
+				});
+				$('#content').on('mouseleave', '.reaction', function () {
+					if (tooltipTimeoutId) {
+						clearTimeout(tooltipTimeoutId);
+						tooltipTimeoutId = 0;
+					}
+					mouseOverReactionEl = null;
+					const $this = $(this);
+					const tooltip = bootstrap.Tooltip.getInstance(this);
+					if (tooltip) {
+						tooltip.dispose();
+						$this.attr('title', '');
+					}
+				});
+			}
+		});
 	}
 });

package/templates/admin/plugins/reactions.tpl

@@ -7,10 +7,13 @@
 			<form role="form" class="reactions-settings">
 				<div class="mb-3">
 					<h5 class="fw-bold tracking-tight settings-header">[[reactions:settings.title]]</h5>
+					<div class="form-check form-switch mb-3">
+						<input id="enablePostReactions" name="enablePostReactions" type="checkbox" class="form-check-input">
+						<label for="enablePostReactions" class="form-check-label">[[reactions:settings.enable-post-reactions]]</label>
+					</div>
 					<div class="mb-3">
 						<label class="form-label">[[reactions:settings.max-reactions-per-post]]</label>
 						<input type="number" min="0" class="form-control" id="maximumReactions" name="maximumReactions">
-
 					</div>
 					<div class="mb-3">
 						<label class="form-label">[[reactions:settings.max-reactions-per-user-per-post]]</label>
@@ -19,6 +22,11 @@
 							[[reactions:settings.max-reactions-per-user-per-post-help]]
 						</p>
 					</div>
+					<hr/>
+					<div class="form-check form-switch mb-3">
+						<input id="enableMessageReactions" name="enableMessageReactions" type="checkbox" class="form-check-input">
+						<label for="enableMessageReactions" class="form-check-label">[[reactions:settings.enable-message-reactions]]</label>
+					</div>
 					<div class="mb-3">
 						<label class="form-label">[[reactions:settings.max-reactions-per-message]]</label>
 						<input type="number" min="0" class="form-control" id="maximumReactionsPerMessage" name="maximumReactionsPerMessage">

package/templates/partials/chats/add-reaction.tpl

@@ -1,4 +1,6 @@
+{{{ if config.enableMessageReactions }}}
 <button class="reaction-add btn btn-sm btn-link {{{ if ./maxReactionsReached }}}max-reactions{{{ end }}}" component="message/reaction/add" data-mid="{./mid}" title="[[reactions:add-reaction]]">
     <i class="fa fa-face-smile"></i>
 </button>
+{{{ end }}}
 

package/templates/partials/chats/reaction.tpl

@@ -1,4 +1,4 @@
-<span class="reaction mb-2 {{{ if ./reacted }}}reacted{{{ end }}}" component="message/reaction" data-mid="{./mid}" data-reaction="{./reaction}" title="{./usernames}" data-bs-toggle="tooltip">
+<span class="reaction mb-2 {{{ if ./reacted }}}reacted{{{ end }}}" component="message/reaction" data-mid="{./mid}" data-reaction="{./reaction}">
 	{./reactionImage}
 	<small class="reaction-emoji-count" data-count="{./reactionCount}"></small>
 </span>

package/templates/partials/chats/reactions.tpl

@@ -1,5 +1,7 @@
+{{{ if config.enableMessageReactions }}}
 <div class="reactions {{{ if ./deleted}}}hidden{{{ end }}}" component="message/reactions" data-mid="{./mid}">
 	{{{ each ./reactions }}}
 	<!-- IMPORT partials/chats/reaction.tpl -->
 	{{{ end }}}
-</div>
+</div>
+{{{ end }}}

package/templates/partials/topic/reaction.tpl

@@ -1,4 +1,4 @@
-<span class="reaction {{{ if ./reacted }}}reacted{{{ end }}}" component="post/reaction" data-pid="{./pid}" data-reaction="{./reaction}" title="{./usernames}">
+<span class="reaction {{{ if ./reacted }}}reacted{{{ end }}}" component="post/reaction" data-pid="{./pid}" data-reaction="{./reaction}">
 	{./reactionImage}
 	<small class="reaction-emoji-count" data-count="{./reactionCount}"></small>
 </span>

package/templates/partials/topic/reactions.tpl

@@ -1,3 +1,4 @@
+{{{ if config.enablePostReactions }}}
 <span class="reactions" component="post/reactions" data-pid="{./pid}">
   <span class="reaction-add d-inline-block px-2 mx-1 btn-ghost-sm {{{ if ./maxReactionsReached }}}max-reactions{{{ end }}}" component="post/reaction/add" data-pid="{./pid}" title="[[reactions:add-reaction]]">
     <i class="fa fa-face-smile text-primary"></i>
@@ -5,4 +6,5 @@
   {{{ each ./reactions }}}
     <!-- IMPORT partials/topic/reaction.tpl -->
   {{{ end }}}
-</span>
+</span>
+{{{ end }}}