Merge remote-tracking branch 'upstream/main' into effects_refactoring

74 files changed, 5925 insertions, 0 deletions

diff --git a/res/qml/AuxiliaryUnit.qml b/res/qml/AuxiliaryUnit.qml
new file mode 100644
index 0000000000..62eb11118f
--- /dev/null
+++ b/res/qml/AuxiliaryUnit.qml
@@ -0,0 +1,119 @@
+import "." as Skin
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+import "Theme"
+
+Row {
+    id: root
+
+    property int unitNumber // required
+    property string group: "[Auxiliary" + unitNumber + "]"
+
+    spacing: 5
+
+    Skin.VuMeter {
+        id: vuMeter
+
+        group: root.group
+        key: "VuMeter"
+        width: 4
+        height: parent.height
+    }
+
+    Rectangle {
+        id: gainKnobFrame
+
+        width: 52
+        height: width
+        color: Theme.knobBackgroundColor
+        radius: 5
+
+        Skin.ControlKnob {
+            id: gainKnob
+
+            anchors.centerIn: parent
+            width: 48
+            height: width
+            arcStart: Knob.ArcStart.Minimum
+            group: root.group
+            key: "pregain"
+            color: Theme.gainKnobColor
+        }
+
+    }
+
+    Column {
+        Skin.SectionText {
+            width: parent.width
+            height: root.height / 2
+            text: "AUX " + root.unitNumber
+        }
+
+        Skin.ControlButton {
+            id: pflButton
+
+            group: root.group
+            key: "pfl"
+            text: "PFL"
+            activeColor: Theme.pflActiveButtonColor
+            toggleable: true
+        }
+
+    }
+
+    Skin.EmbeddedBackground {
+        id: embedded
+
+        height: parent.height
+        width: 56
+
+        Skin.OrientationToggleButton {
+            id: orientationButton
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.top
+            anchors.bottom: parent.verticalCenter
+            group: root.group
+            key: "orientation"
+            color: Theme.crossfaderOrientationColor
+        }
+
+        Skin.InfoBarButton {
+            id: fx1Button
+
+            anchors.left: parent.left
+            anchors.right: parent.horizontalCenter
+            anchors.top: parent.verticalCenter
+            anchors.bottom: parent.bottom
+            group: "[EffectRack1_EffectUnit1]"
+            key: "group_" + root.group + "_enable"
+            activeColor: Theme.deckActiveColor
+
+            foreground: Skin.EmbeddedText {
+                anchors.centerIn: parent
+                text: "FX1"
+            }
+
+        }
+
+        Skin.InfoBarButton {
+            group: "[EffectRack1_EffectUnit2]"
+            anchors.left: parent.horizontalCenter
+            anchors.right: parent.right
+            anchors.top: parent.verticalCenter
+            anchors.bottom: parent.bottom
+            key: "group_" + root.group + "_enable"
+            activeColor: Theme.deckActiveColor
+
+            foreground: Skin.EmbeddedText {
+                anchors.centerIn: parent
+                text: "FX2"
+            }
+
+        }
+
+    }
+
+}
diff --git a/res/qml/Button.qml b/res/qml/Button.qml
new file mode 100644
index 0000000000..133ce7e213
--- /dev/null
+++ b/res/qml/Button.qml
@@ -0,0 +1,128 @@
+import "." as Skin
+import QtGraphicalEffects 1.12
+import QtQml 2.12
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import "Theme"
+
+AbstractButton {
+    id: root
+
+    property color normalColor: Theme.buttonNormalColor
+    property color activeColor // required
+    property color pressedColor: activeColor
+    property bool highlight: false
+
+    implicitWidth: 52
+    implicitHeight: 26
+    states: [
+        State {
+            name: "pressed"
+            when: root.pressed
+
+            PropertyChanges {
+                target: backgroundImage
+                source: Theme.imgButtonPressed
+            }
+
+            PropertyChanges {
+                target: label
+                color: root.pressedColor
+            }
+
+            PropertyChanges {
+                target: labelGlow
+                visible: true
+            }
+
+        },
+        State {
+            name: "active"
+            when: (root.highlight || root.checked) && !root.pressed
+
+            PropertyChanges {
+                target: backgroundImage
+                source: Theme.imgButton
+            }
+
+            PropertyChanges {
+                target: label
+                color: root.activeColor
+            }
+
+            PropertyChanges {
+                target: labelGlow
+                visible: true
+            }
+
+        },
+        State {
+            name: "inactive"
+            when: !root.checked && !root.highlight && !root.pressed
+
+            PropertyChanges {
+                target: backgroundImage
+                source: Theme.imgButton
+            }
+
+            PropertyChanges {
+                target: label
+                color: root.normalColor
+            }
+
+            PropertyChanges {
+                target: labelGlow
+                visible: false
+            }
+
+        }
+    ]
+
+    background: BorderImage {
+        id: backgroundImage
+
+        anchors.fill: parent
+        horizontalTileMode: BorderImage.Stretch
+        verticalTileMode: BorderImage.Stretch
+        source: Theme.imgButton
+
+        border {
+            top: 10
+            left: 10
+            right: 10
+            bottom: 10
+        }
+
+    }
+
+    contentItem: Item {
+        anchors.fill: parent
+
+        Glow {
+            id: labelGlow
+
+            anchors.fill: parent
+            radius: 5
+            spread: 0.1
+            samples: 1 + radius * 2
+            color: label.color
+            source: label
+        }
+
+        Label {
+            id: label
+
+            anchors.fill: parent
+            text: root.text
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            font.family: Theme.fontFamily
+            font.capitalization: Font.AllUppercase
+            font.bold: true
+            font.pixelSize: Theme.buttonFontPixelSize
+            color: root.normalColor
+        }
+
+    }
+
+}
diff --git a/res/qml/ComboBox.qml b/res/qml/ComboBox.qml
new file mode 100644
index 0000000000..d5d5e82ae5
--- /dev/null
+++ b/res/qml/ComboBox.qml
@@ -0,0 +1,64 @@
+import "." as Skin
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import "Theme"
+
+ComboBox {
+    id: root
+
+    background: Skin.EmbeddedBackground {
+    }
+
+    delegate: ItemDelegate {
+        width: parent.width
+        highlighted: root.highlightedIndex === index
+        text: root.textAt(index)
+
+        contentItem: Text {
+            text: parent.text
+            color: Theme.deckTextColor
+            elide: Text.ElideRight
+            verticalAlignment: Text.AlignVCenter
+        }
+
+        background: Rectangle {
+            radius: 5
+            border.width: highlighted ? 1 : 0
+            border.color: Theme.deckLineColor
+            color: "transparent"
+        }
+
+    }
+
+    contentItem: Text {
+        leftPadding: 5
+        rightPadding: root.indicator.width + root.spacing
+        text: root.displayText
+        font: root.font
+        color: Theme.deckTextColor
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    popup: Popup {
+        y: root.height
+        width: root.width
+        implicitHeight: contentItem.implicitHeight
+
+        contentItem: ListView {
+            clip: true
+            implicitHeight: contentHeight
+            model: root.popup.visible ? root.delegateModel : null
+            currentIndex: root.highlightedIndex
+
+            ScrollIndicator.vertical: ScrollIndicator {
+            }
+
+        }
+
+        background: Skin.EmbeddedBackground {
+        }
+
+    }
+
+}
diff --git a/res/qml/ControlButton.qml b/res/qml/ControlButton.qml
new file mode 100644
index 0000000000..6a44ef06e2
--- /dev/null
+++ b/res/qml/ControlButton.qml
@@ -0,0 +1,35 @@
+import "." as Skin
+import Mixxx 0.1 as Mixxx
+
+Skin.Button {
+    id: root
+
+    property string group // required
+    property string key // required
+    property bool toggleable: false
+
+    function toggle() {
+        control.value = !control.value;
+    }
+
+    highlight: control.value
+    onPressed: {
+        if (toggleable)
+            toggle();
+        else
+            control.value = 1;
+    }
+    onReleased: {
+        if (!toggleable)
+            control.value = 0;
+
+    }
+
+    Mixxx.ControlProxy {
+        id: control
+
+        group: root.group
+        key: root.key
+    }
+
+}
diff --git a/res/qml/ControlKnob.qml b/res/qml/ControlKnob.qml
new file mode 100644
index 0000000000..6808070808
--- /dev/null
+++ b/res/qml/ControlKnob.qml
@@ -0,0 +1,22 @@
+import "." as Skin
+import Mixxx 0.1 as Mixxx
+import QtQuick 2.12
+
+Skin.Knob {
+    id: root
+
+    property alias group: control.group
+    property alias key: control.key
+
+    value: control.parameter
+    onTurned: control.parameter = value
+
+    Mixxx.ControlProxy {
+        id: control
+    }
+
+    TapHandler {
+        onDoubleTapped: control.reset()
+    }
+
+}
diff --git a/res/qml/ControlMiniKnob.qml b/res/qml/ControlMiniKnob.qml
new file mode 100644
index 0000000000..5cdffcac25
--- /dev/null
+++ b/res/qml/ControlMiniKnob.qml
@@ -0,0 +1,22 @@
+import "." as Skin
+import Mixxx 0.1 as Mixxx
+import QtQuick 2.12
+
+Skin.MiniKnob {
+    id: root
+
+    property alias group: control.group
+    property alias key: control.key
+
+    value: control.parameter
+    onTurned: control.parameter = value
+
+    Mixxx.ControlProxy {
+        id: control
+    }
+
+    TapHandler {
+        onDoubleTapped: control.reset()
+    }
+
+}
diff --git a/res/qml/ControlSlider.qml b/res/qml/ControlSlider.qml
new file mode 100644
index 0000000000..add929ffc9
--- /dev/null
+++ b/res/qml/ControlSlider.qml
@@ -0,0 +1,20 @@
+import "." as Skin
+import Mixxx 0.1 as Mixxx
+import QtQuick 2.12
+
+Skin.Slider {
+    property alias group: control.group
+    property alias key: control.key
+
+    value: control.parameter
+    onMoved: control.parameter = value
+
+    Mixxx.ControlProxy {
+        id: control
+    }
+
+    TapHandler {
+        onDoubleTapped: control.reset()
+    }
+
+}
diff --git a/res/qml/CrossfaderRow.qml b/res/qml/CrossfaderRow.qml
new file mode 100644
index 0000000000..a3a35530b1
--- /dev/null
+++ b/res/qml/CrossfaderRow.qml
@@ -0,0 +1,108 @@
+import "." as Skin
+import Mixxx 0.1 as Mixxx
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import "Theme"
+
+Item {
+    id: root
+
+    property real crossfaderWidth // required
+
+    implicitHeight: crossfader.height
+
+    Skin.SectionBackground {
+        anchors.fill: microphoneRow
+    }
+
+    Row {
+        id: microphoneRow
+
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: crossfader.left
+        layoutDirection: Qt.RightToLeft
+        padding: 5
+        spacing: 10
+
+        Skin.MicrophoneUnit {
+            unitNumber: 1
+        }
+
+        Skin.MicrophoneUnit {
+            unitNumber: 2
+        }
+
+        Skin.MicrophoneUnit {
+            unitNumber: 3
+        }
+
+        Skin.MicrophoneUnit {
+            unitNumber: 4
+        }
+
+        Skin.MicrophoneDuckingPanel {
+        }
+
+    }
+
+    Skin.SectionBackground {
+        id: crossfader
+
+        anchors.centerIn: parent
+        width: root.crossfaderWidth
+        height: crossfaderSlider.height + 20
+
+        Skin.ControlSlider {
+            id: crossfaderSlider
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.leftMargin: 5
+            anchors.rightMargin: 5
+            anchors.verticalCenter: parent.verticalCenter
+            orientation: Qt.Horizontal
+            group: "[Master]"
+            key: "crossfader"
+            barColor: Theme.crossfaderBarColor
+            barStart: 0.5
+            fg: Theme.imgCrossfaderHandle
+            bg: Theme.imgCrossfaderBackground
+        }
+
+    }
+
+    Row {
+        id: auxiliaryRow
+
+        anchors.left: crossfader.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.right: parent.right
+        padding: 5
+        spacing: 10
+
+        Skin.AuxiliaryUnit {
+            layoutDirection: Qt.RightToLeft
+            unitNumber: 1
+        }
+
+        Skin.AuxiliaryUnit {
+            layoutDirection: Qt.RightToLeft
+            unitNumber: 2
+        }
+
+        Skin.AuxiliaryUnit {
+            layoutDirection: Qt.RightToLeft
+            unitNumber: 3
+        }
+
+        Skin.AuxiliaryUnit {
+            layoutDirection: Qt.RightToLeft
+            unitNumber: 4
+        }
+
+    }
+
+}
diff --git a/res/qml/Deck.qml b/res/qml/Deck.qml
new file mode 100644
index 0000000000..d3661dc5d6
--- /dev/null
+++ b/res/qml/Deck.qml
@@ -0,0 +1,387 @@
+import "." as Skin
+import Mixxx 0.1 as Mixxx
+import Mixxx.Controls 0.1 as MixxxControls
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.11
+import "Theme"
+
+Item {
+    id: root
+
+    property string group // required
+    property bool minimized: false
+    property var deckPlayer: Mixxx.PlayerManager.getPlayer(group)
+
+    Drag.active: dragArea.drag.active
+    Drag.dragType: Drag.Automatic
+    Drag.supportedActions: Qt.CopyAction
+    Drag.mimeData: {
+        let data = {
+            "mixxx/player": group
+        };
+        const trackLocationUrl = deckPlayer.trackLocationUrl;
+        if (trackLocationUrl)