stream-chat-angular 4.1.0 → 4.2.0

package/src/assets/styles/v2/scss/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,8 +16,8 @@
   /* 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 {
@@ -25,6 +25,8 @@
     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,55 +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);
-    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;
+        }
       }
     }
   }
@@ -203,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});
     }

package/src/assets/styles/v2/scss/Message/Message-layout.scss

@@ -179,26 +179,10 @@
     column-gap: var(--str-chat__spacing-0_5);
     position: relative;
 
-    .str-chat__message-status-tooltip-container {
-      display: flex;
-      justify-content: center;
-    }
-
     svg {
       width: calc(var(--str-chat__spacing-px) * 15);
       height: calc(var(--str-chat__spacing-px) * 15);
     }
-
-    .str-chat__tooltip {
-      word-break: normal;
-      display: none;
-    }
-
-    &:hover {
-      .str-chat__tooltip {
-        display: flex;
-      }
-    }
   }
 
   .str-chat__message-replies-count-button-wrapper {

package/src/assets/styles/v2/scss/MessageReactions/MessageReactions-layout.scss

@@ -18,6 +18,7 @@
       justify-content: center;
       align-items: center;
       padding: var(--str-chat__spacing-1_5);
+      position: relative;
 
       button {
         @include utils.button-reset;
@@ -31,16 +32,6 @@
         align-items: center;
         justify-content: center;
       }
-
-      .str-chat__tooltip {
-        display: none;
-      }
-
-      &:hover {
-        .str-chat__tooltip {
-          display: flex;
-        }
-      }
     }
 
     // Only in theme-v1

package/src/assets/styles/v2/scss/Tooltip/Tooltip-layout.scss

@@ -3,28 +3,7 @@
 .str-chat__tooltip {
   display: flex;
   padding: var(--str-chat__spacing-2);
-}
-
-.str-chat__tooltip:not(.str-chat__tooltip-angular) {
-  $size: 10px;
-
-  min-width: calc(var(--str-chat__spacing-px) * 100px);
-  max-width: calc(var(--str-chat__spacing-px) * 150px);
-  word-break: break-all;
-  position: absolute;
-  bottom: calc(100% + calc(0.8 * #{$size}));
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: calc(-1 * calc(#{$size} / 2));
-    inset-inline-start: calc(50% - calc(#{$size} / 2));
-    width: $size;
-    height: $size;
-    transform: rotate(45deg);
-  }
-}
-
-.str-chat__tooltip-angular {
+  z-index: 1;
   word-break: normal;
+  max-width: calc(var(--str-chat__spacing-px) * 150);
 }

package/src/assets/version.ts

@@ -1 +1 @@
-export const version = '4.1.0';
+export const version = '4.2.0';