QML: Add loop, intro and outro on scrolling waveform

res/qml/Theme/Theme.qml

@@ -42,6 +42,9 @@ QtObject {
     property color waveformCursorColor: white
     property color waveformMarkerDefault: '#ff7a01'
     property color waveformMarkerLabel: Qt.rgbs(255, 255, 255, 0.8)
+    property color waveformMarkerIntroOutroColor: '#2c5c9a'
+    property color waveformMarkerLoopColor: '#00b400'
+    property color waveformMarkerLoopColorDisabled: '#FFFFFF'
     property string fontFamily: "Open Sans"
     property int textFontPixelSize: 14
     property int buttonFontPixelSize: 10

res/qml/WaveformIntroOutro.qml

@@ -0,0 +1,93 @@
+import Mixxx 1.0 as Mixxx
+import QtQuick 2.15
+import QtQuick.Shapes 1.4
+import QtQuick.Window 2.15
+
+import QtQuick.Controls 2.15
+
+import "Theme"
+
+Item {
+    id: root
+
+    property color mainColor: Theme.waveformMarkerIntroOutroColor
+    property bool isIntro: true
+
+    property real markerHeight: root.height
+    property real radiusSize: 4
+
+    Rectangle {
+        anchors.fill: parent
+        color: Qt.alpha(root.mainColor, 0.1)
+    }
+
+    Shape {
+        ShapePath {
+            strokeWidth: 0
+            strokeColor: 'transparent'
+            fillColor: root.mainColor
+            strokeStyle: ShapePath.SolidLine
+            startX: -1; startY: 0
+
+            PathLine { x: 16 - radiusSize; y: 0 }
+            PathArc {
+                x: 16
+                y: radiusSize
+                radiusX: radiusSize; radiusY: radiusSize
+                direction: PathArc.Clockwise
+            }
+            PathLine { x: 16; y: 16 - radiusSize }
+            PathArc {
+                x: 16 - radiusSize
+                y: 16
+                radiusX: radiusSize; radiusY: radiusSize
+                direction: PathArc.Clockwise
+            }
+            PathLine { x: 1; y: 16 }
+            PathLine { x: 1; y: markerHeight }
+            PathLine { x: -1; y: markerHeight }
+        }
+    }
+    Shape {
+        ShapePath {
+            strokeWidth: 0
+            strokeColor: 'transparent'
+            fillColor: root.mainColor
+            strokeStyle: ShapePath.SolidLine
+            startX: root.width - 1; startY: 0
+
+            PathLine { x: root.width - 16 + radiusSize; y: 0 }
+            PathArc {
+                x: root.width - 16
+                y: radiusSize
+                radiusX: radiusSize; radiusY: radiusSize
+                direction: PathArc.Counterclockwise
+            }
+            PathLine { x: root.width - 16; y: 16 - radiusSize }
+            PathArc {
+                x: root.width - 16 + radiusSize
+                y: 16
+                radiusX: radiusSize; radiusY: radiusSize
+                direction: PathArc.Counterclockwise
+            }
+            PathLine { x: root.width -1; y: 16 }
+            PathLine { x: root.width -1; y: markerHeight }
+            PathLine { x: root.width + 1; y: markerHeight }
+            PathLine { x: root.width + 1; y: 0 }
+        }
+    }
+    Image {
+        x: 2
+        y: 2
+        width: 12
+        height: 12
+        source: `images/mark_${(root.isIntro ? 'intro' : 'outro')}.svg`
+    }
+    Image {
+        x: root.width - 14
+        y: 2
+        width: 12
+        height: 12
+        source: `images/mark_${(root.isIntro ? 'intro' : 'outro')}.svg`
+    }
+}

res/qml/WaveformLoop.qml

@@ -0,0 +1,76 @@
+import Mixxx 1.0 as Mixxx
+import QtQuick 2.15
+import QtQuick.Shapes 1.4
+import QtQuick.Window 2.15
+
+import QtQuick.Controls 2.15
+
+import "Theme"
+
+Item {
+    id: root
+
+    property color mainColor: Theme.waveformMarkerLoopColor
+    property color disabledColor: Theme.waveformMarkerLoopColorDisabled
+    property real enabledOpacity: 0.8
+    property real disabledOpacity: 0.5
+
+    property real markerHeight: root.height
+    property real radiusSize: 4
+    property bool enabled: true
+
+    Rectangle {
+        anchors.fill: parent
+        color: Qt.alpha(root.enabled ? root.mainColor : root.disabledColor, root.enabled ? root.enabledOpacity : root.disabledOpacity)
+    }
+
+    Shape {
+        ShapePath {
+            strokeWidth: 0
+            strokeColor: 'transparent'
+            fillColor: root.mainColor
+            strokeStyle: ShapePath.SolidLine
+            startX: -1; startY: 0
+
+            PathLine { x: -16 + radiusSize; y: 0 }
+            PathArc {
+                x: -16
+                y: radiusSize
+                radiusX: radiusSize; radiusY: radiusSize
+                direction: PathArc.Counterclockwise
+            }
+            PathLine { x: -16; y: 16 - radiusSize }
+            PathArc {
+                x: -16 + radiusSize
+                y: 16
+                radiusX: radiusSize; radiusY: radiusSize
+                direction: PathArc.Counterclockwise
+            }
+            PathLine { x: -1; y: 16 }
+            PathLine { x: -1; y: markerHeight }
+            PathLine { x: 1; y: markerHeight }
+            PathLine { x: 1; y: 0 }
+        }
+    }
+    Shape {
+
+        ShapePath {
+            strokeWidth: 0
+            strokeColor: 'transparent'
+            fillColor: root.mainColor
+            strokeStyle: ShapePath.SolidLine
+            startX: root.width - 1; startY: 0
+
+            PathLine { x: root.width - 1; y: markerHeight }
+            PathLine { x: root.width + 1; y: markerHeight }
+            PathLine { x: root.width + 1; y: 0 }
+        }
+    }
+    Image {
+        x: -14
+        y: 2
+        width: 12
+        height: 12
+        source: "images/mark_loop.svg"
+    }
+}

res/qml/WaveformRow.qml

@@ -59,6 +59,55 @@ Item {
             key: "waveform_zoom"
         }
 
+        Mixxx.ControlProxy {
+            id: introStartPosition
+
+            group: root.group
+            key: "intro_start_position"
+        }
+
+        Mixxx.ControlProxy {
+            id: introEndPosition
+
+            group: root.group
+            key: "intro_end_position"
+        }
+
+        Mixxx.ControlProxy {
+            id: outroStartPosition
+
+            group: root.group
+            key: "outro_start_position"
+        }
+
+        Mixxx.ControlProxy {
+            id: outroEndPosition
+
+            group: root.group
+            key: "outro_end_position"
+        }
+
+        Mixxx.ControlProxy {
+            id: loopStartPosition
+
+            group: root.group
+            key: "loop_start_position"
+        }
+
+        Mixxx.ControlProxy {
+            id: loopEndPosition
+
+            group: root.group
+            key: "loop_end_position"
+        }
+
+        Mixxx.ControlProxy {
+            id: loopEnabled
+
+            group: root.group
+            key: "loop_enabled"
+        }
+
         Mixxx.ControlProxy {
             id: mainCuePosition
 
@@ -150,6 +199,38 @@ Item {
                 }
             }
 
+            Skin.WaveformIntroOutro {
+                id: intro
+
+                visible: introStartPosition.value != -1 || introEndPosition.value != -1
+
+                height: waveform.height
+                x: (introStartPosition.value / samplesControl.value) * waveform.width
+                width: ((introEndPosition.value - introStartPosition.value) / samplesControl.value) * waveform.width
+            }
+
+            Skin.WaveformIntroOutro {
+                id: outro
+
+                visible: outroStartPosition.value != -1 || outroEndPosition.value != -1
+                isIntro: false
+
+                height: waveform.height
+                x: (outroStartPosition.value / samplesControl.value) * waveform.width
+                width: ((outroEndPosition.value - outroStartPosition.value) / samplesControl.value) * waveform.width
+            }
+
+            Skin.WaveformLoop {
+                id: loop
+
+                visible: loopStartPosition.value != -1 && loopEndPosition.value != -1
+
+                height: waveform.height
+                x: (loopStartPosition.value / samplesControl.value) * waveform.width
+                width: ((loopEndPosition.value - loopStartPosition.value) / samplesControl.value) * waveform.width
+                enabled: loopEnabled.value
+            }
+
             Repeater {
                 model: root.deckPlayer.hotcuesModel