stream-chat-react 11.21.0 → 12.0.0-rc.1

package/dist/scss/Attachment.scss

@@ -1,329 +0,0 @@
-@mixin clamped-height-from-original-image-dimensions($max-height-css-var, $max-width-css-var) {
-  height: min(
-    var(#{$max-height-css-var}),
-    min(var(#{$max-width-css-var}, 1000000) / var(--original-width, 1000000), 1px) *
-      var(--original-height, 1000000)
-  );
-}
-
-.str-chat__attachment,
-.str-chat__message-attachment {
-  --attachment-max-width: 450px;
-  --video-width: 300px;
-
-  max-width: var(--attachment-max-width);
-}
-
-.str-chat__message-attachment.str-chat__message-attachment--video:not(.str-chat__message-attachment--card) {
-  --attachment-max-width: var(--video-width);
-  width: var(--video-width);
-}
-
-.str-chat__player-wrapper {
-  position: relative;
-  padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
-  display: flex;
-  flex-direction: column;
-
-  .react-player,
-  .str-chat__video-angular {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    min-height: 0;
-    max-height: 100%;
-  }
-}
-
-.str-chat__message-attachment-dynamic-size {
-  --video-max-height: 300px;
-
-  max-height: var(--video-max-height);
-
-  .str-chat__player-wrapper {
-    @include clamped-height-from-original-image-dimensions(
-      '--video-max-height',
-      '--attachment-max-width'
-    );
-    padding-top: 0;
-    position: static;
-    // CDN resize requires to have max-height/height and max-width set on this element - React
-    max-height: var(--video-max-height);
-    max-width: var(--attachment-max-width);
-
-    .str-chat__video-angular,
-    .react-player {
-      position: static;
-      // CDN resize requires to have max-height/height and max-width set on this element - Angular
-      max-height: var(--video-max-height);
-      max-width: var(--attachment-max-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;
-  overflow: hidden;
-}
-
-.str-chat__message--me .str-chat__player-wrapper .react-player {
-  border-radius: var(--border-radius) var(--border-radius) 0 var(--border-radius);
-  overflow: hidden;
-}
-
-.str-chat__message {
-  &-attachment {
-    --attachment-max-width: 375px;
-    width: 100%;
-
-    border-radius: var(--border-radius);
-    padding: var(--xs-m) auto var(--xs-m) 0;
-  }
-
-  /** Let giphies stretch their containers */
-  &-attachment--giphy {
-    max-width: unset;
-  }
-
-  .str-chat__message-attachment {
-    margin: var(--xs-m) 0 var(--xs-m) auto;
-  }
-
-  &--me {
-    .str-chat__message-attachment {
-      padding-left: 0;
-    }
-  }
-}
-
-.str-chat__message-team.thread-list {
-  .str-chat__message-attachment {
-    --attachment-max-width: 200px;
-  }
-}
-
-.str-chat__message-attachment {
-  overflow: hidden;
-
-  &:hover {
-    background: transparent;
-  }
-
-  &--card {
-    &--no-image {
-      height: 60px;
-    }
-
-    &--actions {
-      height: auto;
-    }
-  }
-
-  &-file {
-    width: 100%;
-
-    &--item {
-      position: relative;
-      height: 50px;
-      display: flex;
-      align-items: center;
-      font-size: var(--md-font);
-      line-height: 22px;
-      border-left: 1px solid var(--border);
-      width: auto;
-      padding-left: var(--xxs-p);
-
-      &:hover {
-        background: var(--white);
-      }
-
-      .str-chat__message-attachment-file--item-text {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: center;
-        row-gap: 2px;
-        width: 100%;
-        min-width: 0;
-
-        .str-chat__message-attachment-file--item-first-row {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          column-gap: 8px;
-          width: 100%;
-
-          .str-chat__message-attachment-file--item-name {
-            font-weight: var(--font-weight-bold);
-            color: var(--black);
-
-            white-space: nowrap;
-            overflow-y: visible;
-            // Not every browser support clip overflow, so hidden is defined as a fallback
-            overflow-x: hidden;
-            overflow-x: clip;
-            text-overflow: ellipsis;
-            min-width: 0;
-          }
-
-          .str-chat__message-attachment-file--item-download {
-            display: flex;
-
-            svg {
-              width: 24px;
-              height: 16px;
-
-              path {
-                fill: var(--black);
-              }
-            }
-          }
-        }
-      }
-
-      img,
-      svg {
-        margin-right: var(--xs-m);
-      }
-
-      &-text {
-        max-width: 100%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      span {
-        line-height: 14px;
-        font-size: var(--sm-font);
-        font-weight: var(--font-weight-bold);
-        text-transform: uppercase;
-        display: block;
-        color: var(--black);
-        opacity: 0.5;
-      }
-    }
-  }
-
-  &--image {
-    --image-max-height: 300px;
-    max-height: var(--image-max-height);
-    max-width: var(--attachment-max-width);
-    border-radius: 0;
-
-    &:hover {
-      background: transparent;
-    }
-
-    img {
-      @include clamped-height-from-original-image-dimensions(
-        '--image-max-height',
-        '--attachment-max-width'
-      );
-      width: auto;
-      max-height: inherit;
-      display: block;
-      object-fit: cover;
-      overflow: hidden;
-
-      &:hover {
-        background: transparent;
-      }
-    }
-
-    &--actions {
-      height: 320px;
-
-      img {
-        height: calc(320px - 40px);
-      }
-    }
-  }
-
-  &--media {
-    width: 300px;
-  }
-
-  &-card {
-    min-height: 60px;
-  }
-}
-
-.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;
-}
-
-.messaging {
-  &.str-chat {
-    .str-chat {
-      &__message-attachment {
-        &.str-chat__message-attachment--image--actions {
-          .str-chat__message-attachment--img {
-            max-height: 254px;
-          }
-        }
-      }
-    }
-  }
-}
-
-.livestream.str-chat {
-  .str-chat {
-    &__message-attachment {
-      &.str-chat__message-attachment--file {
-        max-width: 100%;
-
-        .str-chat__message-attachment-file--item {
-          border-left: none;
-
-          &:hover {
-            background: var(--grey-whisper);
-          }
-        }
-      }
-    }
-  }
-
-  &.dark {
-    .str-chat {
-      &__message-attachment-file--item {
-        a,
-        span {
-          color: var(--white);
-        }
-
-        &:hover {
-          background: transparent;
-        }
-      }
-    }
-  }
-}

package/dist/scss/AttachmentActions.scss

@@ -1,44 +0,0 @@
-.str-chat__message-attachment-actions {
-  &-form {
-    width: 100%;
-    margin: var(--xs-m) 0;
-    padding: 0;
-    display: flex;
-  }
-
-  &-button {
-    flex: 1;
-    border: none;
-    background: none;
-    margin: 0 var(--xxs-m);
-    padding: var(--xs-p) var(--xs-p);
-    border-radius: var(--border-radius-round);
-    outline: none;
-
-    &:focus {
-      border: 1px solid var(--primary-color);
-      box-shadow: 0 0 0 2px var(--primary-color-faded);
-    }
-
-    &--primary {
-      background-color: var(--primary-color);
-      color: var(--white);
-    }
-
-    &--default {
-      border: 2px solid var(--border);
-    }
-  }
-}
-
-.dark.str-chat {
-  .str-chat__message-attachment-actions {
-    &-button {
-      color: var(--white);
-
-      &--default {
-        border-color: var(--grey-whisper);
-      }
-    }
-  }
-}

package/dist/scss/Audio.scss

@@ -1,113 +0,0 @@
-.str-chat__audio {
-  &__wrapper {
-    height: 80px;
-    overflow: hidden;
-    position: relative;
-    border-radius: var(--border-radius-sm);
-    margin: 0;
-    display: flex;
-    background: var(--grey-whisper);
-  }
-
-  &__image {
-    height: 80px;
-    width: 80px;
-    position: relative;
-    z-index: 20;
-
-    &--overlay {
-      width: inherit;
-      height: inherit;
-      position: absolute;
-      top: 0;
-      left: 0;
-      background: var(--overlay-dark);
-      z-index: 30;
-      font-size: 3em;
-      color: var(--white-smoke);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      user-select: none;
-    }
-
-    &--button {
-      margin: 0;
-      padding: 0;
-      display: flex;
-      align-items: center;
-      width: 40px;
-      height: 40px;
-
-      svg {
-        fill: var(--white-smoke);
-      }
-    }
-
-    img {
-      z-index: 20;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: inherit;
-      height: inherit;
-      object-fit: cover;
-    }
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    padding: var(--xs-p) var(--sm-p);
-    margin-left: var(--sm-m);
-    width: 100%;
-
-    &--title {
-      margin: 0;
-      padding: 0;
-      line-height: 1;
-      font-size: var(--md-font);
-    }
-
-    &--subtitle {
-      margin: 0;
-      padding: 0;
-      line-height: 1;
-      font-size: var(--sm-font);
-      opacity: 0.49;
-    }
-
-    &--progress {
-      height: 6px;
-      width: 100%;
-      border-radius: var(--border-radius-sm);
-      background: var(--overlay);
-      padding: 1px;
-      margin: calc(var(--xxs-m) / 2) 0; //TODO-CSS
-
-      > div {
-        height: 4px;
-        border-radius: var(--border-radius-sm);
-        width: 0;
-        background: var(--primary-color);
-        transition: width 0.5s linear;
-      }
-    }
-  }
-}
-
-.str-chat.dark {
-  .str-chat__audio {
-    &__wrapper {
-      background: var(--black);
-      color: var(--white);
-    }
-
-    &__content {
-      &--progress {
-        background: var(--grey);
-      }
-    }
-  }
-}

package/dist/scss/Avatar.scss

@@ -1,79 +0,0 @@
-.str-chat__avatar {
-  width: 32px;
-  height: 32px;
-  flex: 0 0 32px;
-  margin-right: var(--xs-m);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--white);
-  text-transform: uppercase;
-  overflow: hidden;
-
-  &--circle {
-    border-radius: var(--border-radius-round);
-  }
-
-  &--rounded {
-    border-radius: var(--border-radius-sm);
-  }
-
-  &--square {
-    border-radius: 0;
-  }
-
-  &-image,
-  &-fallback {
-    display: block;
-    width: inherit;
-    height: inherit;
-    object-fit: cover;
-    text-align: center;
-  }
-
-  &-image--loaded {
-    background-color: transparent;
-  }
-
-  &-fallback {
-    background-color: var(--primary-color);
-  }
-}
-
-.str-chat__message {
-  &--me {
-    %order {
-      order: 1;
-    }
-
-    %margin {
-      margin: 0;
-      margin-left: var(--xs-m);
-    }
-
-    > .str-chat__avatar {
-      @extend %order;
-      @extend %margin;
-    }
-
-    > .str-chat-angular__avatar-host {
-      @extend %order;
-
-      .str-chat__avatar {
-        @extend %margin;
-      }
-    }
-  }
-}
-
-.str-chat__li {
-  &--top,
-  &--middle {
-    .str-chat__message {
-      > .str-chat__avatar,
-      > .str-chat-angular__avatar-host {
-        visibility: hidden;
-      }
-    }
-  }
-}

package/dist/scss/Card.scss

@@ -1,125 +0,0 @@
-.str-chat__message-attachment-card:not(.str-chat__message-attachment-card--giphy) {
-  .str-chat__message-attachment-card--header {
-    img {
-      width: inherit;
-      height: inherit;
-    }
-  }
-}
-
-.str-chat__message-attachment-card {
-  position: relative;
-  background: var(--white);
-  border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0;
-  overflow: hidden;
-  font-size: var(--sm-font);
-  border: 10px solid var(--border);
-  margin: var(--lg-m) 0 0 0;
-
-  &--header {
-    width: 100%;
-    height: 175px;
-
-    img {
-      object-fit: cover;
-    }
-  }
-
-  &--title {
-    font-weight: var(--font-weight-bold);
-    flex: 1;
-  }
-
-  &--flex {
-    min-width: 0;
-
-    &,
-    > * {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  &--content {
-    padding: var(--xs-p) var(--sm-p);
-    margin: calc(-1 * var(--xs-m));
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-
-    > * {
-      margin: var(--xs-m) 0;
-    }
-  }
-
-  &--url {
-    text-decoration: none;
-    display: block;
-    color: var(--black);
-    text-transform: uppercase;
-    opacity: 0.5;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
-  }
-
-  &--giphy &--header {
-    height: unset;
-  }
-}
-
-.giphy-preview-message {
-  .str-chat__message-attachment-card--giphy {
-    display: flex;
-    flex-direction: column;
-
-    .str-chat__message-attachment-card--header {
-      display: flex;
-      justify-content: center;
-      background-color: white;
-      
-      .str-chat__message-attachment--img {
-        width: unset;
-      }
-    }
-
-  }
-}
-
-.str-chat.commerce {
-  .str-chat__message-attachment-card {
-    max-width: 375px;
-    width: 100%;
-  }
-}
-
-.str-chat__message--me {
-  .str-chat__message-attachment-card {
-    background: var(--overlay);
-    border: 1px solid transparent;
-    border-radius: var(--border-radius) var(--border-radius) 0 var(--border-radius);
-  }
-}
-
-.dark.str-chat {
-  .str-chat__message-attachment-card__giphy-logo {
-    filter: invert(100%);
-  }
-}
-
-.str-chat__message-attachment-card.str-chat__message-attachment-card--giphy {
-  .str-chat__message-attachment-card--content {
-    background-image: url('#{$assetsPath}/Poweredby_100px-White_VertText.png');
-    background-position: right var(--border-radius) bottom var(--border-radius);
-    background-repeat: no-repeat;
-    /* that was the original sizing of the img in React */
-    background-size: 56px;
-  }
-}