From 4c439c56f4167419b224ab7d07cd4d4264d30869 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Tue, 17 Sep 2024 10:21:26 +0200
Subject: [PATCH 1/5] fix(ParticipantsStore): remove unnecessary event
 listeners and timeout. It's only received when using internal server. Replace
 them with events from the base class so we make sure it's always received.
 Also, add a new event for failed joining

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/store/participantsStore.js | 27 +++++++++++++--------------
 src/utils/signaling.js         |  3 ++-
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/store/participantsStore.js b/src/store/participantsStore.js
index 6f2b55655bc..b2203523386 100644
--- a/src/store/participantsStore.js
+++ b/src/store/participantsStore.js
@@ -789,10 +789,19 @@ const actions = {
 			return
 		}
 
-		commit('setInCall', {
-			token,
-			sessionId: participantIdentifier.sessionId,
-			flags,
+		// Preparing the event listener for the signaling-join-call event
+		EventBus.once('signaling-join-call', () => {
+			commit('setInCall', {
+				token,
+				sessionId: participantIdentifier.sessionId,
+				flags,
+			})
+			commit('finishedConnecting', { token, sessionId: participantIdentifier.sessionId })
+		})
+
+		// Preparing the event listener for the signaling-join-call-failed event
+		EventBus.once('signaling-join-call-failed', () => {
+			commit('finishedConnecting', { token, sessionId: participantIdentifier.sessionId })
 		})
 
 		const actualFlags = await joinCall(token, flags, silent, recordingConsent)
@@ -801,16 +810,6 @@ const actions = {
 			inCall: actualFlags,
 		}
 		commit('updateParticipant', { token, attendeeId: attendee.attendeeId, updatedData })
-
-		EventBus.once('signaling-users-in-room', () => {
-			commit('finishedConnecting', { token, sessionId: participantIdentifier.sessionId })
-		})
-
-		setTimeout(() => {
-			// If by accident we never receive a users list, just switch to
-			// "Waiting for others to join the call …" after some seconds.
-			commit('finishedConnecting', { token, sessionId: participantIdentifier.sessionId })
-		}, 10000)
 	},
 
 	async leaveCall({ commit, getters }, { token, participantIdentifier, all = false }) {
diff --git a/src/utils/signaling.js b/src/utils/signaling.js
index ee3ce49b6ea..83d831a38d2 100644
--- a/src/utils/signaling.js
+++ b/src/utils/signaling.js
@@ -281,11 +281,12 @@ Signaling.Base.prototype.joinCall = function(token, flags, silent, recordingCons
 			.catch(function(e) {
 				reject(new Error())
 				console.error('Connection failed, reason: ', e)
+				this._trigger('joinCallFailed', [token])
 				store.commit('connectionFailed', {
 					token,
 					payload: e.response?.data?.ocs,
 				})
-			})
+			}.bind(this))
 	})
 }
 

From 2d9743f74e582cba25f226dfc6bd480d415e1822 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Tue, 17 Sep 2024 10:22:39 +0200
Subject: [PATCH 2/5] Fix(ParticipantsStore): separate joining states from each
 others (isInCall, connecting, connection failed)

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/store/participantsStore.js | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/store/participantsStore.js b/src/store/participantsStore.js
index b2203523386..09c5c45f546 100644
--- a/src/store/participantsStore.js
+++ b/src/store/participantsStore.js
@@ -321,20 +321,11 @@ const mutations = {
 			if (state.inCall[token] && state.inCall[token][sessionId]) {
 				Vue.delete(state.inCall[token], sessionId)
 			}
-
-			if (state.connecting[token] && state.connecting[token][sessionId]) {
-				Vue.delete(state.connecting[token], sessionId)
-			}
 		} else {
 			if (!state.inCall[token]) {
 				Vue.set(state.inCall, token, {})
 			}
 			Vue.set(state.inCall[token], sessionId, flags)
-
-			if (!state.connecting[token]) {
-				Vue.set(state.connecting, token, {})
-			}
-			Vue.set(state.connecting[token], sessionId, flags)
 		}
 	},
 
@@ -342,6 +333,17 @@ const mutations = {
 		Vue.set(state.connectionFailed, token, payload)
 	},
 
