Extract Message.loadWithObjectURL

js/views/conversation_view.js

@@ -583,27 +583,14 @@
       // - [ ] Fetch file attachments
       // - [ ] Add mechanism to fetch more data
 
-      const mediaWithoutAttachmentData =
-        await Signal.Backbone.Conversation.fetchVisualMediaAttachments({
-            conversationId: this.model.get('id'),
-            WhisperMessageCollection: Whisper.MessageCollection,
-        });
-
-      const mediaWithAttachmentData =
-        await Promise.all(mediaWithoutAttachmentData.map(Signal.Migrations.loadMessage));
-
-      const withObjectURL = message => {
-        if (!message.attachments || message.attachments.length === 0) {
-            throw new TypeError('`message.attachments` cannot be empty');
-        }
-        const attachment = message.attachments[0];
-        const objectURL = Signal.Util.arrayBufferToObjectURL({
-            data: attachment.data,
-            type: attachment.contentType,
-        });
-        return Object.assign({}, message, {objectURL});
-      }
-      const mediaWithObjectURLs = mediaWithAttachmentData.map(withObjectURL);
+      const media = await Signal.Backbone.Conversation.fetchVisualMediaAttachments({
+        conversationId: this.model.get('id'),
+        WhisperMessageCollection: Whisper.MessageCollection,
+      });
+      const loadMessages = Signal.Components.PropTypes.Message.loadWithObjectURL(
+        Signal.Migrations.loadMessage
+      );
+      const mediaWithObjectURLs = await loadMessages(media);
 
       const props = {
         media: mediaWithObjectURLs,

preload.js

@@ -166,8 +166,14 @@ const { MediaGallery } =
   require('./ts/components/conversation/media-gallery/MediaGallery');
 const { Quote } = require('./ts/components/conversation/Quote');
 
+const PropTypesMessage =
+  require('./ts/components/conversation/media-gallery/propTypes/Message');
+
 window.Signal.Components = {
   MediaGallery,
+  PropTypes: {
+    Message: PropTypesMessage,
+  },
   Quote,
 };
 

ts/backbone/Conversation.ts

@@ -3,8 +3,8 @@
  */
 import is from '@sindresorhus/is';
 
-import { deferredToPromise } from '../../js/modules/deferred_to_promise';
 import { Collection as BackboneCollection } from '../types/backbone/Collection';
+import { deferredToPromise } from '../../js/modules/deferred_to_promise';
 import { Message } from '../types/Message';
 
 export const fetchVisualMediaAttachments = async ({

ts/components/conversation/media-gallery/propTypes/Message.tsx

@@ -1,15 +1,45 @@
 /**
  * @prettier
  */
-export interface Message {
-  body?: string;
-  received_at: number;
-  attachments: Array<{
-    data?: ArrayBuffer;
-    fileName?: string;
-    size?: number;
-  }>;
+import is from '@sindresorhus/is';
 
-  // TODO: Revisit
-  objectURL?: string;
-}
+import { arrayBufferToObjectURL } from '../../../../util/arrayBufferToObjectURL';
+import { Attachment } from '../../../../types/Attachment';
+import { MapAsync } from '../../../../types/MapAsync';
+import { MIMEType } from '../../../../types/MIME';
+
+export type Message = {
+  attachments: Array<Attachment>;
+  received_at: number;
+} & { objectURL?: string };
+
+const DEFAULT_CONTENT_TYPE: MIMEType = 'application/octet-stream' as MIMEType;
+
+export const loadWithObjectURL = (loadMessage: MapAsync<Message>) => async (
+  media: Array<Message>
+): Promise<Array<Message>> => {
+  if (!is.function_(loadMessage)) {
+    throw new TypeError("'loadMessage' must be a function");
+  }
+  if (!is.array(media)) {
+    throw new TypeError("'media' must be a function");
+  }
+
+  const mediaWithAttachmentData = await Promise.all(media.map(loadMessage));
+  return mediaWithAttachmentData.map(withObjectURL);
+};
+
+const withObjectURL = (message: Message): Message => {
+  if (message.attachments.length === 0) {
+    throw new TypeError('`message.attachments` cannot be empty');
+  }
+  const attachment = message.attachments[0];
+  const objectURL = arrayBufferToObjectURL({
+    data: attachment.data,
+    type: attachment.contentType || DEFAULT_CONTENT_TYPE,
+  });
+  return {
+    ...message,
+    objectURL,
+  };
+};