feat: add UI toggle for noise suppression

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

Author: Antreesy

src/components/NewMessage/NewMessageAudioRecorder.vue

@@ -55,6 +55,7 @@ import IconClose from 'vue-material-design-icons/Close.vue'
 import IconMicrophoneOutline from 'vue-material-design-icons/MicrophoneOutline.vue'
 import { useAudioEncoder } from '../../composables/useAudioEncoder.ts'
 import { useGetToken } from '../../composables/useGetToken.ts'
+import { useSettingsStore } from '../../stores/settings.ts'
 import {
 	destroyNoiseSuppressionWorklet,
 	processNoiseSuppression,
@@ -82,6 +83,8 @@ export default {
 	emits: ['recording', 'audioFile'],
 
 	setup() {
+		const settingsStore = useSettingsStore()
+
 		const {
 			isMediaRecorderReady,
 			isMediaRecorderLoading,
@@ -90,6 +93,7 @@ export default {
 		} = useAudioEncoder()
 
 		return {
+			settingsStore,
 			token: useGetToken(),
 			isMediaRecorderReady,
 			isMediaRecorderLoading,
@@ -179,7 +183,7 @@ export default {
 			try {
 				this.audioStream = await mediaDevicesManager.getUserMedia({
 					audio: {
-						noiseSuppression: false,
+						noiseSuppression: !this.settingsStore.noiseSuppression,
 					},
 					video: false,
 				})
@@ -197,7 +201,7 @@ export default {
 			// Create a media recorder to capture the stream
 			try {
 				await registerNoiseSuppressionWorklet()
-				const audioStreamProcessed = processNoiseSuppression(this.audioStream, true)
+				const audioStreamProcessed = processNoiseSuppression(this.audioStream, this.settingsStore.noiseSuppression)
 				this.mediaRecorder = new this.MediaRecorder(audioStreamProcessed, {
 					mimeType: 'audio/wav',
 				})

src/components/SettingsDialog/SettingsDialog.vue

@@ -38,6 +38,10 @@
 					:label="t('spreed', 'Skip device preview before joining a call')"
 					:description="t('spreed', 'Always shown if recording consent is required')"
 					@update:model-value="setHideMediaSettings" />
+				<NcFormBoxSwitch
+					:model-value="settingsStore.noiseSuppression"
+					:label="t('spreed', 'Enable noise suppression')"
+					@update:model-value="toggleNoiseSuppression" />
 			</NcFormBox>
 
 			<NcButton
@@ -401,6 +405,10 @@ export default {
 			this.settingsStore.setShowMediaSettings(!newValue)
 		},
 
+		toggleNoiseSuppression(newValue) {
+			this.settingsStore.setNoiseSuppression(newValue)
+		},
+
 		async setBlurVirtualBackgroundEnabled(value) {
 			try {
 				await this.settingsStore.setBlurVirtualBackgroundEnabled(value)

src/stores/settings.ts

@@ -30,6 +30,7 @@ export const useSettingsStore = defineStore('settings', () => {
 	const readStatusPrivacy = ref<PRIVACY_KEYS>(loadState('spreed', 'read_status_privacy', PRIVACY.PRIVATE))
 	const typingStatusPrivacy = ref<PRIVACY_KEYS>(loadState('spreed', 'typing_privacy', PRIVACY.PRIVATE))
 	const showMediaSettings = ref<boolean>(BrowserStorage.getItem('showMediaSettings') !== 'false')
+	const noiseSuppression = ref<boolean>(BrowserStorage.getItem('noiseSuppression') !== 'false')
 	const startWithoutMedia = ref<boolean | undefined>(getTalkConfig('local', 'call', 'start-without-media'))
 	const blurVirtualBackgroundEnabled = ref<boolean | undefined>(getTalkConfig('local', 'call', 'blur-virtual-background'))
 	const conversationsListStyle = ref<LIST_STYLE_OPTIONS | undefined>(getTalkConfig('local', 'conversations', 'list-style'))
@@ -68,6 +69,16 @@ export const useSettingsStore = defineStore('settings', () => {
 		showMediaSettings.value = value
 	}
 
+	/**
+	 * Update the noise suppression settings for the user
+	 *
+	 * @param value - new selected state
+	 */
+	function setNoiseSuppression(value: boolean) {
+		BrowserStorage.setItem('noiseSuppression', value.toString())
+		noiseSuppression.value = value
+	}
+
 	/**
 	 * Update the blur virtual background setting for the user
 	 *
@@ -122,6 +133,7 @@ export const useSettingsStore = defineStore('settings', () => {
 		readStatusPrivacy,
 		typingStatusPrivacy,
 		showMediaSettings,
+		noiseSuppression,
 		startWithoutMedia,
 		blurVirtualBackgroundEnabled,
 		conversationsListStyle,
@@ -132,6 +144,7 @@ export const useSettingsStore = defineStore('settings', () => {
 		updateReadStatusPrivacy,
 		updateTypingStatusPrivacy,
 		setShowMediaSettings,
+		setNoiseSuppression,
 		setBlurVirtualBackgroundEnabled,
 		updateStartWithoutMedia,
 		updateConversationsListStyle,