Avoid emitting multiple events to the server when collapsing/expanding channel previews

Fixes #1377

client/components/MessageList.vue

@@ -218,8 +218,6 @@ export default {
 			this.keepScrollPosition();
 
 			// Tell the server we're toggling so it remembers at page reload
-			// TODO Avoid sending many single events when using `/collapse` or `/expand`
-			// See https://github.com/thelounge/thelounge/issues/1377
 			socket.emit("msg:preview:toggle", {
 				target: this.channel.id,
 				msgId: message.id,

client/js/commands/collapse.js

@@ -1,8 +1,34 @@
 "use strict";
 
-const $ = require("jquery");
+const socket = require("../socket");
+const store = require("../store").default;
 
 exports.input = function() {
-	$(".chan.active .toggle-button.toggle-preview.opened").click();
+	const messageIds = [];
+
+	for (const message of store.state.activeChannel.channel.messages) {
+		let toggled = false;
+
+		for (const preview of message.previews) {
+			if (preview.shown) {
+				preview.shown = false;
+				toggled = true;
+			}
+		}
+
+		if (toggled) {
+			messageIds.push(message.id);
+		}
+	}
+
+	// Tell the server we're toggling so it remembers at page reload
+	if (messageIds.length > 0) {
+		socket.emit("msg:preview:toggle", {
+			target: store.state.activeChannel.channel.id,
+			messageIds: messageIds,
+			shown: false,
+		});
+	}
+
 	return true;
 };

client/js/commands/expand.js

@@ -1,8 +1,34 @@
 "use strict";
 
-const $ = require("jquery");
+const socket = require("../socket");
+const store = require("../store").default;
 
 exports.input = function() {
-	$(".chan.active .toggle-button.toggle-preview:not(.opened)").click();
+	const messageIds = [];
+
+	for (const message of store.state.activeChannel.channel.messages) {
+		let toggled = false;
+
+		for (const preview of message.previews) {
+			if (!preview.shown) {
+				preview.shown = true;
+				toggled = true;
+			}
+		}
+
+		if (toggled) {
+			messageIds.push(message.id);
+		}
+	}
+
+	// Tell the server we're toggling so it remembers at page reload
+	if (messageIds.length > 0) {
+		socket.emit("msg:preview:toggle", {
+			target: store.state.activeChannel.channel.id,
+			messageIds: messageIds,
+			shown: true,
+		});
+	}
+
 	return true;
 };

src/server.js

@@ -494,11 +494,25 @@ function initializeClient(socket, client, token, lastMessage, openChannel) {
 		}
 
 		const networkAndChan = client.find(data.target);
+		const newState = Boolean(data.shown);
 
 		if (!networkAndChan) {
 			return;
 		}
 
+		// Process multiple message at once for /collapse and /expand commands
+		if (Array.isArray(data.messageIds)) {
+			for (const msgId of data.messageIds) {
+				const message = networkAndChan.chan.findMessage(msgId);
+
+				for (const preview of message.previews) {
+					preview.shown = newState;
+				}
+			}
+
+			return;
+		}
+
 		const message = networkAndChan.chan.findMessage(data.msgId);
 
 		if (!message) {
@@ -508,7 +522,7 @@ function initializeClient(socket, client, token, lastMessage, openChannel) {
 		const preview = message.findPreview(data.link);
 
 		if (preview) {
-			preview.shown = data.shown;
+			preview.shown = newState;
 		}
 	});