stream-chat-angular 3.1.0 → 3.2.0

package/assets/version.d.ts

@@ -1 +1 @@
-export declare const version = "3.1.0";
+export declare const version = "3.2.0";

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

@@ -354,7 +354,7 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var version = '3.1.0';
+    var version = '3.2.0';
 
     /**
      * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -728,7 +728,7 @@
                 this.latestMessageDateByUserByChannelsSubject.asObservable();
         }
         /**
-         * Sets the given `channel` as active.
+         * Sets the given `channel` as active and marks it as read.
          * @param channel
          */
         ChannelService.prototype.setAsActiveChannel = function (channel) {
@@ -853,7 +853,7 @@
             });
         };
         /**
-         * Queries the channels with the given filters, sorts and options. More info about [channel querying](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript) can be found in the platform documentation.
+         * Queries the channels with the given filters, sorts and options. More info about [channel querying](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript) can be found in the platform documentation. By default the first channel in the list will be set as active channel and will be marked as read.
          * @param filters
          * @param sort
          * @param options
@@ -3641,6 +3641,32 @@
                     }]
             }], ctorParameters: function () { return [{ type: ChannelService }]; } });
 
+    var listUsers = function (users) {
+        var outStr = '';
+        var slicedArr = users.map(function (item) { return item.name || item.id; }).slice(0, 5);
+        var restLength = users.length - slicedArr.length;
+        var commaSeparatedUsers = slicedArr.join(', ');
+        outStr = commaSeparatedUsers;
+        if (restLength > 0) {
+            outStr += " +" + restLength;
+        }
+        return outStr;
+    };
+
+    var getChannelDisplayText = function (channel, currentUser) {
+        var _a;
+        if ((_a = channel.data) === null || _a === void 0 ? void 0 : _a.name) {
+            return channel.data.name;
+        }
+        if (channel.state.members && Object.keys(channel.state.members).length > 0) {
+            var members = Object.values(channel.state.members)
+                .map(function (m) { return m.user || { id: m.user_id }; })
+                .filter(function (m) { return m.id !== currentUser.id; });
+            return listUsers(members);
+        }
+        return channel.id;
+    };
+
     var getDeviceWidth = function () {
         var width = window.innerWidth;
         if (width < 768)
@@ -3728,12 +3754,13 @@
      * The `ChannelHeader` component displays the avatar and name of the currently active channel along with member and watcher information. You can read about [the difference between members and watchers](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript#watchers-vs-members) in the platform documentation. Please note that number of watchers is only displayed if the user has [`connect-events` capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript)
      */
     var ChannelHeaderComponent = /** @class */ (function () {
-        function ChannelHeaderComponent(channelService, channelListToggleService, customTemplatesService, cdRef) {
+        function ChannelHeaderComponent(channelService, channelListToggleService, customTemplatesService, cdRef, chatClientService) {
             var _this = this;
             this.channelService = channelService;
             this.channelListToggleService = channelListToggleService;
             this.customTemplatesService = customTemplatesService;
             this.cdRef = cdRef;
+            this.chatClientService = chatClientService;
             this.subscriptions = [];
             this.channelService.activeChannel$.subscribe(function (c) {
                 var _a, _b;
@@ -3779,10 +3806,36 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(ChannelHeaderComponent.prototype, "displayText", {
+            get: function () {
+                if (!this.activeChannel) {
+                    return '';
+                }
+                return getChannelDisplayText(this.activeChannel, this.chatClientService.chatClient.user);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ChannelHeaderComponent.prototype, "avatarName", {
+            get: function () {
+                var _this = this;
+                var _a, _b, _c, _d, _e, _f, _g;
+                if ((_b = (_a = this.activeChannel) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.name) {
+                    return (_d = (_c = this.activeChannel) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.name;
+                }
+                var otherMembers = Object.values(((_e = this.activeChannel) === null || _e === void 0 ? void 0 : _e.state.members) || {}).filter(function (m) { return m.user_id !== _this.chatClientService.chatClient.user.id; });
+                if (otherMembers.length === 1) {
+                    return ((_f = otherMembers[0].user) === null || _f === void 0 ? void 0 : _f.name) || ((_g = otherMembers[0].user) === null || _g === void 0 ? void 0 : _g.name);
+                }
+                return '#';
+            },
+            enumerable: false,
+            configurable: true
+        });
         return ChannelHeaderComponent;
     }());
-    ChannelHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelHeaderComponent, deps: [{ token: ChannelService }, { token: ChannelListToggleService }, { token: CustomTemplatesService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ChannelHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelHeaderComponent, selector: "stream-channel-header", ngImport: i0__namespace, template: "<div class=\"str-chat__header-livestream\">\n  <div\n    class=\"str-chat__header-hamburger\"\n    (click)=\"toggleMenu($event)\"\n    (keyup.enter)=\"toggleMenu($event)\"\n  >\n    <stream-icon-placeholder icon=\"menu\"></stream-icon-placeholder>\n  </div>\n  <stream-avatar-placeholder\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ activeChannel?.data?.name }}\"\n  ></stream-avatar-placeholder>\n  <div class=\"str-chat__header-livestream-left\">\n    <p data-testid=\"name\" class=\"str-chat__header-livestream-left--title\">\n      {{ activeChannel?.data?.name }}\n    </p>\n    <p data-testid=\"info\" class=\"str-chat__header-livestream-left--members\">\n      {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n      {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n      translate:watcherCountParam) : ''}}\n    </p>\n  </div>\n  <ng-container *ngIf=\"channelActionsTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelActionsTemplate;\n        context: getChannelActionsContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i9__namespace.TranslatePipe } });
+    ChannelHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelHeaderComponent, deps: [{ token: ChannelService }, { token: ChannelListToggleService }, { token: CustomTemplatesService }, { token: i0__namespace.ChangeDetectorRef }, { token: ChatClientService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ChannelHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelHeaderComponent, selector: "stream-channel-header", ngImport: i0__namespace, template: "<div class=\"str-chat__header-livestream\">\n  <div\n    class=\"str-chat__header-hamburger\"\n    (click)=\"toggleMenu($event)\"\n    (keyup.enter)=\"toggleMenu($event)\"\n  >\n    <stream-icon-placeholder icon=\"menu\"></stream-icon-placeholder>\n  </div>\n  <stream-avatar-placeholder\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ avatarName }}\"\n  ></stream-avatar-placeholder>\n  <div class=\"str-chat__header-livestream-left\">\n    <p data-testid=\"name\" class=\"str-chat__header-livestream-left--title\">\n      {{ displayText }}\n    </p>\n    <p data-testid=\"info\" class=\"str-chat__header-livestream-left--members\">\n      {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n      {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n      translate:watcherCountParam) : ''}}\n    </p>\n  </div>\n  <ng-container *ngIf=\"channelActionsTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelActionsTemplate;\n        context: getChannelActionsContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i9__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelHeaderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3790,15 +3843,16 @@
                         templateUrl: './channel-header.component.html',
                         styles: [],
                     }]
-            }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChannelListToggleService }, { type: CustomTemplatesService }, { type: i0__namespace.ChangeDetectorRef }]; } });
+            }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChannelListToggleService }, { type: CustomTemplatesService }, { type: i0__namespace.ChangeDetectorRef }, { type: ChatClientService }]; } });
 
     /**
      * The `ChannelPreview` component displays a channel preview in the channel list, it consists of the image, name and latest message of the channel.
      */
     var ChannelPreviewComponent = /** @class */ (function () {
-        function ChannelPreviewComponent(channelService, ngZone) {
+        function ChannelPreviewComponent(channelService, ngZone, chatClientService) {
             this.channelService = channelService;
             this.ngZone = ngZone;
+            this.chatClientService = chatClientService;
             this.isActive = false;
             this.isUnread = false;
             this.latestMessage = 'Nothing yet...';
@@ -3838,16 +3892,26 @@
         });
         Object.defineProperty(ChannelPreviewComponent.prototype, "avatarName", {
             get: function () {
-                var _a, _b;
-                return (_b = (_a = this.channel) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.name;
+                var _this = this;
+                var _a, _b, _c, _d, _e, _f, _g;
+                if ((_b = (_a = this.channel) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.name) {
+                    return (_d = (_c = this.channel) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.name;
+                }
+                var otherMembers = Object.values(((_e = this.channel) === null || _e === void 0 ? void 0 : _e.state.members) || {}).filter(function (m) { return m.user_id !== _this.chatClientService.chatClient.user.id; });
+                if (otherMembers.length === 1) {
+                    return ((_f = otherMembers[0].user) === null || _f === void 0 ? void 0 : _f.name) || ((_g = otherMembers[0].user) === null || _g === void 0 ? void 0 : _g.name);
+                }
+                return '#';
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(ChannelPreviewComponent.prototype, "title", {
             get: function () {
-                var _a, _b;
-                return (_b = (_a = this.channel) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.name;
+                if (!this.channel) {
+                    return '';
+                }
+                return getChannelDisplayText(this.channel, this.chatClientService.chatClient.user);
             },
             enumerable: false,
             configurable: true
@@ -3884,8 +3948,8 @@
         };
         return ChannelPreviewComponent;
     }());
-    ChannelPreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelPreviewComponent, deps: [{ token: ChannelService }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ChannelPreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0__namespace, template: "<button\n  class=\"str-chat__channel-preview-messenger\"\n  [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n  [class.str-chat__channel-preview-messenger--unread]=\"isUnread\"\n  (click)=\"setAsActiveChannel()\"\n  data-testid=\"channel-preview-container\"\n>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar-placeholder\n      imageUrl=\"{{ avatarImage }}\"\n      name=\"{{ avatarName }}\"\n      [size]=\"40\"\n    ></stream-avatar-placeholder>\n  </div>\n  <div class=\"str-chat__channel-preview-messenger--right\">\n    <div class=\"str-chat__channel-preview-messenger--name\">\n      <span data-testid=\"channel-preview-title\">{{ title }}</span>\n    </div>\n    <div\n      data-testid=\"latest-message\"\n      class=\"str-chat__channel-preview-messenger--last-message\"\n    >\n      {{ latestMessage | translate }}\n    </div>\n  </div>\n</button>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }], pipes: { "translate": i9__namespace.TranslatePipe } });
+    ChannelPreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelPreviewComponent, deps: [{ token: ChannelService }, { token: i0__namespace.NgZone }, { token: ChatClientService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ChannelPreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0__namespace, template: "<button\n  class=\"str-chat__channel-preview-messenger\"\n  [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n  [class.str-chat__channel-preview-messenger--unread]=\"isUnread\"\n  (click)=\"setAsActiveChannel()\"\n  data-testid=\"channel-preview-container\"\n>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar-placeholder\n      imageUrl=\"{{ avatarImage }}\"\n      name=\"{{ avatarName }}\"\n      [size]=\"40\"\n    ></stream-avatar-placeholder>\n  </div>\n  <div class=\"str-chat__channel-preview-messenger--right\">\n    <div\n      style=\"position: relative\"\n      class=\"str-chat__channel-preview-messenger--name\"\n    >\n      <span data-testid=\"channel-preview-title\">{{ title }}</span>\n    </div>\n    <div\n      data-testid=\"latest-message\"\n      class=\"str-chat__channel-preview-messenger--last-message\"\n    >\n      {{ latestMessage | translate }}\n    </div>\n  </div>\n</button>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }], pipes: { "translate": i9__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelPreviewComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3893,7 +3957,7 @@
                         templateUrl: './channel-preview.component.html',
                         styles: [],
                     }]
-            }], ctorParameters: function () { return [{ type: ChannelService }, { type: i0__namespace.NgZone }]; }, propDecorators: { channel: [{
+            }], ctorParameters: function () { return [{ type: ChannelService }, { type: i0__namespace.NgZone }, { type: ChatClientService }]; }, propDecorators: { channel: [{
                     type: i0.Input
                 }] } });
 
@@ -3969,35 +4033,6 @@
         return parsedTime.calendar();
     };
 
-    var getReadByText = function (users) {
-        var outStr = '';
-        var slicedArr = users.map(function (item) { return item.name || item.id; }).slice(0, 5);
-        var restLength = users.length - slicedArr.length;
-        if (slicedArr.length === 1) {
-            outStr = slicedArr[0] + " ";
-        }
-        else if (slicedArr.length === 2) {
-            // joins all with "and" but =no commas
-            // example: "bob and sam"
-            outStr = slicedArr[0] + " and " + slicedArr[1];
-        }
-        else if (slicedArr.length > 2) {
-            // joins all with commas, but last one gets ", and" (oxford comma!)
-            // example: "bob, joe, sam and 4 more"
-            if (restLength === 0) {
-                // mutate slicedArr to remove last user to display it separately
-                var lastUser = slicedArr.splice(slicedArr.length - 2, 1)[0];
-                var commaSeparatedUsers = slicedArr.join(', ');
-                outStr = commaSeparatedUsers + ", and " + lastUser;
-            }
-            else {
-                var commaSeparatedUsers = slicedArr.join(', ');
-                outStr = commaSeparatedUsers + " and " + restLength + " more";
-            }
-        }
-        return outStr;
-    };
-
     var emojiReactionsMapping = {
         like: '👍',
         angry: '😠',
@@ -4217,7 +4252,7 @@
         });
         Object.defineProperty(MessageComponent.prototype, "readByText", {
             get: function () {
-                return getReadByText(this.message.readBy);
+                return listUsers(this.message.readBy);
             },
             enumerable: false,
             configurable: true
@@ -5362,9 +5397,9 @@
     exports.getDeviceWidth = getDeviceWidth;
     exports.getGroupStyles = getGroupStyles;
     exports.getReadBy = getReadBy;
-    exports.getReadByText = getReadByText;
     exports.isImageAttachment = isImageAttachment;
     exports.isImageFile = isImageFile;
+    exports.listUsers = listUsers;
     exports.parseDate = parseDate;
     exports.textareaInjectionToken = textareaInjectionToken;