From 08fab1825d70da440a935fc91ed8dc48a259daf3 Mon Sep 17 00:00:00 2001
From: ronso0 <ronso0@mixxx.org>
Date: Sun, 10 Mar 2024 18:36:45 +0100
Subject: [PATCH 1/4] LateNight: add 4-state button

---
 .../controls/button_4state_display.xml        | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 res/skins/LateNight/controls/button_4state_display.xml

diff --git a/res/skins/LateNight/controls/button_4state_display.xml b/res/skins/LateNight/controls/button_4state_display.xml
new file mode 100644
index 00000000000..55c2513ab01
--- /dev/null
+++ b/res/skins/LateNight/controls/button_4state_display.xml
@@ -0,0 +1,60 @@
+<!--
+Description:
+  A button that has click or display controls.
+Variables:
+  ObjectName        : object name
+  ToolTipID         : standard Tooltip from mixxx db
+    see: https://github.com/mixxxdj/mixxx/blob/master/src/skin/TooltipIds.cpp
+  Size              : button size
+  state_X_text      : label text for state X
+  state_X_pressed   : background graphic for pressed state X
+  state_X_unpressed : background graphic for unpressed state X
+  Align             : alignment of text
+  ConfigKey         : left-click control
+  ConfigKeyDisp     : display control
+-->
+<Template>
+  <PushButton>
+    <TooltipId><Variable name="TooltipId"/></TooltipId>
+    <ObjectName><Variable name="ObjectName"/></ObjectName>
+    <Size><Variable name="Size"/></Size>
+    <NumberStates>4</NumberStates>
+    <State>
+      <Number>0</Number>
+      <Text><Variable name="state_0_text"/></Text>
+      <Alignment><Variable name="Align"/></Alignment>
+      <Unpressed scalemode="STRETCH">skin:/<Variable name="BtnScheme"/>/buttons/btn_<Variable name="BtnType"/>_<Variable name="BtnSize"/>.svg</Unpressed>
+      <Pressed scalemode="STRETCH">skin:/<Variable name="BtnScheme"/>/buttons/btn_<Variable name="BtnType"/>_<Variable name="BtnSize"/>_active.svg</Pressed>
+    </State>
+    <State>
+      <Number>1</Number>
+      <Text><Variable name="state_1_text"/></Text>
+      <Alignment><Variable name="Align"/></Alignment>
+      <Unpressed scalemode="STRETCH">skin:/<Variable name="BtnScheme"/>/buttons/btn_<Variable name="BtnType"/>_<Variable name="BtnSize"/>_active.svg</Unpressed>
+      <Pressed scalemode="STRETCH">skin:/<Variable name="BtnScheme"/>/buttons/btn_<Variable name="BtnType"/>_<Variable name="BtnSize"/>_active.svg</Pressed>
+    </State>
+    <State>
+      <Number>2</Number>
+      <Text><Variable name="state_2_text"/></Text>
+      <Alignment><Variable name="Align"/></Alignment>
+      <Unpressed scalemode="STRETCH">skin:/<Variable name="BtnScheme"/>/buttons/btn_<Variable name="BtnType"/>_<Variable name="BtnSize"/>_active.svg</Unpressed>
+      <Pressed scalemode="STRETCH">skin:/<Variable name="BtnScheme"/>/buttons/btn_<Variable name="BtnType"/>_<Variable name="BtnSize"/>_active.svg</Pressed>
+    </State>
+    <State>
+      <Number>4</Number>
+      <Text><Variable name="state_3_text"/></Text>
+      <Alignment><Variable name="Align"/></Alignment>
+      <Unpressed scalemode="STRETCH">skin:/<Variable name="BtnScheme"/>/buttons/btn_<Variable name="BtnType"/>_<Variable name="BtnSize"/>_active.svg</Unpressed>
+      <Pressed scalemode="STRETCH">skin:/<Variable name="BtnScheme"/>/buttons/btn_<Variable name="BtnType"/>_<Variable name="BtnSize"/>_active.svg</Pressed>
+    </State>
+    <Connection>
+      <ConfigKey><Variable name="ConfigKey"/></ConfigKey>
+      <EmitOnPressAndRelease>true</EmitOnPressAndRelease>
+      <ButtonState>LeftButton</ButtonState>
+    </Connection>
+    <Connection>
+      <ConfigKey><Variable name="ConfigKeyDisp"/></ConfigKey>
+      <ConnectValueFromWidget>false</ConnectValueFromWidget>
+    </Connection>
+  </PushButton>
+</Template>

