Merge pull request #379 from GetStream/attachment-sizing-warning

feat: Warn if invalid attachment sizing properties are detected

Author: szuperaz

docusaurus/docs/Angular/assets/attachment-size-warning.png

@@ -2,6 +2,7 @@ import AttachmentsScreenshot from "../assets/attachments-screenshot.png";
 import ImageSizingScreenshot1 from "../assets/image-sizing-screenshot-1.png";
 import ImageSizingScreenshot2 from "../assets/image-sizing-screenshot-2.png";
 import ImageSizingScreenshot3 from "../assets/image-sizing-screenshot-3.png";
+import AttachmentSizeWarning from "../assets/attachment-size-warning.png";
 
 The `AttachmentList` component displays the attachments of a message. The following attachments are supported:
 
@@ -51,9 +52,9 @@ The following section details how the width and height of images and videos uplo
 
 You can control the maximum size of images and videos with the [`--str-chat__attachment-max-width`](../theming/component-variables.mdx) CSS variable (available only in [theme-v2](../theming/introduction.mdx)). The value of this variable must be a value that can be computed to a valid pixel value using the [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) method (for example: `300px`, `10rem`, `calc(300px - var(--margin))`, but not `100%`). If you provide an invalid value, the image and video sizing can break, which can lead to scrolling issues inside the message list (for example the message list isn't scrolled to the bottom when you open a channel).
 
-:::tip
-If you're unsure about the value you provided for `--str-chat__attachment-max-width`, send an image/video to a channel, then inspect the `img`/`video` element inside the message list using your browser's development tools. Inside the **computed** properties of the element, you should see that `max-height` and `max-width` are set to a valid pixel value.
-:::
+If you set an invalid value to the variable, you'll see a warning on the browser's console:
+
+<img src={AttachmentSizeWarning} width="800" />
 
 #### File size optimization
 

docusaurus/docs/Angular/components/AttachmentListComponent.mdx

@@ -72,9 +72,11 @@ export class AttachmentConfigurationService<
         attachment.image_url ||
         '') as string
     );
+    const displayWarning = location === 'gallery' || location === 'single';
     const { sizeRestriction, height } = this.getSizingRestrictions(
       url,
-      element
+      element,
+      displayWarning
     );
 
     if (sizeRestriction) {
@@ -111,9 +113,11 @@ export class AttachmentConfigurationService<
     let thumbUrl = undefined;
     if (attachment.thumb_url && this.shouldGenerateVideoThumbnail) {
       const url = new URL(attachment.thumb_url);
+      const displayWarning = true;
       const { sizeRestriction, height } = this.getSizingRestrictions(
         url,
-        element
+        element,
+        displayWarning
       );
 
       if (sizeRestriction) {
@@ -183,7 +187,11 @@ export class AttachmentConfigurationService<
     url.searchParams.set('w', sizeRestriction.width.toString());
   }
 
-  private getSizingRestrictions(url: URL, htmlElement: HTMLElement) {
+  private getSizingRestrictions(
+    url: URL,
+    htmlElement: HTMLElement,
+    displayWarning = false
+  ) {
     const urlParams = url.searchParams;
     const originalHeight = Number(urlParams.get('oh')) || 1;
     const originalWidth = Number(urlParams.get('ow')) || 1;
@@ -219,6 +227,11 @@ export class AttachmentConfigurationService<
       }
     } else {
       sizeRestriction = undefined;
+      if (displayWarning) {
+        console.warn(
+          `Invalid value set for height/max-height and/or max-width for HTML element, this can cause scrolling issues inside the message list, more info https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/#image-and-video-sizing`
+        );
+      }
     }
 
     return { sizeRestriction, height };