Refactor microphone volume slider into separate file, clean up AudioPage

An if statement hadn't been transferred to the mirrorVolume slider,
hence it was moved now.

src/res/qml/audio_page/AudioPage.qml

@@ -10,9 +10,6 @@ MyStackViewPage {
     width: 1200
     headerText: "Audio Settings"
 
-    property bool componentCompleted: false
-
-
     AudioMessageDialog {
         id: audioMessageDialog
     }
@@ -49,73 +46,7 @@ MyStackViewPage {
             id: audioMirrorNameCombo
         }
 
-        ColumnLayout {
+        MicVolumeSlider {
-            spacing: 18
-            MicDeviceSelector {
-                id: audioMicNameCombo
-            }
-            RowLayout {
-                MyText {
-                    text: "Microphone Volume:"
-                    Layout.preferredWidth: 260
-                }
-
-                MyPushButton2 {
-                    id: audioMicVolumeMinusButton
-                    text: "-"
-                    Layout.preferredWidth: 40
-                    onClicked: {
-                        audioMicVolumeSlider.value -= 0.1
-                    }
-                }
-
-                MySlider {
-                    id: audioMicVolumeSlider
-                    from: 0.0
-                    to: 1.0
-                    stepSize: 0.01
-                    value: 1.0
-                    Layout.fillWidth: true
-                    onPositionChanged: {
-                        var val = this.position * 100
-                        audioMicVolumeText.text = Math.round(val) + "%"
-                    }
-                    onValueChanged: {
-                        AudioTabController.setMicVolume(this.value.toFixed(2))
-                    }
-                }
-
-                MyPushButton2 {
-                    id: audioMicVolumePlusButton
-                    text: "+"
-                    Layout.preferredWidth: 40
-                    onClicked: {
-                        audioMicVolumeSlider.value += 0.1
-                    }
-                }
-
-                MyText {
-                    id: audioMicVolumeText
-                    text: "100%"
-                    Layout.preferredWidth: 85
-                    horizontalAlignment: Text.AlignRight
-                }
-
-                MyPushButton2 {
-                    id: audioMicMuteToggle
-                    Layout.leftMargin: 12
-                    checkable: true
-                    contentItem: Image {
-                        source: parent.checked ? "mic_off.svg" : "mic_on.svg"
-                        sourceSize.width: 32
-                        sourceSize.height: 32
-                        anchors.fill: parent
-                    }
-                    onCheckedChanged: {
-                        AudioTabController.setMicMuted(checked)
-                    }
-                }
-            }
         }
         ColumnLayout {
             spacing: 18
@@ -302,23 +233,11 @@ MyStackViewPage {
 
         Component.onCompleted: {
             if (AudioTabController.micDeviceIndex < 0) {
-                audioMicVolumeMinusButton.enabled = false
-                audioMicVolumeSlider.enabled = false
-                audioMicVolumePlusButton.enabled = false
-                audioMicMuteToggle.enabled = false
                 audioMuteProximitySensorToggle.enabled = false
             } else {
-                audioMicVolumeMinusButton.enabled = true
-                audioMicVolumeSlider.enabled = true
-                audioMicVolumePlusButton.enabled = true
-                audioMicMuteToggle.enabled = true
                 audioMuteProximitySensorToggle.enabled = true
-                audioMicVolumeSlider.value = AudioTabController.micVolume
-                audioMicMuteToggle.checked = AudioTabController.micMuted
                 audioMuteProximitySensorToggle.checked = AudioTabController.micProximitySensorCanMute
             }
-
-
             reloadPttProfiles()
             reloadAudioProfiles()
             audioPttEnabledToggle.checked = AudioTabController.pttEnabled
@@ -326,30 +245,10 @@ MyStackViewPage {
             audioPttRightControllerToggle.checked = AudioTabController.pttRightControllerEnabled
             audioPttShowNotificationToggle.checked = AudioTabController.pttShowNotification
             audioPttReverseToggle.checked = AudioTabController.micReversePtt
-            componentCompleted = true
         }
 
         Connections {
             target: AudioTabController
-            onMicDeviceIndexChanged: {
-                if (index < 0) {
-                    audioMicVolumeMinusButton.enabled = false
-                    audioMicVolumeSlider.enabled = false
-                    audioMicVolumePlusButton.enabled = false
-                    audioMicMuteToggle.enabled = false
-                } else {
-                    audioMicVolumeMinusButton.enabled = true
-                    audioMicVolumeSlider.enabled = true
-                    audioMicVolumePlusButton.enabled = true
-                    audioMicMuteToggle.enabled = true
-                }
-            }
-            onMicVolumeChanged: {
-                audioMicVolumeSlider.value = AudioTabController.micVolume
-            }
-            onMicMutedChanged: {
-                audioMicMuteToggle.checked = AudioTabController.micMuted
-            }
             onMicProximitySensorCanMuteChanged: {
                 audioMuteProximitySensorToggle.checked = AudioTabController.micProximitySensorCanMute
             }
@@ -389,41 +288,6 @@ MyStackViewPage {
             onDefaultProfileDisplay:{
                 audioProfileComboBox.currentIndex = AudioTabController.getDefaultAudioProfileIndex() + 1
             }
-
-
-            onPlaybackDeviceListChanged: {
-
-                if (AudioTabController.mirrorDeviceIndex < 0) {
-                    audioMirrorNameCombo.deviceIndex = 0
-                    audioMirrorVolumeMinusButton.enabled = false
-                    audioMirrorVolumeSlider.enabled = false
-                    audioMirrorVolumePlusButton.enabled = false
-                    audioMirrorMuteToggle.enabled = false
-                } else {
-                    audioMirrorVolumeMinusButton.enabled = true
-                    audioMirrorVolumeSlider.enabled = true
-                    audioMirrorVolumePlusButton.enabled = true
-                    audioMirrorMuteToggle.enabled = true
-                    audioMirrorVolumeSlider.value = AudioTabController.mirrorVolume
-                    audioMirrorMuteToggle.checked = AudioTabController.mirrorMuted
-                    audioMirrorNameCombo.deviceIndex = AudioTabController.mirrorDeviceIndex + 1
-                }
-            }
-            onRecordingDeviceListChanged: {
-                if (AudioTabController.micDeviceIndex < 0) {
-                    audioMicVolumeMinusButton.enabled = false
-                    audioMicVolumeSlider.enabled = false
-                    audioMicVolumePlusButton.enabled = false
-                    audioMicMuteToggle.enabled = false
-                } else {
-                    audioMicVolumeMinusButton.enabled = true
-                    audioMicVolumeSlider.enabled = true
-                    audioMicVolumePlusButton.enabled = true
-                    audioMicMuteToggle.enabled = true
-                    audioMicVolumeSlider.value = AudioTabController.micVolume
-                    audioMicMuteToggle.checked = AudioTabController.micMuted
-                }
-            }
         }
     }
 

src/res/qml/audio_page/device_selector/MicVolumeSlider.qml

@@ -0,0 +1,130 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.3
+import matzman666.advsettings 1.0
+import "../.." //common imports
+
+ColumnLayout {
+    spacing: 18
+    MicDeviceSelector {
+        id: audioMicNameCombo
+    }
+    RowLayout {
+        MyText {
+            text: "Microphone Volume:"
+            Layout.preferredWidth: 260
+        }
+        
+        MyPushButton2 {
+            id: audioMicVolumeMinusButton
+            text: "-"
+            Layout.preferredWidth: 40
+            onClicked: {
+                audioMicVolumeSlider.value -= 0.1
+            }
+        }
+        
+        MySlider {
+            id: audioMicVolumeSlider
+            from: 0.0
+            to: 1.0
+            stepSize: 0.01
+            value: 1.0
+            Layout.fillWidth: true
+            onPositionChanged: {
+                var val = this.position * 100
+                audioMicVolumeText.text = Math.round(val) + "%"
+            }
+            onValueChanged: {
+                AudioTabController.setMicVolume(this.value.toFixed(2))
+            }
+        }
+        
+        MyPushButton2 {
+            id: audioMicVolumePlusButton
+            text: "+"
+            Layout.preferredWidth: 40
+            onClicked: {
+                audioMicVolumeSlider.value += 0.1
+            }
+        }
+        
+        MyText {
+            id: audioMicVolumeText
+            text: "100%"
+            Layout.preferredWidth: 85
+            horizontalAlignment: Text.AlignRight
+        }
+        
+        MyPushButton2 {
+            id: audioMicMuteToggle
+            Layout.leftMargin: 12
+            checkable: true
+            contentItem: Image {
+                source: parent.checked ? "../mic_off.svg" : "../mic_on.svg"
+                sourceSize.width: 32
+                sourceSize.height: 32
+                anchors.fill: parent
+            }
+            onCheckedChanged: {
+                AudioTabController.setMicMuted(checked)
+            }
+        }
+    }
+    Component.onCompleted: {
+        if (AudioTabController.micDeviceIndex < 0) {
+            audioMicVolumeMinusButton.enabled = false
+            audioMicVolumeSlider.enabled = false
+            audioMicVolumePlusButton.enabled = false
+            audioMicMuteToggle.enabled = false
+        }
+        else {
+            audioMicVolumeMinusButton.enabled = true
+            audioMicVolumeSlider.enabled = true
+            audioMicVolumePlusButton.enabled = true
+            audioMicMuteToggle.enabled = true
+            audioMicVolumeSlider.value = AudioTabController.micVolume
+            audioMicMuteToggle.checked = AudioTabController.micMuted
+        }
+    }
+    Connections {
+        target: AudioTabController
+        onMicDeviceIndexChanged: {
+            if (index < 0) {
+                audioMicVolumeMinusButton.enabled = false
+                audioMicVolumeSlider.enabled = false
+                audioMicVolumePlusButton.enabled = false
+                audioMicMuteToggle.enabled = false
+            } else {
+                audioMicVolumeMinusButton.enabled = true
+                audioMicVolumeSlider.enabled = true
+                audioMicVolumePlusButton.enabled = true
+                audioMicMuteToggle.enabled = true
+            }
+        }
+        onMicVolumeChanged: {
+            audioMicVolumeSlider.value = AudioTabController.micVolume
+        }
+        onMicMutedChanged: {
+            audioMicMuteToggle.checked = AudioTabController.micMuted
+        }
+        onPlaybackDeviceListChanged: {
+
+        }
+        onRecordingDeviceListChanged: {
+            if (AudioTabController.micDeviceIndex < 0) {
+                audioMicVolumeMinusButton.enabled = false
+                audioMicVolumeSlider.enabled = false
+                audioMicVolumePlusButton.enabled = false
+                audioMicMuteToggle.enabled = false
+            } else {
+                audioMicVolumeMinusButton.enabled = true
+                audioMicVolumeSlider.enabled = true
+                audioMicVolumePlusButton.enabled = true
+                audioMicMuteToggle.enabled = true
+                audioMicVolumeSlider.value = AudioTabController.micVolume
+                audioMicMuteToggle.checked = AudioTabController.micMuted
+            }
+        }
+    }
+}

src/res/qml/audio_page/device_selector/MirrorVolumeSlider.qml

@@ -110,5 +110,20 @@ ColumnLayout {
         onMirrorMutedChanged: {
             audioMirrorMuteToggle.checked = AudioTabController.mirrorMuted
         }
+        onPlaybackDeviceListChanged: {
+            if (AudioTabController.mirrorDeviceIndex < 0) {
+                audioMirrorVolumeMinusButton.enabled = false
+                audioMirrorVolumeSlider.enabled = false
+                audioMirrorVolumePlusButton.enabled = false
+                audioMirrorMuteToggle.enabled = false
+            } else {
+                audioMirrorVolumeMinusButton.enabled = true
+                audioMirrorVolumeSlider.enabled = true
+                audioMirrorVolumePlusButton.enabled = true
+                audioMirrorMuteToggle.enabled = true
+                audioMirrorVolumeSlider.value = AudioTabController.mirrorVolume
+                audioMirrorMuteToggle.checked = AudioTabController.mirrorMuted
+            }
+        }
     }
 }