From f12aaa5f7964b7b803b4b880edada81a4a1a1407 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 26 Mar 2024 10:46:10 +0100
Subject: [PATCH 1/5] feat(media): manually refresh devices list

- event listener tracks only change of physical devices (USB-connected)
- allow to get in the list such inputs as bluetooth, mini-jack, virtual devices

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../MediaSettings/MediaDevicesSelector.vue          | 13 ++++++++++++-
 src/components/MediaSettings/MediaSettings.vue      |  4 ++++
 .../SettingsDialog/MediaDevicesPreview.vue          |  4 ++++
 src/composables/useDevices.js                       |  9 +++++++++
 4 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/MediaSettings/MediaDevicesSelector.vue b/src/components/MediaSettings/MediaDevicesSelector.vue
index e2ab86af623..2b3c401aadb 100644
--- a/src/components/MediaSettings/MediaDevicesSelector.vue
+++ b/src/components/MediaSettings/MediaDevicesSelector.vue
@@ -37,13 +37,22 @@
 			:clearable="false"
 			:placeholder="deviceSelectorPlaceholder"
 			:disabled="!enabled || !deviceOptionsAvailable" />
+
+		<NcButton type="tertiary-no-background"
+			:title="t('spreed', 'Refresh devices list')"
+			:aria-lebel="t('spreed', 'Refresh devices list')"
+			@click="$emit('refresh')">
+			<RefreshIcon :size="20" />
+		</NcButton>
 	</div>
 </template>
 
 <script>
 import Microphone from 'vue-material-design-icons/Microphone.vue'
