New messages indicator while in call

src/components/TopBar/TopBar.vue

@@ -125,21 +125,42 @@
 				close-after-click="true"
 				container="#content-vue">
 				<ActionButton
+					v-if="isInCall"
+					key="openSideBarButtonMessageText"
+					@click="openSidebar">
+					<MessageText
+						slot="icon"
+						:size="16"
+						title=""
+						fill-color="#ffffff"
+						decorative />
+				</ActionButton>
+				<ActionButton
+					v-else
+					key="openSideBarButtonMenuPeople"
 					:icon="iconMenuPeople"
 					@click="openSidebar" />
 			</Actions>
 		</div>
+		<CounterBubble
+			v-if="showOpenSidebarButton && isInCall && unreadMessagesCounter > 0"
+			class="unread-messages-counter"
+			:highlighted="hasUnreadMentions">
+			{{ unreadMessagesCounter }}
+		</CounterBubble>
 	</div>
 </template>
 
 <script>
-import { showError, showSuccess } from '@nextcloud/dialogs'
+import { showError, showSuccess, showMessage } from '@nextcloud/dialogs'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
+import CounterBubble from '@nextcloud/vue/dist/Components/CounterBubble'
 import CallButton from './CallButton'
 import BrowserStorage from '../../services/BrowserStorage'
 import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
 import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
+import MessageText from 'vue-material-design-icons/MessageText'
 import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff'
 import { CONVERSATION, PARTICIPANT } from '../../constants'
 import { generateUrl } from '@nextcloud/router'
@@ -160,8 +181,10 @@ export default {
 		ActionButton,
 		Actions,
 		ActionLink,
+		CounterBubble,
 		CallButton,
 		ActionSeparator,
+		MessageText,
 		MicrophoneOff,
 		ConversationIcon,
 	},
@@ -175,6 +198,12 @@ export default {
 		},
 	},
 
