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

Signed-off-by: Souptik Datta <souptikdatta2001@gmail.com>

src/components/CallView/shared/EmptyCallView.vue

@@ -67,6 +67,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 +116,9 @@ export default {
 		},
 
 		iconClass() {
+			if (this.connectionFailed) {
+				return 'icon-error'
+			}
 			if (this.isConnecting) {
 				return 'icon-loading'
 			} else if (this.isPhoneConversation) {
@@ -122,6 +129,9 @@ export default {
 		},
 
 		title() {
+			if (this.connectionFailed) {
+				return t('spreed', 'Connection Failed')
+			}
 			if (this.isConnecting) {
 				return t('spreed', 'Connecting …')
 			}
@@ -135,6 +145,10 @@ export default {
 		},
 
 		message() {
+			if (this.connectionFailed) {
+				return t('spreed', 'Oops, 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] && Object.keys(state.connectionFailed[token]).length > 0) ?? false
+	},
 	/**
 	 * 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,13 @@ const mutations = {
 		}
 	},
 
+	connectionFailed(state, { token }) {
+		if (!state.connectionFailed[token]) {
+			Vue.set(state.connectionFailed, token, {})
+		}
+		Vue.set(state.connectionFailed[token], 'self', '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'
@@ -271,6 +270,7 @@ Signaling.Base.prototype.joinCall = function(token, flags, silent, recordingCons
 			recordingConsent,
 		})
 			.then(function() {
+				console.debug("HERE??????????")
 				this.currentCallToken = token
 				this.currentCallFlags = flags
 				this.currentCallSilent = silent
@@ -280,17 +280,11 @@ Signaling.Base.prototype.joinCall = function(token, flags, silent, recordingCons
 				this._joinCallSuccess(token)
 			}.bind(this))
 			.catch(function() {
+				console.debug("HERE??????????")
 				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()
-				}
+				store.commit('connectionFailed', {
+					token,
+				})
 			})
 	})
 }