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>
nextcloud · Mar 28, 2024 · 68e7df9 · 68e7df9
1 parent f93be1d
commit 68e7df9
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 1 deletion.
diff --git a/src/components/MediaSettings/MediaDevicesSelector.vue b/src/components/MediaSettings/MediaDevicesSelector.vue
@@ -37,22 +37,33 @@
 			: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 {
 
 	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
@@ -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
@@ -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
@@ -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,