diff --git a/ts/components/conversation/ImageGrid.md b/ts/components/conversation/ImageGrid.md index adc1aeeea..f56286527 100644 --- a/ts/components/conversation/ImageGrid.md +++ b/ts/components/conversation/ImageGrid.md @@ -352,3 +352,35 @@ const attachments = [ ; ``` + +### Mixing attachment types + +``` +const attachments = [ + { + url: util.pngObjectUrl, + contentType: 'image/png', + width: 320, + height: 240, + }, + { + contentType: 'text/plain', + }, + { + url: util.pngObjectUrl, + contentType: 'image/png', + width: 320, + height: 240, + }, +]; + +
+
+ +
+
+
+ +
+
; +``` diff --git a/ts/components/conversation/ImageGrid.tsx b/ts/components/conversation/ImageGrid.tsx index c0744cdb8..2a2b36be5 100644 --- a/ts/components/conversation/ImageGrid.tsx +++ b/ts/components/conversation/ImageGrid.tsx @@ -50,7 +50,7 @@ export class ImageGrid extends React.Component { return null; } - if (attachments.length === 1) { + if (attachments.length === 1 || !areAllAttachmentsVisual(attachments)) { const { height, width } = getImageDimensions(attachments[0]); return ( @@ -324,6 +324,13 @@ export function isImage(attachments?: Array) { ); } +export function isImageAttachment(attachment: AttachmentType) { + return ( + attachment && + attachment.contentType && + isImageTypeSupported(attachment.contentType) + ); +} export function hasImage(attachments?: Array) { return attachments && attachments[0] && attachments[0].url; } @@ -374,6 +381,22 @@ function getImageDimensions(attachment: AttachmentType): DimensionsType { }; } +function areAllAttachmentsVisual(attachments?: Array): boolean { + if (!attachments) { + return false; + } + + const max = attachments.length; + for (let i = 0; i < max; i += 1) { + const attachment = attachments[i]; + if (!isImageAttachment(attachment) || !isVideoAttachment(attachment)) { + return false; + } + } + + return true; +} + export function getGridDimensions( attachments?: Array ): null | DimensionsType {