feat(audioControls): added audio download component

QutEcoacoustics · Feb 26, 2018 · ca7d54d · ca7d54d
1 parent 2e2caeb
commit ca7d54d
Show file tree

Hide file tree

Showing 9 changed files with 166 additions and 30 deletions.
diff --git a/src/app/annotationLibrary/annotationItem.tpl.html b/src/app/annotationLibrary/annotationItem.tpl.html
@@ -22,6 +22,7 @@
     <volume-slider
             class="form-group form-group-without-feedback progressCell"
             audio-element-model="$ctrl.audioElement"></volume-slider>
+    <download media="$ctrl.annotation.media"></download>
 
 
 </div>
diff --git a/src/app/audioControls/_downloadLinks.scss b/src/app/audioControls/_downloadLinks.scss
@@ -0,0 +1,66 @@
+//noinspection CssInvalidHtmlTagReference
+download {
+
+  .download-links-wrapper {
+
+    position: relative;
+    display: inline-block;
+
+    .download-links {
+
+      position: absolute;
+      bottom: 30px;
+      left:0px;
+      background: #ffffff;
+      z-index: 10000;
+      padding: 10px;
+      text-align: center;
+      white-space: nowrap;
+      border: solid #dddddd 1px;
+      border-radius: 3px;
+
+      &.show-links {
+
+        transition-duration: 0.3s;
+        transition-timing-function: ease-in;
+        max-height: 1000px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        overflow: hidden;
+
+      }
+
+      &.hide-links {
+
+        overflow: hidden;
+        max-height: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+        margin-top: 0;
+        margin-bottom: 0;
+        border-top-width: 0px;
+        border-bottom-width: 0px;
+        transition-duration: 0.3s;
+        transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+
+      }
+
+      a {
+        display: block;
+      }
+
+
+    }
+
+
+  }
+
+
+
+}
+
+.btn-toolbar .download-links-wrapper {
+
+  float: left;
+
+}
diff --git a/src/app/audioControls/audioControls.js b/src/app/audioControls/audioControls.js
@@ -1,5 +1,6 @@
 angular.module("bawApp.audioControls",[
     "bawApp.audioControls.volumeSlider",
     "bawApp.audioControls.previousPlayNext",
-    "bawApp.audioControls.autoplayButton"
+    "bawApp.audioControls.autoplayButton",
+    "bawApp.audioControls.download"
 ]);
diff --git a/src/app/audioControls/download.js b/src/app/audioControls/download.js
@@ -0,0 +1,24 @@
+angular.module("bawApp.audioControls.download", [])
+    .component("download", {
+        templateUrl: "audioControls/download.tpl.html",
+        controller: [
+            "$scope",
+            function ($scope) {
+
+                $scope.downloadLinksShowing = false;
+
+                $scope.toggleShowDownloadLinks = function () {
+                    $scope.downloadLinksShowing = !$scope.downloadLinksShowing;
+                };
+
+                $scope.hideDownloadLinks = function () {
+                    $scope.downloadLinksShowing = false;
+                };
+
+        }],
+        bindings: {
+            media: "=",
+            otherLinks: "="
+        }
+    });
+
diff --git a/src/app/audioControls/download.tpl.html b/src/app/audioControls/download.tpl.html
@@ -0,0 +1,34 @@
+<div click-outside="hideDownloadLinks()" class="download-links-wrapper">
+
+    <button class="btn btn-default"
+            ng-click="toggleShowDownloadLinks()"
+
+            title="Download">
+            <span class="glyphicon glyphicon-download"></span>
+    </button>
+    <div ng-class="{'show-links': downloadLinksShowing, 'hide-links': !downloadLinksShowing}"
+        class="download-links">
+
+        <div>Download:</div>
+
+        <a target="_blank"
+               ng-href="{{$ctrl.media.spectrogram.url}}"
+               title="Download the spectrogram">Spectrogram</a>
+        <a target="_blank"
+               ng-class="{disabled: !$ctrl.media.available.audio['wav'].url}"
+               ng-href="{{$ctrl.media.available.audio['wav'].url}}"
+               title="{{ model.media.available.audio['wav'].url && 'Download the .wav file' || 'This file format is not available'  }}"
+    >Audio (WAV)</a>
+        <a target="_blank"
+                       ng-class="{disabled: !$ctrl.media.available.audio['mp3'].url}"
+                       ng-href="{{$ctrl.media.available.audio['mp3'].url}}"
+                       title="{{ $ctrl.media.available.audio['mp3'].url && 'Download the .mp3 file' || 'This file format is not available'  }}"
+                    >Audio (MP3)</a>
+        <a ng-repeat="(key,link) in $ctrl.otherLinks" target="_blank"
+                       ng-class="{disabled: !link.url}"
+                       ng-href="{{link.url}}"
+                       title="{{link.text}}"
+                    >{{link.text}}</a>
+    </div>
+
+</div>
diff --git a/src/app/listen/listen.js b/src/app/listen/listen.js
@@ -159,12 +159,20 @@ angular
 
                                 $scope.startOffsetAbsolute = absoluteStartChunk.format("HH:mm:ss");
                                 $scope.endOffsetAbsolute = absoluteEndChunk.format("HH:mm:ss");
