diff --git a/src/components/CallView/shared/EmptyCallView.vue b/src/components/CallView/shared/EmptyCallView.vue index cbfbd23139c..c7451907cc7 100644 --- a/src/components/CallView/shared/EmptyCallView.vue +++ b/src/components/CallView/shared/EmptyCallView.vue @@ -15,6 +15,9 @@

{{ message }}

+

+ {{ helper }} +

@@ -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 '' } diff --git a/src/store/participantsStore.js b/src/store/participantsStore.js index 514d50573b4..308ea0b4102 100644 --- a/src/store/participantsStore.js +++ b/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) diff --git a/src/utils/signaling.js b/src/utils/signaling.js index b99062bdb8b..d476647e3c2 100644 --- a/src/utils/signaling.js +++ b/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, + }) }) }) }