Fix video forwarding

ts/components/ForwardMessageModal.stories.tsx

@@ -8,7 +8,7 @@ import { action } from '@storybook/addon-actions';
 import { text } from '@storybook/addon-knobs';
 
 import enMessages from '../../_locales/en/messages.json';
-import type { AttachmentDraftType } from '../types/Attachment';
+import type { AttachmentType } from '../types/Attachment';
 import type { PropsType } from './ForwardMessageModal';
 import { ForwardMessageModal } from './ForwardMessageModal';
 import { IMAGE_JPEG, VIDEO_MP4, stringToMIMEType } from '../types/MIME';
@@ -16,9 +16,9 @@ import { getDefaultConversation } from '../test-both/helpers/getDefaultConversat
 import { setupI18n } from '../util/setupI18n';
 import { StorybookThemeContext } from '../../.storybook/StorybookThemeContext';
 
-const createDraftAttachment = (
-  props: Partial<AttachmentDraftType> = {}
-): AttachmentDraftType => ({
+const createAttachment = (
+  props: Partial<AttachmentType> = {}
+): AttachmentType => ({
   pending: false,
   path: 'fileName.jpg',
   contentType: stringToMIMEType(
@@ -83,7 +83,7 @@ story.add('link preview', () => {
           date: Date.now(),
           domain: 'https://www.signal.org',
           url: 'signal.org',
-          image: createDraftAttachment({
+          image: createAttachment({
             url: '/fixtures/kitten-4-112-112.jpg',
             contentType: IMAGE_JPEG,
           }),
@@ -101,15 +101,15 @@ story.add('media attachments', () => {
     <ForwardMessageModal
       {...useProps({
         attachments: [
-          createDraftAttachment({
+          createAttachment({
             pending: true,
           }),
-          createDraftAttachment({
+          createAttachment({
             contentType: IMAGE_JPEG,
             fileName: 'tina-rolf-269345-unsplash.jpg',
             url: '/fixtures/tina-rolf-269345-unsplash.jpg',
           }),
-          createDraftAttachment({
+          createAttachment({
             contentType: VIDEO_MP4,
             fileName: 'pixabay-Soap-Bubble-7141.mp4',
             url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',

ts/components/ForwardMessageModal.tsx

@@ -16,7 +16,7 @@ import { animated } from '@react-spring/web';
 
 import classNames from 'classnames';
 import { AttachmentList } from './conversation/AttachmentList';
-import type { AttachmentDraftType } from '../types/Attachment';
+import type { AttachmentType } from '../types/Attachment';
 import { Button } from './Button';
 import type { InputApi } from './CompositionInput';
 import { CompositionInput } from './CompositionInput';
@@ -39,12 +39,12 @@ import { filterAndSortConversationsByRecent } from '../util/filterAndSortConvers
 import { useAnimated } from '../hooks/useAnimated';
 
 export type DataPropsType = {
-  attachments?: Array<AttachmentDraftType>;
+  attachments?: Array<AttachmentType>;
   candidateConversations: ReadonlyArray<ConversationType>;
   doForwardMessage: (
     selectedContacts: Array<string>,
     messageBody?: string,
-    attachments?: Array<AttachmentDraftType>,
+    attachments?: Array<AttachmentType>,
     linkPreview?: LinkPreviewType
   ) => void;
   getPreferredBadge: PreferredBadgeSelectorType;
@@ -102,7 +102,7 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
     filterAndSortConversationsByRecent(candidateConversations, '')
   );
   const [attachmentsToForward, setAttachmentsToForward] = useState<
-    Array<AttachmentDraftType>
+    Array<AttachmentType>
   >(attachments || []);
   const [isEditingMessage, setIsEditingMessage] = useState(false);
   const [messageBodyText, setMessageBodyText] = useState(messageBody || '');
@@ -325,7 +325,7 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
                 <AttachmentList
                   attachments={attachmentsToForward}
                   i18n={i18n}
-                  onCloseAttachment={(attachment: AttachmentDraftType) => {
+                  onCloseAttachment={(attachment: AttachmentType) => {
                     const newAttachments = attachmentsToForward.filter(
                       currentAttachment => currentAttachment !== attachment
                     );

ts/components/conversation/AttachmentList.stories.tsx

@@ -6,6 +6,7 @@ import * as React from 'react';
 import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
 
+import type { AttachmentDraftType } from '../../types/Attachment';
 import type { Props } from './AttachmentList';
 import { AttachmentList } from './AttachmentList';
 import {
@@ -24,7 +25,9 @@ const i18n = setupI18n('en', enMessages);
 
 const story = storiesOf('Components/Conversation/AttachmentList', module);
 
-const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+const createProps = (
+  overrideProps: Partial<Props<AttachmentDraftType>> = {}
+): Props<AttachmentDraftType> => ({
   attachments: overrideProps.attachments || [],
   i18n,
   onAddAttachment: action('onAddAttachment'),

ts/components/conversation/AttachmentList.tsx

@@ -7,7 +7,10 @@ import { Image } from './Image';
 import { StagedGenericAttachment } from './StagedGenericAttachment';
 import { StagedPlaceholderAttachment } from './StagedPlaceholderAttachment';
 import type { LocalizerType } from '../../types/Util';
-import type { AttachmentDraftType } from '../../types/Attachment';
+import type {
+  AttachmentType,
+  AttachmentDraftType,
+} from '../../types/Attachment';
 import {
   areAllAttachmentsVisual,
   canDisplayImage,
@@ -15,14 +18,14 @@ import {
   isVideoAttachment,
 } from '../../types/Attachment';
 
-export type Props = Readonly<{
-  attachments: ReadonlyArray<AttachmentDraftType>;
+export type Props<T extends AttachmentType | AttachmentDraftType> = Readonly<{
+  attachments: ReadonlyArray<T>;
   canEditImages?: boolean;
   i18n: LocalizerType;
   onAddAttachment?: () => void;
-  onClickAttachment?: (attachment: AttachmentDraftType) => void;
+  onClickAttachment?: (attachment: T) => void;
   onClose?: () => void;
-  onCloseAttachment: (attachment: AttachmentDraftType) => void;
+  onCloseAttachment: (attachment: T) => void;
 }>;
 
 const IMAGE_WIDTH = 120;
@@ -32,15 +35,21 @@ const IMAGE_HEIGHT = 120;
 const BLANK_VIDEO_THUMBNAIL =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQAAAAA3bvkkAAAACklEQVR42mNiAAAABgADm78GJQAAAABJRU5ErkJggg==';
 
-function getUrl(attachment: AttachmentDraftType): string | undefined {
+function getUrl(
+  attachment: AttachmentType | AttachmentDraftType
+): string | undefined {
   if (attachment.pending) {
     return undefined;
   }
 
+  if ('screenshot' in attachment) {
+    return attachment.screenshot?.url || attachment.url;
+  }
+
   return attachment.url;
 }
 
-export const AttachmentList = ({
+export const AttachmentList = <T extends AttachmentType | AttachmentDraftType>({
   attachments,
   canEditImages,
   i18n,
@@ -48,7 +57,7 @@ export const AttachmentList = ({
   onClickAttachment,
   onCloseAttachment,
   onClose,
-}: Props): JSX.Element | null => {
+}: Props<T>): JSX.Element | null => {
   if (!attachments.length) {
     return null;
   }