+ 
+
+ );
+ }
+
+ const title = name ? getInitial(name) : '#';
+
+ return (
+
+
+ );
+ }
+
+ public render() {
+ const {
+ i18n,
+ name,
+ onClick,
+ isMe,
+ phoneNumber,
+ profileName,
+ verified,
+ } = this.props;
+
+ const title = name ? name : phoneNumber;
+ const displayName = isMe ? i18n('me') : title;
+
+ const profileElement =
+ !isMe && profileName && !name ? (
+
+ ~
+ {title}
+
+
+ {this.renderAvatar({ displayName })}
+
+ );
+ }
+}
diff --git a/ts/components/conversation/AddNewLines.tsx b/ts/components/conversation/AddNewLines.tsx
index 12996d059..a1562fad4 100644
--- a/ts/components/conversation/AddNewLines.tsx
+++ b/ts/components/conversation/AddNewLines.tsx
@@ -10,7 +10,7 @@ interface Props {
export class AddNewLines extends React.Component
+
+
+
+
+ {showVerified ? (
+
+ ) : null}
+ {showVerified ? ` ${i18n('verified')}` : null}
+ {showVerified && showNumber ? ' ∙ ' : null}
+ {showNumber ? phoneNumber : null}
+
+
+
+
+ );
+ }
+
public renderEmail(items: Array
- {
return items.map((item: Phone) => {
return (
-
{getLabelForEmail(item, i18n)}
+
+
);
@@ -92,8 +130,13 @@ export class ContactDetail extends React.Component
+ {getLabelForEmail(item, i18n)}
+
{item.value}
- {
return addresses.map((address: PostalAddress, index: number) => {
return (
-
{getLabelForPhone(item, i18n)}
+
+
);
@@ -142,8 +185,10 @@ export class ContactDetail extends React.Component
+ {getLabelForPhone(item, i18n)}
+
{item.value}
-
{getLabelForAddress(address, i18n)}
+
+ {
public render() {
const { contact, hasSignalAccount, i18n, onSendMessage } = this.props;
+ const isIncoming = false;
+ const module = 'contact-detail';
return (
-
- console.log('onClickContact')}
+ onSendMessageToContact={() => console.log('onSendMessageToContact')}
+ />
+ console.log('onClickContact')}
+ onSendMessageToContact={() => console.log('onSendMessageToContact')}
+ />
+ console.log('onClickContact')}
+ onSendMessageToContact={() => console.log('onSendMessageToContact')}
+ />
+ console.log('onClickContact')}
+ onSendMessageToContact={() => console.log('onSendMessageToContact')}
+ />
+ ;
+```
+
+#### Really long long data
+
+```
+const contacts = [
+ {
+ name: {
+ displayName: 'Dr. First Middle Last Junior Senior and all that and a bag of chips',
+ },
+ number: [
+ {
+ value: '(202) 555-0000 0000 0000 0000 0000 0000 0000 0000 0000 0000',
+ type: 1,
+ },
+ ],
+ avatar: {
+ avatar: {
+ path: util.gifObjectUrl,
+ },
+ },
+ },
+];
+
+ console.log('onClickContact')}
+ onSendMessageToContact={() => console.log('onSendMessageToContact')}
+ />
+ console.log('onClickContact')}
+ onSendMessageToContact={() => console.log('onSendMessageToContact')}
+ />
;
```
#### In group conversation
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- sent_at: Date.now() - 18000000,
- contact: [
- {
- name: {
- displayName: 'Someone Somewhere',
+const contacts = [
+ {
+ name: {
+ displayName: 'Someone Somewhere',
+ },
+ number: [
+ {
+ value: '(202) 555-0000',
+ type: 1,
},
- number: [
- {
- value: util.CONTACTS[0].id,
- type: 1,
- },
- ],
+ ],
+ avatar: {
avatar: {
- avatar: {
- path: util.gifObjectUrl,
- },
+ path: util.gifObjectUrl,
},
},
- ],
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- })
-);
-const View = Whisper.MessageView;
+ },
+];
- console.log('onClickContact')}
+ onSendMessageToContact={() => console.log('onSendMessageToContact')}
+ />
+ console.log('onClickContact')}
+ onSendMessageToContact={() => console.log('onSendMessageToContact')}
+ />
+ console.log('onClickContact')}
+ onSendMessageToContact={() => console.log('onSendMessageToContact')}
+ />
;
```
#### If contact has no signal account
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- sent_at: Date.now() - 18000000,
- contact: [
- {
- name: {
- displayName: 'Someone Somewhere',
+const contacts = [
+ {
+ name: {
+ displayName: 'Someone Somewhere',
+ },
+ number: [
+ {
+ value: '(202) 555-0000',
+ type: 1,
},
- number: [
- {
- value: '+12025551000',
- type: 1,
- },
- ],
+ ],
+ avatar: {
avatar: {
- avatar: {
- path: util.gifObjectUrl,
- },
+ path: util.gifObjectUrl,
},
},
- ],
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- })
-);
-const View = Whisper.MessageView;
+ },
+];
- console.log('onClickContact')}
+ />
+ console.log('onClickContact')}
+ />
+ console.log('onClickContact')}
+ />
+ console.log('onClickContact')}
+ />
;
```
#### With organization name instead of name
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- sent_at: Date.now() - 18000000,
- contact: [
- {
- organization: 'United Somewheres, Inc.',
- email: [
- {
- value: 'someone@somewheres.com',
- type: 2,
- },
- ],
+const contacts = [
+ {
+ organization: 'United Somewheres, Inc.',
+ email: [
+ {
+ value: 'someone@somewheres.com',
+ type: 2,
+ },
+ ],
+ avatar: {
avatar: {
- avatar: {
- path: util.gifObjectUrl,
- },
+ path: util.gifObjectUrl,
},
},
- ],
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- })
-);
-const View = Whisper.MessageView;
+ },
+];
- console.log('onClickContact')}
+ />
+ console.log('onClickContact')}
+ />
+ console.log('onClickContact')}
+ />
;
```
#### No displayName or organization
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- sent_at: Date.now() - 18000000,
- contact: [
- {
- name: {
- givenName: 'Someone',
+const contacts = [
+ {
+ name: {
+ givenName: 'Someone',
+ },
+ number: [
+ {
+ value: '+12025551000',
+ type: 1,
},
- number: [
- {
- value: '+12025551000',
- type: 1,
- },
- ],
+ ],
+ avatar: {
avatar: {
- avatar: {
- path: util.gifObjectUrl,
- },
+ path: util.gifObjectUrl,
},
},
- ],
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- })
-);
-const View = Whisper.MessageView;
+ },
+];
- console.log('onClickContact')}
+ />
+ console.log('onClickContact')}
+ />
+ console.log('onClickContact')}
+ />
+ console.log('onClickContact')}
+ />
;
```
#### Default avatar
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- sent_at: Date.now() - 18000000,
- contact: [
- {
- name: {
- displayName: 'Someone Somewhere',
- },
- number: [
- {
- value: util.CONTACTS[0].id,
- type: 1,
- },
- ],
+const contacts = [
+ {
+ name: {
+ displayName: 'Someone Somewhere',
},
- ],
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- })
-);
-const View = Whisper.MessageView;
+ number: [
+ {
+ value: util.CONTACTS[0].id,
+ type: 1,
+ },
+ ],
+ },
+];
- console.log('onClickContact')}
+ />
+ console.log('onClickContact')}
+ />
+ console.log('onClickContact')}
+ />
+ console.log('onClickContact')}
+ />
;
```
#### Empty contact
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- sent_at: Date.now() - 18000000,
- contact: [{}],
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- })
-);
-const View = Whisper.MessageView;
+const contacts = [{}];
- console.log('onClickContact')}
+ />
+ console.log('onClickContact')}
+ />
+ console.log('onClickContact')}
+ />
+ console.log('onClickContact')}
+ />
;
```
#### Contact with caption (cannot currently be sent)
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- sent_at: Date.now() - 18000000,
- body: 'I want to introduce you to Someone...',
- contact: [
- {
- name: {
- displayName: 'Someone Somewhere',
+const contacts = [
+ {
+ name: {
+ displayName: 'Someone Somewhere',
+ },
+ number: [
+ {
+ value: '(202) 555-0000',
+ type: 1,
},
- number: [
- {
- value: util.CONTACTS[0].id,
- type: 1,
- },
- ],
+ ],
+ avatar: {
avatar: {
- avatar: {
- path: util.gifObjectUrl,
- },
+ path: util.gifObjectUrl,
},
},
- ],
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- })
-);
-const View = Whisper.MessageView;
+ },
+];
- console.log('onClickContact')}
+ />
+ console.log('onClickContact')}
+ />
+ console.log('onClickContact')}
+ contactHasSignalAccount
+ onSendMessageToContact={() => console.log('onSendMessageToContact')}
+ />
+ console.log('onClickContact')}
+ contactHasSignalAccount
+ onSendMessageToContact={() => console.log('onSendMessageToContact')}
+ />
+ console.log('onClickContact')}
+ />
+ console.log('onClickContact')}
+ />
+ console.log('onClickContact')}
+ contactHasSignalAccount
+ onSendMessageToContact={() => console.log('onSendMessageToContact')}
+ />
+ console.log('onClickContact')}
+ contactHasSignalAccount
+ onSendMessageToContact={() => console.log('onSendMessageToContact')}
+ />
;
```
diff --git a/ts/components/conversation/EmbeddedContact.tsx b/ts/components/conversation/EmbeddedContact.tsx
index d6d788c7d..a54d9fa2a 100644
--- a/ts/components/conversation/EmbeddedContact.tsx
+++ b/ts/components/conversation/EmbeddedContact.tsx
@@ -1,4 +1,6 @@
import React from 'react';
+import classnames from 'classnames';
+
import { Contact, getName } from '../../types/Contact';
import { Localizer } from '../../types/Util';
@@ -7,30 +9,44 @@ interface Props {
contact: Contact;
hasSignalAccount: boolean;
i18n: Localizer;
- onSendMessage: () => void;
- onOpenContact: () => void;
+ isIncoming: boolean;
+ withContentAbove: boolean;
+ withContentBelow: boolean;
+ onSendMessage?: () => void;
+ onClickContact?: () => void;
}
export class EmbeddedContact extends React.Component {
public render() {
const {
contact,
- hasSignalAccount,
i18n,
- onOpenContact,
- onSendMessage,
+ isIncoming,
+ onClickContact,
+ withContentAbove,
+ withContentBelow,
} = this.props;
+ const module = 'embedded-contact';
return (
-
+ {getLabelForAddress(address, i18n)}
+
{this.renderAddressLine(address.street)}
{this.renderPOBox(address.pobox, i18n)}
{this.renderAddressLine(address.neighborhood)}
@@ -156,13 +201,15 @@ export class ContactDetail extends React.Component
- {renderAvatar(contact, i18n)}
- {renderName(contact)}
- {renderContactShorthand(contact)}
- {renderSendMessage({ hasSignalAccount, i18n, onSendMessage })}
+
```
@@ -30,7 +30,7 @@
+ {renderAvatar({ contact, i18n, module })}
+ {renderName({ contact, isIncoming, module })}
+ {renderContactShorthand({ contact, isIncoming, module })}
+ {this.renderSendMessage({ hasSignalAccount, i18n, onSendMessage })}
{this.renderPhone(contact.number, i18n)}
{this.renderEmail(contact.email, i18n)}
{this.renderAddresses(contact.address, i18n)}
diff --git a/ts/components/conversation/ConversationTitle.md b/ts/components/conversation/ConversationTitle.md
index 85f095fab..109f2f5fc 100644
--- a/ts/components/conversation/ConversationTitle.md
+++ b/ts/components/conversation/ConversationTitle.md
@@ -6,7 +6,7 @@
i18n={util.i18n}
isVerified
name="Someone 🔥 Somewhere"
- phoneNumber="+12025550011"
+ phoneNumber="(202) 555-0011"
profileName="🔥Flames🔥"
/>
@@ -19,7 +19,7 @@
-
```
diff --git a/ts/components/conversation/EmbeddedContact.md b/ts/components/conversation/EmbeddedContact.md
index a92b3c2ce..641a4c145 100644
--- a/ts/components/conversation/EmbeddedContact.md
+++ b/ts/components/conversation/EmbeddedContact.md
@@ -3,280 +3,516 @@
#### Including all data types
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- sent_at: Date.now() - 18000000,
- contact: [
- {
- name: {
- displayName: 'Someone Somewhere',
+const contacts = [
+ {
+ name: {
+ displayName: 'Someone Somewhere',
+ },
+ number: [
+ {
+ value: '(202) 555-0000',
+ type: 1,
},
- number: [
- {
- value: util.CONTACTS[0].id,
- type: 1,
- },
- ],
+ ],
+ avatar: {
avatar: {
- avatar: {
- path: util.gifObjectUrl,
- },
+ path: util.gifObjectUrl,
},
},
- ],
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- })
-);
-const View = Whisper.MessageView;
+ },
+];
-
- {renderAvatar(contact, i18n)}
- {
// Note: putting these below the main component so style guide picks up EmbeddedContact
-function getInitials(name: string): string {
+function getInitial(name: string): string {
return name.trim()[0] || '#';
}
-export function renderAvatar(contact: Contact, i18n: Localizer) {
+export function renderAvatar({
+ contact,
+ i18n,
+ module,
+}: {
+ contact: Contact;
+ i18n: Localizer;
+ module: string;
+}) {
const { avatar } = contact;
const path = avatar && avatar.avatar && avatar.avatar.path;
+ const name = getName(contact) || '';
+
if (!path) {
- const name = getName(contact);
- const initials = getInitials(name || '');
+ const initials = getInitial(name);
return (
-
- {renderName(contact)}
- {renderContactShorthand(contact)}
-
+
+ {renderAvatar({ contact, i18n, module })}
+
);
}
@@ -38,68 +54,85 @@ export class EmbeddedContact extends React.Component
+ {renderName({ contact, isIncoming, module })}
+ {renderContactShorthand({ contact, isIncoming, module })}
- {renderSendMessage({ hasSignalAccount, i18n, onSendMessage })}
-
{initials}
+
+
);
}
return (
-
+ {initials}
+
- 
+ ) => string;
- onSendMessage: () => void;
-}) {
- const { hasSignalAccount, i18n, onSendMessage } = props;
-
- if (!hasSignalAccount) {
- return null;
- }
-
- // We don't want the overall click handler for this element to fire, so we stop
- // propagation before handing control to the caller's callback.
- const onClick = (e: React.MouseEvent<{}>): void => {
- e.stopPropagation();
- onSendMessage();
- };
-
return (
-
+
);
}
-export function renderName(contact: Contact) {
- return {getName(contact)}
;
+export function renderName({
+ contact,
+ isIncoming,
+ module,
+}: {
+ contact: Contact;
+ isIncoming: boolean;
+ module: string;
+}) {
+ return (
+
+ {getName(contact)}
+
+ );
}
-export function renderContactShorthand(contact: Contact) {
+export function renderContactShorthand({
+ contact,
+ isIncoming,
+ module,
+}: {
+ contact: Contact;
+ isIncoming: boolean;
+ module: string;
+}) {
const { number: phoneNumber, email } = contact;
const firstNumber = phoneNumber && phoneNumber[0] && phoneNumber[0].value;
const firstEmail = email && email[0] && email[0].value;
- return {firstNumber || firstEmail}
;
-}
-
-export function renderSendMessage(props: {
- hasSignalAccount: boolean;
- i18n: (key: string, values?: Array
-
+ {
public static defaultProps: Partial = {
- renderNonEmoji: ({ text, key }) => {text},
+ renderNonEmoji: ({ text }) => text,
};
public render() {
diff --git a/ts/components/conversation/Linkify.tsx b/ts/components/conversation/Linkify.tsx
index 41fa6293f..0bc4af763 100644
--- a/ts/components/conversation/Linkify.tsx
+++ b/ts/components/conversation/Linkify.tsx
@@ -16,7 +16,7 @@ const SUPPORTED_PROTOCOLS = /^(http|https):/i;
export class Linkify extends React.Component {
public static defaultProps: Partial = {
- renderNonLink: ({ text, key }) => {text},
+ renderNonLink: ({ text }) => text,
};
public render() {
diff --git a/ts/components/conversation/Message.md b/ts/components/conversation/Message.md
index 1b01c3cba..dfd98ef76 100644
--- a/ts/components/conversation/Message.md
+++ b/ts/components/conversation/Message.md
@@ -1,53 +1,294 @@
-Placeholder component:
+### Plain messages
+
+Note that timestamp and status can be hidden with the `collapseMetadata` boolean property.
```jsx
-
```
-## MessageView (Backbone)
-
-### Plain messages
+### Timestamps
```jsx
-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;
+function get1201() {
+ const d = new Date();
+ d.setHours(0, 0, 1, 0);
+ return d.getTime();
+}
+function getYesterday1159() {
+ return get1201() - 2 * 60 * 1000;
+}
+function getJanuary1201() {
+ const now = new Date();
+ const d = new Date(now.getFullYear(), 0, 1, 0, 1);
+ return d.getTime();
+}
+function getDecember1159() {
+ return getJanuary1201() - 2 * 60 * 1000;
+}
+
- ;
```
-### In a group conversation
+### Status
```jsx
-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;
-
- ;
+
+
```
### With an error
@@ -114,202 +355,123 @@ const View = Whisper.MessageView;
;
```
-#### No message contents
+### Disappearing messages
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- sent_at: Date.now() - 200000,
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550003',
- type: 'incoming',
- })
-);
-
-const View = Whisper.MessageView;
- ;
-```
-
-### Disappearing
-
-```jsx
-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;
-
- ;
-```
-
-### Notfications
-
-#### Timer change
-
-```jsx
-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;
-
- ;
-```
-
-#### Safety number change
-
-```js
-const incoming = new Whisper.Message({
- type: 'keychange',
- sent_at: Date.now() - 200000,
- key_changed: '+12025550003',
-});
-const View = Whisper.KeyChangeView;
-
- ;
-```
-
-#### Marking as verified
-
-```js
-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;
-
- ;
-```
-
-#### Marking as not verified
-
-```js
-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;
-
- ;
-```
-
-#### Group update
-
-```js
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- sent_at: Date.now() - 200000,
- group_update: {
- joined: ['+12025550007', '+12025550008', '+12025550009'],
- },
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550003',
- type: 'incoming',
- })
-);
-
-const View = Whisper.MessageView;
-
- ;
-```
-
-#### End session
-
-```js
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- sent_at: Date.now() - 200000,
- flags: textsecure.protobuf.DataMessage.Flags.END_SESSION,
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550003',
- type: 'incoming',
- })
-);
-
-const View = Whisper.MessageView;
-
- ;
+
- ;
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+
```
#### Image
+First, showing the metadata overlay on dark and light images, then a message with `collapseMetadata` set.
+
```jsx
-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;
- ;
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+
+```
+
+#### Outgoing image with status
+
+Note that the delivered indicator is always Signal Blue, not the conversation color.
+
+```jsx
+
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+
```
#### Image with portrait aspect ratio
```jsx
-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;
- ;
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+
```
#### Image with portrait aspect ratio and caption
```jsx
-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;
- ;
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+
```
#### Image with landscape aspect ratio
```jsx
-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;
- ;
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+
```
#### Image with landscape aspect ratio and caption
```jsx
-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;
- ;
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+
```
#### Video with caption
```jsx
-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;
- ;
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+
```
#### Video
+We don't currently overlay message metadata on top of videos like we do with images.
+
```jsx
-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;
- ;
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+
```
#### Audio with caption
```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: '+12025550003',
- type: 'incoming',
- })
-);
-const View = Whisper.MessageView;
- ;
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+
```
#### Audio
```jsx
-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;
- ;
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+
```
#### Voice message
-```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- sent_at: Date.now() - 15000,
- attachments: [
- {
- flags: SignalService.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;
-
- ;
-```
+Voice notes are not shown any differently from audio attachments.
#### Other file type with caption
```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: '+12025550003',
- type: 'incoming',
- })
-);
-const View = Whisper.MessageView;
- ;
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+
- ;
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+ console.log('onClickAttachment')}
+ />
+
+```
+
+### In a group conversation
+
+Note that the author avatar goes away if `collapseMetadata` is set.
+
+```jsx
+
+ console.log('onClickAttachment')}
+ authorAvatarPath={util.gifObjectUrl}
+ />
+ console.log('onClickAttachment')}
+ authorAvatarPath={util.gifObjectUrl}
+ />
+ console.log('onClickAttachment')}
+ authorAvatarPath={util.gifObjectUrl}
+ />
+ console.log('onClickAttachment')}
+ authorAvatarPath={util.gifObjectUrl}
+ />
+
```
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index e272c3409..6a0eadd82 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -1,39 +1,579 @@
-// tslint:disable:newline-before-return
-
import React from 'react';
+import classnames from 'classnames';
+import moment from 'moment';
+import { padStart } from 'lodash';
+
+import { formatRelativeTime } from '../../util/formatRelativeTime';
+
+import { MessageBody } from './MessageBody';
+import { Emojify } from './Emojify';
+import { Quote, QuotedAttachment } from './Quote';
+import { EmbeddedContact } from './EmbeddedContact';
+
+import { Contact } from '../../types/Contact';
+import { Localizer } from '../../types/Util';
+import * as MIME from '../../../ts/types/MIME';
+
+interface Attachment {
+ contentType: MIME.MIMEType;
+ fileName: string;
+ /** Not included in protobuf, needs to be pulled from flags */
+ isVoiceMessage: boolean;
+ /** For messages not already on disk, this will be a data url */
+ url: string;
+ fileSize?: string;
+}
+
+interface Props {
+ text?: string;
+ id?: string;
+ collapseMetadata?: boolean;
+ direction: 'incoming' | 'outgoing';
+ timestamp: number;
+ status?: 'sending' | 'sent' | 'delivered' | 'read';
+ contacts?: Array;
+ color:
+ | 'gray'
+ | 'blue'
+ | 'cyan'
+ | 'deep-orange'
+ | 'green'
+ | 'indigo'
+ | 'pink'
+ | 'purple'
+ | 'red'
+ | 'teal';
+ i18n: Localizer;
+ authorName?: string;
+ authorProfileName?: string;
+ /** Note: this should be formatted for display */
+ authorPhoneNumber?: string;
+ conversationType: 'group' | 'direct';
+ attachment?: Attachment;
+ quote?: {
+ text: string;
+ attachments: Array;
+ isFromMe: boolean;
+ authorName?: string;
+ authorPhoneNumber?: string;
+ authorProfileName?: string;
+ };
+ authorAvatarPath?: string;
+ contactHasSignalAccount: boolean;
+ expirationLength?: number;
+ expirationTimestamp?: number;
+ onClickQuote?: () => void;
+ onSendMessageToContact?: () => void;
+ onClickContact?: () => void;
+ onClickAttachment?: () => void;
+}
+
+function isImage(attachment?: Attachment) {
+ // TODO: exclude svg and tiff here
+ return (
+ attachment && attachment.contentType && MIME.isImage(attachment.contentType)
+ );
+}
+
+function isVideo(attachment?: Attachment) {
+ return (
+ attachment && attachment.contentType && MIME.isVideo(attachment.contentType)
+ );
+}
+
+function isAudio(attachment?: Attachment) {
+ return (
+ attachment && attachment.contentType && MIME.isAudio(attachment.contentType)
+ );
+}
+
+function getTimerBucket(expiration: number, length: number): string {
+ const delta = expiration - Date.now();
+ if (delta < 0) {
+ return '00';
+ }
+ if (delta > length) {
+ return '60';
+ }
+
+ const increment = Math.round(delta / length * 12);
+
+ return padStart(String(increment * 5), 2, '0');
+}
+
+function getExtension({
+ fileName,
+ contentType,
+}: {
+ fileName: string;
+ contentType: MIME.MIMEType;
+}): string | null {
+ if (fileName && fileName.indexOf('.') >= 0) {
+ const lastPeriod = fileName.lastIndexOf('.');
+ const extension = fileName.slice(lastPeriod + 1);
+ if (extension.length) {
+ return extension;
+ }
+ }
+
+ const slash = contentType.indexOf('/');
+ if (slash >= 0) {
+ return contentType.slice(slash + 1);
+ }
+
+ return null;
+}
+
+export class Message extends React.Component {
+ public renderTimer() {
+ const {
+ attachment,
+ direction,
+ expirationLength,
+ expirationTimestamp,
+ text,
+ } = this.props;
+
+ if (!expirationLength || !expirationTimestamp) {
+ return null;
+ }
+
+ const withImageNoCaption = !text && isImage(attachment);
+ const bucket = getTimerBucket(expirationTimestamp, expirationLength);
-/**
- * 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 we start moving all message functionality to React.
- */
-export class Message extends React.Component {
- public render() {
return (
-
-
-
+ {firstNumber || firstEmail}
);
}
diff --git a/ts/components/conversation/Emojify.tsx b/ts/components/conversation/Emojify.tsx
index 841be0a64..fa8158db5 100644
--- a/ts/components/conversation/Emojify.tsx
+++ b/ts/components/conversation/Emojify.tsx
@@ -56,7 +56,7 @@ interface Props {
export class Emojify extends React.Component
-
-
-
-
+
);
diff --git a/ts/components/conversation/Notification.md b/ts/components/conversation/Notification.md
new file mode 100644
index 000000000..3ec261087
--- /dev/null
+++ b/ts/components/conversation/Notification.md
@@ -0,0 +1,151 @@
+### Timer change
+
+```jsx
+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;
+
+ console.log('onClick')} />
+ ;
+```
+
+### Safety number change
+
+```js
+const incoming = new Whisper.Message({
+ type: 'keychange',
+ sent_at: Date.now() - 200000,
+ key_changed: '+12025550003',
+});
+const View = Whisper.KeyChangeView;
+
+ ;
+```
+
+### Marking as verified
+
+```js
+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;
+
+ ;
+```
+
+### Marking as not verified
+
+```js
+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;
+
+ ;
+```
+
+### Group update
+
+```js
+const outgoing = new Whisper.Message({
+ type: 'outgoing',
+ sent_at: Date.now() - 200000,
+ group_update: {
+ joined: ['+12025550007', '+12025550008', '+12025550009'],
+ },
+});
+const incoming = new Whisper.Message(
+ Object.assign({}, outgoing.attributes, {
+ source: '+12025550003',
+ type: 'incoming',
+ })
+);
+
+const View = Whisper.MessageView;
+
+ ;
+```
+
+### End session
+
+```js
+const outgoing = new Whisper.Message({
+ type: 'outgoing',
+ sent_at: Date.now() - 200000,
+ flags: textsecure.protobuf.DataMessage.Flags.END_SESSION,
+});
+const incoming = new Whisper.Message(
+ Object.assign({}, outgoing.attributes, {
+ source: '+12025550003',
+ type: 'incoming',
+ })
+);
+
+const View = Whisper.MessageView;
+
+ ;
+```
diff --git a/ts/components/conversation/Notification.tsx b/ts/components/conversation/Notification.tsx
new file mode 100644
index 000000000..eeaa3d7ec
--- /dev/null
+++ b/ts/components/conversation/Notification.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import classnames from 'classnames';
+
+interface Props {
+ type: string;
+ onClick: () => void;
+}
+
+export class Notification extends React.Component {
+ public renderContents() {
+ const { type } = this.props;
+
+ return Notification of type {type};
+ }
+
+ public render() {
+ const { onClick } = this.props;
+
+ return (
+
- ;
+ console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ />
+
```
#### With emoji
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- body: 'About 🔥six🔥',
- sent_at: Date.now() - 18000000,
- quote: {
- text: 'How many 🔥ferrets🔥 do you have? ',
- author: '+12025550011',
- id: Date.now() - 1000,
- },
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- quote: Object.assign({}, outgoing.attributes.quote, {
- author: '+12025550005',
- }),
- })
-);
-const View = Whisper.MessageView;
- ;
+ console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ />
+
```
#### Replies to you or yourself
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- body: 'About six',
- sent_at: Date.now() - 18000000,
- quote: {
- text: 'How many ferrets do you have?',
- author: util.ourNumber,
- id: Date.now() - 1000,
- },
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- quote: Object.assign({}, outgoing.attributes.quote, {
- author: util.ourNumber,
- }),
- })
-);
-const View = Whisper.MessageView;
- ;
+ console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ />
+
```
#### In a group conversation
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- body: 'About six',
- sent_at: Date.now() - 18000000,
- quote: {
- text: 'How many ferrets do you have?',
- author: '+12025550010',
- id: Date.now() - 1000,
- },
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550007',
- type: 'incoming',
- quote: Object.assign({}, outgoing.attributes.quote, {
- author: '+12025550002',
- }),
- })
-);
-const View = Whisper.MessageView;
- ;
+ console.log('onClickQuote')}
+ authorAvatarPath={util.gifObjectUrl}
+ />
+ console.log('onClickQuote')}
+ authorAvatarPath={util.gifObjectUrl}
+ />
+
```
#### A lot of text in quotation
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- body: 'Woo, otters!',
- sent_at: Date.now() - 18000000,
- quote: {
- text:
- 'I have lots of things to say. First, I enjoy otters. Second best are cats. ' +
- 'After that, probably dogs. And then, you know, reptiles of all types. ' +
- 'Then birds. They are dinosaurs, after all. Then cephalapods, because they are ' +
- 'really smart.',
- author: '+12025550011',
- id: Date.now() - 1000,
- },
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- quote: Object.assign({}, outgoing.attributes.quote, {
- author: '+12025550005',
- }),
- })
-);
-const View = Whisper.MessageView;
- ;
+ console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ />
+
```
#### A lot of text in quotation, with icon
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- body: 'Woo, otters!',
- sent_at: Date.now() - 18000000,
- quote: {
- text:
- 'I have lots of things to say. First, I enjoy otters. Second best are cats. ' +
- 'After that, probably dogs. And then, you know, reptiles of all types. ' +
- 'Then birds. They are dinosaurs, after all. Then cephalapods, because they are ' +
- 'really smart.',
- author: '+12025550011',
- id: Date.now() - 1000,
- attachments: [
- {
- contentType: 'text/plain',
- fileName: 'lorum_ipsum.txt',
- },
- ],
- },
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- quote: Object.assign({}, outgoing.attributes.quote, {
- author: '+12025550005',
- }),
- })
-);
-const View = Whisper.MessageView;
- ;
+ console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ />
+
```
#### A lot of text in quotation, with image
```jsx
-const thumbnail = {
- objectUrl: util.gifObjectUrl,
-};
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- body: 'Woo, otters!',
- sent_at: Date.now() - 18000000,
- quote: {
- text:
- 'I have lots of things to say. First, I enjoy otters. Second best are cats. ' +
- 'After that, probably dogs. And then, you know, reptiles of all types. ' +
- 'Then birds. They are dinosaurs, after all. Then cephalapods, because they are ' +
- 'really smart.',
- author: '+12025550011',
- id: Date.now() - 1000,
- attachments: [
- {
- contentType: 'image/gif',
- fileName: 'pi.gif',
- thumbnail: {
- contentType: 'image/gif',
- },
- },
- ],
- },
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- quote: Object.assign({}, outgoing.attributes.quote, {
- author: '+12025550005',
- }),
- })
-);
-
-outgoing.quoteThumbnail = thumbnail;
-incoming.quoteThumbnail = thumbnail;
-
-const View = Whisper.MessageView;
- ;
+ console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ />
+
```
#### Image with caption
```jsx
-const thumbnail = {
- objectUrl: util.gifObjectUrl,
- id: '3234-23423-2342',
-};
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- body: "Totally, it's a pretty unintuitive concept.",
- sent_at: Date.now() - 18000000,
- quote: {
- text: 'I am pretty confused about Pi.',
- author: '+12025550011',
- id: Date.now() - 1000,
- attachments: [
- {
- contentType: 'image/gif',
- fileName: 'pi.gif',
- thumbnail: {
- contentType: 'image/gif',
- },
- },
- ],
- },
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- quote: Object.assign({}, outgoing.attributes.quote, {
- author: '+12025550005',
- }),
- })
-);
-
-outgoing.quoteThumbnail = thumbnail;
-incoming.quoteThumbnail = thumbnail;
-
-const View = Whisper.MessageView;
- ;
+ console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ />
+
```
#### Image
```jsx
-const thumbnail = {
- objectUrl: util.gifObjectUrl,
-};
-
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- body: 'Yeah, pi. Tough to wrap your head around.',
- sent_at: Date.now() - 18000000,
- quote: {
- author: '+12025550011',
- id: Date.now() - 1000,
- attachments: [
- {
- contentType: 'image/gif',
- fileName: 'pi.gif',
- thumbnail: {
- contentType: 'image/gif',
- },
- },
- ],
- },
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- quote: Object.assign({}, outgoing.attributes.quote, {
- author: '+12025550005',
- }),
- })
-);
-
-outgoing.quoteThumbnail = thumbnail;
-incoming.quoteThumbnail = thumbnail;
-
-const View = Whisper.MessageView;
- ;
+ console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ />
+
```
#### Image with no thumbnail
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- body: 'Yeah, pi. Tough to wrap your head around.',
- sent_at: Date.now() - 18000000,
- quote: {
- author: '+12025550011',
- id: Date.now() - 1000,
- attachments: [
- {
- contentType: 'image/gif',
- fileName: 'pi.gif',
- },
- ],
- },
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- quote: Object.assign({}, outgoing.attributes.quote, {
- author: '+12025550005',
- }),
- })
-);
-
-const View = Whisper.MessageView;
- ;
+ console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ />
+
```
#### Video with caption
```jsx
-const thumbnail = {
- objectUrl: util.gifObjectUrl,
-};
-
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- body: 'Sweet the way the video sneaks up on you!',
- sent_at: Date.now() - 18000000,
- quote: {
- author: '+12025550011',
- text: 'Check out this video I found!',
- id: Date.now() - 1000,
- attachments: [
- {
- contentType: 'video/mp4',
- fileName: 'freezing_bubble.mp4',
- thumbnail: {
- contentType: 'image/gif',
- },
- },
- ],
- },
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- quote: Object.assign({}, outgoing.attributes.quote, {
- author: '+12025550005',
- }),
- })
-);
-
-outgoing.quoteThumbnail = thumbnail;
-incoming.quoteThumbnail = thumbnail;
-
-const View = Whisper.MessageView;
- ;
+ console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ />
+
```
#### Video
```jsx
-const thumbnail = {
- objectUrl: util.gifObjectUrl,
-};
-
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- body: 'Awesome!',
- sent_at: Date.now() - 18000000,
- quote: {
- author: '+12025550011',
- id: Date.now() - 1000,
- attachments: [
- {
- contentType: 'video/mp4',
- fileName: 'freezing_bubble.mp4',
- thumbnail: {
- contentType: 'image/gif',
- data: util.gif,
- },
- },
- ],
- },
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- quote: Object.assign({}, outgoing.attributes.quote, {
- author: '+12025550005',
- }),
- })
-);
-
-outgoing.quoteThumbnail = thumbnail;
-incoming.quoteThumbnail = thumbnail;
-
-const View = Whisper.MessageView;
- ;
+ console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ />
+
```
#### Video with no thumbnail
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- body: 'Awesome!',
- sent_at: Date.now() - 18000000,
- quote: {
- author: '+12025550011',
- id: Date.now() - 1000,
- attachments: [
- {
- contentType: 'video/mp4',
- fileName: 'freezing_bubble.mp4',
- },
- ],
- },
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- quote: Object.assign({}, outgoing.attributes.quote, {
- author: '+12025550005',
- }),
- })
-);
-
-const View = Whisper.MessageView;
- ;
+ console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ />
+
```
#### Audio with caption
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- body: 'I really like it!',
- sent_at: Date.now() - 18000000,
- quote: {
- author: '+12025550011',
- text: 'Check out this beautiful song!',
- id: Date.now() - 1000,
- attachments: [
- {
- contentType: 'audio/mp3',
- fileName: 'agnus_dei.mp4',
- },
- ],
- },
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- quote: Object.assign({}, outgoing.attributes.quote, {
- author: '+12025550005',
- }),
- })
-);
-const View = Whisper.MessageView;
- ;
+ console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ />
+
```
#### Audio
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- body: 'I really like it!',
- sent_at: Date.now() - 18000000,
- quote: {
- author: '+12025550011',
- id: Date.now() - 1000,
- attachments: [
- {
- contentType: 'audio/mp3',
- fileName: 'agnus_dei.mp4',
- },
- ],
- },
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- quote: Object.assign({}, outgoing.attributes.quote, {
- author: '+12025550005',
- }),
- })
-);
-const View = Whisper.MessageView;
- ;
+ console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ />
+
```
#### Voice message
@@ -571,8 +690,6 @@ const outgoing = new Whisper.Message({
id: Date.now() - 1000,
attachments: [
{
- // proposed as of afternoon of 4/6 in Quoted Replies group
- flags: SignalService.AttachmentPointer.Flags.VOICE_MESSAGE,
contentType: 'audio/mp3',
fileName: 'agnus_dei.mp4',
},
@@ -590,78 +707,132 @@ const incoming = new Whisper.Message(
);
const View = Whisper.MessageView;
- console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ />
;
```
#### Other file type with caption
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- body: "I can't read latin.",
- sent_at: Date.now() - 18000000,
- quote: {
- author: '+12025550011',
- text: 'This is my manifesto. Tell me what you think!',
- id: Date.now() - 1000,
- attachments: [
- {
- contentType: 'text/plain',
- fileName: 'lorum_ipsum.txt',
- },
- ],
- },
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- quote: Object.assign({}, outgoing.attributes.quote, {
- author: '+12025550005',
- }),
- })
-);
-const View = Whisper.MessageView;
- ;
+ console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ />
+
```
#### Other file type
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- body: "Sorry, I can't read latin!",
- sent_at: Date.now() - 18000000,
- quote: {
- author: '+12025550011',
- id: Date.now() - 1000,
- attachments: [
- {
- contentType: 'text/plain',
- fileName: 'lorum_ipsum.txt',
- },
- ],
- },
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- quote: Object.assign({}, outgoing.attributes.quote, {
- author: '+12025550005',
- }),
- })
-);
-const View = Whisper.MessageView;
- ;
+ console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ />
+
```
### With a quotation, including attachment
@@ -669,240 +840,269 @@ const View = Whisper.MessageView;
#### Quote, image attachment, and caption
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- body: 'Like pi or so?',
- sent_at: Date.now() - 18000000,
- quote: {
- text: 'How many ferrets do you have?',
- author: '+12025550011',
- id: Date.now() - 1000,
- },
- attachments: [
- {
- data: util.gif,
+
+
- ;
+ }}
+ onClickQuote={() => console.log('onClickQuote')}
+ text="About six"
+ i18n={util.i18n}
+ quote={{
+ text: 'How many ferrets do you have?',
+ attachments: [],
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ onClickQuote={() => console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ color="green"
+ text="About six"
+ i18n={util.i18n}
+ quote={{
+ text: 'How many ferrets do you have?',
+ attachments: [],
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ onClickQuote={() => console.log('onClickQuote')}
+ />
+
```
#### Quote, image attachment
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- sent_at: Date.now() - 18000000,
- quote: {
- text: 'How many ferrets do you have?',
- author: '+12025550011',
- id: Date.now() - 1000,
- },
- attachments: [
- {
- data: util.gif,
+
+
- ;
+ }}
+ onClickQuote={() => console.log('onClickQuote')}
+ i18n={util.i18n}
+ quote={{
+ text: 'How many ferrets do you have?',
+ attachments: [],
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ onClickQuote={() => console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ color="green"
+ i18n={util.i18n}
+ quote={{
+ text: 'How many ferrets do you have?',
+ attachments: [],
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ onClickQuote={() => console.log('onClickQuote')}
+ />
+
```
#### Quote, portrait image attachment
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- sent_at: Date.now() - 18000000,
- quote: {
- text: 'How many ferrets do you have?',
- author: '+12025550011',
- id: Date.now() - 1000,
- },
- attachments: [
- {
- data: util.portraitYellow,
+
+
- ;
+ }}
+ onClickQuote={() => console.log('onClickQuote')}
+ i18n={util.i18n}
+ quote={{
+ text: 'How many ferrets do you have?',
+ attachments: [],
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ onClickQuote={() => console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ color="green"
+ i18n={util.i18n}
+ quote={{
+ text: 'How many ferrets do you have?',
+ attachments: [],
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ onClickQuote={() => console.log('onClickQuote')}
+ />
+
```
#### Quote, video attachment
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- sent_at: Date.now() - 18000000,
- quote: {
- text: 'How many ferrets do you have?',
- author: '+12025550011',
- id: Date.now() - 1000,
- },
- attachments: [
- {
- data: util.mp4,
+
+
- ;
+ }}
+ onClickQuote={() => console.log('onClickQuote')}
+ i18n={util.i18n}
+ quote={{
+ text: 'How many ferrets do you have?',
+ attachments: [],
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ onClickQuote={() => console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ color="green"
+ i18n={util.i18n}
+ quote={{
+ text: 'How many ferrets do you have?',
+ attachments: [],
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ onClickQuote={() => console.log('onClickQuote')}
+ />
+
```
#### Quote, audio attachment
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- sent_at: Date.now() - 18000000,
- quote: {
- text: 'How many ferrets do you have?',
- author: '+12025550011',
- id: Date.now() - 1000,
- },
- attachments: [
- {
- data: util.mp3,
+
+
- ;
+ }}
+ onClickQuote={() => console.log('onClickQuote')}
+ i18n={util.i18n}
+ quote={{
+ text: 'How many ferrets do you have?',
+ attachments: [],
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ onClickQuote={() => console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ color="green"
+ i18n={util.i18n}
+ quote={{
+ text: 'How many ferrets do you have?',
+ attachments: [],
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ onClickQuote={() => console.log('onClickQuote')}
+ />
+
```
#### Quote, file attachment
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- sent_at: Date.now() - 18000000,
- quote: {
- text: 'How many ferrets do you have?',
- author: '+12025550011',
- id: Date.now() - 1000,
- },
- attachments: [
- {
- data: util.txt,
+
+
- ;
-```
-
-#### Quote, but no message
-
-```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- sent_at: Date.now() - 18000000,
- quote: {
- text: 'How many ferrets do you have?',
- author: '+12025550011',
- id: Date.now() - 1000,
- },
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- quote: Object.assign({}, outgoing.attributes.quote, {
- author: '+12025550005',
- }),
- })
-);
-const View = Whisper.MessageView;
-
- ;
+ fileSize: '3.05 KB',
+ }}
+ onClickQuote={() => console.log('onClickQuote')}
+ i18n={util.i18n}
+ quote={{
+ text: 'How many ferrets do you have?',
+ attachments: [],
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ onClickQuote={() => console.log('onClickQuote')}
+ />
+ console.log('onClickQuote')}
+ color="green"
+ i18n={util.i18n}
+ quote={{
+ text: 'How many ferrets do you have?',
+ attachments: [],
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ onClickQuote={() => console.log('onClickQuote')}
+ />
+
```
### In bottom bar
diff --git a/ts/components/conversation/Quote.tsx b/ts/components/conversation/Quote.tsx
index bb86cf9c4..368efe6c6 100644
--- a/ts/components/conversation/Quote.tsx
+++ b/ts/components/conversation/Quote.tsx
@@ -1,7 +1,7 @@
// tslint:disable:react-this-binding-issue
import React from 'react';
-import classNames from 'classnames';
+import classnames from 'classnames';
import * as MIME from '../../../ts/types/MIME';
import * as GoogleChrome from '../../../ts/util/GoogleChrome';
@@ -12,18 +12,19 @@ import { Localizer } from '../../types/Util';
interface Props {
attachments: Array;
- authorColor: string;
+ color: string;
authorProfileName?: string;
authorTitle: string;
i18n: Localizer;
- isFromMe: string;
+ isFromMe: boolean;
isIncoming: boolean;
+ withContentAbove: boolean;
onClick?: () => void;
onClose?: () => void;
text: string;
}
-interface QuotedAttachment {
+export interface QuotedAttachment {
contentType: MIME.MIMEType;
fileName: string;
/** Not included in protobuf */
@@ -57,32 +58,93 @@ function getObjectUrl(thumbnail: Attachment | undefined): string | null {
return null;
}
+function getTypeLabel({
+ i18n,
+ contentType,
+ isVoiceMessage,
+}: {
+ i18n: Localizer;
+ contentType: MIME.MIMEType;
+ isVoiceMessage: boolean;
+}): string | null {
+ if (GoogleChrome.isVideoTypeSupported(contentType)) {
+ return i18n('video');
+ }
+ if (GoogleChrome.isImageTypeSupported(contentType)) {
+ return i18n('photo');
+ }
+ if (MIME.isAudio(contentType) && isVoiceMessage) {
+ return i18n('voiceMessage');
+ }
+ if (MIME.isAudio(contentType)) {
+ return i18n('audio');
+ }
+
+ return null;
+}
+
export class Quote extends React.Component {
public renderImage(url: string, i18n: Localizer, icon?: string) {
const iconElement = icon ? (
-
+
- - Hi there. How are you doing? Feeling pretty good? Awesome. - -
+ + ); + } + + public renderMetadata() { + const { + collapseMetadata, + color, + direction, + i18n, + status, + timestamp, + text, + attachment, + } = this.props; + + if (collapseMetadata) { + return null; + } + // We're not showing metadata on top of videos since they still have native controls + if (!text && isVideo(attachment)) { + return null; + } + + const withImageNoCaption = !text && isImage(attachment); + + return ( +
+
+ {formatRelativeTime(timestamp, { i18n, extended: true })}
+
+ {this.renderTimer()}
+
+ {direction === 'outgoing' ? (
+
+ ) : null}
+
+ );
+ }
+
+ public renderAuthor() {
+ const {
+ authorName,
+ conversationType,
+ direction,
+ i18n,
+ authorPhoneNumber,
+ authorProfileName,
+ } = this.props;
+
+ const title = authorName ? authorName : authorPhoneNumber;
+
+ if (direction !== 'incoming' || conversationType !== 'group' || !title) {
+ return null;
+ }
+
+ const profileElement =
+ authorProfileName && !authorName ? (
+
+ ~
+
+ );
+ }
+
+ public renderAttachment() {
+ const {
+ i18n,
+ attachment,
+ text,
+ collapseMetadata,
+ conversationType,
+ direction,
+ quote,
+ onClickAttachment,
+ } = this.props;
+
+ if (!attachment) {
+ return null;
+ }
+
+ const withCaption = Boolean(text);
+ // For attachments which aren't full-frame
+ const withContentBelow = withCaption || !collapseMetadata;
+ const withContentAbove =
+ quote || (conversationType === 'group' && direction === 'incoming');
+
+ if (isImage(attachment)) {
+ return (
+
+ 
+ {!withCaption && !collapseMetadata ? (
+
+ ) : null}
+
+ );
+ } else if (isVideo(attachment)) {
+ return (
+
+ );
+ } else if (isAudio(attachment)) {
+ return (
+
+ );
+ } else {
+ const { fileName, fileSize, contentType } = attachment;
+ const extension = getExtension({ contentType, fileName });
+
+ return (
+
+
+ );
+ }
+ }
+
+ public renderQuote() {
+ const {
+ color,
+ conversationType,
+ direction,
+ i18n,
+ onClickQuote,
+ quote,
+ } = this.props;
+
+ if (!quote) {
+ return null;
+ }
+
+ const authorTitle = quote.authorName
+ ? quote.authorName
+ : quote.authorPhoneNumber;
+ const authorProfileName = !quote.authorName
+ ? quote.authorProfileName
+ : undefined;
+ const withContentAbove =
+ conversationType === 'group' && direction === 'incoming';
+
+ return (
+
+ {extension ? (
+
+
+ {extension}
+
+ ) : null}
+
+
-
+ {fileName}
+
+
+ {fileSize}
-
- 1 minute ago
-
-
-
-
+ + ); + } + + public renderEmbeddedContact() { + const { + collapseMetadata, + contactHasSignalAccount, + contacts, + conversationType, + direction, + i18n, + onClickContact, + onSendMessageToContact, + text, + } = this.props; + const first = contacts && contacts[0]; + + if (!first) { + return null; + } + + const withCaption = Boolean(text); + const withContentAbove = + conversationType === 'group' && direction === 'incoming'; + const withContentBelow = withCaption || !collapseMetadata; + + return ( +
+ {i18n('sendMessageToContact')}
+
+ );
+ }
+
+ public renderAvatar() {
+ const {
+ authorName,
+ authorPhoneNumber,
+ authorProfileName,
+ authorAvatarPath,
+ collapseMetadata,
+ color,
+ conversationType,
+ direction,
+ i18n,
+ } = this.props;
+
+ const title = `${authorName || authorPhoneNumber}${
+ !authorName && authorProfileName ? ` ~${authorProfileName}` : ''
+ }`;
+
+ if (
+ collapseMetadata ||
+ conversationType !== 'group' ||
+ direction === 'outgoing'
+ ) {
+ return;
+ }
+
+ if (!authorAvatarPath) {
+ return (
+
+
+ );
+ }
+
+ return (
+ #
+
+ 
+
+ );
+ }
+
+ public renderText() {
+ const { text, i18n, direction } = this.props;
+
+ if (!text) {
+ return null;
+ }
+
+ return (
+
+
+ );
+ }
+
+ public render() {
+ const {
+ attachment,
+ color,
+ conversationType,
+ direction,
+ id,
+ quote,
+ text,
+ } = this.props;
+
+ const imageAndNothingElse =
+ !text && isImage(attachment) && conversationType !== 'group' && !quote;
+
+ return (
+
+ {this.renderAuthor()}
+ {this.renderQuote()}
+ {this.renderAttachment()}
+ {this.renderEmbeddedContact()}
+ {this.renderText()}
+ {this.renderMetadata()}
+ {this.renderSendMessageButton()}
+ {this.renderAvatar()}
+ {this.renderContents()}
+
+ );
+ }
+}
diff --git a/ts/components/conversation/Quote.md b/ts/components/conversation/Quote.md
index 5ab2f5896..b3308a05e 100644
--- a/ts/components/conversation/Quote.md
+++ b/ts/components/conversation/Quote.md
@@ -3,560 +3,679 @@
#### Plain text
```jsx
-const outgoing = new Whisper.Message({
- type: 'outgoing',
- body: 'About six',
- sent_at: Date.now() - 18000000,
- quote: {
- text: 'How many ferrets do you have?',
- author: '+12025550011',
- id: Date.now() - 1000,
- },
-});
-const incoming = new Whisper.Message(
- Object.assign({}, outgoing.attributes, {
- source: '+12025550011',
- type: 'incoming',
- quote: Object.assign({}, outgoing.attributes.quote, {
- author: '+12025550005',
- }),
- })
-);
-const View = Whisper.MessageView;
+
) : null;
return (
-
+
+
+
-
- 
- {iconElement}
-
+
+
+ {iconElement}
);
}
public renderIcon(icon: string) {
- const { authorColor, isIncoming } = this.props;
+ return (
+
+
+ );
+ }
- const backgroundColor = isIncoming ? 'white' : authorColor;
- const iconColor = isIncoming ? authorColor : 'white';
+ public renderGenericFile() {
+ const { attachments } = this.props;
+
+ if (!attachments || !attachments.length) {
+ return;
+ }
+
+ const first = attachments[0];
+ const { fileName, contentType } = first;
+ const isGenericFile =
+ !GoogleChrome.isVideoTypeSupported(contentType) &&
+ !GoogleChrome.isImageTypeSupported(contentType) &&
+ !MIME.isAudio(contentType);
+
+ if (!isGenericFile) {
+ return null;
+ }
return (
-
+
+
+
+
+
-
-
+ {
return this.renderIcon('microphone');
}
- return this.renderIcon('file');
+ return null;
}
public renderText() {
@@ -119,7 +181,7 @@ export class Quote extends React.Component {
if (text) {
return (
-
+
+
);
}
@@ -111,7 +173,7 @@ export class Quote extends React.Component{fileName}
+
{
}
const first = attachments[0];
- const { contentType, fileName, isVoiceMessage } = first;
+ const { contentType, isVoiceMessage } = first;
- if (GoogleChrome.isVideoTypeSupported(contentType)) {
- return {
// We need the container to give us the flexibility to implement the iOS design.
return (
-
{i18n('video')}
;
- }
- if (GoogleChrome.isImageTypeSupported(contentType)) {
- return {i18n('photo')}
;
- }
- if (MIME.isAudio(contentType) && isVoiceMessage) {
- return {i18n('voiceMessage')}
;
- }
- if (MIME.isAudio(contentType)) {
- return {i18n('audio')}
;
+ const typeLabel = getTypeLabel({ i18n, contentType, isVoiceMessage });
+ if (typeLabel) {
+ return (
+ {typeLabel}
+ );
}
- return {fileName}
;
- }
-
- public renderIOSLabel() {
- const {
- i18n,
- isIncoming,
- isFromMe,
- authorTitle,
- authorProfileName,
- } = this.props;
-
- const profileString = authorProfileName ? ` ~${authorProfileName}` : '';
- const authorName = `${authorTitle}${profileString}`;
-
- const label = isFromMe
- ? isIncoming
- ? i18n('replyingToYou')
- : i18n('replyingToYourself')
- : i18n('replyingTo', [authorName]);
-
- return {label}
;
+ return null;
}
public renderClose() {
@@ -185,29 +220,27 @@ export class Quote extends React.Component
-
+
+
);
}
public renderAuthor() {
- const {
- authorColor,
- authorProfileName,
- authorTitle,
- i18n,
- isFromMe,
- } = this.props;
+ const { authorProfileName, authorTitle, i18n, isFromMe } = this.props;
const authorProfileElement = authorProfileName ? (
-
+
~
+
{isFromMe ? (
i18n('you')
) : (
@@ -220,24 +253,27 @@ export class Quote extends React.Component {
}
public render() {
- const { authorColor, onClick, isFromMe } = this.props;
+ const { color, isIncoming, onClick, withContentAbove } = this.props;
if (!validateQuote(this.props)) {
return null;
}
- const classes = classNames(
- authorColor,
- 'quoted-message',
- isFromMe ? 'from-me' : null,
- !onClick ? 'no-click' : null
- );
-
return (
-
-
- {this.renderIOSLabel()}
+
+ ) => string;
diff --git a/ts/util/formatRelativeTime.ts b/ts/util/formatRelativeTime.ts
new file mode 100644
index 000000000..7da339ccb
--- /dev/null
+++ b/ts/util/formatRelativeTime.ts
@@ -0,0 +1,53 @@
+import moment from 'moment';
+import { Localizer } from '../types/Util';
+
+const getExtendedFormats = (i18n: Localizer) => ({
+ y: 'lll',
+ M: `${i18n('timestampFormat_M') || 'MMM D'} LT`,
+ d: 'ddd LT',
+});
+const getShortFormats = (i18n: Localizer) => ({
+ y: 'll',
+ M: i18n('timestampFormat_M') || 'MMM D',
+ d: 'ddd',
+});
+
+function isToday(timestamp: moment.Moment) {
+ const today = moment().format('ddd');
+ const targetDay = moment(timestamp).format('ddd');
+
+ return today === targetDay;
+}
+
+function isYear(timestamp: moment.Moment) {
+ const year = moment().format('YYYY');
+ const targetYear = moment(timestamp).format('YYYY');
+
+ return year === targetYear;
+}
+
+export function formatRelativeTime(
+ rawTimestamp: number | Date,
+ options: { extended: boolean; i18n: Localizer }
+) {
+ const { extended, i18n } = options;
+
+ const formats = extended ? getExtendedFormats(i18n) : getShortFormats(i18n);
+ const timestamp = moment(rawTimestamp);
+ const now = moment();
+ const diff = moment.duration(now.diff(timestamp));
+
+ if (diff.years() >= 1 || !isYear(timestamp)) {
+ return timestamp.format(formats.y);
+ } else if (diff.months() >= 1 || diff.days() > 6) {
+ return timestamp.format(formats.M);
+ } else if (diff.days() >= 1 || !isToday(timestamp)) {
+ return timestamp.format(formats.d);
+ } else if (diff.hours() >= 1) {
+ return i18n('hoursAgo', [String(diff.hours())]);
+ } else if (diff.minutes() >= 1) {
+ return i18n('minutesAgo', [String(diff.minutes())]);
+ }
+
+ return i18n('justNow');
+}
diff --git a/ts/util/migrateColor.ts b/ts/util/migrateColor.ts
new file mode 100644
index 000000000..689a0caa8
--- /dev/null
+++ b/ts/util/migrateColor.ts
@@ -0,0 +1,70 @@
+// import { missingCaseError } from './missingCaseError';
+
+type OldColor =
+ | 'amber'
+ | 'blue'
+ | 'blue_grey'
+ | 'cyan'
+ | 'deep_orange'
+ | 'deep_purple'
+ | 'green'
+ | 'grey'
+ | 'indigo'
+ | 'light_blue'
+ | 'light_green'
+ | 'orange'
+ | 'pink'
+ | 'purple'
+ | 'red'
+ | 'teal';
+
+type NewColor =
+ | 'blue'
+ | 'cyan'
+ | 'deep_orange'
+ | 'grey'
+ | 'green'
+ | 'indigo'
+ | 'pink'
+ | 'purple'
+ | 'red'
+ | 'teal';
+
+export function migrateColor(color: OldColor): NewColor {
+ switch (color) {
+ // These colors no longer exist
+ case 'amber':
+ case 'orange':
+ return 'red';
+
+ case 'blue_grey':
+ case 'light_blue':
+ return 'blue';
+
+ case 'deep_purple':
+ return 'purple';
+
+ case 'light_green':
+ return 'teal';
+
+ // These can stay as they are
+ case 'blue':
+ case 'cyan':
+ case 'deep_orange':
+ case 'green':
+ case 'grey':
+ case 'indigo':
+ case 'pink':
+ case 'purple':
+ case 'red':
+ case 'teal':
+ return color;
+
+ // Can uncomment this to ensure that we've covered all potential cases
+ // default:
+ // throw missingCaseError(color);
+
+ default:
+ return 'grey';
+ }
+}
{this.renderAuthor()}
+ {this.renderGenericFile()}
{this.renderText()}
{this.renderIconContainer()}
diff --git a/ts/styleguide/StyleGuideUtil.ts b/ts/styleguide/StyleGuideUtil.ts
index da98bb5b4..912862661 100644
--- a/ts/styleguide/StyleGuideUtil.ts
+++ b/ts/styleguide/StyleGuideUtil.ts
@@ -35,6 +35,9 @@ const txtObjectUrl = makeObjectUrl(txt, 'text/plain');
// @ts-ignore
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';
+const pngObjectUrl = makeObjectUrl(png, 'image/png');
// @ts-ignore
import landscapeGreen from '../../fixtures/1000x50-green.jpeg';
@@ -70,6 +73,8 @@ export {
gifObjectUrl,
mp4,
mp4ObjectUrl,
+ png,
+ pngObjectUrl,
txt,
txtObjectUrl,
landscapeGreen,
diff --git a/ts/types/Util.ts b/ts/types/Util.ts
index 9819b5a85..abe06251b 100644
--- a/ts/types/Util.ts
+++ b/ts/types/Util.ts
@@ -3,6 +3,6 @@ export type RenderTextCallback = (
text: string;
key: number;
}
-) => JSX.Element;
+) => JSX.Element | string;
export type Localizer = (key: string, values?: Array