feat(Call): Stop switching to CallView without a successful join. Int…

…roduce a failed join message dialog. Signed-off-by: DorraJaouad <[email protected]>
nextcloud · Sep 24, 2024 · cfb2f4d · cfb2f4d
1 parent c11ba79
commit cfb2f4d
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 55 deletions.
diff --git a/src/components/CallView/CallFailedDialog.vue 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 connectionFailedDialgId = `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="connectionFailedDialgId"
+		@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
@@ -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,36 +27,25 @@
 
 <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',
 
 	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,24 +116,14 @@ 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
 			}
 		},
 
 		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
@@ -15,18 +15,20 @@
 				html: true
 			}"
 			: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>
 			<template v-if="showButtonText" #default>
 				{{ startCallLabel }}
 			</template>
 		</NcButton>
+
 		<NcButton v-else-if="showLeaveCallButton && canEndForAll && isPhoneRoom"
 			id="call_button"
 			:aria-label="endCallLabel"
@@ -83,6 +85,7 @@
 				{{ t('spreed', 'End call for everyone') }}
 			</NcActionButton>
 		</NcActions>
+		<CallFailedDialog v-if="connectionFailed" :token="token" />
 	</div>
 </template>
 
@@ -102,9 +105,12 @@ 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 Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.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'
@@ -123,6 +129,7 @@ export default {
 	},
 
 	components: {
+		CallFailedDialog,
 		NcActions,
 		NcActionButton,
 		NcButton,
@@ -133,6 +140,7 @@ export default {
 		IconPhoneHangup,
 		IconPhoneOff,
 		IconPhoneOutline,
+		NcLoadingIcon,
 	},
 
 	props: {
@@ -275,6 +283,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')
 		},
 
@@ -351,6 +363,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: {