From 99a2685f933b82941f19898dfeaa266d4ec7a11c Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Thu, 20 Nov 2014 15:43:51 -0800
Subject: [PATCH] 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                    |  4 +--
 js/models/conversations.js    | 29 ++-------------
 js/models/messages.js         |  7 +++-
 js/views/file_input_view.js   |  3 +-
 js/views/message_list_view.js |  4 ++-
 js/views/message_view.js      | 68 ++++++++++++++++++++++++++++-------
 stylesheets/index.css         |  3 +-
 7 files changed, 71 insertions(+), 47 deletions(-)

diff --git a/index.html b/index.html
index c958f51f6..e0957de56 100644
--- a/index.html
+++ b/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'>
diff --git a/js/models/conversations.js b/js/models/conversations.js
index 4cc82d6b7..2d2811eb9 100644
--- a/js/models/conversations.js
+++ b/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;
-      return encodeAttachments(decrypted.message.attachments).then(function(base64_attachments) {
+        var conversation = this;
         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) {
diff --git a/js/models/messages.js b/js/models/messages.js
index 38cea2c91..ca122c365 100644
--- a/js/models/messages.js
+++ b/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]; });
diff --git a/js/views/file_input_view.js b/js/views/file_input_view.js
index 824d072bc..6b19b53e2 100644
--- a/js/views/file_input_view.js
+++ b/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]);
             }
         },
diff --git a/js/views/message_list_view.js b/js/views/message_list_view.js
index 02d0d0821..dc400f21e 100644
--- a/js/views/message_list_view.js
+++ b/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() {
diff --git a/js/views/message_view.js b/js/views/message_view.js
index 5777f8616..b5e5390ed 100644
--- a/js/views/message_view.js
+++ b/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(
-        Mustache.render(this.template, {
-          message: this.model.get('body'),
-          timestamp: moment(this.model.get('timestamp')).fromNow(),
-          attachments: this.model.get('attachments'),
-          bubble_class: this.model.get('type') === 'outgoing' ? 'sent' : 'incoming',
-          sender: this.model.get('conversationType') === 'group' ? this.model.get('sender') : ''
-        })
-      );
-
-      return this;
+        this.$el.html(
+          Mustache.render(this.template, {
+            message: this.model.get('body'),
+            timestamp: moment(this.model.get('timestamp')).fromNow(),
+            bubble_class: this.model.get('type') === 'outgoing' ? 'sent' : 'incoming',
+            sender: this.model.get('conversationType') === 'group' ? this.model.get('sender') : ''
+          })
+        );
+
+        this.$el.find('.attachments').append(
+            this.model.get('attachments').map(function(attachment) {
+                return new AttachmentView({model: attachment}).render().el;
+            })
+        );
+
+        return this;
     }
 
   });
diff --git a/stylesheets/index.css b/stylesheets/index.css
index 8e9b7ff68..71708e04d 100644
--- a/stylesheets/index.css
+++ b/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;
 }