feat(audioButtons): swapped in audio button component to listen page.…

… Added end of audio clip listener for autoplay in citizen science page
QutEcoacoustics · Nov 24, 2017 · 72380e4 · 72380e4
1 parent 2e06792
commit 72380e4
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 61 deletions.
diff --git a/src/app/audioControls/autoplayButton.tpl.html b/src/app/audioControls/autoplayButton.tpl.html
@@ -1,4 +1,4 @@
-<div class="autoplay progressCell">
+<div class="autoplay btn-group">
     <toggle-switch model="$ctrl.audioElementModel.autoPlay" disabled="disabled" mode="push-toggle"
                    title="Enable/disable autoplay">
         <toggle-switch-state switch-state="on">

diff --git a/src/app/audioControls/previousPlayNext.js b/src/app/audioControls/previousPlayNext.js
@@ -32,7 +32,7 @@ angular.module("bawApp.audioControls.previousPlayNext", [])
                     return self.linkDisabled(self.nextLink);
 
                 };
-                $scope.nextDisabled = function () {
+                $scope.previousDisabled = function () {
                     return self.linkDisabled(self.previousLink);
                 };
 
@@ -50,8 +50,6 @@ angular.module("bawApp.audioControls.previousPlayNext", [])
                 $scope.showPrevious = typeof self.previousLink === "function";
                 $scope.showNext = typeof self.nextLink === "function";
 
-
-
             }],
         bindings: {
             audioElementModel: "=",

diff --git a/src/app/audioControls/previousPlayNext.tpl.html b/src/app/audioControls/previousPlayNext.tpl.html
@@ -2,7 +2,7 @@
     <a class="btn btn-default"
        ng-href="{{$ctrl.previousLink()}}"
        ng-if="showPrevious"
-       ng-disabled="disabled()"
+       ng-disabled="previousDisabled()"
        title="Previous Recording">
         <span class="glyphicon glyphicon-step-backward"></span>
     </a>
@@ -15,7 +15,7 @@
     <a class="btn btn-default"
        ng-href="{{$ctrl.nextLink()}}"
        ng-if="showNext"
-       ng-disabled="disabled()"
+       ng-disabled="nextDisabled()"
        title="Previous Recording">
         <span class="glyphicon glyphicon-step-forward"></span>
     </a>

diff --git a/src/app/audioControls/volumeSlider.tpl.html b/src/app/audioControls/volumeSlider.tpl.html
@@ -13,5 +13,5 @@
            type="range" ng-model="$ctrl.audioElementModel.volume"
            max="1" min="0" step="0.01"
            ng-disabled="$ctrl.audioElementModel.muted"
-           title="{{ 'Volume ' + ($ctrl.audioElementModel.volume * 100 | number:0) }}">
+           title="{{ 'Volumeee ' + ($ctrl.audioElementModel.volume * 100 | number:0) }}">
 </div>
diff --git a/src/app/citizenScience/bristlebird/bristlebird.js b/src/app/citizenScience/bristlebird/bristlebird.js
@@ -22,6 +22,7 @@ class BristlebirdController {
                 MediaModel,
                 UserProfile,
                 UserProfileEvents,
+                $location,
                 CitizenScienceCommon,
                 CsApi,
                 SampleLabels,
@@ -179,6 +180,27 @@ class BristlebirdController {
         //     }
         // });
 
+        // this will be reverse bound from the data progress component
+        $scope.nextLink = null;
+
+        $scope.$on(ngAudioEvents.ended, function navigate(event) {
+
+            var uriNext = $scope.nextLink();
+
+            if (uriNext && $scope.audioElementModel.autoPlay) {
+                console.info("Changing page to next segment...");
+                $scope.$apply(function () {
+                    $location.url(uriNext);
+                });
+            }
+            else {
+                console.warn("Continuous playback cannot continue");
+            }
+        });
+
+
+
+
         self.backgroundPaths = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"].map(fn => paths.site.assets.backgrounds.citizenScience + fn);
 
 
@@ -209,6 +231,7 @@ angular
             "baw.models.Media",
             "UserProfile",
             "UserProfileEvents",
+            "$location",
             "CitizenScienceCommon",
             "CsApi",
             "SampleLabels",

diff --git a/src/app/citizenScience/bristlebird/listen.tpl.html b/src/app/citizenScience/bristlebird/listen.tpl.html
@@ -35,7 +35,11 @@ <h2>Eastern Bristlebird Search
 
             <nav class="cs-progress">
 
-                <dataset-progress audio-element-model="audioElementModel" current-sample="currentSample" num-viewed="numSamplesViewed"></dataset-progress>
+                <dataset-progress
+                        audio-element-model="audioElementModel"
+                        current-sample="currentSample"
+                        num-viewed="numSamplesViewed"
+                        next-link="nextLink" ></dataset-progress>
 
                 <autoplay-button audio-element-model="audioElementModel"></autoplay-button>
 

diff --git a/src/app/citizenScience/datasetProgress/datasetProgress.js b/src/app/citizenScience/datasetProgress/datasetProgress.js
@@ -50,14 +50,17 @@ angular.module("bawApp.components.progress", ["bawApp.citizenScience.csApiMock"]
                 }
             };
 
-
+            // reverse binding of this functions to make
+            // them accessible to the parent controller for autoplay
+            self.nextLink = $scope.nextLink;
 
             self.progressNav = true;
 
         }],
         bindings: {
             audioElementModel: "=",
             currentSample: "=",
-            numViewed: "=numViewed"
+            numViewed: "=numViewed",
+            nextLink: "="
         }
     });
