Display proper text when quoting view once message

ts/components/conversation/Message.tsx

@@ -149,6 +149,7 @@ export type PropsData = {
     authorName?: string;
     bodyRanges?: BodyRangesType;
     referencedMessageNotFound: boolean;
+    isViewOnce: boolean;
   };
   previews: Array<LinkPreviewType>;
   isExpired?: boolean;
@@ -1062,7 +1063,7 @@ export class Message extends React.Component<Props, State> {
 
     const withContentAbove =
       conversationType === 'group' && direction === 'incoming';
-    const { referencedMessageNotFound } = quote;
+    const { isViewOnce, referencedMessageNotFound } = quote;
 
     const clickHandler = disableScroll
       ? undefined
@@ -1087,6 +1088,7 @@ export class Message extends React.Component<Props, State> {
         bodyRanges={quote.bodyRanges}
         conversationColor={conversationColor}
         customColor={customColor}
+        isViewOnce={isViewOnce}
         referencedMessageNotFound={referencedMessageNotFound}
         isFromMe={quote.isFromMe}
         withContentAbove={withContentAbove}

ts/components/conversation/Quote.stories.tsx

@@ -81,6 +81,7 @@ const renderInMessage = ({
   conversationColor,
   isFromMe,
   rawAttachment,
+  isViewOnce,
   referencedMessageNotFound,
   text: quoteText,
 }: Props) => {
@@ -96,6 +97,7 @@ const renderInMessage = ({
       conversationColor,
       isFromMe,
       rawAttachment,
+      isViewOnce,
       referencedMessageNotFound,
       sentAt: Date.now() - 30 * 1000,
       text: quoteText,
@@ -133,6 +135,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
     'referencedMessageNotFound',
     overrideProps.referencedMessageNotFound || false
   ),
+  isViewOnce: boolean('isViewOnce', overrideProps.isViewOnce || false),
   text: text(
     'text',
     isString(overrideProps.text)
@@ -247,6 +250,20 @@ story.add('Image Attachment w/o Thumbnail', () => {
   return <Quote {...props} />;
 });
 
+story.add('Image Tap-to-View', () => {
+  const props = createProps({
+    text: '',
+    isViewOnce: true,
+    rawAttachment: {
+      contentType: IMAGE_PNG,
+      fileName: 'sax.png',
+      isVoiceMessage: false,
+    },
+  });
+
+  return <Quote {...props} />;
+});
+
 story.add('Video Only', () => {
   const props = createProps({
     rawAttachment: {
@@ -293,6 +310,20 @@ story.add('Video Attachment w/o Thumbnail', () => {
   return <Quote {...props} />;
 });
 
+story.add('Video Tap-to-View', () => {
+  const props = createProps({
+    text: '',
+    isViewOnce: true,
+    rawAttachment: {
+      contentType: VIDEO_MP4,
+      fileName: 'great-video.mp4',
+      isVoiceMessage: false,
+    },
+  });
+
+  return <Quote {...props} />;
+});
+
 story.add('Audio Only', () => {
   const props = createProps({
     rawAttachment: {
@@ -359,6 +390,20 @@ story.add('Other File Only', () => {
   return <Quote {...props} />;
 });
 
+story.add('Media Tap-to-View', () => {
+  const props = createProps({
+    text: '',
+    isViewOnce: true,
+    rawAttachment: {
+      contentType: AUDIO_MP3,
+      fileName: 'great-video.mp3',
+      isVoiceMessage: false,
+    },
+  });
+
+  return <Quote {...props} />;
+});
+
 story.add('Other File Attachment', () => {
   const props = createProps({
     rawAttachment: {

ts/components/conversation/Quote.tsx

@@ -31,6 +31,7 @@ export type Props = {
   onClose?: () => void;
   text: string;
   rawAttachment?: QuotedAttachmentType;
+  isViewOnce: boolean;
   referencedMessageNotFound: boolean;
 };
 
@@ -83,19 +84,32 @@ function getObjectUrl(thumbnail: Attachment | undefined): string | undefined {
 
 function getTypeLabel({
   i18n,
+  isViewOnce = false,
   contentType,
   isVoiceMessage,
 }: {
   i18n: LocalizerType;
+  isViewOnce?: boolean;
   contentType: MIME.MIMEType;
   isVoiceMessage: boolean;
 }): string | undefined {
   if (GoogleChrome.isVideoTypeSupported(contentType)) {
+    if (isViewOnce) {
+      return i18n('message--getDescription--disappearing-video');
+    }
     return i18n('video');
   }
   if (GoogleChrome.isImageTypeSupported(contentType)) {
+    if (isViewOnce) {
+      return i18n('message--getDescription--disappearing-photo');
+    }
     return i18n('photo');
   }
+
+  if (isViewOnce) {
+    return i18n('message--getDescription--disappearing-media');
+  }
+
   if (MIME.isAudio(contentType) && isVoiceMessage) {
     return i18n('voiceMessage');
   }
@@ -217,7 +231,7 @@ export class Quote extends React.Component<Props, State> {
   }
 
   public renderIconContainer(): JSX.Element | null {
-    const { rawAttachment } = this.props;
+    const { rawAttachment, isViewOnce } = this.props;
     const { imageBroken } = this.state;
     const attachment = getAttachment(rawAttachment);
 
@@ -228,6 +242,10 @@ export class Quote extends React.Component<Props, State> {
     const { contentType, thumbnail } = attachment;
     const objectUrl = getObjectUrl(thumbnail);
 
+    if (isViewOnce) {
+      return this.renderIcon('view-once');
+    }
+
     if (GoogleChrome.isVideoTypeSupported(contentType)) {
       return objectUrl && !imageBroken
         ? this.renderImage(objectUrl, 'play')
@@ -246,7 +264,14 @@ export class Quote extends React.Component<Props, State> {
   }
 
   public renderText(): JSX.Element | null {
-    const { bodyRanges, i18n, text, rawAttachment, isIncoming } = this.props;
+    const {
+      bodyRanges,
+      i18n,
+      text,
+      rawAttachment,
+      isIncoming,
+      isViewOnce,
+    } = this.props;
 
     if (text) {
       const quoteText = bodyRanges
@@ -274,7 +299,12 @@ export class Quote extends React.Component<Props, State> {
 
     const { contentType, isVoiceMessage } = attachment;
 
-    const typeLabel = getTypeLabel({ i18n, contentType, isVoiceMessage });
+    const typeLabel = getTypeLabel({
+      i18n,
+      isViewOnce,
+      contentType,
+      isVoiceMessage,
+    });
     if (typeLabel) {
       return (
         <div