Reply attachments (#1591)

* First attachment showing in reply composition.

* WIP: Adding thumbnail to quote response composition component.

* Added icon for voice recording attachment

* Updated formatting.

* Formatting.

* removed duplicate styling.

* WIP: Converting quote component to functional components.

* Fix bug where thumbnails for attachment replies wasn't showing.

* yarn Formatting.

* Removed old quote component.

* Add type to contentTypeSupported method.

* Moved  quote subcomponents out of Quote component.

* yarn format

* Add export to quote subcomponents.

* Fixing linting errors.

* remove commented line.

* Addressing PR comments.

ts/components/conversation/Quote.tsx

@@ -1,6 +1,6 @@
 // tslint:disable:react-this-binding-issue
 
-import React from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
 
 import * as MIME from '../../../ts/types/MIME';
@@ -12,7 +12,9 @@ import { ContactName } from './ContactName';
 import { PubKey } from '../../session/types';
 import { ConversationTypeEnum } from '../../models/conversation';
 
-interface Props {
+import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
+
+interface QuoteProps {
   attachment?: QuotedAttachmentType;
   authorPhoneNumber: string;
   authorProfileName?: string;
@@ -25,15 +27,10 @@ interface Props {
   isPublic?: boolean;
   withContentAbove: boolean;
   onClick?: (e: any) => void;
-  onClose?: () => void;
   text: string;
   referencedMessageNotFound: boolean;
 }
 
-interface State {
-  imageBroken: boolean;
-}
-
 export interface QuotedAttachmentType {
   contentType: MIME.MIMEType;
   fileName: string;
@@ -48,7 +45,7 @@ interface Attachment {
   objectUrl?: string;
 }
 
-function validateQuote(quote: Props): boolean {
+function validateQuote(quote: QuoteProps): boolean {
   if (quote.text) {
     return true;
   }
@@ -92,30 +89,11 @@ function getTypeLabel({
 
   return;
 }
+export const QuoteIcon = (props: any) => {
+  const { icon } = props;
 
-export class Quote extends React.Component<Props, State> {
+  return (
-  public handleImageErrorBound: () => void;
+    <div className="module-quote__icon-container">
-
-  public constructor(props: Props) {
-    super(props);
-
-    this.handleImageErrorBound = this.handleImageError.bind(this);
-
-    this.state = {
-      imageBroken: false,
-    };
-  }
-
-  public handleImageError() {
-    // tslint:disable-next-line no-console
-    console.log('Message: Image failed to load; failing over to placeholder');
-    this.setState({
-      imageBroken: true,
-    });
-  }
-
-  public renderImage(url: string, i18n: LocalizerType, icon?: string) {
-    const iconElement = icon ? (
       <div className="module-quote__icon-container__inner">
         <div className="module-quote__icon-container__circle-background">
           <div
@@ -126,19 +104,17 @@ export class Quote extends React.Component<Props, State> {
           />
         </div>
       </div>
-    ) : null;
-
-    return (
-      <div className="module-quote__icon-container">
-        <img src={url} alt={i18n('quoteThumbnailAlt')} onError={this.handleImageErrorBound} />
-        {iconElement}
     </div>
   );
-  }
+};
 
-  public renderIcon(icon: string) {
+export const QuoteImage = (props: any) => {
-    return (
+  const { url, i18n, icon, contentType, handleImageErrorBound } = props;
-      <div className="module-quote__icon-container">
+
+  const { loading, urlToLoad } = useEncryptedFileFetch(url, contentType);
+  const srcData = !loading ? urlToLoad : '';
+
+  const iconElement = icon ? (
     <div className="module-quote__icon-container__inner">
       <div className="module-quote__icon-container__circle-background">
         <div
@@ -149,15 +125,21 @@ export class Quote extends React.Component<Props, State> {
         />
       </div>
     </div>
+  ) : null;
+
+  return (
+    <div className="module-quote__icon-container">
+      <img src={srcData} alt={i18n('quoteThumbnailAlt')} onError={handleImageErrorBound} />
+      {iconElement}
     </div>
   );
-  }
+};
 
-  public renderGenericFile() {
+export const QuoteGenericFile = (props: any) => {
-    const { attachment, isIncoming } = this.props;
+  const { attachment, isIncoming } = props;
 
   if (!attachment) {
-      return;
+    return <></>;
   }
 
   const { fileName, contentType } = attachment;
@@ -167,7 +149,7 @@ export class Quote extends React.Component<Props, State> {
     !MIME.isAudio(contentType);
 
   if (!isGenericFile) {
-      return null;
+    return <></>;
   }
 
   return (
@@ -183,11 +165,10 @@ export class Quote extends React.Component<Props, State> {
       </div>
     </div>
   );
-  }
+};
 
-  public renderIconContainer() {
+export const QuoteIconContainer = (props: any) => {
-    const { attachment, i18n } = this.props;
+  const { attachment, i18n, imageBroken, handleImageErrorBound } = props;
-    const { imageBroken } = this.state;
 
   if (!attachment) {
     return null;
@@ -197,24 +178,33 @@ export class Quote extends React.Component<Props, State> {
   const objectUrl = getObjectUrl(thumbnail);
 
   if (GoogleChrome.isVideoTypeSupported(contentType)) {
-      return objectUrl && !imageBroken
+    return objectUrl && !imageBroken ? (
-        ? this.renderImage(objectUrl, i18n, 'play')
+      <QuoteImage url={objectUrl} i18n={i18n} icon={'play'} />
-        : this.renderIcon('movie');
+    ) : (
+      <QuoteIcon icon="movie" />
+    );
   }
   if (GoogleChrome.isImageTypeSupported(contentType)) {
-      return objectUrl && !imageBroken
+    return objectUrl && !imageBroken ? (
-        ? this.renderImage(objectUrl, i18n)
+      <QuoteImage
-        : this.renderIcon('image');
+        url={objectUrl}
+        i18n={i18n}
+        contentType={contentType}
+        handleImageErrorBound={handleImageErrorBound}
+      />
+    ) : (
+      <QuoteIcon icon="image" />
+    );
   }
   if (MIME.isAudio(contentType)) {
-      return this.renderIcon('microphone');
+    return <QuoteIcon icon="microphone" />;
   }
-
   return null;
-  }
+};
 
-  public renderText() {
+export const QuoteText = (props: any) => {
-    const { i18n, text, attachment, isIncoming, conversationType, convoId } = this.props;
+  const { i18n, text, attachment, isIncoming, conversationType, convoId } = props;
+  const isGroup = conversationType === ConversationTypeEnum.GROUP;
 
   if (text) {
     return (
@@ -226,7 +216,7 @@ export class Quote extends React.Component<Props, State> {
         )}
       >
         <MessageBody
-            isGroup={conversationType === 'group'}
+          isGroup={isGroup}
           convoId={convoId}
           text={text}
           disableLinks={true}
@@ -257,31 +247,9 @@ export class Quote extends React.Component<Props, State> {
   }
 
   return null;
-  }
+};
-
-  public renderClose() {
-    const { onClose } = this.props;
-
-    if (!onClose) {
-      return null;
-    }
 
-    // We don't want the overall click handler for the quote to fire, so we stop
+export const QuoteAuthor = (props: any) => {
-    //   propagation before handing control to the caller's callback.
-    const onClick = (e: any): void => {
-      e.stopPropagation();
-      onClose();
-    };
-
-    // We need the container to give us the flexibility to implement the iOS design.
-    return (
-      <div className="module-quote__close-container">
-        <div className="module-quote__close-button" role="button" onClick={onClick} />
-      </div>
-    );
-  }
-
-  public renderAuthor() {
   const {
     authorProfileName,
     authorPhoneNumber,
@@ -290,7 +258,7 @@ export class Quote extends React.Component<Props, State> {
     isFromMe,
     isIncoming,
     isPublic,
-    } = this.props;
+  } = props;
 
   return (
     <div
@@ -313,10 +281,10 @@ export class Quote extends React.Component<Props, State> {
       )}
     </div>
   );
-  }
+};
 
-  public renderReferenceWarning() {
+export const QuoteReferenceWarning = (props: any) => {
-    const { i18n, isIncoming, referencedMessageNotFound } = this.props;
+  const { i18n, isIncoming, referencedMessageNotFound } = props;
 
   if (!referencedMessageNotFound) {
     return null;
@@ -345,16 +313,27 @@ export class Quote extends React.Component<Props, State> {
       </div>
     </div>
   );
-  }
+};
 
-  public render() {
+export const Quote = (props: QuoteProps) => {
-    const { isIncoming, onClick, referencedMessageNotFound, withContentAbove } = this.props;
+  const [imageBroken, setImageBroken] = useState(false);
 
-    if (!validateQuote(this.props)) {
+  const handleImageErrorBound = null;
+
+  const handleImageError = () => {
+    // tslint:disable-next-line no-console
+    console.log('Message: Image failed to load; failing over to placeholder');
+    setImageBroken(true);
+  };
+
+  const { isIncoming, onClick, referencedMessageNotFound, withContentAbove } = props;
+
+  if (!validateQuote(props)) {
     return null;
   }
 
   return (
+    <>
       <div
         className={classNames(
           'module-quote-container',
@@ -373,15 +352,14 @@ export class Quote extends React.Component<Props, State> {
           )}
         >
           <div className="module-quote__primary">
-            {this.renderAuthor()}
+            <QuoteAuthor {...props} />
-            {this.renderGenericFile()}
+            <QuoteGenericFile {...props} />
-            {this.renderText()}
+            <QuoteText {...props} />
           </div>
-          {this.renderIconContainer()}
+          <QuoteIconContainer {...props} handleImageErrorBound={handleImageErrorBound} />
-          {this.renderClose()}
         </div>
-        {this.renderReferenceWarning()}
+        <QuoteReferenceWarning {...props} />
       </div>
+    </>
   );
-  }
+};
-}

ts/components/session/conversation/SessionQuotedMessageComposition.tsx

@@ -1,8 +1,10 @@
 import React, { useContext } from 'react';
 import { Flex } from '../../basic/Flex';
-import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
+import { SessionIcon, SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
 import { ReplyingToMessageProps } from './SessionCompositionBox';
 import styled, { DefaultTheme, ThemeContext } from 'styled-components';
+import { getAlt, isAudio, isImageAttachment } from '../../../types/Attachment';
+import { Image } from '../../conversation/Image';
 
 // tslint:disable: react-unused-props-and-state
 interface Props {
@@ -44,6 +46,18 @@ export const SessionQuotedMessageComposition = (props: Props) => {
 
   const { text: body, attachments } = quotedMessageProps;
   const hasAttachments = attachments && attachments.length > 0;
+
+  let hasImageAttachment = false;
+
+  let firstImageAttachment;
+  if (attachments && attachments.length > 0) {
+    firstImageAttachment = attachments[0];
+    hasImageAttachment = true;
+  }
+
+  const hasAudioAttachment =
+    hasAttachments && attachments && attachments.length > 0 && isAudio(attachments);
+
   return (
     <QuotedMessageComposition theme={theme}>
       <Flex
@@ -61,7 +75,32 @@ export const SessionQuotedMessageComposition = (props: Props) => {
         />
       </Flex>
       <QuotedMessageCompositionReply>
+        <Flex container={true} justifyContent="space-between" margin={theme.common.margins.xs}>
           <Subtle>{(hasAttachments && window.i18n('mediaMessage')) || body}</Subtle>
+
+          {hasImageAttachment && (
+            <Image
+              alt={getAlt(firstImageAttachment, window.i18n)}
+              i18n={window.i18n}
+              attachment={firstImageAttachment}
+              height={100}
+              width={100}
+              curveTopLeft={true}
+              curveTopRight={true}
+              curveBottomLeft={true}
+              curveBottomRight={true}
+              url={firstImageAttachment.thumbnail.objectUrl}
+            />
+          )}
+
+          {hasAudioAttachment && (
+            <SessionIcon
+              iconType={SessionIconType.Microphone}
+              iconSize={SessionIconSize.Huge}
+              theme={theme}
+            />
+          )}
+        </Flex>
       </QuotedMessageCompositionReply>
     </QuotedMessageComposition>
   );

ts/receiver/queuedJob.ts

@@ -79,7 +79,7 @@ async function handleGroups(
   return groupUpdate;
 }
 
-function contentTypeSupported(type: any): boolean {
+function contentTypeSupported(type: string): boolean {
   const Chrome = window.Signal.Util.GoogleChrome;
   return Chrome.isImageTypeSupported(type) || Chrome.isVideoTypeSupported(type);
 }
@@ -139,7 +139,7 @@ async function copyFromQuotedMessage(
     return;
   }
 
-  if (!firstAttachment || !contentTypeSupported(firstAttachment)) {
+  if (!firstAttachment || !contentTypeSupported(firstAttachment.contentType)) {
     return;
   }