Finish new Message component, integrate into application

Also:
- New schema version 8 with video/image thumbnails, screenshots, sizes
- Upgrade messages not at current schema version when loading messages
  to show in conversation
- New MessageDetail react component
- New ConversationHeader react component

js/modules/types/attachment.js

@@ -1,7 +1,9 @@
 const is = require('@sindresorhus/is');
 
 const AttachmentTS = require('../../../ts/types/Attachment');
+const GoogleChrome = require('../../../ts/util/GoogleChrome');
 const MIME = require('../../../ts/types/MIME');
+const { toLogFormat } = require('./errors');
 const {
   arrayBufferToBlob,
   blobToArrayBuffer,
@@ -181,3 +183,112 @@ exports.deleteData = deleteAttachmentData => {
 
 exports.isVoiceMessage = AttachmentTS.isVoiceMessage;
 exports.save = AttachmentTS.save;
+
+const THUMBNAIL_SIZE = 150;
+const THUMBNAIL_CONTENT_TYPE = 'image/png';
+
+exports.captureDimensionsAndScreenshot = async (
+  attachment,
+  {
+    writeNewAttachmentData,
+    getAbsoluteAttachmentPath,
+    makeObjectUrl,
+    revokeObjectUrl,
+    getImageDimensions,
+    makeImageThumbnail,
+    makeVideoScreenshot,
+  }
+) => {
+  const { contentType } = attachment;
+
+  if (
+    !GoogleChrome.isImageTypeSupported(contentType) &&
+    !GoogleChrome.isVideoTypeSupported(contentType)
+  ) {
+    return attachment;
+  }
+
+  const absolutePath = await getAbsoluteAttachmentPath(attachment.path);
+
+  if (GoogleChrome.isImageTypeSupported(contentType)) {
+    try {
+      const { width, height } = await getImageDimensions(absolutePath);
+      const thumbnailBuffer = await blobToArrayBuffer(
+        await makeImageThumbnail(
+          THUMBNAIL_SIZE,
+          absolutePath,
+          THUMBNAIL_CONTENT_TYPE
+        )
+      );
+
+      const thumbnailPath = await writeNewAttachmentData(thumbnailBuffer);
+      return {
+        ...attachment,
+        width,
+        height,
+        thumbnail: {
+          path: thumbnailPath,
+          contentType: THUMBNAIL_CONTENT_TYPE,
+          width: THUMBNAIL_SIZE,
+          height: THUMBNAIL_SIZE,
+        },
+      };
+    } catch (error) {
+      console.log(
+        'captureDimensionsAndScreenshot:',
+        'error processing image; skipping screenshot generation',
+        toLogFormat(error)
+      );
+      return attachment;
+    }
+  }
+
+  let screenshotObjectUrl;
+  try {
+    const screenshotBuffer = await blobToArrayBuffer(
+      await makeVideoScreenshot(absolutePath, THUMBNAIL_CONTENT_TYPE)
+    );
+    screenshotObjectUrl = makeObjectUrl(
+      screenshotBuffer,
+      THUMBNAIL_CONTENT_TYPE
+    );
+    const { width, height } = await getImageDimensions(screenshotObjectUrl);
+    const screenshotPath = await writeNewAttachmentData(screenshotBuffer);
+
+    const thumbnailBuffer = await blobToArrayBuffer(
+      await makeImageThumbnail(
+        THUMBNAIL_SIZE,
+        screenshotObjectUrl,
+        THUMBNAIL_CONTENT_TYPE
+      )
+    );
+
+    const thumbnailPath = await writeNewAttachmentData(thumbnailBuffer);
+
+    return {
+      ...attachment,
+      screenshot: {
+        contentType: THUMBNAIL_CONTENT_TYPE,
+        path: screenshotPath,
+        width,
+        height,
+      },
+      thumbnail: {
+        path: thumbnailPath,
+        contentType: THUMBNAIL_CONTENT_TYPE,
+        width: THUMBNAIL_SIZE,
+        height: THUMBNAIL_SIZE,
+      },
+      width,
+      height,
+    };
+  } catch (error) {
+    console.log(
+      'captureDimensionsAndScreenshot: error processing video; skipping screenshot generation',
+      toLogFormat(error)
+    );
+    return attachment;
+  } finally {
+    revokeObjectUrl(screenshotObjectUrl);
+  }
+};

js/modules/types/message.js

@@ -41,6 +41,9 @@ const PRIVATE = 'private';
 //     - `hasVisualMediaAttachments`: Include all images and video regardless of
 //       whether Chromium can render it or not.
 //     - `hasFileAttachments`: Exclude voice messages.
+// Version 8
+//   - Attachments: Capture video/image dimensions and thumbnails, as well as a
+//       full-size screenshot for video.
 
 const INITIAL_SCHEMA_VERSION = 0;
 
@@ -128,7 +131,7 @@ exports._withSchemaVersion = (schemaVersion, upgrade) => {
       upgradedMessage = await upgrade(message, context);
     } catch (error) {
       console.log(
-        'Message._withSchemaVersion: error:',
+        `Message._withSchemaVersion: error updating message ${message.id}:`,
         Errors.toLogFormat(error)
       );
       return message;
@@ -242,6 +245,11 @@ const toVersion6 = exports._withSchemaVersion(
 // classified:
 const toVersion7 = exports._withSchemaVersion(7, initializeAttachmentMetadata);
 
+const toVersion8 = exports._withSchemaVersion(
+  8,
+  exports._mapAttachments(Attachment.captureDimensionsAndScreenshot)
+);
+
 const VERSIONS = [
   toVersion0,
   toVersion1,
@@ -251,19 +259,47 @@ const VERSIONS = [
   toVersion5,
   toVersion6,
   toVersion7,
+  toVersion8,
 ];
 exports.CURRENT_SCHEMA_VERSION = VERSIONS.length - 1;
 
 // UpgradeStep
 exports.upgradeSchema = async (
   rawMessage,
-  { writeNewAttachmentData, getRegionCode } = {}
+  {
+    writeNewAttachmentData,
+    getRegionCode,
+    getAbsoluteAttachmentPath,
+    makeObjectUrl,
+    revokeObjectUrl,
+    getImageDimensions,
+    makeImageThumbnail,
+    makeVideoScreenshot,
+  } = {}
 ) => {
   if (!isFunction(writeNewAttachmentData)) {
-    throw new TypeError('`context.writeNewAttachmentData` is required');
+    throw new TypeError('context.writeNewAttachmentData is required');
   }
   if (!isFunction(getRegionCode)) {
-    throw new TypeError('`context.getRegionCode` is required');
+    throw new TypeError('context.getRegionCode is required');
+  }
+  if (!isFunction(getAbsoluteAttachmentPath)) {
+    throw new TypeError('context.getAbsoluteAttachmentPath is required');
+  }
+  if (!isFunction(makeObjectUrl)) {
+    throw new TypeError('context.makeObjectUrl is required');
+  }
+  if (!isFunction(revokeObjectUrl)) {
+    throw new TypeError('context.revokeObjectUrl is required');
+  }
+  if (!isFunction(getImageDimensions)) {
+    throw new TypeError('context.getImageDimensions is required');
+  }
+  if (!isFunction(makeImageThumbnail)) {
+    throw new TypeError('context.makeImageThumbnail is required');
+  }
+  if (!isFunction(makeVideoScreenshot)) {
+    throw new TypeError('context.makeVideoScreenshot is required');
   }
 
   let message = rawMessage;
@@ -275,6 +311,12 @@ exports.upgradeSchema = async (
     message = await currentVersion(message, {
       writeNewAttachmentData,
       regionCode: getRegionCode(),
+      getAbsoluteAttachmentPath,
+      makeObjectUrl,
+      revokeObjectUrl,
+      getImageDimensions,
+      makeImageThumbnail,
+      makeVideoScreenshot,
     });
   }
 

js/modules/types/visual_attachment.js

@@ -0,0 +1,126 @@
+/* global document, URL, Blob */
+
+const loadImage = require('blueimp-load-image');
+const { toLogFormat } = require('./errors');
+const dataURLToBlobSync = require('blueimp-canvas-to-blob');
+const { blobToArrayBuffer } = require('blob-util');
+const {
+  arrayBufferToObjectURL,
+} = require('../../../ts/util/arrayBufferToObjectURL');
+
+exports.blobToArrayBuffer = blobToArrayBuffer;
+
+exports.getImageDimensions = objectUrl =>
+  new Promise((resolve, reject) => {
+    const image = document.createElement('img');
+
+    image.addEventListener('load', () => {
+      resolve({
+        height: image.naturalHeight,
+        width: image.naturalWidth,
+      });
+    });
+    image.addEventListener('error', error => {
+      console.log('getImageDimensions error', toLogFormat(error));
+      reject(error);
+    });
+
+    image.src = objectUrl;
+  });
+
+exports.makeImageThumbnail = (size, objectUrl, contentType = 'image/png') =>
+  new Promise((resolve, reject) => {
+    const image = document.createElement('img');
+
+    image.addEventListener('load', () => {
+      // using components/blueimp-load-image
+
+      // first, make the correct size
+      let canvas = loadImage.scale(image, {
+        canvas: true,
+        cover: true,
+        maxWidth: size,
+        maxHeight: size,
+        minWidth: size,
+        minHeight: size,
+      });
+
+      // then crop
+      canvas = loadImage.scale(canvas, {
+        canvas: true,
+        crop: true,
+        maxWidth: size,
+        maxHeight: size,
+        minWidth: size,
+        minHeight: size,
+      });
+
+      const blob = dataURLToBlobSync(canvas.toDataURL(contentType));
+
+      resolve(blob);
+    });
+
+    image.addEventListener('error', error => {
+      console.log('makeImageThumbnail error', toLogFormat(error));
+      reject(error);
+    });
+
+    image.src = objectUrl;
+  });
+
+exports.makeVideoScreenshot = (objectUrl, contentType = 'image/png') =>
+  new Promise((resolve, reject) => {
+    const video = document.createElement('video');
+
+    function capture() {
+      const canvas = document.createElement('canvas');
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      canvas
+        .getContext('2d')
+        .drawImage(video, 0, 0, canvas.width, canvas.height);
+
+      const image = dataURLToBlobSync(canvas.toDataURL(contentType));
+
+      video.removeEventListener('canplay', capture);
+
+      resolve(image);
+    }
+
+    video.addEventListener('canplay', capture);
+    video.addEventListener('error', error => {
+      console.log('makeVideoThumbnail error', toLogFormat(error));
+      reject(error);
+    });
+
+    video.src = objectUrl;
+  });
+
+exports.makeVideoThumbnail = async (size, videoObjectUrl) => {
+  let screenshotObjectUrl;
+  try {
+    const type = 'image/png';
+    const blob = await exports.makeVideoScreenshot(videoObjectUrl, type);
+    const data = await blobToArrayBuffer(blob);
+    screenshotObjectUrl = arrayBufferToObjectURL({
+      data,
+      type,
+    });
+
+    return exports.makeImageThumbnail(size, screenshotObjectUrl);
+  } finally {
+    exports.revokeObjectUrl(screenshotObjectUrl);
+  }
+};
+
+exports.makeObjectUrl = (data, contentType) => {
+  const blob = new Blob([data], {
+    type: contentType,
+  });
+
+  return URL.createObjectURL(blob);
+};
+
+exports.revokeObjectUrl = objectUrl => {
+  URL.revokeObjectURL(objectUrl);
+};