#342 audio data type support

Author: m-r-c

grails-app/conf/ApplicationResources.groovy

@@ -388,6 +388,7 @@ modules = {
     audio {
         dependsOn "modernizr"
         resource url: 'js/audio.js'
+        resource url: 'css/audio-control.css'
         resource url: 'vendor/recorderjs/recorder.js'
 //        resource url: 'vendor/libmp3lame/libmp3lame.min.js'
     }

grails-app/taglib/au/org/ala/biocollect/ModelJSTagLib.groovy

@@ -559,6 +559,8 @@ class ModelJSTagLib {
                             }})(data['${col.name}']);
                             """
                         break;
+                    case 'audio':
+                        out << INDENT*3 << "this.${col.name} = new AudioViewModel({downloadUrl: '${grailsApplication.config.grails.serverURL}/download/file?filename='}, data['${col.name}'])\n";
 
                 }
                 modelConstraints(col, out)
@@ -916,7 +918,7 @@ class ModelJSTagLib {
     }
 
     def audioModel(model, out) {
-        out << INDENT*4 << "self.data.${model.name}= new AudioViewModel();\n"
+        out << INDENT*4 << "self.data.${model.name}= new AudioViewModel({downloadUrl: '${grailsApplication.config.grails.serverURL}/download/file?filename='});\n"
         populateAudioList(model, out)
     }
 

grails-app/views/output/_audioDataTypeEditModelTemplate.gsp

@@ -9,7 +9,7 @@
                     </audio>
 
                     <div>
-                        <a href="" data-bind="attr: {href: transients.downloadUrl()}"><i class="fa fa-download">&nbsp;</i>Download</a>
+                        <a href="" data-bind="attr: {href: transients.downloadUrl()}" class="download"><i class="fa fa-download">&nbsp;</i>Download</a>
                     </div>
                 </div>
 
@@ -30,15 +30,16 @@
                             </label>
 
                             <div class="controls">
-                                <input id="attribution" class="input-xxlarge" type="text" data-bind="value: attribution">
+                                <input id="attribution" class="input-xlarge" type="text" data-bind="value: attribution">
                             </div>
                         </div>
 
                         <div class="control-group">
                             <label class="control-label" for="notes">Notes:</label>
 
                             <div class="controls">
-                                <input id="notes"  class="input-xxlarge"type="text" data-bind="value: notes">
+                                <textarea rows="4" class="input-xlarge" id="notes"  data-bind="value: notes"></textarea>
+                                %{--<input id="notes"  class="input-xxlarge"type="text" data-bind="value: notes">--}%
                             </div>
                         </div>
 
@@ -71,7 +72,7 @@
         </div>
     </div>
 
-    <div id="recordingControls" data-bind="visible: ${name}.transients.html5AudioSupport()" class="inline-block">
+    <div id="recordingControls" data-bind="visible: ${name}.transients.html5AudioSupport()" class="inline-block" style="display: none">
         <span data-bind="click: ${name}.startRecording, visible: !${name}.transients.recording()" class="btn"><span
                 class="fa fa-circle red">&nbsp;</span>Start recording</span>
         <span data-bind="click: ${name}.stopRecording, visible: ${name}.transients.recording()" class="btn"><span

web-app/css/audio-control.css

@@ -0,0 +1,54 @@
+.audio-thumbnail {
+    border: 1px solid white;
+    min-width: 350px;
+    max-width: 350px;
+    width: 350px;
+    display: inline-block;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    vertical-align: top;
+}
+
+.audio-thumbnail audio {
+    padding-left: 25px;
+}
+
+.audio-thumbnail .download {
+    float: right;
+}
+
+.output-label {
+    float: left;
+    width: 100px;
+    text-align: right;
+    font-weight: bold;
+    padding-right: 10px;
+}
+
+table .audio-input-panel .span3, table .audio-input-panel .span2, table .audio-input-panel .span7 {
+    width: 100%;
+}
+
+table .audio-input-panel .btn {
+    float: right;
+    margin-right: 20px;
+}
+
+table audio {
+    margin-left: 20px;
+}
+
+table .download {
+    margin-left: 20px;
+    margin-bottom: 20px;
+    display: block;
+}
+
+.audio-input-panel .control-label {
+    width: 85px !important;
+}
+
+.audio-input-panel .controls {
+    margin-left: 100px !important;
+}

web-app/css/common.css

@@ -361,36 +361,3 @@ th .popover {
     padding-top: 10px;
     padding-bottom: 5px;
 }
-
-audio::before {
-    content: '\f08e';
-    font-family: FontAwesome;
-}
-
-.audio-thumbnail {
-    border: 1px solid white;
-    min-width: 350px;
-    max-width: 350px;
-    width: 350px;
-    display: inline-block;
-    margin-right: 10px;
-    margin-bottom: 10px;
-    border-radius: 5px;
-    vertical-align: top;
-}
-
-.audio-thumbnail audio {
-    padding-left: 25px;
-}
-
-.audio-thumbnail .download {
-    float: right;
-}
-
-.output-label {
-    float: left;
-    width: 100px;
-    text-align: right;
-    font-weight: bold;
-    padding-right: 10px;
-}

web-app/js/audio.js

@@ -1,4 +1,4 @@
-function AudioViewModel() {
+function AudioViewModel(config, files) {
     var self = this;
 
     var recorder = null;
@@ -7,6 +7,15 @@ function AudioViewModel() {
     self.transients.recording = ko.observable(false);
     self.files = ko.observableArray();
 
+    if (!_.isUndefined(files) && !_.isEmpty(files)) {
+        files.forEach(function (file) {
+            if (_.isUndefined(file.url)) {
+                file.url = config.downloadUrl + file.filename;
+            }
+            self.files.push(new AudioItem(file));
+        });
+    }
+
     self.transients.html5AudioSupport = ko.pureComputed(function () {
         var supported = false;
         if (Modernizr.getusermedia) {