Resolve merge conflict with master

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-boilerplate",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "devDependencies": {
     "angular": "1.2.x",
     "angular-mocks": "~1.2.x",
@@ -22,7 +22,7 @@
   },
   "dependencies": {},
   "resolutions": {
-    "angular": "1.2.11-build.2186+sha.766b3d5"
+    "angular": ">1.2.6"
   },
   "private": true
 }

package.json

@@ -1,7 +1,7 @@
 {
   "author": "QUT Bioacoustics",
   "name": "baw-client",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "The AngularJS client for the QUT Bioacoustics server",
   "licenses": {
     "type": "Apache",

src/app/annotationViewer/_annotation_viewer.scss

@@ -115,6 +115,10 @@ baw-annotation-viewer {
       top:  0;
       left: 0;
       @include vendor-prefix(transform, translatex(0 px));
+
+      &.hidden {
+        display: none;
+      }
     }
   }
 

src/app/annotationViewer/annotationViewer.tpl.html

@@ -18,7 +18,7 @@
             <img ng-src="{{model.media.spectrogram.url}}" src=""
                  ng-style="{width: model.converters.conversions.enforcedImageWidth, height: model.converters.conversions.enforcedImageHeight}">
             <div id="spectrogramAnnotations_{{id}}" ></div>
-            <div class="positionLine" baw-translate-x="positionLine()"></div>
+            <div class="positionLine" baw-translate-x="positionLine()" ng-class="{hidden: !model.audioElement.canPlay}" ></div>
         </div>
     </div>
 

src/app/app.js

@@ -72,6 +72,7 @@ var app = angular.module('baw',
                              'bawApp.filters', /* our filters.js     */
                              'bawApp.services', /* our services.js    */
                              'bawApp.services.unitConverter',
+                             'audio-control',
 
                              'http-auth-interceptor', /* the auth module    */
                              'angular-auth', /* the auth module    */

src/app/audioControl/_volumeControl.scss

@@ -0,0 +1,131 @@
+//noinspection CssInvalidHtmlTagReference
+volume-control {
+
+  width: 150px;
+
+  #volumeControl-mute {
+
+    span {
+      @extend .glyphicon;
+	  font-size: 13.6px;
+      &:before {
+        @extend .glyphicon-volume-up:before;
+      }
+
+    }
+
+    &.muted {
+      span {
+        &:before {
+          @extend .glyphicon-volume-off:before;
+        }
+      }
+    }
+
+  }
+
+
+
+
+    #volumeControl-slider {
+
+      -webkit-appearance: none;
+	  margin-left:-1px;
+	  position:relative;
+
+	  &:focus{
+		z-index:1;
+	  }
+
+      // track
+      $track-height : 2px;
+      $thumb-size: 10px;
+      @mixin track {
+        background-color: $btn-default-color;
+        border: none;
+        height: $track-height;
+
+      }
+
+      &::-ms-track {
+
+        color: transparent;
+        border: none;
+        @include track;
+      }
+      &::-moz-range-track {
+        @include track;
+      }
+      &::-webkit-slider-runnable-track {
+        @include track;
+      }
+
+
+      // thumb
+      @mixin thumb {
+        background: none ;
+        //background-color: blue;
+        background-color: $btn-default-bg;
+        width: $thumb-size;
+        height: $thumb-size;
+        border: solid $btn-default-color 1px;
+        @include rounded-corners(50%);
+        @include vendor-prefix(box-sizing, border-box);
+      }
+
+      &::-ms-thumb {
+        @include thumb;
+      }
+      &::-moz-range-thumb {
+        @include thumb;
+      }
+      &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        margin-top: - ($thumb-size / 2 ) + ($track-height/2);
+        @include thumb;
+
+      }
+
+      // before
+      &::-ms-fill-lower {
+        border: none;
+        background:none;
+      }
+
+      &::-ms-ticks-before {
+        display: none;
+        border: none;
+        background:none;
+      }
+
+      // after
+      &::-ms-fill-upper {
+        border: none;
+        background:none;
+
+      }
+
+      &::-ms-ticks-after {
+        display: none;
+        border: none;
+        background:none;
+      }
+    }
+
+
+}
+
+/*
+
+glyphicon glyphicon-volume-down
+glyphicon glyphicon-volume-off
+glyphicon glyphicon-volume-up
+
+.decipher-tags-taglist .icon-remove {
+  @extend .glyphicon;
+
+  &:before {
+    @extend .glyphicon-remove:before;
+  }
+}
+*/

src/app/audioControl/volumeControl.js