+	data: () => {
+		return {
+			unreadNotificationHandle: null,
+		}
+	},
+
 	computed: {
 		isFullscreen() {
 			return this.$store.getters.isFullscreen()
@@ -260,6 +289,13 @@ export default {
 			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},
 
+		unreadMessagesCounter() {
+			return this.conversation.unreadMessages
+		},
+		hasUnreadMentions() {
+			return this.conversation.unreadMention
+		},
+
 		linkToConversation() {
 			if (this.token !== '') {
 				return window.location.protocol + '//' + window.location.host + generateUrl('/call/' + this.token)
@@ -282,6 +318,36 @@ export default {
 		},
 	},
 
+	watch: {
+		unreadMessagesCounter(newValue, oldValue) {
+			if (!this.isInCall || !this.showOpenSidebarButton) {
+				return
+			}
+
+			// new messages arrived
+			if (newValue > 0 && oldValue === 0 && !this.hasUnreadMentions) {
+				this.notifyUnreadMessages(t('spreed', 'You have new unread messages in the chat.'))
+			}
+		},
+
+		hasUnreadMentions(newValue, oldValue) {
+			if (!this.isInCall || !this.showOpenSidebarButton) {
+				return
+			}
+
+			if (newValue) {
+				this.notifyUnreadMessages(t('spreed', 'You have been mentioned in the chat.'))
+			}
+		},
+
+		isInCall(newValue) {
+			if (!newValue) {
+				// discard notification if the call ends
+				this.notifyUnreadMessages(null)
+			}
+		},
+	},
+
 	mounted() {
 		document.addEventListener('fullscreenchange', this.fullScreenChanged, false)
 		document.addEventListener('mozfullscreenchange', this.fullScreenChanged, false)
@@ -290,13 +356,24 @@ export default {
 	},
 
 	beforeDestroy() {
+		this.notifyUnreadMessages(null)
 		document.removeEventListener('fullscreenchange', this.fullScreenChanged, false)
 		document.removeEventListener('mozfullscreenchange', this.fullScreenChanged, false)
 		document.removeEventListener('MSFullscreenChange', this.fullScreenChanged, false)
 		document.removeEventListener('webkitfullscreenchange', this.fullScreenChanged, false)
 	},
 
 	methods: {
+		notifyUnreadMessages(message) {
+			if (this.unreadNotificationHandle) {
+				this.unreadNotificationHandle.hideToast()
+				this.unreadNotificationHandle = null
+			}
+			if (message) {
+				this.unreadNotificationHandle = showMessage(message)
+			}
+		},
+
 		openSidebar() {
 			this.$store.dispatch('showSidebar')
 			BrowserStorage.setItem('sidebarOpen', 'true')
@@ -418,13 +495,17 @@ export default {
 		display: flex;
 		align-items: center;
 		white-space: nowrap;
-		svg {
-			margin-right: 4px !important;
-		}
 		.icon {
 			margin-right: 4px !important;
 		}
 	}
+
+	.unread-messages-counter {
+		position: absolute;
+		top: 40px;
+		right: 4px;
+		pointer-events: none;
+	}
 }
 
 .conversation-header {

src/store/conversationsStore.js

@@ -121,6 +121,15 @@ const mutations = {
 		Vue.set(state.conversations[token], 'lastMessage', lastMessage)
 	},
 
+	updateUnreadMessages(state, { token, unreadMessages, unreadMention }) {
+		if (unreadMessages !== undefined) {
+			Vue.set(state.conversations[token], 'unreadMessages', unreadMessages)
+		}
+		if (unreadMention !== undefined) {
+			Vue.set(state.conversations[token], 'unreadMention', unreadMention)
+		}
+	},
+
 	setNotificationLevel(state, { token, notificationLevel }) {
 		Vue.set(state.conversations[token], 'notificationLevel', notificationLevel)
 	},

src/store/messagesStore.js

@@ -36,6 +36,43 @@ import {
 	ATTENDEE,
 } from '../constants'
 
+/**
+ * Returns whether the given message contains a mention to self, directly
+ * or indirectly through a global mention.
+ *
+ * @param {Object} context store context
+ * @param {Object} message message object
+ * @returns {bool} true if the message contains a mention to self or all,
+ * false otherwise
+ */
+function hasMentionToSelf(context, message) {
+	if (!message.messageParameters) {
+		return false
+	}
+
+	for (const key in message.messageParameters) {
+		const param = message.messageParameters[key]
+
+		if (param.type === 'call') {
+			return true
+		}
+		if (param.type === 'guest'
+			&& context.getters.getActorType() === ATTENDEE.ACTOR_TYPE.GUESTS
+			&& param.id === ('guest/' + context.getters.getActorId())
+		) {
+			return true
+		}
+		if (param.type === 'user'
+			&& context.getters.getActorType() === ATTENDEE.ACTOR_TYPE.USERS
+			&& param.id === context.getters.getUserId()
+		) {
+			return true
+		}
+	}
+
+	return false
+}
+
 const state = {
 	/**
 	 * Map of conversation token to message list
@@ -621,6 +658,9 @@ const actions = {
 			})
 		}
 
+		const conversation = context.getters.conversation(token)
+		let countNewMessages = 0
+		let hasNewMention = conversation.unreadMention
 		let lastMessage = null
 		// Process each messages and adds it to the store
 		response.data.ocs.data.forEach(message => {
@@ -632,23 +672,49 @@ const actions = {
 			}
 			context.dispatch('processMessage', message)
 			if (!lastMessage || message.id > lastMessage.id) {
+				if (!message.systemMessage) {
+					countNewMessages++
+
+					// parse mentions data to update "conversation.unreadMention",
+					// if needed
+					if (!hasNewMention && hasMentionToSelf(context, message)) {
+						hasNewMention = true
+					}
+				}
 				lastMessage = message
 			}
+
+			// in case we encounter an already read message, reset the counter
+			// this is probably unlikely to happen unless one starts browsing from
+			// an earlier page and scrolls down
+			if (conversation.lastReadMessage === message.id) {
+				// discard counters
+				countNewMessages = 0
+				hasNewMention = conversation.unreadMention
+			}
 		})
 
 		context.dispatch('setLastKnownMessageId', {
 			token,
 			id: parseInt(response.headers['x-chat-last-given'], 10),
 		})
 
-		const conversation = context.getters.conversation(token)
 		if (conversation && conversation.lastMessage && lastMessage.id > conversation.lastMessage.id) {
 			context.dispatch('updateConversationLastMessage', {
 				token,
 				lastMessage,
 			})
 		}
 
+		if (countNewMessages > 0) {
+			context.commit('updateUnreadMessages', {
+				token,
+				unreadMessages: conversation.unreadMessages + countNewMessages,
+				// only update the value if it's been changed to true
+				unreadMention: conversation.unreadMention !== hasNewMention ? hasNewMention : undefined,
+			})
+		}
+
 		return response
 	},