feat: add basic COs and UI for STEM file

Allow volume control of stem channels as well as basic UI feedback and control
mixxxdj · Apr 18, 2024 · 302d53b · 302d53b
1 parent da6f983
commit 302d53b
Show file tree

Hide file tree

Showing 28 changed files with 1,131 additions and 47 deletions.
diff --git a/CMakeLists.txt b/CMakeLists.txt
@@ -3460,7 +3460,15 @@ if (STEM)
     src/sources/soundsourcestem.cpp
     src/track/steminfoimporter.cpp
     src/track/steminfo.cpp # TODO precompiled header?
+    src/waveform/renderers/allshader/waveformrendererstem.cpp
+    src/widget/wstemcontrol.cpp
   )
+  if(QML)
+    target_compile_definitions(mixxx-qml-lib PUBLIC __STEM__)
+    target_sources(mixxx-qml-lib PRIVATE
+      src/qml/qmlstemsmodel.cpp
+    )
+  endif()
 endif()
 
 # Test Suite

diff --git a/res/qml/EqColumn.qml b/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 {

diff --git a/res/qml/Mixer.qml b/res/qml/Mixer.qml
@@ -1,4 +1,5 @@
 import "." as Skin
+import Mixxx 1.0 as Mixxx
 import QtQuick 2.12
 
 Item {

diff --git a/res/qml/StemKnob.qml b/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
+        }
+    }
+}
diff --git a/res/skins/LateNight/skin.xml b/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>

diff --git a/res/skins/LateNight/skin_settings.xml b/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>

diff --git a/res/skins/LateNight/style_palemoon.qss b/res/skins/LateNight/style_palemoon.qss
@@ -3149,3 +3149,17 @@ 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 {
+  margin: 10px 15px 10px 15px;
+}
diff --git a/res/skins/LateNight/waveform.xml b/res/skins/LateNight/waveform.xml
@@ -132,6 +132,45 @@
               <Color><Variable name="IntroOutroColor"/></Color>
               <TextColor>#FFFFFF</TextColor>
             </Mark>
+            <StemControl alignment="left">
+              <MinimumSize>138,68</MinimumSize>
+              <MaximumSize>158,1920</MaximumSize>
+              <SizePolicy>me,me</SizePolicy>
+              <Stem>
+                <MinimumSize>130,17</MinimumSize>
+                <MaximumSize>150,34</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>skins:LateNight/<Variable name="KnobScheme"/>/knobs/knob_indicator_regular_<Variable name="KnobColorEq"/>.svg</Knob>
+                    <BackPath>skins:LateNight/<Variable name="KnobScheme"/>/knobs/knob_bg_regular.svg</BackPath>
+                    <MinAngle><Variable name="PotiMinAngle"/></MinAngle>
+                    <MaxAngle><Variable name="PotiMaxAngle"/></MaxAngle>
+                    <ArcRadius><Variable name="ArcRadius"/></ArcRadius>
+                    <ArcThickness><Variable name="ArcThickness"/></ArcThickness>
+                    <ArcColor><Variable name="ArcColorEq"/></ArcColor>
+                    <ArcRoundCaps><Variable name="ArcRoundCaps"/></ArcRoundCaps>
+                    <KnobCenterYOffset>1.998</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>
         </Children>
         <Connection>