Add stem controls

CMakeLists.txt

@@ -3456,7 +3456,19 @@ if (STEM)
     src/sources/soundsourcestem.cpp
     src/track/steminfoimporter.cpp
     src/track/steminfo.cpp
+    src/widget/wstemcontrol.cpp
   )
+  if(QOPENGL)
+    target_sources(mixxx-lib PRIVATE
+      src/waveform/renderers/allshader/waveformrendererstem.cpp
+    )
+  endif()
+  if(QML)
+    target_compile_definitions(mixxx-qml-lib PUBLIC __STEM__)
+    target_sources(mixxx-qml-lib PRIVATE
+      src/qml/qmlstemsmodel.cpp
+    )
+  endif()
 endif()
 
 # Test Suite

res/qml/EqColumn.qml

@@ -1,44 +1,111 @@
 import "." as Skin
 import QtQuick 2.12
 import QtQuick.Shapes 1.12
+import QtQuick.Layouts
+import Mixxx 1.0 as Mixxx
 import "Theme"
 
 Column {
     id: root
 
     required property string group
+    property var player: Mixxx.PlayerManager.getPlayer(root.group)
 
-    spacing: 4
+    Mixxx.ControlProxy {
+        id: stemCountControl
 
-    Skin.EqKnob {
-        statusKey: "button_parameter3"
-        knob.group: "[EqualizerRack1_" + root.group + "_Effect1]"
-        knob.key: "parameter3"
-        knob.color: Theme.eqHighColor
+        group: root.group
+        key: "stem_count"
     }
 
-    Skin.EqKnob {
-        statusKey: "button_parameter2"
-        knob.group: "[EqualizerRack1_" + root.group + "_Effect1]"
-        knob.key: "parameter2"
-        knob.color: Theme.eqMidColor
-    }
+    Row {
+        Column {
+            id: stem
+            spacing: 4
+            visible: opacity != 0
+            Repeater {
+                model: root.player.stemsModel
 
-    Skin.EqKnob {
-        knob.group: "[EqualizerRack1_" + root.group + "_Effect1]"
-        knob.key: "parameter1"
-        statusKey: "button_parameter1"
-        knob.color: Theme.eqLowColor
-    }
+                Row {
+                    id: stem
+                    required property int index
+                    required property string label
+                    required property color color
+
+                    Skin.StemKnob {
+                        group: root.group
+                        index: stem.index
+                        label: stem.label
+                        stemColor: stem.color
+                    }
+                }
+            }
+        }
+        Column {
+            id: eq
+            spacing: 4
+            width: 10
+            visible: opacity != 0
+            Skin.EqKnob {
+                statusKey: "button_parameter3"
+                knob.group: "[EqualizerRack1_" + root.group + "_Effect1]"
+                knob.key: "parameter3"
+                knob.color: Theme.eqHighColor
+            }
+
+            Skin.EqKnob {
+                statusKey: "button_parameter2"
+                knob.group: "[EqualizerRack1_" + root.group + "_Effect1]"
+                knob.key: "parameter2"
+                knob.color: Theme.eqMidColor
+            }
+
+            Skin.EqKnob {
+                knob.group: "[EqualizerRack1_" + root.group + "_Effect1]"
+                knob.key: "parameter1"
+                statusKey: "button_parameter1"
+                knob.color: Theme.eqLowColor
+            }
+
+            Skin.EqKnob {
+                knob.group: "[QuickEffectRack1_" + root.group + "]"
+                knob.key: "super1"
+                statusGroup: "[QuickEffectRack1_" + root.group + "_Effect1]"
+                statusKey: "enabled"
+                knob.arcStyle: ShapePath.DashLine
+                knob.arcStylePattern: [2, 2]
+                knob.color: Theme.eqFxColor
+            }
+        }
+        states: [
+            State {
+                name: "eq"
+                when: stemCountControl.value == 0
+                PropertyChanges { target: stem; opacity: 0; width: 0}
+            },
+            State {
+                name: "stem"
+                when: stemCountControl.value != 0
+                PropertyChanges { target: eq; opacity: 0; width: 0 }
+            }
+        ]
 
-    Skin.EqKnob {
-        knob.group: "[QuickEffectRack1_" + root.group + "]"
-        knob.key: "super1"
-        statusGroup: "[QuickEffectRack1_" + root.group + "_Effect1]"
-        statusKey: "enabled"
-        knob.arcStyle: ShapePath.DashLine
-        knob.arcStylePattern: [2, 2]
-        knob.color: Theme.eqFxColor
+        transitions: [
+            Transition {
+                from: "eq"
+                to: "stem"
+                ParallelAnimation {
+                    PropertyAnimation { targets: [eq, stem]; properties: "opacity,width"; duration: 1000}
+                }
+            },
+            Transition {
+                from: "stem"
+                to: "eq"
+                ParallelAnimation {
+                    PropertyAnimation { targets: [eq, stem]; properties: "opacity,width"; duration: 1000}
+                }
+            }
+        ]
     }
 
     Skin.OrientationToggleButton {

res/qml/Mixer.qml

@@ -1,4 +1,5 @@
 import "." as Skin
+import Mixxx 1.0 as Mixxx
 import QtQuick 2.12
 
 Item {

res/qml/StemKnob.qml

@@ -0,0 +1,67 @@
+import "." as Skin
+import Mixxx 1.0 as Mixxx
+import QtQuick 2.12
+import "Theme"
+
+Rectangle {
+    id: root
+
+    property alias knob: knob
+
+    required property string group
+    required property string label
+    required property color stemColor
+    required property int index
+
+    width: 56
+    height: 56
+    radius: 5
+    color: stemColor
+
+    Skin.ControlKnob {
+        id: knob
+        group: root.group
+        key: `stem_${root.index}_volume`
+        color: Theme.gainKnobColor
+        anchors.topMargin: 5
+        anchors.top: root.top
+        anchors.horizontalCenter: root.horizontalCenter
+
+        arcStart: 0
+
+        width: 36
+        height: 36
+    }
+
+    Text {
+        anchors.bottom: root.bottom
+        anchors.horizontalCenter: root.horizontalCenter
+        text: label
+    }
+
+    Mixxx.ControlProxy {
+        id: statusControl
+
+        group: root.group
+        key: `stem_${root.index}_mute`
+    }
+
+    Rectangle {
+        id: statusButton
+
+        anchors.left: root.left
+        anchors.top: root.top
+        anchors.leftMargin: 4
+        anchors.topMargin: 4
+        width: 8
+        height: width
+        radius: width / 2
+        border.width: 1
+        border.color: Theme.buttonNormalColor
+        color: statusControl.value ? knob.color : "transparent"
+
+        TapHandler {
+            onTapped: statusControl.value = !statusControl.value
+        }
+    }
+}

res/skins/Deere/deck.xml

@@ -38,7 +38,7 @@
                     <Children>
                       <Template src="skins:Deere/deck_spinny.xml">
                         <SetVariable name="cover">true</SetVariable>
-                        <SetVariable name="Size">55f,55f</SetVariable>
+                        <SetVariable name="Size">68f,68f</SetVariable>
                       </Template>
                     </Children>
                   </WidgetGroup>
@@ -51,7 +51,7 @@
                     <Children>
                       <Template src="skins:Deere/deck_spinny.xml">
                         <SetVariable name="cover">false</SetVariable>
-                        <SetVariable name="Size">55f,55f</SetVariable>
+                        <SetVariable name="Size">68f,68f</SetVariable>
                       </Template>
                     </Children>
                   </WidgetGroup>

res/skins/Deere/deck_waveform.xml

@@ -128,6 +128,41 @@
         - if a MIDI device which supports more hotcues than buttons are in the current skin has them activated
         - if you change from a skin which supports more hotcues than buttons are in the current skin (and has them activated)
         -->
+        <StemControl alignment="left">
+          <MinimumSize>138,68</MinimumSize>
+          <MaximumSize>158,1920</MaximumSize>
+          <SizePolicy>me,me</SizePolicy>
+          <Stem>
+            <MinimumSize>130,17</MinimumSize>
+            <MaximumSize>150,1920</MaximumSize>
+            <SizePolicy>me,min</SizePolicy>
+            <Layout>horizontal</Layout>
+            <Children>
+              <Label>
+                <ObjectName>stem_label</ObjectName>
+                <SizePolicy>e,max</SizePolicy>
+              </Label>
+              <KnobComposed>
+                <Pos>0,0</Pos>
+                <MinimumSize>20,17</MinimumSize>
+                <MaximumSize>40,34</MaximumSize>
+                <SizePolicy>me,me</SizePolicy>
+                <Knob>knob.svg</Knob>
+                <BackPath>knob_bg_blue.svg</BackPath>
+                <MinAngle>-135</MinAngle>
+                <MaxAngle>135</MaxAngle>
+                <KnobCenterYOffset>1.602</KnobCenterYOffset>
+                <Connection>
+                  <ConfigKey><Variable name="StemGroup"/>,stem_<Variable name="StemIdx"/>_volume</ConfigKey>
+                </Connection>
+              </KnobComposed>
+            </Children>
+          </Stem>
+          <Connection>
+            <ConfigKey persist="true">[Skin],show_stem_controls</ConfigKey>
+            <BindProperty>displayed</BindProperty>
+          </Connection>
+        </StemControl>
       </Visual>
 
       <WidgetGroup>

res/skins/Deere/skin_settings.xml

@@ -61,6 +61,11 @@
             <SetVariable name="skinsetting">[Skin],show_4decks</SetVariable>
           </Template>
 
+          <Template src="skins:Deere/skinsettings_button.xml">
+            <SetVariable name="TooltipId">show_stem_controls</SetVariable>
+            <SetVariable name="text">Show stem controls</SetVariable>
+            <SetVariable name="skinsetting">[Skin],show_stem_controls</SetVariable>
+          </Template>
         </Children>
       </WidgetGroup>
 

res/skins/Deere/style.qss

@@ -1432,11 +1432,6 @@ WWidget, WLabel {
   font-size: 12px;
 }
 
-/* Track text, etc. should be in the deck color. */
-#Deck1 WLabel, #Deck2 WLabel, #Deck3 WLabel, #Deck4 WLabel {
-  color: #D2D2D2;
-}
-
 WNumberRate {
   font-size: 13px;
 }
@@ -2456,3 +2451,17 @@ WRateRange {
 #RateDisplayBottomRate {
     qproperty-alignment: 'AlignRight | AlignBottom';
 }
+
+/** Stem control **/
+WStemControlBox {
+  background-color: transparent;
+}
+WStemControl WLabel {
+  color: #222222;
+  padding-left: 5px;
+  font-weight: 500;
+  font-size: 14px;
+}
+WStemControl {
+  margin: 10px 15px 10px 15px;
+}

res/skins/LateNight/skin.xml

@@ -41,6 +41,7 @@
       <attribute config_key="[App],num_samplers">16</attribute>
       <attribute persist="true" config_key="[Skin],show_waveforms">1</attribute>
       <attribute persist="true" config_key="[Skin],timing_shift_buttons">0</attribute>
+      <attribute persist="true" config_key="[Skin],show_stem_controls">0</attribute>
 
     <!-- Decks -->
       <!-- general -->
@@ -63,6 +64,7 @@
       <attribute persist="true" config_key="[Skin],show_rate_controls">1</attribute>
       <attribute persist="true" config_key="[Skin],show_rate_control_buttons">1</attribute>
       <attribute persist="true" config_key="[Skin],show_beatgrid_controls">1</attribute>
+      <attribute persist="true" config_key="[Skin],show_stem_controls">1</attribute>
       <!-- Compact deck -->
       <attribute persist="true" config_key="[Skin],show_rate_controls_compact">1</attribute>
       <attribute persist="true" config_key="[Skin],show_loop_controls_compact">1</attribute>

res/skins/LateNight/skin_settings.xml

@@ -266,6 +266,26 @@ Description:
 
                     </Children>
                   </WidgetGroup>
+
+                  <!-- Stem control over the waveform -->
+                  <WidgetGroup>
+                    <ObjectName>SkinSettingsCategory</ObjectName>
+                    <SizePolicy>me,f</SizePolicy>
+                    <Layout>stacked</Layout>
+                    <Children>
+                      <!-- translucent cover when waveforms are hidden -->
+                      <Template src="skins:LateNight/helpers/skin_settings_cover_inverted.xml">
+                        <SetVariable name="Setting">[Skin],show_waveforms</SetVariable>
+                      </Template>
+
+                      <Template src="skins:LateNight/helpers/skin_settings_button_2state.xml">
+                        <SetVariable name="TooltipId">show_stem_controls</SetVariable>
+                        <SetVariable name="Text">Stem control</SetVariable>
+                        <SetVariable name="Setting">[Skin],show_stem_controls</SetVariable>
+                      </Template>
+
+                    </Children>
+                  </WidgetGroup>
                 </Children>
               </WidgetGroup>
             </Children>

res/skins/LateNight/style_palemoon.qss

@@ -3208,3 +3208,18 @@ WSearchLineEdit::indicator:unchecked:selected {
 }
 /************** common styles for WEffectSelector ******************************
 *************** QSpinBox, QMenu, QToolTip *************************************/
+
+/** Stem control **/
+WStemControlBox {
+  padding-left: 8px;
+  background-color: transparent;
+}
+WStemControl WLabel {
+  padding-left: 5px;
+  font-weight: 500;
+  font-size: 14px;
+}
+WStemControl {
+  border-radius: 7px;
+  opacity: 0.2;
+}