feat(audioButtons): begin to componentize audio buttons play/pause an…

…d volume slider

src/app/citizenScience/bristlebird/listen.tpl.html

@@ -26,13 +26,19 @@ <h2>Eastern Bristlebird Search
                                 type="{{media.available.audio[key].mimeType}}">
                         Your browser does not support the audio element.
                     </audio>
+
+
+
                 </div>
             </div>
 
             <nav class="cs-progress">
 
                 <dataset-progress items="samples" selected="currentSampleNum"></dataset-progress>
 
+
+                <play-button audio-element="model.audioElement"></play-button>
+
                 <div class="autoplay progressCell">
                     <toggle-switch model="model.audioElement.autoPlay" disabled="disabled" mode="push-toggle"
                                    title="Enable/disable autoplay">
@@ -45,6 +51,8 @@ <h2>Eastern Bristlebird Search
                     </toggle-switch>
                 </div>
 
+                <volume-slider audio-element="model.audioElement"></volume-slider>
+
             </nav>
 
             <citizen-science-labels labels="labels"

src/components/directives/audioButtons/_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/components/directives/audioButtons/playButton.js

@@ -0,0 +1,33 @@
+var audioButtons = audioButtons || angular.module("bawApp.components.audioButtons", []);
+
+
+audioButtons.component("playButton", {
+        templateUrl: "components/directives/audioButtons/playButton.tpl.html",
+        controller: [
+            "$scope",
+            "AudioEvent",
+            "baw.models.AudioEvent",
+            function ($scope, AudioEventService, AudioEvent) {
+
+                var self = this;
+
+                $scope.audioElement = self.audioElement;
+
+                /**
+                 * Toggles play/pause state when play/pause button is pressed
+                 */
+                $scope.togglePlayState = function togglePlay() {
+                    if ($scope.audioElement.isPlaying) {
+                        $scope.audioElement.pause();
+                    }
+                    else {
+                        $scope.audioElement.play();
+                    }
+                };
+
+
+            }],
+        bindings: {
+            audioElement: "="
+        }
+    });

src/components/directives/audioButtons/playButton.tpl.html

@@ -0,0 +1,7 @@
+    <button ng-disabled="!audioModel.audioElement.canPlay"
+            class="btn btn-default"
+            ng-click="togglePlayState()"
+            title="{{ audioModel.audioElement.isPlaying && 'Pause' || 'Play' }}">
+                        <span ng-class="{'glyphicon-pause': audioModel.audioElement.isPlaying}"
+                              class="glyphicon glyphicon-play"></span>
+    </button>

src/components/directives/audioButtons/volumeSlider.js

@@ -0,0 +1,71 @@
+var audioButtons = audioButtons || angular.module("bawApp.components.audioButtons", []);
+
+
+
+audioButtons.component("volumeSlider", {
+    templateUrl: "components/directives/audioButtons/volumeSlider.tpl.html",
+    controller: [
+        "$scope",
+        "AudioEvent",
+        "baw.models.AudioEvent",
+        function ($scope, AudioEventService, AudioEvent) {
+
+            var self = this;
+            $scope.audioElement = self.audioElement;
+
+            $scope.muted = self.audioElement.muted;
+            $scope.volume = self.audioElement.volume;
+            $scope.displayVolume = self.audioElement.volume * 100;
+
+
+            // $scope.$watch("displayVolume", function (newVal, oldVal) {
+            //
+            // });
+
+            $scope.$watch(function () { return self.audioElement.volume; }, function (newVal, oldVal) {
+                $scope.displayVolume = newVal * 100;
+            });
+
+
+            // /**
+            //  * Update volume value on scope if volume of audioModel changes
+            //  * TODO: is this necessary? carried over from componentizing listen page volume directive
+            //  */
+            // $scope.$watch(function(){
+            //     return $scope.audioElement ? $scope.audioElement.volume : null;
+            // }, function volumeChanged(newValue, oldValue) {
+            //     $scope.audioElement.volume = newValue ? newValue * 100 : null;
+            // });
+
+            //
+            // /**
+            //  * Update muted value on scope when muted value on audioModel changes
+            //  * TODO: is this necessary? carried over from componentizing listen-page volume directive
+            //  */
+            // $scope.$watch(function(){
+            //     return $scope.audioElement ? $scope.audioElement.muted : null;
+            // }, function mutedChanged(newValue, oldValue) {
+            //     //$scope.audioElement.muted = newValue;
+            // });
+
+            /**
+             * toggles the value for muted on the audio model
+             */
+            $scope.toggleMute = function () {
+                $scope.audioElement.muted = !$scope.audioElement.muted;
+            };
+
+            /**
+             * changes the value of the volume on the audioModel when the slider is changed
+             */
+            $scope.sliderChanged = function () {
+                self.audioElement.volume = $scope.displayVolume / 100;
+            };
+
+
+        }],
+    bindings: {
+        audioElement: "="
+    }
+});
+

src/components/directives/audioButtons/volumeSlider.tpl.html

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

src/components/directives/directives.js

@@ -12,5 +12,6 @@ angular.module("bawApp.directives",
         "bawApp.directives.inputRange",
         "bawApp.directives.toggleSwitch",
         "bawApp.directives.ngForm",
+        "bawApp.components.audioButtons"
     ]);
 

src/components/directives/ngAudio.js

@@ -57,13 +57,15 @@ angular.module("bawApp.directives.ngAudio", [
             scope.$watch(function () {
                 return target ? target.volume : null;
             }, function updateVolume(newValue, oldValue) {
+                console.log("changing the volume");
                 element.volume = newValue;
             });
 
             // muted
             scope.$watch(function () {
                 return target ? target.muted : null;
             }, function updateMuted(newValue, oldValue) {
+                console.log("changing the muted value");
                 element.muted = newValue === null ? null : !!newValue;
             });