stream-chat-angular 5.8.3 → 5.8.4

package/fesm2015/stream-chat-angular.mjs

@@ -22,7 +22,7 @@ import transliterate from '@stream-io/transliterate';
 import * as i7 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '5.8.3';
+const version = '5.8.4';
 
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -7822,6 +7822,7 @@ class MessageListComponent {
         this.isLatestMessageInList = true;
         this.parsedDates = new Map();
         this.isViewInited = false;
+        this.jumpToMessageTimeouts = [];
         this.forceRepaintSubject = new Subject();
         this.isSafari = isSafari();
         this.scrollPosition$ = new BehaviorSubject('bottom');
@@ -7850,6 +7851,9 @@ class MessageListComponent {
                 if (this.checkIfUnreadNotificationIsVisibleTimeout) {
                     clearTimeout(this.checkIfUnreadNotificationIsVisibleTimeout);
                 }
+                this.jumpToMessageTimeouts.forEach((timeout) => clearTimeout(timeout));
+                this.jumpToMessageTimeouts = [];
+                this.highlightedMessageId = undefined;
                 this.isUnreadNotificationVisible = false;
                 this.parsedDates = new Map();
                 this.resetScrollState();
@@ -8056,6 +8060,7 @@ class MessageListComponent {
         if (this.jumpToLatestButtonVisibilityTimeout) {
             clearTimeout(this.jumpToLatestButtonVisibilityTimeout);
         }
+        this.jumpToMessageTimeouts.forEach((timeout) => clearTimeout(timeout));
         this.disposeVirtualizedList();
     }
     trackByMessageId(_, item) {
@@ -8086,7 +8091,6 @@ class MessageListComponent {
         this.scrollContainer.nativeElement.scrollTop = 0;
     }
     scrolled() {
-        var _a;
         if (this.scrollContainer.nativeElement.scrollHeight ===
             this.scrollContainer.nativeElement.clientHeight) {
             if (this.isJumpToLatestButtonVisible) {
@@ -8103,19 +8107,7 @@ class MessageListComponent {
             }
         }
         this.scroll$.next();
-        let scrollPosition = this.getScrollPosition();
-        const isUserScrolled = (this.direction === 'bottom-to-top'
-            ? scrollPosition !== 'bottom'
-            : scrollPosition !== 'top') || !this.isLatestMessageInList;
-        if (this.isUserScrolled !== isUserScrolled) {
-            this.ngZone.run(() => {
-                this.isUserScrolled = isUserScrolled;
-                if (!this.isUserScrolled) {
-                    this.newMessageCountWhileBeingScrolled = 0;
-                }
-                this.cdRef.detectChanges();
-            });
-        }
+        this.checkIfUserScrolled();
         if (this.hideJumpToLatestButtonDuringScroll) {
             if (this.isJumpToLatestButtonVisible) {
                 this.isJumpToLatestButtonVisible = false;
@@ -8132,31 +8124,6 @@ class MessageListComponent {
                 }
             }, 100);
         }
-        const prevScrollPosition = this.scrollPosition$.getValue();
-        if (this.direction === 'top-to-bottom') {
-            if (scrollPosition === 'top') {
-                scrollPosition = 'bottom';
-            }
-            else if (scrollPosition === 'bottom') {
-                scrollPosition = 'top';
-            }
-        }
-        if (prevScrollPosition !== scrollPosition && !this.isJumpingToMessage) {
-            if (scrollPosition === 'top' || scrollPosition === 'bottom') {
-                (_a = this.virtualizedList) === null || _a === void 0 ? void 0 : _a.virtualizedItems$.pipe(take(1)).subscribe((items) => {
-                    var _a, _b, _c, _d;
-                    this.messageIdToAnchorTo =
-                        scrollPosition === 'top'
-                            ? (_a = items[0]) === null || _a === void 0 ? void 0 : _a.id
-                            : (_b = items[items.length - 1]) === null || _b === void 0 ? void 0 : _b.id;
-                    this.anchorMessageTopOffset = (_d = (_c = document
-                        .getElementById(this.messageIdToAnchorTo)) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.top;
-                });
-            }
-            this.ngZone.run(() => {
-                this.scrollPosition$.next(scrollPosition);
-            });
-        }
     }
     jumpToFirstUnreadMessage() {
         if (!this.lastReadMessageId) {
@@ -8198,6 +8165,47 @@ class MessageListComponent {
             ? this.emptyMainMessageListTemplate
             : this.emptyThreadMessageListTemplate;
     }
+    checkIfUserScrolled() {
+        var _a;
+        let scrollPosition = this.getScrollPosition();
+        const isUserScrolled = (this.direction === 'bottom-to-top'
+            ? scrollPosition !== 'bottom'
+            : scrollPosition !== 'top') || !this.isLatestMessageInList;
+        if (this.isUserScrolled !== isUserScrolled) {
+            this.ngZone.run(() => {
+                this.isUserScrolled = isUserScrolled;
+                if (!this.isUserScrolled) {
+                    this.newMessageCountWhileBeingScrolled = 0;
+                }
+                this.cdRef.detectChanges();
+            });
+        }
+        const prevScrollPosition = this.scrollPosition$.getValue();
+        if (this.direction === 'top-to-bottom') {
+            if (scrollPosition === 'top') {
+                scrollPosition = 'bottom';
+            }
+            else if (scrollPosition === 'bottom') {
+                scrollPosition = 'top';
+            }
+        }
+        if (prevScrollPosition !== scrollPosition && !this.isJumpingToMessage) {
+            if (scrollPosition === 'top' || scrollPosition === 'bottom') {
+                (_a = this.virtualizedList) === null || _a === void 0 ? void 0 : _a.virtualizedItems$.pipe(take(1)).subscribe((items) => {
+                    var _a, _b, _c, _d;
+                    this.messageIdToAnchorTo =
+                        scrollPosition === 'top'
+                            ? (_a = items[0]) === null || _a === void 0 ? void 0 : _a.id
+                            : (_b = items[items.length - 1]) === null || _b === void 0 ? void 0 : _b.id;
+                    this.anchorMessageTopOffset = (_d = (_c = document
+                        .getElementById(this.messageIdToAnchorTo)) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.top;
+                });
+            }
+            this.ngZone.run(() => {
+                this.scrollPosition$.next(scrollPosition);
+            });
+        }
+    }
     preserveScrollbarPosition() {
         var _a;
         if (!this.messageIdToAnchorTo) {
@@ -8350,9 +8358,11 @@ class MessageListComponent {
     }
     scrollMessageIntoView(options, withRetry = true) {
         const element = document.getElementById(options.messageId);
+        this.jumpToMessageTimeouts.forEach((t) => clearTimeout(t));
+        this.jumpToMessageTimeouts = [];
         if (!element && withRetry) {
             // If the message was newly inserted into activeChannelMessages$, the message will be rendered after the current change detection cycle -> wait for this cycle to complete
-            setTimeout(() => this.scrollMessageIntoView(options, false));
+            this.jumpToMessageTimeouts.push(setTimeout(() => this.scrollMessageIntoView(options, false)));
         }
         else if (element) {
             const blockMapping = {
@@ -8360,7 +8370,9 @@ class MessageListComponent {
                 bottom: 'end',
                 middle: 'center',
             };
+            // We can't know when smooth scrolling ends, so we set the behavior to instant https://github.com/w3c/csswg-drafts/issues/3744
             element.scrollIntoView({
+                behavior: 'instant',
                 block: blockMapping[options.position],
             });
             if (options.position !== 'middle') {
@@ -8368,15 +8380,19 @@ class MessageListComponent {
                     ? this.scrollToBottom()
                     : this.scrollToTop();
             }
-            setTimeout(() => {
+            this.jumpToMessageTimeouts.push(setTimeout(() => {
                 this.isJumpingToMessage = false;
-            }, 0);
-            setTimeout(() => {
+                if (!this.isUserScrolled) {
+                    this.checkIfUserScrolled();
+                }
+            }, 200));
+            this.jumpToMessageTimeouts.push(setTimeout(() => {
                 this.highlightedMessageId = undefined;
                 this.firstUnreadMessageId = undefined;
                 this.isJumpingToLatestUnreadMessage = false;
+                this.jumpToMessageTimeouts = [];
                 this.cdRef.detectChanges();
-            }, 1000);
+            }, 1000));
         }
     }
     newMessageReceived(message) {