From 1ad86b1d80f08f4a0459cc92aede87ec7ff84dd7 Mon Sep 17 00:00:00 2001
From: Seth Call <sethcall@gmail.com>
Date: Tue, 28 Apr 2015 08:58:34 -0500
Subject: [PATCH] * VRFS-3098 - pause button added to jamtrack

---
 .../assets/images/content/icon_stopbutton.png | Bin 0 -> 365 bytes
 .../dialog/recordingFinishedDialog.js         |   6 ++
 .../assets/javascripts/playbackControls.js    |  52 +++++++++++++-----
 web/app/assets/javascripts/session.js         |  20 ++++++-
 .../stylesheets/client/session.css.scss       |   6 +-
 .../dialogs/recordingFinishedDialog.css.scss  |   2 +-
 .../stylesheets/web/audioWidgets.css.scss     |   7 ++-
 web/app/views/clients/_play_controls.html.erb |  15 +++--
 8 files changed, 82 insertions(+), 26 deletions(-)
 create mode 100644 web/app/assets/images/content/icon_stopbutton.png

diff --git a/web/app/assets/images/content/icon_stopbutton.png b/web/app/assets/images/content/icon_stopbutton.png
new file mode 100644
index 0000000000000000000000000000000000000000..37d19e686d19635e3b2e8a194debac66f19c7e6c
GIT binary patch
literal 365
zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE-VTavfC3&Vd9T(EcfWS|IVfk$L9
z0|U1(2s1Lwnj--eWH0gbb!ETLA}wmDc=j&~P@dtJr;B5V#p$h64ZD~e1zh95t4R6m
zIoQT*WNr``e9)R_p4SJhWv|`t9gIn4HkbUTb~T`Hvv!vMLH=DU|7UcqdZo}gPose=
zg26i>?|XFudkv%eg1yCFuU1Xla`o|zsCT{h<(rmFHI`9Xs~S4VZP}@Je0uq*_pB3|
zwoa1rOg;a4ve)TM*)MDn);GS$2ZRT+uNB@<V46LzLDh8KGS*3I>(ZWbAGmb2L};xk
zgV}+lw^`~>96!2;p*y3N?ZesE6Zf1}c*#=3ko;iz^VV8HtLK6Rtmh`45zL*#V0Zt4
z%6q$8IZS8nF{r)QtG>;1>Bdd>{0UDDPW(ExDZ%-j{sZya8p{`RFa5g+3<U;HS3j3^
HP6<r_ycv?V

literal 0
HcmV?d00001

diff --git a/web/app/assets/javascripts/dialog/recordingFinishedDialog.js b/web/app/assets/javascripts/dialog/recordingFinishedDialog.js
index 1bb456b43..866e460a1 100644
--- a/web/app/assets/javascripts/dialog/recordingFinishedDialog.js
+++ b/web/app/assets/javascripts/dialog/recordingFinishedDialog.js
@@ -246,6 +246,11 @@
     }
 
     function onPause() {
+      logger.debug("calling jamClient.SessionPausePlay");
+      context.jamClient.SessionPausePlay();
+    }
+
+    function onStop() {
       logger.debug("calling jamClient.SessionStopPlay");
       context.jamClient.SessionStopPlay();
     }
@@ -264,6 +269,7 @@
       registerClaimRecordingHandlers(true);
       registerDiscardRecordingHandlers(true);
       $(playbackControls)
+        .on('stop', onStop)
         .on('pause', onPause)
         .on('play', onPlay)
         .on('change-position', onChangePlayPosition);
diff --git a/web/app/assets/javascripts/playbackControls.js b/web/app/assets/javascripts/playbackControls.js
index db088672e..fb82ab0c6 100644
--- a/web/app/assets/javascripts/playbackControls.js
+++ b/web/app/assets/javascripts/playbackControls.js
@@ -29,6 +29,7 @@
 
         var $playButton = $('.play-button img.playbutton', $parentElement);
         var $pauseButton = $('.play-button img.pausebutton', $parentElement);
+        var $stopButton = $('.stop-button img.stopbutton', $parentElement);
         var $currentTime = $('.recording-current', $parentElement);
         var $duration = $('.duration-time', $parentElement);
         var $sliderBar = $('.recording-playback', $parentElement);
@@ -42,6 +43,7 @@
         var playbackDurationMs = 0;
         var playbackPositionMs = 0;
         var durationChanged = false;
+        var seenActivity = false;
 
         var endReached = false;
         var dragging = false;
@@ -53,6 +55,7 @@
         var playbackMonitorMode = PLAYBACK_MONITOR_MODE.MEDIA_FILE;
 
         function startPlay() {
+            seenActivity = false;
             updateIsPlaying(true);
             if(endReached) {
                 update(0, playbackDurationMs, playbackPlaying);
@@ -68,7 +71,12 @@
 
         function stopPlay(endReached) {
             updateIsPlaying(false);
-            $self.triggerHandler('pause', {playbackMode: playbackMode, playbackMonitorMode: playbackMonitorMode, endReached : endReached});
+            $self.triggerHandler('stop', {playbackMode: playbackMode, playbackMonitorMode: playbackMonitorMode, endReached : endReached});
+        }
+
+        function pausePlay(endReached) {
+          updateIsPlaying(false);
+          $self.triggerHandler('pause', {playbackMode: playbackMode, playbackMonitorMode: playbackMonitorMode, endReached : endReached});
         }
 
         function updateOffsetBasedOnPosition(offsetLeft) {
@@ -127,6 +135,17 @@
           //  return false;
           //}
 
+          pausePlay();
+          return false;
+        });
+
+        $stopButton.on('click', function(e) {
+          var sessionModel = context.JK.CurrentSessionModel || null;
+          //if(sessionModel && sessionModel.areControlsLockedForJamTrackRecording() && $parentElement.closest('.session-track').data('track_data').type == 'jam_track') {
+          //  context.JK.prodBubble($pauseButton, 'jamtrack-controls-disabled', {}, {positions:['top'], offsetParent: $pauseButton})
+          //  return false;
+          //}
+
           stopPlay();
           return false;
         });
@@ -202,18 +221,11 @@
               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(positionMs > 0) {
+              seenActivity = true;
             }
 
+
             if(playbackMonitorMode == PLAYBACK_MONITOR_MODE.METRONOME) {
               updateIsPlaying(isPlaying);
             }
@@ -221,6 +233,17 @@
               update(positionMs, durationMs, isPlaying);
             }
 
+            if(playbackMonitorMode == PLAYBACK_MONITOR_MODE.JAMTRACK) {
+
+              if(playbackPlaying) {
+                $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)
+              }
+
+            }
 
             monitorPlaybackTimeout = setTimeout(monitorRecordingPlayback, 500);
         }
@@ -232,9 +255,9 @@
             }
 
             // at the end of the play, the duration sets to 0, as does currentTime. but isPlaying does not reset to
-            logger.debug("currentTimeMs, durationTimeMs, mode", currentTimeMs, durationTimeMs, playbackMonitorMode);
-            if(currentTimeMs == 0 && durationTimeMs == 0) {
-                if(isPlaying) {
+            //logger.debug("currentTimeMs, durationTimeMs, mode", currentTimeMs, durationTimeMs, playbackMonitorMode);
+            if(currentTimeMs == 0 && seenActivity) {
+                if(playbackPlaying) {
                     isPlaying = false;
                     durationTimeMs = playbackDurationMs;
                     currentTimeMs = playbackDurationMs;
@@ -298,6 +321,7 @@
                     $pauseButton.hide();
                 }
 
+              logger.debug("updating is playing: " + isPlaying)
                 playbackPlaying = isPlaying;
             }
         }
diff --git a/web/app/assets/javascripts/session.js b/web/app/assets/javascripts/session.js
index 5f74f9b28..48776313c 100644
--- a/web/app/assets/javascripts/session.js
+++ b/web/app/assets/javascripts/session.js
@@ -3007,18 +3007,31 @@
         }
 
         function onPause(e, data) {
-            logger.debug("calling jamClient.SessionStopPlay. endReached:", data.endReached);
+            logger.debug("calling jamClient.SessionPausePlay. endReached:", data.endReached);
 
-            // if a JamTrack is open, and the user hits 'pause', we need to automatically stop the recording
+            // if a JamTrack is open, and the user hits 'pause' or 'stop', we need to automatically stop the recording
             if(sessionModel.jamTracks() && sessionModel.recordingModel.isRecording()) {
               startStopRecording();
             }
 
             if(!data.endReached) {
-              context.jamClient.SessionStopPlay();
+              context.jamClient.SessionPausePlay();
             }
         }
 
+        function onStop(e, data) {
+          logger.debug("calling jamClient.SessionStopPlay. endReached:", data.endReached);
+
+          // if a JamTrack is open, and the user hits 'pause' or 'stop', we need to automatically stop the recording
+          if(sessionModel.jamTracks() && sessionModel.recordingModel.isRecording()) {
+            startStopRecording();
+          }
+
+          if(!data.endReached) {
+            context.jamClient.SessionStopPlay();
+          }
+        }
+
         function onPlay(e, data) {
             logger.debug("calling jamClient.SessionStartPlay");
             context.jamClient.SessionStartPlay(data.playbackMode);
@@ -3179,6 +3192,7 @@
             $closePlaybackRecording.on('click', closeOpenMedia);
             $(playbackControls)
                 .on('pause', onPause)
+                .on('stop', onStop)
                 .on('play', onPlay)
                 .on('change-position', onChangePlayPosition);
             $(friendInput).focus(function() { $(this).val(''); })
diff --git a/web/app/assets/stylesheets/client/session.css.scss b/web/app/assets/stylesheets/client/session.css.scss
index 881386566..b400ecbc4 100644
--- a/web/app/assets/stylesheets/client/session.css.scss
+++ b/web/app/assets/stylesheets/client/session.css.scss
@@ -56,11 +56,11 @@
 
     .recording-position {
       display:inline-block;
-      width:calc(100% - 27px - 47px);  // 27 accounts for play arrow, 47px acconts for the total time (0:00)
+      width:calc(100% - 127px);  // 27 accounts for play arrow, 20 for stop, 47px acconts for the total time (0:00), and then some extra
 
       position:absolute;
       left:0;
-      margin-left:27px;
+      margin-left:55px;
 
       font-family:Arial, Helvetica, sans-serif;
       font-size:11px;
@@ -78,7 +78,7 @@
       bottom: 0;
       height: 25px;
 
-      .play-button {
+      .play-buttons {
         top:2px;
       }
       .recording-current {
diff --git a/web/app/assets/stylesheets/dialogs/recordingFinishedDialog.css.scss b/web/app/assets/stylesheets/dialogs/recordingFinishedDialog.css.scss
index 5d1b6b802..22c66dd7b 100644
--- a/web/app/assets/stylesheets/dialogs/recordingFinishedDialog.css.scss
+++ b/web/app/assets/stylesheets/dialogs/recordingFinishedDialog.css.scss
@@ -11,7 +11,7 @@
   }
 
   .recording-position {
-    margin: 5px 0 0 -15px;
+    margin: 5px 0 0 11px;
     width: 95%;
     display:inline-block;
   }
diff --git a/web/app/assets/stylesheets/web/audioWidgets.css.scss b/web/app/assets/stylesheets/web/audioWidgets.css.scss
index 4c044f8b7..abfb0dba3 100644
--- a/web/app/assets/stylesheets/web/audioWidgets.css.scss
+++ b/web/app/assets/stylesheets/web/audioWidgets.css.scss
@@ -90,12 +90,17 @@
     display:none;
   }
 
-  .play-button {
+  .play-buttons {
+    display:inline-block;
     outline: 0;
     // the following 3 properties were to make safari on iOS not wrap text after the .play-button  float:left was preferred
     position:absolute;
     left:5px;
     top:7px;
+
+    a {
+      outline: 0;
+    }
   }
 
   &.no-mount{
diff --git a/web/app/views/clients/_play_controls.html.erb b/web/app/views/clients/_play_controls.html.erb
index 671b1701f..6b35b3d98 100644
--- a/web/app/views/clients/_play_controls.html.erb
+++ b/web/app/views/clients/_play_controls.html.erb
@@ -6,10 +6,17 @@
     <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"} %>
-    <%= image_tag "content/icon_pausebutton.png", {:height => 20, :width => 20, :class=> "pausebutton"} %>
-  </a>
+  <div class="left play-buttons">
+    <a class="play-button" href="#">
+      <%= image_tag "content/icon_playbutton.png", {:height => 20, :width => 20, :class=> "playbutton"} %>
+      <%= image_tag "content/icon_pausebutton.png", {:height => 20, :width => 20, :class=> "pausebutton"} %>
+    </a>
+
+    <a class="stop-button" href="#">
+      <%= image_tag "content/icon_stopbutton.png", {:height => 20, :width => 20, :class=> "stopbutton"} %>
+    </a>
+
+  </div>
 
   <!-- playback position -->
   <div class="recording-position">