Exclude jumbo style for single emoji in quotes or attachments
This commit is contained in:
parent
096849cc00
commit
a25690b3bd
2 changed files with 96 additions and 7 deletions
|
@ -205,6 +205,87 @@ story.add('Emoji Messages', () => (
|
||||||
<Message {...createProps({ text: '😀😀😀😀😀' })} />
|
<Message {...createProps({ text: '😀😀😀😀😀' })} />
|
||||||
<br />
|
<br />
|
||||||
<Message {...createProps({ text: '😀😀😀😀😀😀😀' })} />
|
<Message {...createProps({ text: '😀😀😀😀😀😀😀' })} />
|
||||||
|
<br />
|
||||||
|
<Message
|
||||||
|
{...createProps({
|
||||||
|
previews: [
|
||||||
|
{
|
||||||
|
domain: 'signal.org',
|
||||||
|
image: fakeAttachment({
|
||||||
|
contentType: IMAGE_PNG,
|
||||||
|
fileName: 'the-sax.png',
|
||||||
|
height: 240,
|
||||||
|
url: pngUrl,
|
||||||
|
width: 320,
|
||||||
|
}),
|
||||||
|
isStickerPack: false,
|
||||||
|
title: 'Signal',
|
||||||
|
description:
|
||||||
|
'Say "hello" to a different messaging experience. An unexpected focus on privacy, combined with all of the features you expect.',
|
||||||
|
url: 'https://www.signal.org',
|
||||||
|
date: new Date(2020, 2, 10).valueOf(),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
text: '😀',
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<Message
|
||||||
|
{...createProps({
|
||||||
|
attachments: [
|
||||||
|
fakeAttachment({
|
||||||
|
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
|
||||||
|
fileName: 'tina-rolf-269345-unsplash.jpg',
|
||||||
|
contentType: IMAGE_JPEG,
|
||||||
|
width: 128,
|
||||||
|
height: 128,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
text: '😀',
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<Message
|
||||||
|
{...createProps({
|
||||||
|
attachments: [
|
||||||
|
fakeAttachment({
|
||||||
|
contentType: AUDIO_MP3,
|
||||||
|
fileName: 'incompetech-com-Agnus-Dei-X.mp3',
|
||||||
|
url: '/fixtures/incompetech-com-Agnus-Dei-X.mp3',
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
text: '😀',
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<Message
|
||||||
|
{...createProps({
|
||||||
|
attachments: [
|
||||||
|
fakeAttachment({
|
||||||
|
contentType: stringToMIMEType('text/plain'),
|
||||||
|
fileName: 'my-resume.txt',
|
||||||
|
url: 'my-resume.txt',
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
text: '😀',
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<Message
|
||||||
|
{...createProps({
|
||||||
|
attachments: [
|
||||||
|
fakeAttachment({
|
||||||
|
contentType: VIDEO_MP4,
|
||||||
|
flags: SignalService.AttachmentPointer.Flags.GIF,
|
||||||
|
fileName: 'cat-gif.mp4',
|
||||||
|
url: '/fixtures/cat-gif.mp4',
|
||||||
|
width: 400,
|
||||||
|
height: 332,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
text: '😀',
|
||||||
|
})}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
));
|
));
|
||||||
|
|
||||||
|
|
|
@ -590,6 +590,19 @@ export class Message extends React.PureComponent<Props, State> {
|
||||||
return isMessageRequestAccepted && !isBlocked;
|
return isMessageRequestAccepted && !isBlocked;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private canRenderStickerLikeEmoji(): boolean {
|
||||||
|
const { text, quote, attachments, previews } = this.props;
|
||||||
|
|
||||||
|
return Boolean(
|
||||||
|
text &&
|
||||||
|
isEmojiOnlyText(text) &&
|
||||||
|
getEmojiCount(text) < 6 &&
|
||||||
|
!quote &&
|
||||||
|
(!attachments || !attachments.length) &&
|
||||||
|
(!previews || !previews.length)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
public renderMetadata(): JSX.Element | null {
|
public renderMetadata(): JSX.Element | null {
|
||||||
const {
|
const {
|
||||||
attachments,
|
attachments,
|
||||||
|
@ -619,10 +632,7 @@ export class Message extends React.PureComponent<Props, State> {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const isEmojiOnly = Boolean(
|
const isStickerLike = isSticker || this.canRenderStickerLikeEmoji();
|
||||||
text && isEmojiOnlyText(text) && getEmojiCount(text) < 6
|
|
||||||
);
|
|
||||||
const isStickerLike = isSticker || isEmojiOnly;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MessageMetadata
|
<MessageMetadata
|
||||||
|
@ -2331,7 +2341,6 @@ export class Message extends React.PureComponent<Props, State> {
|
||||||
isTapToView,
|
isTapToView,
|
||||||
isTapToViewExpired,
|
isTapToViewExpired,
|
||||||
isTapToViewError,
|
isTapToViewError,
|
||||||
text,
|
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const { isSelected } = this.state;
|
const { isSelected } = this.state;
|
||||||
|
|
||||||
|
@ -2340,8 +2349,7 @@ export class Message extends React.PureComponent<Props, State> {
|
||||||
const width = this.getWidth();
|
const width = this.getWidth();
|
||||||
const isShowingImage = this.isShowingImage();
|
const isShowingImage = this.isShowingImage();
|
||||||
|
|
||||||
const isEmojiOnly =
|
const isEmojiOnly = this.canRenderStickerLikeEmoji();
|
||||||
text && isEmojiOnlyText(text) && getEmojiCount(text) < 6;
|
|
||||||
const isStickerLike = isSticker || isEmojiOnly;
|
const isStickerLike = isSticker || isEmojiOnly;
|
||||||
|
|
||||||
const containerClassnames = classNames(
|
const containerClassnames = classNames(
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue