Allow stage and send of video, even if we can't get screenshot

ts/components/conversation/AttachmentList.stories.tsx

@@ -18,7 +18,7 @@ import {
 import { setupI18n } from '../../util/setupI18n';
 import enMessages from '../../../_locales/en/messages.json';
 
-import { fakeAttachment } from '../../test-both/helpers/fakeAttachment';
+import { fakeDraftAttachment } from '../../test-both/helpers/fakeAttachment';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -36,7 +36,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
 story.add('One File', () => {
   const props = createProps({
     attachments: [
-      fakeAttachment({
+      fakeDraftAttachment({
         contentType: IMAGE_JPEG,
         fileName: 'tina-rolf-269345-unsplash.jpg',
         url: '/fixtures/tina-rolf-269345-unsplash.jpg',
@@ -49,24 +49,18 @@ story.add('One File', () => {
 story.add('Multiple Visual Attachments', () => {
   const props = createProps({
     attachments: [
-      fakeAttachment({
+      fakeDraftAttachment({
         contentType: IMAGE_JPEG,
         fileName: 'tina-rolf-269345-unsplash.jpg',
         url: '/fixtures/tina-rolf-269345-unsplash.jpg',
       }),
-      fakeAttachment({
+      fakeDraftAttachment({
         contentType: VIDEO_MP4,
         fileName: 'pixabay-Soap-Bubble-7141.mp4',
-        url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
-        screenshot: {
-          height: 112,
-          width: 112,
-          url: '/fixtures/kitten-4-112-112.jpg',
-          contentType: IMAGE_JPEG,
-          path: 'originalpath',
-        },
+        url: '/fixtures/kitten-4-112-112.jpg',
+        screenshotPath: '/fixtures/kitten-4-112-112.jpg',
       }),
-      fakeAttachment({
+      fakeDraftAttachment({
         contentType: IMAGE_GIF,
         fileName: 'giphy-GVNv0UpeYm17e',
         url: '/fixtures/giphy-GVNvOUpeYmI7e.gif',
@@ -80,34 +74,28 @@ story.add('Multiple Visual Attachments', () => {
 story.add('Multiple with Non-Visual Types', () => {
   const props = createProps({
     attachments: [
-      fakeAttachment({
+      fakeDraftAttachment({
         contentType: IMAGE_JPEG,
         fileName: 'tina-rolf-269345-unsplash.jpg',
         url: '/fixtures/tina-rolf-269345-unsplash.jpg',
       }),
-      fakeAttachment({
+      fakeDraftAttachment({
         contentType: stringToMIMEType('text/plain'),
         fileName: 'lorem-ipsum.txt',
         url: '/fixtures/lorem-ipsum.txt',
       }),
-      fakeAttachment({
+      fakeDraftAttachment({
         contentType: AUDIO_MP3,
         fileName: 'incompetech-com-Agnus-Dei-X.mp3',
         url: '/fixtures/incompetech-com-Agnus-Dei-X.mp3',
       }),
-      fakeAttachment({
+      fakeDraftAttachment({
         contentType: VIDEO_MP4,
         fileName: 'pixabay-Soap-Bubble-7141.mp4',
-        url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
-        screenshot: {
-          height: 112,
-          width: 112,
-          url: '/fixtures/kitten-4-112-112.jpg',
-          contentType: IMAGE_JPEG,
-          path: 'originalpath',
-        },
+        url: '/fixtures/kitten-4-112-112.jpg',
+        screenshotPath: '/fixtures/kitten-4-112-112.jpg',
       }),
-      fakeAttachment({
+      fakeDraftAttachment({
         contentType: IMAGE_GIF,
         fileName: 'giphy-GVNv0UpeYm17e',
         url: '/fixtures/giphy-GVNvOUpeYmI7e.gif',

ts/components/conversation/AttachmentList.tsx

@@ -7,21 +7,20 @@ import { Image } from './Image';
 import { StagedGenericAttachment } from './StagedGenericAttachment';
 import { StagedPlaceholderAttachment } from './StagedPlaceholderAttachment';
 import type { LocalizerType } from '../../types/Util';
-import type { AttachmentType } from '../../types/Attachment';
+import type { AttachmentDraftType } from '../../types/Attachment';
 import {
   areAllAttachmentsVisual,
-  getUrl,
   isImageAttachment,
   isVideoAttachment,
 } from '../../types/Attachment';
 
 export type Props = Readonly<{
-  attachments: ReadonlyArray<AttachmentType>;
+  attachments: ReadonlyArray<AttachmentDraftType>;
   i18n: LocalizerType;
   onAddAttachment?: () => void;
-  onClickAttachment?: (attachment: AttachmentType) => void;
+  onClickAttachment?: (attachment: AttachmentDraftType) => void;
   onClose?: () => void;
-  onCloseAttachment: (attachment: AttachmentType) => void;
+  onCloseAttachment: (attachment: AttachmentDraftType) => void;
 }>;
 
 const IMAGE_WIDTH = 120;
@@ -31,6 +30,14 @@ const IMAGE_HEIGHT = 120;
 const BLANK_VIDEO_THUMBNAIL =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQAAAAA3bvkkAAAACklEQVR42mNiAAAABgADm78GJQAAAABJRU5ErkJggg==';
 
+function getUrl(attachment: AttachmentDraftType): string | undefined {
+  if (attachment.pending) {
+    return undefined;
+  }
+
+  return attachment.url;
+}
+
 export const AttachmentList = ({
   attachments,
   i18n,
@@ -65,11 +72,17 @@ export const AttachmentList = ({
 
           const isImage = isImageAttachment(attachment);
           const isVideo = isVideoAttachment(attachment);
+          const closeAttachment = () => onCloseAttachment(attachment);
 
           if (isImage || isVideo || attachment.pending) {
+            const isDownloaded = !attachment.pending;
             const imageUrl =
               url || (isVideo ? BLANK_VIDEO_THUMBNAIL : undefined);
 
+            const clickAttachment = onClickAttachment
+              ? () => onClickAttachment(attachment)
+              : undefined;
+
             return (
               <Image
                 key={key}
@@ -79,17 +92,16 @@ export const AttachmentList = ({
                 className="module-staged-attachment"
                 i18n={i18n}
                 attachment={attachment}
+                isDownloaded={isDownloaded}
                 softCorners
                 playIconOverlay={isVideo}
                 height={IMAGE_HEIGHT}
                 width={IMAGE_WIDTH}
                 url={imageUrl}
                 closeButton
-                onClick={onClickAttachment}
-                onClickClose={onCloseAttachment}
-                onError={() => {
-                  onCloseAttachment(attachment);
-                }}
+                onClick={clickAttachment}
+                onClickClose={closeAttachment}
+                onError={closeAttachment}
               />
             );
           }
@@ -99,7 +111,7 @@ export const AttachmentList = ({
               key={key}
               attachment={attachment}
               i18n={i18n}
-              onClose={onCloseAttachment}
+              onClose={closeAttachment}
             />
           );
         })}

ts/components/conversation/AudioCapture.tsx

@@ -5,7 +5,10 @@ import React, { useCallback, useEffect, useState } from 'react';
 import * as moment from 'moment';
 import { noop } from 'lodash';
 
-import type { AttachmentType } from '../../types/Attachment';
+import type {
+  AttachmentDraftType,
+  InMemoryAttachmentDraftType,
+} from '../../types/Attachment';
 import { ConfirmationDialog } from '../ConfirmationDialog';
 import type { LocalizerType } from '../../types/Util';
 import {
@@ -20,7 +23,7 @@ import {
   useKeyboardShortcuts,
 } from '../../hooks/useKeyboardShortcuts';
 
-type OnSendAudioRecordingType = (rec: AttachmentType) => unknown;
+type OnSendAudioRecordingType = (rec: InMemoryAttachmentDraftType) => unknown;
 
 export type PropsType = {
   cancelRecording: () => unknown;
@@ -29,7 +32,7 @@ export type PropsType = {
     conversationId: string,
     onSendAudioRecording?: OnSendAudioRecordingType
   ) => unknown;
-  draftAttachments: ReadonlyArray<AttachmentType>;
+  draftAttachments: ReadonlyArray<AttachmentDraftType>;
   errorDialogAudioRecorderType?: ErrorDialogAudioRecorderType;
   errorRecording: (e: ErrorDialogAudioRecorderType) => unknown;
   i18n: LocalizerType;

ts/components/conversation/Image.tsx

@@ -15,6 +15,7 @@ export type Props = {
   attachment: AttachmentType;
   url?: string;
 
+  isDownloaded?: boolean;
   className?: string;
   height?: number;
   width?: number;
@@ -145,6 +146,7 @@ export class Image extends React.Component<Props> {
       curveTopLeft,
       curveTopRight,
       darkOverlay,
+      isDownloaded,
       height = 0,
       i18n,
       noBackground,
@@ -165,7 +167,9 @@ export class Image extends React.Component<Props> {
 
     const { caption, pending } = attachment || { caption: null, pending: true };
     const canClick = this.canClick();
-    const imgNotDownloaded = hasNotDownloaded(attachment);
+    const imgNotDownloaded = isDownloaded
+      ? false
+      : hasNotDownloaded(attachment);
 
     const resolvedBlurHash = blurHash || defaultBlurHash(theme);