Show just first image if we receive mixed multi-attachment msg
This commit is contained in:
parent
52d3138958
commit
ba711d8985
2 changed files with 56 additions and 1 deletions
|
@ -352,3 +352,35 @@ const attachments = [
|
||||||
</div>
|
</div>
|
||||||
</div>;
|
</div>;
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 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,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<ImageGrid attachments={attachments} i18n={util.i18n} />
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div>
|
||||||
|
<ImageGrid withContentAbove withContentBelow attachments={attachments} i18n={util.i18n} />
|
||||||
|
</div>
|
||||||
|
</div>;
|
||||||
|
```
|
||||||
|
|
|
@ -50,7 +50,7 @@ export class ImageGrid extends React.Component<Props> {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (attachments.length === 1) {
|
if (attachments.length === 1 || !areAllAttachmentsVisual(attachments)) {
|
||||||
const { height, width } = getImageDimensions(attachments[0]);
|
const { height, width } = getImageDimensions(attachments[0]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -324,6 +324,13 @@ export function isImage(attachments?: Array<AttachmentType>) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function isImageAttachment(attachment: AttachmentType) {
|
||||||
|
return (
|
||||||
|
attachment &&
|
||||||
|
attachment.contentType &&
|
||||||
|
isImageTypeSupported(attachment.contentType)
|
||||||
|
);
|
||||||
|
}
|
||||||
export function hasImage(attachments?: Array<AttachmentType>) {
|
export function hasImage(attachments?: Array<AttachmentType>) {
|
||||||
return attachments && attachments[0] && attachments[0].url;
|
return attachments && attachments[0] && attachments[0].url;
|
||||||
}
|
}
|
||||||
|
@ -374,6 +381,22 @@ function getImageDimensions(attachment: AttachmentType): DimensionsType {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function areAllAttachmentsVisual(attachments?: Array<AttachmentType>): 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(
|
export function getGridDimensions(
|
||||||
attachments?: Array<AttachmentType>
|
attachments?: Array<AttachmentType>
|
||||||
): null | DimensionsType {
|
): null | DimensionsType {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue