Tango: implement new 'play_latched' CO

9 files changed, 198 insertions, 67 deletions

diff --git a/res/skins/Tango/buttons/btn_pause_deck_mini.svg b/res/skins/Tango/buttons/btn_pause_deck_mini.svg
index d2905c8b44..606109714a 100644
--- a/res/skins/Tango/buttons/btn_pause_deck_mini.svg
+++ b/res/skins/Tango/buttons/btn_pause_deck_mini.svg
@@ -1 +1,34 @@
-<svg width="23" height="40" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m13 13h4v14h-4z" fill="#0f0f0f"/><path d="m6 13h4v14h-4z" fill="#0f0f0f"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="29"
+   height="20"
+   version="1.1"
+   id="svg6">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <path
+     d="m 16,3 h 4 v 14 h -4 z"
+     fill="#0f0f0f"
+     id="path2" />
+  <path
+     d="m 9,3 h 4 V 17 H 9 Z"
+     fill="#0f0f0f"
+     id="path4" />
+</svg>
diff --git a/res/skins/Tango/buttons/btn_play_deck_mini.svg b/res/skins/Tango/buttons/btn_play_deck_mini.svg
index 816c565a86..6b9064373c 100644
--- a/res/skins/Tango/buttons/btn_play_deck_mini.svg
+++ b/res/skins/Tango/buttons/btn_play_deck_mini.svg
@@ -1 +1,34 @@
-<svg width="23" height="40" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m19.142 20-12.142 7.0101v-14.02z" fill="#181818"/><path d="m17.975 20-10.392 6v-12z" fill="#ccc"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="29"
+   height="20"
+   version="1.1"
+   id="svg6">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <path
+     d="M 22.559,9.9999 10.417,17.01 V 2.99 Z"
+     fill="#181818"
+     id="path2" />
+  <path
+     d="m 21.392,9.9999 -10.392,6 v -12 z"
+     fill="#cccccc"
+     id="path4" />
+</svg>
diff --git a/res/skins/Tango/deck_left_mini.xml b/res/skins/Tango/deck_left_mini.xml
index b470067203..16b98bd8eb 100644
--- a/res/skins/Tango/deck_left_mini.xml
+++ b/res/skins/Tango/deck_left_mini.xml
@@ -175,29 +175,56 @@ Variables:
             </Connection>
           </WidgetGroup>
 
-          <WidgetGroup><!-- Play button incl. Cue & PlayIndicator -->
+          <WidgetGroup>
             <ObjectName>Spacer0f</ObjectName>
-            <Layout>stacked</Layout>
-            <Size>23f,40f</Size>
+            <Layout>vertical</Layout>
+            <Size>30f,40f</Size>
             <Children>
-              <!-- Play button -->
+
               <Template src="skin:button_2state_right_display.xml">
-                <SetVariable name="ObjectName">PlayCue</SetVariable>
-                <SetVariable name="TooltipId">play_cue_default</SetVariable>
-                <SetVariable name="Size">23f,40f</SetVariable>
-                <SetVariable name="state_0_icon">play_deck_mini.svg</SetVariable>
-                <SetVariable name="state_1_icon">pause_deck_mini.svg</SetVariable>
-                <SetVariable name="ConfigKey"><Variable name="group"/>,play</SetVariable>
-                <SetVariable name="ConfigKeyRight"><Variable name="group"/>,cue_default</SetVariable>
-              </Template>
-              <!--	Play indicator -->
-              <Template src="skin:button_2state.xml">
-                <SetVariable name="ObjectName">PlayIndicator</SetVariable>
-                <SetVariable name="Size">23f,40f</SetVariable>
-                <SetVariable name="ConfigKey"><Variable name="group"/>,play_indicator</SetVariable>
+                <SetVariable name="TooltipId">cue_default_cue_gotoandstop</SetVariable>
+                <SetVariable name="ObjectName">CueButton</SetVariable>
+                <SetVariable name="Size">30f,19f</SetVariable>
+                <SetVariable name="state_0_text">Q</SetVariable>
+                <SetVariable name="state_1_text">Q</SetVariable>
+                <SetVariable name="ConfigKey"><Variable name="group"/>,cue_default</SetVariable>
+                <SetVariable name="ConfigKeyRight"><Variable name="group"/>,cue_gotoandstop</SetVariable>
+                <SetVariable name="ConfigKeyDisp"><Variable name="group"/>,cue_indicator</SetVariable>
               </Template>
