Styleguide: Incoming/outgoing attachments of all types

styleguide.config.js

@@ -126,6 +126,9 @@ module.exports = {
         {
           src: 'js/views/timestamp_view.js',
         },
+        {
+          src: 'js/views/attachment_view.js',
+        },
         {
           src: 'js/views/message_view.js',
         },

test/styleguide/legacy_bridge.js

@@ -10,12 +10,33 @@
 window.PROTO_ROOT = '/protos';
 window.nodeSetImmediate = () => {};
 
+window.libphonenumber = {
+  parse: number => ({
+    e164: number,
+    isValidNumber: true,
+    getCountryCode: () => '1',
+    getNationalNumber: () => number,
+  }),
+  isValidNumber: () => true,
+  getRegionCodeForNumber: () => '1',
+  format: number => number.e164,
+  PhoneNumberFormat: {},
+};
+
 window.Signal = {};
 window.Signal.Backup = {};
 window.Signal.Crypto = {};
 window.Signal.Logs = {};
 window.Signal.Migrations = {
-  getPlaceholderMigrations: () => {},
+  getPlaceholderMigrations: () => [{
+    migrate: (transaction, next) => {
+      console.log('migration version 1');
+      transaction.db.createObjectStore('conversations');
+      next();
+    },
+    version: 1
+  }],
+  loadAttachmentData: attachment => Promise.resolve(attachment),
 };
 
 window.Signal.Components = {};

test/styleguide/legacy_templates.js

@@ -49,4 +49,13 @@ window.Whisper.View.Templates = {
   expirationTimerUpdate: `
     <span class='content'><span class='icon clock'></span> {{ content }}</span>
   `,
+  'file-view': `
+    <div class='icon {{ mediaType }}'></div>
+    <div class='text'>
+      <div class='fileName' title='{{ altText }}'>
+        {{ fileName }}
+      </div>
+      <div class='fileSize'>{{ fileSize }}</div>
+    </div>
+  `,
 };

ts/components/conversation/Message.md

@@ -1,6 +1,161 @@
 
+Placeholder:
+
 ```jsx
 <util.ConversationContext theme={util.theme}>
   <Message />
 </util.ConversationContext>
 ```
+
+## With an attachment
+
+### Image
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  body: 'I am pretty confused about Pi.',
+  sent_at: Date.now() - 18000000,
+  attachments: [{
+    data: util.gif,
+    fileName: 'pi.gif',
+    contentType: 'image/gif',
+  }],
+});
+const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
+  source: '+12025550100',
+  type: 'incoming',
+}));
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: incoming }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```
+
+### Video
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  body: "Beatiful, isn't it?",
+  sent_at: Date.now() - 10000,
+  attachments: [{
+    data: util.mp4,
+    fileName: 'freezing_bubble.mp4',
+    contentType: 'video/mp4',
+  }],
+});
+const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
+  source: '+12025550100',
+  type: 'incoming',
+}));
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: incoming }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```
+
+### Audio
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  body: 'This is a nice song',
+  sent_at: Date.now() - 15000,
+  attachments: [{
+    data: util.mp3,
+    fileName: 'agnus_dei.mp3',
+    contentType: 'audio/mp3',
+  }],
+});
+const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
+  source: '+12025550100',
+  type: 'incoming',
+}));
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: incoming }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```
+
+### Voice message
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  body: 'This is a nice song',
+  sent_at: Date.now() - 15000,
+  attachments: [{
+    flags: textsecure.protobuf.AttachmentPointer.Flags.VOICE_MESSAGE,
+    data: util.mp3,
+    fileName: 'agnus_dei.mp3',
+    contentType: 'audio/mp3',
+  }],
+});
+const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
+  source: '+12025550100',
+  type: 'incoming',
+}));
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: incoming }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```
+
+### Other file type
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  body: 'My manifesto is now complete!',
+  sent_at: Date.now() - 15000,
+  attachments: [{
+    data: util.txt,
+    fileName: 'lorum_ipsum.txt',
+    contentType: 'text/plain',
+  }],
+});
+const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
+  source: '+12025550100',
+  type: 'incoming',
+}));
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: incoming }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```

ts/components/conversation/Message.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 
 
 /**
- * A placeholder Message component, giving the structure of a plain message with none of
- * the dynamic functionality. We can build off of this going forward.
+ * A placeholder Message component for now, giving the structure of a plain message with
+ * none of the dynamic functionality. This page will be used to build up our corpus of
+ * permutations before start moving all message functionality to React.
  */
 export class Message extends React.Component<{}, {}> {
   public render() {

ts/components/conversation/Reply.md

@@ -1,2 +1,20 @@
 
 This is Reply.md.
+
+```jsx
+const model = new Whisper.Message({
+  type: 'outgoing',
+  body: 'text',
+  sent_at: Date.now() - 18000000,
+})
+const View = Whisper.MessageView;
+const options = {
+  model,
+};
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper
+    View={View}
+    options={options}
+  />
+</util.ConversationContext>
+```

ts/styleguide/StyleGuideUtil.ts

@@ -82,3 +82,5 @@ parent.Signal.Components = {
   Reply,
 };
 
+parent.ConversationController._initialFetchComplete = true;
+parent.ConversationController._initialPromise = Promise.resolve();