Display current playback time for observation data

network/static/css/app.css

@@ -280,6 +280,12 @@ code.log p {
     -moz-transform: translate(0px,30px); /* Firefox */
 }
 
+.playback-time {
+    margin-right: 2px;
+    padding: 0.3em;
+    font-size: 1em;
+}
+
 .playpause {
     margin-right: 20px;
 }

network/static/js/observation_view.js

@@ -6,10 +6,19 @@ $(document).ready(function() {
 
     var observation_data = [];
 
+    var formatTime = function(timeSeconds) {
+        var minute = Math.floor(timeSeconds / 60); // get minute(integer) from timeSeconds
+        var tmp = Math.round(timeSeconds - (minute * 60)); // get second(integer) from timeSeconds
+        var second = (tmp < 10 ? '0' : '') + tmp; // make two-figured integer if less than 10
+
+        return String(minute + ':' + second); // combine minute and second in string
+    };
+
     $('.observation-data').each(function( index ){
-        var data_groundstation = $(this).data('groundstation');
-        var data_time_start = 1000 * $(this).data('start');
-        var data_time_end = 1000 * $(this).data('end');
+        var $this = $(this);
+        var data_groundstation = $this.data('groundstation');
+        var data_time_start = 1000 * $this.data('start');
+        var data_time_end = 1000 * $this.data('end');
         observation_data.push({label : data_groundstation, times : [{starting_time: data_time_start, ending_time: data_time_end}]});
     });
 
@@ -31,11 +40,13 @@ $(document).ready(function() {
 
     // Waveform loading
     $('.wave').each(function( index ){
-        var wid = $(this).data('id');
+        var $this = $(this);
+        var wid = $this.data('id');
         var wavesurfer = Object.create(WaveSurfer);
-        var data_payload_url = $(this).data('payload');
+        var data_payload_url = $this.data('payload');
         var container_el = '#data-' + wid;
         var loading = '#loading';
+        var $playbackTime = $('#playback-time-' + wid);
 
         wavesurfer.init({
           container: container_el,
@@ -47,13 +58,21 @@ $(document).ready(function() {
             $(loading).show();
         });
 
-        $(this).parents('.observation-data').find('.playpause').click( function(){
+        $this.parents('.observation-data').find('.playpause').click( function(){
             wavesurfer.playPause();
         });
 
         wavesurfer.load(data_payload_url);
 
         wavesurfer.on('ready', function() {
+            $playbackTime.text(formatTime(wavesurfer.getCurrentTime()));
+
+            wavesurfer.on('audioprocess', function(evt) {
+                $playbackTime.text(formatTime(evt));
+            });
+            wavesurfer.on('seek', function(evt) {
+                $playbackTime.text(formatTime(wavesurfer.getDuration() * evt));
+            });
             $(loading).hide();
         });
     });

network/templates/base/observation_view.html

@@ -130,6 +130,7 @@
                 <span class="glyphicon glyphicon-play"></span>
                 <span class="glyphicon glyphicon-pause"></span>
               </button>
+              <span id="playback-time-{{ data.id }}" class="label label-info pull-right playback-time"></span>
             </div>
           </div>
         {% endfor %}