Merge pull request #392 from GetStream/update-css

feat: Match Attachment sizing logic with React

Author: szuperaz

package-lock.json

@@ -117,7 +117,7 @@
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "3.3.0",
+    "@stream-io/stream-chat-css": "3.5.4",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "^1.4.0",
     "dayjs": "^1.10.7",

package.json

@@ -31,31 +31,37 @@ describe('AttachmentConfigurationService', () => {
       service.getImageAttachmentConfiguration(attachment, 'single', htmlElement)
     ).toEqual({
       url: 'http://url/to/img?h=600&w=600',
-      height: '300px',
+      height: '',
       width: '',
+      originalHeight: 1000000,
+      originalWidth: 1000000,
     });
 
     attachment = {
-      thumb_url: 'http://url/to/img',
+      thumb_url: 'http://url/to/img?oh=1200&ow=800',
     };
 
     expect(
       service.getImageAttachmentConfiguration(attachment, 'single', htmlElement)
     ).toEqual({
-      url: 'http://url/to/img?h=600&w=600',
-      height: '300px',
+      url: 'http://url/to/img?oh=1200&ow=800&h=900&w=600',
+      height: '',
       width: '',
+      originalHeight: 1200,
+      originalWidth: 800,
     });
 
     attachment = {
-      image_url: 'http://url/to/img',
+      image_url: 'http://url/to/img?oh=1&ow=1',
     };
 
     expect(
       service.getImageAttachmentConfiguration(attachment, 'single', htmlElement)
     ).toEqual({
-      url: 'http://url/to/img?h=600&w=600',
-      height: '300px',
+      url: 'http://url/to/img?oh=1&ow=1&h=600&w=600',
+      originalHeight: 1000000,
+      originalWidth: 1000000,
+      height: '',
       width: '',
     });
   });
@@ -99,6 +105,8 @@ describe('AttachmentConfigurationService', () => {
       url: 'http://url/to/img?h=600&w=600',
       height: '',
       width: '',
+      originalHeight: 1000000,
+      originalWidth: 1000000,
     });
   });
 
@@ -121,6 +129,8 @@ describe('AttachmentConfigurationService', () => {
       url: 'http://url/to/img',
       height: '',
       width: '',
+      originalHeight: 1000000,
+      originalWidth: 1000000,
     });
   });
 
