Worked on some time formatting

app/assets/javascripts/angular/controllers/listen.js

@@ -105,10 +105,17 @@ function ListenCtrl($scope, $resource, $routeParams, Media, AudioEvent, Tag) {
 
 
         $scope.startOffset = function() {
-            return moment($scope.media.model.original.recordedDate).add({seconds: $scope.media.model.startOffset});
+            if (!$scope.model.media) {
+                return;
+            }
+
+            return moment($scope.model.media.original.recordedDate).add({seconds: $scope.model.media.startOffset});
         };
         $scope.endOffset = function() {
-            return moment($scope.media.model.original.recordedDate).add({seconds: $scope.media.model.endOffset});
+            if (!$scope.model.media) {
+                return;
+            }
+            return moment($scope.model.media.original.recordedDate).add({seconds: $scope.model.media.endOffset});
         };
 
         $scope.clearSelected = function() {

app/assets/stylesheets/_base.css.scss

@@ -24,6 +24,13 @@ $master-complementary:  #4A2B66 #73305F #34346A;
 
 $error-dirty:           rgba(216, 109, 132, 0.7) rgba(216, 109, 132, 0.4) rgba(216, 109, 132, 0.1);
 
+// https://kuler.adobe.com/#themeID/2220568
+$time-recording-relative-color: #67BF47;
+$time-segment-relative-color: #2DA65D;
+$time-chunk-relative-color: #34888C;
+$time-absolute-color: #414F73;
+$time-duration-color: #EEF272;
+
 $standard-padding-horizontal: 0.5em;
 $standard-padding-vertical:   0.25em;
 $standard-padding:             $standard-padding-vertical $standard-padding-horizontal;
@@ -37,7 +44,7 @@ $adjacent-padding: $standard-padding-horizontal / 2;
 $border-width: 1px;
 $border-style: solid;
 $standard-border: $border-width $border-style;
-$standard-border-radius: 6px;
+$standard-border-radius: 4px;
 
 $standard-glow-alpha: 0.2;
 

app/assets/stylesheets/application.css.scss

@@ -12,12 +12,13 @@
  * require jquery.ui.all # disabled because slow
  *= require_tree ../../../vendor/assets/javascripts/.
  *= require_tree ../images/.
+ *= require vendor
  * require_tree .
  * require_tree bootstrap
  * depend_on "_base"
  */
 
-
+@import "hint.css\_hint.scss";
 @import "base";
 @import "layout";
 @import "_dynamic.css.scss.erb";

app/assets/stylesheets/partials/_listen.css.scss

@@ -13,4 +13,18 @@
 #listenTableColumn {
   display: inline-block;
   vertical-align: top;
+}
+
+#segmentTimeStamps {
+  width: 100%;
+
+  & span {
+    &:nth-child(1) {
+      float: left;
+    }
+
+    &:nth-child(2) {
+      float: right;
+    }
+  }
 }

app/assets/stylesheets/partials/_time_formats.css.scss

@@ -0,0 +1,53 @@
+@import 'base';
+
+@mixin hint-custom-color($color, $content) {
+  border-color: $color;
+
+  &:before {
+    border-top-color: $color;
+  }
+  &:after{
+    background-color: $color;
+    text-shadow: darken($color, 20%);
+    content: $content;
+  }
+
+}
+
+.time {
+  background-color: nth($master-background, 2) ;
+  @include rounded-corners($standard-border-radius);
+  color: nth($master-dark, 2);
+  border-style: solid;
+  border-width: 2px;
+  @extend .hint;
+  @extend .hint--top;
+  padding: 0 $standard-padding-horizontal;
+}
+
+.relative-recording-time {
+  @extend .time;
+  @include hint-custom-color($time-recording-relative-color, "Time measured from the start of the audio file");
+
+}
+
+.relative-segment-time {
+  @extend .time;
+  @include hint-custom-color($time-segment-relative-color, "Time measured from the start of the segment");
+}
+
+.relative-chunk-time {
+  @extend .time;
+  @include hint-custom-color($time-chunk-relative-color, "Time measured from the start of the playing audio");
+}
+
+.absolute-time {
+  @extend .time;
+  @include hint-custom-color($time-absolute-color, "An absolute point in time");
+}
+
+.duration {
+  @extend .time;
+  @include hint-custom-color($time-duration-color, "A span of time (a length)");
+}
+

app/assets/templates/annotation_viewer.html

@@ -18,5 +18,6 @@
     </div>
 
     <div id="controls">
+
     </div>
 </div>

app/assets/templates/listen.html

@@ -13,13 +13,13 @@ <h1>Listen</h1>
 
         <h3>Spectrogram</h3>
         <p>
-           Date: {{model.media.original.recordedDate | moment:"format":"dddd, MMMM Do YYYY, HH:mm:ss ZZ"}}
+           Start date of audio recording: <span class="absolute-time">{{model.media.original.recordedDate | moment:"format":"dddd, MMMM Do YYYY, HH:mm:ss ZZ"}}</span>, Duration: {{model.media.original.duration}}seconds
         </p>
         <baw-annotation-viewer model="model"></baw-annotation-viewer>
-        <p>
-            <span>Date: {{model.media.original.recordedDate}}</span>
-            <span>Date: {{model.media.original.recordedDate}}</span>
-        </p>
+        <div id="segmentTimeStamps">
+            <span >Segment start: <span class="relative-chunk-time">{{model.media.startOffset| moment:"format":"HH:mm:ss"}}</span></span>
+            <span >Segment end: <span class="relative-chunk-time">{{model.media.startOffset | moment:"format":"HH:mm:ss"}}</span></span>
+        </div>
 
         <h3>Audio Controls</h3>
         <audio id="main-player" ng-audio="model.audioElement" controls>
@@ -120,8 +120,8 @@ <h3>Annotations</h3>
                         <td>{{ae.updatedAt}}</td>
                         <td>{{ae.updaterId}}</td>
                         <td><span ng-repeat="t in ae.audioEventTags">{{t.tagId}}{{!$last && ',' || ''}}</span></td>
-                        <td>{{ae.startTimeSeconds}} - {{ae.endTimeSeconds}}</td>
-                        <td>{{ae.lowFrequencyHertz}} - {{ae.highFrequencyHertz}}</td>
+                        <td>{{ae.startTimeSeconds | number:3}} - {{ae.endTimeSeconds | number:3}}</td>
+                        <td>{{ae.lowFrequencyHertz  | number:3}} - {{ae.highFrequencyHertz | number:3}}</td>
                     </tr>
                     </tbody>
                 </table>