From 03861128191478883a889bc527866c32d7c1a382 Mon Sep 17 00:00:00 2001
From: ronso0 <ronso0@mixxx.org>
Date: Sun, 10 Mar 2024 18:37:41 +0100
Subject: [PATCH 2/4] LateNight: use 4-state button for broadcast toggle

---
 res/skins/LateNight/toolbar.xml | 40 +++++++++------------------------
 1 file changed, 11 insertions(+), 29 deletions(-)

diff --git a/res/skins/LateNight/toolbar.xml b/res/skins/LateNight/toolbar.xml
index c6582ff2139..c1d84b372ed 100644
--- a/res/skins/LateNight/toolbar.xml
+++ b/res/skins/LateNight/toolbar.xml
@@ -270,35 +270,17 @@
         </Children>
       </WidgetGroup><!-- /Recording button & recording duration label -->
 
-      <PushButton>
-        <Size>72f,20f</Size>
-        <TooltipId>broadcast_enabled</TooltipId>
-        <ObjectName>BroadcastButton</ObjectName>
-        <NumberStates>4</NumberStates>
-        <State>
-          <Number>0</Number>
-          <Text>      ON AIR</Text>
-        </State>
-        <State>
-          <Number>1</Number>
-          <Text>       ...</Text>
-        </State>
-        <State>
-          <Number>2</Number>
-          <Text>      ON AIR</Text>
-        </State>
-        <State>
-          <Number>3</Number>
-          <Text>       ---</Text>
-        </State>
-        <Connection>
-          <ConfigKey>[Shoutcast],enabled</ConfigKey>
-          <ButtonState>LeftButton</ButtonState>
-        </Connection>
-        <Connection>
-          <ConfigKey>[Shoutcast],status</ConfigKey>
-        </Connection>
-      </PushButton>
+      <Template src="skin:/controls/button_4state_display.xml">
+        <SetVariable name="ObjectName">BroadcastButton</SetVariable>
+        <SetVariable name="TooltipId">broadcast_enabled</SetVariable>
+        <SetVariable name="Size">72f,20f</SetVariable>
+        <SetVariable name="state_0_text">      ON AIR</SetVariable>
+        <SetVariable name="state_1_text">       ...</SetVariable>
+        <SetVariable name="state_2_text">      ON AIR</SetVariable>
+        <SetVariable name="state_3_text">       ---</SetVariable>
+        <SetVariable name="ConfigKey">[Shoutcast],enabled</SetVariable>
+        <SetVariable name="ConfigKeyDisp">[Shoutcast],status</SetVariable>
+      </Template>
 
       <WidgetGroup>
         <ObjectName>ToolbarSeparator</ObjectName>

From d993ae4af995552149a82231008032953533c768 Mon Sep 17 00:00:00 2001
From: ronso0 <ronso0@mixxx.org>
Date: Sun, 10 Mar 2024 18:38:46 +0100
Subject: [PATCH 3/4] tooltips: add "vinylcontrol_enabled_status" (vc_enabled +
 vc_status)

---
 src/skin/legacy/tooltips.cpp | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/skin/legacy/tooltips.cpp b/src/skin/legacy/tooltips.cpp
index 388f8b49da8..7abca2473bf 100644
--- a/src/skin/legacy/tooltips.cpp
+++ b/src/skin/legacy/tooltips.cpp
@@ -670,17 +670,28 @@ void Tooltips::addStandardTooltips() {
             << tr("Enable Passthrough")
             << tr("When enabled, the deck directly plays the audio arriving on the vinyl input.");
 
-    add("vinylcontrol_enabled")
-            << tr("Enable Vinyl Control")
-            << tr("When disabled, the track is controlled by Mixxx playback controls.")
-            << tr("When enabled, the track responds to external vinyl control.");
+    QStringList vcStatus;
+    vcStatus << tr("Provides visual feedback for vinyl control status:")
+             << tr("Green for control enabled.")
+             << tr("Blinking yellow for when the needle reaches the end of the "
+                   "record.")
+             << tr("Red for when needle skip has been detected.");
+    QStringList vcEnabled;
+    vcEnabled << tr("Enable Vinyl Control")
+              << tr("When disabled, the track is controlled by Mixxx playback "
+                    "controls.")
+              << tr("When enabled, the track responds to external vinyl "
+                    "control.");
+
+    add("vinylcontrol_enabled") << vcEnabled;
 
     add("vinylcontrol_status")
-            << tr("Vinyl Status")
-            << tr("Provides visual feedback for vinyl control status:")
-            << tr("Green for control enabled.")
-            << tr("Blinking yellow for when the needle reaches the end of the record.")
-            << tr("Blue for passthrough enabled.");
+            << tr("Vinyl Status") << vcStatus;
+
+    add("vinylcontrol_enabled_status")
+            << vcEnabled
+            << " " // generates a linebreak. \n would result in two linebrekas.
+            << vcStatus;
 
     add("vinylcontrol_mode")
             << tr("Vinyl Control Mode")

From 856cc352e7cee455cb5a69c217752834803f32fe Mon Sep 17 00:00:00 2001
From: ronso0 <ronso0@mixxx.org>
Date: Sun, 10 Mar 2024 19:09:07 +0100
Subject: [PATCH 4/4] LateNight: merge vinyl control status into toggle

---
 res/skins/LateNight/decks/vinyl_controls.xml | 58 +++++++++-----------
 res/skins/LateNight/style_classic.qss        | 30 +++++++---
 res/skins/LateNight/style_palemoon.qss       | 35 ++++++++----
 3 files changed, 72 insertions(+), 51 deletions(-)

diff --git a/res/skins/LateNight/decks/vinyl_controls.xml b/res/skins/LateNight/decks/vinyl_controls.xml
index 7922930304c..88e5e93bf42 100644
--- a/res/skins/LateNight/decks/vinyl_controls.xml
+++ b/res/skins/LateNight/decks/vinyl_controls.xml
@@ -9,27 +9,6 @@
         <Layout>horizontal</Layout>
         <SizePolicy>f,f</SizePolicy>
         <Children>
-
-          <WidgetGroup><Size>2f,0min</Size></WidgetGroup>
-
-          <StatusLight>
-            <ObjectName>VinylStatus</ObjectName>
-            <Size>18f,18f</Size>
-            <TooltipId>vinylcontrol_status</TooltipId>
-            <!-- TODO use colors mentioned in tooltip: green, blinking yellow, blue -->
-            <!-- Off -->
-            <PathStatusLight0 scalemode="STRETCH_ASPECT">skins:LateNight/<Variable name="StyleScheme"/>/style/vinyl_control_0.svg</PathStatusLight0>
-            <!-- enabled -->
-            <PathStatusLight1 scalemode="STRETCH_ASPECT">skins:LateNight/<Variable name="StyleScheme"/>/style/vinyl_control_1.svg</PathStatusLight1>
-            <!-- end-of-record warning -->
-            <PathStatusLight2 scalemode="STRETCH_ASPECT">skins:LateNight/<Variable name="StyleScheme"/>/style/vinyl_control_2.svg</PathStatusLight2>
-            <!-- passthrough -->
-            <PathStatusLight3 scalemode="STRETCH_ASPECT">skins:LateNight/<Variable name="StyleScheme"/>/style/vinyl_control_3.svg</PathStatusLight3>
-            <Connection>
-              <ConfigKey><Variable name="Group"/>,vinylcontrol_status</ConfigKey>
-            </Connection>
-          </StatusLight>
-
           <!-- increase margin -->
           <WidgetGroup><Size>3f,0min</Size></WidgetGroup>
 
@@ -38,17 +17,32 @@
             <Layout>horizontal</Layout>
             <SizePolicy>min,f</SizePolicy>
             <Children>
-              <!-- &#8202; is a hack to push text labels to the left or right
-                   because the kerning of some letters/numbers destroys the desired
-                   effect of center 'Align' and 'text-alignment' -->
-              <Template src="skins:LateNight/controls/button_2state.xml">
-                <SetVariable name="TooltipId">vinylcontrol_enabled</SetVariable>
-                <SetVariable name="ObjectName">VinylButton</SetVariable>
-                <SetVariable name="Size">40f,20f</SetVariable>
-                <SetVariable name="state_0_text">&#8202;VINYL&#8202;</SetVariable>
-                <SetVariable name="state_1_text">&#8202;VINYL&#8202;</SetVariable>
-                <SetVariable name="ConfigKey"><Variable name="Group"/>,vinylcontrol_enabled</SetVariable>
-              </Template>
+              <!-- Transparent 2-state toggle + 4-state status background -->
+              <WidgetGroup>
+                <Layout>stacked</Layout>
+                <Size>40f,20f</Size>
+                <Children>
+                  <Template src="skins:LateNight/controls/button_2state.xml">
+                    <SetVariable name="TooltipId">vinylcontrol_enabled_status</SetVariable>
+                    <SetVariable name="ObjectName">Blank</SetVariable>
+                    <SetVariable name="Size">40f,20f</SetVariable>
+                    <SetVariable name="ConfigKey"><Variable name="Group"/>,vinylcontrol_enabled</SetVariable>
+                  </Template>
+                  <!-- &#8202; is a hack to push text labels to the left or right
+                       because the kerning of some letters/numbers destroys the desired
+                       effect of center 'Align' and 'text-alignment' -->
+                  <Template src="skins:LateNight/controls/button_4state_display.xml">
+                    <SetVariable name="ObjectName">VinylStatus</SetVariable>
+                    <SetVariable name="Size">40f,20f</SetVariable>
+                    <SetVariable name="state_0_text">&#8202;VINYL&#8202;</SetVariable>
+                    <SetVariable name="state_1_text">&#8202;VINYL&#8202;</SetVariable>
+                    <SetVariable name="state_2_text">&#8202;VINYL&#8202;</SetVariable>
+                    <SetVariable name="state_3_text">&#8202;VINYL&#8202;</SetVariable>
+                    <SetVariable name="ConfigKeyDisp"><Variable name="Group"/>,vinylcontrol_status</SetVariable>
+                  </Template>
+                </Children>
+              </WidgetGroup>
+
 
               <Template src="skins:LateNight/controls/button_3state_persist.xml">
                 <SetVariable name="TooltipId">vinylcontrol_mode</SetVariable>
diff --git a/res/skins/LateNight/style_classic.qss b/res/skins/LateNight/style_classic.qss
index 429af041b26..a79034be24d 100644
--- a/res/skins/LateNight/style_classic.qss
+++ b/res/skins/LateNight/style_classic.qss
@@ -1198,7 +1198,8 @@ WBeatSpinBox, #spinBoxTransition,
 #MainMenu::item,
 #MainMenu QMenu::item,
 #MainMenu QMenu QCheckBox,
-#VinylButton[displayValue="0"],
+WPushButton#VinylStatus[displayValue="0"], /* off */
+#VinylCueButton[displayValue="0"],
 #VinylModeButton,
 #PassthroughButton[displayValue="0"],
 #FxAssignButtons WPushButton[displayValue="0"],
@@ -1209,7 +1210,9 @@ WBeatSpinBox, #spinBoxTransition,
   color: #d2d2d1;
   }
 
