stream-chat-angular 4.2.0 → 4.4.0

package/assets/version.d.ts

@@ -1 +1 @@
-export declare const version = "4.2.0";
+export declare const version = "4.4.0";

package/bundles/stream-chat-angular.umd.js

@@ -355,7 +355,7 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var version = '4.2.0';
+    var version = '4.4.0';
 
     /**
      * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -2363,7 +2363,8 @@
                 attachment.thumb_url ||
                 attachment.image_url ||
                 ''));
-            var _b = this.getSizingRestrictions(url, element), sizeRestriction = _b.sizeRestriction, height = _b.height;
+            var displayWarning = location === 'gallery' || location === 'single';
+            var _b = this.getSizingRestrictions(url, element, displayWarning), sizeRestriction = _b.sizeRestriction, height = _b.height;
             if (sizeRestriction) {
                 // Apply 2x for retina displays
                 sizeRestriction.height *= 2;
@@ -2389,7 +2390,8 @@
             var thumbUrl = undefined;
             if (attachment.thumb_url && this.shouldGenerateVideoThumbnail) {
                 var url = new URL(attachment.thumb_url);
-                var _b = this.getSizingRestrictions(url, element), sizeRestriction = _b.sizeRestriction, height = _b.height;
+                var displayWarning = true;
+                var _b = this.getSizingRestrictions(url, element, displayWarning), sizeRestriction = _b.sizeRestriction, height = _b.height;
                 if (sizeRestriction) {
                     sizeRestriction.height *= 2;
                     sizeRestriction.width *= 2;
@@ -2443,7 +2445,8 @@
             url.searchParams.set('h', sizeRestriction.height.toString());
             url.searchParams.set('w', sizeRestriction.width.toString());
         };
-        AttachmentConfigurationService.prototype.getSizingRestrictions = function (url, htmlElement) {
+        AttachmentConfigurationService.prototype.getSizingRestrictions = function (url, htmlElement, displayWarning) {
+            if (displayWarning === void 0) { displayWarning = false; }
             var urlParams = url.searchParams;
             var originalHeight = Number(urlParams.get('oh')) || 1;
             var originalWidth = Number(urlParams.get('ow')) || 1;
@@ -2466,6 +2469,9 @@
             }
             else {
                 sizeRestriction = undefined;
+                if (displayWarning) {
+                    console.warn("Invalid value set for height/max-height and/or max-width for HTML element, this can cause scrolling issues inside the message list, more info https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/#image-and-video-sizing");
+                }
             }
             return { sizeRestriction: sizeRestriction, height: height };
         };
@@ -2634,8 +2640,7 @@
         }
         Object.defineProperty(AvatarComponent.prototype, "initials", {
             get: function () {
-                var _this = this;
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                var _a, _b, _c, _d, _e;
                 var result = '';
                 if (this.type === 'user') {
                     result = ((_a = this.name) === null || _a === void 0 ? void 0 : _a.toString()) || '';
@@ -2645,9 +2650,9 @@
                         result = (_e = (_d = this.channel) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.name;
                     }
                     else {
-                        var otherMembers = Object.values(((_g = (_f = this.channel) === null || _f === void 0 ? void 0 : _f.state) === null || _g === void 0 ? void 0 : _g.members) || {}).filter(function (m) { var _a; return m.user_id !== ((_a = _this.chatClientService.chatClient.user) === null || _a === void 0 ? void 0 : _a.id); });
-                        if (otherMembers.length === 1) {
-                            result = ((_h = otherMembers[0].user) === null || _h === void 0 ? void 0 : _h.name) || ((_j = otherMembers[0].user) === null || _j === void 0 ? void 0 : _j.id) || '';
+                        var otherMember = this.getOtherMemberIfOneToOneChannel();
+                        if (otherMember) {
+                            result = otherMember.name || otherMember.id || '';
                         }
                         else {
                             result = '#';
@@ -2659,10 +2664,39 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(AvatarComponent.prototype, "fallbackChannelImage", {
+            get: function () {
+                if (this.type !== 'channel') {
+                    return undefined;
+                }
+                else {
+                    var otherMember = this.getOtherMemberIfOneToOneChannel();
+                    if (otherMember) {
+                        return otherMember.image;
+                    }
+                    else {
+                        return undefined;
+                    }
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AvatarComponent.prototype.getOtherMemberIfOneToOneChannel = function () {
+            var _this = this;
+            var _a, _b;
+            var otherMembers = Object.values(((_b = (_a = this.channel) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.members) || {}).filter(function (m) { var _a; return m.user_id !== ((_a = _this.chatClientService.chatClient.user) === null || _a === void 0 ? void 0 : _a.id); });
+            if (otherMembers.length === 1) {
+                return otherMembers[0].user;
+            }
+            else {
+                return undefined;
+            }
+        };
         return AvatarComponent;
     }());
     AvatarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarComponent, deps: [{ token: ChatClientService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AvatarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarComponent, selector: "stream-avatar", inputs: { name: "name", imageUrl: "imageUrl", size: "size", location: "location", channel: "channel", user: "user", type: "type" }, ngImport: i0__namespace, template: "<div\n  class=\"str-chat__avatar str-chat__avatar--circle stream-chat__avatar--{{\n    location\n  }}\"\n  title=\"{{ name }}\"\n  [style]=\"{\n    flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    fontSize: 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 2 + ')',\n    height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    lineHeight: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n  }\"\n>\n  <img\n    *ngIf=\"imageUrl && !isError; else fallback\"\n    class=\"str-chat__avatar-image str-chat__avatar-image{{\n      isLoaded ? ' str-chat__avatar-image--loaded' : ''\n    }}\"\n    src=\"{{ imageUrl }}\"\n    alt=\"{{ initials }}\"\n    data-testid=\"avatar-img\"\n    (load)=\"isLoaded = true\"\n    (error)=\"isError = true\"\n    [style]=\"{\n      flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n      height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n      objectFit: 'cover',\n      width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n    }\"\n  />\n  <ng-template #fallback>\n    <div data-testid=\"fallback-img\" class=\"str-chat__avatar-fallback\">\n      {{ initials }}\n    </div>\n  </ng-template>\n</div>\n", styles: [""], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    AvatarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarComponent, selector: "stream-avatar", inputs: { name: "name", imageUrl: "imageUrl", size: "size", location: "location", channel: "channel", user: "user", type: "type" }, ngImport: i0__namespace, template: "<div\n  class=\"str-chat__avatar str-chat__avatar--circle stream-chat__avatar--{{\n    location\n  }}\"\n  title=\"{{ name }}\"\n  [style]=\"{\n    flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    fontSize: 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 2 + ')',\n    height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    lineHeight: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n  }\"\n>\n  <img\n    *ngIf=\"(imageUrl || fallbackChannelImage) && !isError; else fallback\"\n    class=\"str-chat__avatar-image str-chat__avatar-image{{\n      isLoaded ? ' str-chat__avatar-image--loaded' : ''\n    }}\"\n    src=\"{{ imageUrl || fallbackChannelImage }}\"\n    alt=\"{{ initials }}\"\n    data-testid=\"avatar-img\"\n    (load)=\"isLoaded = true\"\n    (error)=\"isError = true\"\n    [style]=\"{\n      flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n      height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n      objectFit: 'cover',\n      width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n    }\"\n  />\n  <ng-template #fallback>\n    <div data-testid=\"fallback-img\" class=\"str-chat__avatar-fallback\">\n      {{ initials }}\n    </div>\n  </ng-template>\n</div>\n", styles: [""], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarComponent, decorators: [{
                 type: i0.Component,
                 args: [{