From 1311f7c9ae088ebab0e8d6bb8030b3ad3939178e Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Mon, 2 Mar 2015 18:27:14 -0800
Subject: [PATCH] Fix attachment previews for audio/video files

---
 js/views/attachment_preview_view.js |  2 +-
 js/views/file_input_view.js         | 21 +++++++++++++++------
 stylesheets/_conversation.scss      | 10 ++++++++++
 stylesheets/manifest.css            |  7 +++++++
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/js/views/attachment_preview_view.js b/js/views/attachment_preview_view.js
index 421335ed..bfbd9862 100644
--- a/js/views/attachment_preview_view.js
+++ b/js/views/attachment_preview_view.js
@@ -18,7 +18,7 @@ var Whisper = Whisper || {};
 (function () {
     'use strict';
     Whisper.AttachmentPreviewView = Backbone.View.extend({
-        className: 'imageAttachment',
+        className: 'attachment-preview',
         initialize: function() {
             this.template = $('#attachment-preview').html();
             Mustache.parse(this.template);
diff --git a/js/views/file_input_view.js b/js/views/file_input_view.js
index d34a2c7e..95468a2f 100644
--- a/js/views/file_input_view.js
+++ b/js/views/file_input_view.js
@@ -41,8 +41,8 @@ var Whisper = Whisper || {};
             this.$input.click();
         },
 
-        addThumb: function(e) {
-            this.thumb.src = e.target.result;
+        addThumb: function(src) {
+            this.thumb.src = src;
             this.$el.find('.paperclip').append(this.thumb.render().el);
         },
 
@@ -50,8 +50,9 @@ var Whisper = Whisper || {};
             this.clearForm();
             var files = this.$input.prop('files');
             for (var i = 0; i < files.length; i++) {
+                var type = files[i].type.split('/')[0];
                 var limitKb = 1000000;
-                switch (files[i].type.split('/')[0]) {
+                switch (type) {
                     case 'image': limitKb = 420; break;
                     case 'audio': limitKb = 32000; break;
                     case 'video': limitKb = 8000; break;
@@ -63,9 +64,17 @@ var Whisper = Whisper || {};
                     this.deleteFiles();
                 }
                 else {
-                    var FR = new FileReader();
-                    FR.onload = this.addThumb.bind(this);
-                    FR.readAsDataURL(files[i]);
+                    switch (type) {
+                        case 'audio': this.addThumb('/images/audio.png'); break;
+                        case 'video': this.addThumb('/images/video.png'); break;
+                        case 'image':
+                            var FR = new FileReader();
+                            FR.onload = function(e) {
+                                this.addThumb(e.target.result);
+                            }.bind(this);
+                            FR.readAsDataURL(files[i]);
+                            break;
+                    }
                 }
             }
         },
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 48cca959..ac17e9e2 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -279,3 +279,13 @@
   border-radius: 20px;
   font-size: small;
 }
+
+.attachment-preview {
+  background: white;
+  width: 100%;
+  height: 100%;
+
+  img {
+    width: 100%;
+  }
+}
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index bcce7cb8..046b5f9c 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -492,3 +492,10 @@ input.new-message {
   box-shadow: 0 0 5px 0 black;
   border-radius: 20px;
   font-size: small; }
+
+.attachment-preview {
+  background: white;
+  width: 100%;
+  height: 100%; }
+  .attachment-preview img {
+    width: 100%; }