From b206c5245d89bc0a2f788ed92aa8096478e9edf9 Mon Sep 17 00:00:00 2001
From: Philip Eichinski <phil.eichinski@gmail.com>
Date: Thu, 23 Nov 2017 16:11:04 +1000
Subject: [PATCH] fix(audioButtons): fixed bug stopping play and pause buttons
 from working due to model functions being attached to audio element from
 previous page

---
 src/app/audio/bawAudio.js                     | 15 ++-----------
 src/app/audio/ngAudio.js                      | 21 +++++++------------
 .../citizenScience/bristlebird/bristlebird.js |  3 ---
 .../bristlebird/listen.tpl.html               | 18 +++++++---------
 .../datasetProgress/datasetProgress.js        | 10 +++++++--
 5 files changed, 25 insertions(+), 42 deletions(-)

diff --git a/src/app/audio/bawAudio.js b/src/app/audio/bawAudio.js
index b8de0835..d03bf177 100644
--- a/src/app/audio/bawAudio.js
+++ b/src/app/audio/bawAudio.js
@@ -5,24 +5,13 @@ angular.module("bawApp.audio.bawAudio", [])
         controller: [
             "$scope",
             "$route",
-            function ($scope, $route) {
+            "$timeout",
+            function ($scope, $route, $timeout) {
 
                 var self = this;
 
                 $scope.audioElementModel = self.audioElementModel;
 
-                /**
-                 * Reload audio when the source changes. Without this it won't change the audio
-                 * even though the src attribute changes
-                 */
-                $scope.$watch("media", function () {
-                    console.log("new media loaded");
-                    document.querySelector("audio").load();
-                    //$route.reload();
-                });
-
-
-
             }],
         bindings: {
             audioElementModel: "=",
diff --git a/src/app/audio/ngAudio.js b/src/app/audio/ngAudio.js
index f6032160..ab8fa08f 100644
--- a/src/app/audio/ngAudio.js
+++ b/src/app/audio/ngAudio.js
@@ -31,6 +31,7 @@ angular.module("bawApp.directives.ngAudio", [
         restrict: "A",
         link: function (scope, elements, attributes, controller) {
             var element = elements[0];
+
             if (element.nodeName !== "AUDIO") {
                 throw "Cannot put ngAudio element on an element that is not a <audio />";
             }
@@ -46,24 +47,20 @@ angular.module("bawApp.directives.ngAudio", [
              * NOTE: only some properties are bound forward
              */
 
-            // scope.$watch(function () {
-            //     return element;
-            // }, function (newValue, oldValue) {
-            //     console.log(newValue);
-            // }, true);
-
             var target;
             scope.$watch(function () {
                 return expression(scope);
             }, function (newValue, oldValue) {
                 target = newValue;
+                // attach modification functions to model
+                target.play = play;
+                target.pause = pause;
             });
 
             // volume
             scope.$watch(function () {
                 return target ? target.volume : null;
             }, function updateVolume(newValue, oldValue) {
-                console.log("changing the volume");
                 element.volume = newValue;
             });
 
@@ -71,7 +68,6 @@ angular.module("bawApp.directives.ngAudio", [
             scope.$watch(function () {
                 return target ? target.muted : null;
             }, function updateMuted(newValue, oldValue) {
-                console.log("changing the muted value");
                 element.muted = newValue === null ? null : !!newValue;
             });
 
@@ -126,6 +122,10 @@ angular.module("bawApp.directives.ngAudio", [
             function updateState(event) {
                 console.debug("ngAudio:audioElement:eventType: ", event ? event.type : "<unknown>", element.currentTime);
 
+                if (scope.$root === null) {
+                    return;
+                }
+
                 scope.$root.$safeApply(scope, function () {
                     if (attributes.ngAudio) {
                         var target = expression(scope);
@@ -134,13 +134,8 @@ angular.module("bawApp.directives.ngAudio", [
                             target = expression(scope);
                         }
 
-                        // attach modification functions to model
-                        target.play = target.play || play;
-                        target.pause = target.pause || pause;
-
                         target.currentState = event && event.type || "unknown";
 
-
                         updateObject(element ,target);
 
                         target.isPlaying = !element.paused;
diff --git a/src/app/citizenScience/bristlebird/bristlebird.js b/src/app/citizenScience/bristlebird/bristlebird.js
index 0a5b83d4..2eb01ffb 100644
--- a/src/app/citizenScience/bristlebird/bristlebird.js
+++ b/src/app/citizenScience/bristlebird/bristlebird.js
@@ -53,7 +53,6 @@ class BristlebirdController {
         // to be populated after getting samples from dataset
         $scope.media = null;
 
-
         $scope.onboardingSteps = [
             {
                 element: document.querySelector(".citizen-science .spectrogram-wrapper"),
@@ -102,7 +101,6 @@ class BristlebirdController {
 
         $scope.currentSample = {};
 
-
         // the model passed to ngAudio
         $scope.audioElementModel = CitizenScienceCommon.getAudioModel();
 
@@ -114,7 +112,6 @@ class BristlebirdController {
             $scope.labels = labels;
         });
 
-
         SampleLabels.init($scope.csProject, $scope.samples, $scope.labels);
 
         $scope.$on("label-toggle", function (e, labelNumber, value) {
diff --git a/src/app/citizenScience/bristlebird/listen.tpl.html b/src/app/citizenScience/bristlebird/listen.tpl.html
index 2f66ba8c..0a8cef37 100644
--- a/src/app/citizenScience/bristlebird/listen.tpl.html
+++ b/src/app/citizenScience/bristlebird/listen.tpl.html
@@ -20,23 +20,19 @@ <h2>Eastern Bristlebird Search
                         <img id="spectrogram" class="spectrogram" ng-src="{{media.available.image.png.url}}">
                         <div position-line media="media" audio-data="audioElementModel" image-id="'spectrogram'"></div>
                     </div>
-                    <!--<audio id="citsci-sample" ng-audio="audioElementModel">-->
-                        <!--<source ng-repeat="key in media.available.audioOrder"-->
-                                <!--ng-src="{{media.available.audio[key].url}}" src=""-->
-                                <!--type="{{media.available.audio[key].mimeType}}">-->
-                        <!--Your browser does not support the audio element.-->
-                    <!--</audio>-->
-
-                    <baw-audio audio-element-model="audioElementModel" media="media"></baw-audio>
-
-
+                    <audio id="citsci-sample" ng-audio="audioElementModel">
+                        <source ng-repeat="key in media.available.audioOrder"
+                                ng-src="{{media.available.audio[key].url}}" src=""
+                                type="{{media.available.audio[key].mimeType}}">
+                        Your browser does not support the audio element.
+                    </audio>
 
+                    <!--<baw-audio audio-element-model="audioElementModel" media="media"></baw-audio>-->
 
                 </div>
             </div>
 
 
-
             <nav class="cs-progress">
 
                 <dataset-progress audio-element-model="audioElementModel" current-sample="currentSample" num-viewed="numSamplesViewed"></dataset-progress>
diff --git a/src/app/citizenScience/datasetProgress/datasetProgress.js b/src/app/citizenScience/datasetProgress/datasetProgress.js
index 91102734..51c88e08 100644
--- a/src/app/citizenScience/datasetProgress/datasetProgress.js
+++ b/src/app/citizenScience/datasetProgress/datasetProgress.js
@@ -14,13 +14,19 @@ angular.module("bawApp.components.progress", ["bawApp.citizenScience.csApiMock"]
 
             $scope.selectItem($routeParams.sampleNum);
 
-            $scope.$watch($routeParams, function (newVal, oldVal) {
+            /**
+             * Load the new sample whenever the route params change.
+             */
+            $scope.$watch(
+                function () {
+                  return $routeParams.sampleNum;
+                }, function (newVal, oldVal) {
                 console.log("route params changed from ", oldVal, "to", newVal);
 
                 // call the api to get the sample based on the route params
                 $scope.selectItem($routeParams.sampleNum);
 
-            }, true);
+            });
 
             //TODO: this gets called constantly while the audio is playing
             /**