+
+              <WidgetGroup><Size>1f,1min</Size></WidgetGroup>
+
+              <WidgetGroup>
+                <Layout>stacked</Layout>
+                <Size>30f,40f</Size>
+                <Children>
+                  <!-- Play -->
+                  <Template src="skin:button_2state_right_display.xml">
+                    <SetVariable name="ObjectName">PlayCue</SetVariable>
+                    <SetVariable name="TooltipId">play_cue_set</SetVariable>
+                    <SetVariable name="Size">30f,20f</SetVariable>
+                    <SetVariable name="state_0_icon">play_deck_mini.svg</SetVariable>
+                    <SetVariable name="state_1_icon">pause_deck_mini.svg</SetVariable>
+                    <SetVariable name="ConfigKey"><Variable name="group"/>,play</SetVariable>
+                    <SetVariable name="ConfigKeyRight"><Variable name="group"/>,cue_set</SetVariable>
+                    <SetVariable name="ConfigKeyDisp"><Variable name="group"/>,play_latched</SetVariable>
+                  </Template>
+                  <!-- Preview indicator, indicates previewing from Cue or Hotcue -->
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="ObjectName">PreviewIndicator</SetVariable>
+                    <SetVariable name="Size">30f,20f</SetVariable>
+                    <SetVariable name="ConfigKey"><Variable name="group"/>,play</SetVariable>
+                  </Template>
+                  <!-- Play indicator, blinks depending on Cue mode -->
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="ObjectName">PlayIndicator</SetVariable>
+                    <SetVariable name="Size">30f,20f</SetVariable>
+                    <SetVariable name="ConfigKey"><Variable name="group"/>,play_indicator</SetVariable>
+                  </Template>
+                </Children>
+              </WidgetGroup>
             </Children>
-          </WidgetGroup><!-- Play button incl. Cue & PlayIndicator -->
+          </WidgetGroup>
 
         </Children>
       </WidgetGroup>
diff --git a/res/skins/Tango/deck_right_mini.xml b/res/skins/Tango/deck_right_mini.xml
index ffd85d56e8..ac464e2eab 100644
--- a/res/skins/Tango/deck_right_mini.xml
+++ b/res/skins/Tango/deck_right_mini.xml
@@ -19,29 +19,56 @@ Variables:
         <Size>i,40f</Size>
         <Children>
 
-          <WidgetGroup><!-- Play button incl. Cue & PlayIndicator -->
+          <WidgetGroup>
             <ObjectName>Spacer0f</ObjectName>
-            <Layout>stacked</Layout>
-            <Size>23f,40f</Size>
+            <Layout>vertical</Layout>
+            <Size>30f,40f</Size>
             <Children>
-              <!-- Play button -->
+
               <Template src="skin:button_2state_right_display.xml">
-                <SetVariable name="ObjectName">PlayCue</SetVariable>
-                <SetVariable name="TooltipId">play_cue_default</SetVariable>
-                <SetVariable name="Size">23f,40f</SetVariable>
-                <SetVariable name="state_0_icon">play_deck_mini.svg</SetVariable>
-                <SetVariable name="state_1_icon">pause_deck_mini.svg</SetVariable>
-                <SetVariable name="ConfigKey"><Variable name="group"/>,play</SetVariable>
-                <SetVariable name="ConfigKeyRight"><Variable name="group"/>,cue_default</SetVariable>
-              </Template>
-              <!--	Play indicator -->
-              <Template src="skin:button_2state.xml">
-                <SetVariable name="ObjectName">PlayIndicator</SetVariable>
-                <SetVariable name="Size">23f,40f</SetVariable>
-                <SetVariable name="ConfigKey"><Variable name="group"/>,play_indicator</SetVariable>
+                <SetVariable name="TooltipId">cue_default_cue_gotoandstop</SetVariable>
+                <SetVariable name="ObjectName">CueButton</SetVariable>
+                <SetVariable name="Size">30f,19f</SetVariable>
+                <SetVariable name="state_0_text">Q</SetVariable>
+                <SetVariable name="state_1_text">Q</SetVariable>
+                <SetVariable name="ConfigKey"><Variable name="group"/>,cue_default</SetVariable>
+                <SetVariable name="ConfigKeyRight"><Variable name="group"/>,cue_gotoandstop</SetVariable>
+                <SetVariable name="ConfigKeyDisp"><Variable name="group"/>,cue_indicator</SetVariable>
               </Template>
