Finished work on volume control.

It is bound correctly and styled.

Ready for review.

src/app/app.js

@@ -70,6 +70,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,125 @@
+//noinspection CssInvalidHtmlTagReference
+volume-control {
+
+  width: 150px;
+
+  #volumeControl-mute {
+
+    span {
+      @extend .glyphicon;
+
+      &:before {
+        @extend .glyphicon-volume-up:before;
+      }
+
+    }
+
+    &.muted {
+      span {
+        &:before {
+          @extend .glyphicon-volume-off:before;
+        }
+      }
+    }
+
+  }
+
+
+
+
+    #volumeControl-slider {
+
+      -webkit-appearance: none;
+
+      // 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

@@ -1,39 +1,53 @@
-var acds = acds || angular.module('audio-control', []);
+var acds = acds || angular.module("audio-control", []);
 
 /**
  * A directive for binding the volume of an audio element to some DOM.
  *
  */
-bawds.directive('volumeControl', ['$parse', function ($parse) {
+acds.directive("volumeControl", ["$parse", function ($parse) {
     return {
         restrict: "E",
         scope: {
-            ngAudio: "="
+            model: "="
         },
         templateUrl: "audioControl/volumeControl.tpl.html",
-        link: function(scope, element, attrs,  controller, transcludeFunc) {
+        link: function(scope, $element, attrs,  controller, transcludeFunc) {
 
             // get instances of the mute button and the slider
-            var muteButton = null,
-                slider = null;
+            var element = $element[0],
+                muteButton = element.querySelector("#volumeControl-mute"),
+                slider = element.querySelector("#volumeControl-slider")
+                ;
 
             // set up binding
-            scope.$watch("expression", function volumeChanged(newValue, oldValue) {
-
+            // volume
+            scope.$watch(function(){
+                return scope.model ? scope.model.volume : null;
+            }, function volumeChanged(newValue, oldValue) {
+                scope.volume = newValue ? newValue * 100 : null;
             });
 
-            scope.$watch("expression", function mutedChanged(newValue, oldValue) {
-
+            // 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.click = function() {
-
-            };
-
-            slider.click(function() {
-
+            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

@@ -1,8 +1,13 @@
-<div id="volumeControl-mute">
-    <input type="button">
+<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>
-<div id="volumeControl-slider">
-    <input type="range" value="50" max="100" min="0" title="Volume">
-
-    </input>
-</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.tpl.html

@@ -31,7 +31,9 @@ <h4 class="center-block">Site: {{model.audioRecording.siteId}}, <span class="hin
                         <span class="glyphicon glyphicon-play"></span>
                     </button>
 
+
                 </div>
+                <volume-control model="model.audioElement" class="input-group btn-group" ></volume-control>
                 <div class="btn-group">
                     <a class="btn btn-default" ng-href="{{createNavigationHref('next')}}" ng-disabled="!nextEnabled" title="Next Recording">
                         <span class="glyphicon glyphicon-step-forward"></span>

src/components/directives/ngAudio.js

@@ -16,6 +16,31 @@ bawds.directive('ngAudio', ['$parse', function ($parse) {
                 throw 'Cannot put ngAudio element on an element that is not a <audio />';
             }
 
+            var expression = $parse(attributes.ngAudio);
+
+            /*
+             * FORWARD BINDING
+             *
+             * NOTE: only some properties are bound forward
+             */
+
+            // volume
+            scope.$watch(function() {
+                var target = expression(scope);
+                return target ? target.volume : null;
+            }, function updateVolume(newValue, oldValue) {
+               element.volume = newValue;
+            });
+
+            // muted
+            scope.$watch(function() {
+                var target = expression(scope);
+                return target ? target.muted : null;
+            }, function updateMuted(newValue, oldValue) {
+                element.muted = !!newValue;
+            });
+
+
             function play() {
                 element.play();
             }
@@ -28,7 +53,11 @@ bawds.directive('ngAudio', ['$parse', function ($parse) {
                 element.currentTime = 0;
             }
 
-            var propertiesToUpdate = ['duration', 'src', 'currentSrc', 'volume'];
+            /*
+             * REVERSE BINDING
+             */
+
+            var propertiesToUpdate = ['duration', 'src', 'currentSrc', 'volume', 'muted'];
             function updateObject(src, dest) {
                 for (var i = 0; i < propertiesToUpdate.length; i++){
                     dest[propertiesToUpdate[i]] = src[propertiesToUpdate[i]];
@@ -38,7 +67,6 @@ bawds.directive('ngAudio', ['$parse', function ($parse) {
             function updateState(event) {
                 scope.$safeApply2(function () {
                     if (attributes.ngAudio) {
-                        var expression = $parse(attributes.ngAudio);
                         var target = expression(scope);
                         if (!target) {
                             expression.assign(scope, {});
@@ -64,6 +92,7 @@ bawds.directive('ngAudio', ['$parse', function ($parse) {
                 'abort': undefined,
                 'canplay': undefined,
                 'canplaythrough': undefined,
+                // TODO: why does this event need a special handler?
                 'durationchange': function (event) {
                     scope.$safeApply2(function () {
                         if (attributes.ngAudio) {