stream-chat-angular 5.8.3 → 5.8.4

package/fesm2020/stream-chat-angular.mjs

@@ -21,7 +21,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.
@@ -7677,6 +7677,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');
@@ -7704,6 +7705,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();
@@ -7905,6 +7909,7 @@ class MessageListComponent {
         if (this.jumpToLatestButtonVisibilityTimeout) {
             clearTimeout(this.jumpToLatestButtonVisibilityTimeout);
         }
+        this.jumpToMessageTimeouts.forEach((timeout) => clearTimeout(timeout));
         this.disposeVirtualizedList();
     }
     trackByMessageId(_, item) {
@@ -7950,19 +7955,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;
@@ -7979,33 +7972,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') {
-                this.virtualizedList?.virtualizedItems$
-                    .pipe(take(1))
-                    .subscribe((items) => {
-                    this.messageIdToAnchorTo =
-                        scrollPosition === 'top'
-                            ? items[0]?.id
-                            : items[items.length - 1]?.id;
-                    this.anchorMessageTopOffset = document
-                        .getElementById(this.messageIdToAnchorTo)
-                        ?.getBoundingClientRect()?.top;
-                });
-            }
-            this.ngZone.run(() => {
-                this.scrollPosition$.next(scrollPosition);
-            });
-        }
     }
     jumpToFirstUnreadMessage() {
         if (!this.lastReadMessageId) {
@@ -8045,6 +8011,48 @@ class MessageListComponent {
             ? this.emptyMainMessageListTemplate
             : this.emptyThreadMessageListTemplate;
     }
+    checkIfUserScrolled() {
+        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') {
+                this.virtualizedList?.virtualizedItems$
+                    .pipe(take(1))
+                    .subscribe((items) => {
+                    this.messageIdToAnchorTo =
+                        scrollPosition === 'top'
+                            ? items[0]?.id
+                            : items[items.length - 1]?.id;
+                    this.anchorMessageTopOffset = document
+                        .getElementById(this.messageIdToAnchorTo)
+                        ?.getBoundingClientRect()?.top;
+                });
+            }
+            this.ngZone.run(() => {
+                this.scrollPosition$.next(scrollPosition);
+            });
+        }
+    }
     preserveScrollbarPosition() {
         if (!this.messageIdToAnchorTo) {
             return;
@@ -8184,9 +8192,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 = {
@@ -8194,7 +8204,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') {
@@ -8202,15 +8214,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) {