virtual scroll of chat room is implemented

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -10,11 +10,10 @@
   (psYReachEnd)="onYReachEnd($event)"
   [enableUnequalChildrenSizes]="true"
   [modifyOverflowStyleOfParentScroll]="false"
-  (vsChange)="onVsChange($event)"
 >
   <div #chatMessagesContainer class="chat-messages">
     <div
-      *ngIf="eventRemained && eventList.length > 0"
+      *ngIf="eventRemained && !!eventList && eventList.length > 0"
       class="message-row view-previous"
     >
       <button mat-button (click)="onClickMore($event)" class="bg-accent-dark">
@@ -59,7 +58,7 @@
         [mine]="message.senderSeq === loginRes.userSeq"
         [highlight]="isHighlightedEvent(message.seq)"
         [existReadToHere]="
-          getReadHere(message) && existReadHere && !clearReadHere
+          readToHereEvent && readToHereEvent.seq === message.seq
         "
         [dateChanged]="getDateSplitter(message)"
         [senderName]="getUserName(message.senderSeq)"

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts

@@ -27,7 +27,6 @@ import { DatePipe } from '@angular/common';
 import moment from 'moment';
 import { FileDownloadItem } from '@ucap-webmessenger/api';
 import { TranslateService } from '@ngx-translate/core';
-import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
 import { Observable, Subscription } from 'rxjs';
 import { VirtualScrollerComponent, IPageInfo } from 'ngx-virtual-scroller';
 