-#VinylButton[displayValue="1"],
+WPushButton#VinylStatus[displayValue="1"], /* enabled (green bg) */
+WPushButton#VinylStatus[displayValue="2"], /* end of record (blinking yellow bg) */
+WPushButton#VinylStatus[displayValue="3"], /* needle skip detected (pink bg) */
 #PassthroughButton[displayValue="1"],
 #VinylCueButton[displayValue="1"],
 #VinylCueButton[displayValue="2"],
@@ -1290,7 +1293,7 @@ QPushButton#pushButtonRecording:checked {
     border-image: url(skins:LateNight/classic/buttons/btn_embedded_grid_active.svg) 2 2 2 1;
   }
 WPushButton#FxAssignButton1[displayValue="0"],
-#VinylButton[displayValue="0"],
+WPushButton#VinylStatus[displayValue="0"],
 #KeyMatchReset[displayValue="0"],
 #GuiToggleButton[displayValue="0"],
 #SyncDeck[displayValue="0"],
@@ -1303,7 +1306,9 @@ WEffectSelector:!editable,
   border-width: 2px;
   border-image: url(skins:LateNight/classic/buttons/btn_embedded_library.svg) 2 2 2 2;
   }
-WPushButton#VinylButton[displayValue="1"],
+WPushButton#VinylStatus[displayValue="1"],
+WPushButton#VinylStatus[displayValue="2"],
+WPushButton#VinylStatus[displayValue="3"],
 WPushButton#FxAssignButton1[displayValue="1"],
 #KeyMatchReset[pressed="true"],
 #GuiToggleButton[displayValue="1"],