+import RefreshIcon from 'vue-material-design-icons/Refresh.vue'
 import VideoIcon from 'vue-material-design-icons/Video.vue'
 
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 
 export default {
@@ -51,8 +60,10 @@ export default {
 	name: 'MediaDevicesSelector',
 
 	components: {
+		NcButton,
 		NcSelect,
 		Microphone,
+		RefreshIcon,
 		VideoIcon,
 	},
 
@@ -77,7 +88,7 @@ export default {
 		},
 	},
 
-	emits: ['update:deviceId'],
+	emits: ['refresh', 'update:deviceId'],
 
 	data() {
 		return {
diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
index a366b9c258e..8c3619194cc 100644
--- a/src/components/MediaSettings/MediaSettings.vue
+++ b/src/components/MediaSettings/MediaSettings.vue
@@ -107,10 +107,12 @@
 				<MediaDevicesSelector kind="audioinput"
 					:devices="devices"
 					:device-id="audioInputId"
+					@refresh="updateDevices"
 					@update:deviceId="audioInputId = $event" />
 				<MediaDevicesSelector kind="videoinput"
 					:devices="devices"
 					:device-id="videoInputId"
+					@refresh="updateDevices"
 					@update:deviceId="videoInputId = $event" />
 				<MediaDevicesSpeakerTest />
 			</div>
@@ -282,6 +284,7 @@ export default {
 
 		const {
 			devices,
+			updateDevices,
 			currentVolume,
 			currentThreshold,
 			audioPreviewAvailable,
@@ -301,6 +304,7 @@ export default {
 			video,
 			// useDevices
 			devices,
+			updateDevices,
 			currentVolume,
 			currentThreshold,
 			audioPreviewAvailable,
diff --git a/src/components/SettingsDialog/MediaDevicesPreview.vue b/src/components/SettingsDialog/MediaDevicesPreview.vue
index b08f0d691d1..e7469800651 100644
--- a/src/components/SettingsDialog/MediaDevicesPreview.vue
+++ b/src/components/SettingsDialog/MediaDevicesPreview.vue
@@ -23,6 +23,7 @@
 		<MediaDevicesSelector kind="audioinput"
 			:devices="devices"
 			:device-id="audioInputId"
+			@refresh="updateDevices"
 			@update:deviceId="audioInputId = $event" />
 		<div class="preview preview-audio">
 			<div v-if="!audioPreviewAvailable"
@@ -51,6 +52,7 @@
 		<MediaDevicesSelector kind="videoinput"
 			:devices="devices"
 			:device-id="videoInputId"
+			@refresh="updateDevices"
 			@update:deviceId="videoInputId = $event" />
 		<div class="preview preview-video">
 			<div v-if="!videoPreviewAvailable"
@@ -107,6 +109,7 @@ export default {
 		const video = ref(null)
 		const {
 			devices,
+			updateDevices,
 			currentVolume,
 			currentThreshold,
 			audioPreviewAvailable,
@@ -122,6 +125,7 @@ export default {
 		return {
 			video,
 			devices,
+			updateDevices,
 			currentVolume,
 			currentThreshold,
 			audioPreviewAvailable,
diff --git a/src/composables/useDevices.js b/src/composables/useDevices.js
index 24dd61afecf..d4b3d703717 100644
--- a/src/composables/useDevices.js
+++ b/src/composables/useDevices.js
@@ -161,6 +161,14 @@ export function useDevices(video, initializeOnMounted) {
 		updateVideoStream()
 	}
 
+	/**
+	 * Force enumerate devices (audio and video)
+	 * @public
+	 */
+	function updateDevices() {
+		mediaDevicesManager._updateDevices()
+	}
+
 	/**
 	 * Stop tracking device events (audio and video)
 	 * @public
@@ -369,6 +377,7 @@ export function useDevices(video, initializeOnMounted) {
 
 	return {
 		devices,
+		updateDevices,
 		currentVolume,
 		currentThreshold,
 		audioPreviewAvailable,

From 13d0d2cb9d3793fbcc5e422081ad58d8d81f1f46 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Wed, 27 Mar 2024 18:41:06 +0100
Subject: [PATCH 2/5] feat(media): rank and list device preferences

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../MediaSettings/MediaSettings.vue           |   4 +
 src/composables/useDevices.js                 |  11 ++
 src/services/mediaDevicePreferences.ts        | 183 ++++++++++++++++++
 src/store/conversationsStore.spec.js          |   2 +-
 src/utils/webrtc/MediaDevicesManager.js       |  65 +++++++
 5 files changed, 264 insertions(+), 1 deletion(-)
 create mode 100644 src/services/mediaDevicePreferences.ts

diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
index 8c3619194cc..3c46f0a86f9 100644
--- a/src/components/MediaSettings/MediaSettings.vue
+++ b/src/components/MediaSettings/MediaSettings.vue
@@ -285,6 +285,7 @@ export default {
 		const {
 			devices,
 			updateDevices,
+			updatePreferences,
 			currentVolume,
 			currentThreshold,
 			audioPreviewAvailable,
@@ -305,6 +306,7 @@ export default {
 			// useDevices
 			devices,
 			updateDevices,
+			updatePreferences,
 			currentVolume,
 			currentThreshold,
 			audioPreviewAvailable,
@@ -553,6 +555,8 @@ export default {
 			if (this.videoDeviceStateChanged) {
 				emit('local-video-control-button:toggle-video')
 			}
+
+			this.updatePreferences()
 			this.closeModal()
 		},
 
diff --git a/src/composables/useDevices.js b/src/composables/useDevices.js
index d4b3d703717..74605e141c2 100644
--- a/src/composables/useDevices.js
+++ b/src/composables/useDevices.js
@@ -45,6 +45,8 @@ export function useDevices(video, initializeOnMounted) {
 	const videoTrackToStream = ref(null)
 	const mediaDevicesManager = reactive(mediaDevicesManagerInstance)
 
+	window.OCA.Talk.mediaDevicesManager = mediaDevicesManagerInstance
+
 	// Public refs
 	const currentVolume = ref(-100)
 	const currentThreshold = ref(-100)
@@ -169,6 +171,14 @@ export function useDevices(video, initializeOnMounted) {
 		mediaDevicesManager._updateDevices()
 	}
 
+	/**
+	 * Update preference counters for devices (audio and video)
+	 * @public
+	 */
+	function updatePreferences() {
+		mediaDevicesManager.updatePreferences()
+	}
+
 	/**
 	 * Stop tracking device events (audio and video)
 	 * @public
@@ -391,6 +401,7 @@ export function useDevices(video, initializeOnMounted) {
 		videoStreamError,
 		// MediaSettings only
 		initializeDevices,
+		updatePreferences,
 		stopDevices,
 		virtualBackground,
 	}
diff --git a/src/services/mediaDevicePreferences.ts b/src/services/mediaDevicePreferences.ts
new file mode 100644
index 00000000000..6d4c5cc6cb4
--- /dev/null
+++ b/src/services/mediaDevicePreferences.ts
@@ -0,0 +1,183 @@
+/**
+ * @copyright Copyright (c) 2024 Maksim Sukharev <antreesy.web@gmail.com>
+ *
+ * @author Maksim Sukharev <antreesy.web@gmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+/**
+ * List all registered devices in order of their preferences
+ * Show whether device is currently unplugged or selected, if information is available
+ *
+ * @param devices list of available devices
+ * @param audioInputId id of currently selected audio input
+ * @param videoInputId id of currently selected video input
+ * @param audioInputList list of registered audio devices in order of preference
+ * @param videoInputList list of registered video devices in order of preference
+ */
+function listMediaDevices(devices: MediaDeviceInfo[], audioInputId: string, videoInputId: string, audioInputList: MediaDeviceInfo[], videoInputList: MediaDeviceInfo[]) {
+	const availableDevices = devices.map(device => device.deviceId).filter(id => id !== 'default')
+
+	const getDeviceString = (device: MediaDeviceInfo, index: number) => {
+		const isUnplugged = !availableDevices.includes(device.deviceId) ? ' (unplugged)' : ''
+		const isSelected = () => {
+			if (device.kind === 'audioinput') {
+				return device.deviceId === audioInputId ? ' (selected)' : ''
+			} else if (device.kind === 'videoinput') {
+				return device.deviceId === videoInputId ? ' (selected)' : ''
+			}
+		}
+		return `    ${index + 1}. ${device.label || device.deviceId}` + isUnplugged + isSelected()
+	}
+
+	// eslint-disable-next-line no-console
+	console.log(`Media devices:
+  Audio input:
+${audioInputList.map(getDeviceString).join('\n')}
+
+  Video input:
+${videoInputList.map(getDeviceString).join('\n')}
+`)
+}
+
+/**
+ * Modify devices list.
+ *
+ * @param device device
+ * @param devicesList list of registered devices in order of preference
+ * @param promote whether device should be promoted (to be used in updateMediaDevicesPreferences)
+ */
+function registerNewDevice(device: MediaDeviceInfo, devicesList: MediaDeviceInfo[], promote: boolean = false) {
+	const newDevicesList = devicesList.slice()
+	console.debug('Registering new device:', device)
+
+	if (promote) {
+		newDevicesList.unshift(device)
+	} else {
+		newDevicesList.push(device)
+	}
+
+	return newDevicesList
+}
+
+/**
+ * Promote device in the preference list.
+ * Regardless if new unknown or registered device was selected, we promote it in the list:
+ * - if first item is plugged, then we prefer device out of all options and put it on the first place;
+ * - if first item is unplugged, then we don't consider it, and compare with the next in the list;
+ * - if second item is unplugged, compare with next in the list;
+ * - ...
+ * - if N-th item is plugged, then we prefer device to it and put it on the Nth place.
+ *
+ * Returns changed preference lists for audio / video devices (null, if it hasn't been changed)
+ *
+ * @param devices list of available devices
+ * @param inputList list of registered audio/video devices in order of preference
+ * @param inputId id of currently selected input
+ */
+function promoteDevice(devices: MediaDeviceInfo[], inputList: MediaDeviceInfo[], inputId: string | null) {
+	const newInputList = inputList.slice()
+
+	// Get the index of the first plugged device
+	const availableDevices = devices.map(device => device.deviceId).filter(id => id !== 'default')
+	const firstPluggedIndex = newInputList.findIndex(device => availableDevices.includes(device.deviceId))
+	const insertPosition = firstPluggedIndex === -1 ? newInputList.length : firstPluggedIndex
+
+	// Get the index of the currently selected device
+	const currentDevicePosition = newInputList.findIndex(device => device.deviceId === inputId)
+
+	if (currentDevicePosition === insertPosition) {
+		// preferences list is unchanged
+		return null
+	}
+
+	let deviceToPromote = null
+	if (currentDevicePosition === -1 && inputId !== 'default' && inputId !== null) {
+		// If device was not registered in preferences list, get it from devices list
+		deviceToPromote = devices.find(device => device.deviceId === inputId)
+	} else if (currentDevicePosition > 0) {
+		// Otherwise extract it from preferences list
+		deviceToPromote = newInputList.splice(currentDevicePosition, 1)[0]
+	}
+
+	if (deviceToPromote) {
+		// Put the device at the new position
+		newInputList.splice(insertPosition, 0, deviceToPromote)
+		return newInputList
+	} else {
+		return null
+	}
+}
+
+/**
+ * Populate devices preferences. If device has not yet been registered in preference list, it will be added.
+ *
+ * Returns changed preference lists for audio / video devices (null, if it hasn't been changed)
+ *
+ * @param devices list of available devices
+ * @param audioInputList list of registered audio devices in order of preference
+ * @param videoInputList list of registered video devices in order of preference
+ */
+function populateMediaDevicesPreferences(devices: MediaDeviceInfo[], audioInputList: MediaDeviceInfo[], videoInputList: MediaDeviceInfo[]) {
+	let newAudioInputList = null
+	let newVideoInputList = null
+
+	for (const device of devices) {
+		if (device.kind === 'audioinput') {
+			// Add to the list of known devices
+			if (device.deviceId !== 'default' && !audioInputList.some(input => input.deviceId === device.deviceId)) {
+				newAudioInputList = registerNewDevice(device, audioInputList)
+			}
+		} else if (device.kind === 'videoinput') {
+			// Add to the list of known devices
+			if (device.deviceId !== 'default' && !videoInputList.some(input => input.deviceId === device.deviceId)) {
+				newVideoInputList = registerNewDevice(device, videoInputList)
+			}
+		}
+	}
+
+	return {
+		newAudioInputList,
+		newVideoInputList,
+	}
+}
+
+/**
+ * Update devices preferences. Assuming that preferred devices were selected, should be called after applying the selection:
+ * so either with joining the call or changing device during the call
+ *
+ * Returns changed preference lists for audio / video devices (null, if it hasn't been changed)
+ *
+ * @param devices list of available devices
+ * @param audioInputId id of currently selected audio input
+ * @param videoInputId id of currently selected video input
+ * @param audioInputList list of registered audio devices in order of preference
+ * @param videoInputList list of registered video devices in order of preference
+ */
+function updateMediaDevicesPreferences(devices: MediaDeviceInfo[], audioInputId: string, videoInputId: string, audioInputList: MediaDeviceInfo[], videoInputList: MediaDeviceInfo[]) {
+	return {
+		newAudioInputList: promoteDevice(devices, audioInputList, audioInputId),
+		newVideoInputList: promoteDevice(devices, videoInputList, videoInputId),
+	}
+}
+
+export {
+	listMediaDevices,
+	populateMediaDevicesPreferences,
+	updateMediaDevicesPreferences,
+}
diff --git a/src/store/conversationsStore.spec.js b/src/store/conversationsStore.spec.js
index 04ec957d39b..534252c393b 100644
--- a/src/store/conversationsStore.spec.js
+++ b/src/store/conversationsStore.spec.js
@@ -65,7 +65,7 @@ jest.mock('../services/messagesService', () => ({
 jest.mock('@nextcloud/event-bus')
 
 jest.mock('../services/BrowserStorage.js', () => ({
-	getItem: jest.fn(),
+	getItem: jest.fn().mockReturnValue(null),
 	setItem: jest.fn(),
 	removeItem: jest.fn(),
 }))
diff --git a/src/utils/webrtc/MediaDevicesManager.js b/src/utils/webrtc/MediaDevicesManager.js
index 396843bb6f0..21deb55fbc6 100644
--- a/src/utils/webrtc/MediaDevicesManager.js
+++ b/src/utils/webrtc/MediaDevicesManager.js
@@ -20,6 +20,11 @@
  */
 
 import BrowserStorage from '../../services/BrowserStorage.js'
+import {
+	listMediaDevices,
+	populateMediaDevicesPreferences,
+	updateMediaDevicesPreferences,
+} from '../../services/mediaDevicePreferences.ts'
 import EmitterMixin from '../EmitterMixin.js'
 
 /**
@@ -91,6 +96,12 @@ export default function MediaDevicesManager() {
 	this._fallbackAudioInputId = undefined
 	this._fallbackVideoInputId = undefined
 
+	const audioInputPreferences = BrowserStorage.getItem('audioInputPreferences')
+	this._preferenceAudioInputList = audioInputPreferences !== null ? JSON.parse(audioInputPreferences) : []
+
+	const videoInputPreferences = BrowserStorage.getItem('videoInputPreferences')
+	this._preferenceVideoInputList = videoInputPreferences !== null ? JSON.parse(videoInputPreferences) : []
+
 	this._tracks = []
 
 	this._updateDevicesBound = this._updateDevices.bind(this)
@@ -220,6 +231,8 @@ MediaDevicesManager.prototype = {
 			}
 
 			this._pendingEnumerateDevicesPromise = null
+
+			this._populatePreferences(devices)
 		}).catch(function(error) {
 			console.error('Could not update known media devices: ' + error.name + ': ' + error.message)
 
@@ -227,6 +240,58 @@ MediaDevicesManager.prototype = {
 		})
 	},
 
+	_populatePreferences(devices) {
+		const { newAudioInputList, newVideoInputList } = populateMediaDevicesPreferences(
+			devices,
+			this._preferenceAudioInputList,
+			this._preferenceVideoInputList,
+		)
+
+		if (newAudioInputList) {
+			this._preferenceAudioInputList = newAudioInputList
+			BrowserStorage.setItem('audioInputPreferences', JSON.stringify(this._preferenceAudioInputList))
+		}
+		if (newVideoInputList) {
+			this._preferenceVideoInputList = newVideoInputList
+			BrowserStorage.setItem('videoInputPreferences', JSON.stringify(this._preferenceVideoInputList))
+		}
+	},
+
+	updatePreferences() {
+		const { newAudioInputList, newVideoInputList } = updateMediaDevicesPreferences(
+			this.attributes.devices,
+			this.attributes.audioInputId,
+			this.attributes.videoInputId,
+			this._preferenceAudioInputList,
+			this._preferenceVideoInputList,
+		)
+
+		if (newAudioInputList) {
+			this._preferenceAudioInputList = newAudioInputList
+			BrowserStorage.setItem('audioInputPreferences', JSON.stringify(newAudioInputList))
+		}
+		if (newVideoInputList) {
+			this._preferenceVideoInputList = newVideoInputList
+			BrowserStorage.setItem('videoInputPreferences', JSON.stringify(newVideoInputList))
+		}
+	},
+
+	/**
+	 * List all registered devices in order of their preferences
+	 * Show whether device is currently unplugged or selected, if information is available
+	 */
+	listDevices() {
+		navigator.mediaDevices.enumerateDevices().then(devices => {
+			listMediaDevices(
+				devices,
+				this.attributes.audioInputId,
+				this.attributes.videoInputId,
+				this._preferenceAudioInputList,
+				this._preferenceVideoInputList,
+			)
+		})
+	},
+
 	_removeDevice(removedDevice) {
 		const removedDeviceIndex = this.attributes.devices.findIndex(oldDevice => oldDevice.deviceId === removedDevice.deviceId && oldDevice.kind === removedDevice.kind)
 		if (removedDeviceIndex >= 0) {

From 2a87eff6f68b46969c54ae63337c9a2714df22be Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 11 Apr 2024 15:14:23 +0200
Subject: [PATCH 3/5] feat(media): substitute fallback device with preferred
 device

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/services/mediaDevicePreferences.ts  | 15 +++++++++++++++
 src/utils/webrtc/MediaDevicesManager.js | 21 +++++++++++----------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/services/mediaDevicePreferences.ts b/src/services/mediaDevicePreferences.ts
index 6d4c5cc6cb4..25eefa96d56 100644
--- a/src/services/mediaDevicePreferences.ts
+++ b/src/services/mediaDevicePreferences.ts
@@ -55,6 +55,20 @@ ${videoInputList.map(getDeviceString).join('\n')}
 `)
 }
 
+/**
+ * Get the first available device from the preference list.
+ *
+ * Returns id of device from the list / provided fallback id / 'default' id
+ *
+ * @param devices list of available devices
+ * @param inputList list of registered audio/video devices in order of preference
+ * @param [fallbackId] id of currently selected input
+ */
+function getFirstAvailableDevice(devices: MediaDeviceInfo[], inputList: MediaDeviceInfo[], fallbackId?: string) {
+	const availableDevices = devices.map(device => device.deviceId).filter(id => id !== 'default')
+	return inputList.find(device => availableDevices.includes(device.deviceId))?.deviceId ?? fallbackId
+}
+
 /**
  * Modify devices list.
  *
@@ -177,6 +191,7 @@ function updateMediaDevicesPreferences(devices: MediaDeviceInfo[], audioInputId:
 }
 
 export {
+	getFirstAvailableDevice,
 	listMediaDevices,
 	populateMediaDevicesPreferences,
 	updateMediaDevicesPreferences,
diff --git a/src/utils/webrtc/MediaDevicesManager.js b/src/utils/webrtc/MediaDevicesManager.js
index 21deb55fbc6..a3d658ddc67 100644
--- a/src/utils/webrtc/MediaDevicesManager.js
+++ b/src/utils/webrtc/MediaDevicesManager.js
@@ -21,6 +21,7 @@
 
 import BrowserStorage from '../../services/BrowserStorage.js'
 import {
+	getFirstAvailableDevice,
 	listMediaDevices,
 	populateMediaDevicesPreferences,
 	updateMediaDevicesPreferences,
@@ -211,14 +212,14 @@ MediaDevicesManager.prototype = {
 					// Couldn't find device by id
 					console.debug('Could not find previous audio device, falling back to default/first device in the list', BrowserStorage.getItem('audioInputId'), this.attributes.devices)
 				}
-				this.attributes.audioInputId = this._fallbackAudioInputId
+				this.attributes.audioInputId = getFirstAvailableDevice(devices, this._preferenceAudioInputList, this._fallbackAudioInputId) ?? 'default'
 			}
 			if (this.attributes.videoInputId === undefined) {
 				if (BrowserStorage.getItem('videoInputId')) {
 					// Couldn't find device by id, try the label
 					console.debug('Could not find previous video device, falling back to default/first device in the list', BrowserStorage.getItem('videoInputId'), this.attributes.devices)
 				}
-				this.attributes.videoInputId = this._fallbackVideoInputId
+				this.attributes.videoInputId = getFirstAvailableDevice(devices, this._preferenceVideoInputList, this._fallbackVideoInputId) ?? 'default'
 			}
 
 			// Trigger change events after all the devices are processed to
@@ -300,19 +301,17 @@ MediaDevicesManager.prototype = {
 
 		if (removedDevice.kind === 'audioinput') {
 			if (this._fallbackAudioInputId === removedDevice.deviceId) {
-				const firstAudioInputDevice = this.attributes.devices.find(device => device.kind === 'audioinput')
-				this._fallbackAudioInputId = firstAudioInputDevice ? firstAudioInputDevice.deviceId : undefined
+				this._fallbackAudioInputId = getFirstAvailableDevice(this.attributes.devices, this._preferenceAudioInputList, undefined)
 			}
 			if (this.attributes.audioInputId === removedDevice.deviceId) {
-				this.attributes.audioInputId = this._fallbackAudioInputId
+				this.attributes.audioInputId = getFirstAvailableDevice(this.attributes.devices, this._preferenceAudioInputList, this._fallbackAudioInputId)
 			}
 		} else if (removedDevice.kind === 'videoinput') {
 			if (this._fallbackVideoInputId === removedDevice.deviceId) {
-				const firstVideoInputDevice = this.attributes.devices.find(device => device.kind === 'videoinput')
-				this._fallbackVideoInputId = firstVideoInputDevice ? firstVideoInputDevice.deviceId : undefined
+				this._fallbackVideoInputId = getFirstAvailableDevice(this.attributes.devices, this._preferenceVideoInputList, undefined)
 			}
 			if (this.attributes.videoInputId === removedDevice.deviceId) {
-				this.attributes.videoInputId = this._fallbackVideoInputId
+				this.attributes.videoInputId = getFirstAvailableDevice(this.attributes.devices, this._preferenceVideoInputList, this._fallbackVideoInputId)
 			}
 		}
 	},
@@ -368,14 +367,16 @@ MediaDevicesManager.prototype = {
 		// Additionally, set first available device as fallback, and override
 		// any fallback previously set if the default device is added.
 		if (addedDevice.kind === 'audioinput') {
-			if (BrowserStorage.getItem('audioInputId') === addedDevice.deviceId) {
+			if (BrowserStorage.getItem('audioInputId') === addedDevice.deviceId
+				|| getFirstAvailableDevice(this.attributes.devices, this._preferenceAudioInputList, this._fallbackAudioInputId)) {
 				this.attributes.audioInputId = addedDevice.deviceId
 			}
 			if (!this._fallbackAudioInputId || addedDevice.deviceId === 'default') {
 				this._fallbackAudioInputId = addedDevice.deviceId
 			}
 		} else if (addedDevice.kind === 'videoinput') {
-			if (BrowserStorage.getItem('videoInputId') === addedDevice.deviceId) {
+			if (BrowserStorage.getItem('videoInputId') === addedDevice.deviceId
+				|| getFirstAvailableDevice(this.attributes.devices, this._preferenceVideoInputList, this._fallbackVideoInputId)) {
 				this.attributes.videoInputId = addedDevice.deviceId
 			}
 			if (!this._fallbackVideoInputId || addedDevice.deviceId === 'default') {

From 50746aedb347a8c6bd885002dfea6768291c1df1 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 11 Apr 2024 16:34:39 +0200
Subject: [PATCH 4/5] fix(media): post-review changes

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/services/mediaDevicePreferences.ts  | 24 ++++++++++++++----------
 src/utils/webrtc/MediaDevicesManager.js | 18 +++++++++---------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/services/mediaDevicePreferences.ts b/src/services/mediaDevicePreferences.ts
index 25eefa96d56..6693e7948ba 100644
--- a/src/services/mediaDevicePreferences.ts
+++ b/src/services/mediaDevicePreferences.ts
@@ -30,7 +30,7 @@
  * @param audioInputList list of registered audio devices in order of preference
  * @param videoInputList list of registered video devices in order of preference
  */
-function listMediaDevices(devices: MediaDeviceInfo[], audioInputId: string, videoInputId: string, audioInputList: MediaDeviceInfo[], videoInputList: MediaDeviceInfo[]) {
+function listMediaDevices(devices: MediaDeviceInfo[], audioInputId: string, videoInputId: string, audioInputList: MediaDeviceInfo[], videoInputList: MediaDeviceInfo[]): void {
 	const availableDevices = devices.map(device => device.deviceId).filter(id => id !== 'default')
 
 	const getDeviceString = (device: MediaDeviceInfo, index: number) => {
@@ -42,7 +42,7 @@ function listMediaDevices(devices: MediaDeviceInfo[], audioInputId: string, vide
 				return device.deviceId === videoInputId ? ' (selected)' : ''
 			}
 		}
-		return `    ${index + 1}. ${device.label || device.deviceId}` + isUnplugged + isSelected()
+		return `    ${index + 1}. ${device.label} | ${device.deviceId}` + isUnplugged + isSelected()
 	}
 
 	// eslint-disable-next-line no-console
@@ -63,8 +63,9 @@ ${videoInputList.map(getDeviceString).join('\n')}
  * @param devices list of available devices
  * @param inputList list of registered audio/video devices in order of preference
  * @param [fallbackId] id of currently selected input
+ * @return first available (plugged) device id or fallback
  */
-function getFirstAvailableDevice(devices: MediaDeviceInfo[], inputList: MediaDeviceInfo[], fallbackId?: string) {
+function getFirstAvailableMediaDevice(devices: MediaDeviceInfo[], inputList: MediaDeviceInfo[], fallbackId?: string): string | undefined {
 	const availableDevices = devices.map(device => device.deviceId).filter(id => id !== 'default')
 	return inputList.find(device => availableDevices.includes(device.deviceId))?.deviceId ?? fallbackId
 }
@@ -75,8 +76,9 @@ function getFirstAvailableDevice(devices: MediaDeviceInfo[], inputList: MediaDev
  * @param device device
  * @param devicesList list of registered devices in order of preference
  * @param promote whether device should be promoted (to be used in updateMediaDevicesPreferences)
+ * @return updated devices list
  */
-function registerNewDevice(device: MediaDeviceInfo, devicesList: MediaDeviceInfo[], promote: boolean = false) {
+function registerNewMediaDevice(device: MediaDeviceInfo, devicesList: MediaDeviceInfo[], promote: boolean = false): MediaDeviceInfo[] {
 	const newDevicesList = devicesList.slice()
 	console.debug('Registering new device:', device)
 
@@ -103,8 +105,9 @@ function registerNewDevice(device: MediaDeviceInfo, devicesList: MediaDeviceInfo
  * @param devices list of available devices
  * @param inputList list of registered audio/video devices in order of preference
  * @param inputId id of currently selected input
+ * @return updated devices list (null, if it has not been changed)
  */
-function promoteDevice(devices: MediaDeviceInfo[], inputList: MediaDeviceInfo[], inputId: string | null) {
+function promoteMediaDevice(devices: MediaDeviceInfo[], inputList: MediaDeviceInfo[], inputId: string | null) {
 	const newInputList = inputList.slice()
 
 	// Get the index of the first plugged device
@@ -146,6 +149,7 @@ function promoteDevice(devices: MediaDeviceInfo[], inputList: MediaDeviceInfo[],
  * @param devices list of available devices
  * @param audioInputList list of registered audio devices in order of preference
  * @param videoInputList list of registered video devices in order of preference
+ * @return object with updated devices lists (null, if they have not been changed)
  */
 function populateMediaDevicesPreferences(devices: MediaDeviceInfo[], audioInputList: MediaDeviceInfo[], videoInputList: MediaDeviceInfo[]) {
 	let newAudioInputList = null
@@ -155,12 +159,12 @@ function populateMediaDevicesPreferences(devices: MediaDeviceInfo[], audioInputL
 		if (device.kind === 'audioinput') {
 			// Add to the list of known devices
 			if (device.deviceId !== 'default' && !audioInputList.some(input => input.deviceId === device.deviceId)) {
-				newAudioInputList = registerNewDevice(device, audioInputList)
+				newAudioInputList = registerNewMediaDevice(device, audioInputList)
 			}
 		} else if (device.kind === 'videoinput') {
 			// Add to the list of known devices
 			if (device.deviceId !== 'default' && !videoInputList.some(input => input.deviceId === device.deviceId)) {
-				newVideoInputList = registerNewDevice(device, videoInputList)
+				newVideoInputList = registerNewMediaDevice(device, videoInputList)
 			}
 		}
 	}
@@ -185,13 +189,13 @@ function populateMediaDevicesPreferences(devices: MediaDeviceInfo[], audioInputL
  */
 function updateMediaDevicesPreferences(devices: MediaDeviceInfo[], audioInputId: string, videoInputId: string, audioInputList: MediaDeviceInfo[], videoInputList: MediaDeviceInfo[]) {
 	return {
-		newAudioInputList: promoteDevice(devices, audioInputList, audioInputId),
-		newVideoInputList: promoteDevice(devices, videoInputList, videoInputId),
+		newAudioInputList: promoteMediaDevice(devices, audioInputList, audioInputId),
+		newVideoInputList: promoteMediaDevice(devices, videoInputList, videoInputId),
 	}
 }
 
 export {
-	getFirstAvailableDevice,
+	getFirstAvailableMediaDevice,
 	listMediaDevices,
 	populateMediaDevicesPreferences,
 	updateMediaDevicesPreferences,
diff --git a/src/utils/webrtc/MediaDevicesManager.js b/src/utils/webrtc/MediaDevicesManager.js
index a3d658ddc67..5bbc20fdb81 100644
--- a/src/utils/webrtc/MediaDevicesManager.js
+++ b/src/utils/webrtc/MediaDevicesManager.js
@@ -21,7 +21,7 @@
 
 import BrowserStorage from '../../services/BrowserStorage.js'
 import {
-	getFirstAvailableDevice,
+	getFirstAvailableMediaDevice,
 	listMediaDevices,
 	populateMediaDevicesPreferences,
 	updateMediaDevicesPreferences,
@@ -212,14 +212,14 @@ MediaDevicesManager.prototype = {
 					// Couldn't find device by id
 					console.debug('Could not find previous audio device, falling back to default/first device in the list', BrowserStorage.getItem('audioInputId'), this.attributes.devices)
 				}
-				this.attributes.audioInputId = getFirstAvailableDevice(devices, this._preferenceAudioInputList, this._fallbackAudioInputId) ?? 'default'
+				this.attributes.audioInputId = getFirstAvailableMediaDevice(devices, this._preferenceAudioInputList, this._fallbackAudioInputId) ?? 'default'
 			}
 			if (this.attributes.videoInputId === undefined) {
 				if (BrowserStorage.getItem('videoInputId')) {
 					// Couldn't find device by id, try the label
 					console.debug('Could not find previous video device, falling back to default/first device in the list', BrowserStorage.getItem('videoInputId'), this.attributes.devices)
 				}
-				this.attributes.videoInputId = getFirstAvailableDevice(devices, this._preferenceVideoInputList, this._fallbackVideoInputId) ?? 'default'
+				this.attributes.videoInputId = getFirstAvailableMediaDevice(devices, this._preferenceVideoInputList, this._fallbackVideoInputId) ?? 'default'
 			}
 
 			// Trigger change events after all the devices are processed to
@@ -301,17 +301,17 @@ MediaDevicesManager.prototype = {
 
 		if (removedDevice.kind === 'audioinput') {
 			if (this._fallbackAudioInputId === removedDevice.deviceId) {
-				this._fallbackAudioInputId = getFirstAvailableDevice(this.attributes.devices, this._preferenceAudioInputList, undefined)
+				this._fallbackAudioInputId = getFirstAvailableMediaDevice(this.attributes.devices, this._preferenceAudioInputList, undefined)
 			}
 			if (this.attributes.audioInputId === removedDevice.deviceId) {
-				this.attributes.audioInputId = getFirstAvailableDevice(this.attributes.devices, this._preferenceAudioInputList, this._fallbackAudioInputId)
+				this.attributes.audioInputId = getFirstAvailableMediaDevice(this.attributes.devices, this._preferenceAudioInputList, this._fallbackAudioInputId)
 			}
 		} else if (removedDevice.kind === 'videoinput') {
 			if (this._fallbackVideoInputId === removedDevice.deviceId) {
-				this._fallbackVideoInputId = getFirstAvailableDevice(this.attributes.devices, this._preferenceVideoInputList, undefined)
+				this._fallbackVideoInputId = getFirstAvailableMediaDevice(this.attributes.devices, this._preferenceVideoInputList, undefined)
 			}
 			if (this.attributes.videoInputId === removedDevice.deviceId) {
-				this.attributes.videoInputId = getFirstAvailableDevice(this.attributes.devices, this._preferenceVideoInputList, this._fallbackVideoInputId)
+				this.attributes.videoInputId = getFirstAvailableMediaDevice(this.attributes.devices, this._preferenceVideoInputList, this._fallbackVideoInputId)
 			}
 		}
 	},
@@ -368,7 +368,7 @@ MediaDevicesManager.prototype = {
 		// any fallback previously set if the default device is added.
 		if (addedDevice.kind === 'audioinput') {
 			if (BrowserStorage.getItem('audioInputId') === addedDevice.deviceId
-				|| getFirstAvailableDevice(this.attributes.devices, this._preferenceAudioInputList, this._fallbackAudioInputId)) {
+				|| getFirstAvailableMediaDevice(this.attributes.devices, this._preferenceAudioInputList, this._fallbackAudioInputId)) {
 				this.attributes.audioInputId = addedDevice.deviceId
 			}
 			if (!this._fallbackAudioInputId || addedDevice.deviceId === 'default') {
@@ -376,7 +376,7 @@ MediaDevicesManager.prototype = {
 			}
 		} else if (addedDevice.kind === 'videoinput') {
 			if (BrowserStorage.getItem('videoInputId') === addedDevice.deviceId
-				|| getFirstAvailableDevice(this.attributes.devices, this._preferenceVideoInputList, this._fallbackVideoInputId)) {
+				|| getFirstAvailableMediaDevice(this.attributes.devices, this._preferenceVideoInputList, this._fallbackVideoInputId)) {
 				this.attributes.videoInputId = addedDevice.deviceId
 			}
 			if (!this._fallbackVideoInputId || addedDevice.deviceId === 'default') {

From 1898fd92ce3ff7dace2f33716cae0ee9175599b4 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 11 Apr 2024 16:37:26 +0200
Subject: [PATCH 5/5] fix(media): show media settings modal on click, if device
 is not available

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/CallView/shared/LocalAudioControlButton.vue | 2 +-
 src/components/CallView/shared/LocalVideoControlButton.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/CallView/shared/LocalAudioControlButton.vue b/src/components/CallView/shared/LocalAudioControlButton.vue
index 55eb41f41a6..b0aaa556c4a 100644
--- a/src/components/CallView/shared/LocalAudioControlButton.vue
+++ b/src/components/CallView/shared/LocalAudioControlButton.vue
@@ -149,7 +149,7 @@ export default {
 	methods: {
 		toggleAudio() {
 			if (!this.model.attributes.audioAvailable) {
-				emit('show-settings', {})
+				emit('talk:media-settings:show')
 				return
 			}
 
diff --git a/src/components/CallView/shared/LocalVideoControlButton.vue b/src/components/CallView/shared/LocalVideoControlButton.vue
index d46c465f9fb..bb5be3497ae 100644
--- a/src/components/CallView/shared/LocalVideoControlButton.vue
+++ b/src/components/CallView/shared/LocalVideoControlButton.vue
@@ -150,7 +150,7 @@ export default {
 			}
 
 			if (!this.model.attributes.videoAvailable) {
-				emit('show-settings', {})
+				emit('talk:media-settings:show')
 				return
 			}