Do not download media if in call

ts/components/conversation/Image.stories.tsx

@@ -121,6 +121,20 @@ story.add('Pending', () => {
   return <Image {...props} />;
 });
 
+story.add('Pending w/blurhash', () => {
+  const props = createProps();
+  props.attachment.pending = true;
+
+  return (
+    <Image
+      {...props}
+      blurHash="LDA,FDBnm+I=p{tkIUI;~UkpELV]"
+      width={300}
+      height={400}
+    />
+  );
+});
+
 story.add('Curved Corners', () => {
   const props = createProps({
     curveBottomLeft: true,
@@ -176,6 +190,7 @@ story.add('Blurhash', () => {
 
   return <Image {...props} />;
 });
+
 story.add('Missing Image', () => {
   const defaultProps = createProps();
   const props = {

ts/components/conversation/Image.tsx

@@ -7,7 +7,7 @@ import { Blurhash } from 'react-blurhash';
 
 import { Spinner } from '../Spinner';
 import { LocalizerType } from '../../types/Util';
-import { AttachmentType } from '../../types/Attachment';
+import { AttachmentType, hasNotDownloaded } from '../../types/Attachment';
 
 export type Props = {
   alt: string;
@@ -44,10 +44,10 @@ export type Props = {
 
 export class Image extends React.Component<Props> {
   private canClick() {
-    const { onClick, attachment, url } = this.props;
+    const { onClick, attachment, blurHash, url } = this.props;
     const { pending } = attachment || { pending: true };
 
-    return Boolean(onClick && !pending && url);
+    return Boolean(onClick && !pending && (url || blurHash));
   }
 
   public handleClick = (event: React.MouseEvent): void => {
@@ -87,6 +87,46 @@ export class Image extends React.Component<Props> {
     }
   };
 
+  public renderPending = (): JSX.Element => {
+    const { blurHash, height, i18n, width } = this.props;
+
+    if (blurHash) {
+      return (
+        <div className="module-image__download-pending">
+          <Blurhash
+            hash={blurHash}
+            width={width}
+            height={height}
+            style={{ display: 'block' }}
+          />
+          <div className="module-image__download-pending--spinner-container">
+            <div
+              className="module-image__download-pending--spinner"
+              title={i18n('loading')}
+            >
+              <Spinner moduleClassName="module-image-spinner" svgSize="small" />
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div
+        className="module-image__loading-placeholder"
+        style={{
+          height: `${height}px`,
+          width: `${width}px`,
+          lineHeight: `${height}px`,
+          textAlign: 'center',
+        }}
+        title={i18n('loading')}
+      >
+        <Spinner svgSize="normal" />
+      </div>
+    );
+  };
+
   public render(): JSX.Element {
     const {
       alt,
@@ -116,19 +156,20 @@ export class Image extends React.Component<Props> {
 
     const { caption, pending } = attachment || { caption: null, pending: true };
     const canClick = this.canClick();
+    const imgNotDownloaded = hasNotDownloaded(attachment);
 
-    const overlayClassName = classNames(
-      'module-image__border-overlay',
-      noBorder ? null : 'module-image__border-overlay--with-border',
-      canClick ? 'module-image__border-overlay--with-click-handler' : null,
-      curveTopLeft ? 'module-image--curved-top-left' : null,
-      curveTopRight ? 'module-image--curved-top-right' : null,
-      curveBottomLeft ? 'module-image--curved-bottom-left' : null,
-      curveBottomRight ? 'module-image--curved-bottom-right' : null,
-      smallCurveTopLeft ? 'module-image--small-curved-top-left' : null,
-      softCorners ? 'module-image--soft-corners' : null,
-      darkOverlay ? 'module-image__border-overlay--dark' : null
-    );
+    const overlayClassName = classNames('module-image__border-overlay', {
+      'module-image__border-overlay--with-border': !noBorder,
+      'module-image__border-overlay--with-click-handler': canClick,
+      'module-image--curved-top-left': curveTopLeft,
+      'module-image--curved-top-right': curveTopRight,
+      'module-image--curved-bottom-left': curveBottomLeft,
+      'module-image--curved-bottom-right': curveBottomRight,
+      'module-image--small-curved-top-left': smallCurveTopLeft,
+      'module-image--soft-corners': softCorners,
+      'module-image__border-overlay--dark': darkOverlay,
+      'module-image--not-downloaded': imgNotDownloaded,
+    });
 
     const overlay = canClick ? (
       // Not sure what this button does.
@@ -139,7 +180,9 @@ export class Image extends React.Component<Props> {
         onClick={this.handleClick}
         onKeyDown={this.handleKeyDown}
         tabIndex={tabIndex}
-      />
+      >
+        {imgNotDownloaded ? <i /> : null}
+      </button>
     ) : null;
 
     /* eslint-disable no-nested-ternary */
@@ -157,18 +200,7 @@ export class Image extends React.Component<Props> {
         )}
       >
         {pending ? (
-          <div
-            className="module-image__loading-placeholder"
-            style={{
-              height: `${height}px`,
-              width: `${width}px`,
-              lineHeight: `${height}px`,
-              textAlign: 'center',
-            }}
-            title={i18n('loading')}
-          >
-            <Spinner svgSize="normal" />
-          </div>
+          this.renderPending()
         ) : url ? (
           <img
             onError={onError}

ts/components/conversation/Message.stories.tsx

@@ -75,6 +75,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   isTapToView: overrideProps.isTapToView,
   isTapToViewError: overrideProps.isTapToViewError,
   isTapToViewExpired: overrideProps.isTapToViewExpired,
+  kickOffAttachmentDownload: action('kickOffAttachmentDownload'),
   openConversation: action('openConversation'),
   openLink: action('openLink'),
   previews: overrideProps.previews || [],

ts/components/conversation/Message.tsx

@@ -35,6 +35,8 @@ import {
   getGridDimensions,
   getImageDimensions,
   hasImage,
+  hasNotDownloaded,
+  hasVideoBlurHash,
   hasVideoScreenshot,
   isAudio,
   isImage,
@@ -162,6 +164,10 @@ export type PropsActions = {
   }) => void;
   showContactModal: (contactId: string) => void;
 
+  kickOffAttachmentDownload: (options: {
+    attachment: AttachmentType;
+    messageId: string;
+  }) => void;
   showVisualAttachment: (options: {
     attachment: AttachmentType;
     messageId: string;
@@ -657,6 +663,7 @@ export class Message extends React.PureComponent<Props, State> {
       direction,
       i18n,
       id,
+      kickOffAttachmentDownload,
       quote,
       showVisualAttachment,
       isSticker,
@@ -680,7 +687,8 @@ export class Message extends React.PureComponent<Props, State> {
       displayImage &&
       !imageBroken &&
       ((isImage(attachments) && hasImage(attachments)) ||
-        (isVideo(attachments) && hasVideoScreenshot(attachments)))
+        (isVideo(attachments) &&
+          (hasVideoBlurHash(attachments) || hasVideoScreenshot(attachments))))
     ) {
       const prefix = isSticker ? 'sticker' : 'attachment';
       const bottomOverlay = !isSticker && !collapseMetadata;
@@ -713,7 +721,11 @@ export class Message extends React.PureComponent<Props, State> {
             onError={this.handleImageError}
             tabIndex={tabIndex}
             onClick={attachment => {
-              showVisualAttachment({ attachment, messageId: id });
+              if (hasNotDownloaded(attachment)) {
+                kickOffAttachmentDownload({ attachment, messageId: id });
+              } else {
+                showVisualAttachment({ attachment, messageId: id });
+              }
             }}
           />
         </div>
@@ -1517,7 +1529,8 @@ export class Message extends React.PureComponent<Props, State> {
       return (
         displayImage &&
         ((isImage(attachments) && hasImage(attachments)) ||
-          (isVideo(attachments) && hasVideoScreenshot(attachments)))
+          (isVideo(attachments) &&
+            (hasVideoBlurHash(attachments) || hasVideoScreenshot(attachments))))
       );
     }
 
@@ -1922,6 +1935,7 @@ export class Message extends React.PureComponent<Props, State> {
       id,
       isTapToView,
       isTapToViewExpired,
+      kickOffAttachmentDownload,
       openConversation,
       showContactDetail,
       showVisualAttachment,
@@ -1953,6 +1967,24 @@ export class Message extends React.PureComponent<Props, State> {
       return;
     }
 
+    if (
+      !imageBroken &&
+      attachments &&
+      attachments.length > 0 &&
+      !isAttachmentPending &&
+      (isImage(attachments) || isVideo(attachments)) &&
+      hasNotDownloaded(attachments[0])
+    ) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      const attachment = attachments[0];
+
+      kickOffAttachmentDownload({ attachment, messageId: id });
+
+      return;
+    }
+
     if (
       !imageBroken &&
       attachments &&
@@ -1960,7 +1992,8 @@ export class Message extends React.PureComponent<Props, State> {
       !isAttachmentPending &&
       canDisplayImage(attachments) &&
       ((isImage(attachments) && hasImage(attachments)) ||
-        (isVideo(attachments) && hasVideoScreenshot(attachments)))
+        (isVideo(attachments) &&
+          (hasVideoBlurHash(attachments) || hasVideoScreenshot(attachments))))
     ) {
       event.preventDefault();
       event.stopPropagation();

ts/components/conversation/MessageDetail.stories.tsx

@@ -33,6 +33,7 @@ const defaultMessage: MessageProps = {
   i18n,
   id: 'my-message',
   interactionMode: 'keyboard',
+  kickOffAttachmentDownload: action('kickOffAttachmentDownload'),
   openConversation: () => null,
   openLink: () => null,
   previews: [],

ts/components/conversation/Quote.stories.tsx

@@ -36,6 +36,7 @@ const defaultMessageProps: MessagesProps = {
   i18n,
   id: 'messageId',
   interactionMode: 'keyboard',
+  kickOffAttachmentDownload: () => null,
   openConversation: () => null,
   openLink: () => null,
   previews: [],

ts/components/conversation/Timeline.stories.tsx

@@ -231,6 +231,7 @@ const actions = () => ({
   openConversation: action('openConversation'),
   showContactDetail: action('showContactDetail'),
   showContactModal: action('showContactModal'),
+  kickOffAttachmentDownload: action('kickOffAttachmentDownload'),
   showVisualAttachment: action('showVisualAttachment'),
   downloadAttachment: action('downloadAttachment'),
   displayTapToViewMessage: action('displayTapToViewMessage'),

ts/components/conversation/TimelineItem.stories.tsx

@@ -45,6 +45,7 @@ const getDefaultProps = () => ({
   retrySend: action('retrySend'),
   deleteMessage: action('deleteMessage'),
   deleteMessageForEveryone: action('deleteMessageForEveryone'),
+  kickOffAttachmentDownload: action('kickOffAttachmentDownload'),
   showMessageDetail: action('showMessageDetail'),
   openConversation: action('openConversation'),
   showContactDetail: action('showContactDetail'),