move capabilities request to HOC

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

4 files changed, 29 insertions, 7 deletions

diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
index bab63925a..01afdf043 100644
--- a/src/components/CallView/CallView.vue
+++ b/src/components/CallView/CallView.vue
@@ -121,7 +121,9 @@
 				@select-video="handleSelectVideo"
 				@click-local-video="handleClickLocalVideo" />
 
-			<ReactionToaster :token="token"
+			<ReactionToaster v-if="supportedReactions?.length"
+				:token="token"
+				:supported-reactions="supportedReactions"
 				:call-participant-models="callParticipantModels" />
 
 			<!-- Local video if sidebar -->
@@ -145,6 +147,7 @@
 <script>
 import debounce from 'debounce'
 
+import { getCapabilities } from '@nextcloud/capabilities'
 import { showMessage } from '@nextcloud/dialogs'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
@@ -343,6 +346,10 @@ export default {
 
 			return null
 		},
+
+		supportedReactions() {
+			return getCapabilities()?.spreed?.config?.call?.['supported-reactions']
+		},
 	},
 	watch: {
 		localScreen(localScreen) {
diff --git a/src/components/CallView/shared/ReactionToaster.vue b/src/components/CallView/shared/ReactionToaster.vue
index 4afa528d5..8d0a8ccd7 100644
--- a/src/components/CallView/shared/ReactionToaster.vue
+++ b/src/components/CallView/shared/ReactionToaster.vue
@@ -54,6 +54,16 @@ export default {
 			type: String,
 			required: true,
 		},
+
+		/**
+		 * Supported reactions
+		 */
+		supportedReactions: {
+			type: Array,
+			validator: (prop) => prop.every(e => typeof e === 'string'),
+			required: true,
+		},
+
 		callParticipantModels: {
 			type: Array,
 			required: true,
@@ -110,6 +120,11 @@ export default {
 		},
 
 		handleReaction(model, reaction) {
+			// prevent receiving anything rather than defined reactions in capabilities
+			if (!this.supportedReactions.includes(reaction)) {
+				return
+			}
+
 			this.reactionsQueue.push({
 				reaction,
 				name: this.getParticipantName(model),
diff --git a/src/components/TopBar/ReactionMenu.vue b/src/components/TopBar/ReactionMenu.vue
index e87a617ae..940af7d15 100644
--- a/src/components/TopBar/ReactionMenu.vue
+++ b/src/components/TopBar/ReactionMenu.vue
@@ -31,7 +31,7 @@
 
 		<NcActionButtonGroup class="reaction__group"
 			:style="{'--reactions-in-single-row': reactionsInSingleRow}">
-			<NcActionButton v-for="(reaction, index) in reactions"
+			<NcActionButton v-for="(reaction, index) in supportedReactions"
 				:key="index"
 				:aria-label="t('spreed', 'React with {reaction}', { reaction })"
 				class="reaction__button"
@@ -88,7 +88,7 @@ export default {
 		/**
 		 * Supported reactions
 		 */
-		reactions: {
+		supportedReactions: {
 			type: Array,
 			validator: (prop) => prop.every(e => typeof e === 'string'),
 			required: true,
@@ -109,7 +109,7 @@ export default {
 		},
 
 		reactionsInSingleRow() {
-			return Math.ceil(this.reactions.length / 2)
+			return Math.ceil(this.supportedReactions.length / 2)
 		},
 	},
 
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 2e44256e9..7656a5cfc 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -78,7 +78,7 @@
 		<ReactionMenu v-if="hasReactionSupport"
 			class="top-bar__button dark-hover"
 			:token="token"
-			:reactions="reactions"
+			:supported-reactions="supportedReactions"
 			:local-call-participant-model="localCallParticipantModel" />
 
 		<!-- Local media controls -->
@@ -305,12 +305,12 @@ export default {
 			return IS_DESKTOP
 		},
 
-		reactions() {
+		supportedReactions() {
 			return getCapabilities()?.spreed?.config?.call?.['supported-reactions']
 		},
 
 		hasReactionSupport() {
-			return this.isInCall && this.reactions?.length > 0
+			return this.isInCall && this.supportedReactions?.length > 0
 		},
 	},