From 157e1751be3e571c961e0e28d1141f1b33473c18 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Fri, 30 Aug 2024 11:28:47 +0200
Subject: [PATCH 1/2] fix: refactor connection failed description

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 .../CallView/shared/EmptyCallView.vue         | 24 ++++++++++++-------
 src/store/participantsStore.js                |  2 +-
 src/utils/signaling.js                        |  4 ++--
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/CallView/shared/EmptyCallView.vue b/src/components/CallView/shared/EmptyCallView.vue
index c7451907cc7..7e258ffeeda 100644
--- a/src/components/CallView/shared/EmptyCallView.vue
+++ b/src/components/CallView/shared/EmptyCallView.vue
@@ -35,6 +35,13 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.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',
@@ -148,18 +155,19 @@ export default {
 		},
 
 		helper() {
-			if (this.connectionFailed) {
-				return t('spreed', 'Please try to reload the page')
-			}
-			return ''
+			return this.connectionFailed ? t('spreed', 'Please try to reload the page') : ''
 		},
 
 		message() {
-			if (this.connectionFailed === 'consent') {
-				return t('spreed', 'Recording consent is required')
-			}
-
 			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')
 			}
 
diff --git a/src/store/participantsStore.js b/src/store/participantsStore.js
index 308ea0b4102..0ac2fe0a581 100644
--- a/src/store/participantsStore.js
+++ b/src/store/participantsStore.js
@@ -339,7 +339,7 @@ const mutations = {
 	},
 
 	connectionFailed(state, { token, payload }) {
-		Vue.set(state.connectionFailed, token, payload ?? 'failed')
+		Vue.set(state.connectionFailed, token, payload)
 	},
 
 	finishedConnecting(state, { token, sessionId }) {
diff --git a/src/utils/signaling.js b/src/utils/signaling.js
index d476647e3c2..ee3ce49b6ea 100644
--- a/src/utils/signaling.js
+++ b/src/utils/signaling.js
@@ -280,10 +280,10 @@ Signaling.Base.prototype.joinCall = function(token, flags, silent, recordingCons
 			}.bind(this))
 			.catch(function(e) {
 				reject(new Error())
-				console.error('Connection failed, reason: ', e.response?.data?.ocs?.data?.error)
+				console.error('Connection failed, reason: ', e)
 				store.commit('connectionFailed', {
 					token,
-					payload: e.response?.data?.ocs?.data?.error,
+					payload: e.response?.data?.ocs,
 				})
 			})
 	})

From 4cdab82315d4f50ebdede58b5b7f0182e39ef05a Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Fri, 30 Aug 2024 13:52:01 +0200
Subject: [PATCH 2/2] fix(EmptyCallView): migrate from icon classes

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 .../CallView/shared/EmptyCallView.vue         | 32 +++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/CallView/shared/EmptyCallView.vue b/src/components/CallView/shared/EmptyCallView.vue
index 7e258ffeeda..7fc355063d7 100644
--- a/src/components/CallView/shared/EmptyCallView.vue
+++ b/src/components/CallView/shared/EmptyCallView.vue
@@ -8,8 +8,9 @@
 		:class="{
 			'empty-call-view--sidebar': isSidebar,
 			'empty-call-view--small': isSmall
-		}">
-		<div class="icon" :class="iconClass" />
+		}"
+		data-theme-dark>
+		<component :is="emptyCallViewIcon" :size="isSidebar ? 32 : 64" class="empty-call-view__icon" />
 		<h2>{{ title }}</h2>
 		<template v-if="!isSmall">
 			<p v-if="message" class="emptycontent-additional">
@@ -28,9 +29,15 @@
 </template>
 
 <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'
@@ -48,6 +55,11 @@ export default {
 
 	components: {
 		NcButton,
+		IconAccountMultiple,
+		IconAlertOctagon,
+		IconLinkVariant,
+		IconPhone,
+		NcLoadingIcon,
 	},
 
 	props: {
@@ -125,16 +137,15 @@ export default {
 				|| (this.conversation && this.conversation.participantType === PARTICIPANT.TYPE.GUEST_MODERATOR)
 		},
 
-		iconClass() {
+		emptyCallViewIcon() {
 			if (this.connectionFailed) {
-				return 'icon-error'
-			}
-			if (this.isConnecting) {
-				return 'icon-loading'
+				return IconAlertOctagon
+			} else if (this.isConnecting) {
+				return NcLoadingIcon
 			} else if (this.isPhoneConversation) {
-				return 'icon-phone'
+				return IconPhone
 			} else {
-				return this.isPublicConversation ? 'icon-public' : 'icon-contacts'
+				return this.isPublicConversation ? IconLinkVariant : IconAccountMultiple
 			}
 		},
 
@@ -240,8 +251,9 @@ export default {
 		margin: 4px auto;
 	}
 
+	&__icon,
 	h2, p {
-		color: #FFFFFF;
+		color: var(--color-main-text);
 	}
 
 	&--sidebar {