* VRFS-2945 - jamtrack countin spinner and text now showing

web/app/assets/javascripts/playbackControls.js

@@ -34,6 +34,7 @@
         var $sliderBar = $('.recording-playback', $parentElement);
         var $slider = $('.recording-slider', $parentElement);
         var $playmodeButton = $('.playback-mode-buttons.icheckbuttons input', $parentElement);
+        var $jamTrackGetReady = $('.jam-track-get-ready', $parentElement);
 
         var $self = $(this);
 
@@ -158,7 +159,9 @@
             setPlaybackMode(playmode);
         });
 
-        function styleControls( ) {
+        function styleControls() {
+          $jamTrackGetReady.attr('data-mode', playbackMonitorMode);
+
           $parentElement.removeClass('mediafile-mode jamtrack-mode metronome-mode');
           if(playbackMonitorMode == PLAYBACK_MONITOR_MODE.MEDIA_FILE) {
             $parentElement.addClass('mediafile-mode');
@@ -194,6 +197,18 @@
               positionMs = 0;
             }
 
+            if(playbackMonitorMode = PLAYBACK_MONITOR_MODE.JAMTRACK) {
+
+              if(isPlaying) {
+                $jamTrackGetReady.attr('data-current-time', positionMs)
+              }
+              else {
+                // this is so the jamtrack 'Get Ready!' stays hidden when it's not playing
+                $jamTrackGetReady.attr('data-current-time', -1)
+              }
+
+            }
+
             if(playbackMonitorMode == PLAYBACK_MONITOR_MODE.METRONOME) {
               updateIsPlaying(isPlaying);
             }

web/app/assets/stylesheets/client/session.css.scss

@@ -84,6 +84,32 @@
       .recording-current {
         top:3px ! important;
       }
+
+      .jam-track-get-ready {
+        display:none;
+        position:absolute;
+        top:-29px;
+        margin-left:-50px;
+        width:100px;
+        vertical-align:middle;
+        height:32px;
+        line-height:32px;
+        left:50%;
+
+        &[data-mode="JAMTRACK"] {
+          &[data-current-time="0"] {
+            display:block;
+          }
+        }
+        .spinner-small {
+          vertical-align:middle;
+          display:inline-block;
+        }
+
+        span {
+          vertical-align:middle;
+        }
+      }
     }
 
     .playback-mode-buttons {

web/app/views/clients/_play_controls.html.erb

@@ -1,6 +1,10 @@
 <!-- recording play controls -->
 <div class="recording recording-controls has-mix">
 
+  <div class="jam-track-get-ready">
+    <div class="spinner-small"></div>
+    <span>Get Ready!</span>
+  </div>
   <!-- play button -->
   <a class="left play-button" href="#">
     <%= image_tag "content/icon_playbutton.png", {:height => 20, :width => 20, :class=> "playbutton"} %>