+
+              <WidgetGroup><Size>1f,1min</Size></WidgetGroup>
+
+              <WidgetGroup>
+                <Layout>stacked</Layout>
+                <Size>30f,40f</Size>
+                <Children>
+                  <!-- Play -->
+                  <Template src="skin:button_2state_right_display.xml">
+                    <SetVariable name="ObjectName">PlayCue</SetVariable>
+                    <SetVariable name="TooltipId">play_cue_set</SetVariable>
+                    <SetVariable name="Size">30f,20f</SetVariable>
+                    <SetVariable name="state_0_icon">play_deck_mini.svg</SetVariable>
+                    <SetVariable name="state_1_icon">pause_deck_mini.svg</SetVariable>
+                    <SetVariable name="ConfigKey"><Variable name="group"/>,play</SetVariable>
+                    <SetVariable name="ConfigKeyRight"><Variable name="group"/>,cue_set</SetVariable>
+                    <SetVariable name="ConfigKeyDisp"><Variable name="group"/>,play_latched</SetVariable>
+                  </Template>
+                  <!-- Preview indicator, indicates previewing from Cue or Hotcue -->
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="ObjectName">PreviewIndicator</SetVariable>
+                    <SetVariable name="Size">30f,20f</SetVariable>
+                    <SetVariable name="ConfigKey"><Variable name="group"/>,play</SetVariable>
+                  </Template>
+                  <!-- Play indicator, blinks depending on Cue mode -->
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="ObjectName">PlayIndicator</SetVariable>
+                    <SetVariable name="Size">30f,20f</SetVariable>
+                    <SetVariable name="ConfigKey"><Variable name="group"/>,play_indicator</SetVariable>
+                  </Template>
+                </Children>
+              </WidgetGroup>
             </Children>
-          </WidgetGroup><!-- Play button incl. Cue & PlayIndicator -->
+          </WidgetGroup>
 
           <WidgetGroup>
             <Size>1f,1min</Size>
diff --git a/res/skins/Tango/deck_row_transport_left.xml b/res/skins/Tango/deck_row_transport_left.xml
index 56243845d2..7270303555 100644
--- a/res/skins/Tango/deck_row_transport_left.xml
+++ b/res/skins/Tango/deck_row_transport_left.xml
@@ -214,13 +214,13 @@ Variables:
 
           <WidgetGroup><ObjectName>Spacer0f</ObjectName><Size>1f,1min</Size></WidgetGroup>
 
-          <WidgetGroup><!-- Play button & PlayIndicator -->
+          <WidgetGroup>
             <ObjectName>Spacer0f</ObjectName>
             <Layout>stacked</Layout>
             <Size>50f,24f</Size>
             <Children>
               <!-- Play -->
-              <Template src="skin:button_2state_right.xml">
+              <Template src="skin:button_2state_right_display.xml">
                 <SetVariable name="ObjectName">PlayCue</SetVariable>
                 <SetVariable name="TooltipId">play_cue_set</SetVariable>
                 <SetVariable name="Size">50f,24f</SetVariable>
@@ -228,6 +228,13 @@ Variables:
                 <SetVariable name="state_1_icon">pause_deck.svg</SetVariable>
                 <SetVariable name="ConfigKey"><Variable name="group"/>,play</SetVariable>
                 <SetVariable name="ConfigKeyRight"><Variable name="group"/>,cue_set</SetVariable>
+                <SetVariable name="ConfigKeyDisp"><Variable name="group"/>,play_latched</SetVariable>
+              </Template>
+              <!-- Preview indicator, indicates previewing from Cue or Hotcue -->
+              <Template src="skin:button_2state.xml">
+                <SetVariable name="ObjectName">PreviewIndicator</SetVariable>
+                <SetVariable name="Size">50f,24f</SetVariable>
+                <SetVariable name="ConfigKey"><Variable name="group"/>,play</SetVariable>
               </Template>
               <!-- Play indicator, blinks depending on Cue mode -->
               <Template src="skin:button_2state.xml">
