feat: Resize video thumb_url #347

Author: szuperaz

projects/stream-chat-angular/src/lib/attachment-configuration.service.spec.ts

@@ -11,38 +11,38 @@ describe('AttachmentConfigurationService', () => {
 
   it('should provide the correct configuration for image attachments', () => {
     let attachment: Attachment = {
-      img_url: 'url/to/img',
+      img_url: 'http://url/to/img',
       thumb_url: 'different/url',
     };
 
     expect(
       service.getImageAttachmentConfiguration(attachment, 'single')
     ).toEqual({
-      url: 'url/to/img&h=600&w=600',
+      url: 'http://url/to/img?h=600&w=600',
       height: '300px',
       width: '',
     });
 
     attachment = {
-      thumb_url: 'url/to/img',
+      thumb_url: 'http://url/to/img',
     };
 
     expect(
       service.getImageAttachmentConfiguration(attachment, 'single')
     ).toEqual({
-      url: 'url/to/img&h=600&w=600',
+      url: 'http://url/to/img?h=600&w=600',
       height: '300px',
       width: '',
     });
 
     attachment = {
-      image_url: 'url/to/img',
+      image_url: 'http://url/to/img',
     };
 
     expect(
       service.getImageAttachmentConfiguration(attachment, 'single')
     ).toEqual({
-      url: 'url/to/img&h=600&w=600',
+      url: 'http://url/to/img?h=600&w=600',
       height: '300px',
       width: '',
     });
@@ -52,7 +52,7 @@ describe('AttachmentConfigurationService', () => {
     const spy = jasmine.createSpy();
     service.customImageAttachmentConfigurationHandler = spy;
     const attachment: Attachment = {
-      img_url: 'url/to/img',
+      img_url: 'http://url/to/img',
       thumb_url: 'different/url',
     };
     service.getImageAttachmentConfiguration(attachment, 'carousel');
@@ -62,51 +62,74 @@ describe('AttachmentConfigurationService', () => {
 
   it('should provide the correct configuration for gallery image attachments', () => {
     const attachment: Attachment = {
-      img_url: 'url/to/img',
+      img_url: 'http://url/to/img',
     };
 
     expect(
       service.getImageAttachmentConfiguration(attachment, 'gallery')
     ).toEqual({
-      url: 'url/to/img&h=300&w=300',
+      url: 'http://url/to/img?h=300&w=300',
       height: '150px',
       width: '',
     });
   });
 
   it('should provide the correct configuration for image attachments inside the carousel', () => {
     const attachment: Attachment = {
-      img_url: 'url/to/img',
+      img_url: 'http://url/to/img',
     };
 
     expect(
       service.getImageAttachmentConfiguration(attachment, 'carousel')
     ).toEqual({
-      url: 'url/to/img',
+      url: 'http://url/to/img',
       height: '',
       width: '',
     });
   });
 
   it('should provide the correct configuration for video attachments', () => {
-    const attachment: Attachment = {
-      asset_url: 'url/to/video',
-      thumb_url: 'url/to/poster',
+    let attachment: Attachment = {
+      asset_url: 'http://url/to/video',
+      thumb_url: 'http://url/to/poster',
+    };
+
+    expect(service.getVideoAttachmentConfiguration(attachment)).toEqual({
+      url: 'http://url/to/video',
+      height: '100%',
+      width: '100%',
+      thumbUrl: 'http://url/to/poster?h=600&w=600',
+    });
+
+    attachment = {
+      asset_url: 'http://url/to/video',
+      thumb_url: 'http://url/to/poster?oh=1080&ow=1920',
+    };
+
+    expect(service.getVideoAttachmentConfiguration(attachment)).toEqual({
+      url: 'http://url/to/video',
+      height: '100%',
+      width: '100%',
+      thumbUrl: 'http://url/to/poster?oh=1080&ow=1920&h=600&w=1067',
+    });
+
+    attachment = {
+      asset_url: 'http://url/to/video',
     };
 
     expect(service.getVideoAttachmentConfiguration(attachment)).toEqual({
-      url: 'url/to/video',
+      url: 'http://url/to/video',
       height: '100%',
       width: '100%',
-      thumbUrl: 'url/to/poster',
+      thumbUrl: undefined,
     });
   });
 
   it('should call #customVideoAttachmentConfigurationHandler, if provided', () => {
     const spy = jasmine.createSpy();
     service.customVideoAttachmentConfigurationHandler = spy;
     const attachment: Attachment = {
-      img_url: 'url/to/video',
+      img_url: 'http://url/to/video',
       thumb_url: 'different/url',
     };
     service.getVideoAttachmentConfiguration(attachment);
@@ -169,12 +192,12 @@ describe('AttachmentConfigurationService', () => {
 
   it('should provide correct configuration for scraped images', () => {
     let attachment: Attachment = {
-      image_url: 'url/to/img',
+      image_url: 'http://url/to/img',
       thumb_url: 'different/url',
     };
 
     expect(service.getScrapedImageAttachmentConfiguration(attachment)).toEqual({
-      url: 'url/to/img',
+      url: 'http://url/to/img',
       width: '',
       height: '',
     });
@@ -203,16 +226,14 @@ describe('AttachmentConfigurationService', () => {
 
   it('should provide integer values for image resize and make sure that each dimension is at least the size restriction', () => {
     const attachment = {
-      img_url: 'url/to/img',
-      original_width: 3534,
-      original_height: 4417,
+      img_url: 'http://url/to/img?ow=3534&oh=4417',
     };
 
     const result = service.getImageAttachmentConfiguration(
       attachment,
       'single'
     );
 
-    expect(result.url).toContain('&h=750&w=600');
+    expect(result.url).toContain('h=750&w=600');
   });
 });

projects/stream-chat-angular/src/lib/attachment-configuration.service.ts

@@ -61,36 +61,23 @@ export class AttachmentConfigurationService<
     const sizeResctriction = {
       gallery: { height: 300, width: 300 },
       single: { height: 600, width: 600 },
-      carousel: { height: undefined, windt: undefined },
+      carousel: { height: undefined, width: undefined },
     }[location];
 
     const height = sizeResctriction.height
       ? `${sizeResctriction.height / 2}px`
       : '';
 
-    const oh = attachment.original_height || 1;
-    const ow = attachment.original_width || 1;
-    const resizeParameters =
-      sizeResctriction.height || sizeResctriction.width
-        ? `&h=${Math.round(
-            Math.max(
-              sizeResctriction.height,
-              ((sizeResctriction.width || 1) / ow) * oh
-            )
-          )}&w=${Math.round(
-            Math.max(
-              sizeResctriction.width,
-              ((sizeResctriction.height || 1) / oh) * ow
-            )
-          )}`
-        : '';
+    const url = new URL(
+      (attachment.img_url ||
+        attachment.thumb_url ||
+        attachment.image_url ||
+        '') as string
+    );
+    this.addResiziParamsToUrl(sizeResctriction, url);
 
     return {
-      url:
-        ((attachment.img_url ||
-          attachment.thumb_url ||
-          attachment.image_url ||
-          '') as string) + resizeParameters,
+      url: url.href,
       width: '',
       height,
     };
@@ -107,11 +94,17 @@ export class AttachmentConfigurationService<
       return this.customVideoAttachmentConfigurationHandler(attachment);
     }
 
+    let thumbUrl = undefined;
+    if (attachment.thumb_url) {
+      const url = new URL(attachment.thumb_url);
+      this.addResiziParamsToUrl({ width: 600, height: 600 }, url);
+      thumbUrl = url.href;
+    }
     return {
       url: attachment.asset_url || '',
       width: '100%', // Set from CSS
       height: '100%',
-      thumbUrl: attachment.thumb_url,
+      thumbUrl: thumbUrl,
     };
   }
 
@@ -152,4 +145,37 @@ export class AttachmentConfigurationService<
       height: '', // Set from CSS
     };
   }
+
+  private addResiziParamsToUrl(
+    sizeResctriction: { width: number | undefined; height: number | undefined },
+    url: URL
+  ) {
+    const urlParams = url.searchParams;
+    const originalHeight = Number(urlParams.get('oh')) || 1;
+    const originalWidth = Number(urlParams.get('ow')) || 1;
+
+    const h = sizeResctriction.height
+      ? Math.round(
+          Math.max(
+            sizeResctriction.height,
+            ((sizeResctriction.width || 1) / originalWidth) * originalHeight
+          )
+        ).toString()
+      : undefined;
+    const w = sizeResctriction.width
+      ? Math.round(
+          Math.max(
+            sizeResctriction.width,
+            ((sizeResctriction.height || 1) / originalHeight) * originalWidth
+          )
+        ).toString()
+      : undefined;
+
+    if (h) {
+      url.searchParams.append('h', h);
+    }
+    if (w) {
+      url.searchParams.append('w', w);
+    }
+  }
 }