From 39868a1c7fec6a2f2ae679a48885dc5aff34fd1c Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 12 Mar 2024 15:00:20 +0100
Subject: [PATCH] fix(participants): move interval update of talking time
 counter to the store

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../RightSidebar/Participants/Participant.vue | 39 +++---------
 src/store/participantsStore.js                | 63 ++++++++++++++++---
 2 files changed, 65 insertions(+), 37 deletions(-)

diff --git a/src/components/RightSidebar/Participants/Participant.vue b/src/components/RightSidebar/Participants/Participant.vue
index c8d5171ab81..d6ee21dea32 100644
--- a/src/components/RightSidebar/Participants/Participant.vue
+++ b/src/components/RightSidebar/Participants/Participant.vue
@@ -80,7 +80,7 @@
 
 		<!-- Phone participant dial action -->
 		<div v-if="isInCall && canBeModerated && isPhoneActor"
-			id="participantNavigationId"
+			:id="participantNavigationId"
 			class="participant-row__dial-actions">
 			<NcButton v-if="!participant.inCall"
 				type="success"
@@ -464,8 +464,6 @@ export default {
 			isUserNameTooltipVisible: false,
 			isStatusTooltipVisible: false,
 			permissionsEditor: false,
-			speakingInterval: null,
-			timeSpeaking: null,
 			disabled: false,
 		}
 	},
@@ -864,22 +862,17 @@ export default {
 			}
 			return ''
 		},
-	},
-	watch: {
-		isParticipantSpeaking(speaking) {
-			if (speaking) {
-				if (!this.speakingInterval) {
-					this.speakingInterval = setInterval(this.computeElapsedTime, 1000)
-				}
-			} else {
-				if (speaking === undefined) {
-					this.timeSpeaking = 0
-				}
-				clearInterval(this.speakingInterval)
-				this.speakingInterval = null
+
+		timeSpeaking() {
+			if (!this.participantSpeakingInformation || this.isParticipantSpeaking === undefined) {
+				return 0
 			}
+
+			return this.participantSpeakingInformation.totalCountedTime
 		},
+	},
 
+	watch: {
 		phoneCallStatus(value) {
 			if (!value || !(value === 'ringing' || value === 'accepted')) {
 				this.disabled = false
@@ -1012,20 +1005,6 @@ export default {
 			}
 		},
 
-		computeElapsedTime() {
-			if (!this.participantSpeakingInformation) {
-				return null
-			}
-
-			const { speaking, lastTimestamp, totalCountedTime } = this.participantSpeakingInformation
-
-			if (!speaking) {
-				this.timeSpeaking = totalCountedTime
-			} else {
-				this.timeSpeaking = Date.now() - lastTimestamp + totalCountedTime
-			}
-		},
-
 		async dialOutPhoneNumber() {
 			try {
 				this.disabled = true
diff --git a/src/store/participantsStore.js b/src/store/participantsStore.js
index c8031190dda..d6e61be1200 100644
--- a/src/store/participantsStore.js
+++ b/src/store/participantsStore.js
@@ -93,6 +93,7 @@ const state = {
 	 * when quickly switching to a new conversation.
 	 */
 	cancelFetchParticipants: null,
+	speakingInterval: null,
 }
 
 const getters = {
@@ -415,25 +416,59 @@ const mutations = {
 	 * @param {boolean} data.speaking - whether the participant is speaking or not
 	 */
 	setSpeaking(state, { token, attendeeId, speaking }) {
-		// create a dummy object for current call
 		if (!state.speaking[token]) {
 			Vue.set(state.speaking, token, {})
 		}
+
+		const currentTimestamp = Date.now()
 		if (!state.speaking[token][attendeeId]) {
-			Vue.set(state.speaking[token], attendeeId, { speaking: null, lastTimestamp: 0, totalCountedTime: 0 })
+			Vue.set(state.speaking[token], attendeeId, { speaking, lastTimestamp: currentTimestamp, totalCountedTime: 0 })
+			return
 		}
 
-		const currentTimestamp = Date.now()
 		const currentSpeakingState = state.speaking[token][attendeeId].speaking
+		if (currentSpeakingState === speaking) {
+			return
+		}
 
 		if (!currentSpeakingState && speaking) {
-			state.speaking[token][attendeeId].speaking = true
+			// false -> true, speaking has started, update last timestamp
 			state.speaking[token][attendeeId].lastTimestamp = currentTimestamp
 		} else if (currentSpeakingState && !speaking) {
-			// when speaking has stopped, update the total talking time
-			state.speaking[token][attendeeId].speaking = false
+			// true -> false, speaking has stopped, update total counted time
 			state.speaking[token][attendeeId].totalCountedTime += (currentTimestamp - state.speaking[token][attendeeId].lastTimestamp)
 		}
+		state.speaking[token][attendeeId].speaking = speaking
+	},
+
+	/**
+	 * Sets the speaking interval of a participant in a conversation / call.
+	 *
+	 * @param {object} state - current store state.
+	 * @param {number} interval - interval id for participant update
+	 */
+	setSpeakingInterval(state, interval) {
+		Vue.set(state, 'speakingInterval', interval)
+	},
+
+	/**
+	 * Update the total time of speaking for a participant.
+	 *
+	 * @param {object} state - current store state.
+	 * @param {string} token - the conversation token participant is speaking in.
+	 */
+	updateTimeSpeaking(state, token) {
+		if (!state.speaking[token] || !state.speakingInterval) {
+			return
+		}
+
+		const currentTimestamp = Date.now()
+		for (const attendeeId in state.speaking[token]) {
+			if (state.speaking[token][attendeeId].speaking) {
+				state.speaking[token][attendeeId].totalCountedTime += (currentTimestamp - state.speaking[token][attendeeId].lastTimestamp)
+				state.speaking[token][attendeeId].lastTimestamp = currentTimestamp
+			}
+		}
 	},
 
 	/**
@@ -445,7 +480,14 @@ const mutations = {
 	 * @param {string} data.token - the conversation token.
 	 */
 	purgeSpeakingStore(state, { token }) {
-		Vue.delete(state.speaking, token)
+		if (state.speaking[token]) {
+			Vue.delete(state.speaking, token)
+		}
+
+		if (state.speakingInterval) {
+			clearInterval(state.speakingInterval)
+			Vue.set(state, 'speakingInterval', null)
+		}
 	},
 
 	/**
@@ -1038,6 +1080,13 @@ const actions = {
 
 	setSpeaking(context, { token, attendeeId, speaking }) {
 		context.commit('setSpeaking', { token, attendeeId, speaking })
+
+		if (!context.state.speakingInterval) {
+			const interval = setInterval(() => {
+				context.commit('updateTimeSpeaking', token)
+			}, 1000)
+			context.commit('setSpeakingInterval', interval)
+		}
 	},
 
 	purgeSpeakingStore(context, { token }) {