stream-chat-angular 4.39.5 → 4.39.7

package/fesm2015/stream-chat-angular.js

@@ -20,7 +20,7 @@ import transliterate from '@stream-io/transliterate';
 import * as i8 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '4.39.5';
+const version = '4.39.7';
 
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -309,6 +309,7 @@ class ChannelService {
         this.activeChannelPinnedMessagesSubject = new BehaviorSubject([]);
         this.hasMoreChannelsSubject = new ReplaySubject(1);
         this.activeChannelSubscriptions = [];
+        this.channelSubscriptions = {};
         this.activeParentMessageIdSubject = new BehaviorSubject(undefined);
         this.activeThreadMessagesSubject = new BehaviorSubject([]);
         this.jumpToMessageSubject = new BehaviorSubject({ id: undefined, parentId: undefined });
@@ -320,12 +321,12 @@ class ChannelService {
         this._shouldMarkActiveChannelAsRead = true;
         this.isStateRecoveryInProgress = false;
         this.channelQueryStateSubject = new BehaviorSubject(undefined);
-        this.channelListSetter = (channels) => {
+        this.channelListSetter = (channels, shouldStopWatchingRemovedChannels = true) => {
             const currentChannels = this.channelsSubject.getValue() || [];
             const newChannels = channels.filter((c) => !currentChannels.find((channel) => channel.cid === c.cid));
             const deletedChannels = currentChannels.filter((c) => !(channels === null || channels === void 0 ? void 0 : channels.find((channel) => channel.cid === c.cid)));
             void this.addChannelsFromNotification(newChannels);
-            this.removeChannelsFromChannelList(deletedChannels.map((c) => c.cid));
+            this.removeChannelsFromChannelList(deletedChannels.map((c) => c.cid), shouldStopWatchingRemovedChannels);
         };
         this.messageListSetter = (messages) => {
             this.activeChannelMessagesSubject.next(messages);
@@ -568,6 +569,10 @@ class ChannelService {
         (_a = this.clientEventsSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         (_b = this.dismissErrorNotification) === null || _b === void 0 ? void 0 : _b.call(this);
         this.dismissErrorNotification = undefined;
+        Object.keys(this.channelSubscriptions).forEach((cid) => {
+            this.channelSubscriptions[cid]();
+        });
+        this.channelSubscriptions = {};
     }
     /**
      * Loads the next page of channels. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object.
@@ -966,7 +971,7 @@ class ChannelService {
     }
     handleRemovedFromChannelNotification(clientEvent) {
         const channelIdToBeRemoved = clientEvent.event.channel.cid;
-        this.removeChannelsFromChannelList([channelIdToBeRemoved]);
+        this.removeChannelsFromChannelList([channelIdToBeRemoved], true);
     }
     handleNewMessageNotification(clientEvent) {
         if (clientEvent.event.channel) {
@@ -996,13 +1001,19 @@ class ChannelService {
             }
         });
     }
-    removeChannelsFromChannelList(cids) {
+    removeChannelsFromChannelList(cids, shouldStopWatching) {
         var _a;
         const channels = this.channels.filter((c) => !cids.includes(c.cid || ''));
-        cids.forEach((cid) => {
-            var _a;
-            return void ((_a = this.chatClientService.chatClient.activeChannels[cid]) === null || _a === void 0 ? void 0 : _a.stopWatching());
-        });
+        if (shouldStopWatching) {
+            cids.forEach((cid) => {
+                var _a;
+                if (this.channelSubscriptions[cid]) {
+                    this.channelSubscriptions[cid]();
+                    delete this.channelSubscriptions.cid;
+                }
+                void ((_a = this.chatClientService.chatClient.activeChannels[cid]) === null || _a === void 0 ? void 0 : _a.stopWatching());
+            });
+        }
         if (channels.length < this.channels.length) {
             this.channelsSubject.next(channels);
             if (cids.includes(((_a = this.activeChannelSubject.getValue()) === null || _a === void 0 ? void 0 : _a.cid) || '')) {
@@ -1197,7 +1208,7 @@ class ChannelService {
         });
     }
     watchForChannelEvents(channel) {
-        channel.on((event) => {
+        const unsubscribe = channel.on((event) => {
             switch (event.type) {
                 case 'message.new': {
                     this.ngZone.run(() => {
@@ -1267,6 +1278,7 @@ class ChannelService {
                 }
             }
         });
+        this.channelSubscriptions[channel.cid] = unsubscribe.unsubscribe;
     }
     handleNewMessage(_, channel) {
         const channelIndex = this.channels.findIndex((c) => c.cid === channel.cid);
@@ -1274,10 +1286,10 @@ class ChannelService {
         this.channelsSubject.next([channel, ...this.channels]);
     }
     handleChannelHidden(event) {
-        this.removeChannelsFromChannelList([event.channel.cid]);
+        this.removeChannelsFromChannelList([event.channel.cid], false);
     }
     handleChannelDeleted(event) {
-        this.removeChannelsFromChannelList([event.channel.cid]);
+        this.removeChannelsFromChannelList([event.channel.cid], true);
     }
     handleChannelVisible(event, channel) {
         if (!this.channels.find((c) => c.cid === event.cid)) {
@@ -2469,11 +2481,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  * The `AvatarPlaceholder` component displays the [default avatar](./AvatarComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This component is used by the SDK internally, you likely won't need to use it.
  */
 class AvatarPlaceholderComponent {
-    constructor(customTemplatesService, hostElement, cdRef, themeService) {
+    constructor(customTemplatesService) {
         this.customTemplatesService = customTemplatesService;
-        this.hostElement = hostElement;
-        this.cdRef = cdRef;
-        this.themeService = themeService;
         /**
          * The size in pixels of the avatar image.
          */
@@ -2497,26 +2506,6 @@ class AvatarPlaceholderComponent {
             initialsType: undefined,
             showOnlineIndicator: undefined,
         };
-        this.isVisible = true;
-    }
-    ngAfterViewInit() {
-        var _a, _b;
-        const elementToObserve = (_b = (_a = this.hostElement.nativeElement.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement;
-        if (this.location !== 'message-sender' ||
-            !elementToObserve ||
-            !elementToObserve.classList.contains('str-chat__li') ||
-            this.themeService.themeVersion === '1') {
-            this.isVisible = true;
-            this.cdRef.detectChanges();
-            return;
-        }
-        this.checkIfVisible();
-        this.mutationObserver = new MutationObserver(() => {
-            this.checkIfVisible();
-        });
-        this.mutationObserver.observe(elementToObserve, {
-            attributeFilter: ['class'],
-        });
     }
     ngOnChanges() {
         this.context = {
@@ -2531,20 +2520,9 @@ class AvatarPlaceholderComponent {
             showOnlineIndicator: this.showOnlineIndicator,
         };
     }
-    ngOnDestroy() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    checkIfVisible() {
-        const isVisible = getComputedStyle(this.hostElement.nativeElement).getPropertyValue('visibility') === 'visible';
-        if (isVisible !== this.isVisible) {
-            this.isVisible = isVisible;
-            this.cdRef.detectChanges();
-        }
-    }
 }
-AvatarPlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AvatarPlaceholderComponent, deps: [{ token: CustomTemplatesService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-AvatarPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: { name: "name", imageUrl: "imageUrl", size: "size", location: "location", channel: "channel", user: "user", type: "type", initialsType: "initialsType", showOnlineIndicator: "showOnlineIndicator" }, usesOnChanges: true, ngImport: i0, template: "<ng-template\n  #defaultAvatar\n  let-name=\"name\"\n  let-imageUrl=\"imageUrl\"\n  let-size=\"size\"\n  let-type=\"type\"\n  let-channel=\"channel\"\n  let-user=\"user\"\n  let-location=\"location\"\n  let-initialsType=\"initialsType\"\n  let-showOnlineIndicator=\"showOnlineIndicator\"\n>\n  <stream-avatar\n    [name]=\"name\"\n    [imageUrl]=\"imageUrl\"\n    [size]=\"size\"\n    [type]=\"type\"\n    [channel]=\"channel\"\n    [user]=\"user\"\n    [location]=\"location\"\n    [initialsType]=\"initialsType\"\n    [showOnlineIndicator]=\"showOnlineIndicator\"\n  ></stream-avatar>\n</ng-template>\n<ng-container *ngIf=\"isVisible; else emptyPlaceholder\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.avatarTemplate$ | async) || defaultAvatar;\n      context: context\n    \"\n  ></ng-container>\n</ng-container>\n<ng-template #emptyPlaceholder>\n  <div\n    class=\"str-chat__avatar\"\n    [ngStyle]=\"{\n      width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n      height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n    }\"\n  ></div>\n</ng-template>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "showOnlineIndicator", "initialsType"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i5.AsyncPipe } });
+AvatarPlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AvatarPlaceholderComponent, deps: [{ token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
+AvatarPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: { name: "name", imageUrl: "imageUrl", size: "size", location: "location", channel: "channel", user: "user", type: "type", initialsType: "initialsType", showOnlineIndicator: "showOnlineIndicator" }, usesOnChanges: true, ngImport: i0, template: "<ng-template\n  #defaultAvatar\n  let-name=\"name\"\n  let-imageUrl=\"imageUrl\"\n  let-size=\"size\"\n  let-type=\"type\"\n  let-channel=\"channel\"\n  let-user=\"user\"\n  let-location=\"location\"\n  let-initialsType=\"initialsType\"\n  let-showOnlineIndicator=\"showOnlineIndicator\"\n>\n  <stream-avatar\n    [name]=\"name\"\n    [imageUrl]=\"imageUrl\"\n    [size]=\"size\"\n    [type]=\"type\"\n    [channel]=\"channel\"\n    [user]=\"user\"\n    [location]=\"location\"\n    [initialsType]=\"initialsType\"\n    [showOnlineIndicator]=\"showOnlineIndicator\"\n  ></stream-avatar>\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.avatarTemplate$ | async) || defaultAvatar;\n    context: context\n  \"\n></ng-container>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "showOnlineIndicator", "initialsType"] }], directives: [{ type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i5.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AvatarPlaceholderComponent, decorators: [{
             type: Component,
             args: [{
@@ -2552,7 +2530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                     templateUrl: './avatar-placeholder.component.html',
                     styles: [],
                 }]
-        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: ThemeService }]; }, propDecorators: { name: [{
+        }], ctorParameters: function () { return [{ type: CustomTemplatesService }]; }, propDecorators: { name: [{
                 type: Input
             }], imageUrl: [{
                 type: Input