fix(Message): optimize getters and provided props

src/components/MediaSettings/MediaSettings.vue

@@ -387,7 +387,7 @@ export default {
 		},
 
 		hasCall() {
-			return this.conversation.hasCall || this.conversation.hasCallOverwrittenByChat
+			return this.conversation.hasCall
 		},
 
 		isCurrentlyRecording() {

src/components/MessagesList/MessagesGroup/Message/Message.spec.js

@@ -64,16 +64,6 @@ describe('Message.vue', () => {
 		}
 
 		injected = {
-			scrollerBoundingClientRect: {
-				x: 0,
-				y: 0,
-				width: 0,
-				height: 0,
-				top: 0,
-				right: 0,
-				bottom: 0,
-				left: 0,
-			},
 			getMessagesListScroller: jest.fn(),
 		}
 

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -247,9 +247,6 @@ const isTranslationAvailable = getCapabilities()?.spreed?.config?.chat?.['has-tr
 	// Fallback for the desktop client when connecting to Talk 17
 	?? getCapabilities()?.spreed?.config?.chat?.translations?.length > 0
 
-/**
- * @property {object} scrollerBoundingClientRect provided by MessageList.vue
- */
 export default {
 	name: 'Message',
 
@@ -272,8 +269,6 @@ export default {
 		UnfoldMore,
 	},
 
-	inject: ['scrollerBoundingClientRect'],
-
 	inheritAttrs: false,
 
 	props: {
@@ -508,23 +503,12 @@ export default {
 				&& !this.isDeletedMessage
 		},
 
-		messagesList() {
-			return this.$store.getters.messagesList(this.token)
-		},
-
 		isLastCallStartedMessage() {
-			// FIXME: remove dependency to messages list and convert to property
-			const messages = this.messagesList
-			// FIXME: don't reverse the whole array as it would create a copy, just do an actual reverse search
-			const lastCallStartedMessage = messages.reverse().find((message) => message.systemMessage === 'call_started')
-			return lastCallStartedMessage ? (this.id === lastCallStartedMessage.id) : false
+			return this.systemMessage === 'call_started' && this.id === this.$store.getters.getLastCallStartedMessageId
 		},
 
 		showJoinCallButton() {
-			return this.systemMessage === 'call_started'
-				&& this.conversation.hasCall
-				&& this.isLastCallStartedMessage
-				&& !this.isInCall
+			return this.conversation.hasCall && !this.isInCall && this.isLastCallStartedMessage
 		},
 
 		showResultsButton() {

src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js

@@ -93,16 +93,6 @@ describe('MessageButtonsBar.vue', () => {
 			store = new Store(testStoreConfig)
 
 			injected = {
-				scrollerBoundingClientRect: {
-					x: 0,
-					y: 0,
-					width: 0,
-					height: 0,
-					top: 0,
-					right: 0,
-					bottom: 0,
-					left: 0,
-				},
 				getMessagesListScroller: jest.fn(),
 			}
 		})

src/components/MessagesList/MessagesList.vue

@@ -69,7 +69,6 @@ get the messagesList array and loop through the list to generate the messages.
 <script>
 import debounce from 'debounce'
 import uniqueId from 'lodash/uniqueId.js'
-import { computed } from 'vue'
 
 import Message from 'vue-material-design-icons/Message.vue'
 
@@ -98,7 +97,6 @@ export default {
 
 	provide() {
 		return {
-			scrollerBoundingClientRect: computed(() => this.$refs.scroller.getBoundingClientRect()),
 			getMessagesListScroller: () => this.$refs.scroller,
 		}
 	},

src/components/TopBar/CallButton.vue

@@ -226,7 +226,7 @@ export default {
 		},
 
 		hasCall() {
-			return this.conversation.hasCall || this.conversation.hasCallOverwrittenByChat
+			return this.conversation.hasCall
 		},
 
 		startCallButtonDisabled() {

src/store/conversationsStore.js

@@ -67,7 +67,7 @@
 import { talkBroadcastChannel } from '../services/talkBroadcastChannel.js'
 import { useChatExtrasStore } from '../stores/chatExtras.js'
 import { useTalkHashStore } from '../stores/talkHash.js'
 import { useReactionsStore } from '../stores/reactions.js'
 
 const DUMMY_CONVERSATION = {
 	token: '',
@@ -215,14 +215,6 @@
 		}
 	},
 
-	overwriteHasCallByChat(state, { token, hasCall }) {
-		if (hasCall) {
-			Vue.set(state.conversations[token], 'hasCallOverwrittenByChat', hasCall)
-		} else {
-			Vue.delete(state.conversations[token], 'hasCallOverwrittenByChat')
-		}
-	},
-
 	setNotificationLevel(state, { token, notificationLevel }) {
 		Vue.set(state.conversations[token], 'notificationLevel', notificationLevel)
 	},
@@ -758,6 +750,11 @@
 
 		const activeSince = (new Date(notification.datetime)).getTime() / 1000
 
+		// Check if notification information is older than in known conversation object
+		if (activeSince < getters.conversations[token].lastActivity) {
+			return
+		}
+
 		const conversation = Object.assign({}, getters.conversations[token], {
 			hasCall: true,
 			callFlag: PARTICIPANT.CALL_FLAG.WITH_VIDEO,
@@ -792,8 +789,16 @@
 		commit('updateConversationLastReadMessage', { token, lastReadMessage })
 	},
 
-	async overwriteHasCallByChat({ commit }, { token, hasCall }) {
-		commit('overwriteHasCallByChat', { token, hasCall })
+	async overwriteHasCallByChat({ commit, dispatch }, { token, hasCall, lastActivity }) {
+		dispatch('setConversationProperties', {
+			token,
+			properties: {
+				hasCall,
+				callFlag: hasCall ? PARTICIPANT.CALL_FLAG.IN_CALL : PARTICIPANT.CALL_FLAG.DISCONNECTED,
+				lastActivity,
+				callStartTime: hasCall ? lastActivity : 0,
+			}
+		})
 	},
 
 	async fetchConversation({ dispatch }, { token }) {

src/store/messagesStore.js

@@ -210,6 +210,10 @@ const getters = {
 		return null
 	},
 
+	getLastCallStartedMessageId: (state, getters, rootState, rootGetters) => {
+		return getters.messagesList(rootGetters.getToken()).findLast((message) => message.systemMessage === 'call_started')?.id
+	},
+
 	getFirstDisplayableMessageIdAfterReadMarker: (state, getters) => (token, readMessageId) => {
 		if (!state.messages[token]) {
 			return null
@@ -1086,25 +1090,11 @@ const actions = {
 			// Overwrite the conversation.hasCall property so people can join
 			// after seeing the message in the chat.
 			if (conversation && conversation.lastMessage && message.id > conversation.lastMessage.id) {
-				if (message.systemMessage === 'call_started') {
+				if (['call_started', 'call_ended', 'call_ended_everyone', 'call_missed'].includes(message.systemMessage)) {
 					context.dispatch('overwriteHasCallByChat', {
 						token,
-						hasCall: true,
-					})
-					context.dispatch('setConversationProperties', {
-						token: message.token,
-						properties: { callStartTime: message.timestamp },
-					})
-				} else if (message.systemMessage === 'call_ended'
-					|| message.systemMessage === 'call_ended_everyone'
-					|| message.systemMessage === 'call_missed') {
-					context.dispatch('overwriteHasCallByChat', {
-						token,
-						hasCall: false,
-					})
-					context.dispatch('setConversationProperties', {
-						token: message.token,
-						properties: { callStartTime: 0 },
+						hasCall: message.systemMessage === 'call_started',
+						lastActivity: message.timestamp,
 					})
 				}
 			}