Finish new Message component, integrate into application

Also:
- New schema version 8 with video/image thumbnails, screenshots, sizes
- Upgrade messages not at current schema version when loading messages
  to show in conversation
- New MessageDetail react component
- New ConversationHeader react component
This commit is contained in:
Scott Nonnenberg 2018-07-09 14:29:13 -07:00
parent 69f11c4a7b
commit 3c69886320
102 changed files with 9644 additions and 7381 deletions

View file

@ -6,15 +6,16 @@ import classNames from 'classnames';
import * as MIME from '../../../ts/types/MIME';
import * as GoogleChrome from '../../../ts/util/GoogleChrome';
import { Emojify } from './Emojify';
import { MessageBody } from './MessageBody';
import { Localizer } from '../../types/Util';
import { Color, Localizer } from '../../types/Util';
import { ContactName } from './ContactName';
interface Props {
attachments: Array<QuotedAttachment>;
color: string;
attachment?: QuotedAttachment;
authorPhoneNumber: string;
authorProfileName?: string;
authorTitle: string;
authorName?: string;
authorColor: Color;
i18n: Localizer;
isFromMe: boolean;
isIncoming: boolean;
@ -43,7 +44,7 @@ function validateQuote(quote: Props): boolean {
return true;
}
if (quote.attachments && quote.attachments.length > 0) {
if (quote.attachment) {
return true;
}
@ -124,14 +125,13 @@ export class Quote extends React.Component<Props> {
}
public renderGenericFile() {
const { attachments } = this.props;
const { attachment } = this.props;
if (!attachments || !attachments.length) {
if (!attachment) {
return;
}
const first = attachments[0];
const { fileName, contentType } = first;
const { fileName, contentType } = attachment;
const isGenericFile =
!GoogleChrome.isVideoTypeSupported(contentType) &&
!GoogleChrome.isImageTypeSupported(contentType) &&
@ -150,13 +150,12 @@ export class Quote extends React.Component<Props> {
}
public renderIconContainer() {
const { attachments, i18n } = this.props;
if (!attachments || attachments.length === 0) {
const { attachment, i18n } = this.props;
if (!attachment) {
return null;
}
const first = attachments[0];
const { contentType, thumbnail } = first;
const { contentType, thumbnail } = attachment;
const objectUrl = getObjectUrl(thumbnail);
if (GoogleChrome.isVideoTypeSupported(contentType)) {
@ -177,7 +176,7 @@ export class Quote extends React.Component<Props> {
}
public renderText() {
const { i18n, text, attachments } = this.props;
const { i18n, text, attachment } = this.props;
if (text) {
return (
@ -187,12 +186,11 @@ export class Quote extends React.Component<Props> {
);
}
if (!attachments || attachments.length === 0) {
if (!attachment) {
return null;
}
const first = attachments[0];
const { contentType, isVoiceMessage } = first;
const { contentType, isVoiceMessage } = attachment;
const typeLabel = getTypeLabel({ i18n, contentType, isVoiceMessage });
if (typeLabel) {
@ -231,29 +229,44 @@ export class Quote extends React.Component<Props> {
}
public renderAuthor() {
const { authorProfileName, authorTitle, i18n, isFromMe } = this.props;
const authorProfileElement = authorProfileName ? (
<span className="module-quote__primary__profile-name">
~<Emojify text={authorProfileName} i18n={i18n} />
</span>
) : null;
const {
authorProfileName,
authorPhoneNumber,
authorName,
authorColor,
i18n,
isFromMe,
} = this.props;
return (
<div className="module-quote__primary__author">
<div
className={classNames(
'module-quote__primary__author',
!isFromMe ? `module-quote__primary__author--${authorColor}` : null
)}
>
{isFromMe ? (
i18n('you')
) : (
<span>
<Emojify text={authorTitle} i18n={i18n} /> {authorProfileElement}
</span>
<ContactName
phoneNumber={authorPhoneNumber}
name={authorName}
profileName={authorProfileName}
i18n={i18n}
/>
)}
</div>
);
}
public render() {
const { color, isIncoming, onClick, withContentAbove } = this.props;
const {
authorColor,
isFromMe,
isIncoming,
onClick,
withContentAbove,
} = this.props;
if (!validateQuote(this.props)) {
return null;
@ -266,7 +279,10 @@ export class Quote extends React.Component<Props> {
className={classNames(
'module-quote',
isIncoming ? 'module-quote--incoming' : 'module-quote--outgoing',
!isIncoming ? `module-quote--outgoing-${color}` : null,
!isIncoming && !isFromMe
? `module-quote--outgoing-${authorColor}`
: null,
!isIncoming && isFromMe ? 'module-quote--outgoing-you' : null,
!onClick ? 'module-quote--no-click' : null,
withContentAbove ? 'module-quote--with-content-above' : null
)}