Refactor audio device selector into separate file

For now the way to go is to have the mirror device and audio device
selectors as different components instead of trying to inherit from a
single component and filling in the necessary function calls.

This is because some function calls are nested inside other components
and would be very messy. Perhaps in future commits the selectors will
inherit from a single parent.

src/res/qml/audio_page/AudioPage.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.3
 import matzman666.advsettings 1.0
 import ".." //common imports
 import "dialog_boxes"
+import "device_selector"
 
 MyStackViewPage {
     width: 1200
@@ -40,22 +41,8 @@ MyStackViewPage {
     content: ColumnLayout {
         spacing: 24
 
-        RowLayout {
-            MyText {
-                text: "Playback Device: "
-                Layout.preferredWidth: 260
-            }
-            MyComboBox {
-                id: audioPlaybackNameCombo
-                Layout.maximumWidth: 850
-                Layout.minimumWidth: 850
-                Layout.preferredWidth: 850
-                onActivated: {
-                    if (componentCompleted) {
-                        AudioTabController.setPlaybackDeviceIndex(currentIndex)
-                    }
-                }
-            }
+        AudioDeviceSelector {
+            id: audioPlaybackNameCombo
         }
 
         ColumnLayout {
@@ -404,16 +391,16 @@ MyStackViewPage {
         }
 
         Component.onCompleted: {
-            var devs1 = []
+
             var devs2 = ["<None>"]
             var playbackDeviceCount = AudioTabController.getPlaybackDeviceCount()
             for (var i = 0; i < playbackDeviceCount; i++) {
                 var name = AudioTabController.getPlaybackDeviceName(i)
-                devs1.push(name)
+
                 devs2.push(name)
             }
-            audioPlaybackNameCombo.model = devs1
-            audioPlaybackNameCombo.currentIndex = AudioTabController.playbackDeviceIndex
+
+
             audioMirrorNameCombo.model = devs2
             if (AudioTabController.mirrorDeviceIndex < 0) {
                 audioMirrorNameCombo.currentIndex = 0
@@ -467,9 +454,7 @@ MyStackViewPage {
 
         Connections {
             target: AudioTabController
-            onPlaybackDeviceIndexChanged: {
-                audioPlaybackNameCombo.currentIndex = index
-            }
+
             onMirrorDeviceIndexChanged: {
                 if (index < 0) {
                     audioMirrorNameCombo.currentIndex = 0
@@ -554,16 +539,16 @@ MyStackViewPage {
 
 
             onPlaybackDeviceListChanged: {
-                var devs1 = []
+
                 var devs2 = ["<None>"]
                 var playbackDeviceCount = AudioTabController.getPlaybackDeviceCount()
                 for (var i = 0; i < playbackDeviceCount; i++) {
                     var name = AudioTabController.getPlaybackDeviceName(i)
-                    devs1.push(name)
+
                     devs2.push(name)
                 }
-                audioPlaybackNameCombo.model = devs1
-                audioPlaybackNameCombo.currentIndex = AudioTabController.playbackDeviceIndex
+
+
                 audioMirrorNameCombo.model = devs2
                 if (AudioTabController.mirrorDeviceIndex < 0) {
                     audioMirrorNameCombo.currentIndex = 0

src/res/qml/audio_page/device_selector/AudioDeviceSelector.qml

@@ -0,0 +1,54 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.3
+import matzman666.advsettings 1.0
+import "../.." // common imports
+
+RowLayout {
+    id: audioPlaybackNameCombo
+    property string deviceText: "Audio Device: "
+
+    property alias devices: selector.model
+    property alias deviceIndex: selector.currentIndex
+    MyText {
+        text: deviceText
+        Layout.preferredWidth: 260
+    }
+    MyComboBox {
+        id: selector
+        Layout.maximumWidth: 850
+        Layout.minimumWidth: 850
+        Layout.preferredWidth: 850
+        onActivated: {
+            if (currentIndex >= 0) {
+                AudioTabController.setPlaybackDeviceIndex(currentIndex, false)
+            }
+        }
+    }
+    Component.onCompleted: {
+        audioPlaybackNameCombo.devices = getAudioDeviceList()
+        audioPlaybackNameCombo.deviceIndex = AudioTabController.playbackDeviceIndex
+    }
+
+    Connections {
+        target: AudioTabController
+        onPlaybackDeviceIndexChanged: {
+            audioPlaybackNameCombo.deviceIndex = index
+        }
+        onPlaybackDeviceListChanged: {
+            audioPlaybackNameCombo.devices = getAudioDeviceList()
+            audioPlaybackNameCombo.deviceIndex = AudioTabController.playbackDeviceIndex
+        }
+    }
+    function getAudioDeviceList() {
+        var devices = []
+        var playbackDevicesCount = AudioTabController.getPlaybackDeviceCount()
+        for (var i = 0; i < playbackDevicesCount; i++) {
+            var deviceName = AudioTabController.getPlaybackDeviceName(i)
+            devices.push(deviceName)
+        }
+        // Setting the model zeroes out the
+        // index so we need to set devices first.
+        return devices
+    }
+}

src/res/qml/audio_page/device_selector/MirrorDeviceSelector.qml

@@ -0,0 +1,25 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.3
+import matzman666.advsettings 1.0
+import ".." //common imports
+import "dialog_boxes"
+import "device_selector"
+
+RowLayout {
+    MyText {
+        text: "Mirror Device: "
+        Layout.preferredWidth: 260
+    }
+    MyComboBox {
+        id: audioMirrorNameCombo
+        Layout.maximumWidth: 850
+        Layout.minimumWidth: 850
+        Layout.preferredWidth: 850
+        onActivated: {
+            if (componentCompleted) {
+                AudioTabController.setMirrorDeviceIndex(currentIndex - 1)
+            }
+        }
+    }
+}