Load attachment data for quotedMessages, processMessage on add

Not ideal that it loads it twice, but AttachmentView is so selfish with
its blob and objectUrl!

js/views/conversation_view.js

@@ -530,11 +530,10 @@
             }
         },
 
-        scrollToMessage: function(providedOptions) {
-            const options = providedOptions || {};
+        scrollToMessage: function(options = {}) {
             const { id } = options;
 
-            if (id) {
+            if (!id) {
                 return;
             }
 
@@ -543,7 +542,7 @@
                 return;
             }
 
-            el.scrollIntoView();
+            el[0].scrollIntoView();
         },
 
         scrollToBottom: function() {
@@ -686,7 +685,7 @@
             // This is debounced, so it won't hit the database too often.
             this.lazyUpdateVerified();
 
-            this.model.messageCollection.add(message, {merge: true});
+            this.model.addSingleMessage(message);
             message.setToExpire();
 
             if (message.isOutgoing()) {

js/views/message_view.js

@@ -194,7 +194,7 @@
       this.listenTo(this.model, 'change:delivered', this.renderDelivered);
       this.listenTo(this.model, 'change:read_by', this.renderRead);
       this.listenTo(this.model, 'change:expirationStartTimestamp', this.renderExpiring);
-      this.listenTo(this.model, 'change', this.renderSent);
+      this.listenTo(this.model, 'change', this.onChange);
       this.listenTo(this.model, 'change:flags change:group_update', this.renderControl);
       this.listenTo(this.model, 'destroy', this.onDestroy);
       this.listenTo(this.model, 'unload', this.onUnload);
@@ -274,6 +274,10 @@
       }
       this.onUnload();
     },
+    onChange() {
+      this.renderRead();
+      this.renderQuote();
+    },
     select(e) {
       this.$el.trigger('select', { message: this.model });
       e.stopPropagation();
@@ -379,17 +383,19 @@
       return null;
     },
     renderQuote() {
-      const VOICE_FLAG = textsecure.protobuf.AttachmentPointer.Flags.VOICE_MESSAGE;
-      const objectUrl = this.getQuoteObjectUrl();
       const quote = this.model.get('quote');
       if (!quote) {
         return;
       }
 
+      const VOICE_FLAG = textsecure.protobuf.AttachmentPointer.Flags.VOICE_MESSAGE;
+      const objectUrl = this.getQuoteObjectUrl();
+
+
       function processAttachment(attachment) {
-        const thumbnail = !attachment.thumbnail
+        const thumbnail = !objectUrl
           ? null
-          : Object.assign({}, attachment.thumbnail, {
+          : Object.assign({}, attachment.thumbnail || {}, {
             objectUrl,
           });
 
@@ -411,7 +417,7 @@
       const isIncoming = this.model.isIncoming();
 
       const props = {
-        attachments: quote.attachments && quote.attachments.map(processAttachment),
+        attachments: (quote.attachments || []).map(processAttachment),
         authorColor,
         authorProfileName,
         authorTitle,
@@ -420,14 +426,13 @@
         onClick: () => {
           const { quotedMessage } = this.model;
           if (quotedMessage) {
-            this.trigger('scroll-to-message', { id: quotedMessage.id });
+            this.model.trigger('scroll-to-message', { id: quotedMessage.id });
           }
         },
         text: quote.text,
       };
 
       if (this.replyView) {
-        this.replyView.remove();
         this.replyView = null;
       } else if (contact) {
         this.listenTo(contact, 'change:color', this.renderQuote);