From 279a7c75ceb0805e9d21e66509cb0a4ac8b7a7fb Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Wed, 14 Jun 2023 17:29:58 +0200
Subject: [PATCH] handle 'user_added', 'call_joined', 'call_left' and
 'call_reconnected'

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../MessagesGroup/MessagesSystemGroup.vue     | 365 +++++++++++++++---
 1 file changed, 310 insertions(+), 55 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
index 275bfa374d3..c3d004ba0c2 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
@@ -27,42 +27,59 @@
 				role="heading"
 				aria-level="3">{{ dateSeparator }}</span>
 		</div>
-		<div class="wrapper"
-			:class="{'wrapper--system': isSystemMessage}">
-			<div v-if="!isSystemMessage" class="messages__avatar">
-				<AuthorAvatar :author-type="actorType"
-					:author-id="actorId"
-					:display-name="actorDisplayName" />
+		<div class="wrapper wrapper--system">
+			<div v-for="(messagesCollapsed, index) of messagesGroupedBySystemMessage"
+				:key="index"
+				class="message-group__system">
+				<ul v-if="messagesCollapsed.messages.length > 1"
+					class="messages messages--header">
+					<Message v-bind="createCombinedSystemMessage(messagesCollapsed)"
+						:is-first-message="false"
+						:is-temporary="false"
+						:next-message-id="getNextMessageId(messagesCollapsed.messages[0])"
+						:previous-message-id="getPrevMessageId(messagesCollapsed.messages[0])" />
+					<NcButton type="tertiary"
+						class="messages--header__toggle"
+						@click="toggleCollapsed(messagesCollapsed)">
+						<template #icon>
+							<UnfoldMore v-if="messagesCollapsed.collapsed" />
+							<UnfoldLess v-else />
+						</template>
+					</NcButton>
+				</ul>
+				<ul v-show="!messagesCollapsed.type || !messagesCollapsed.collapsed"
+					class="messages messages--collapsed">
+					<Message v-for="message of messagesCollapsed.messages"
+						:key="message.id"
+						v-bind="message"
+						:is-first-message="false"
+						:next-message-id="getNextMessageId(message)"
+						:previous-message-id="getPrevMessageId(message)"
+						:is-temporary="message.timestamp === 0" />
+				</ul>
 			</div>
-			<ul class="messages">
-				<Message v-for="(message, index) of messages"
-					:key="message.id"
-					v-bind="message"
-					:is-first-message="index === 0"
-					:next-message-id="(messages[index + 1] && messages[index + 1].id) || nextMessageId"
-					:previous-message-id="(index > 0 && messages[index - 1].id) || previousMessageId"
-					:actor-type="actorType"
-					:actor-id="actorId"
-					:actor-display-name="actorDisplayName"
-					:show-author="!isSystemMessage"
-					:is-temporary="message.timestamp === 0" />
-			</ul>
 		</div>
 	</div>
 </template>
 
 <script>
-import AuthorAvatar from './AuthorAvatar.vue'
-import Message from './Message/Message.vue'
+import cloneDeep from 'lodash/cloneDeep.js'
+
+import UnfoldLess from 'vue-material-design-icons/UnfoldLessHorizontal.vue'
+import UnfoldMore from 'vue-material-design-icons/UnfoldMoreHorizontal.vue'
 
-import { ATTENDEE } from '../../../constants.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+
+import Message from './Message/Message.vue'
 
 export default {
 	name: 'MessagesSystemGroup',
 
 	components: {
-		AuthorAvatar,
 		Message,
+		NcButton,
+		UnfoldLess,
+		UnfoldMore,
 	},
 	inheritAttrs: false,
 
@@ -93,23 +110,14 @@ export default {
 		},
 	},
 
