Trim channel messages in active channel and when switching channels

Fixes #1461

client/js/lounge.js

@@ -13,6 +13,7 @@ require("./libs/jquery/stickyscroll");
 const slideoutMenu = require("./libs/slideout");
 const templates = require("../views");
 const socket = require("./socket");
+const render = require("./render");
 require("./socket-events");
 const storage = require("./localStorage");
 const utils = require("./utils");
@@ -348,15 +349,18 @@ $(function() {
 			.find(".chat")
 			.unsticky();
 
-		var lastActiveChan = lastActive
+		const lastActiveChan = lastActive.find(".chan.active");
-			.find(".chan.active")
-			.removeClass("active");
 
+		if (lastActiveChan.length > 0) {
 			lastActiveChan
+				.removeClass("active")
 				.find(".unread-marker")
 				.data("unread-id", 0)
 				.appendTo(lastActiveChan.find(".messages"));
 
+			render.trimMessageInChannel(lastActiveChan, 100);
+		}
+
 		var chan = $(target)
 			.addClass("active")
 			.trigger("show");

client/js/render.js

@@ -26,6 +26,7 @@ module.exports = {
 	renderChannel,
 	renderChannelUsers,
 	renderNetworks,
+	trimMessageInChannel,
 };
 
 function buildChannelMessages(container, chanId, chanType, messages) {
@@ -242,6 +243,25 @@ function renderNetworks(data, singleNetwork) {
 	}
 }
 
+function trimMessageInChannel(channel, messageLimit) {
+	const messages = channel.find(".messages .msg").slice(0, -messageLimit);
+
+	if (messages.length === 0) {
+		return;
+	}
+
+	messages.remove();
+
+	channel.find(".show-more").addClass("show");
+
+	// Remove date-separators that would otherwise be "stuck" at the top of the channel
+	channel.find(".date-marker-container").each(function() {
+		if ($(this).next().hasClass("date-marker-container")) {
+			$(this).remove();
+		}
+	});
+}
+
 function loadMoreHistory(entries) {
 	entries.forEach((entry) => {
 		if (!entry.isIntersecting) {

client/js/socket-events/msg.js

@@ -66,17 +66,18 @@ function processReceivedMessage(data) {
 		sidebar.find("[data-target='" + target + "'] .badge").removeClass("highlight").empty();
 	}
 
-	// Message arrived in a non active channel, trim it to 100 messages
+	let messageLimit = 0;
-	if (activeChannelId !== targetId && container.find(".msg").slice(0, -100).remove().length) {
-		channel.find(".show-more").addClass("show");
 
-		// Remove date-separators that would otherwise
+	if (activeChannelId !== targetId) {
-		// be "stuck" at the top of the channel
+		// If message arrives in non active channel, keep only 100 messages
-		channel.find(".date-marker-container").each(function() {
+		messageLimit = 100;
-			if ($(this).next().hasClass("date-marker-container")) {
+	} else if (container.isScrollBottom()) {
-				$(this).remove();
+		// If message arrives in active channel, keep 500 messages if scroll is currently at the bottom
+		messageLimit = 500;
 	}
-		});
+
+	if (messageLimit > 0) {
+		render.trimMessageInChannel(channel, messageLimit);
 	}
 
 	if ((data.msg.type === "message" || data.msg.type === "action" || data.msg.type === "notice") && channel.hasClass("channel")) {