@@ -1464,6 +1469,7 @@ QPushButton#pushButtonRecording:checked {
 WPushButton#QuickEffectButton[displayValue="1"],
 #FxAssignButton1[displayValue="1"],
 #FxAssignButton2[displayValue="1"],
+WPushButton#VinylStatus[displayValue="1"], /* enabled, OK */
 #BroadcastButton[displayValue="2"] {
   background-color: #659f08;
 }
@@ -1490,14 +1496,15 @@ QPushButton#pushButtonRepeatPlaylist:checked {
   background-color: #888;
 }
 
+/* pink for error / warning*/
 #BroadcastButton[displayValue="3"],
-#BroadcastButton[displayValue="4"] {
-  /* pink */
+#BroadcastButton[displayValue="4"],
+WPushButton#VinylStatus[displayValue="3"] { /* needle skip detected */
   background-color: #f856e7;
 }
 
 /* Golden */
-#VinylButton[displayValue="1"],
+WPushButton#VinylStatus[displayValue="2"], /* blinks when the needle reaches the end of the record */
 #PassthroughButton[displayValue="1"],
 #GuiToggleButton[displayValue="1"],
 #GuiToggleButton[displayValue="2"],
@@ -1600,7 +1607,14 @@ WPushButton#FxExpandOverlay[displayValue="0"],
 WPushButton#SamplerExpand[displayValue="0"],
 #BeatgridControlsToggle,
 #SamplerControlsMini WPushButton,
-#RecDot {
+#RecDot,
+/* transparent buttons, 0-4 (max button state we have currently) */
+/* currently used for VINYL overlay */
+WPushButton#Blank[value="0"],
+WPushButton#Blank[value="1"],
+WPushButton#Blank[value="2"],
+WPushButton#Blank[value="3"],
+WPushButton#Blank[value="4"] {
   background-color: transparent;
 }
 
diff --git a/res/skins/LateNight/style_palemoon.qss b/res/skins/LateNight/style_palemoon.qss
index 5dd1b3233bf..f269e583b06 100644
--- a/res/skins/LateNight/style_palemoon.qss
+++ b/res/skins/LateNight/style_palemoon.qss
@@ -1347,7 +1347,7 @@ WEffectChainPresetSelector QAbstractScrollArea,
 #KnobLabel,
 #FxKnobLabel,
 #FxButtonLabel,
-#VinylButton[displayValue="0"],
+WPushButton#VinylStatus[displayValue="0"],
 #VinylCueButton[displayValue="0"],
 #VinylModeButton,
 #PassthroughButton[displayValue="0"],
@@ -1365,7 +1365,9 @@ WEffectChainPresetSelector QAbstractScrollArea,
   color: #444;
 }
 
-#VinylButton[displayValue="1"],
+WPushButton#VinylStatus[displayValue="1"], /* enabled (green bg) */
+WPushButton#VinylStatus[displayValue="2"], /* end of record (blinking yellow bg) */
+WPushButton#VinylStatus[displayValue="3"], /* needle skip detected (pink bg) */
 #VinylCueButton[displayValue="1"],
 #VinylCueButton[displayValue="2"],
 #PassthroughButton[displayValue="1"],