@@ -236,7 +243,7 @@ Variables:
                 <SetVariable name="ConfigKey"><Variable name="group"/>,play_indicator</SetVariable>
               </Template>
             </Children>
-          </WidgetGroup><!-- Play button & PlayIndicator -->
+          </WidgetGroup><!-- Play -->
 
         </Children>
       </WidgetGroup><!-- /Play + deck controls -->
diff --git a/res/skins/Tango/deck_row_transport_right.xml b/res/skins/Tango/deck_row_transport_right.xml
index 1408f8a3d2..39ffc5c397 100644
--- a/res/skins/Tango/deck_row_transport_right.xml
+++ b/res/skins/Tango/deck_row_transport_right.xml
@@ -18,13 +18,13 @@ Variables:
     <Layout>horizontal</Layout>
     <Children>
 
-      <WidgetGroup><!-- Play button & PlayIndicator -->
+      <WidgetGroup>
         <ObjectName>Spacer0f</ObjectName>
         <Layout>stacked</Layout>
         <Size>50f,24f</Size>
         <Children>
           <!-- Play -->
-          <Template src="skin:button_2state_right.xml">
+          <Template src="skin:button_2state_right_display.xml">
             <SetVariable name="ObjectName">PlayCue</SetVariable>
             <SetVariable name="TooltipId">play_cue_set</SetVariable>
             <SetVariable name="Size">50f,24f</SetVariable>
@@ -32,6 +32,13 @@ Variables:
             <SetVariable name="state_1_icon">pause_deck.svg</SetVariable>
             <SetVariable name="ConfigKey"><Variable name="group"/>,play</SetVariable>
             <SetVariable name="ConfigKeyRight"><Variable name="group"/>,cue_set</SetVariable>
+            <SetVariable name="ConfigKeyDisp"><Variable name="group"/>,play_latched</SetVariable>
+          </Template>
+          <!-- Preview indicator, indicates previewing from Cue or Hotcue -->
+          <Template src="skin:button_2state.xml">
+            <SetVariable name="ObjectName">PreviewIndicator</SetVariable>
+            <SetVariable name="Size">50f,24f</SetVariable>
+            <SetVariable name="ConfigKey"><Variable name="group"/>,play</SetVariable>
           </Template>
           <!-- Play indicator, blinks depending on Cue mode -->
           <Template src="skin:button_2state.xml">
@@ -40,7 +47,7 @@ Variables:
             <SetVariable name="ConfigKey"><Variable name="group"/>,play_indicator</SetVariable>
           </Template>
         </Children>
-      </WidgetGroup><!-- Play button & PlayIndicator -->
+      </WidgetGroup><!-- Play -->
 
       <WidgetGroup><ObjectName>Spacer0f</ObjectName><Size>1f,1min</Size></WidgetGroup>
 
diff --git a/res/skins/Tango/preview_deck.xml b/res/skins/Tango/preview_deck.xml
index a032ecce92..b7471b1516 100644
--- a/res/skins/Tango/preview_deck.xml
+++ b/res/skins/Tango/preview_deck.xml
@@ -99,10 +99,9 @@ Variables:
                     <SetVariable name="ConfigKeyRight"><Variable name="group"/>,start</SetVariable>
                     <SetVariable name="ConfigKeyDisp"><Variable name="group"/>,play_indicator</SetVariable>
                   </Template>
-                  <!--	Turns Orange when playing Cue/HotCue.
-                        Only visible when play_indicator=0 -->
+                  <!-- Preview indicator, indicates previewing from Cue or Hotcue -->
                   <Template src="skin:button_2state.xml">
-                    <SetVariable name="ObjectName">CueUnderlay</SetVariable>
+                    <SetVariable name="ObjectName">PreviewIndicator</SetVariable>
                     <SetVariable name="Size">24f,34f</SetVariable>
                     <SetVariable name="ConfigKey"><Variable name="group"/>,play</SetVariable>
                   </Template>
diff --git a/res/skins/Tango/sampler.xml b/res/skins/Tango/sampler.xml
index f147b681ba..3713ac745a 100644
--- a/res/skins/Tango/sampler.xml
+++ b/res/skins/Tango/sampler.xml
@@ -18,16 +18,22 @@ Variables:
         <Layout>stacked</Layout>
         <Children>
           <Template src="skin:button_2state_right_display.xml">
