stream-chat-react 11.13.1 → 11.14.0

package/dist/scss/v2/AttachmentList/AttachmentList-layout.scss

@@ -6,6 +6,12 @@
 
   /* The height of GIFs */
   --str-chat__gif-height: calc(var(--str-chat__spacing-px) * 200);
+
+  /* The width of the amplitude bar of the voice recording wave data */
+  --str-chat__voice-recording-amplitude-bar-width: 2px;
+
+  /* The gap between amplitudes of the wave data of a voice recording */
+  --str-chat__voice-recording-amplitude-bar-gap-width: var(--str-chat__spacing-px);
 }
 
 .str-chat__attachment-list {
@@ -346,7 +352,7 @@
     grid-template-columns: 36px auto 55px;
     align-items: center;
     justify-content: center;
-    gap: calc(var(--str-chat__spacing-px) * 14);
+    gap: calc(var(--str-chat__spacing-px) * 9);
     padding: var(--str-chat__spacing-2);
     margin: var(--str-chat__attachment-margin);
 
@@ -357,6 +363,33 @@
       flex-direction: column;
       gap: var(--str-chat__spacing-2);
 
+      a {
+        cursor: pointer;
+        text-decoration: none;
+      }
+
+      .str-chat__message-attachment-voice-recording-widget--first-row {
+        @include utils.ellipsis-text-parent;
+
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--str-chat__spacing-1);
+      }
+
+      .str-chat__message-attachment__voice-recording-widget__title {
+        @include utils.ellipsis-text;
+        min-width: 0;
+      }
+
+      .str-chat__message-attachment-download-icon {
+        svg {
+          width: calc(var(--str-chat__spacing-px) * 24);
+          height: calc(var(--str-chat__spacing-px) * 16);
+        }
+      }
+
       .str-chat__message-attachment__voice-recording-widget__audio-state {
         display: flex;
         align-items: center;
@@ -364,6 +397,13 @@
         gap: var(--str-chat__spacing-1_5);
         height: 100%;
       }
+
+      .str-chat__message-attachment__voice-recording-widget__error-message {
+        display: flex;
+        align-items: center;
+        justify-content: start;
+        gap: var(--str-chat__spacing-1);
+      }
     }
 
     .str-chat__message-attachment__voice-recording-widget__right-section {
@@ -375,26 +415,33 @@
       width: calc(var(--str-chat__spacing-px) * 45);
     }
 
+    stream-voice-recording-wavebar {
+      flex: 1;
+    }
+
     .str-chat__wave-progress-bar__track {
       $min_amplitude_height: 2px;
       position: relative;
       flex: 1;
-      width: 120px;
+      width: 100%;
       height: calc(var(--str-chat__spacing-px) * 25);
       display: flex;
       align-items: center;
-      gap: var(--str-chat__spacing-px);
+      justify-content: space-between;
+      gap: var(--str-chat__voice-recording-amplitude-bar-gap-width);
 
       .str-chat__wave-progress-bar__amplitude-bar {
-        width: 2px;
-        min-width: 2px;
-        height: calc(var(--str-chat__wave-progress-bar__amplitude-bar-height) + $min_amplitude_height); // variable set dynamically on element
+        width: var(--str-chat__voice-recording-amplitude-bar-width);
+        min-width: var(--str-chat__voice-recording-amplitude-bar-width);
+        height: calc(
+          var(--str-chat__wave-progress-bar__amplitude-bar-height) + #{$min_amplitude_height}
+        ); // variable set dynamically on element
       }
 
       .str-chat__wave-progress-bar__progress-indicator {
         position: absolute;
         left: 0;
-        height: calc(100% + $min_amplitude_height + 2px);
+        height: calc(100% + #{$min_amplitude_height} + 2px);
         width: calc(var(--str-chat__spacing-px) * 6);
       }
     }
@@ -463,7 +510,8 @@
   }
 
   /* Angular has different UI here, the download icon is too small to use on mobile */
-  .str-chat-angular__message-attachment-file-single {
+  .str-chat-angular__message-attachment-file-single
+    .str-chat__message-attachment-file--item-first-row {
     cursor: pointer;
     text-decoration: none;
   }

package/dist/scss/v2/AttachmentList/AttachmentList-theme.scss

@@ -179,10 +179,14 @@
   --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);
+  --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);
+  --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;
@@ -346,7 +350,7 @@
   .str-chat__message-attachment-audio-widget--progress-track {
     background: linear-gradient(
       to right,
-      var(--str-chat__primary-color)  var(--str-chat__message-attachment-audio-widget-progress),
+      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);
@@ -365,6 +369,10 @@
   .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);
