feat: add Library on QML

CMakeLists.txt

@@ -3474,6 +3474,15 @@ if(QML)
 
   set(QT_QML_OUTPUT_DIRECTORY ${CMAKE_BINARY_DIR}/qml)
   qt_add_library(mixxx-qml-lib STATIC)
+
+  if(WIN32)
+    target_compile_definitions(mixxx-qml-lib PUBLIC __WINDOWS__)
+  endif()
+
+  if(ENGINEPRIME)
+    target_compile_definitions(mixxx-qml-lib PUBLIC __ENGINEPRIME__)
+  endif()
+
   foreach(component ${QT_COMPONENTS})
     target_link_libraries(
       mixxx-qml-lib
@@ -3555,10 +3564,15 @@ if(QML)
       src/qml/qmleffectslotproxy.cpp
       src/qml/qmleffectsmanagerproxy.cpp
       src/qml/qmllibraryproxy.cpp
+      src/qml/qmllibrarysource.cpp
+      src/qml/qmllibrarysourcetree.cpp
       src/qml/qmllibrarytracklistmodel.cpp
       src/qml/qmlmixxxcontrollerscreen.cpp
       src/qml/qmlplayermanagerproxy.cpp
       src/qml/qmlplayerproxy.cpp
+      src/qml/qmlsidebarmodelproxy.cpp
+      src/qml/qmllibrarytracklistcolumn.cpp
+      src/qml/qmltrackproxy.cpp
       src/qml/qmlvisibleeffectsmodel.cpp
       src/qml/qmlwaveformdisplay.cpp
       src/qml/qmlwaveformoverview.cpp

res/qml/ActionButton.qml

@@ -0,0 +1,47 @@
+import QtQuick
+import QtQuick.Controls 2.12
+import Qt5Compat.GraphicalEffects
+import "Theme"
+
+AbstractButton {
+    id: root
+    enum Category {
+        None,
+        Danger,
+        Action
+    }
+
+    property var category: ActionButton.Category.None
+    property alias label: labelField
+
+    implicitHeight: 24
+    background: Item {
+        Rectangle {
+            id: content
+            anchors.fill: parent
+            color: root.category == ActionButton.Category.Action ? '#2D4EA1' : root.category == ActionButton.Category.Danger ? '#7D3B3B' : '#3F3F3F'
+            radius: 4
+        }
+        DropShadow {
+            anchors.fill: parent
+            source: content
+            horizontalOffset: 0
+            verticalOffset: 0
+            radius: 8.0
+            color: "#80000000"
+        }
+    }
+    contentItem: Item {
+        Label {
+            id: labelField
+            anchors.fill: parent
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            font.family: Theme.fontFamily
+            font.capitalization: Font.AllUppercase
+            font.bold: true
+            font.pixelSize: Theme.buttonFontPixelSize
+            color: Theme.white
+        }
+    }
+}

res/qml/ActionPopup.qml

@@ -0,0 +1,69 @@
+import QtQml
+import QtQuick
+import QtQml.Models
+import QtQuick.Layouts
+import QtQuick.Controls 2.15
+import QtQuick.Shapes 1.12
+import Qt5Compat.GraphicalEffects
+import "Theme"
+
+Popup {
+    id: root
+    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+    width: 200
+
+    padding: 0
+    margins: 0
+    leftInset: 0
+
+    default property alias children: content.children
+
+    contentItem: Item {
+        ColumnLayout {
+            spacing: 2
+            anchors.fill: parent
+            anchors.leftMargin: 20
+            id: content
+        }
+    }
+
+    background: Item {
+        Item {
+            id: content3
+            anchors.fill: parent
+            Shape {
+                anchors.left: parent.left
+                anchors.verticalCenter: parent.verticalCenter
+                implicitHeight: 20
+                ShapePath {
+                    strokeWidth: 0
+                    strokeColor: 'transparent'
+                    fillColor: Theme.backgroundColor
+                    fillRule: ShapePath.OddEvenFill
+
+                    startX: 0
+                    startY: 10
+                    PathLine { x: 20; y: 0 }
+                    PathLine { x: 20; y: 20 }
+                    PathLine { x: 0; y: 10 }
+                }
+            }
+            Rectangle {
+                anchors.fill: parent
+                anchors.right: parent.right
+                anchors.leftMargin: 20
+                border.width: 0
+                radius: 8
+                color: Theme.backgroundColor
+            }
+        }
+        DropShadow {
+            anchors.fill: parent
+            source: content3
+            horizontalOffset: 0
+            verticalOffset: 0
+            radius: 8.0
+            color: "#80000000"
+        }
+    }
+}

res/qml/DeckInfoBar.qml

@@ -11,6 +11,7 @@ Rectangle {
     required property string group
     required property int rightColumnWidth
     property var deckPlayer: Mixxx.PlayerManager.getPlayer(group)
+    property var currentTrack: deckPlayer.currentTrack
     property color lineColor: Theme.deckLineColor
 
     border.width: 2
@@ -26,7 +27,7 @@ Rectangle {
         anchors.bottom: parent.bottom
         anchors.margins: 5
         width: height
-        source: root.deckPlayer.coverArtUrl
+        source: root.currentTrack.coverArtUrl
         visible: false
         asynchronous: true
     }
@@ -95,7 +96,7 @@ Rectangle {
     Skin.EmbeddedText {
         id: infoBarTitle
 
-        text: root.deckPlayer.title
+        text: root.currentTrack.title
         anchors.top: infoBarHSeparator1.top
         anchors.left: infoBarVSeparator.left
         anchors.right: infoBarHSeparator1.left
@@ -119,7 +120,7 @@ Rectangle {
     Skin.EmbeddedText {
         id: infoBarArtist
 
-        text: root.deckPlayer.artist
+        text: root.currentTrack.artist
         anchors.top: infoBarVSeparator.bottom
         anchors.left: infoBarVSeparator.left
         anchors.right: infoBarHSeparator1.left
@@ -144,7 +145,7 @@ Rectangle {
     Skin.EmbeddedText {
         id: infoBarKey
 
-        text: root.deckPlayer.keyText
+        text: root.currentTrack.keyText
         anchors.top: infoBarHSeparator1.top
         anchors.bottom: infoBarVSeparator.top
         anchors.right: infoBarHSeparator2.left
@@ -206,11 +207,11 @@ Rectangle {
         GradientStop {
             position: 0
             color: {
-                const trackColor = root.deckPlayer.color;
+                const trackColor = root.currentTrack.color;
                 if (!trackColor.valid)
                     return Theme.deckBackgroundColor;
 
-                return Qt.darker(root.deckPlayer.color, 2);
+                return Qt.darker(root.currentTrack.color, 2);
             }
         }
 

res/qml/InputField.qml

@@ -0,0 +1,48 @@
+import QtQuick
+import QtQuick.Controls 2.15
+import Qt5Compat.GraphicalEffects
+import "Theme"
+
+FocusScope {
+    id: root
+
+    property alias input: inputField
+
+    Rectangle {
+        id: backgroundInput
+        radius: 4
+        color: '#232323'
+        anchors.fill: parent
+    }
+    DropShadow {
+        id: dropSetting
+        anchors.fill: parent
+        horizontalOffset: 0
+        verticalOffset: 0
+        radius: 4.0
+        color: "#000000"
+        source: backgroundInput
+    }
+    InnerShadow {
+        id: effect2
+        anchors.fill: parent
+        source: dropSetting
+        spread: 0.2
+        radius: 12
+        samples: 24
+        horizontalOffset: 0
+        verticalOffset: 0
+        color: "#353535"
+    }
+    TextInput {
+        id: inputField
+        anchors.fill: parent
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.margins: 7
+        focus: true
+        clip: true
+        color: acceptableInput ? "#FFFFFF" : "#7D3B3B"
+        horizontalAlignment: TextInput.AlignLeft
+    }
+}