Hide long message attachments in quotes

ts/components/conversation/Message.tsx

@@ -1030,7 +1030,7 @@ export class Message extends React.PureComponent<Props, State> {
         i18n={i18n}
         onClick={clickHandler}
         text={quote.text}
-        attachment={quote.attachment}
+        rawAttachment={quote.attachment}
         isIncoming={direction === 'incoming'}
         authorPhoneNumber={quote.authorPhoneNumber}
         authorProfileName={quote.authorProfileName}

ts/components/conversation/Quote.stories.tsx

@@ -10,7 +10,13 @@ import { storiesOf } from '@storybook/react';
 import { Colors } from '../../types/Colors';
 import { pngUrl } from '../../storybook/Fixtures';
 import { Message, Props as MessagesProps } from './Message';
-import { AUDIO_MP3, IMAGE_PNG, MIMEType, VIDEO_MP4 } from '../../types/MIME';
+import {
+  AUDIO_MP3,
+  IMAGE_PNG,
+  LONG_MESSAGE,
+  MIMEType,
+  VIDEO_MP4,
+} from '../../types/MIME';
 import { Props, Quote } from './Quote';
 import { setup as setupI18n } from '../../../js/modules/i18n';
 import enMessages from '../../../_locales/en/messages.json';
@@ -62,13 +68,13 @@ const defaultMessageProps: MessagesProps = {
 };
 
 const renderInMessage = ({
-  attachment,
   authorColor,
   authorName,
   authorPhoneNumber,
   authorProfileName,
   authorTitle,
   isFromMe,
+  rawAttachment,
   referencedMessageNotFound,
   text: quoteText,
 }: Props) => {
@@ -76,7 +82,6 @@ const renderInMessage = ({
     ...defaultMessageProps,
     authorColor,
     quote: {
-      attachment,
       authorId: 'an-author',
       authorColor,
       authorName,
@@ -84,6 +89,7 @@ const renderInMessage = ({
       authorProfileName,
       authorTitle,
       isFromMe,
+      rawAttachment,
       referencedMessageNotFound,
       sentAt: Date.now() - 30 * 1000,
       text: quoteText,
@@ -100,7 +106,6 @@ const renderInMessage = ({
 };
 
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
-  attachment: overrideProps.attachment || undefined,
   authorColor: overrideProps.authorColor || 'green',
   authorName: text('authorName', overrideProps.authorName || ''),
   authorPhoneNumber: text(
@@ -117,6 +122,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   isIncoming: boolean('isIncoming', overrideProps.isIncoming || false),
   onClick: action('onClick'),
   onClose: action('onClose'),
+  rawAttachment: overrideProps.rawAttachment || undefined,
   referencedMessageNotFound: boolean(
     'referencedMessageNotFound',
     overrideProps.referencedMessageNotFound || false
@@ -186,7 +192,7 @@ story.add('Content Above', () => {
 
 story.add('Image Only', () => {
   const props = createProps({
-    attachment: {
+    rawAttachment: {
       contentType: IMAGE_PNG,
       fileName: 'sax.png',
       isVoiceMessage: false,
@@ -203,7 +209,7 @@ story.add('Image Only', () => {
 });
 story.add('Image Attachment', () => {
   const props = createProps({
-    attachment: {
+    rawAttachment: {
       contentType: IMAGE_PNG,
       fileName: 'sax.png',
       isVoiceMessage: false,
@@ -219,7 +225,7 @@ story.add('Image Attachment', () => {
 
 story.add('Image Attachment w/o Thumbnail', () => {
   const props = createProps({
-    attachment: {
+    rawAttachment: {
       contentType: IMAGE_PNG,
       fileName: 'sax.png',
       isVoiceMessage: false,
@@ -231,7 +237,7 @@ story.add('Image Attachment w/o Thumbnail', () => {
 
 story.add('Video Only', () => {
   const props = createProps({
-    attachment: {
+    rawAttachment: {
       contentType: VIDEO_MP4,
       fileName: 'great-video.mp4',
       isVoiceMessage: false,
@@ -249,7 +255,7 @@ story.add('Video Only', () => {
 
 story.add('Video Attachment', () => {
   const props = createProps({
-    attachment: {
+    rawAttachment: {
       contentType: VIDEO_MP4,
       fileName: 'great-video.mp4',
       isVoiceMessage: false,
@@ -265,7 +271,7 @@ story.add('Video Attachment', () => {
 
 story.add('Video Attachment w/o Thumbnail', () => {
   const props = createProps({
-    attachment: {
+    rawAttachment: {
       contentType: VIDEO_MP4,
       fileName: 'great-video.mp4',
       isVoiceMessage: false,
@@ -277,7 +283,7 @@ story.add('Video Attachment w/o Thumbnail', () => {
 
 story.add('Audio Only', () => {
   const props = createProps({
-    attachment: {
+    rawAttachment: {
       contentType: AUDIO_MP3,
       fileName: 'great-video.mp3',
       isVoiceMessage: false,
@@ -291,7 +297,7 @@ story.add('Audio Only', () => {
 
 story.add('Audio Attachment', () => {
   const props = createProps({
-    attachment: {
+    rawAttachment: {
       contentType: AUDIO_MP3,
       fileName: 'great-video.mp3',
       isVoiceMessage: false,
@@ -303,7 +309,7 @@ story.add('Audio Attachment', () => {
 
 story.add('Voice Message Only', () => {
   const props = createProps({
-    attachment: {
+    rawAttachment: {
       contentType: AUDIO_MP3,
       fileName: 'great-video.mp3',
       isVoiceMessage: true,
@@ -317,7 +323,7 @@ story.add('Voice Message Only', () => {
 
 story.add('Voice Message Attachment', () => {
   const props = createProps({
-    attachment: {
+    rawAttachment: {
       contentType: AUDIO_MP3,
       fileName: 'great-video.mp3',
       isVoiceMessage: true,
@@ -329,7 +335,7 @@ story.add('Voice Message Attachment', () => {
 
 story.add('Other File Only', () => {
   const props = createProps({
-    attachment: {
+    rawAttachment: {
       contentType: 'application/json' as MIMEType,
       fileName: 'great-data.json',
       isVoiceMessage: false,
@@ -343,7 +349,7 @@ story.add('Other File Only', () => {
 
 story.add('Other File Attachment', () => {
   const props = createProps({
-    attachment: {
+    rawAttachment: {
       contentType: 'application/json' as MIMEType,
       fileName: 'great-data.json',
       isVoiceMessage: false,
@@ -353,6 +359,18 @@ story.add('Other File Attachment', () => {
   return <Quote {...props} />;
 });
 
+story.add('Long message attachment (should be hidden)', () => {
+  const props = createProps({
+    rawAttachment: {
+      contentType: LONG_MESSAGE,
+      fileName: 'signal-long-message-123.txt',
+      isVoiceMessage: false,
+    },
+  });
+
+  return <Quote {...props} />;
+});
+
 story.add('No Close Button', () => {
   const props = createProps();
   props.onClose = undefined;

ts/components/conversation/Quote.tsx

@@ -15,7 +15,6 @@ import { ContactName } from './ContactName';
 import { getTextWithMentions } from '../../util/getTextWithMentions';
 
 export type Props = {
-  attachment?: QuotedAttachmentType;
   authorTitle: string;
   authorPhoneNumber?: string;
   authorProfileName?: string;
@@ -29,6 +28,7 @@ export type Props = {
   onClick?: () => void;
   onClose?: () => void;
   text: string;
+  rawAttachment?: QuotedAttachmentType;
   referencedMessageNotFound: boolean;
 };
 
@@ -55,13 +55,22 @@ function validateQuote(quote: Props): boolean {
     return true;
   }
 
-  if (quote.attachment) {
+  if (quote.rawAttachment) {
     return true;
   }
 
   return false;
 }
 
+// Long message attachments should not be shown.
+function getAttachment(
+  rawAttachment: undefined | QuotedAttachmentType
+): undefined | QuotedAttachmentType {
+  return rawAttachment && !MIME.isLongMessage(rawAttachment.contentType)
+    ? rawAttachment
+    : undefined;
+}
+
 function getObjectUrl(thumbnail: Attachment | undefined): string | undefined {
   if (thumbnail && thumbnail.objectUrl) {
     return thumbnail.objectUrl;
@@ -173,7 +182,8 @@ export class Quote extends React.Component<Props, State> {
   }
 
   public renderGenericFile(): JSX.Element | null {
-    const { attachment, isIncoming } = this.props;
+    const { rawAttachment, isIncoming } = this.props;
+    const attachment = getAttachment(rawAttachment);
 
     if (!attachment) {
       return null;
@@ -205,8 +215,9 @@ export class Quote extends React.Component<Props, State> {
   }
 
   public renderIconContainer(): JSX.Element | null {
-    const { attachment } = this.props;
+    const { rawAttachment } = this.props;
     const { imageBroken } = this.state;
+    const attachment = getAttachment(rawAttachment);
 
     if (!attachment) {
       return null;
@@ -233,7 +244,7 @@ export class Quote extends React.Component<Props, State> {
   }
 
   public renderText(): JSX.Element | null {
-    const { bodyRanges, i18n, text, attachment, isIncoming } = this.props;
+    const { bodyRanges, i18n, text, rawAttachment, isIncoming } = this.props;
 
     if (text) {
       const quoteText = bodyRanges
@@ -253,6 +264,8 @@ export class Quote extends React.Component<Props, State> {
       );
     }
 
+    const attachment = getAttachment(rawAttachment);
+
     if (!attachment) {
       return null;
     }