+	data() {
+		return {
+			groupIsCollapsed: {},
+			messagesGroupedBySystemMessage: [],
+		}
+	},
+
 	computed: {
-		/**
-		 * The message actor type.
-		 *
-		 * @return {string}
-		 */
-		actorType() {
-			return this.messages[0].actorType
-		},
-		/**
-		 * The message actor id.
-		 *
-		 * @return {string}
-		 */
-		actorId() {
-			return this.messages[0].actorId
-		},
 		/**
 		 * The message date.
 		 *
@@ -118,31 +126,260 @@ export default {
 		dateSeparator() {
 			return this.messages[0].dateSeparator || ''
 		},
+	},
+
+	watch: {
+		messages: {
+			immediate: true,
+			handler(value) {
+				this.messagesGroupedBySystemMessage = this.groupMessages(value)
+			},
+		},
+	},
+
+	methods: {
 		/**
-		 * The message actor display name.
+		 * Compare two messages to decide if they should be grouped
 		 *
-		 * @return {string}
+		 * @param {object} message1 The new message
+		 * @param {string} message1.id The ID of the new message
+		 * @param {string} message1.actorType Actor type of the new message
+		 * @param {string} message1.actorId Actor id of the new message
+		 * @param {string} message1.systemMessage System message of the new message
+		 * @param {number} message1.timestamp Timestamp of the new message
+		 * @param {null|object} message2 The previous message
+		 * @param {string} message2.id The ID of the second message
+		 * @param {string} message2.actorType Actor type of the previous message
+		 * @param {string} message2.actorId Actor id of the previous message
+		 * @param {string} message2.systemMessage System message of the second message
+		 * @param {number} message2.timestamp Timestamp of the second message
+		 * @return {string} Type of grouping if the messages should be grouped
 		 */
-		actorDisplayName() {
-			const displayName = this.messages[0].actorDisplayName.trim()
+		messagesShouldBeGrouped(message1, message2) {
+			if (!message2) {
+				return '' // No previous message
+			}
 
-			if (this.actorType === ATTENDEE.ACTOR_TYPE.GUESTS) {
-				return this.$store.getters.getGuestName(this.token, this.actorId)
+			// Group users added by one actor
+			if (message1.systemMessage === 'user_added'
+				&& message1.systemMessage === message2.systemMessage
+				&& message1.actorId === message2.actorId
+				&& message1.actorType === message2.actorType) {
+				return 'user_added'
 			}
 
-			if (displayName === '') {
-				return t('spreed', 'Deleted user')
+			// Group users joined call one by one
+			if (message1.systemMessage === 'call_joined'
+				&& message1.systemMessage === message2.systemMessage) {
+				return 'call_joined'
 			}
 
-			return displayName
+			// Group users left call one by one
+			if (message1.systemMessage === 'call_left'
+				&& message1.systemMessage === message2.systemMessage) {
+				return 'call_left'
+			}
+
+			// Group users reconnected in a minute
+			if (message1.systemMessage === 'call_joined'
+				&& message2.systemMessage === 'call_left'
+				&& message1.timestamp - message2.timestamp < 60 * 1000
+				&& message1.actorId === message2.actorId
+				&& message1.actorType === message2.actorType) {
+				return 'call_reconnected'
+			}
+
+			return ''
 		},
-		/**
-		 * Whether the given message is a system message
-		 *
-		 * @return {boolean}
-		 */
-		isSystemMessage() {
-			return this.messages[0].systemMessage.length !== 0
+
+		groupMessages() {
+			const groups = []
+			let lastMessage = null
+			for (const message of this.messages) {
+				const groupingType = this.messagesShouldBeGrouped(message, lastMessage)
+				if (!groupingType) {
+					groups.push({ messages: [message], type: '', collapsed: true })
+				} else {
+					groups.at(-1).messages.push(message)
+					groups.at(-1).type = groupingType
+				}
+				lastMessage = message
+			}
+			return groups
+		},
+
+		checkIfSelfIsActor(message) {
+			return message.messageParameters.actor.id === this.$store.getters.getActorId()
+				&& message.messageParameters.actor.type + 's' === this.$store.getters.getActorType()
+		},
+
+		checkIfSelfIsUser(message) {
+			return message.messageParameters.user.id === this.$store.getters.getActorId()
+				&& message.messageParameters.user.type + 's' === this.$store.getters.getActorType()
+		},
+
+		createCombinedSystemMessage({ messages, type }) {
+			const combinedMessage = cloneDeep(messages[0])
+			let usersCounter = 0
+			let selfIsUser = false
+			let referenceIndex = 0
+
+			// Handle cases when actor added users to conversation (when populate on creation, for example)
+			if (type === 'user_added') {
+				combinedMessage.messageParameters = { actor: messages[0].messageParameters.actor }
+				const selfIsActor = combinedMessage.actorId === this.$store.getters.getActorId()
+					&& combinedMessage.actorType === this.$store.getters.getActorType()
+				messages.forEach((message, index) => {
+					if (this.checkIfSelfIsUser(message)) {
+						selfIsUser = true
+					} else {
+						combinedMessage.messageParameters[`user${referenceIndex}`] = message.messageParameters.user
+						referenceIndex++
+					}
+					usersCounter++
+				})
+
+				if (selfIsActor) {
+					switch (usersCounter) {
+					case 2 :
+						combinedMessage.message = t('spreed', 'You added {user0} and {user1}')
+						break
+					case 3 :
+						combinedMessage.message = t('spreed', 'You added {user0}, {user1} and 1 more participant')
+						break
+					default :
+						combinedMessage.message = t('spreed', 'You added {user0}, {user1} and {hiddenUsers} more participants', { hiddenUsers: usersCounter - 2 })
+						break
+					}
+				} else if (selfIsUser) {
+					switch (usersCounter) {
+					case 2 :
+						combinedMessage.message = t('spreed', '{actor} added you and {user0}')
+						break
+					case 3 :
+						combinedMessage.message = t('spreed', '{actor} added you, {user0} and 1 more participant')
+						break
+					default :
+						combinedMessage.message = t('spreed', '{actor} added you, {user0} and {hiddenUsers} more participants', { hiddenUsers: usersCounter - 2 })
+						break
+					}
+				} else {
+					switch (usersCounter) {
+					case 2 :
+						combinedMessage.message = t('spreed', '{actor} added {user0} and {user1}')
+						break
+					case 3 :
+						combinedMessage.message = t('spreed', '{actor} added {user0}, {user1} and 1 more participant')
+						break
+					default :
+						combinedMessage.message = t('spreed', '{actor} added {user0}, {user1} and {hiddenUsers} more participants', { hiddenUsers: usersCounter - 2 })
+						break
+					}
+				}
+			}
+
+			// Handle cases when users reconnected to the call
+			if (type === 'call_reconnected') {
+				if (this.checkIfSelfIsActor(combinedMessage)) {
+					combinedMessage.message = t('spreed', 'You reconnected to the call')
+				} else {
+					combinedMessage.message = t('spreed', '{actor} reconnected to the call')
+				}
+			}
+
+			// Handle cases when users joined the call
+			if (type === 'call_joined') {
+				messages.forEach((message, index) => {
+					if (this.checkIfSelfIsActor(message)) {
+						selfIsUser = true
+					} else {
+						combinedMessage.messageParameters[`user${referenceIndex}`] = message.messageParameters.actor
+						referenceIndex++
+					}
+					usersCounter++
+				})
+
+				if (selfIsUser) {
+					switch (usersCounter) {
+					case 2 :
+						combinedMessage.message = t('spreed', 'You and {user0} joined the call')
+						break
+					case 3 :
+						combinedMessage.message = t('spreed', 'You, {user0} and 1 more participant joined the call')
+						break
+					default :
+						combinedMessage.message = t('spreed', 'You, {user0} and {hiddenUsers} more participants joined the call', { hiddenUsers: usersCounter - 2 })
+						break
+					}
+				} else {
+					switch (usersCounter) {
+					case 2 :
+						combinedMessage.message = t('spreed', '{user0} and {user1} joined the call')
+						break
+					case 3 :
+						combinedMessage.message = t('spreed', '{user0}, {user1} and 1 more participant joined the call')
+						break
+					default :
+						combinedMessage.message = t('spreed', '{user0}, {user1} and {hiddenUsers} more participants joined the call', { hiddenUsers: usersCounter - 2 })
+						break
+					}
+				}
+			}
+
+			// Handle cases when users left the call
+			if (type === 'call_left') {
+				messages.forEach((message, index) => {
+					if (this.checkIfSelfIsActor(message)) {
+						selfIsUser = true
+					} else {
+						combinedMessage.messageParameters[`user${referenceIndex}`] = message.messageParameters.actor
+						referenceIndex++
+					}
+					usersCounter++
+				})
+
+				if (selfIsUser) {
+					switch (usersCounter) {
+					case 2 :
+						combinedMessage.message = t('spreed', 'You and {user0} left the call')
+						break
+					case 3 :
+						combinedMessage.message = t('spreed', 'You, {user0} and 1 more participant left the call')
+						break
+					default :
+						combinedMessage.message = t('spreed', 'You, {user0} and {hiddenUsers} more participants left the call', { hiddenUsers: usersCounter - 2 })
+						break
+					}
+				} else {
+					switch (usersCounter) {
+					case 2 :
+						combinedMessage.message = t('spreed', '{user0} and {user1} left the call')
+						break
+					case 3 :
+						combinedMessage.message = t('spreed', '{user0}, {user1} and 1 more participant left the call')
+						break
+					default :
+						combinedMessage.message = t('spreed', '{user0}, {user1} and {hiddenUsers} more participants left the call', { hiddenUsers: usersCounter - 2 })
+						break
+					}
+				}
+			}
+
+			return combinedMessage
+		},
+
+		toggleCollapsed(messages) {
+			this.$set(messages, 'collapsed', !messages.collapsed)
+		},
+
+		getNextMessageId(message) {
+			const nextMessage = this.messages[this.messages.findIndex(searchedMessage => searchedMessage.id === message.id) + 1]
+			return nextMessage?.id || this.nextMessageId
+		},
+
+		getPrevMessageId(message) {
+			const prevMessage = this.messages[this.messages.findIndex(searchedMessage => searchedMessage.id === message.id) - 1]
+			return prevMessage?.id || this.previousMessageId
 		},
 	},
 }
@@ -168,6 +405,11 @@ export default {
 			border-radius: var(--border-radius-pill);
 		}
 	}
+
+	&__system {
+		display: flex;
+		flex-direction: column;
+	}
 }
 
 .wrapper {
@@ -176,6 +418,7 @@ export default {
 	margin: auto;
 	padding: 0;
 	&--system {
+		flex-direction: column;
 		padding-left: $clickable-area + 8px;
 	}
 	&:focus {
@@ -197,5 +440,17 @@ export default {
 		width: 52px;
 		padding: 18px 10px 10px 10px;
 	}
+
+	&--header {
+		position: relative;
+		& &__toggle {
+			position: absolute;
+			top: 50%;
+			right: 0;
+			transform: translateY(-50%);
+		}
+	}
+	&--collapsed {
+	}
 }
 </style>