Refactor mirrorAudio dropdown and move logic into

The logic is better abstracted away inside the class.

src/res/qml/audio_page/AudioPage.qml

@@ -47,22 +47,8 @@ MyStackViewPage {
 
         ColumnLayout {
             spacing: 18
-            RowLayout {
+            MirrorDeviceSelector {
-                MyText {
+                id: audioMirrorNameCombo
-                    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)
-                        }
-                    }
-                }
             }
             RowLayout {
                 MyText {
@@ -391,19 +377,7 @@ MyStackViewPage {
         }
 
         Component.onCompleted: {
-
-            var devs2 = ["<None>"]
-            var playbackDeviceCount = AudioTabController.getPlaybackDeviceCount()
-            for (var i = 0; i < playbackDeviceCount; i++) {
-                var name = AudioTabController.getPlaybackDeviceName(i)
-
-                devs2.push(name)
-            }
-
-
-            audioMirrorNameCombo.model = devs2
             if (AudioTabController.mirrorDeviceIndex < 0) {
-                audioMirrorNameCombo.currentIndex = 0
                 audioMirrorVolumeMinusButton.enabled = false
                 audioMirrorVolumeSlider.enabled = false
                 audioMirrorVolumePlusButton.enabled = false
@@ -415,8 +389,8 @@ MyStackViewPage {
                 audioMirrorMuteToggle.enabled = true
                 audioMirrorVolumeSlider.value = AudioTabController.mirrorVolume
                 audioMirrorMuteToggle.checked = AudioTabController.mirrorMuted
-                audioMirrorNameCombo.currentIndex = AudioTabController.mirrorDeviceIndex + 1
             }
+
             var devs3 = []
             var micDeviceCount = AudioTabController.getRecordingDeviceCount()
             for (var i = 0; i < micDeviceCount; i++) {
@@ -442,6 +416,8 @@ MyStackViewPage {
                 audioMuteProximitySensorToggle.checked = AudioTabController.micProximitySensorCanMute
                 audioMicNameCombo.currentIndex = AudioTabController.micDeviceIndex
             }
+
+
             reloadPttProfiles()
             reloadAudioProfiles()
             audioPttEnabledToggle.checked = AudioTabController.pttEnabled
@@ -457,7 +433,7 @@ MyStackViewPage {
 
             onMirrorDeviceIndexChanged: {
                 if (index < 0) {
-                    audioMirrorNameCombo.currentIndex = 0
+                    audioMirrorNameCombo.deviceIndex = 0
                     audioMirrorVolumeMinusButton.enabled = false
                     audioMirrorVolumeSlider.enabled = false
                     audioMirrorVolumePlusButton.enabled = false
@@ -467,7 +443,7 @@ MyStackViewPage {
                     audioMirrorVolumeSlider.enabled = true
                     audioMirrorVolumePlusButton.enabled = true
                     audioMirrorMuteToggle.enabled = true
-                    audioMirrorNameCombo.currentIndex = index + 1
+                    audioMirrorNameCombo.deviceIndex = index + 1
                 }
             }
             onMirrorVolumeChanged: {
@@ -540,18 +516,8 @@ MyStackViewPage {
 
             onPlaybackDeviceListChanged: {
 
-                var devs2 = ["<None>"]
-                var playbackDeviceCount = AudioTabController.getPlaybackDeviceCount()
-                for (var i = 0; i < playbackDeviceCount; i++) {
-                    var name = AudioTabController.getPlaybackDeviceName(i)
-
-                    devs2.push(name)
-                }
-
-
-                audioMirrorNameCombo.model = devs2
                 if (AudioTabController.mirrorDeviceIndex < 0) {
-                    audioMirrorNameCombo.currentIndex = 0
+                    audioMirrorNameCombo.deviceIndex = 0
                     audioMirrorVolumeMinusButton.enabled = false
                     audioMirrorVolumeSlider.enabled = false
                     audioMirrorVolumePlusButton.enabled = false
@@ -563,7 +529,7 @@ MyStackViewPage {
                     audioMirrorMuteToggle.enabled = true
                     audioMirrorVolumeSlider.value = AudioTabController.mirrorVolume
                     audioMirrorMuteToggle.checked = AudioTabController.mirrorMuted
-                    audioMirrorNameCombo.currentIndex = AudioTabController.mirrorDeviceIndex + 1
+                    audioMirrorNameCombo.deviceIndex = AudioTabController.mirrorDeviceIndex + 1
                 }
             }
             onRecordingDeviceListChanged: {

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

@@ -20,24 +20,25 @@ RowLayout {
         Layout.minimumWidth: 850
         Layout.preferredWidth: 850
         onActivated: {
-            if (currentIndex >= 0) {
+            if (deviceIndex >= 0) {
-                AudioTabController.setPlaybackDeviceIndex(currentIndex, false)
+                AudioTabController.setPlaybackDeviceIndex(deviceIndex, false)
             }
+            setShownAudioDevice(index)
         }
     }
     Component.onCompleted: {
         audioPlaybackNameCombo.devices = getAudioDeviceList()
-        audioPlaybackNameCombo.deviceIndex = AudioTabController.playbackDeviceIndex
+        setShownAudioDevice(AudioTabController.playbackDeviceIndex)
     }
 
     Connections {
         target: AudioTabController
         onPlaybackDeviceIndexChanged: {
-            audioPlaybackNameCombo.deviceIndex = index
+            setShownAudioDevice(index)
         }
         onPlaybackDeviceListChanged: {
             audioPlaybackNameCombo.devices = getAudioDeviceList()
-            audioPlaybackNameCombo.deviceIndex = AudioTabController.playbackDeviceIndex
+            setShownAudioDevice(AudioTabController.playbackDeviceIndex)
         }
     }
     function getAudioDeviceList() {
@@ -51,4 +52,13 @@ RowLayout {
         // index so we need to set devices first.
         return devices
     }
+    function setShownAudioDevice(index) {
+        // If incorrect device, show "None".
+        if (index < 0) {
+            deviceIndex = 0
+        }
+        else {
+            deviceIndex = index
+        }
+    }
 }

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

@@ -2,24 +2,73 @@ import QtQuick 2.7
 import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.3
 import matzman666.advsettings 1.0
-import ".." //common imports
+import "../.." //common imports
-import "dialog_boxes"
-import "device_selector"
 
 RowLayout {
+    id: audioMirrorNameCombo
+    // Text shown to the left.
+    property string deviceText: "Mirror Device: "
+
+    // The entries in the dropdown box.
+    property alias devices: selector.model
+    // The current index of the chosen device.
+    // Add one for use in the dropdown box because of the "None" entry.
+    property alias deviceIndex: selector.currentIndex
     MyText {
-        text: "Mirror Device: "
+        text: deviceText
         Layout.preferredWidth: 260
     }
     MyComboBox {
-        id: audioMirrorNameCombo
+        id: selector
         Layout.maximumWidth: 850
         Layout.minimumWidth: 850
         Layout.preferredWidth: 850
         onActivated: {
-            if (componentCompleted) {
+            if (deviceIndex >= 0) {
-                AudioTabController.setMirrorDeviceIndex(currentIndex - 1)
+                // The mirror device list contains a "None" entry, hence
+                // we need to subtract one to get the real index.
+                AudioTabController.setMirrorDeviceIndex(deviceIndex - 1)
             }
         }
     }
+    Component.onCompleted: {
+        // Populate dropdown with devices
+        audioMirrorNameCombo.devices = getAudioDeviceList()
+
+        var mirrorIndex = AudioTabController.mirrorDeviceIndex
+        setShownAudioDevice(mirrorIndex)
+
+    }
+    Connections {
+        target: AudioTabController
+        onMirrorDeviceIndexChanged: {
+            setShownAudioDevice(index)
+        }
+        onPlaybackDeviceListChanged: {
+            audioPlaybackNameCombo.devices = getAudioDeviceList()
+            setShownAudioDevice(AudioTabController.playbackDeviceIndex)
+        }
+    }
+    function getAudioDeviceList() {
+        var devices = ["<None>"]
+        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
+    }
+    function setShownAudioDevice(index) {
+        // If incorrect device, show "None".
+        if (index < 0) {
+            deviceIndex = 0
+        }
+        else {
+            // The mirror device list contains a "None" entry
+            // hence we need to add one to show the correct entry.
+            deviceIndex = index + 1
+        }
+    }
 }