Add audio preview of uploaded files

Added in both resources screen and call flow steps.

Fixes #654

app/assets/javascripts/resources/upload_localized_resource.js

@@ -12,6 +12,13 @@ onResourcesWorkflow(function(){
     this.filename = ko.observable(hash.filename);
     this.uploadedfile = null;
 
+    this.playUrl = ko.computed(function(){
+      if(this.isSaved()) {
+        return "/projects/" + project_id + "/resources/" + this.parent().id() + "/localized_resources/" + this.id() + "/play_file";
+      } else {
+        return null
+      }
+    }, this);
 
     this.url = ko.computed(function(){
       if(this.isSaved()) {
@@ -64,7 +71,7 @@ onResourcesWorkflow(function(){
       return false;
     }
 
-    return downloadURL("/projects/" + project_id + "/resources/" + this.parent().id() + "/localized_resources/" + this.id() + "/play_file");
+    return downloadURL(this.playUrl());
   }
 
   UploadLocalizedResource.prototype.preserveCurrentValues= function() {
@@ -90,4 +97,3 @@ onResourcesWorkflow(function(){
     }
   }
 })
-

app/views/call_flows/_upload_localized_resource_template.haml

@@ -1,7 +1,7 @@
 %script{type: "text/html", id: "upload_localized_resource_template"}
   .file-name
     / ko if:  uploadStatus() == 'standBy' && !hasAudio()
-    %span.alert-orange-b Select a file to upload
+    %span.alert-orange-b Select a file
     / /ko
     / ko if: hasAudio()
     %span.clickable.audio-name{'data-bind' => 'text: "File: " + filename(), click: download'}
@@ -23,6 +23,12 @@
       %input{:type => 'file', 'data-bind' => 'fileupload: url, fileuploadAdd: add'}
     Replace
     / /ko
+    / ko if: hasAudio() && (uploadStatus() == 'ok' || uploadStatus() == 'standBy')
+    %br
+    %audio{'controls' => true, "style" => "width: 250px"}
+      %source{'data-bind' => 'attr: { src: playUrl }'}
+    %br
+    / /ko
   %br{clear: 'all'}
   .w22
     %textarea{:rows => 6, :placeholder => 'Write here a description of the recording, either as a reminder for you or as a reference for the person that will record the message.', 'data-bind' => 'value: description'}

app/views/resources/_upload_localized_resource_template.haml

@@ -28,6 +28,12 @@
           %input{:type => 'file', 'data-bind' => 'fileupload: url, fileuploadAdd: add, fileuploadprogressall: showProgress'}
         Replace
       / /ko
+      / ko if: hasAudio() && (uploadStatus() == 'ok' || uploadStatus() == 'standBy')
+      %br
+      %audio{'controls' => true, "style" => "width: 450px", "preload" => "none"}
+        %source{'data-bind' => 'attr: { src: playUrl }'}
+      %br
+      / /ko
   .w100
     %textarea{:rows => 6, :placeholder => 'Write here a description of the recording, either as a reminder for you or as a reference for the person that will record the message.', 'data-bind' => 'value: description, visible: $parent.editing()'}
   %span.i18b-file{ko(visible: '! $parent.editing()')}