Store attachments as binary blobs

Move base64 encoding of attachments to an AttachmentView. This makes
image rendering an asynchronous task so we fire an update event to
indicate to the parent MessageListView that its content has changed
height and it is time to scroll down.

index.html

@@ -60,12 +60,10 @@
               <ul class='volley'>
                   <li class='message'>
                   {{ message }}
+                  <div class='attachments'></div>
                   <span class='timestamp'>{{ timestamp }}</span>
                   </li>
               </ul>
-              {{#attachments}}
-                <img src={{.}}>
-              {{/attachments}}
             </div>
         </script>
         <script type='text/x-tmpl-mustache' id='contact'>

js/models/conversations.js

@@ -18,21 +18,6 @@
 
    window.Whisper = window.Whisper || {};
 
-   function encodeAttachments (attachments) {
-     return Promise.all(attachments.map(function(a) {
-       return new Promise(function(resolve, reject) {
-         var dataView = new DataView(a.data);
-         var blob = new Blob([dataView], { type: a.contentType });
-         var FR = new FileReader();
-         FR.onload = function(e) {
-           resolve(e.target.result);
-         };
-         FR.onerror = reject;
-         FR.readAsDataURL(blob);
-       });
-     }));
-   };
-
   var Conversation = Whisper.Conversation = Backbone.Model.extend({
     database: Whisper.Database,
     storeName: 'conversations',
@@ -57,7 +42,6 @@
     },
 
     sendMessage: function(message, attachments) {
-      return encodeAttachments(attachments).then(function(base64_attachments) {
         var timestamp = Date.now();
         this.messageCollection.add({
             body             : message,
@@ -65,7 +49,7 @@
             conversationId   : this.id,
             conversationType : this.get('type'),
             type             : 'outgoing',
-            attachments      : base64_attachments
+            attachments      : attachments,
         }).save();
 
         this.save({ timestamp:   timestamp,
@@ -78,23 +62,17 @@
         else {
           return textsecure.messaging.sendMessageToGroup(this.get('groupId'), message, attachments);
         }
-      }.bind(this)).then(function(result) {
-        console.log(result);
-      }).catch(function(error) {
-        console.log(error);
-      });
     },
 
     receiveMessage: function(decrypted) {
-      var conversation = this;
+        var conversation = this;
-      return encodeAttachments(decrypted.message.attachments).then(function(base64_attachments) {
         var timestamp = decrypted.pushMessage.timestamp.toNumber();
         var m = this.messageCollection.add({
           body: decrypted.message.body,
           timestamp: timestamp,
           conversationId: this.id,
           conversationType: this.get('type'),
-          attachments: base64_attachments,
+          attachments: decrypted.message.attachments,
           type: 'incoming',
           sender: decrypted.pushMessage.source
         });
@@ -105,7 +83,6 @@
         this.save({unreadCount: this.get('unreadCount') + 1, active: true});
 
         return new Promise(function (resolve) { m.save().then(resolve(m)) });
-      }.bind(this));
     },
 
     fetchMessages: function(options) {

js/models/messages.js

@@ -21,7 +21,12 @@
     var Message  = Backbone.Model.extend({
         database: Whisper.Database,
         storeName: 'messages',
-        defaults: function() { return { timestamp: new Date().getTime() }; },
+        defaults: function() {
+            return {
+                timestamp: new Date().getTime(),
+                attachments: []
+            };
+        },
         validate: function(attributes, options) {
             var required = ['timestamp', 'conversationId'];
             var missing = _.filter(required, function(attr) { return !attributes[attr]; });

js/views/file_input_view.js

@@ -20,10 +20,9 @@ var Whisper = Whisper || {};
         previewImages: function() {
             this.$el.find('img').remove();
             var files = this.$input.prop('files');
-            var onload = this.addThumb.bind(this);
             for (var i = 0; i < files.length; i++) {
                 var FR = new FileReader();
-                FR.onload = onload;
+                FR.onload = this.addThumb.bind(this);
                 FR.readAsDataURL(files[i]);
             }
         },

js/views/message_list_view.js

@@ -8,9 +8,11 @@ var Whisper = Whisper || {};
     className: 'discussion',
     itemView: Whisper.MessageView,
     events: {
-      'add': 'scrollToBottom'
+      'add': 'scrollToBottom',
+      'update *': 'scrollToBottom'
     },
     scrollToBottom: function() {
+        // TODO: Avoid scrolling if user has manually scrolled up?
         this.$el.scrollTop(this.el.scrollHeight);
     },
     addAll: function() {

js/views/message_view.js

@@ -1,8 +1,45 @@
-var Whisper = Whisper || {};
+/* vim: ts=4:sw=4:expandtab
-
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 (function () {
   'use strict';
 
+  var AttachmentView = Backbone.View.extend({
+    tagName:   "img",
+    encode: function  () {
+        return new Promise(function(resolve, reject) {
+            var blob = new Blob([this.model.data], { type: this.model.contentType });
+            var FR = new FileReader();
+            FR.onload = function(e) {
+                resolve(e.target.result);
+            };
+            FR.onerror = reject;
+            FR.readAsDataURL(blob);
+        }.bind(this));
+    },
+    render: function() {
+        this.encode().then(function(base64) {
+            this.$el.attr('src', base64);
+            this.$el.trigger('update');
+        }.bind(this));
+        return this;
+    }
+  });
+
+  window.Whisper = window.Whisper || {};
+
   Whisper.MessageView = Backbone.View.extend({
     tagName:   "li",
     className: "entry",
@@ -19,17 +56,22 @@ var Whisper = Whisper || {};
     },
 
     render: function() {
-      this.$el.html(
+        this.$el.html(
-        Mustache.render(this.template, {
+          Mustache.render(this.template, {
-          message: this.model.get('body'),
+            message: this.model.get('body'),
-          timestamp: moment(this.model.get('timestamp')).fromNow(),
+            timestamp: moment(this.model.get('timestamp')).fromNow(),
-          attachments: this.model.get('attachments'),
+            bubble_class: this.model.get('type') === 'outgoing' ? 'sent' : 'incoming',
-          bubble_class: this.model.get('type') === 'outgoing' ? 'sent' : 'incoming',
+            sender: this.model.get('conversationType') === 'group' ? this.model.get('sender') : ''
-          sender: this.model.get('conversationType') === 'group' ? this.model.get('sender') : ''
+          })
-        })
+        );
-      );
+
-
+        this.$el.find('.attachments').append(
-      return this;
+            this.model.get('attachments').map(function(attachment) {
+                return new AttachmentView({model: attachment}).render().el;
+            })
+        );
+
+        return this;
     }
 
   });

stylesheets/index.css

@@ -64,9 +64,10 @@ li.entry.outgoing .avatar {
 
 li.entry img {
   max-width: 100%;
+  margin-top: 5px;
 }
 
-.attachments img {
+.send .attachments img {
   width: 30px;
   height: 30px;
 }