Fixes #60

Just a simple input[type="range"] bound to max duration of current audio recording. Go button creates href and changes window location.
QutEcoacoustics · Dec 21, 2013 · 02dd240 · 02dd240
1 parent 0c38dc5
commit 02dd240
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 5 deletions.
diff --git a/src/app/listen/_listen.scss b/src/app/listen/_listen.scss
@@ -1,3 +1,17 @@
+#chunkInfo>span:nth-child(2) {
+  text-align: right;
+
+  input[type="range"] {
+    width: 300px;
+  }
+
+  &>span {
+    width: 40px;
+    display: inline-block;
+  }
+}
+
+
 .position {
   & span {
     margin-left: 10px;

diff --git a/src/app/listen/listen.js b/src/app/listen/listen.js
@@ -2,6 +2,7 @@ angular.module('bawApp.listen', ['decipher.tags', 'ui.bootstrap.typeahead'])
 
     .controller('ListenCtrl', ['$scope',
         '$resource',
+        '$location',
         '$routeParams',
         '$route',
         'conf.paths',
@@ -29,8 +30,8 @@ angular.module('bawApp.listen', ['decipher.tags', 'ui.bootstrap.typeahead'])
          * @param Taggings
          */
             function ListenCtrl(
-            $scope, $resource, $routeParams, $route, paths, constants, $url, AudioRecording, Media, AudioEvent, Tag,
-            Taggings) {
+            $scope, $resource, $location, $routeParams, $route, paths, constants, $url,
+            AudioRecording, Media, AudioEvent, Tag, Taggings) {
             var CHUNK_DURATION_SECONDS = constants.listen.chunkDurationSeconds;
 
             function getMediaParameters(format) {
@@ -147,6 +148,11 @@ angular.module('bawApp.listen', ['decipher.tags', 'ui.bootstrap.typeahead'])
                     function audioRecordingGetSuccess() {
                         // no-op
                         // if an audioRecording 'model' is ever created, this is where we would transform the returned data
+
+                        // set up jumpto vars
+                        var maxMinutes = Math.floor(parseFloat($scope.model.audioRecording.durationSeconds) / 60);
+                        $scope.jumpToMax = maxMinutes;
+                        $scope.jumpToMinute = Math.floor( parseFloat($routeParams.start) / 60);
                     },
                     function audioRecordingGetFailure() {
                         console.error("retrieval of audioRecording json failed");
@@ -310,6 +316,27 @@ angular.module('bawApp.listen', ['decipher.tags', 'ui.bootstrap.typeahead'])
                     throw "Invalid link type specified in createNavigationHref";
                 };
 
+                $scope.jumpTo = function() {
+                    var maxEnd = Math.floor($scope.model.audioRecording.durationSeconds),
+                        seconds = $scope.jumpToMinute * 60;
+                    if (seconds < 0) {
+                        seconds = 0;
+                    }
+                    if (seconds > (maxEnd - CHUNK_DURATION_SECONDS)) {
+                        seconds = (maxEnd - CHUNK_DURATION_SECONDS);
+                    }
+
+                    var url = $url.formatUri(
+                        paths.site.ngRoutes.listen,
+                        {
+                            recordingId: recordingId,
+                            start: seconds,
+                            end: seconds + CHUNK_DURATION_SECONDS
+                        });
+
+                    $location.url(url);
+                };
+
                 $scope.clearSelected = function () {
                     $scope.model.audioEvents.forEach(function (value, key) {
                         value.selected = false;

diff --git a/src/app/listen/listen.tpl.html b/src/app/listen/listen.tpl.html
@@ -4,8 +4,21 @@
     </div>
     <div ng-hide="errorState">
 
-        <h4 class="center-block">Site: {{model.audioRecording.siteId}}, <span class="hint absolute-time hint--top">{{absoluteDateChunkStart() | moment:"format":"dddd, MMMM Do YYYY, HH:mm:ss ZZ"}}</span><span></span>
+        <h4 id="chunkInfo" class="row">
+            <span class="col-md-8">
+                Site: {{model.audioRecording.siteId}},
+                <span class="hint absolute-time hint--top">{{absoluteDateChunkStart() | moment:"format":"dddd, MMMM Do YYYY, HH:mm:ss ZZ"}}</span>
+                </span>
+            <span class="col-md-4">
+                Jump to minute:
+                <input type="range" ng-model="jumpToMinute" min="0" max="{{jumpToMax}}" step="1" ></input>
+                <span>{{jumpToMinute}}</span>
+                <button class="btn btn-default" ng-click="jumpTo()" >Go</button>
+            </span>
         </h4>
+        <small>The recording started on <span class="hint absolute-time hint--top">{{model.audioRecording.recordedDate | moment:"format":"MMMM Do YYYY, HH:mm:ss ZZ"}}</span>
+            and is <span class="hint duration hint--top">{{model.audioRecording.durationSeconds | formatTimeSpan}} </span> long.
+        </small>
 
         <baw-annotation-viewer model="model"></baw-annotation-viewer>
 
@@ -212,8 +225,8 @@ <h2 class="debug-ui">Timeline</h2>
         <h2 class="debug-ui">Stats</h2>
         <ul class="debug-ui">
             <li>
-                Audio recording: <span class="hint absolute-time hint--top">{{model.audioRecording.recordedDate | moment:"format":"dddd, MMMM Do YYYY, HH:mm:ss ZZ"}}</span>,
-                Duration of recording: <span class="hint duration hint--top">{{model.audioRecording.durationSeconds | formatTimeSpan}} </span>
+
+
             </li>
             <li>
                 Segment: <span class="hint absolute-time hint--top">--TODO--</span>, Duration of segment: <span