fix(call): resume input device track after change

- with BottomBar and one-click selection, devices should not be muted anymore, as users directly trying them during the call
- managed by component only, not touching the localModel
- fake 'enabled' state to avoid icon flickering

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

Author: Antreesy

src/components/CallView/shared/LocalAudioControlButton.vue

@@ -22,12 +22,12 @@
 						'no-audio-available': !isAudioAvailable,
 						'audio-control-button': showDevices,
 					}"
-					:disabled="!isAudioAllowed"
+					:disabled="!isAudioAllowed || resumeAudioAfterChange"
 					@click.stop="toggleAudio">
 					<template #icon>
 						<VolumeIndicator
 							:audio-preview-available="isAudioAvailable"
-							:audio-enabled="showMicrophoneOn"
+							:audio-enabled="showMicrophoneOn || resumeAudioAfterChange"
 							:current-volume="model.attributes.currentVolume"
 							:volume-threshold="model.attributes.volumeThreshold"
 							overlay-muted-color="#888888" />
@@ -178,6 +178,9 @@ export default {
 			unsubscribeFromDevices,
 		} = useDevices()
 
+		/* Flag to smoothly toggle the audio while in call */
+		const resumeAudioAfterChange = ref(false)
+
 		/**
 		 * Check if component is visible and not obstructed by others
 		 *
@@ -204,6 +207,7 @@ export default {
 			updatePreferences,
 			subscribeToDevices,
 			unsubscribeFromDevices,
+			resumeAudioAfterChange,
 		}
 	},
 
@@ -259,6 +263,22 @@ export default {
 		},
 	},
 
+	watch: {
+		isAudioAvailable(newValue) {
+			if (newValue && this.resumeAudioAfterChange) {
+				// New track is available, resume audio
+				this.model.enableAudio()
+				this.resumeAudioAfterChange = false
+			}
+		},
+
+		audioInputId(newValue) {
+			if (!newValue && this.resumeAudioAfterChange) {
+				this.resumeAudioAfterChange = false
+			}
+		},
+	},
+
 	created() {
 		useHotKey('m', this.toggleAudio)
 		useHotKey(' ', this.toggleAudio, { push: true })
@@ -288,6 +308,10 @@ export default {
 		},
 
 		handleAudioInputIdChange(audioInputId) {
+			if (this.showDevices && this.showMicrophoneOn) {
+				// If input was changed from bottom bar while active, it should not be muted after track change
+				this.resumeAudioAfterChange = true
+			}
 			this.audioInputId = audioInputId
 			this.updatePreferences('audioinput')
 		},

src/components/CallView/shared/LocalVideoControlButton.vue

@@ -13,10 +13,10 @@
 				'no-video-available': !isVideoAvailable,
 				'video-control-button': showDevices,
 			}"
-			:disabled="!isVideoAllowed"
+			:disabled="!isVideoAllowed || resumeVideoAfterChange"
 			@click.stop="toggleVideo">
 			<template #icon>
-				<IconVideo v-if="showVideoOn" :size="20" />
+				<IconVideo v-if="showVideoOn || resumeVideoAfterChange" :size="20" />
 				<IconVideoOffOutline v-else :size="20" />
 			</template>
 		</NcButton>
@@ -49,6 +49,7 @@
 import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 import { useHotKey } from '@nextcloud/vue/composables/useHotKey'
+import { ref } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCaption from '@nextcloud/vue/components/NcActionCaption'
 import NcActions from '@nextcloud/vue/components/NcActions'
@@ -113,13 +114,18 @@ export default {
 			subscribeToDevices,
 			unsubscribeFromDevices,
 		} = useDevices()
+
+		/* Flag to smoothly toggle the video while in call */
+		const resumeVideoAfterChange = ref(false)
+
 		return {
 			devices,
 			videoInputId,
 			updateDevices,
 			updatePreferences,
 			subscribeToDevices,
 			unsubscribeFromDevices,
+			resumeVideoAfterChange,
 		}
 	},
 
@@ -183,6 +189,22 @@ export default {
 		},
 	},
 
+	watch: {
+		isVideoAvailable(newValue) {
+			if (newValue && this.resumeVideoAfterChange) {
+				// New track is available, resume video
+				this.model.enableVideo()
+				this.resumeVideoAfterChange = false
+			}
+		},
+
+		videoInputId(newValue) {
+			if (!newValue && this.resumeVideoAfterChange) {
+				this.resumeVideoAfterChange = false
+			}
+		},
+	},
+
 	created() {
 		useHotKey('v', this.toggleVideo)
 	},
@@ -211,6 +233,10 @@ export default {
 		},
 
 		handleVideoInputIdChange(videoInputId) {
+			if (this.showDevices && this.showVideoOn) {
+				// If input was changed from bottom bar while active, it should not be muted after track change
+				this.resumeVideoAfterChange = true
+			}
 			this.videoInputId = videoInputId
 			this.updatePreferences('videoinput')
 		},