@@ -111,9 +110,6 @@ export class MessagesComponent implements OnInit, OnDestroy {
   @ViewChild('chatMessagesBuffer', { static: false })
   chatMessagesBuffer: ElementRef<HTMLElement>;
 
-  @ViewChild(PerfectScrollbarDirective, { static: false })
-  psChatContent: PerfectScrollbarDirective;
-
   @ViewChild(VirtualScrollerComponent, { static: false })
   private virtualScroller: VirtualScrollerComponent;
 
@@ -144,7 +140,8 @@ export class MessagesComponent implements OnInit, OnDestroy {
   profileImageRoot: string;
   moment = moment;
 
-  existReadHere = false;
+  readToHereEvent: Info<EventJson>;
+  swapped = false;
 
   constructor(
     private logger: NGXLogger,
@@ -183,6 +180,8 @@ export class MessagesComponent implements OnInit, OnDestroy {
         this.firstCheckReadHere = false;
       }
 
+      this.readToHereEvent = eventList.find(e => this.getReadHere(e));
+
       this.eventList = eventList;
       this.changeDetectorRef.detectChanges();
 
@@ -360,7 +359,6 @@ export class MessagesComponent implements OnInit, OnDestroy {
             this.eventList[messageIndex].seq ===
             this.roomInfo.lastReadEventSeq + 1
           ) {
-            this.existReadHere = true;
             return true;
           }
         }
@@ -383,44 +381,71 @@ export class MessagesComponent implements OnInit, OnDestroy {
     ];
   }
 
-  scrollToStoredItem() {
+  swapScroll(
-    this.virtualScroller.scrollInto(this.storedScrollItem, true, 0, 0, () => {
+    to: Info<EventJson>,
-      this.chatMessagesBuffer.nativeElement.innerHTML = '';
+    preCallback: () => void,
-      this.chatMessagesBuffer.nativeElement.scrollTop = 0;
+    postCallback: () => void,
-
+    useSwap: boolean = true
-      this.chatMessagesBuffer.nativeElement.classList.add('disappear');
+  ) {
-      this.chatMessagesContainer.nativeElement.classList.remove('hide');
+    this.preSwapScroll(useSwap);
-
+    if (!!preCallback) {
-      this.storedScrollItem = undefined;
+      preCallback();
+    }
+    this.virtualScroller.scrollInto(to, true, 0, 0, () => {
+      setTimeout(() => {
+        if (!!postCallback) {
+          postCallback();
+        }
+        this.postSwapScroll(useSwap);
+      }, 100);
     });
   }
 
-  ready(): void {
+  preSwapScroll(useSwap: boolean = true) {
-    if (!this.scrollUpInitalized) {
+    if (useSwap && !this.swapped) {
-      this.chatMessagesContainer.nativeElement.classList.add('hide');
+      this.chatMessagesBuffer.nativeElement.innerHTML = this.chatMessagesContainer.nativeElement.innerHTML;
+      this.chatMessagesBuffer.nativeElement.scrollTop = this.chatMessagesContainer.nativeElement.scrollTop;
+      this.chatMessagesBuffer.nativeElement.classList.remove('disappear');
+      this.swapped = true;
     }
 
-    setTimeout(() => {
+    this.chatMessagesContainer.nativeElement.classList.add('hide');
-      this.scrollToBottom();
+  }
-    });
+
+  postSwapScroll(useSwap: boolean = true) {
+    if (useSwap && this.swapped) {
+      this.chatMessagesBuffer.nativeElement.innerHTML = '';
+      this.chatMessagesBuffer.nativeElement.scrollTop = 0;
+      this.chatMessagesBuffer.nativeElement.classList.add('disappear');
+      this.swapped = false;
+    }
+
+    this.chatMessagesContainer.nativeElement.classList.remove('hide');
+  }
+
+  ready(): void {
+    this.scrollToBottom();
   }
 
   scrollToBottom(speed?: number): void {
     if (!!this.storedScrollItem) {
-      // if (this.psChatContent) {
+      if (!!this.readToHereEvent && this.firstCheckReadHere) {
-      //   this.psChatContent.update();
+        this.swapScroll(
-
+          this.readToHereEvent,
-      const element = document.getElementById('message-box-readhere');
+          () => {},
-      if (!!element && this.firstCheckReadHere) {
+          () => {
-        setTimeout(() => {
+            this.firstCheckReadHere = false;
-          this.psChatContent.scrollToTop(element.offsetTop - 200, speed);
+          }
-        });
+        );
-
-        this.firstCheckReadHere = false;
       } else {
-        this.scrollToStoredItem();
+        this.swapScroll(
+          this.storedScrollItem,
+          () => {},
+          () => {
+            this.storedScrollItem = undefined;
+          }
+        );
       }
-      // }
     } else if (this.scrollUpInitalized) {
       if (!!this.newEventList && this.newEventList.length > 0) {
         this.existNewMessage.emit(
@@ -429,27 +454,22 @@ export class MessagesComponent implements OnInit, OnDestroy {
       }
     } else {
       speed = speed || 0;
-      if (this.psChatContent) {
-        this.psChatContent.update();
 
-        const element = document.getElementById('message-box-readhere');
+      if (!!this.readToHereEvent && this.firstCheckReadHere) {
-        if (!!element && this.firstCheckReadHere) {
+        this.swapScroll(
-          setTimeout(() => {
+          this.readToHereEvent,
-            this.psChatContent.scrollToTop(element.offsetTop - 200, speed);
+          () => {},
-          });
+          () => {
-
+            this.firstCheckReadHere = false;
-          this.firstCheckReadHere = false;
+          }
-        } else {
+        );
-          this.virtualScroller.scrollToIndex(
+      } else {
-            this.eventList.length - 1,
+        this.swapScroll(
-            true,
+          this.eventList[this.eventList.length - 1],
-            0,
+          () => {},
-            0,
+          () => {},
-            () => {
+          false
-              this.chatMessagesContainer.nativeElement.classList.remove('hide');
+        );
-            }
-          );
-        }
       }
     }
   }
@@ -463,17 +483,6 @@ export class MessagesComponent implements OnInit, OnDestroy {
   clear() {}
 
   gotoPosition(eventSeq: number) {
-    // if (this.psChatContent) {
-    //   this.psChatContent.update();
-
-    //   const element = document.getElementById(eventSeq.toString());
-    //   if (!!element) {
-    //     setTimeout(() => {
-    //       this.psChatContent.scrollToTop(element.offsetTop - 200);
-    //     });
-    //   }
-    // }
-
     if (!!this.virtualScroller) {
       const e = this.eventList.find(v => v.seq === eventSeq);
       this.virtualScroller.scrollInto(e, false, undefined, 0, () => {});
@@ -489,15 +498,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
     event.stopPropagation();
 
     if (this.scrollUpInitalized && this.eventRemained) {
-      // this.storedScrollItem = this.psChatContent.elementRef.nativeElement.scrollHeight;
       this.storeScrollPosition();
 
-      this.chatMessagesBuffer.nativeElement.innerHTML = this.chatMessagesContainer.nativeElement.innerHTML;
+      this.preSwapScroll();
-      this.chatMessagesBuffer.nativeElement.scrollTop = this.chatMessagesContainer.nativeElement.scrollTop;
-
-      this.chatMessagesBuffer.nativeElement.classList.remove('disappear');
-      this.chatMessagesContainer.nativeElement.classList.add('hide');
-      this.changeDetectorRef.detectChanges();
 
       this.moreEvent.emit(this.eventList[0].seq);
 
@@ -562,7 +565,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
     ) {
       return;
     }
-    this.logger.debug('onVsChange', event);
+    // this.logger.debug('onVsChange', event);
   }
 
   trackByEvent(index: number, info: Info<EventJson>): number {