Fix UI for GIFs in groups

This commit is contained in:
Fedor Indutny 2021-06-24 14:00:11 -07:00 committed by GitHub
parent a7799a74c1
commit 6c56d5a5f1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 137 additions and 76 deletions

View file

@ -720,43 +720,52 @@ story.add('Image', () => {
return renderBothDirections(props);
});
story.add('Multiple Images', () => {
const props = createProps({
attachments: [
{
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
},
{
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
},
{
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
},
{
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
},
],
status: 'sent',
});
for (let i = 2; i <= 5; i += 1) {
story.add(`Multiple Images x${i}`, () => {
const props = createProps({
attachments: [
{
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
},
{
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
},
{
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
},
{
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
},
{
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
},
].slice(0, i),
status: 'sent',
});
return renderBothDirections(props);
});
return renderBothDirections(props);
});
}
story.add('Image with Caption', () => {
const props = createProps({
@ -794,6 +803,25 @@ story.add('GIF', () => {
return renderBothDirections(props);
});
story.add('GIF in a group', () => {
const props = createProps({
attachments: [
{
contentType: VIDEO_MP4,
flags: SignalService.AttachmentPointer.Flags.GIF,
fileName: 'cat-gif.mp4',
url: '/fixtures/cat-gif.mp4',
width: 400,
height: 332,
},
],
conversationType: 'group',
status: 'sent',
});
return renderBothDirections(props);
});
story.add('Not Downloaded GIF', () => {
const props = createProps({
attachments: [