Exclude jumbo style for single emoji in quotes or attachments

signalapp · Oct 8, 2021 · a25690b · a25690b
1 parent 096849c
commit a25690b
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 7 deletions.
diff --git a/ts/components/conversation/Message.stories.tsx b/ts/components/conversation/Message.stories.tsx
@@ -205,6 +205,87 @@ story.add('Emoji Messages', () => (
     <Message {...createProps({ text: '😀😀😀😀😀' })} />
     <br />
     <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: '😀',
+      })}
+    />
   </>
 ));
 

diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
@@ -590,6 +590,19 @@ export class Message extends React.PureComponent<Props, State> {
     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 {
     const {
       attachments,
@@ -619,10 +632,7 @@ export class Message extends React.PureComponent<Props, State> {
       return null;
     }
 
-    const isEmojiOnly = Boolean(
-      text && isEmojiOnlyText(text) && getEmojiCount(text) < 6
-    );
-    const isStickerLike = isSticker || isEmojiOnly;
+    const isStickerLike = isSticker || this.canRenderStickerLikeEmoji();
 
     return (
       <MessageMetadata
@@ -2331,7 +2341,6 @@ export class Message extends React.PureComponent<Props, State> {
       isTapToView,
       isTapToViewExpired,
       isTapToViewError,
-      text,
     } = this.props;
     const { isSelected } = this.state;
 
@@ -2340,8 +2349,7 @@ export class Message extends React.PureComponent<Props, State> {
     const width = this.getWidth();
     const isShowingImage = this.isShowingImage();
 
-    const isEmojiOnly =
-      text && isEmojiOnlyText(text) && getEmojiCount(text) < 6;
+    const isEmojiOnly = this.canRenderStickerLikeEmoji();
     const isStickerLike = isSticker || isEmojiOnly;
 
     const containerClassnames = classNames(