signal-desktop/ts/components/conversation/Message.md at a7d44d334455a4f9977ebcadfd36e77ffa5db6e8

Scott Nonnenberg a563dc8b37

Style Guide: Additional message examples, a few fixes to enable

2018-04-20 15:23:47 -07:00

15 KiB

Raw Blame History

Placeholder component:

<util.ConversationContext theme={util.theme}>
  <Message />
</util.ConversationContext>

MessageView (Backbone)

Plain messages

const outgoing = new Whisper.Message({
  type: 'outgoing',
  body: 'How are you doing this fine day?',
  sent_at: Date.now() - 18000,
});
const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
  source: '+12025550003',
  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>

In a group conversation

const outgoing = new Whisper.Message({
  type: 'outgoing',
  body: 'How are you doing this fine day?',
  sent_at: Date.now() - 200000,
});
const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
  source: '+12025550003',
  type: 'incoming',
}));
const View = Whisper.MessageView;
<util.ConversationContext theme={util.theme} type="group" >
  <util.BackboneWrapper
    View={View}
    options={{ model: incoming }}
  />
  <util.BackboneWrapper
    View={View}
    options={{ model: outgoing }}
  />
</util.ConversationContext>

With an error

General error

const error = new Error('Something went wrong!');

const outgoing = new Whisper.Message({
  type: 'outgoing',
  body: "This message won't get through...",
  sent_at: Date.now() - 200000,
  errors: [error],
});
const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
  source: '+12025550003',
  type: 'incoming',
  body: null,
}));
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>

Network error (outgoing only)

const error = new Error('Something went wrong!');
error.name = 'MessageError';

const outgoing = new Whisper.Message({
  type: 'outgoing',
  sent_at: Date.now() - 200000,
  errors: [error],
  body: "This message won't get through...",
});
const View = Whisper.MessageView;
<util.ConversationContext theme={util.theme} type="group" >
  <util.BackboneWrapper
    View={View}
    options={{ model: outgoing }}
  />
</util.ConversationContext>

Network error, partial send in group (outgoing only)

const error = new Error('Something went wrong!');
error.name = 'MessageError';

const outgoing = new Whisper.Message({
  type: 'outgoing',
  sent_at: Date.now() - 200000,
  errors: [error],
  conversationId: util.groupNumber,
  body: "This message won't get through...",
});
const View = Whisper.MessageView;
<util.ConversationContext theme={util.theme} type="group" >
  <util.BackboneWrapper
    View={View}
    options={{ model: outgoing }}
  />
</util.ConversationContext>

Disappearing

const outgoing = new Whisper.Message({
  type: 'outgoing',
  sent_at: Date.now() - 200000,
  expireTimer: 120,
  expirationStartTimestamp: Date.now() - 1000,
  body: 'This message will self-destruct in two minutes',
});
const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
  source: '+12025550003',
  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>

Notfications

Timer change

const fromOther = new Whisper.Message({
  type: 'incoming',
  flags: textsecure.protobuf.DataMessage.Flags.EXPIRATION_TIMER_UPDATE,
  source: '+12025550003',
  sent_at: Date.now() - 200000,
  expireTimer: 120,
  expirationStartTimestamp: Date.now() - 1000,
  expirationTimerUpdate: {
    source: '+12025550003',
  }
});
const fromUpdate = new Whisper.Message({
  type: 'incoming',
  flags: textsecure.protobuf.DataMessage.Flags.EXPIRATION_TIMER_UPDATE,
  source: util.ourNumber,
  sent_at: Date.now() - 200000,
  expireTimer: 120,
  expirationStartTimestamp: Date.now() - 1000,
  expirationTimerUpdate: {
    fromSync: true,
    source: util.ourNumber,
  }
});
const fromMe = new Whisper.Message({
  type: 'incoming',
  flags: textsecure.protobuf.DataMessage.Flags.EXPIRATION_TIMER_UPDATE,
  source: util.ourNumber,
  sent_at: Date.now() - 200000,
  expireTimer: 120,
  expirationStartTimestamp: Date.now() - 1000,
  expirationTimerUpdate: {
    source: util.ourNumber,
  }
});
const View = Whisper.ExpirationTimerUpdateView;
<util.ConversationContext theme={util.theme} >
  <util.BackboneWrapper
    View={View}
    options={{ model: fromOther }}
  />
  <util.BackboneWrapper
    View={View}
    options={{ model: fromUpdate }}
  />
  <util.BackboneWrapper
    View={View}
    options={{ model: fromMe }}
  />
</util.ConversationContext>

Safety number change

const incoming = new Whisper.Message({
  type: 'keychange',
  sent_at: Date.now() - 200000,
  key_changed: '+12025550003',
});
const View = Whisper.KeyChangeView;
<util.ConversationContext theme={util.theme} >
  <util.BackboneWrapper
    View={View}
    options={{ model: incoming }}
  />
</util.ConversationContext>

Marking as verified

const fromPrimary = new Whisper.Message({
  type: 'verified-change',
  sent_at: Date.now() - 200000,
  verifiedChanged: '+12025550003',
  verified: true,
});
const local = new Whisper.Message({
  type: 'verified-change',
  sent_at: Date.now() - 200000,
  verifiedChanged: '+12025550003',
  local: true,
  verified: true,
});

const View = Whisper.VerifiedChangeView;
<util.ConversationContext theme={util.theme} >
  <util.BackboneWrapper
    View={View}
    options={{ model: fromPrimary }}
  />
  <util.BackboneWrapper
    View={View}
    options={{ model: local }}
  />
</util.ConversationContext>

Marking as not verified

const fromPrimary = new Whisper.Message({
  type: 'verified-change',
  sent_at: Date.now() - 200000,
  verifiedChanged: '+12025550003',
});
const local = new Whisper.Message({
  type: 'verified-change',
  sent_at: Date.now() - 200000,
  verifiedChanged: '+12025550003',
  local: true,
});

const View = Whisper.VerifiedChangeView;
<util.ConversationContext theme={util.theme} >
  <util.BackboneWrapper
    View={View}
    options={{ model: fromPrimary }}
  />
  <util.BackboneWrapper
    View={View}
    options={{ model: local }}
  />
</util.ConversationContext>

With an attachment

Image with caption

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: '+12025550003',
  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>

Image

const outgoing = new Whisper.Message({
  type: 'outgoing',
  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: '+12025550003',
  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>

Image with portrait aspect ratio

const outgoing = new Whisper.Message({
  type: 'outgoing',
  sent_at: Date.now() - 18000000,
  attachments: [{
    data: util.portraitYellow,
    fileName: 'portraitYellow.png',
    contentType: 'image/png',
  }],
});
const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
  source: '+12025550003',
  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>

Image with portrait aspect ratio and caption

const outgoing = new Whisper.Message({
  type: 'outgoing',
  body: 'This is an odd yellow bar. Cool, huh?',
  sent_at: Date.now() - 18000000,
  attachments: [{
    data: util.portraitYellow,
    fileName: 'portraitYellow.png',
    contentType: 'image/png',
  }],
});
const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
  source: '+12025550003',
  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>

Image with landscape aspect ratio

const outgoing = new Whisper.Message({
  type: 'outgoing',
  sent_at: Date.now() - 18000000,
  attachments: [{
    data: util.landscapePurple,
    fileName: 'landscapePurple.jpg',
    contentType: 'image/jpeg',
  }],
});
const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
  source: '+12025550003',
  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>

Image with landscape aspect ratio and caption

const outgoing = new Whisper.Message({
  type: 'outgoing',
  body: "An interesting horizontal bar. It's art.",
  sent_at: Date.now() - 18000000,
  attachments: [{
    data: util.landscapePurple,
    fileName: 'landscapePurple.jpg',
    contentType: 'image/jpeg',
  }],
});
const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
  source: '+12025550003',
  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 with caption

const outgoing = new Whisper.Message({
  type: 'outgoing',
  body: "Beautiful, 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: '+12025550003',
  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

const outgoing = new Whisper.Message({
  type: 'outgoing',
  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: '+12025550003',
  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 with caption

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: '+12025550003',
  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

const outgoing = new Whisper.Message({
  type: 'outgoing',
  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: '+12025550003',
  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

const outgoing = new Whisper.Message({
  type: 'outgoing',
  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: '+12025550003',
  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 with caption

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: '+12025550003',
  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

const outgoing = new Whisper.Message({
  type: 'outgoing',
  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: '+12025550003',
  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>

15 KiB Raw Blame History

MessageView (Backbone)

Plain messages

In a group conversation

With an error

General error

Network error (outgoing only)

Network error, partial send in group (outgoing only)

Disappearing

Notfications

Timer change

Safety number change

Marking as verified

Marking as not verified

With an attachment

Image with caption

Image

Image with portrait aspect ratio

Image with portrait aspect ratio and caption

Image with landscape aspect ratio

Image with landscape aspect ratio and caption

Video with caption

Video

Audio with caption

Audio

Voice message

Other file type with caption

Other file type

15 KiB

Raw Blame History