diff --git a/ts/components/conversation/AttachmentList.tsx b/ts/components/conversation/AttachmentList.tsx index c2eaf4bee..524ee5263 100644 --- a/ts/components/conversation/AttachmentList.tsx +++ b/ts/components/conversation/AttachmentList.tsx @@ -1,12 +1,8 @@ -// Copyright 2018-2020 Signal Messenger, LLC +// Copyright 2018-2021 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only import React from 'react'; -import { - isImageTypeSupported, - isVideoTypeSupported, -} from '../../util/GoogleChrome'; import { Image } from './Image'; import { StagedGenericAttachment } from './StagedGenericAttachment'; import { StagedPlaceholderAttachment } from './StagedPlaceholderAttachment'; @@ -15,6 +11,7 @@ import { areAllAttachmentsVisual, AttachmentType, getUrl, + isImageAttachment, isVideoAttachment, } from '../../types/Attachment'; @@ -30,6 +27,10 @@ export interface Props { const IMAGE_WIDTH = 120; const IMAGE_HEIGHT = 120; +// This is a 1x1 black square. +const BLANK_VIDEO_THUMBNAIL = + 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQAAAAA3bvkkAAAACklEQVR42mNiAAAABgADm78GJQAAAABJRU5ErkJggg=='; + export const AttachmentList = ({ attachments, i18n, @@ -58,28 +59,33 @@ export const AttachmentList = ({ ) : null}
{(attachments || []).map((attachment, index) => { - const { contentType } = attachment; - if ( - isImageTypeSupported(contentType) || - isVideoTypeSupported(contentType) - ) { - const imageKey = getUrl(attachment) || attachment.fileName || index; + const url = getUrl(attachment); + + const key = url || attachment.fileName || index; + + const isImage = isImageAttachment(attachment); + const isVideo = isVideoAttachment(attachment); + + if (isImage || isVideo) { const clickCallback = attachments.length > 1 ? onClickAttachment : undefined; + const imageUrl = + isVideo && !attachment.screenshot ? BLANK_VIDEO_THUMBNAIL : url; + return (