-                                $scope.downloadAnnotationsLink = AudioEvent.csvLink(
+
+                                // any other download links besides spectrogram and audio files
+                                $scope.downloadLinks = [
                                     {
-                                        recordingId: $scope.model.media.recording.id,
-                                        startOffset: $scope.model.media.commonParameters.startOffset,
-                                        endOffset: $scope.model.media.commonParameters.endOffset
-                                    });
+                                        text: "Annotations (CSV)",
+                                        title: "Download annotations seen on this screen",
+                                        url: AudioEvent.csvLink(
+                                            {
+                                                recordingId: $scope.model.media.recording.id,
+                                                startOffset: $scope.model.media.commonParameters.startOffset,
+                                                endOffset: $scope.model.media.commonParameters.endOffset
+                                            })
+                                    }
+                                ];
 
                             },
                             function mediaGetFailure() {

diff --git a/src/app/listen/listen.tpl.html b/src/app/listen/listen.tpl.html
@@ -75,6 +75,9 @@ <h1 id="chunkInfo" class="row">
 
                 <autoplay-button audio-element-model="model.audioElement"></autoplay-button>
 
+                <download media="model.media"
+                          other-links="downloadLinks"></download>
+
             </div>
 
             <span class="right"> <span class="time">{{endOffsetAbsolute}}</span></span>
@@ -182,29 +185,7 @@ <h1 id="chunkInfo" class="row">
 
 
         </div>
-        <div class="row">
-
-            <span class="col-md-offset-4 col-md-8 text-right">Download:
-                <a target="_blank"
-                   ng-href="{{model.media.spectrogram.url}}"
-                   title="Download the spectrogram">Spectrogram</a>&nbsp;|&nbsp;
-                <a target="_blank"
-                   ng-class="{disabled: !model.media.available.audio['wav'].url}"
-                   ng-href="{{model.media.available.audio['wav'].url}}"
-                   title="{{ model.media.available.audio['wav'].url && 'Download the .wav file' || 'This file format is not available'  }}"
-                >Audio (WAV)</a>&nbsp;|&nbsp;
-                <a target="_blank"
-                   ng-class="{disabled: !model.media.available.audio['mp3'].url}"
-                   ng-href="{{model.media.available.audio['mp3'].url}}"
-                   title="{{ model.media.available.audio['mp3'].url && 'Download the .mp3 file' || 'This file format is not available'  }}"
-                >Audio (MP3)</a>&nbsp;|&nbsp;
-                <a target="_blank"
-                   ng-class="{disabled: !downloadAnnotationsLink}"
-                   ng-href="{{downloadAnnotationsLink}}"
-                   title="Download annotations seen on this screen"
-                >Annotations (CSV)</a>
-            </span>
-        </div>
+
 
 
         <div class="debug-ui">

diff --git a/src/components/directives/clickOutside.js b/src/components/directives/clickOutside.js
@@ -0,0 +1,20 @@
+angular
+    .module("bawApp.directives.clickOutside", [])
+    .directive("clickOutside", ["$document", function ($document) {
+        return {
+            link: function postLink(scope, element, attrs) {
+                var onClick = function (event) {
+                    var isChild = element[0].contains(event.target);
+                    var isSelf = element[0] === event.target;
+                    var isInside = isChild || isSelf;
+                    if (!isInside) {
+                        console.log("is outside !!!!!!!");
+                        scope.$apply(attrs.clickOutside);
+                    }
+                };
+
+                $document.bind("click", onClick);
+
+            }
+        };
+    }]);
diff --git a/src/components/directives/directives.js b/src/components/directives/directives.js
@@ -11,6 +11,7 @@ angular.module("bawApp.directives",
         "bawApp.directives.ngAudio",
         "bawApp.directives.inputRange",
         "bawApp.directives.toggleSwitch",
-        "bawApp.directives.ngForm"
+        "bawApp.directives.ngForm",
+        "bawApp.directives.clickOutside"
     ]);