QML settings sound hardware

.pre-commit-config.yaml

@@ -126,7 +126,7 @@ repos:
       - id: prettier
         types: [yaml]
   - repo: https://github.com/qarmin/qml_formatter.git
-    rev: 16f651d727652dffff92678f4b602df9bfb45eb7 # No release tag yet including #7 fix
+    rev: 706250038bb565f4c630ca3aab09f764faabae67 # No release tag yet including #9 fix
     hooks:
       - id: qml_formatter
   - repo: https://github.com/BlankSpruce/gersemi

CMakeLists.txt

@@ -3455,6 +3455,7 @@ if(QML)
       src/qml/qmlwaveformrenderer.cpp
       src/qml/qmlsettingparameter.cpp
       src/qml/qmltrackproxy.cpp
+      src/qml/qmlsoundmanagerproxy.cpp
       src/waveform/renderers/allshader/digitsrenderer.cpp
       src/waveform/renderers/allshader/waveformrenderbeat.cpp
       src/waveform/renderers/allshader/waveformrenderer.cpp
@@ -4120,6 +4121,9 @@ if(RUBBERBAND)
   find_package(rubberband REQUIRED)
   target_link_libraries(mixxx-lib PRIVATE rubberband::rubberband)
   target_compile_definitions(mixxx-lib PUBLIC __RUBBERBAND__)
+  if(QML)
+    target_compile_definitions(mixxx-qml-lib PUBLIC __RUBBERBAND__)
+  endif()
   target_sources(
     mixxx-lib
     PRIVATE

res/qml/ComboBox.qml

@@ -1,13 +1,16 @@
 import "." as Skin
 import QtQuick 2.12
 import QtQuick.Controls 2.12
+import QtQuick.Shapes
+import Qt5Compat.GraphicalEffects
 import "Theme"
 
 ComboBox {
     id: root
 
     property alias popupWidth: popup.width
     property bool clip: false
+    property int popupMaxItem: 3
 
     background: Skin.EmbeddedBackground {
     }
@@ -17,28 +20,31 @@ ComboBox {
 
         required property int index
 
-        width: parent.width
         highlighted: root.highlightedIndex === this.index
         text: root.textAt(this.index)
+        padding: 4
+        verticalPadding: 8
 
         contentItem: Text {
             text: itemDlgt.text
+            font: root.font
             color: Theme.deckTextColor
             elide: Text.ElideRight
             verticalAlignment: Text.AlignVCenter
         }
 
         background: Rectangle {
             radius: 5
-            border.width: itemDlgt.highlighted ? 1 : 0
-            border.color: Theme.deckLineColor
+            border.width: 1
+            border.color: itemDlgt.highlighted ? Theme.deckLineColor : "transparent"
             color: "transparent"
         }
     }
 
+    indicator.width: 20
+
     contentItem: Text {
         leftPadding: 5
-        rightPadding: root.indicator.width + root.spacing
         text: root.displayText
         font: root.font
         color: Theme.deckTextColor
@@ -49,21 +55,71 @@ ComboBox {
 
     popup: Popup {
         id: popup
-        y: root.height
-        width: root.width
-        implicitHeight: contentItem.implicitHeight
+        y: root.height/2
+        width: root.width - root.indicator.width / 2
+        x: root.indicator.width / 2
+        height: root.indicator.implicitHeight*Math.min(root.popupMaxItem, root.count) + root.indicator.width
+
+        padding: 0
+
+        contentItem: Item {
+            Item {
+                id: content
+                anchors.fill: parent
+                Shape {
+                    id: arrow
+                    anchors.top: parent.top
+                    anchors.right: parent.right
+                    anchors.rightMargin: 3
+                    width: root.indicator.width-4
+                    height: width
+                    antialiasing: true
+                    layer.enabled: true
+                    layer.samples: 4
+                    ShapePath {
+                        fillColor: Theme.embeddedBackgroundColor
+                        strokeColor: Theme.deckBackgroundColor
+                        strokeWidth: 2
+                        startX: arrow.width/2; startY: 0
+                        fillRule: ShapePath.WindingFill
+                        capStyle: ShapePath.RoundCap
+                        PathLine { x: root.indicator.width; y: root.indicator.width }
+                        PathLine { x: 0; y: root.indicator.width }
+                        PathLine { x: (root.indicator.width) / 2; y: 0 }
+                    }
+                }
+                Skin.EmbeddedBackground {
+                    anchors.topMargin: root.indicator.width-6
+                    anchors.fill: parent
+                    ListView {
+                        clip: true
+
+                        anchors.fill: parent
 
-        contentItem: ListView {
-            clip: true
-            implicitHeight: contentHeight
-            model: root.popup.visible ? root.delegateModel : null
-            currentIndex: root.highlightedIndex
+                        bottomMargin: 0
+                        leftMargin: 0
+                        rightMargin: 0
+                        topMargin: 0
 
-            ScrollIndicator.vertical: ScrollIndicator {
+                        model: root.popup.visible ? root.delegateModel : null
+                        currentIndex: root.highlightedIndex
+
+                        ScrollBar.vertical: ScrollBar {
+                            policy: ScrollBar.AlwaysOn
+                        }
+                    }
+                }
+            }
+            DropShadow {
+                anchors.fill: parent
+                horizontalOffset: 0
+                verticalOffset: 0
+                radius: 8.0
+                color: "#000000"
+                source: content
             }
         }
 
-        background: Skin.EmbeddedBackground {
-        }
+        background: Item {}
     }
 }

res/qml/ControlSlider.qml

@@ -2,15 +2,19 @@ import "." as Skin
 import Mixxx 1.0 as Mixxx
 import QtQuick 2.12
 
-Skin.Slider {
-    property alias group: control.group
-    property alias key: control.key
+Skin.Fader {
+    id: root
+
+    required property string group
+    required property string key
 
     value: control.parameter
     onMoved: control.parameter = value
 
     Mixxx.ControlProxy {
         id: control
+        group: root.group
+        key: root.key
     }
 
     TapHandler {

res/qml/Fader.qml

@@ -0,0 +1,49 @@
+import Mixxx.Controls 1.0 as MixxxControls
+import Qt5Compat.GraphicalEffects
+import QtQuick 2.12
+import "Theme"
+
+MixxxControls.Slider {
+    id: root
+
+    property alias fg: handleImage.source
+    property alias bg: backgroundImage.source
+
+    bar: true
+    barMargin: 10
+    implicitWidth: backgroundImage.implicitWidth
+    implicitHeight: backgroundImage.implicitHeight
+
+    Image {
+        id: handleImage
+
+        visible: false
+        source: Theme.imgSliderHandle
+        fillMode: Image.PreserveAspectFit
+    }
+
+    handle: Item {
+        id: handleItem
+
+        width: handleImage.paintedWidth
+        height: handleImage.paintedHeight
+        x: root.horizontal ? (root.visualPosition * (root.width - width)) : ((root.width - width) / 2)
+        y: root.vertical ? (root.visualPosition * (root.height - height)) : ((root.height - height) / 2)
+
+        DropShadow {
+            source: handleImage
+            width: parent.width + 5
+            height: parent.height + 5
+            radius: 5
+            verticalOffset: 5
+            color: "#80000000"
+        }
+    }
+
+    background: Image {
+        id: backgroundImage
+
+        anchors.fill: parent
+        anchors.margins: root.barMargin
+    }
+}