diff --git a/package/src/components/Attachment/__tests__/buildGallery.test.ts b/package/src/components/Attachment/__tests__/buildGallery.test.ts index 3e81ea8bda..6506324333 100644 --- a/package/src/components/Attachment/__tests__/buildGallery.test.ts +++ b/package/src/components/Attachment/__tests__/buildGallery.test.ts @@ -1,6 +1,9 @@ import type { Attachment } from 'stream-chat'; -import { generateImageAttachment } from '../../../mock-builders/generator/attachment'; +import { + generateImageAttachment, + generateVideoAttachment, +} from '../../../mock-builders/generator/attachment'; import { buildGallery } from '../utils/buildGallery/buildGallery'; describe('buildGallery', () => { @@ -126,4 +129,35 @@ describe('buildGallery', () => { expect(t2.url.includes('&w=*')).toBe(true); expect(t2.url.includes('&resize=*')).toBe(true); }); + + it('resizes the thumb_url of a video attachment', () => { + const video = generateVideoAttachment({ + image_url: + 'https://us-east.stream-io-cdn.com/23kn4k2j3n4k2n3k4n23?sig=34k23n4k23nk423&oh=2532&ow=1170&s=v', + thumb_url: + 'https://us-east.stream-io-cdn.com/23kn4k2j3n4k2n3k4n23?sig=34k23n4k23nk423&oh=2532&ow=1170&s=v', + }); + + const { thumbnailGrid } = buildGallery({ + images: [video], + sizeConfig: defaultSizeConfig, + }); + + const thumbnail = thumbnailGrid[0][0]; + expect(thumbnail.thumb_url?.includes('&h=')).toBe(true); + expect(thumbnail.thumb_url?.includes('&w=')).toBe(true); + expect(thumbnail.thumb_url?.includes('&resize=clip')).toBe(true); + }); + + it('leaves a non-resizable thumb_url untouched', () => { + const thumbUrl = 'https://not-a-stream-cdn.example.com/thumb.jpg'; + const video = generateVideoAttachment({ thumb_url: thumbUrl }); + + const { thumbnailGrid } = buildGallery({ + images: [video], + sizeConfig: defaultSizeConfig, + }); + + expect(thumbnailGrid[0][0].thumb_url).toBe(thumbUrl); + }); }); diff --git a/package/src/components/Attachment/utils/buildGallery/buildThumbnail.ts b/package/src/components/Attachment/utils/buildGallery/buildThumbnail.ts index c69b682808..aa05e0e90c 100644 --- a/package/src/components/Attachment/utils/buildGallery/buildThumbnail.ts +++ b/package/src/components/Attachment/utils/buildGallery/buildThumbnail.ts @@ -42,7 +42,15 @@ export function buildThumbnail({ resizeMode: resizeMode ? resizeMode : ((image.original_height && image.original_width ? 'contain' : 'cover') as ImageResizeMode), - thumb_url: image.thumb_url, + thumb_url: + image.thumb_url && shouldResize + ? getResizedImageUrl({ + height, + resizableCDNHosts, + url: image.thumb_url, + width, + }) + : image.thumb_url, type: image.type, url: shouldResize ? getResizedImageUrl({