fix(mixins): migrate devices mixin

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

src/components/MediaDevicesPreview.vue

@@ -45,7 +45,7 @@
 				:audio-preview-available="audioPreviewAvailable"
 				:audio-enabled="true"
 				:current-volume="currentVolume"
-				:volume-threshold="volumeThreshold"
+				:volume-threshold="currentThreshold"
 				:size="64" />
 		</div>
 		<MediaDevicesSelector kind="videoinput"
@@ -80,14 +80,16 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+
 import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
 import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
 import VideoOff from 'vue-material-design-icons/VideoOff.vue'
 
 import MediaDevicesSelector from './MediaDevicesSelector.vue'
 import VolumeIndicator from './VolumeIndicator/VolumeIndicator.vue'
 
-import { devices } from '../mixins/devices.js'
+import { useDevices } from '../composables/useDevices.js'
 
 export default {
 
@@ -101,7 +103,37 @@ export default {
 		VolumeIndicator,
 	},
 
-	mixins: [devices],
+	setup() {
+		const video = ref(null)
+		const {
+			devices,
+			currentVolume,
+			currentThreshold,
+			audioPreviewAvailable,
+			videoPreviewAvailable,
+			audioInputId,
+			videoInputId,
+			audioStream,
+			audioStreamError,
+			videoStream,
+			videoStreamError,
+		} = useDevices(video, true)
+
+		return {
+			video,
+			devices,
+			currentVolume,
+			currentThreshold,
+			audioPreviewAvailable,
+			videoPreviewAvailable,
+			audioInputId,
+			videoInputId,
+			audioStream,
+			audioStreamError,
+			videoStream,
+			videoStreamError,
+		}
+	},
 
 	computed: {
 		audioStreamErrorMessage() {

src/components/MediaSettings/MediaSettings.vue

@@ -62,7 +62,7 @@
 							<VolumeIndicator :audio-preview-available="audioPreviewAvailable"
 								:audio-enabled="audioOn"
 								:current-volume="currentVolume"
-								:volume-threshold="volumeThreshold"
+								:volume-threshold="currentThreshold"
 								overlay-muted-color="#888888" />
 						</template>
 					</NcButton>
@@ -201,6 +201,8 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+
 import Bell from 'vue-material-design-icons/Bell.vue'
 import BellOff from 'vue-material-design-icons/BellOff.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
@@ -226,9 +228,9 @@ import MediaDevicesSelector from '../MediaDevicesSelector.vue'
 import CallButton from '../TopBar/CallButton.vue'
 import VolumeIndicator from '../VolumeIndicator/VolumeIndicator.vue'
 
+import { useDevices } from '../../composables/useDevices.js'
 import { useIsInCall } from '../../composables/useIsInCall.js'
 import { AVATAR, CALL, PARTICIPANT, VIRTUAL_BACKGROUND } from '../../constants.js'
-import { devices } from '../../mixins/devices.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import { useGuestNameStore } from '../../stores/guestName.js'
 import { useSettingsStore } from '../../stores/settings.js'
@@ -265,8 +267,6 @@ export default {
 		VideoBackgroundEditor,
 	},
 
-	mixins: [devices],
-
 	props: {
 		recordingConsentGiven: {
 			type: Boolean,
@@ -277,14 +277,41 @@ export default {
 	emits: ['update:recording-consent-given'],
 
 	setup() {
+		const video = ref(null)
 		const isInCall = useIsInCall()
 		const guestNameStore = useGuestNameStore()
 		const settingsStore = useSettingsStore()
+
+		const {
+			devices,
+			currentVolume,
+			currentThreshold,
+			audioPreviewAvailable,
+			videoPreviewAvailable,
+			audioInputId,
+			videoInputId,
+			initializeDevices,
+			stopDevices,
+			virtualBackground,
+		} = useDevices(video, false)
+
 		return {
 			AVATAR,
 			isInCall,
 			guestNameStore,
 			settingsStore,
+			video,
+			// useDevices
+			devices,
+			currentVolume,
+			currentThreshold,
+			audioPreviewAvailable,
+			videoPreviewAvailable,
+			audioInputId,
+			videoInputId,
+			initializeDevices,
+			stopDevices,
+			virtualBackground,
 		}
 	},
 
@@ -427,9 +454,9 @@ export default {
 					}
 				}
 
-				this.initializeDevicesMixin()
+				this.initializeDevices()
 			} else {
-				this.stopDevicesMixin()
+				this.stopDevices()
 			}
 		},
 

src/components/SettingsDialog/SettingsDialog.vue

@@ -28,7 +28,7 @@
 		<NcAppSettingsSection id="devices"
 			:name="t('spreed', 'Choose devices')"
 			class="app-settings-section">
-			<MediaDevicesPreview initialize-on-mounted />
+			<MediaDevicesPreview />
 		</NcAppSettingsSection>
 		<NcAppSettingsSection v-if="!isGuest"
 			id="attachments"