fix(signaling): add UI warning in group calls

Signed-off-by: Maksim Sukharev <[email protected]>

src/PublicShareAuthSidebar.vue

@@ -13,6 +13,7 @@
 			<template v-else>
 				<TopBar is-in-call is-sidebar />
 				<CallView :token="token" is-sidebar />
+				<InternalSignalingHint />
 				<ChatView is-sidebar />
 				<PollViewer />
 				<MediaSettings :recording-consent-given.sync="recordingConsentGiven" />
@@ -31,6 +32,7 @@ import CallView from './components/CallView/CallView.vue'
 import ChatView from './components/ChatView.vue'
 import MediaSettings from './components/MediaSettings/MediaSettings.vue'
 import PollViewer from './components/PollViewer/PollViewer.vue'
+import InternalSignalingHint from './components/RightSidebar/InternalSignalingHint.vue'
 import TopBar from './components/TopBar/TopBar.vue'
 import TransitionWrapper from './components/UIShared/TransitionWrapper.vue'
 
@@ -48,6 +50,7 @@ export default {
 	name: 'PublicShareAuthSidebar',
 
 	components: {
+		InternalSignalingHint,
 		CallView,
 		ChatView,
 		MediaSettings,

src/PublicShareSidebar.vue

@@ -22,6 +22,7 @@
 			<template v-else>
 				<TopBar v-if="isInCall" is-in-call is-sidebar />
 				<CallView v-if="isInCall" :token="token" is-sidebar />
+				<InternalSignalingHint />
 				<CallButton v-if="!isInCall" class="call-button" />
 				<CallFailedDialog v-if="connectionFailed" :token="token" />
 				<ChatView is-sidebar />
@@ -45,6 +46,7 @@ import CallView from './components/CallView/CallView.vue'
 import ChatView from './components/ChatView.vue'
 import MediaSettings from './components/MediaSettings/MediaSettings.vue'
 import PollViewer from './components/PollViewer/PollViewer.vue'
+import InternalSignalingHint from './components/RightSidebar/InternalSignalingHint.vue'
 import CallButton from './components/TopBar/CallButton.vue'
 import TopBar from './components/TopBar/TopBar.vue'
 import TransitionWrapper from './components/UIShared/TransitionWrapper.vue'
@@ -64,6 +66,7 @@ export default {
 	name: 'PublicShareSidebar',
 
 	components: {
+		InternalSignalingHint,
 		CallButton,
 		CallFailedDialog,
 		CallView,

src/components/RightSidebar/InternalSignalingHint.vue

@@ -0,0 +1,67 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import IconNetworkStrength2Alert from 'vue-material-design-icons/NetworkStrength2Alert.vue'
+
+import { t } from '@nextcloud/l10n'
+
+import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
+
+import { useIsInCall } from '../../composables/useIsInCall.js'
+import { useStore } from '../../composables/useStore.js'
+import { CONVERSATION } from '../../constants.js'
+import { EventBus } from '../../services/EventBus.ts'
+
+const store = useStore()
+const isInCall = useIsInCall()
+
+const isGroupConversation = computed(() => {
+	return [CONVERSATION.TYPE.GROUP, CONVERSATION.TYPE.PUBLIC].includes(store.getters.conversation(store.getters.getToken())?.type)
+})
+const show = ref(false)
+
+const warningDescription = t('spreed', 'Calls without High-performance backend can cause connectivity issues and high load on devices. {linkstart}Learn more{linkend}')
+	.replace('{linkstart}', '<a target="_blank" rel="noreferrer nofollow" class="external" href="https://portal.nextcloud.com/article/Nextcloud-Talk/High-Performance-Backend/Installation-of-Nextcloud-Talk-High-Performance-Backend">')
+	.replace('{linkend}', ' ↗</a>')
+
+onMounted(() => {
+	EventBus.on('signaling-internal-show-warning', showInternalWarning)
+})
+
+onBeforeUnmount(() => {
+	EventBus.on('signaling-internal-show-warning', showInternalWarning)
+})
+
+watch(isInCall, (value) => {
+	if (!value) {
+		show.value = false
+	}
+})
+
+const showInternalWarning = () => {
+	if (isGroupConversation.value) {
+		show.value = true
+	}
+}
+</script>
+
+<template>
+	<NcNoteCard v-show="show" type="warning" class="internal-warning">
+		<template #icon>
+			<IconNetworkStrength2Alert fill-color="var(--color-warning)" :size="20" />
+		</template>
+		<!-- eslint-disable-next-line vue/no-v-html -->
+		<p v-html="warningDescription" />
+	</NcNoteCard>
+</template>
+
+<style lang="scss" scoped>
+.internal-warning {
+	margin: var(--default-grid-baseline) !important;
+}
+</style>

src/components/RightSidebar/RightSidebar.vue

@@ -21,6 +21,7 @@
 			<span v-if="unreadMessagesCounter > 0" class="chat-button-unread-marker" />
 		</template>
 		<template #description>
+			<InternalSignalingHint />
 			<LobbyStatus v-if="canFullModerate && hasLobbyEnabled" :token="token" />
 		</template>
 		<NcAppSidebarTab v-if="isInCall"
@@ -112,6 +113,7 @@ import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 import BreakoutRoomsTab from './BreakoutRooms/BreakoutRoomsTab.vue'
+import InternalSignalingHint from './InternalSignalingHint.vue'
 import LobbyStatus from './LobbyStatus.vue'
 import ParticipantsTab from './Participants/ParticipantsTab.vue'
 import SharedItemsTab from './SharedItems/SharedItemsTab.vue'
@@ -129,6 +131,7 @@ export default {
 	components: {
 		BreakoutRoomsTab,
 		ChatView,
+		InternalSignalingHint,
 		LobbyStatus,
 		NcAppSidebar,
 		NcAppSidebarTab,

src/utils/signaling.js

@@ -581,6 +581,14 @@ Signaling.Internal.prototype.sendPendingMessages = function() {
 	}.bind(this))
 }
 
+Signaling.Internal.prototype._joinCallSuccess = function(token) {
+	if (this.hideWarning) {
+		return
+	}
+
+	EventBus.emit('signaling-internal-show-warning', token)
+}
+
 /**
  * @param {object} settings The signaling settings
  * @param {string|string[]} urls The url of the signaling server

src/views/FilesSidebarChatView.vue

@@ -5,6 +5,7 @@
 
 <template>
 	<div class="talk-tab__wrapper">
+		<InternalSignalingHint />
 		<CallButton v-if="!isInCall" class="talk-tab__call-button" />
 		<CallFailedDialog v-if="connectionFailed" :token="token" />
 		<ChatView class="talk-tab__chat-view" is-sidebar />
@@ -18,6 +19,7 @@ import CallFailedDialog from '../components/CallView/CallFailedDialog.vue'
 import ChatView from '../components/ChatView.vue'
 import MediaSettings from '../components/MediaSettings/MediaSettings.vue'
 import PollViewer from '../components/PollViewer/PollViewer.vue'
+import InternalSignalingHint from '../components/RightSidebar/InternalSignalingHint.vue'
 import CallButton from '../components/TopBar/CallButton.vue'
 
 import { useIsInCall } from '../composables/useIsInCall.js'
@@ -27,6 +29,7 @@ export default {
 	name: 'FilesSidebarChatView',
 
 	components: {
+		InternalSignalingHint,
 		CallButton,
 		CallFailedDialog,
 		ChatView,