Make thumbnails on quote load and on quote preview creation

js/models/conversations.js

@@ -610,6 +610,59 @@
       return _.without(this.get('members'), me);
     },
 
+    blobToArrayBuffer(blob) {
+      return new Promise((resolve, reject) => {
+        const fileReader = new FileReader();
+
+        fileReader.onload = e => resolve(e.target.result);
+        fileReader.onerror = reject;
+        fileReader.onabort = reject;
+
+        fileReader.readAsArrayBuffer(blob);
+      });
+    },
+
+    async makeThumbnailAttachment(attachment) {
+      const attachmentWithData = await loadAttachmentData(attachment);
+      const { data, contentType } = attachmentWithData;
+      const objectUrl = this.makeObjectUrl(data, contentType);
+      const thumbnail = await Whisper.FileInputView.makeThumbnail(128, objectUrl);
+      URL.revokeObjectURL(objectUrl);
+
+      const arrayBuffer = await this.blobToArrayBuffer(thumbnail);
+      const finalContentType = 'image/png';
+      const finalObjectUrl = this.makeObjectUrl(arrayBuffer, finalContentType);
+
+      return {
+        data: arrayBuffer,
+        objectUrl: finalObjectUrl,
+        contentType: finalContentType,
+      };
+    },
+
+    async makeQuote(quotedMessage) {
+      const contact = quotedMessage.getContact();
+      const attachments = quotedMessage.get('attachments');
+
+      return {
+        author: contact.id,
+        id: quotedMessage.get('sent_at'),
+        text: quotedMessage.get('body'),
+        attachments: await Promise.all((attachments || []).map(async (attachment) => {
+          const { contentType } = attachment;
+          const willMakeThumbnail = MIME.isImage(contentType);
+
+          return {
+            contentType,
+            fileName: attachment.fileName,
+            thumbnail: willMakeThumbnail
+              ? await this.makeThumbnailAttachment(attachment)
+              : null,
+          };
+        })),
+      };
+    },
+
     sendMessage(body, attachments) {
       this.queueJob(async () => {
         const now = Date.now();
@@ -1113,18 +1166,8 @@
 
       const queryFirst = queryAttachments[0];
       try {
-        queryMessage.attachments[0] = await loadAttachmentData(queryFirst);
-
-        // Note: it would be nice to take the full-size image and downsample it into
-        //   a true thumbnail here.
-        queryMessage.updateImageUrl();
-
-        // We need to differentiate between messages we load from database and those
-        //   already in memory. More cleanup needs to happen on messages from the database
-        //   because they aren't tracked any other way.
         // eslint-disable-next-line no-param-reassign
-        message.quotedMessageFromDatabase = queryMessage;
-
+        message.quoteThumbnail = await this.makeThumbnailAttachment(queryFirst);
         return true;
       } catch (error) {
         console.log(
@@ -1155,12 +1198,9 @@
 
       try {
         const queryFirst = quotedAttachments[0];
-        // eslint-disable-next-line no-param-reassign
-        quotedMessage.attributes.attachments[0] = await loadAttachmentData(queryFirst);
 
-        // Note: it would be nice to take the full-size image and downsample it into
-        //   a true thumbnail here.
-        quotedMessage.updateImageUrl();
+        // eslint-disable-next-line no-param-reassign
+        message.quoteThumbnail = await this.makeThumbnailAttachment(queryFirst);
       } catch (error) {
         console.log(
           'Problem loading attachment data for quoted message',

js/models/messages.js

@@ -188,6 +188,16 @@
       if (this.quotedMessage) {
         this.quotedMessage = null;
       }
+      const quote = this.get('quote');
+      const attachments = (quote && quote.attachments) || [];
+      attachments.forEach((attachment) => {
+        if (attachment.thumbnail && attachment.thumbnail.objectUrl) {
+          URL.revokeObjectURL(attachment.thumbnail.objectUrl);
+          // eslint-disable-next-line no-param-reassign
+          attachment.thumbnail.objectUrl = null;
+        }
+      });
+
       this.revokeImageUrl();
     },
     revokeImageUrl() {
@@ -203,16 +213,6 @@
       return this.imageUrl;
     },
     getQuoteObjectUrl() {
-      const fromDB = this.quotedMessageFromDatabase;
-      if (fromDB && fromDB.imageUrl) {
-        return fromDB.imageUrl;
-      }
-
-      const inMemory = this.quotedMessage;
-      if (inMemory && inMemory.imageUrl) {
-        return inMemory.imageUrl;
-      }
-
       const thumbnail = this.quoteThumbnail;
       if (thumbnail && thumbnail.objectUrl) {
         return thumbnail.objectUrl;
@@ -232,8 +232,11 @@
 
       return ConversationController.get(author);
     },
-    processAttachment(attachment, objectUrl) {
-      const thumbnail = !objectUrl
+    processAttachment(attachment, externalObjectUrl) {
+      const { thumbnail } = attachment;
+      const objectUrl = (thumbnail && thumbnail.objectUrl) || externalObjectUrl;
+
+      const thumbnailWithObjectUrl = !objectUrl
         ? null
         : Object.assign({}, attachment.thumbnail || {}, {
           objectUrl,
@@ -242,7 +245,7 @@
       return Object.assign({}, attachment, {
         // eslint-disable-next-line no-bitwise
         isVoiceMessage: Boolean(attachment.flags & this.VOICE_FLAG),
-        thumbnail,
+        thumbnail: thumbnailWithObjectUrl,
       });
     },
     getPropsForQuote() {