Merge pull request #172 from GetStream/cdn-integration

New CDN integration - Angular
GetStream · Sep 7, 2022 · 7fad0a9 · 7fad0a9
2 parents 4fcd99b + 18ff428
commit 7fad0a9
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 56 deletions.
diff --git a/src/v1/Attachment.scss b/src/v1/Attachment.scss
@@ -2,8 +2,10 @@
   max-width: 450px;
 }
 
+$video-width: 300px;
+
 .str-chat__message-attachment--video:not(.str-chat__message-attachment--card) {
-  width: 300px;
+  width: $video-width;
 }
 
 .str-chat__player-wrapper {
@@ -19,6 +21,24 @@
   }
 }
 
+.str-chat__message-attachment-dynamic-size {
+  $max-height: 300px;
+
+  max-height: $max-height;
+
+  .str-chat__player-wrapper {
+    padding-top: 0;
+    position: static;
+
+    .str-chat__video-angular {
+      position: static;
+      // CDN resize requires to have max-height/height and max-width set on this element
+      max-height: $max-height;
+      max-width: $video-width;
+    }
+  }
+}
+
 /* border radius for attachments */
 .str-chat__message .str-chat__player-wrapper .react-player {
   border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0;
@@ -176,7 +196,6 @@
       height: inherit;
       width: auto;
       max-height: inherit;
-      max-width: 100%;
       display: block;
       object-fit: cover;
       overflow: hidden;
@@ -204,6 +223,30 @@
   }
 }
 