@@ -0,0 +1,53 @@
+var acds = acds || angular.module("audio-control", []);
+
+/**
+ * A directive for binding the volume of an audio element to some DOM.
+ *
+ */
+acds.directive("volumeControl", ["$parse", function ($parse) {
+    return {
+        restrict: "E",
+        scope: {
+            model: "="
+        },
+        templateUrl: "audioControl/volumeControl.tpl.html",
+        link: function(scope, $element, attrs,  controller, transcludeFunc) {
+
+            // get instances of the mute button and the slider
+            var element = $element[0],
+                muteButton = element.querySelector("#volumeControl-mute"),
+                slider = element.querySelector("#volumeControl-slider")
+                ;
+
+            // set up binding
+            // volume
+            scope.$watch(function(){
+                return scope.model ? scope.model.volume : null;
+            }, function volumeChanged(newValue, oldValue) {
+                scope.volume = newValue ? newValue * 100 : null;
+            });
+
+            // muted
+            scope.$watch(function(){
+                return scope.model ? scope.model.muted : null;
+            }, function mutedChanged(newValue, oldValue) {
+                scope.muted = newValue;
+            });
+
+            // bind from the inputs to the model
+            muteButton.addEventListener('click', function() {
+                scope.$apply(function() {
+                    scope.model.muted = !scope.model.muted;
+                });
+            });
+
+            function sliderChanged() {
+                scope.$apply(function() {
+                    scope.model.volume = parseFloat(slider.value) / 100;
+                });
+            }
+            slider.addEventListener('input', sliderChanged);
+            //slider.click();
+        }
+    };
+}]);

src/app/audioControl/volumeControl.tpl.html

@@ -0,0 +1,13 @@
+<div class="input-group-btn">
+    <button id="volumeControl-mute"
+            class="btn btn-default"
+            ng-class="{muted: muted}"  title="{{muted && 'Unmute' || 'Mute'}}">
+        <span></span>
+    </button>
+</div>
+    <input id="volumeControl-slider"
+           class="form-control"
+           type="range" value="{{volume}}"
+           max="100" min="0"
+           ng-disabled="muted"
+           title="{{ 'Volume ' + (volume | number:0) }}">

src/app/listen/_listen.scss

@@ -2,28 +2,41 @@
 .noPermissions {
   @extend .alert;
   @extend .alert-warning;
+
+  margin-bottom: 0;
+  padding: 5px;
 }
 
-.project-names>span:not(:last-child) {
-  word-spacing : -0.3em;
+.project-names > span:not(:last-child) {
+  word-spacing: -0.3em;
 
   & * {
     word-spacing: normal;
   }
 }
 
-#chunkInfo>span:nth-child(2) {
-  text-align: right;
+#chunkInfo {
 
-  input[type="range"] {
-    width: 300px;
+  // reset h1 style for page
+  font-size: 1.25em;
+  font-weight: 500;
+  line-height: 1.0;
+  margin-top: -10px;
+  margin-bottom: 10px;
 
+  &>span:nth-child(2) {
 
-  }
+    text-align: right;
 
-  &>span {
-    width: 40px;
-    display: inline-block;
+    input[type="range"] {
+      width: 300px;
+
+    }
+
+    & > span {
+      width: 40px;
+      display: inline-block;
+    }
   }
 }
 
@@ -73,51 +86,49 @@
   }
 
   & .reference {
-      margin:10px 10px 0px 10px;
+    margin: 10px 10px 0px 10px;
   }
 
-
 }
 
 #listenEditContainer.disabled {
 
-    & * {
-        color: rgba(0,0,0,0.2);
-
-    } 
+  & * {
+    color: rgba(0, 0, 0, 0.2);
 
-}
+  }
 
+}
 
 #chunkTimeStamps {
   width: 100%;
   text-align: center;
-  position:relative;
+  position: relative;
 
   & .position {
     display: inline-block;
     float: left;
   }
 
   & .left {
-    position:absolute;
+    position: absolute;
     left: 0px;
     top: 0px;
   }
 
   & .right {
-    position:absolute;
+    position: absolute;
     right: 0px;
-    top: 0px; 
+    top: 0px;
   }
 
   & .btn-toolbar {
-    margin-left:38%;
+    margin-left: 38%;
   }
 }
 
 #mainAudioElement {
-    display: none;
+  display: none;
 }
 
 #timeline {
@@ -171,14 +182,8 @@
     }
   }
 
-
-
-
 }
 
-
-
-
 .details-table {
   @extend .table;
   @extend .table-striped;