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/signal.js

@@ -4,7 +4,6 @@ const Backbone = require('../../ts/backbone');
 const Crypto = require('./crypto');
 const Database = require('./database');
 const Emoji = require('../../ts/util/emoji');
-const Message = require('./types/message');
 const Notifications = require('../../ts/notifications');
 const OS = require('../../ts/OS');
 const Settings = require('./settings');
@@ -18,19 +17,38 @@ const {
 const { ContactListItem } = require('../../ts/components/ContactListItem');
 const { ContactName } = require('../../ts/components/conversation/ContactName');
 const {
-  ConversationTitle,
-} = require('../../ts/components/conversation/ConversationTitle');
+  ConversationHeader,
+} = require('../../ts/components/conversation/ConversationHeader');
 const {
   EmbeddedContact,
 } = require('../../ts/components/conversation/EmbeddedContact');
 const { Emojify } = require('../../ts/components/conversation/Emojify');
+const {
+  GroupNotification,
+} = require('../../ts/components/conversation/GroupNotification');
 const { Lightbox } = require('../../ts/components/Lightbox');
 const { LightboxGallery } = require('../../ts/components/LightboxGallery');
 const {
   MediaGallery,
 } = require('../../ts/components/conversation/media-gallery/MediaGallery');
+const { Message } = require('../../ts/components/conversation/Message');
 const { MessageBody } = require('../../ts/components/conversation/MessageBody');
+const {
+  MessageDetail,
+} = require('../../ts/components/conversation/MessageDetail');
 const { Quote } = require('../../ts/components/conversation/Quote');
+const {
+  ResetSessionNotification,
+} = require('../../ts/components/conversation/ResetSessionNotification');
+const {
+  SafetyNumberNotification,
+} = require('../../ts/components/conversation/SafetyNumberNotification');
+const {
+  TimerNotification,
+} = require('../../ts/components/conversation/TimerNotification');
+const {
+  VerificationNotification,
+} = require('../../ts/components/conversation/VerificationNotification');
 
 // Migrations
 const {
@@ -42,11 +60,14 @@ const Migrations1DatabaseWithoutAttachmentData = require('./migrations/migration
 
 // Types
 const AttachmentType = require('./types/attachment');
+const VisualAttachment = require('./types/visual_attachment');
 const Contact = require('../../ts/types/Contact');
 const Conversation = require('../../ts/types/Conversation');
 const Errors = require('./types/errors');
 const MediaGalleryMessage = require('../../ts/components/conversation/media-gallery/types/Message');
+const MessageType = require('./types/message');
 const MIME = require('../../ts/types/MIME');
+const PhoneNumber = require('../../ts/types/PhoneNumber');
 const SettingsType = require('../../ts/types/Settings');
 
 // Views
@@ -57,39 +78,59 @@ const { IdleDetector } = require('./idle_detector');
 const MessageDataMigrator = require('./messages_data_migrator');
 
 function initializeMigrations({
-  Attachments,
   userDataPath,
-  Type,
   getRegionCode,
+  Attachments,
+  Type,
+  VisualType,
 }) {
   if (!Attachments) {
     return null;
   }
+  const {
+    getPath,
+    createReader,
+    createAbsolutePathGetter,
+    createWriterForNew,
+    createWriterForExisting,
+  } = Attachments;
+  const {
+    makeObjectUrl,
+    revokeObjectUrl,
+    getImageDimensions,
+    makeImageThumbnail,
+    makeVideoScreenshot,
+  } = VisualType;
 
-  const attachmentsPath = Attachments.getPath(userDataPath);
-  const readAttachmentData = Attachments.createReader(attachmentsPath);
+  const attachmentsPath = getPath(userDataPath);
+  const readAttachmentData = createReader(attachmentsPath);
   const loadAttachmentData = Type.loadData(readAttachmentData);
+  const getAbsoluteAttachmentPath = createAbsolutePathGetter(attachmentsPath);
 
   return {
     attachmentsPath,
     deleteAttachmentData: Type.deleteData(
       Attachments.createDeleter(attachmentsPath)
     ),
-    getAbsoluteAttachmentPath: Attachments.createAbsolutePathGetter(
-      attachmentsPath
-    ),
+    getAbsoluteAttachmentPath,
     getPlaceholderMigrations,
     loadAttachmentData,
-    loadMessage: Message.createAttachmentLoader(loadAttachmentData),
+    loadMessage: MessageType.createAttachmentLoader(loadAttachmentData),
     Migrations0DatabaseWithAttachmentData,
     Migrations1DatabaseWithoutAttachmentData,
     upgradeMessageSchema: message =>
-      Message.upgradeSchema(message, {
-        writeNewAttachmentData: Attachments.createWriterForNew(attachmentsPath),
+      MessageType.upgradeSchema(message, {
+        writeNewAttachmentData: createWriterForNew(attachmentsPath),
         getRegionCode,
+        getAbsoluteAttachmentPath,
+        makeObjectUrl,
+        revokeObjectUrl,
+        getImageDimensions,
+        makeImageThumbnail,
+        makeVideoScreenshot,
       }),
-    writeMessageAttachments: Message.createAttachmentDataWriter(
-      Attachments.createWriterForExisting(attachmentsPath)
+    writeMessageAttachments: MessageType.createAttachmentDataWriter(
+      createWriterForExisting(attachmentsPath)
     ),
   };
 }
@@ -98,27 +139,35 @@ exports.setup = (options = {}) => {
   const { Attachments, userDataPath, getRegionCode } = options;
 
   const Migrations = initializeMigrations({
-    Attachments,
     userDataPath,
-    Type: AttachmentType,
     getRegionCode,
+    Attachments,
+    Type: AttachmentType,
+    VisualType: VisualAttachment,
   });
 
   const Components = {
     ContactDetail,
     ContactListItem,
     ContactName,
-    ConversationTitle,
+    ConversationHeader,
     EmbeddedContact,
     Emojify,
+    GroupNotification,
     Lightbox,
     LightboxGallery,
     MediaGallery,
+    Message,
     MessageBody,
+    MessageDetail,
+    Quote,
+    ResetSessionNotification,
+    SafetyNumberNotification,
+    TimerNotification,
     Types: {
       Message: MediaGalleryMessage,
     },
-    Quote,
+    VerificationNotification,
   };
 
   const Types = {
@@ -126,9 +175,11 @@ exports.setup = (options = {}) => {
     Contact,
     Conversation,
     Errors,
-    Message,
+    Message: MessageType,
     MIME,
+    PhoneNumber,
     Settings: SettingsType,
+    VisualAttachment,
   };
 
   const Views = {