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

ts/styleguide/StyleGuideUtil.ts

@@ -1,22 +1,12 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { default as _, padStart, sample } from 'lodash';
-import libphonenumber from 'google-libphonenumber';
-
-import moment from 'moment';
 import QueryString from 'qs';
 
-export { _ };
-
-// Helper components used in the Style Guide, exposed at 'util' in the global scope via
-//   the 'context' option in react-styleguidist.
+// This file provides helpers for the Style Guide, exposed at 'util' in the global scope
+//   via the 'context' option in react-styleguidist.
 
+import { default as _ } from 'lodash';
 export { ConversationContext } from './ConversationContext';
-export { BackboneWrapper } from '../components/utility/BackboneWrapper';
 
-// @ts-ignore
-import * as Signal from '../../js/modules/signal';
-import { SignalService } from '../protobuf';
+export { _ };
 
 // TypeScript wants two things when you import:
 //   1) a normal typescript file
@@ -25,6 +15,7 @@ import { SignalService } from '../protobuf';
 
 // @ts-ignore
 import gif from '../../fixtures/giphy-GVNvOUpeYmI7e.gif';
+// 320x240
 const gifObjectUrl = makeObjectUrl(gif, 'image/gif');
 // @ts-ignore
 import mp3 from '../../fixtures/incompetech-com-Agnus-Dei-X.mp3';
@@ -37,6 +28,7 @@ import mp4 from '../../fixtures/pixabay-Soap-Bubble-7141.mp4';
 const mp4ObjectUrl = makeObjectUrl(mp4, 'video/mp4');
 // @ts-ignore
 import png from '../../fixtures/freepngs-2cd43b_bed7d1327e88454487397574d87b64dc_mv2.png';
+// 800×1200
 const pngObjectUrl = makeObjectUrl(png, 'image/png');
 
 // @ts-ignore
@@ -63,9 +55,6 @@ function makeObjectUrl(data: ArrayBuffer, contentType: string): string {
   return URL.createObjectURL(blob);
 }
 
-const ourNumber = '+12025559999';
-const groupNumber = '+12025550099';
-
 export {
   mp3,
   mp3ObjectUrl,
@@ -87,13 +76,8 @@ export {
   landscapeRedObjectUrl,
   portraitTeal,
   portraitTealObjectUrl,
-  ourNumber,
-  groupNumber,
 };
 
-// Required, or TypeScript complains about adding keys to window
-const parent = window as any;
-
 const query = window.location.search.replace(/^\?/, '');
 const urlOptions = QueryString.parse(query);
 const theme = urlOptions.theme || 'light-theme';
@@ -104,123 +88,10 @@ import localeMessages from '../../_locales/en/messages.json';
 
 // @ts-ignore
 import { setup } from '../../js/modules/i18n';
-import fileSize from 'filesize';
-
 const i18n = setup(locale, localeMessages);
 
-parent.filesize = fileSize;
-
-parent.i18n = i18n;
-parent.React = React;
-parent.ReactDOM = ReactDOM;
-parent.moment = moment;
-
-parent.moment.updateLocale(locale, {
-  relativeTime: {
-    h: parent.i18n('timestamp_h'),
-    m: parent.i18n('timestamp_m'),
-    s: parent.i18n('timestamp_s'),
-  },
-});
-parent.moment.locale(locale);
-
 export { theme, locale, i18n };
 
-// Used by signal.js to set up code that deals with message attachments/avatars
-const Attachments = {
-  createAbsolutePathGetter: () => () => '/fake/path',
-  createDeleter: () => async () => undefined,
-  createReader: () => async () => new ArrayBuffer(10),
-  createWriterForExisting: () => async () => '/fake/path',
-  createWriterForNew: () => async () => ({
-    data: new ArrayBuffer(10),
-    path: '/fake/path',
-  }),
-  getPath: (path: string) => path,
-};
-
-parent.Signal = Signal.setup({
-  Attachments,
-  userDataPath: '/',
-  // tslint:disable-next-line:no-backbone-get-set-outside-model
-  getRegionCode: () => parent.storage.get('regionCode'),
-});
-parent.SignalService = SignalService;
-
-parent.ConversationController._initialFetchComplete = true;
-parent.ConversationController._initialPromise = Promise.resolve();
-
-const COLORS = [
-  'red',
-  'pink',
-  'purple',
-  'deep_purple',
-  'indigo',
-  'blue',
-  'light_blue',
-  'cyan',
-  'teal',
-  'green',
-  'light_green',
-  'orange',
-  'deep_orange',
-  'amber',
-  'blue_grey',
-  'grey',
-  'default',
-];
-
-const CONTACTS = COLORS.map((color, index) => {
-  const title = `${sample(['Mr.', 'Mrs.', 'Ms.', 'Unknown'])} ${color} 🔥`;
-  const key = sample(['name', 'profileName']) as string;
-  const id = `+1202555${padStart(index.toString(), 4, '0')}`;
-
-  const contact = {
-    color,
-    [key]: title,
-    id,
-    type: 'private',
-  };
-
-  return parent.ConversationController.dangerouslyCreateAndAdd(contact);
-});
-
-const me = parent.ConversationController.dangerouslyCreateAndAdd({
-  id: ourNumber,
-  name: 'Me!',
-  type: 'private',
-  color: 'light_blue',
-});
-
-const group = parent.ConversationController.dangerouslyCreateAndAdd({
-  id: groupNumber,
-  name: 'A place for sharing cats',
-  type: 'group',
-});
-
-group.contactCollection.add(me);
-group.contactCollection.add(CONTACTS[0]);
-group.contactCollection.add(CONTACTS[1]);
-group.contactCollection.add(CONTACTS[2]);
-
-export { COLORS, CONTACTS, me, group };
-
-parent.textsecure.storage.user.getNumber = () => ourNumber;
-parent.textsecure.messaging = {
-  getProfile: async (phoneNumber: string): Promise<boolean> => {
-    if (parent.ConversationController.get(phoneNumber)) {
-      return true;
-    }
-
-    throw new Error('User does not have Signal account');
-  },
-};
-
-parent.libphonenumber = libphonenumber.PhoneNumberUtil.getInstance();
-parent.libphonenumber.PhoneNumberFormat = libphonenumber.PhoneNumberFormat;
-
-parent.storage.put('regionCode', 'US');
-
 // Telling Lodash to relinquish _ for use by underscore
 // @ts-ignore
 _.noConflict();