[stable30] feat(error_message): Display proper message on error on join call

src/components/CallView/shared/EmptyCallView.vue

@@ -15,6 +15,9 @@
 			<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">
@@ -67,6 +70,10 @@ export default {
 			return this.$store.getters.isConnecting(this.token)
 		},
 
+		connectionFailed() {
+			return this.$store.getters.connectionFailed(this.token)
+		},
+
 		conversation() {
 			return this.$store.getters.conversation(this.token)
 		},
@@ -112,6 +119,9 @@ export default {
 		},
 
 		iconClass() {
+			if (this.connectionFailed) {
+				return 'icon-error'
+			}
 			if (this.isConnecting) {
 				return 'icon-loading'
 			} else if (this.isPhoneConversation) {
@@ -122,6 +132,9 @@ export default {
 		},
 
 		title() {
+			if (this.connectionFailed) {
+				return t('spreed', 'Connection failed')
+			}
 			if (this.isConnecting) {
 				return t('spreed', 'Connecting …')
 			}
@@ -134,7 +147,22 @@ export default {
 			return t('spreed', 'Waiting for others to join the call …')
 		},
 
+		helper() {
+			if (this.connectionFailed) {
+				return t('spreed', 'Please try to reload the page')
+			}
+			return ''
+		},
+
 		message() {
+			if (this.connectionFailed === 'consent') {
+				return t('spreed', 'Recording consent is required')
+			}
+
+			if (this.connectionFailed) {
+				return t('spreed', 'Something went wrong')
+			}
+
 			if (this.isConnecting) {
 				return ''
 			}

src/store/participantsStore.js

@@ -67,6 +67,8 @@ const state = {
 	},
 	connecting: {
 	},
+	connectionFailed: {
+	},
 	typing: {
 	},
 	speaking: {
@@ -90,6 +92,9 @@ const getters = {
 	isConnecting: (state) => (token) => {
 		return !!(state.connecting[token] && Object.keys(state.connecting[token]).length > 0)
 	},
+	connectionFailed: (state) => (token) => {
+		return state.connectionFailed[token]
+	},
 	/**
 	 * Gets the participants array.
 	 *
@@ -309,6 +314,9 @@ const mutations = {
 	},
 
 	setInCall(state, { token, sessionId, flags }) {
+		if (state.connectionFailed[token]) {
+			Vue.delete(state.connectionFailed, token)
+		}
 		if (flags === PARTICIPANT.CALL_FLAG.DISCONNECTED) {
 			if (state.inCall[token] && state.inCall[token][sessionId]) {
 				Vue.delete(state.inCall[token], sessionId)
@@ -330,6 +338,10 @@ const mutations = {
 		}
 	},
 
+	connectionFailed(state, { token, payload }) {
+		Vue.set(state.connectionFailed, token, payload ?? 'failed')
+	},
+
 	finishedConnecting(state, { token, sessionId }) {
 		if (state.connecting[token] && state.connecting[token][sessionId]) {
 			Vue.delete(state.connecting[token], sessionId)

src/utils/signaling.js

@@ -12,7 +12,6 @@ import {
 import { t } from '@nextcloud/l10n'
 import {
 	generateOcsUrl,
-	generateUrl,
 } from '@nextcloud/router'
 
 import CancelableRequest from './cancelableRequest.js'
@@ -279,18 +278,13 @@ Signaling.Base.prototype.joinCall = function(token, flags, silent, recordingCons
 				resolve()
 				this._joinCallSuccess(token)
 			}.bind(this))
-			.catch(function() {
+			.catch(function(e) {
 				reject(new Error())
-				if (!IS_DESKTOP) {
-					// Server maintenance, lobby kicked in, or room not found.
-					// We first redirect to the conversation again and that
-					// will then show the proper error message to the user.
-					window.location = generateUrl('call/' + token)
-				} else {
-					// TODO: Is it true, reload is equal to generateUrl('call/' + token) here?
-					// Or can we always just reload the page?
-					window.location.reload()
-				}
+				console.error('Connection failed, reason: ', e.response?.data?.ocs?.data?.error)
+				store.commit('connectionFailed', {
+					token,
+					payload: e.response?.data?.ocs?.data?.error,
+				})
 			})
 	})
 }