- {{ fileName }}
-
- {{ fileSize }}
-
-
+
-
+
-
+
+ {name ?
+ );
+ }
+
+ public renderAvatar() {
+ const {
+ avatarPath,
+ color,
+ i18n,
+ name,
+ phoneNumber,
+ profileName,
+ } = this.props;
+
+ if (!avatarPath) {
+ const initial = getInitial(name || '');
+
+ return (
+
+ {initial}
+
+ );
+ }
+
+ const title = `${name || phoneNumber}${
+ !name && profileName ? ` ~${profileName}` : ''
+ }`;
+
+ return (
+
+
+
+ );
+ }
+
+ public renderGear(triggerId: string) {
+ const { showBackButton } = this.props;
+
+ if (showBackButton) {
+ return null;
+ }
+
+ return (
+
+ {expirationSettingName}
+
+
+ {this.renderBackButton()}
+ {this.renderAvatar()}
+ {this.renderTitle()}
+ {this.renderExpirationLength()}
+ {this.renderGear(id)}
+ {this.renderMenu(id)}
+
+ );
+ }
+}
diff --git a/ts/components/conversation/ConversationTitle.md b/ts/components/conversation/ConversationTitle.md
deleted file mode 100644
index 109f2f5fc..000000000
--- a/ts/components/conversation/ConversationTitle.md
+++ /dev/null
@@ -1,45 +0,0 @@
-#### With name and profile, verified
-
-```jsx
-
-
-```
-
-#### With name, not verified
-
-```jsx
-
-
-```
-
-#### Profile, no name
-
-```jsx
-
-
-```
-
-#### No name, no profile
-
-```jsx
-
-
-```
diff --git a/ts/components/conversation/ConversationTitle.tsx b/ts/components/conversation/ConversationTitle.tsx
deleted file mode 100644
index 0e5da0375..000000000
--- a/ts/components/conversation/ConversationTitle.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-
-import { Emojify } from './Emojify';
-import { Localizer } from '../../types/Util';
-
-interface Props {
- i18n: Localizer;
- isVerified: boolean;
- name?: string;
- phoneNumber: string;
- profileName?: string;
-}
-
-export class ConversationTitle extends React.Component
diff --git a/ts/components/conversation/Emojify.tsx b/ts/components/conversation/Emojify.tsx
index fa8158db5..1250a4697 100644
--- a/ts/components/conversation/Emojify.tsx
+++ b/ts/components/conversation/Emojify.tsx
@@ -34,10 +34,13 @@ function getImageTag({
const title = getTitle(result.value);
return (
+ // tslint:disable-next-line react-a11y-img-has-alt
+
+
+
+
+
+
+
+
+
+```
+
+### Timer calculations
+
+```jsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/ts/components/conversation/ExpireTimer.tsx b/ts/components/conversation/ExpireTimer.tsx
new file mode 100644
index 000000000..7b0daef8e
--- /dev/null
+++ b/ts/components/conversation/ExpireTimer.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { padStart } from 'lodash';
+
+interface Props {
+ withImageNoCaption: boolean;
+ expirationLength: number;
+ expirationTimestamp: number;
+ direction: 'incoming' | 'outgoing';
+}
+
+export class ExpireTimer extends React.Component {
+ private interval: any;
+
+ constructor(props: Props) {
+ super(props);
+
+ this.interval = null;
+ }
+
+ public componentDidMount() {
+ const { expirationLength } = this.props;
+ const increment = getIncrement(expirationLength);
+ const updateFrequency = Math.max(increment, 500);
+
+ const update = () => {
+ this.setState({
+ lastUpdated: Date.now(),
+ });
+ };
+ this.interval = setInterval(update, updateFrequency);
+ }
+
+ public componentWillUnmount() {
+ if (this.interval) {
+ clearInterval(this.interval);
+ }
+ }
+
+ public render() {
+ const {
+ direction,
+ expirationLength,
+ expirationTimestamp,
+ withImageNoCaption,
+ } = this.props;
+
+ const bucket = getTimerBucket(expirationTimestamp, expirationLength);
+
+ return (
+
+ );
+ }
+}
+
+export function getIncrement(length: number): number {
+ if (length < 0) {
+ return 1000;
+ }
+
+ return Math.ceil(length / 12);
+}
+
+function getTimerBucket(expiration: number, length: number): string {
+ const delta = expiration - Date.now();
+ if (delta < 0) {
+ return '00';
+ }
+ if (delta > length) {
+ return '60';
+ }
+
+ const bucket = Math.round(delta / length * 12);
+
+ return padStart(String(bucket * 5), 2, '0');
+}
diff --git a/ts/components/conversation/GroupNotification.md b/ts/components/conversation/GroupNotification.md
new file mode 100644
index 000000000..5acbd50fc
--- /dev/null
+++ b/ts/components/conversation/GroupNotification.md
@@ -0,0 +1,171 @@
+### Three changes, all types
+
+```js
+
+
+```
+
+### Joined group
+
+```js
+
+
+```
+
+### Left group
+
+```js
+
+
+```
+
+### Title changed
+
+```js
+
+
+```
+
+### Generic group update
+
+```js
+
+
+```
diff --git a/ts/components/conversation/GroupNotification.tsx b/ts/components/conversation/GroupNotification.tsx
new file mode 100644
index 000000000..79f330eb4
--- /dev/null
+++ b/ts/components/conversation/GroupNotification.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+// import classNames from 'classnames';
+import { compact, flatten } from 'lodash';
+
+import { ContactName } from './ContactName';
+import { Intl } from '../Intl';
+import { Localizer } from '../../types/Util';
+
+import { missingCaseError } from '../../util/missingCaseError';
+
+interface Contact {
+ phoneNumber: string;
+ profileName?: string;
+ name?: string;
+}
+
+interface Change {
+ type: 'add' | 'remove' | 'name' | 'general';
+ isMe: boolean;
+ newName?: string;
+ contacts?: Array;
+}
+
+interface Props {
+ changes: Array;
+ i18n: Localizer;
+}
+
+export class GroupNotification extends React.Component {
+ public renderChange(change: Change) {
+ const { isMe, contacts, type, newName } = change;
+ const { i18n } = this.props;
+
+ const people = compact(
+ flatten(
+ (contacts || []).map((contact, index) => {
+ const element = (
+
+ 1 ? 'multipleJoinedTheGroup' : 'joinedTheGroup'
+ }
+ components={[people]}
+ />
+ );
+ case 'remove':
+ if (!contacts || !contacts.length) {
+ throw new Error('Group update is missing contacts');
+ }
+
+ if (isMe) {
+ return i18n('youLeftTheGroup');
+ }
+
+ return (
+ 1 ? 'multipleLeftTheGroup' : 'leftTheGroup'}
+ components={[people]}
+ />
+ );
+ case 'general':
+ return i18n('updatedTheGroup');
+ default:
+ throw missingCaseError(type);
+ }
+ }
+
+ public render() {
+ const { changes } = this.props;
+
+ return (
+
-
+ console.log('onDownload')}
+ onReply={() => console.log('onReply')}
+ onShowDetail={() => console.log('onShowDetail')}
+ onDelete={() => console.log('onDelete')}
+ />
+
+
+ console.log('onDownload')}
+ onReply={() => console.log('onReply')}
+ onShowDetail={() => console.log('onShowDetail')}
+ onDelete={() => console.log('onDelete')}
+ />
+
+
+ console.log('onDownload')}
+ onReply={() => console.log('onReply')}
+ onShowDetail={() => console.log('onShowDetail')}
+ onDelete={() => console.log('onDelete')}
+ />
+
+
+ console.log('onDownload')}
+ onReply={() => console.log('onReply')}
+ onShowDetail={() => console.log('onShowDetail')}
+ onDelete={() => console.log('onDelete')}
+ />
+
+
+ console.log('onDownload')}
+ onReply={() => console.log('onReply')}
+ onShowDetail={() => console.log('onShowDetail')}
+ onDelete={() => console.log('onDelete')}
+ />
+
+
+ console.log('onDownload')}
+ onReply={() => console.log('onReply')}
+ onShowDetail={() => console.log('onShowDetail')}
+ onDelete={() => console.log('onDelete')}
+ />
+
+
+ console.log('onDownload')}
+ onReply={() => console.log('onReply')}
+ onShowDetail={() => console.log('onShowDetail')}
+ onDelete={() => console.log('onDelete')}
+ />
+
+
+ console.log('onDownload')}
+ onReply={() => console.log('onReply')}
+ onShowDetail={() => console.log('onShowDetail')}
+ onDelete={() => console.log('onDelete')}
+ />
+
+
+ console.log('onDownload')}
+ onReply={() => console.log('onReply')}
+ onShowDetail={() => console.log('onShowDetail')}
+ onDelete={() => console.log('onDelete')}
+ />
+
+
+ console.log('onDownload')}
+ onReply={() => console.log('onReply')}
+ onShowDetail={() => console.log('onShowDetail')}
+ onDelete={() => console.log('onDelete')}
+ />
+
```
-### Timestamps
-
-```jsx
-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;
-}
-
-
- ;
-```
-
### Status
```jsx
-
+
+
+
+
+
+
+
+
+ console.log('onRetrySend')}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ console.log('onRetrySend')}
+ />
+
+
+
```
-### With an error
-
-#### General error
-
-```jsx
-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;
-
- ;
-```
-
-#### Network error (outgoing only)
-
-```jsx
-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;
-
- ;
-```
-
-#### Network error, partial send in group (outgoing only)
-
-```jsx
-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;
-
- ;
-```
-
-### Disappearing messages
+### Long data
```jsx
-
+
+
+
+
+
+
+
```
@@ -480,39 +331,55 @@ const View = Whisper.MessageView;
```jsx
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
+
+ console.log('onClickAttachment')}
+ onDownload={() => console.log('onDownload')}
+ onReply={() => console.log('onReply')}
+ />
+
+
+ console.log('onClickAttachment')}
+ onDownload={() => console.log('onDownload')}
+ onReply={() => console.log('onReply')}
+ />
+
+
+ console.log('onClickAttachment')}
+ onDownload={() => console.log('onDownload')}
+ onReply={() => console.log('onReply')}
+ />
+
+
+ console.log('onClickAttachment')}
+ onDownload={() => console.log('onDownload')}
+ onReply={() => console.log('onReply')}
+ />
+
```
@@ -522,54 +389,66 @@ First, showing the metadata overlay on dark and light images, then a message wit
```jsx
- 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')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
```
@@ -579,42 +458,50 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
```jsx
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
```
@@ -622,35 +509,55 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
```jsx
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
```
@@ -658,39 +565,59 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
```jsx
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
```
@@ -698,47 +625,55 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
```jsx
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
```
@@ -746,51 +681,59 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
```jsx
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
```
@@ -798,80 +741,370 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
```jsx
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
+
+ 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
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+```
+
+#### Missing images and videos
```jsx
- 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')}
+ />
+
+
+```
+
+#### Broken source URL images and videos
+
+```jsx
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
```
@@ -879,51 +1112,59 @@ We don't currently overlay message metadata on top of videos like we do with ima
```jsx
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
```
@@ -931,47 +1172,55 @@ We don't currently overlay message metadata on top of videos like we do with ima
```jsx
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
```
@@ -983,99 +1232,113 @@ Voice notes are not shown any differently from audio attachments.
```jsx
- 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')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+
```
@@ -1083,55 +1346,63 @@ Voice notes are not shown any differently from audio attachments.
```jsx
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
- console.log('onClickAttachment')}
- />
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
```
@@ -1141,144 +1412,171 @@ 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}
- />
-
+
+
+
+
+
+
+
+
+ console.log('onClickAttachment')}
+ authorAvatarPath={util.gifObjectUrl}
+ />
+
+
+ console.log('onClickAttachment')}
+ authorAvatarPath={util.gifObjectUrl}
+ />
+
+
+ console.log('onClickAttachment')}
+ authorAvatarPath={util.gifObjectUrl}
+ />
+
+
+ console.log('onClickAttachment')}
+ />
+
+
+
+
+
+
+
+
+
```
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index 1e36d0fef..b2fe8ed33 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -1,23 +1,28 @@
import React from 'react';
import classNames from 'classnames';
-import moment from 'moment';
-import { padStart } from 'lodash';
-import { formatRelativeTime } from '../../util/formatRelativeTime';
import {
isImageTypeSupported,
isVideoTypeSupported,
} from '../../util/GoogleChrome';
import { MessageBody } from './MessageBody';
-import { Emojify } from './Emojify';
+import { ExpireTimer, getIncrement } from './ExpireTimer';
+import { Timestamp } from './Timestamp';
+import { ContactName } from './ContactName';
import { Quote, QuotedAttachment } from './Quote';
import { EmbeddedContact } from './EmbeddedContact';
import { Contact } from '../../types/Contact';
-import { Localizer } from '../../types/Util';
+import { Color, Localizer } from '../../types/Util';
+import { ContextMenu, ContextMenuTrigger, MenuItem } from 'react-contextmenu';
+
import * as MIME from '../../../ts/types/MIME';
+interface Trigger {
+ handleContextClick: (event: React.MouseEvent) => void;
+}
+
interface Attachment {
contentType: MIME.MIMEType;
fileName: string;
@@ -26,50 +31,69 @@ interface Attachment {
/** For messages not already on disk, this will be a data url */
url: string;
fileSize?: string;
+ width: number;
+ height: number;
+ screenshot?: {
+ height: number;
+ width: number;
+ url: string;
+ contentType: MIME.MIMEType;
+ };
+ thumbnail?: {
+ height: number;
+ width: number;
+ url: string;
+ contentType: MIME.MIMEType;
+ };
}
-interface Props {
+export interface Props {
+ disableMenu?: boolean;
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';
+ status?: 'sending' | 'sent' | 'delivered' | 'read' | 'error';
+ // What if changed this over to a single contact like quote, and put the events on it?
+ contact?: Contact & {
+ hasSignalAccount: boolean;
+ onSendMessage?: () => void;
+ onClick?: () => void;
+ };
i18n: Localizer;
authorName?: string;
authorProfileName?: string;
/** Note: this should be formatted for display */
- authorPhoneNumber?: string;
+ authorPhoneNumber: string;
+ authorColor: Color;
conversationType: 'group' | 'direct';
attachment?: Attachment;
quote?: {
text: string;
- attachments: Array;
+ attachment?: QuotedAttachment;
isFromMe: boolean;
- authorName?: string;
- authorPhoneNumber?: string;
+ authorPhoneNumber: string;
authorProfileName?: string;
+ authorName?: string;
+ authorColor: Color;
+ onClick?: () => void;
};
authorAvatarPath?: string;
- contactHasSignalAccount: boolean;
expirationLength?: number;
expirationTimestamp?: number;
- onClickQuote?: () => void;
- onSendMessageToContact?: () => void;
- onClickContact?: () => void;
onClickAttachment?: () => void;
+ onReply?: () => void;
+ onRetrySend?: () => void;
+ onDownload?: () => void;
+ onDelete?: () => void;
+ onShowDetail: () => void;
+}
+
+interface State {
+ expiring: boolean;
+ expired: boolean;
+ imageBroken: boolean;
}
function isImage(attachment?: Attachment) {
@@ -80,6 +104,10 @@ function isImage(attachment?: Attachment) {
);
}
+function hasImage(attachment?: Attachment) {
+ return attachment && attachment.url;
+}
+
function isVideo(attachment?: Attachment) {
return (
attachment &&
@@ -88,24 +116,18 @@ function isVideo(attachment?: Attachment) {
);
}
+function hasVideoScreenshot(attachment?: Attachment) {
+ return attachment && attachment.screenshot && attachment.screenshot.url;
+}
+
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 getInitial(name: string): string {
+ return name.trim()[0] || '#';
}
function getExtension({
@@ -131,58 +153,118 @@ function getExtension({
return null;
}
-export class Message extends React.Component {
- public renderTimer() {
- const {
- attachment,
- direction,
- expirationLength,
- expirationTimestamp,
- text,
- } = this.props;
+const MINIMUM_IMG_HEIGHT = 150;
+const MAXIMUM_IMG_HEIGHT = 300;
+const EXPIRATION_CHECK_MINIMUM = 2000;
+const EXPIRED_DELAY = 600;
- if (!expirationLength || !expirationTimestamp) {
- return null;
+export class Message extends React.Component {
+ public captureMenuTriggerBound: (trigger: any) => void;
+ public showMenuBound: (event: React.MouseEvent) => void;
+ public handleImageErrorBound: () => void;
+
+ public menuTriggerRef: Trigger | null;
+ public expirationCheckInterval: any;
+ public expiredTimeout: any;
+
+ public constructor(props: Props) {
+ super(props);
+
+ this.captureMenuTriggerBound = this.captureMenuTrigger.bind(this);
+ this.showMenuBound = this.showMenu.bind(this);
+ this.handleImageErrorBound = this.handleImageError.bind(this);
+
+ this.menuTriggerRef = null;
+ this.expirationCheckInterval = null;
+ this.expiredTimeout = null;
+
+ this.state = {
+ expiring: false,
+ expired: false,
+ imageBroken: false,
+ };
+ }
+
+ public componentDidMount() {
+ const { expirationLength } = this.props;
+ if (!expirationLength) {
+ return;
}
- const withImageNoCaption = !text && isImage(attachment);
- const bucket = getTimerBucket(expirationTimestamp, expirationLength);
+ const increment = getIncrement(expirationLength);
+ const checkFrequency = Math.max(EXPIRATION_CHECK_MINIMUM, increment);
- return (
-
- );
+ this.checkExpired();
+
+ this.expirationCheckInterval = setInterval(() => {
+ this.checkExpired();
+ }, checkFrequency);
+ }
+
+ public componentWillUnmount() {
+ if (this.expirationCheckInterval) {
+ clearInterval(this.expirationCheckInterval);
+ }
+ if (this.expiredTimeout) {
+ clearTimeout(this.expiredTimeout);
+ }
+ }
+
+ public checkExpired() {
+ const now = Date.now();
+ const { expirationTimestamp, expirationLength } = this.props;
+
+ if (!expirationTimestamp || !expirationLength) {
+ return;
+ }
+
+ if (now >= expirationTimestamp) {
+ this.setState({
+ expiring: true,
+ });
+
+ const setExpired = () => {
+ this.setState({
+ expired: true,
+ });
+ };
+ this.expiredTimeout = setTimeout(setExpired, EXPIRED_DELAY);
+ }
+ }
+
+ public handleImageError() {
+ // tslint:disable-next-line no-console
+ console.log('Message: Image failed to load; failing over to placeholder');
+ this.setState({
+ imageBroken: true,
+ });
}
public renderMetadata() {
const {
+ attachment,
collapseMetadata,
- color,
direction,
+ expirationLength,
+ expirationTimestamp,
i18n,
status,
- timestamp,
text,
- attachment,
+ timestamp,
} = this.props;
+ const { imageBroken } = this.state;
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);
+ const withImageNoCaption = Boolean(
+ !text &&
+ !imageBroken &&
+ ((isImage(attachment) && hasImage(attachment)) ||
+ (isVideo(attachment) && hasVideoScreenshot(attachment)))
+ );
+ const showError = status === 'error' && direction === 'outgoing';
return (
+ {(changes || []).map(change => (
+
+ );
+ }
+}
diff --git a/ts/components/conversation/Message.md b/ts/components/conversation/Message.md
index dfd98ef76..26a5e7256 100644
--- a/ts/components/conversation/Message.md
+++ b/ts/components/conversation/Message.md
@@ -4,473 +4,324 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
```jsx
+ {this.renderChange(change)}
+
+ ))}
+ {
: null
)}
>
-
- {formatRelativeTime(timestamp, { i18n, extended: true })}
-
- {this.renderTimer()}
+ {showError ? (
+
+ {i18n('sendFailed')}
+
+ ) : (
+ {
public renderAuthor() {
const {
authorName,
+ authorPhoneNumber,
+ authorProfileName,
conversationType,
direction,
i18n,
- authorPhoneNumber,
- authorProfileName,
} = this.props;
const title = authorName ? authorName : authorPhoneNumber;
@@ -244,21 +336,20 @@ export class Message extends React.Component {
return null;
}
- const profileElement =
- authorProfileName && !authorName ? (
-
- ~ {
quote,
onClickAttachment,
} = this.props;
+ const { imageBroken } = this.state;
if (!attachment) {
return null;
@@ -282,9 +374,30 @@ export class Message extends React.Component {
quote || (conversationType === 'group' && direction === 'incoming');
if (isImage(attachment)) {
+ if (imageBroken || !attachment.url) {
+ return (
+ {
}
public renderQuote() {
- const {
- color,
- conversationType,
- direction,
- i18n,
- onClickQuote,
- quote,
- } = this.props;
+ const { conversationType, direction, i18n, 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 (
{
public renderEmbeddedContact() {
const {
collapseMetadata,
- contactHasSignalAccount,
- contacts,
+ contact,
conversationType,
direction,
i18n,
- onClickContact,
- onSendMessageToContact,
text,
} = this.props;
- const first = contacts && contacts[0];
-
- if (!first) {
+ if (!contact) {
return null;
}
@@ -447,12 +575,11 @@ export class Message extends React.Component {
return (
{
}
public renderSendMessageButton() {
- const {
- contactHasSignalAccount,
- contacts,
- i18n,
- onSendMessageToContact,
- } = this.props;
- const first = contacts && contacts[0];
-
- if (!first || !contactHasSignalAccount) {
+ const { contact, i18n } = this.props;
+ if (!contact || !contact.hasSignalAccount) {
return null;
}
return (
@@ -1132,16 +1272,15 @@ const View = Whisper.MessageView;
-
);
}
- // tslint:disable-next-line max-func-body-length
+ // tslint:disable-next-line max-func-body-length cyclomatic-complexity
public renderAttachment() {
const {
i18n,
@@ -270,6 +361,7 @@ export class Message extends React.Component
+ {i18n('imageFailedToLoad')}
+
+ );
+ }
+
+ // Calculating height to prevent reflow when image loads
+ const height = Math.max(MINIMUM_IMG_HEIGHT, attachment.height || 0);
+
return (
-
+
![]()
{
? 'module-message__img-attachment--with-content-above'
: null
)}
+ height={Math.min(MAXIMUM_IMG_HEIGHT, height)}
src={attachment.url}
alt={i18n('imageAttachmentAlt')}
- onClick={onClickAttachment}
/>
{!withCaption && !collapseMetadata ? (
@@ -304,21 +417,53 @@ export class Message extends React.Component {
);
} else if (isVideo(attachment)) {
+ const { screenshot } = attachment;
+ if (imageBroken || !screenshot || !screenshot.url) {
+ return (
+ 
+ {!withCaption && !collapseMetadata ? (
+
+ ) : null}
+
);
} else if (isAudio(attachment)) {
return (
@@ -384,38 +529,26 @@ export class Message extends React.Component
+ {i18n('videoScreenshotFailedToLoad')}
+
+ );
+ }
+
+ // Calculating height to prevent reflow when image loads
+ const height = Math.max(MINIMUM_IMG_HEIGHT, screenshot.height || 0);
+
return (
-
+
+
+
+ @@ -425,18 +558,13 @@ export class Message extends React.Component
{i18n('sendMessageToContact')}
@@ -489,8 +609,8 @@ export class Message extends React.Component {
authorPhoneNumber,
authorProfileName,
authorAvatarPath,
+ authorColor,
collapseMetadata,
- color,
conversationType,
direction,
i18n,
@@ -509,14 +629,18 @@ export class Message extends React.Component {
}
if (!authorAvatarPath) {
+ const label = authorName ? getInitial(authorName) : '#';
+
return (
{
}
public renderText() {
- const { text, i18n, direction } = this.props;
+ const { text, i18n, direction, status } = this.props;
- if (!text) {
+ const contents =
+ direction === 'incoming' && status === 'error'
+ ? i18n('incomingError')
+ : text;
+
+ if (!contents) {
return null;
}
@@ -539,38 +668,162 @@ export class Message extends React.Component {
) {
+ if (this.menuTriggerRef) {
+ this.menuTriggerRef.handleContextClick(event);
+ }
+ }
+
+ public renderMenu(isCorrectSide: boolean, triggerId: string) {
+ const {
+ attachment,
+ direction,
+ disableMenu,
+ onDownload,
+ onReply,
+ } = this.props;
+
+ if (!isCorrectSide || disableMenu) {
+ return null;
+ }
+
+ const downloadButton = attachment ? (
+
+ ) : null;
+
+ const replyButton = (
+
+ );
+
+ const menuButton = (
+
+
+
+ );
+
+ const first = direction === 'incoming' ? downloadButton : menuButton;
+ const last = direction === 'incoming' ? menuButton : downloadButton;
+
+ return (
+
+
+ {showRetry ? (
+
+ ) : null}
+
+
+ );
+ }
+
public render() {
const {
- attachment,
- color,
- conversationType,
+ authorPhoneNumber,
+ authorColor,
direction,
id,
- quote,
- text,
+ timestamp,
} = this.props;
+ const { expired, expiring } = this.state;
- const imageAndNothingElse =
- !text && isImage(attachment) && conversationType !== 'group' && !quote;
+ // This id is what connects our triple-dot click with our associated pop-up menu.
+ // It needs to be unique.
+ const triggerId = String(id || `${authorPhoneNumber}-${timestamp}`);
+
+ if (expired) {
+ return null;
+ }
return (
-
+ console.log('onDelete'),
+ }}
+ sentAt={Date.now() - 2 * 60 * 1000}
+ receivedAt={Date.now() - 10 * 1000}
+ contacts={[
+ {
+ phoneNumber: '(202) 555-1001',
+ avatarPath: util.gifObjectUrl,
+ },
+ ]}
+ i18n={util.i18n}
+/>
+```
+
+### Message to group, multiple contacts
+
+```jsx
+ console.log('onDelete'),
+ }}
+ sentAt={Date.now()}
+ contacts={[
+ {
+ phoneNumber: '(202) 555-1001',
+ profileName: 'Mr. Fire',
+ avatarPath: util.gifObjectUrl,
+ status: 'sending',
+ },
+ {
+ phoneNumber: '(202) 555-1002',
+ avatarPath: util.pngObjectUrl,
+ status: 'delivered',
+ },
+ {
+ phoneNumber: '(202) 555-1003',
+ color: 'teal',
+ status: 'read',
+ },
+ ]}
+ i18n={util.i18n}
+/>
+```
+
+### 1:1 conversation, just one recipient
+
+```jsx
+ console.log('onDelete'),
+ }}
+ contacts={[
+ {
+ phoneNumber: '(202) 555-1001',
+ avatarPath: util.gifObjectUrl,
+ status: 'sending',
+ },
+ ]}
+ sentAt={Date.now()}
+ i18n={util.i18n}
+/>
+```
+
+### Errors for some users, including on OutgoingKeyError
+
+```jsx
+ console.log('onDelete'),
+ }}
+ contacts={[
+ {
+ phoneNumber: '(202) 555-1001',
+ avatarPath: util.gifObjectUrl,
+ status: 'error',
+ errors: [new Error('Something went wrong'), new Error('Bad things')],
+ },
+ {
+ phoneNumber: '(202) 555-1002',
+ avatarPath: util.pngObjectUrl,
+ status: 'error',
+ isOutgoingKeyError: true,
+ errors: [new Error(util.i18n('newIdentity'))],
+ onShowSafetyNumber: () => console.log('onShowSafetyNumber'),
+ onSendAnyway: () => console.log('onSendAnyway'),
+ },
+ {
+ phoneNumber: '(202) 555-1003',
+ color: 'teal',
+ status: 'read',
+ },
+ ]}
+ sentAt={Date.now()}
+ i18n={util.i18n}
+/>
+```
diff --git a/ts/components/conversation/MessageDetail.tsx b/ts/components/conversation/MessageDetail.tsx
new file mode 100644
index 000000000..7d369d351
--- /dev/null
+++ b/ts/components/conversation/MessageDetail.tsx
@@ -0,0 +1,209 @@
+import React from 'react';
+import classNames from 'classnames';
+import moment from 'moment';
+
+import { ContactName } from './ContactName';
+import { Message, Props as MessageProps } from './Message';
+import { Localizer } from '../../types/Util';
+
+interface Contact {
+ status: string;
+ phoneNumber: string;
+ name?: string;
+ profileName?: string;
+ avatarPath?: string;
+ color: string;
+ isOutgoingKeyError: boolean;
+
+ errors?: Array;
+ onSendAnyway: () => void;
+ onShowSafetyNumber: () => void;
+}
+
+interface Props {
+ sentAt: number;
+ receivedAt: number;
+
+ message: MessageProps;
+ errors: Array;
+ contacts: Array;
+
+ i18n: Localizer;
+}
+
+function getInitial(name: string): string {
+ return name.trim()[0] || '#';
+}
+
+export class MessageDetail extends React.Component {
+ public renderAvatar(contact: Contact) {
+ const { i18n } = this.props;
+ const { avatarPath, color, phoneNumber, name, profileName } = contact;
+
+ if (!avatarPath) {
+ const initial = getInitial(name || '');
+
+ return (
+ 
+ );
+ }
+
+ public renderDeleteButton() {
+ const { i18n, message } = this.props;
+
+ return (
+
- 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
deleted file mode 100644
index 18b4c0809..000000000
--- a/ts/components/conversation/Notification.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-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')}
- />
+
+ console.log('onClick'),
+ }}
+ />
+
+
+ console.log('onClick'),
+ }}
+ />
+
+
+```
+
+#### Name variations
+
+```jsx
+
+
+
+
+
+
+
+
+
```
@@ -38,33 +113,35 @@
```jsx
- console.log('onClickQuote')}
- />
- console.log('onClickQuote')}
- />
+
+
+
+
```
@@ -72,35 +149,37 @@
```jsx
- console.log('onClickQuote')}
- />
- console.log('onClickQuote')}
- />
+
+
+
+
```
@@ -108,39 +187,83 @@
```jsx
- console.log('onClickQuote')}
- authorAvatarPath={util.gifObjectUrl}
- />
- console.log('onClickQuote')}
- authorAvatarPath={util.gifObjectUrl}
- />
+
+
+
+
+
+```
+
+#### Long names and context
+
+```jsx
+
+
+
+
+
```
@@ -148,41 +271,43 @@
```jsx
- console.log('onClickQuote')}
- />
- console.log('onClickQuote')}
- />
+
+
+
+
```
@@ -190,51 +315,51 @@
```jsx
-
+ console.log('onClickQuote')}
- />
-
+
+ console.log('onClickQuote')}
- />
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ />
+
```
@@ -242,20 +367,21 @@
```jsx
-
+ console.log('onClickQuote')}
- />
-
+ console.log('onClickQuote')}
- />
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ />
+
```
@@ -302,16 +427,17 @@
```jsx
-
+ console.log('onClickQuote')}
- />
-
+ console.log('onClickQuote')}
- />
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ />
+
```
@@ -354,15 +479,16 @@
```jsx
-
+ console.log('onClickQuote')}
- />
-
+ console.log('onClickQuote')}
- />
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ />
+
```
@@ -404,41 +529,41 @@
```jsx
-
+ console.log('onClickQuote')}
- />
-
+ console.log('onClickQuote')}
- />
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ />
+
```
@@ -446,16 +571,17 @@
```jsx
-
+ console.log('onClickQuote')}
- />
-
+ console.log('onClickQuote')}
- />
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ />
+
```
@@ -498,15 +623,16 @@
```jsx
-
+ console.log('onClickQuote')}
- />
-
+ console.log('onClickQuote')}
- />
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ />
+
```
@@ -548,47 +673,47 @@
```jsx
-
+ console.log('onClickQuote')}
- />
-
+ console.log('onClickQuote')}
- />
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ />
+
```
@@ -596,43 +721,43 @@
```jsx
-
+ console.log('onClickQuote')}
- />
-
+ console.log('onClickQuote')}
- />
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ />
+
```
@@ -640,156 +765,170 @@
```jsx
-
+ console.log('onClickQuote')}
- />
-
+ console.log('onClickQuote')}
- />
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ />
+
```
#### Voice message
```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')}
- />
- ;
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ />
+
+
```
#### Other file type with caption
```jsx
-
+ console.log('onClickQuote')}
- />
-
+ console.log('onClickQuote')}
- />
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ />
+
+
+
+
+
```
@@ -797,41 +936,41 @@ const View = Whisper.MessageView;
```jsx
-
+ console.log('onClickQuote')}
- />
-
+ console.log('onClickQuote')}
- />
+ authorPhoneNumber: '(202) 555-0011',
+ }}
+ />
+
```
@@ -841,45 +980,45 @@ const View = Whisper.MessageView;
```jsx
- 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')}
- />
+
+
+
+
```
@@ -887,43 +1026,43 @@ const View = Whisper.MessageView;
```jsx
- 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')}
- />
+
+
+
+
```
@@ -931,43 +1070,43 @@ const View = Whisper.MessageView;
```jsx
- 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')}
- />
+
+
+
+
```
@@ -975,43 +1114,43 @@ const View = Whisper.MessageView;
```jsx
- 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')}
- />
+
+
+
+
```
@@ -1019,43 +1158,43 @@ const View = Whisper.MessageView;
```jsx
- 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')}
- />
+
+
+
+
```
@@ -1063,45 +1202,45 @@ const View = Whisper.MessageView;
```jsx
- 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')}
- />
+
+
+
+
```
@@ -1115,10 +1254,11 @@ const View = Whisper.MessageView;
-
);
}
@@ -529,9 +653,14 @@ export class Message extends React.Component#
+
+ {label}
+
-
);
}
+ public renderError(isCorrectSide: boolean) {
+ const { status, direction } = this.props;
+
+ if (!isCorrectSide || status !== 'error') {
+ return null;
+ }
+
+ return (
+
+
+
+ );
+ }
+
+ public captureMenuTrigger(triggerRef: Trigger) {
+ this.menuTriggerRef = triggerRef;
+ }
+ public showMenu(event: React.MouseEvent
+ {first}
+ {replyButton}
+ {last}
+
+ );
+ }
+
+ public renderContextMenu(triggerId: string) {
+ const {
+ direction,
+ status,
+ onDelete,
+ onRetrySend,
+ onShowDetail,
+ i18n,
+ } = this.props;
+
+ const showRetry = status === 'error' && direction === 'outgoing';
+
+ return (
+
+ {this.renderError(direction === 'incoming')}
+ {this.renderMenu(direction === 'outgoing', triggerId)}
);
}
}
diff --git a/ts/components/conversation/MessageDetail.md b/ts/components/conversation/MessageDetail.md
new file mode 100644
index 000000000..e0d09fd54
--- /dev/null
+++ b/ts/components/conversation/MessageDetail.md
@@ -0,0 +1,128 @@
+### Incoming message
+
+```jsx
+
@@ -583,7 +836,10 @@ export class Message extends React.Component {
{this.renderSendMessageButton()}
{this.renderAvatar()}
-
+ {this.renderError(direction === 'outgoing')}
+ {this.renderMenu(direction === 'incoming', triggerId)}
+ {this.renderContextMenu(triggerId)}
+
+ {initial}
+
+ );
+ }
+
+ const title = `${name || phoneNumber}${
+ !name && profileName ? ` ~${profileName}` : ''
+ }`;
+
+ return (
+
+
+
+ );
+ }
+
+ public renderContact(contact: Contact) {
+ const { i18n } = this.props;
+ const errors = contact.errors || [];
+
+ const errorComponent = contact.isOutgoingKeyError ? (
+
+
+
+
+ ) : null;
+ const statusComponent = !contact.isOutgoingKeyError ? (
+
+ ) : null;
+
+ return (
+
+ {this.renderAvatar(contact)}
+
+ );
+ }
+
+ public renderContacts() {
+ const { contacts } = this.props;
+
+ if (!contacts || !contacts.length) {
+ return null;
+ }
+
+ return (
+
+
+ {errorComponent}
+ {statusComponent}
+
+
+ {errors.map((error, index) => (
+
+ {error.message}
+
+ ))}
+
+ {contacts.map(contact => this.renderContact(contact))}
+
+ );
+ }
+
+ public render() {
+ const { errors, message, receivedAt, sentAt, i18n } = this.props;
+
+ return (
+
+
+
+ {(errors || []).map(error => (
+
+ {this.renderContacts()}
+ {this.renderDeleteButton()}
+
+ );
+ }
+}
diff --git a/ts/components/conversation/Notification.md b/ts/components/conversation/Notification.md
deleted file mode 100644
index 3ec261087..000000000
--- a/ts/components/conversation/Notification.md
+++ /dev/null
@@ -1,151 +0,0 @@
-### 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;
-
+
+ | + {i18n('error')} + | ++ {' '} + {error.message}{' '} + | +
| {i18n('sent')} | ++ {moment(sentAt).format('LLLL')}{' '} + + ({sentAt}) + + | +
| + {i18n('received')} + | ++ {moment(receivedAt).format('LLLL')}{' '} + + ({receivedAt}) + + | +
| + {message.direction === 'incoming' ? i18n('from') : i18n('to')} + | +
- {this.renderContents()}
-
- );
- }
-}
diff --git a/ts/components/conversation/Quote.md b/ts/components/conversation/Quote.md
index b3308a05e..0638a14a0 100644
--- a/ts/components/conversation/Quote.md
+++ b/ts/components/conversation/Quote.md
@@ -4,33 +4,108 @@
```jsx
console.log('onClick')} />
console.log('onClick')} />