+.str-chat__message-attachment:not(.str-chat__message-attachment-dynamic-size) {
+  .str-chat__message-attachment--image {
+    img {
+      max-width: 100%;
+    }
+  }
+}
+
+.str-chat__message-attachment-dynamic-size {
+  &.str-chat__message-attachment--svg-image {
+    img {
+      object-fit: contain;
+    }
+  }
+
+  &.str-chat__message-attachment--image {
+    width: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+}
+
 .str-chat__message-attachment-card__giphy-logo {
   height: 20px;
   width: auto;

diff --git a/src/v1/Gallery.scss b/src/v1/Gallery.scss
@@ -1,3 +1,5 @@
+$image-size: 150px;
+
 .str-chat__gallery {
   display: inline-flex;
   flex-wrap: wrap;
@@ -6,8 +8,8 @@
 
   &-image {
     /* flex: 1; x */
-    width: 150px;
-    height: 150px;
+    width: $image-size;
+    height: $image-size;
     background: var(--white);
     margin-bottom: 1px;
     margin-right: 1px;
@@ -23,7 +25,9 @@
 
     img {
       width: inherit;
+      // CDN resize requires max-height/height and max-width to be set on this element
       height: inherit;
+      max-width: $image-size;
       object-fit: cover;
     }
   }
@@ -46,14 +50,16 @@
       margin: 4px 0;
 
       &-image {
-        width: 150px;
-        height: 150px;
+        width: $image-size;
+        height: $image-size;
       }
 
       &-placeholder {
         position: relative;
-        width: 150px;
-        height: 150px;
+        width: $image-size;
+        // CDN resize requires max-height/height and max-width to be set on this element
+        max-width: $image-size;
+        height: $image-size;
         color: var(--white);
         display: flex;
         align-items: center;

diff --git a/src/v1/Message.scss b/src/v1/Message.scss
@@ -531,7 +531,8 @@
       &-attachment {
         &--img {
           width: 100%;
-          max-width: 480px;
+          // CDN resize requires max-width to be set on this element
+          max-width: inherit;
           display: block;
           height: inherit;
           object-fit: cover;

diff --git a/src/v2/styles/AttachmentList/AttachmentList-layout.scss b/src/v2/styles/AttachmentList/AttachmentList-layout.scss
@@ -4,7 +4,7 @@
   /* The margin applied to every attachment in the attachment list */
   --str-chat__attachment-margin: var(--str-chat__spacing-0_5);
 
-  /* The maximum allowed width of attachments */
+  /* The maximum allowed width and height of attachments, in case of gallery images this is the maximum size of the whole gallery (not just for a single image inside the gallery). In case of Angular, there are some [constraints](https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/#maximum-size) for the acceptable values you can provide for this variable. */
   --str-chat__attachment-max-width: unset;
 
   /* The height of scraped images, the default value is optimized for 1.91:1 aspect ratio */
@@ -16,15 +16,17 @@
   /* The height of GIFs */
   --str-chat__gif-height: calc(var(--str-chat__spacing-px) * 200);
 
-  /* The height of videos */
-  --str-chat__video-height: calc(var(--str-chat__spacing-px) * 300);
+  /* The height of videos, the default value is the mase as `--str-chat__attachment-max-width`. In Angular SDK this is the maximum height, the video can be smaller based on the aspect ratio */
+  --str-chat__video-height: unset;
 }
 
 .str-chat__attachment-list {
   --str-chat__attachment-max-width: calc(
     var(--str-chat__message-max-width) - calc(2 * var(--str-chat__attachment-margin))
   );
 
+  --str-chat__video-height: var(--str-chat__attachment-max-width);
+
   --str-chat__scraped-image-height: calc(var(--str-chat__attachment-max-width) * calc(1 / 1.91));
 
   --str-chat__scraped-video-height: calc(var(--str-chat__attachment-max-width) * calc(9 / 16));
@@ -102,6 +104,7 @@
   // Images uploaded from files
   .str-chat__message-attachment--image:not(.str-chat__message-attachment--card) {
     img {
+      // CDN resize requires max-width and height/max-height to be present on this element
       max-width: var(--str-chat__attachment-max-width);
       max-height: var(--str-chat__attachment-max-width);
       object-fit: cover;
@@ -126,14 +129,25 @@
       .str-chat__video-angular {
         height: 100%;
         width: 100%;
+        // CDN resize requires max-width to be present on this element
+        max-width: var(--str-chat__attachment-max-width);
       }
     }
   }
 
-  .str-chat__message-attachment--video:not(.str-chat__message-attachment--card) {
+  .str-chat__message-attachment--video:not(.str-chat__message-attachment--card):not(.str-chat__message-attachment-dynamic-size) {
     height: var(--str-chat__video-height);
   }
 
+  .str-chat__message-attachment--video.str-chat__message-attachment-dynamic-size:not(.str-chat__message-attachment--card) {
+    max-height: var(--str-chat__video-height);
+
+    .str-chat__video-angular {
+      // CDN resize requires max-height to be present on this element
+      max-height: var(--str-chat__video-height);
+    }
+  }
+
   .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header {
     height: var(--str-chat__scraped-video-height);
   }
@@ -143,56 +157,66 @@
     margin: var(--str-chat__attachment-margin);
   }
 
-  .str-chat__gallery {
-    display: grid;
-    grid-template-columns: 50% 50%;
-    overflow: hidden;
-    gap: var(--str-chat__spacing-0_5);
-    max-width: var(--str-chat__attachment-max-width);
-    width: fit-content;
-    height: var(--str-chat__attachment-max-width);
+  .str-chat__message-attachment--gallery {
+    $max-width: var(--str-chat__attachment-max-width);
     margin: var(--str-chat__attachment-margin);
 
-    &.str-chat__gallery-two-rows {
-      grid-template-rows: 50% 50%;
-    }
-
-    .str-chat__gallery-image {
-      padding: 0;
-      margin: 0;
-
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        cursor: zoom-in;
+    .str-chat__gallery {
+      display: grid;
+      grid-template-columns: 50% 50%;
+      overflow: hidden;
+      // Safari needs this
+      width: fit-content;
+      gap: var(--str-chat__spacing-0_5);
+      max-width: $max-width;
+      // CDN resize requires height/max-height to be present on the img element, this rule ensures that
+      height: var(--str-chat__attachment-max-width);
+
+      &.str-chat__gallery-two-rows {
+        grid-template-rows: 50% 50%;
       }
-    }
 
-    .str-chat__gallery-placeholder {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-size: cover;
-      background-position: top left;
-      background-repeat: no-repeat;
-      margin: 0;
-      cursor: zoom-in;
+      .str-chat__gallery-image {
+        padding: 0;
+        margin: 0;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          cursor: zoom-in;
+          // CDN resize requires max-width to be present on this element
+          max-width: $max-width;
+        }
+      }
 
-      p {
+      .str-chat__gallery-placeholder {
         position: relative;
-        z-index: 1;
-      }
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-size: cover;
+        background-position: top left;
+        background-repeat: no-repeat;
+        margin: 0;
+        cursor: zoom-in;
+        // CDN resize requires max-width to be present on this element
+        max-width: $max-width;
 
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 0;
+        p {
+          position: relative;
+          z-index: 1;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 0;
+        }
       }
     }
   }
@@ -204,6 +228,7 @@
 
     img {
       object-fit: contain;
+      // CDN resize requires max-width and height/max-height to be present on this element
       max-width: calc(var(--str-chat__attachment-max-width) - #{$padding});
       max-height: calc(var(--str-chat__attachment-max-width) - #{$padding});
     }