fix: voice room followups

src/App.vue

@@ -176,14 +176,6 @@ export default {
 		currentConversation() {
 			return this.$store.getters.conversation(this.token)
 		},
-
-		isVoiceRoom() {
-			return Boolean(this.currentConversation?.attributes & CONVERSATION.ATTRIBUTE.VOICE_ROOM)
-		},
-
-		voiceRoomIdentifier() {
-			return [this.token, this.isVoiceRoom]
-		},
 	},
 
 	watch: {
@@ -205,30 +197,6 @@ export default {
 			}
 		},
 
-		voiceRoomIdentifier: {
-			immediate: true,
-			handler(newValue, oldValue = []) {
-				const [newToken, newIsVoiceRoom] = newValue
-				const [oldToken, oldIsVoiceRoom] = oldValue
-
-				if (!newIsVoiceRoom && oldIsVoiceRoom && newToken !== oldToken) {
-					this.callViewStore.setForceCallView(false)
-				}
-
-				if (oldIsVoiceRoom && newToken !== oldToken) {
-					this.callViewStore.setSelectedVideoPeerId(null)
-					this.$store.dispatch('leaveCall', {
-						token: oldToken,
-						participantIdentifier: this.actorStore.participantIdentifier,
-					})
-				}
-
-				if (newIsVoiceRoom && newToken) {
-					this.joinCallAutomatically(newToken, oldToken)
-				}
-			},
-		},
-
 		isInCall: {
 			immediate: true,
 			handler(value) {
@@ -406,7 +374,7 @@ export default {
 			if (from.name === 'conversation' && to.name === 'conversation' && from.params.token === to.params.token) {
 				// Navigating within the same conversation
 				beforeRouteChangeListener(to, from, next)
-			} else if (!this.warnLeaving || this.skipLeaveWarning || this.isVoiceRoom) {
+			} else if (!this.warnLeaving || this.skipLeaveWarning || this.isVoiceRoom(from.params.token)) {
 				// Safe to navigate
 				// Note: voice rooms are intended to be left without confirmation.
 				beforeRouteChangeListener(to, from, next)
@@ -450,8 +418,13 @@ export default {
 			this.fetchSingleConversation(this.token)
 		},
 
+		isVoiceRoom(token) {
+			const conversation = this.$store.getters.conversation(token)
+			return Boolean(conversation?.attributes & CONVERSATION.ATTRIBUTE.VOICE_ROOM)
+		},
+
 		preventUnload(event) {
-			if (!this.warnLeaving && !this.isSendingMessages) {
+			if ((!this.warnLeaving && !this.isSendingMessages) || this.isVoiceRoom(this.token)) {
 				return
 			}
 
@@ -543,7 +516,7 @@ export default {
 		},
 
 		async joinCallAutomatically(targetToken, prevToken = this.token) {
-			if (this.isInCall || this.isVoiceRoom) {
+			if (this.isInCall) {
 				this.callViewStore.setForceCallView(true)
 
 				const enableAudio = !BrowserStorage.getItem('audioDisabled_' + prevToken)

src/components/LeftSidebar/ConversationsList/ConversationItem.vue

@@ -36,12 +36,15 @@
 		</template>
 		<template #name>
 			<template v-if="compact && iconType">
-				<component :is="iconType.component" :size="15" :fillColor="iconType.color" />
+				<component
+					:is="iconType.component"
+					:size="15"
+					:fillColor="iconType.color" />
 				<span class="hidden-visually">{{ iconType.text }}</span>
 			</template>
 			<span class="text"> {{ item.displayName }} </span>
 		</template>
-		<template v-if="!compact && !item.isSensitive" #subname>
+		<template v-if="!compact && !item.isSensitive && !isVoiceRoom" #subname>
 			<span class="conversation__subname" :title="conversationInformation.title">
 				<span
 					v-if="conversationInformation.actor"
@@ -292,7 +295,7 @@ import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 import { useIsDarkTheme } from '@nextcloud/vue/composables/useIsDarkTheme'
 import { spawnDialog } from '@nextcloud/vue/functions/dialog'
-import { ref, toRefs } from 'vue'
+import { h, ref, toRefs } from 'vue'
 import { isNavigationFailure, NavigationFailureType } from 'vue-router'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
@@ -324,6 +327,7 @@ import IconVideo from 'vue-material-design-icons/Video.vue' // Filled for better
 import ConfirmDialog from '../../UIShared/ConfirmDialog.vue'
 import ConversationIcon from './../../ConversationIcon.vue'
 import IconMarkChatRead from '../../../../img/material-icons/mark-chat-read.svg?raw'
+import IconVolumeHighOutline from '../../../../img/material-icons/volume-high-outline.svg?raw'
 import { useConversationInfo } from '../../../composables/useConversationInfo.ts'
 import { AVATAR, CONVERSATION, PARTICIPANT } from '../../../constants.ts'
 import { getTalkConfig, hasTalkFeature } from '../../../services/CapabilitiesManager.ts'
@@ -486,6 +490,10 @@ export default {
 				&& (!this.item.remoteServer || hasTalkFeature(this.item.token, 'federation-v2'))
 		},
 
+		isVoiceRoom() {
+			return !!(this.item.attributes & CONVERSATION.ATTRIBUTE.VOICE_ROOM)
+		},
+
 		iconType() {
 			if (this.item.hasCall) {
 				return {
@@ -499,6 +507,11 @@ export default {
 					color: this.isDarkTheme ? '#FFCC00' : 'currentColor',
 					text: t('spreed', 'Favorite'),
 				}
+			} else if (this.isVoiceRoom) {
+				return {
+					component: h(NcIconSvgWrapper, { svg: IconVolumeHighOutline, inline: true }),
+					text: t('spreed', 'Voice room'),
+				}
 			}
 			return null
 		},
@@ -758,7 +771,6 @@ export default {
 				font-weight: 400;
 			}
 		}
-
 	}
 
 	&__subname {

src/components/MediaSettings/MediaSettings.vue

@@ -9,7 +9,8 @@
 		v-if="show"
 		:size="isDialog ? 'large' : undefined"
 		:labelId="isDialog ? dialogHeaderId : undefined"
-		@close="close">
+		:noClose="hideCloseButton"
+		@close="handleDialogClose">
 		<div class="media-settings">
 			<h2
 				v-if="isDialog"
@@ -40,6 +41,11 @@
 					</NcCheckboxRadioSwitch>
 				</template>
 			</NcNoteCard>
+			<NcNoteCard
+				v-if="isBeforeJoinCall && isVoiceRoom"
+				type="info">
+				{{ t('spreed', 'You can only join a voice room via a call.') }}
+			</NcNoteCard>
 			<div class="media-settings__content" :class="{ 'media-settings__content--mobile': isMobile }">
 				<!-- Preview -->
 				<div class="media-settings__preview">
@@ -276,7 +282,7 @@ import IconBackground from '../../../img/material-icons/replace-background.svg?r
 import { useDevices } from '../../composables/useDevices.js'
 import { useGetToken } from '../../composables/useGetToken.ts'
 import { useIsInCall } from '../../composables/useIsInCall.js'
-import { ATTENDEE, AVATAR, CALL, CONFIG, PARTICIPANT, VIRTUAL_BACKGROUND } from '../../constants.ts'
+import { ATTENDEE, AVATAR, CALL, CONFIG, CONVERSATION, PARTICIPANT, VIRTUAL_BACKGROUND } from '../../constants.ts'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import {
 	getTalkConfig,
@@ -438,6 +444,15 @@ export default {
 			return !this.userId && this.actorStore.actorType === ATTENDEE.ACTOR_TYPE.GUESTS
 		},
 
+		isVoiceRoom() {
+			return Boolean(this.conversation.attributes & CONVERSATION.ATTRIBUTE.VOICE_ROOM)
+		},
+
+		hideCloseButton() {
+			// Guests don't have Home dashboard so no rooting possible
+			return this.isGuest && this.isVoiceRoom && this.isBeforeJoinCall
+		},
+
 		userId() {
 			return this.actorStore.userId
 		},
@@ -519,7 +534,7 @@ export default {
 
 		showNotifyCallOption() {
 			return !this.hasCall && !this.isPublicShareAuthSidebar
-				&& this.isBeforeJoinCall
+				&& this.isBeforeJoinCall && !this.isVoiceRoom
 		},
 
 		showStartRecordingOption() {
@@ -711,6 +726,13 @@ export default {
 
 	methods: {
 		t,
+		handleDialogClose() {
+			if (this.isBeforeJoinCall && this.isVoiceRoom && !this.isGuest) {
+				this.$router?.push({ name: 'root' })
+			}
+			this.close()
+		},
+
 		showMediaSettings(page) {
 			this.show = true
 			if (page === 'video-verification') {

src/stores/callView.ts

@@ -75,6 +75,9 @@ export const useCallViewStore = defineStore('callView', {
 			if (!conversation) {
 				return
 			}
+			// Start every call with a clean selection, so a stale peer id
+			// from a previous call is not carried over
+			this.setSelectedVideoPeerId(null)
 			const gridPreference = BrowserStorage.getItem(`callprefs-${conversation.token}-isgrid`)
 			const isGrid = gridPreference === null
 				// not defined yet, default to grid view for group/public calls, otherwise speaker view

src/utils/sounds.js

@@ -3,10 +3,22 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { CONVERSATION } from '../constants.ts'
+import store from '../store/index.js'
 import pinia from '../stores/pinia.ts'
 import { useSoundsStore } from '../stores/sounds.js'
+import { useTokenStore } from '../stores/token.ts'
 
 const soundsStore = useSoundsStore(pinia)
+const tokenStore = useTokenStore(pinia)
+
+/**
+ * Checks if the current conversation is a voice room.
+ */
+function isVoiceRoom() {
+	const conversation = store.getters.conversation(tokenStore.token)
+	return Boolean(conversation?.attributes & CONVERSATION.ATTRIBUTE.VOICE_ROOM)
+}
 
 export const Sounds = {
 	BLOCK_SOUND_TIMEOUT: 3000,
@@ -24,7 +36,7 @@ export const Sounds = {
 	},
 
 	async playWaiting() {
-		if (!soundsStore.shouldPlaySounds) {
+		if (!soundsStore.shouldPlaySounds || isVoiceRoom()) {
 			return
 		}
 

src/views/MainView.vue

@@ -48,6 +48,17 @@ function stopWatchingJoinedConversation() {
 
 const isInLobby = computed(() => store.getters.isInLobby)
 const connectionFailed = computed(() => store.getters.connectionFailed(props.token))
+const isVoiceRoom = computed(() => Boolean(store.getters.conversation(props.token)?.attributes & CONVERSATION.ATTRIBUTE.VOICE_ROOM))
+
+watch([() => props.token, isVoiceRoom], ([newToken, newIsVoiceRoom]) => {
+	// Release a stale joined-conversation listener when navigating away
+	if (watchedJoinedConversationToken && watchedJoinedConversationToken !== newToken) {
+		stopWatchingJoinedConversation()
+	}
+	if (newIsVoiceRoom && newToken) {
+		handleDirectCall(newToken)
+	}
+}, { immediate: true })
 
 watch(isInLobby, (isInLobby) => {
 	// User is now blocked by the lobby
@@ -59,12 +70,6 @@ watch(isInLobby, (isInLobby) => {
 	}
 })
 
-watch(() => props.token, (newToken) => {
-	if (watchedJoinedConversationToken && watchedJoinedConversationToken !== newToken) {
-		stopWatchingJoinedConversation()
-	}
-})
-
 onMounted(() => {
 	watchEffect(() => {
 		if (route.hash === '#direct-call') {