diff --git a/src/app/listen/listen.js b/src/app/listen/listen.js
@@ -422,14 +422,20 @@ angular
                     };
 
 
-                    $scope.previousEnabled = false;
-                    $scope.nextEnabled = false;
+                    $scope.previousLink = function () {
+                        return $scope.createNavigationHref("previous");
+                    };
+                    $scope.nextLink = function () {
+                        return $scope.createNavigationHref("next");
+                    };
+
+
                     // hacky hack for continuous playback
                     var nextStart, nextEnd;
                     $scope.createNavigationHref = function (linkType, stepBy) {
                         // skip if resources not available
                         if (!$scope.model.audioRecording) {
-                            return "#";
+                            return "";
                         }
 
                         if (!angular.isNumber(stepBy)) {
@@ -444,23 +450,28 @@ angular
 
                         if (linkType === "previous") {
                             var lowerBound = ($routeParams.start - stepBy);
+                            var uriPrev;
+
+                                // no previous link if we are at the start
+                            if ($routeParams.start <= 0) {
+                                uriPrev = "";
+                            } else {
+                                if (lowerBound === 0) {
+                                    baseLink.end = lowerBound + stepBy;
+                                }
+                                else if (lowerBound > 0) {
+                                    baseLink.start = lowerBound;
+                                    baseLink.end = lowerBound + stepBy;
+                                }
+                                else {
+                                    // noop
+                                }
 
-                            $scope.previousEnabled = $routeParams.start > 0;
-
-                            if (lowerBound === 0) {
-                                baseLink.end = lowerBound + stepBy;
-                            }
-                            else if (lowerBound > 0) {
-                                baseLink.start = lowerBound;
-                                baseLink.end = lowerBound + stepBy;
-                            }
-                            else {
-                                // noop
+                                uriPrev = $url.formatUri(
+                                    paths.site.ngRoutes.listen,
+                                    baseLink);
                             }
 
-                            var uriPrev = $url.formatUri(
-                                paths.site.ngRoutes.listen,
-                                baseLink);
                             return uriPrev;
 
                         }
@@ -477,7 +488,14 @@ angular
                                 baseLink
                             );
 
-                            $scope.nextEnabled = $routeParams.end < $scope.model.audioRecording.durationSeconds - constants.listen.minAudioDurationSeconds;
+
+                            var nextEnabled = $routeParams.end < $scope.model.audioRecording.durationSeconds - constants.listen.minAudioDurationSeconds;
+                            // keep this value for autoplay
+                            $scope.nextEnabled = nextEnabled;
+
+                            if (!nextEnabled) {
+                                uriNext = "";
+                            }
 
                             return uriNext;
                         }

diff --git a/src/app/listen/listen.tpl.html b/src/app/listen/listen.tpl.html
@@ -60,47 +60,54 @@ <h1 id="chunkInfo" class="row">
 
             <div class="btn-toolbar">
 
-                <div class="btn-group">
-
-                    <a class="btn btn-default" ng-href="{{createNavigationHref('previous')}}"
-                       ng-disabled="!previousEnabled"
-                       title="Previous Recording">
-                        <span class="glyphicon glyphicon-step-backward"></span>
-                    </a>
-                    <button ng-disabled="!model.audioElement.canPlay"
-                            class="btn btn-default"
-                            ng-click="togglePlayState()"
-                            title="{{ model.audioElement.isPlaying && 'Pause' || 'Play' }}">
-                        <span ng-class="{'glyphicon-pause': model.audioElement.isPlaying}"
-                              class="glyphicon glyphicon-play"></span>
-                    </button>
-                    <a class="btn btn-default" ng-href="{{createNavigationHref('next')}}" ng-disabled="!nextEnabled"
-                       title="Next Recording">
-                        <span class="glyphicon glyphicon-step-forward"></span>
-                    </a>
-                </div>
+                <!--<div class="btn-group">-->
+
+                    <!--<a class="btn btn-default" ng-href="{{createNavigationHref('previous')}}"-->
+                       <!--ng-disabled="!previousEnabled"-->
+                       <!--title="Previous Recording">-->
+                        <!--<span class="glyphicon glyphicon-step-backward"></span>-->
+                    <!--</a>-->
+                    <!--<button ng-disabled="!model.audioElement.canPlay"-->
+                            <!--class="btn btn-default"-->
+                            <!--ng-click="togglePlayState()"-->
+                            <!--title="{{ model.audioElement.isPlaying && 'Pause' || 'Play' }}">-->
+                        <!--<span ng-class="{'glyphicon-pause': model.audioElement.isPlaying}"-->
+                              <!--class="glyphicon glyphicon-play"></span>-->
+                    <!--</button>-->
+                    <!--<a class="btn btn-default" ng-href="{{createNavigationHref('next')}}" ng-disabled="!nextEnabled"-->
+                       <!--title="Next Recording">-->
+                        <!--<span class="glyphicon glyphicon-step-forward"></span>-->
+                    <!--</a>-->
+                <!--</div>-->
+
+                <previous-play-next audio-element-model="model.audioElement"  previous-link="previousLink" next-link="nextLink"></previous-play-next>
 
                 <div class="btn-group">
-            <span class="position btn btn-default">
-                <!--<span class="hint relative-chunk-time hint--bottom">{{currentOffsetChunk()}}</span><br/>-->
-                <span class="time">{{currentOffsetAbsolute()}}</span>
-            </span>
-
+                    <span class="position btn btn-default">
+                        <!--<span class="hint relative-chunk-time hint--bottom">{{currentOffsetChunk()}}</span><br/>-->
+                        <span class="time">{{currentOffsetAbsolute()}}</span>
+                    </span>
                 </div>
 
                 <!-- form-group form-group-without-feedback required here due to a bug with ngFormGroup -->
                 <volume-slider audio-element-model="model.audioElement"
                                 class="input-group btn-group form-group form-group-without-feedback"></volume-slider>
 
-                <toggle-switch model="model.audioElement.autoPlay" disabled="disabled" mode="push-toggle"
-                               title="Enable/disable autoplay">
-                    <toggle-switch-state switch-state="on">
-                        <span class="glyphicon glyphicon-play-circle"></span>
-                    </toggle-switch-state>
-                    <toggle-switch-state switch-state="off">
-                        <span class="glyphicon glyphicon-play-circle"></span>
-                    </toggle-switch-state>
-                </toggle-switch>
+                <!--<toggle-switch model="model.audioElement.autoPlay" disabled="disabled" mode="push-toggle"-->
+                               <!--title="Enable/disable autoplay">-->
+                    <!--<toggle-switch-state switch-state="on">-->
+                        <!--<span class="glyphicon glyphicon-play-circle"></span>-->
+                    <!--</toggle-switch-state>-->
+                    <!--<toggle-switch-state switch-state="off">-->
+                        <!--<span class="glyphicon glyphicon-play-circle"></span>-->
+                    <!--</toggle-switch-state>-->
+                <!--</toggle-switch>-->
+
+                <autoplay-button audio-element-model="model.audioElement"></autoplay-button>
+
+
+
+
 
             </div>