+	clearConnectionFailed(state, token) {
+		Vue.delete(state.connectionFailed, token)
+	},
+
+	connecting(state, { token, sessionId, flags }) {
+		if (!state.connecting[token]) {
+			Vue.set(state.connecting, token, {})
+		}
+		Vue.set(state.connecting[token], sessionId, flags)
+	},
+
 	finishedConnecting(state, { token, sessionId }) {
 		if (state.connecting[token] && state.connecting[token][sessionId]) {
 			Vue.delete(state.connecting[token], sessionId)
@@ -778,6 +780,8 @@ const actions = {
 	},
 
 	async joinCall({ commit, getters }, { token, participantIdentifier, flags, silent, recordingConsent }) {
+		commit('connecting', { token, sessionId: participantIdentifier.sessionId, flags })
+
 		if (!participantIdentifier?.sessionId) {
 			console.error('Trying to join call without sessionId')
 			return
@@ -1128,6 +1132,10 @@ const actions = {
 	setPhoneMute(context, { callid, value }) {
 		context.commit('setPhoneMute', { callid, value })
 	},
+
+	clearConnectionFailed(context, token) {
+		context.commit('clearConnectionFailed', token)
+	}
 }
 
 export default { state, mutations, getters, actions }

From 50db6113e3f83342a2b84ed22f2abea650a965ed Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Tue, 17 Sep 2024 10:23:50 +0200
Subject: [PATCH 3/5] feat(Call): Stop switching to CallView without a
 successful join. Introduce a failed join message dialog.

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/CallView/CallFailedDialog.vue  | 72 +++++++++++++++++++
 .../CallView/shared/EmptyCallView.vue         | 54 +-------------
 src/components/TopBar/CallButton.vue          | 24 ++++++-
 3 files changed, 95 insertions(+), 55 deletions(-)
 create mode 100644 src/components/CallView/CallFailedDialog.vue

diff --git a/src/components/CallView/CallFailedDialog.vue b/src/components/CallView/CallFailedDialog.vue
new file mode 100644
index 00000000000..238d8df25ed
--- /dev/null
+++ b/src/components/CallView/CallFailedDialog.vue
@@ -0,0 +1,72 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import IconAlertOctagon from 'vue-material-design-icons/AlertOctagon.vue'
+
+import { t } from '@nextcloud/l10n'
+
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+
+import { useStore } from '../../composables/useStore.js'
+
+const store = useStore()
+
+const props = defineProps({
+	token: {
+		type: String,
+		required: true,
+	},
+})
+
+const STATUS_ERRORS = {
+	400: t('spreed', 'Recording consent is required'),
+	403: t('spreed', 'This conversation is read-only'),
+	404: t('spreed', 'Conversation not found or not joined'),
+	412: t('spreed', "Lobby is still active and you're not a moderator"),
+}
+const userId = computed(() => store.getters.userId)
+const connectionFailed = computed(() => store.getters.connectionFailed(props.token))
+const connectionFailedDialogId = `connection-failed-${userId.value}`
+const message = computed(() => {
+	if (connectionFailed.value) {
+		const statusCode = connectionFailed.value?.meta?.statuscode
+		if (STATUS_ERRORS[statusCode]) {
+			return STATUS_ERRORS[statusCode]
+		}
+		if (connectionFailed.value?.data?.error) {
+			return connectionFailed.value.data.error
+		}
+
+		return t('spreed', 'Please try to reload the page')
+	} else {
+        return ''
+    }
+})
+
+/**
+ *
+ */
+function clearConnectionFailedError() {
+	store.dispatch('clearConnectionFailed', props.token)
+}
+
+</script>
+
+<template>
+	<NcModal class="connection-failed__modal"
+		:label-id="connectionFailedDialogId"
+		@close="clearConnectionFailedError">
+		<NcEmptyContent :name="t('spreed', 'Connection failed')"
+			:description="message">
+			<template #icon>
+				<IconAlertOctagon />
+			</template>
+		</NcEmptyContent>
+	</NcModal>
+</template>
diff --git a/src/components/CallView/shared/EmptyCallView.vue b/src/components/CallView/shared/EmptyCallView.vue
index 7fc355063d7..6e649677f1e 100644
--- a/src/components/CallView/shared/EmptyCallView.vue
+++ b/src/components/CallView/shared/EmptyCallView.vue
@@ -16,9 +16,6 @@
 			<p v-if="message" class="emptycontent-additional">
 				{{ message }}
 			</p>
-			<p v-if="helper" class="emptycontent-additional">
-				{{ helper }}
-			</p>
 			<NcButton v-if="showLink"
 				type="primary"
 				@click.stop="handleCopyLink">
@@ -30,25 +27,16 @@
 
 <script>
 import IconAccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
-import IconAlertOctagon from 'vue-material-design-icons/AlertOctagon.vue'
 import IconLinkVariant from 'vue-material-design-icons/LinkVariant.vue'
 import IconPhone from 'vue-material-design-icons/Phone.vue'
 
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
 import { CONVERSATION, PARTICIPANT } from '../../../constants.js'
 import { copyConversationLinkToClipboard } from '../../../utils/handleUrl.ts'
 
-const STATUS_ERRORS = {
-	400: t('spreed', 'Recording consent is required'),
-	403: t('spreed', 'This conversation is read-only'),
-	404: t('spreed', 'Conversation not found or not joined'),
-	412: t('spreed', "Lobby is still active and you're not a moderator"),
-}
-
 export default {
 
 	name: 'EmptyCallView',
@@ -56,10 +44,8 @@ export default {
 	components: {
 		NcButton,
 		IconAccountMultiple,
-		IconAlertOctagon,
 		IconLinkVariant,
 		IconPhone,
-		NcLoadingIcon,
 	},
 
 	props: {
@@ -85,14 +71,6 @@ export default {
 			return this.$store.getters.getToken()
 		},
 
-		isConnecting() {
-			return this.$store.getters.isConnecting(this.token)
-		},
-
-		connectionFailed() {
-			return this.$store.getters.connectionFailed(this.token)
-		},
-
 		conversation() {
 			return this.$store.getters.conversation(this.token)
 		},
@@ -138,11 +116,7 @@ export default {
 		},
 
 		emptyCallViewIcon() {
-			if (this.connectionFailed) {
-				return IconAlertOctagon
-			} else if (this.isConnecting) {
-				return NcLoadingIcon
-			} else if (this.isPhoneConversation) {
+			if (this.isPhoneConversation) {
 				return IconPhone
 			} else {
 				return this.isPublicConversation ? IconLinkVariant : IconAccountMultiple
@@ -150,12 +124,6 @@ export default {
 		},
 
 		title() {
-			if (this.connectionFailed) {
-				return t('spreed', 'Connection failed')
-			}
-			if (this.isConnecting) {
-				return t('spreed', 'Connecting …')
-			}
 			if (this.isPhoneConversation) {
 				return t('spreed', 'Calling …')
 			}
@@ -165,27 +133,7 @@ export default {
 			return t('spreed', 'Waiting for others to join the call …')
 		},
 
-		helper() {
-			return this.connectionFailed ? t('spreed', 'Please try to reload the page') : ''
-		},
-
 		message() {
-			if (this.connectionFailed) {
-				const statusCode = this.connectionFailed?.meta?.statuscode
-				if (STATUS_ERRORS[statusCode]) {
-					return STATUS_ERRORS[statusCode]
-				}
-				if (this.connectionFailed?.data?.error) {
-					return this.connectionFailed.data.error
-				}
-
-				return t('spreed', 'Something went wrong')
-			}
-
-			if (this.isConnecting) {
-				return ''
-			}
-
 			if (this.isPasswordRequestConversation || this.isFileConversation) {
 				return ''
 			}
diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index a87ce0e204f..e931f8c30f7 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -9,11 +9,12 @@
 			id="call_button"
 			:title="startCallTitle"
 			:aria-label="startCallLabel"
-			:disabled="startCallButtonDisabled || loading"
+			:disabled="startCallButtonDisabled || loading || isConnecting"
 			:type="startCallButtonType"
 			@click="handleClick">
 			<template #icon>
-				<IconPhoneDial v-if="isPhoneRoom" :size="20" />
+				<NcLoadingIcon v-if="isConnecting || loading" />
+				<IconPhoneDial v-else-if="isPhoneRoom" :size="20" />
 				<IconPhoneOutline v-else-if="silentCall" :size="20" />
 				<IconPhone v-else :size="20" />
 			</template>
@@ -21,6 +22,7 @@
 				{{ startCallLabel }}
 			</template>
 		</NcButton>
+
 		<NcButton v-else-if="showLeaveCallButton && canEndForAll && isPhoneRoom"
 			id="call_button"
 			:aria-label="endCallLabel"
@@ -77,6 +79,7 @@
 				{{ t('spreed', 'End call for everyone') }}
 			</NcActionButton>
 		</NcActions>
+		<CallFailedDialog v-if="connectionFailed" :token="token" />
 	</div>
 </template>
 
@@ -96,8 +99,11 @@ import { t } from '@nextcloud/l10n'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import { useIsMobile } from '@nextcloud/vue/dist/Composables/useIsMobile.js'
 
+import CallFailedDialog from '../CallView/CallFailedDialog.vue'
+
 import { useIsInCall } from '../../composables/useIsInCall.js'
 import { ATTENDEE, CALL, CONVERSATION, PARTICIPANT } from '../../constants.js'
 import { callSIPDialOut } from '../../services/callsService.js'
@@ -113,6 +119,7 @@ export default {
 	name: 'CallButton',
 
 	components: {
+		CallFailedDialog,
 		NcActions,
 		NcActionButton,
 		NcButton,
@@ -123,6 +130,7 @@ export default {
 		IconPhoneHangup,
 		IconPhoneOff,
 		IconPhoneOutline,
+		NcLoadingIcon,
 	},
 
 	props: {
@@ -266,6 +274,10 @@ export default {
 				return t('spreed', 'Join call')
 			}
 
+			if (this.isConnecting) {
+				return t('spreed', 'Connecting...')
+			}
+
 			return this.silentCall ? t('spreed', 'Start call silently') : t('spreed', 'Start call')
 		},
 
@@ -332,6 +344,14 @@ export default {
 		isInLobby() {
 			return this.$store.getters.isInLobby
 		},
+
+		isConnecting() {
+			return this.$store.getters.isConnecting(this.token)
+		},
+
+		connectionFailed() {
+			return this.$store.getters.connectionFailed(this.token)
+		},
 	},
 
 	watch: {

From e707c4eaafd76b179577f909e392170cb67b26ee Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Tue, 17 Sep 2024 16:03:45 +0200
Subject: [PATCH 4/5] fix(Call): stop all media related streams (simulating end
 call)

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/CallView/CallFailedDialog.vue |  4 ++--
 src/services/callsService.js                 |  6 +-----
 src/store/participantsStore.js               | 12 ++++++++----
 src/utils/webrtc/index.js                    |  1 +
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/CallView/CallFailedDialog.vue b/src/components/CallView/CallFailedDialog.vue
index 238d8df25ed..86908f504a5 100644
--- a/src/components/CallView/CallFailedDialog.vue
+++ b/src/components/CallView/CallFailedDialog.vue
@@ -45,8 +45,8 @@ const message = computed(() => {
 
 		return t('spreed', 'Please try to reload the page')
 	} else {
-        return ''
-    }
+		return ''
+	}
 })
 
 /**
diff --git a/src/services/callsService.js b/src/services/callsService.js
index a546a9ed7e0..9b035414e97 100644
--- a/src/services/callsService.js
+++ b/src/services/callsService.js
@@ -32,11 +32,7 @@ import {
  * @return {number} The actual flags based on the available media
  */
 const joinCall = async function(token, flags, silent, recordingConsent) {
-	try {
-		return await signalingJoinCall(token, flags, silent, recordingConsent)
-	} catch (error) {
-		console.debug('Error while joining call: ', error)
-	}
+	return await signalingJoinCall(token, flags, silent, recordingConsent)
 }
 
 /**
diff --git a/src/store/participantsStore.js b/src/store/participantsStore.js
index 09c5c45f546..4a08d18f758 100644
--- a/src/store/participantsStore.js
+++ b/src/store/participantsStore.js
@@ -808,12 +808,16 @@ const actions = {
 			commit('finishedConnecting', { token, sessionId: participantIdentifier.sessionId })
 		})
 
-		const actualFlags = await joinCall(token, flags, silent, recordingConsent)
+		try {
+			const actualFlags = await joinCall(token, flags, silent, recordingConsent)
+			const updatedData = {
+				inCall: actualFlags,
+			}
+			commit('updateParticipant', { token, attendeeId: attendee.attendeeId, updatedData })
+		} catch (e) {
+			console.error(e)
 
-		const updatedData = {
-			inCall: actualFlags,
 		}
-		commit('updateParticipant', { token, attendeeId: attendee.attendeeId, updatedData })
 	},
 
 	async leaveCall({ commit, getters }, { token, participantIdentifier, all = false }) {
diff --git a/src/utils/webrtc/index.js b/src/utils/webrtc/index.js
index 05bb4f9a2a8..3853047d9f1 100644
--- a/src/utils/webrtc/index.js
+++ b/src/utils/webrtc/index.js
@@ -157,6 +157,7 @@ function startCall(signaling, configuration, silent, recordingConsent) {
 	signaling.joinCall(pendingJoinCallToken, flags, silent, recordingConsent).then(() => {
 		startedCall(flags)
 	}).catch(error => {
+		signalingLeaveCall(pendingJoinCallToken)
 		failedToStartCall(error)
 	})
 }

From 0d90b1515bb828ca988b7bacdec8fb47cc570ece Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Mon, 21 Oct 2024 23:37:07 +0200
Subject: [PATCH 5/5] WIP: distinguish the 2 phases of joining the call:
 connect to the call AND wait for participants list

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 .../CallView/shared/EmptyCallView.vue         | 18 +++++++-
 src/components/TopBar/CallButton.vue          | 10 ++--
 src/store/participantsStore.js                | 46 ++++++++++++++++++-
 3 files changed, 65 insertions(+), 9 deletions(-)

diff --git a/src/components/CallView/shared/EmptyCallView.vue b/src/components/CallView/shared/EmptyCallView.vue
index 6e649677f1e..857f797861d 100644
--- a/src/components/CallView/shared/EmptyCallView.vue
+++ b/src/components/CallView/shared/EmptyCallView.vue
@@ -33,6 +33,7 @@ import IconPhone from 'vue-material-design-icons/Phone.vue'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
 import { CONVERSATION, PARTICIPANT } from '../../../constants.js'
 import { copyConversationLinkToClipboard } from '../../../utils/handleUrl.ts'
@@ -43,6 +44,7 @@ export default {
 
 	components: {
 		NcButton,
+		NcLoadingIcon,
 		IconAccountMultiple,
 		IconLinkVariant,
 		IconPhone,
@@ -66,11 +68,14 @@ export default {
 	},
 
 	computed: {
-
 		token() {
 			return this.$store.getters.getToken()
 		},
 
+		isConnecting() {
+			return this.$store.getters.isConnecting(this.token)
+		},
+
 		conversation() {
 			return this.$store.getters.conversation(this.token)
 		},
@@ -116,7 +121,9 @@ export default {
 		},
 
 		emptyCallViewIcon() {
-			if (this.isPhoneConversation) {
+			if (this.isConnecting) {
+				return NcLoadingIcon
+			} else if (this.isPhoneConversation) {
 				return IconPhone
 			} else {
 				return this.isPublicConversation ? IconLinkVariant : IconAccountMultiple
@@ -124,6 +131,9 @@ export default {
 		},
 
 		title() {
+			if (this.isConnecting) {
+				return t('spreed', 'Connecting …')
+			}
 			if (this.isPhoneConversation) {
 				return t('spreed', 'Calling …')
 			}
@@ -134,6 +144,10 @@ export default {
 		},
 
 		message() {
+			if (this.isConnecting) {
+				return ''
+			}
+
 			if (this.isPasswordRequestConversation || this.isFileConversation) {
 				return ''
 			}
diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index e931f8c30f7..7665208af22 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -9,11 +9,11 @@
 			id="call_button"
 			:title="startCallTitle"
 			:aria-label="startCallLabel"
-			:disabled="startCallButtonDisabled || loading || isConnecting"
+			:disabled="startCallButtonDisabled || loading || isJoiningCall"
 			:type="startCallButtonType"
 			@click="handleClick">
 			<template #icon>
-				<NcLoadingIcon v-if="isConnecting || loading" />
+				<NcLoadingIcon v-if="isJoiningCall || loading" />
 				<IconPhoneDial v-else-if="isPhoneRoom" :size="20" />
 				<IconPhoneOutline v-else-if="silentCall" :size="20" />
 				<IconPhone v-else :size="20" />
@@ -274,7 +274,7 @@ export default {
 				return t('spreed', 'Join call')
 			}
 
-			if (this.isConnecting) {
+			if (this.isJoiningCall) {
 				return t('spreed', 'Connecting...')
 			}
 
@@ -345,8 +345,8 @@ export default {
 			return this.$store.getters.isInLobby
 		},
 
-		isConnecting() {
-			return this.$store.getters.isConnecting(this.token)
+		isJoiningCall() {
+			return this.$store.getters.isJoiningCall(this.token)
 		},
 
 		connectionFailed() {
diff --git a/src/store/participantsStore.js b/src/store/participantsStore.js
index 4a08d18f758..7306455e238 100644
--- a/src/store/participantsStore.js
+++ b/src/store/participantsStore.js
@@ -65,6 +65,8 @@ const state = {
 	},
 	inCall: {
 	},
+	joiningCall: {
+	},
 	connecting: {
 	},
 	connectionFailed: {
@@ -89,6 +91,10 @@ const getters = {
 		return !!(state.inCall[token] && Object.keys(state.inCall[token]).length > 0)
 	},
 
+	isJoiningCall: (state) => (token) => {
+		return !!(state.joiningCall[token] && Object.keys(state.joiningCall[token]).length > 0)
+	},
+
 	isConnecting: (state) => (token) => {
 		return !!(state.connecting[token] && Object.keys(state.connecting[token]).length > 0)
 	},
@@ -337,6 +343,19 @@ const mutations = {
 		Vue.delete(state.connectionFailed, token)
 	},
 
+	joiningCall(state, { token, sessionId, flags }) {
+		if (!state.joiningCall[token]) {
+			Vue.set(state.joiningCall, token, {})
+		}
+		Vue.set(state.joiningCall[token], sessionId, flags)
+	},
+
+	finishedJoiningCall(state, { token, sessionId }) {
+		if (state.joiningCall[token] && state.joiningCall[token][sessionId]) {
+			Vue.delete(state.joiningCall[token], sessionId)
+		}
+	},
+
 	connecting(state, { token, sessionId, flags }) {
 		if (!state.connecting[token]) {
 			Vue.set(state.connecting, token, {})
@@ -780,7 +799,12 @@ const actions = {
 	},
 
 	async joinCall({ commit, getters }, { token, participantIdentifier, flags, silent, recordingConsent }) {
-		commit('connecting', { token, sessionId: participantIdentifier.sessionId, flags })
+		// t0: press join -> joinining call : true
+		// t1: signaling-join-call received -> joinining : false, inCall : true, connecting: true
+		// t1': signaling-join-call-failed  received -> joinining : false, inCall: false, connecting: false
+		// t2: signaling-users-in-room (internal signaling) OR signaling-participant-list-changed (external signaling) -> connecting: false
+
+		commit('joiningCall', { token, sessionId: participantIdentifier.sessionId, flags })
 
 		if (!participantIdentifier?.sessionId) {
 			console.error('Trying to join call without sessionId')
@@ -800,14 +824,32 @@ const actions = {
 				sessionId: participantIdentifier.sessionId,
 				flags,
 			})
-			commit('finishedConnecting', { token, sessionId: participantIdentifier.sessionId })
+			commit('finishedJoiningCall', { token, sessionId: participantIdentifier.sessionId })
+			// Set connecting until participants list is received
+			commit('connecting', { token, sessionId: participantIdentifier.sessionId, flags })
 		})
 
 		// Preparing the event listener for the signaling-join-call-failed event
 		EventBus.once('signaling-join-call-failed', () => {
+			commit('finishedJoiningCall', { token, sessionId: participantIdentifier.sessionId })
+		})
+
+		// Internal signaling event
+		EventBus.once('signaling-users-in-room', () => {
 			commit('finishedConnecting', { token, sessionId: participantIdentifier.sessionId })
 		})
 
+		// External signaling event
+		// FIXME: This is a workaround for the missing signaling event
+		EventBus.once('signaling-participant-list-changed', () => {
+			commit('finishedConnecting', { token, sessionId: participantIdentifier.sessionId })
+		})
+		setTimeout(() => {
+			// If by accident we never receive a users list, just switch to
+			// "Waiting for others to join the call …" after some seconds.
+			commit('finishedConnecting', { token, sessionId: participantIdentifier.sessionId })
+		}, 10000)
+
 		try {
 			const actualFlags = await joinCall(token, flags, silent, recordingConsent)
 			const updatedData = {