@@ -138,9 +148,11 @@ describe('AttachmentConfigurationService', () => {
       service.getVideoAttachmentConfiguration(attachment, htmlElement)
     ).toEqual({
       url: 'http://url/to/video',
-      height: '300px',
+      height: '',
       width: '',
       thumbUrl: 'http://url/to/poster?h=600&w=600',
+      originalHeight: 1000000,
+      originalWidth: 1000000,
     });
 
     attachment = {
@@ -152,9 +164,11 @@ describe('AttachmentConfigurationService', () => {
       service.getVideoAttachmentConfiguration(attachment, htmlElement)
     ).toEqual({
       url: 'http://url/to/video',
-      height: '169px',
+      height: '',
       width: '',
       thumbUrl: 'http://url/to/poster?oh=1080&ow=1920&h=600&w=1066',
+      originalHeight: 1080,
+      originalWidth: 1920,
     });
 
     attachment = {
@@ -165,9 +179,11 @@ describe('AttachmentConfigurationService', () => {
       service.getVideoAttachmentConfiguration(attachment, htmlElement)
     ).toEqual({
       url: 'http://url/to/video',
-      height: '300px',
+      height: '',
       width: '',
       thumbUrl: undefined,
+      originalHeight: 1000000,
+      originalWidth: 1000000,
     });
   });
 
@@ -309,28 +325,6 @@ describe('AttachmentConfigurationService', () => {
     ).toBeUndefined();
   });
 
-  it('should use original dimensions if image is smaller than max-width and max-height', () => {
-    const attachment: Attachment = {
-      image_url: 'http://url/to/img?ow=200&oh=100',
-    };
-    const htmlElement = {
-      'max-width': '300px',
-      'max-height': '300px',
-    } as any as HTMLElement;
-
-    expect(
-      service.getImageAttachmentConfiguration(attachment, 'single', htmlElement)
-        .height
-    ).toBe('100px');
-
-    attachment.image_url = attachment.image_url!.replace('ow=200', 'ow=400');
-
-    expect(
-      service.getImageAttachmentConfiguration(attachment, 'single', htmlElement)
-        .height
-    ).toBe('75px');
-  });
-
   it('should override existing "h" and "w" URL params', () => {
     const attachment: Attachment = {
       image_url: 'http://url/to/img?crop=*&h=*&oh=0&ow=0&resize=*&ro=0&w=*',

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

@@ -3,6 +3,7 @@ import { Attachment } from 'stream-chat';
 import {
   AttachmentConfigration,
   DefaultStreamChatGenerics,
+  ImageAttachmentConfiguration,
   VideoAttachmentConfiguration,
 } from './types';
 
@@ -22,7 +23,7 @@ export class AttachmentConfigurationService<
     a: Attachment<T>,
     type: 'gallery' | 'single' | 'carousel',
     containerElement: HTMLElement
-  ) => AttachmentConfigration;
+  ) => ImageAttachmentConfiguration;
   /**
    * A custom handler can be provided to override the default video attachment (videos uploaded from files) configuration. By default the SDK uses fixed height (a size that's known before video is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break.
    */
@@ -57,7 +58,7 @@ export class AttachmentConfigurationService<
     attachment: Attachment<T>,
     location: 'gallery' | 'single' | 'carousel',
     element: HTMLElement
-  ): AttachmentConfigration {
+  ): ImageAttachmentConfiguration {
     if (this.customImageAttachmentConfigurationHandler) {
       return this.customImageAttachmentConfigurationHandler(
         attachment,
@@ -72,8 +73,16 @@ export class AttachmentConfigurationService<
         attachment.image_url ||
         '') as string
     );
+    const originalHeight =
+      Number(url.searchParams.get('oh')) > 1
+        ? Number(url.searchParams.get('oh'))
+        : 1000000;
+    const originalWidth =
+      Number(url.searchParams.get('ow')) > 1
+        ? Number(url.searchParams.get('ow'))
+        : 1000000;
     const displayWarning = location === 'gallery' || location === 'single';
-    const { sizeRestriction, height } = this.getSizingRestrictions(
+    const sizeRestriction = this.getSizingRestrictions(
       url,
       element,
       displayWarning
@@ -89,7 +98,9 @@ export class AttachmentConfigurationService<
     return {
       url: url.href,
       width: '', // Not set to respect responsive width
-      height,
+      height: '', // Set from CSS
+      originalHeight,
+      originalWidth,
     };
   }
 
@@ -109,12 +120,21 @@ export class AttachmentConfigurationService<
       );
     }
 
-    let attachmentHeight = ``;
     let thumbUrl = undefined;
+    let originalHeight = 1000000;
+    let originalWidth = 1000000;
     if (attachment.thumb_url && this.shouldGenerateVideoThumbnail) {
       const url = new URL(attachment.thumb_url);
+      originalHeight =
+        Number(url.searchParams.get('oh')) > 1
+          ? Number(url.searchParams.get('oh'))
+          : originalHeight;
+      originalWidth =
+        Number(url.searchParams.get('ow')) > 1
+          ? Number(url.searchParams.get('ow'))
+          : originalWidth;
       const displayWarning = true;
-      const { sizeRestriction, height } = this.getSizingRestrictions(
+      const sizeRestriction = this.getSizingRestrictions(
         url,
         element,
         displayWarning
@@ -126,18 +146,14 @@ export class AttachmentConfigurationService<
         this.addResizingParamsToUrl(sizeRestriction, url);
       }
       thumbUrl = url.href;
-      attachmentHeight = height;
-    } else {
-      const cssSizeRestriction = this.getCSSSizeRestriction(element);
-      attachmentHeight = `${
-        cssSizeRestriction.maxHeight || cssSizeRestriction.height || ''
-      }px`;
     }
     return {
       url: attachment.asset_url || '',
       width: '', // Not set to respect responsive width
-      height: attachmentHeight,
+      height: '', // Set from CSS
       thumbUrl: thumbUrl,
+      originalHeight,
+      originalWidth,
     };
   }
 
@@ -197,7 +213,6 @@ export class AttachmentConfigurationService<
     const originalWidth = Number(urlParams.get('ow')) || 1;
     const cssSizeRestriction = this.getCSSSizeRestriction(htmlElement);
     let sizeRestriction: { width: number; height: number } | undefined;
-    let height = '';
 
     if (
       (cssSizeRestriction.maxHeight || cssSizeRestriction.height) &&
@@ -209,22 +224,6 @@ export class AttachmentConfigurationService<
         (cssSizeRestriction.maxHeight || cssSizeRestriction.height)!,
         cssSizeRestriction.maxWidth
       );
-      if (cssSizeRestriction.maxHeight) {
-        const heightNum =
-          originalHeight > 1 && originalWidth > 1
-            ? originalHeight <= cssSizeRestriction.maxHeight &&
-              originalWidth <= cssSizeRestriction.maxWidth
-              ? originalHeight
-              : Math.round(
-                  Math.min(
-                    cssSizeRestriction.maxHeight,
-                    (cssSizeRestriction.maxWidth / originalWidth) *
-                      originalHeight
-                  )
-                )
-            : cssSizeRestriction.maxHeight;
-        height = `${heightNum}px`;
-      }
     } else {
       sizeRestriction = undefined;
       if (displayWarning) {
@@ -234,7 +233,7 @@ export class AttachmentConfigurationService<
       }
     }
 
-    return { sizeRestriction, height };
+    return sizeRestriction;
   }
 
   private getSizeRestrictions(