fix(sounds): request audio permissions only once when opening NcSelect

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

src/services/webNotificationsService.js

@@ -70,7 +70,7 @@ const playNotificationSound = (notification) => {
 			sound.play()
 
 			const secondarySpeakerEnabled = BrowserStorage.getItem('secondary_speaker') === 'true'
-			const secondaryDeviceId = BrowserStorage.getItem('secondary_speaker_device_id')
+			const secondaryDeviceId = JSON.parse(BrowserStorage.getItem('secondary_speaker_device'))?.id ?? null
 			// Play only if secondary device is enabled, selected and different from primary device
 			if (secondarySpeakerEnabled && secondaryDeviceId && primaryDeviceId !== secondaryDeviceId) {
 				const soundDuped = new Howl(howlPayload)

src/views/UserSettings.vue

@@ -50,7 +50,7 @@
 				:aria-label-combobox="t('notifications', 'Select a device')"
 				:clearable="false"
 				:placeholder="t('notifications', 'Select a device')"
-				:disabled="devices.length <= 1"
+				@open="initializeDevices"
 				@input="updateLocalSettings"/>
 		</template>
 	</NcSettingsSection>
@@ -82,6 +82,7 @@ const batchtime_options = [
 	{ text: t('notifications', '1 day'), value: EmailFrequency.EMAIL_SEND_DAILY },
 	{ text: t('notifications', '1 week'), value: EmailFrequency.EMAIL_SEND_WEEKLY },
 ]
+const empty_device_option = { id: null, label: t('notifications', 'None') }
 const parser = new UAParser()
 const browser = parser.getBrowser()
 const isSafari = browser.name === 'Safari' || browser.name === 'Mobile Safari'
@@ -98,30 +99,10 @@ export default {
 		const config = reactive(loadState('notifications', 'config'))
 		const storage = reactive({
 			secondary_speaker: BrowserStorage.getItem('secondary_speaker') === 'true',
-			secondary_speaker_device: null,
+			secondary_speaker_device: JSON.parse(BrowserStorage.getItem('secondary_speaker_device')) ?? empty_device_option,
 		})
 		const devices = ref([])
 
-		onBeforeMount(async () => {
-			const isAudioSupported = !isSafari && navigator?.mediaDevices?.getUserMedia && navigator?.mediaDevices?.enumerateDevices
-			if (!isAudioSupported) {
-				return
-			}
-
-			// Request permissions to get audio devices
-			await navigator.mediaDevices.getUserMedia({ audio: true })
-			// Enumerate devices and populate NcSelect options
-			devices.value = (await navigator.mediaDevices.enumerateDevices() ?? [])
-				.filter(device => device.kind === 'audiooutput')
-				.map(device => ({
-					id: device.deviceId,
-					label: device.label ? device.label : device.fallbackLabel,
-				}))
-
-			const id = BrowserStorage.getItem('secondary_speaker_device_id')
-			storage.secondary_speaker_device = devices.value.find(device => device.id === id) ?? null
-		})
-
 		return {
 			batchtime_options,
 			isSafari,
@@ -149,17 +130,45 @@ export default {
 		updateLocalSettings() {
 			try {
 				BrowserStorage.setItem('secondary_speaker', this.storage.secondary_speaker)
-				if (this.storage.secondary_speaker && this.storage.secondary_speaker_device) {
-					BrowserStorage.setItem('secondary_speaker_device_id', this.storage.secondary_speaker_device.id)
+				if (this.storage.secondary_speaker && this.storage.secondary_speaker_device.id) {
+					BrowserStorage.setItem('secondary_speaker_device', JSON.stringify(this.storage.secondary_speaker_device))
 				} else {
-					BrowserStorage.removeItem('secondary_speaker_device_id')
+					BrowserStorage.removeItem('secondary_speaker_device')
 				}
 				showSuccess(t('notifications', 'Your settings have been updated.'))
 			} catch (error) {
 				showError(t('notifications', 'An error occurred while updating your settings.'))
 				console.error(error)
 			}
 		},
+
+		async initializeDevices() {
+			const isAudioSupported = !isSafari && navigator?.mediaDevices?.getUserMedia && navigator?.mediaDevices?.enumerateDevices
+			if (!isAudioSupported || this.devices.length > 0) {
+				return
+			}
+
+			let stream = null
+			try {
+				// Request permissions to get audio devices
+				stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+				// Enumerate devices and populate NcSelect options
+				this.devices = (await navigator.mediaDevices.enumerateDevices() ?? [])
+				.filter(device => device.kind === 'audiooutput')
+				.map(device => ({
+					id: device.deviceId,
+					label: device.label ? device.label : device.fallbackLabel,
+				}))
+				.concat([empty_device_option])
+			} catch(error) {
+				showError(t('notifications', 'An error occurred while updating your settings.'))
+				console.error('Error while requesting or initializing audio devices: ', error)
+			} finally {
+				if (stream) {
+					stream.getTracks().forEach(track => track.stop())
+				}
+			}
+		},
 	},
 }