stream-chat-angular 4.62.0 → 4.63.0

package/src/assets/styles/v2/scss/AttachmentList/AttachmentList-theme.scss

@@ -170,6 +170,39 @@
   /* Box shadow applied to audio widget */
   --str-chat__audio-attachment-widget-box-shadow: none;
 
+  /* Border radius applied to audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-radius: calc(
+    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
+  );
+
+  /* Text color used in audio recording widget */
+  --str-chat__voice-recording-attachment-widget-color: var(--str-chat__text-color);
+
+  /* Border radius applied to audio recording widget */
+  --str-chat__voice-recording-attachment-widget-secondary-color: var(
+    --str-chat__text-low-emphasis-color
+  );
+
+  /* The text/icon color for low emphasis texts (for example file size) in audio recording widget */
+  --str-chat__voice-recording-attachment-widget-background-color: var(
+    --str-chat__secondary-background-color
+  );
+
+  /* Top border of audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-block-start: none;
+
+  /* Bottom border of audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-block-end: none;
+
+  /* Left (right in RTL layout) border of audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-inline-end: none;
+
+  /* Box shadow applied to audio recording widget */
+  --str-chat__voice-recording-attachment-widget-box-shadow: none;
+
   /* Border radius applied to the play / pause button of audio widget */
   --str-chat__audio-attachment-controls-button-border-radius: var(--str-chat__border-radius-circle);
 
@@ -315,7 +348,11 @@
   }
 
   .str-chat__message-attachment-audio-widget--progress-track {
-    background-color: var(--str-chat__disabled-color);
+    background: linear-gradient(
+      to right,
+      var(--str-chat__primary-color) var(--str-chat__message-attachment-audio-widget-progress),
+      var(--str-chat__disabled-color) var(--str-chat__message-attachment-audio-widget-progress)
+    );
     border-radius: calc(var(--str-chat__spacing-px) * 5);
 
     .str-chat__message-attachment-audio-widget--progress-indicator {
@@ -329,6 +366,53 @@
     @include utils.circle-fab-overrides('audio-attachment-controls-button');
   }
 
+  .str-chat__message-attachment__voice-recording-widget {
+    @include utils.component-layer-overrides('voice-recording-attachment-widget');
+
+    a {
+      color: var(--str-chat__voice-recording-attachment-widget-color);
+    }
+
+    .str-chat__message-attachment__voice-recording-widget__title {
+      @include utils.ellipsis-text;
+      font: var(--str-chat__subtitle-medium-text);
+    }
+
+    .str-chat__message-attachment__voice-recording-widget__timer {
+      font: var(--str-chat__body-text);
+      color: var(--str-chat__text-low-emphasis-color);
+      white-space: nowrap;
+    }
+
+    .str-chat__wave-progress-bar__amplitude-bar {
+      background: var(--str-chat__text-low-emphasis-color);
+      border-radius: var(--str-chat__border-radius-circle);
+    }
+
+    .str-chat__wave-progress-bar__amplitude-bar--active {
+      background: var(--str-chat__primary-color);
+    }
+
+    .str-chat__wave-progress-bar__progress-indicator {
+      background-color: #fff;
+      border-radius: var(--str-chat__border-radius-circle);
+      border: 1px solid var(--str-chat__secondary-overlay-color);
+      cursor: grab;
+    }
+
+    .str-chat__message-attachment__voice-recording-widget__error-message {
+      font: var(--str-chat__body-text);
+      color: var(--str-chat__text-low-emphasis-color);
+    }
+  }
+
+  .str-chat__message_attachment__playback-rate-button {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+    border-radius: var(--str-chat__border-radius-circle);
+    background-color: #fff; // in design marked as static, excluded from theming
+    cursor: pointer;
+  }
+
   .str-chat__message-attachment--card {
     @include utils.component-layer-overrides('card-attachment');
     font: var(--str-chat__body-text);
@@ -397,4 +481,9 @@
     border-end-start-radius: 0;
     border-end-end-radius: 0;
   }
-}
+}
+
+.str-chat-angular__message-attachment-file-single
+  .str-chat__message-attachment-file--item-first-row {
+  color: var(--str-chat__attachment-list-color);
+}

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

@@ -1,11 +1,13 @@
 .str-chat__image-carousel {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  justify-content: space-between;
   align-items: center;
   min-height: 0;
   min-width: 0;
   max-width: 100%;
   max-height: 100%;
+  height: 100%;
 
   .str-chat__image-carousel-stepper {
     padding: var(--str-chat__spacing-2_5);
@@ -15,11 +17,13 @@
   }
 
   .str-chat__image-carousel-image {
-    object-fit: cover;
+    object-fit: contain;
     min-height: 0;
     max-height: 100%;
     min-width: 0;
     max-width: 100%;
+    height: 100%;
+    width: 100%;
   }
 }
 
@@ -29,6 +33,11 @@
       .str-chat__modal__inner {
         height: 80%;
         width: 80%;
+
+        @media only screen and (max-device-width: 768px) {
+          height: 100%;
+          width: 100%;
+        }
       }
     }
   }

package/src/assets/styles/v2/scss/ImageCarousel/ImageCarousel-theme.scss

@@ -6,8 +6,22 @@
   --str-chat__image-carousel-stepper-color: var(--str-chat__text-color);
 }
 
+@media only screen and (max-device-width: 768px) {
+  .str-chat__message {
+    .str-chat__attachment-list {
+      .str-chat__modal--open {
+        .str-chat__modal__inner {
+          border-radius: 0;
+        }
+      }
+    }
+  }
+}
+
 .str-chat__image-carousel {
   .str-chat__image-carousel-stepper {
+    cursor: pointer;
+
     svg path {
       fill: var(--str-chat__image-carousel-stepper-color);
     }

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

@@ -11,7 +11,7 @@
   --str-chat__message-with-attachment-max-width: calc(var(--str-chat__spacing-px) * 300);
 
   /* The maximum allowed width of quoted messages inside the message component */
-  --str-chat__quoted-message-max-width: calc(var(--str-chat__spacing-px) * 180);
+  --str-chat__quoted-message-max-width: calc(var(--str-chat__spacing-px) * 250);
 
   /* The maximum allowed width of quoted messages inside the message input component */
   --str-chat__quoted-message-inside-message-input-max-width: calc(
@@ -201,7 +201,7 @@
       @include utils.prevent-glitch-text-overflow;
     }
 
-    .str-chat__message-simple-time + .str-chat__mesage-simple-edited::before {
+    .str-chat__message-simple-timestamp + .str-chat__mesage-simple-edited::before {
       content: '•';
       margin-right: var(--str-chat__spacing-1);
     }

package/src/assets/version.ts

@@ -1 +1 @@
-export const version = '4.62.0';
+export const version = '4.63.0';