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 {