@@ -391,6 +399,11 @@
       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 {
@@ -468,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/dist/scss/v2/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/dist/scss/v2/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/dist/scss/v2/_global-theme-variables.scss

@@ -19,43 +19,43 @@
     Cantarell, Helvetica Neue, sans-serif;
 
   /* The font used for caption texts */
-  --str-chat__caption-text: 0.75rem/1rem var(--str-chat__font-family);
+  --str-chat__caption-text: 0.75rem/1.3 var(--str-chat__font-family);
 
   /* The font used for caption texts with emphasize */
-  --str-chat__caption-medium-text: 500 0.75rem/1rem var(--str-chat__font-family);
+  --str-chat__caption-medium-text: 500 0.75rem/1.3 var(--str-chat__font-family);
 
   /* The font used for caption texts with emphasize */
-  --str-chat__caption-strong-text: 700 0.75rem/1rem var(--str-chat__font-family);
+  --str-chat__caption-strong-text: 700 0.75rem/1.3 var(--str-chat__font-family);
 
   /* The font used for body texts */
-  --str-chat__body-text: 0.875rem/1rem var(--str-chat__font-family);
+  --str-chat__body-text: 0.875rem/1.2 var(--str-chat__font-family);
 
   /* The font used for body texts with emphasize */
-  --str-chat__body-medium-text: 500 0.875rem/1rem var(--str-chat__font-family);
+  --str-chat__body-medium-text: 500 0.875rem/1.2 var(--str-chat__font-family);
 
   /* The font used for body texts */
-  --str-chat__body2-text: 0.9375rem/1rem var(--str-chat__font-family);
+  --str-chat__body2-text: 0.9375rem/1.2 var(--str-chat__font-family);
 
   /* The font used for body texts with emphasize */
-  --str-chat__body2-medium-text: 500 0.9375rem/1rem var(--str-chat__font-family);
+  --str-chat__body2-medium-text: 500 0.9375rem/1.2 var(--str-chat__font-family);
 
   /* The font used for subtitle texts */
-  --str-chat__subtitle-text: 1rem/1.25rem var(--str-chat__font-family);
+  --str-chat__subtitle-text: 1rem/1.1.25 var(--str-chat__font-family);
 
   /* The font used for subtitle texts with emphasize */
-  --str-chat__subtitle-medium-text: 500 1rem/1.25rem var(--str-chat__font-family);
+  --str-chat__subtitle-medium-text: 500 1rem/1.25 var(--str-chat__font-family);
 
   /* The font used for subtitle texts */
-  --str-chat__subtitle2-text: 1.25rem/1.5rem var(--str-chat__font-family);
+  --str-chat__subtitle2-text: 1.25rem/1.2 var(--str-chat__font-family);
 
   /* The font used for subtitle texts with emphasize */
-  --str-chat__subtitle2-medium-text: 500 1.25rem/1.5rem var(--str-chat__font-family);
+  --str-chat__subtitle2-medium-text: 500 1.25rem/1.2 var(--str-chat__font-family);
 
   /* The font used for headline texts */
-  --str-chat__headline-text: 1.5rem/1.5rem var(--str-chat__font-family);
+  --str-chat__headline-text: 1.5rem/1.2 var(--str-chat__font-family);
 
   /* The font used for headline texts */
-  --str-chat__headline2-text: 1.8rem/1.8rem var(--str-chat__font-family);
+  --str-chat__headline2-text: 1.8rem/1.2 var(--str-chat__font-family);
 }
 
 .str-chat,

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "11.13.1";
+export declare const version = "11.14.0";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1 +1 @@
-export var version = '11.13.1';
+export var version = '11.14.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "11.13.1",
+  "version": "11.14.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -75,7 +75,6 @@
     "lodash.throttle": "^4.1.1",
     "lodash.uniqby": "^4.7.0",
     "nanoid": "^3.3.4",
-    "pretty-bytes": "^5.4.1",
     "prop-types": "^15.7.2",
     "react-dropzone": "^14.2.3",
     "react-fast-compare": "^3.2.2",
@@ -223,7 +222,7 @@
     "rollup-plugin-url": "^3.0.1",
     "rollup-plugin-visualizer": "^4.2.0",
     "semantic-release": "^19.0.5",
-    "stream-chat": "^8.21.0",
+    "stream-chat": "^8.25.1",
     "style-loader": "^2.0.0",
     "ts-jest": "^28.0.8",
     "typescript": "^4.7.4",