@@ -1438,7 +1440,7 @@ QPushButton#pushButtonRecording:checked {
 #BroadcastButton[displayValue="0"],
 #SkinSettingsToggle[displayValue="0"],
 #KeyMatchReset[displayValue="0"],
-WPushButton#VinylButton[displayValue="0"],
+WPushButton#VinylStatus[displayValue="0"],
 #SyncDeck[displayValue="0"],
 WPushButton#FxAssignButton1[displayValue="0"],
 WEffectSelector:!editable,
@@ -1451,7 +1453,9 @@ WEffectSelector:!editable,
   }
   /*
   WPushButton#BpmTap[displayValue="1"], */
-  WPushButton#VinylButton[displayValue="1"],
+  WPushButton#VinylStatus[displayValue="1"],
+  WPushButton#VinylStatus[displayValue="2"],
+  WPushButton#VinylStatus[displayValue="3"],
   #SyncDeck[displayValue="1"],
   WPushButton#FxAssignButton1[displayValue="1"],
   #KeyMatchReset[pressed="true"],
@@ -1651,7 +1655,6 @@ WPushButton#Reverse[pressed="true"],
 #MicTalk[value="1"], #AuxPlay[value="1"],
 #MicDucking[value="1"],
 #MicDucking[value="2"],
-#VinylButton[displayValue="1"],
 #PassthroughButton[displayValue="1"],
 #BroadcastButton[displayValue="4"], /* warning */
 QPushButton#pushButtonAutoDJ:checked,
@@ -1690,6 +1693,7 @@ QPushButton#pushButtonRecording:checked,
 /* Green for Fx toggles, QuickEffect + Fx12 */
 #FxUnit1 #FxToggleButton[displayValue="1"],
 #FxUnit2 #FxToggleButton[displayValue="1"],
+WPushButton#VinylStatus[displayValue="1"], /* enabled, OK */
 #BroadcastButton[displayValue="2"] {
   background-color: #438225;
   }
@@ -1701,7 +1705,7 @@ QPushButton#pushButtonRecording:checked,
   }
 /* Blue for Fx buttons 3/4 */
 #FxUnit3 #FxToggleButton[displayValue="1"],
-#FxUnit4 #FxToggleButton[displayValue="1"],
+#FxUnit4 #FxToggleButton[displayValue="1"]
 WBeatSpinBox::up-button:pressed,
 WBeatSpinBox::down-button:pressed,
 #spinBoxTransition::up-button:pressed,
@@ -1790,7 +1794,8 @@ WPushButton#FxSuperLinkInvertButton[displayValue="0"] {
 
 /* Yellow */
 #RecFeedback[displayValue="1"],     /* initialize recording */
-#BroadcastButton[displayValue="1"] {  /* connecting */
+#BroadcastButton[displayValue="1"], /* connecting */
+WPushButton#VinylStatus[displayValue="2"] {  /* blinks when the needle reaches the end of the record */
   background-color: #d09300;
 }
 
@@ -1798,9 +1803,10 @@ WPushButton#FxSuperLinkInvertButton[displayValue="0"] {
   background-color: #395579;
 }
 
-/* pink */
-#BroadcastButton[displayValue="3"], /* failure */
-#RecFeedback[displayValue="3"] {
+/* pink for error / failure / warning */
+#BroadcastButton[displayValue="3"],
+#RecFeedback[displayValue="3"],
+WPushButton#VinylStatus[displayValue="3"] { /* needle skip detected */
   background-color: #f856e7;
 }
 
@@ -1840,7 +1846,14 @@ WPushButton#CrossfaderButton[displayValue="0"],
 WPushButton#CrossfaderButton[displayValue="1"],
 WPushButton#RecButton[displayValue="0"],
 WPushButton#RecButton[displayValue="1"],
-#RecDot {
+#RecDot,
+/* transparent buttons, 0-4 (max button state we have currently) */
+/* currently used for VINYL overlay */
+WPushButton#Blank[value="0"],
+WPushButton#Blank[value="1"],
+WPushButton#Blank[value="2"],
+WPushButton#Blank[value="3"],
+WPushButton#Blank[value="4"] {
   background-color: transparent;
 }