-            <SetVariable name="ObjectName">SamplerPlayCue</SetVariable>
+            <SetVariable name="ObjectName">PlayCue</SetVariable>
             <SetVariable name="TooltipId">cue_gotoandplay_cue_default</SetVariable>
             <SetVariable name="Size">34f,34f</SetVariable>
             <SetVariable name="state_0_icon">play_sampler.svg</SetVariable>
             <SetVariable name="state_1_icon">pause_sampler.svg</SetVariable>
             <SetVariable name="ConfigKey"><Variable name="group"/>,cue_gotoandplay</SetVariable>
             <SetVariable name="ConfigKeyRight"><Variable name="group"/>,cue_default</SetVariable>
-            <SetVariable name="ConfigKeyDisp"><Variable name="group"/>,play</SetVariable>
+            <SetVariable name="ConfigKeyDisp"><Variable name="group"/>,play_latched</SetVariable>
           </Template>
-          <!-- Second layer is CoverArt. DefaultCover is transparent, bg-color #333 -->
+          <!-- Preview indicator, indicates previewing from Cue or Hotcue -->
+          <Template src="skin:button_2state.xml">
+            <SetVariable name="ObjectName">PreviewIndicator</SetVariable>
+            <SetVariable name="Size">34f,34f</SetVariable>
+            <SetVariable name="ConfigKey"><Variable name="group"/>,play</SetVariable>
+          </Template>
+          <!-- DefaultCover is transparent, bg-color #333 -->
           <CoverArt>
             <ObjectName>SamplerCover</ObjectName>
             <Size>34f,34f</Size>
diff --git a/res/skins/Tango/style.qss b/res/skins/Tango/style.qss
index 1e96f0c75b..46cf85dce8 100644
--- a/res/skins/Tango/style.qss
+++ b/res/skins/Tango/style.qss
@@ -898,17 +898,9 @@ WLabel#TrackComment {
 
 /* Actual Play button. Receives click events, turns red
   when playing regularly, not from Cue or HotCue */
-#PlayCue[displayValue="0"],
-#PlayCue[displayValue="0"]:hover {
+#PlayCue[displayValue="0"] {
   background-color: transparent;
   }
-
-#SamplerPlayCue[displayValue="0"] {
-  /* different than decks' Play button, this has some soft shadow to distinguish
-  it better from underlying Cover Art (if available) */
-  background-color: transparent;  /*
-  image: url(skin:/buttons/btn_sampler_play.png) no-repeat center center; */
-  }
   #SamplerPlayCueUnderlay[displayValue="1"] {
     background: #a90000;
   }
@@ -925,30 +917,30 @@ WLabel#TrackComment {
 }
 
 #PlayCue[displayValue="0"]:hover,
-#SamplerPlayCue[displayValue="0"]:hover,
 #MicTalkover[displayValue="0"]:hover,
 #AuxEnable[displayValue="0"]:hover,
 #MicAuxAdd[displayValue="0"]:hover {
   border: 1px solid #ff9900;
   }
-  #SamplerPlayCue[displayValue="0"]:hover {
+  #SamplerDeck #PlayCue[displayValue="0"]:hover {
     background-color: rgba(255, 128, 0, 210);
   }
 
 #PlayCue[displayValue="1"],
-#SamplerPlayCue[displayValue="1"] { /*
-  image: url(skin:/buttons/btn_pause.svg) no-repeat center center;  */
-}
-#PlayCue[value="1"],
 #PlayIndicator[value="1"],
-#SamplerPlayCue[displayValue="1"],
 #MicTalkover[displayValue="1"],
 #AuxEnable[displayValue="1"],
 #PassthroughPlayCover,
 #LoopIndicator {
   background-color: #ff8000;
   border: 1px solid #ff9900;
-}
+  }
+  #PreviewIndicator[value="1"] {
+    border: 3px solid #ff9900;
+  }
+  #PreviewPlay #PreviewIndicator {
+    background-color: #333;
+  }
   #PlayCue[displayValue="1"]:hover,
   #SamplerPlayCue[displayValue="1"]:hover,
   #MicTalkover[displayValue="1"]:hover,