Adjust story replies for direct conversations

This commit is contained in:
Josh Perez 2022-05-10 15:02:21 -04:00 committed by GitHub
parent fa7b7fcd08
commit 0ca66d6e95
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 490 additions and 131 deletions

View file

@ -17,6 +17,8 @@ import type {
CustomColorType,
} from '../../types/Colors';
import { ContactName } from './ContactName';
import { Emojify } from './Emojify';
import { TextAttachment } from '../TextAttachment';
import { getTextWithMentions } from '../../util/getTextWithMentions';
import { getClassNamesFor } from '../../util/getClassNamesFor';
import { getCustomColorStyle } from '../../util/getCustomColorStyle';
@ -31,12 +33,14 @@ export type Props = {
i18n: LocalizerType;
isFromMe: boolean;
isIncoming?: boolean;
isStoryReply?: boolean;
moduleClassName?: string;
onClick?: () => void;
onClose?: () => void;
text: string;
rawAttachment?: QuotedAttachmentType;
isViewOnce: boolean;
reactionEmoji?: string;
referencedMessageNotFound: boolean;
doubleCheckMissingQuoteReference?: () => unknown;
};
@ -51,6 +55,13 @@ export type QuotedAttachmentType = Pick<
>;
function validateQuote(quote: Props): boolean {
if (
quote.isStoryReply &&
(quote.referencedMessageNotFound || quote.reactionEmoji)
) {
return true;
}
if (quote.text) {
return true;
}
@ -250,7 +261,7 @@ export class Quote extends React.Component<Props, State> {
}
public renderIconContainer(): JSX.Element | null {
const { rawAttachment, isViewOnce } = this.props;
const { rawAttachment, isViewOnce, i18n } = this.props;
const { imageBroken } = this.state;
const attachment = getAttachment(rawAttachment);
@ -265,9 +276,16 @@ export class Quote extends React.Component<Props, State> {
return this.renderIcon('view-once');
}
// TODO DESKTOP-3433
if (textAttachment) {
return this.renderIcon('image');
return (
<div className={this.getClassName('__icon-container')}>
<TextAttachment
i18n={i18n}
isThumbnail
textAttachment={textAttachment}
/>
</div>
);
}
if (GoogleChrome.isVideoTypeSupported(contentType)) {
@ -385,7 +403,17 @@ export class Quote extends React.Component<Props, State> {
}
public renderAuthor(): JSX.Element {
const { authorTitle, i18n, isFromMe, isIncoming } = this.props;
const { authorTitle, i18n, isFromMe, isIncoming, isStoryReply } =
this.props;
const title = isFromMe ? i18n('you') : <ContactName title={authorTitle} />;
const author = isStoryReply ? (
<>
{title} &middot; {i18n('Quote__story')}
</>
) : (
title
);
return (
<div
@ -394,7 +422,7 @@ export class Quote extends React.Component<Props, State> {
isIncoming ? this.getClassName('__primary__author--incoming') : null
)}
>
{isFromMe ? i18n('you') : <ContactName title={authorTitle} />}
{author}
</div>
);
}
@ -405,10 +433,11 @@ export class Quote extends React.Component<Props, State> {
customColor,
i18n,
isIncoming,
isStoryReply,
referencedMessageNotFound,
} = this.props;
if (!referencedMessageNotFound) {
if (!referencedMessageNotFound || isStoryReply) {
return null;
}
@ -452,6 +481,8 @@ export class Quote extends React.Component<Props, State> {
customColor,
isIncoming,
onClick,
rawAttachment,
reactionEmoji,
referencedMessageNotFound,
} = this.props;
@ -486,6 +517,17 @@ export class Quote extends React.Component<Props, State> {
{this.renderGenericFile()}
{this.renderText()}
</div>
{reactionEmoji && (
<div
className={
rawAttachment
? this.getClassName('__reaction-emoji')
: this.getClassName('__reaction-emoji--story-unavailable')
}
>
<Emojify text={reactionEmoji} />
</div>
)}
{this.renderIconContainer()}
{this.renderClose()}
</button>