bug fixed

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

@@ -112,24 +112,23 @@ export class MessageBoxComponent implements OnInit, AfterViewInit {
   }
 
   constructor(
+    private elementRef: ElementRef<HTMLElement>,
     private changeDetectorRef: ChangeDetectorRef,
     private logger: NGXLogger
   ) {}
 
   ngOnInit() {
-    // this.mbContainer.nativeElement.classList.add('hide');
+    this.mbContainer.nativeElement.classList.add('hide');
   }
 
   ngAfterViewInit(): void {
-    // this.logger.debug(
-    //   'offsetHeight' + this.message.seq,
-    //   this.mbContainer.nativeElement.offsetHeight
-    // );
-    // this.elementRef.nativeElement.style.height = `${this.mbContainer
-    //   .nativeElement.offsetHeight + 20}px`;
-    // this.elementRef.nativeElement.style.maxHeight = `${this.mbContainer
-    //   .nativeElement.offsetHeight + 20}px`;
-    // this.mbContainer.nativeElement.classList.remove('hide');
+    this.logger.debug(
+      'offsetHeight' + this.message.seq,
+      this.mbContainer.nativeElement.offsetHeight
+    );
+    this.elementRef.nativeElement.style.height = `${this.mbContainer.nativeElement.offsetHeight}px`;
+    this.elementRef.nativeElement.style.maxHeight = `${this.mbContainer.nativeElement.offsetHeight}px`;
+    this.mbContainer.nativeElement.classList.remove('hide');
   }
 
   /**

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

@@ -31,6 +31,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { Observable, Subscription } from 'rxjs';
 import { VirtualScrollerComponent, IPageInfo } from 'ngx-virtual-scroller';
 import { MessageBoxComponent } from './message-box.component';
+import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
 
 @Component({
   selector: 'ucap-chat-messages',
@@ -403,7 +404,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
         this.eventList[this.virtualScroller.viewPortInfo.startIndex].seq
     );
     if (!!chatMessageBox) {
-      this.storedScrollItemOffsetTop = chatMessageBox.offsetTop;
+      this.storedScrollItemOffsetTop =
+        chatMessageBox.offsetTop -
+        this.virtualScroller.viewPortInfo.scrollStartPosition;
     } else {
       this.storedScrollItemOffsetTop = 0;
     }
@@ -414,7 +417,8 @@ export class MessagesComponent implements OnInit, OnDestroy {
     preCallback: () => void,
     postCallback: () => void,
     useHide: boolean,
-    useSwap: boolean
+    useSwap: boolean,
+    addtionalOffset?: number
   ) {
     this.preSwapScroll(useHide, useSwap);
     if (!!preCallback) {
@@ -426,6 +430,8 @@ export class MessagesComponent implements OnInit, OnDestroy {
       true,
       undefined !== this.storedScrollItemOffsetTop
         ? -this.storedScrollItemOffsetTop
+        : undefined !== addtionalOffset
+        ? -addtionalOffset
         : 0,
       0,
       () => {
@@ -549,6 +555,10 @@ export class MessagesComponent implements OnInit, OnDestroy {
   clear() {}
 
   gotoPosition(eventSeq: number) {
+    const viewPortItemIndex = this.virtualScroller.viewPortItems.findIndex(
+      v => v.seq === eventSeq
+    );
+
     if (!!this.virtualScroller) {
       const e = this.eventList.find(v => v.seq === eventSeq);
       this.swapScrollTo(
@@ -562,8 +572,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
             chatMessageBox.shake();
           }
         },
-        true,
-        true
+        -1 === viewPortItemIndex,
+        -1 === viewPortItemIndex,
+        50
       );
     }
   }
@@ -577,13 +588,14 @@ export class MessagesComponent implements OnInit, OnDestroy {
     event.stopPropagation();
 
     if (this.scrollUpInitalized && this.eventRemained) {
+      this.virtualScroller.scrollToPosition(0);
+      this.virtualScroller.invalidateCachedMeasurementAtIndex(0);
+
       this.storeScrollPosition();
 
       this.preSwapScroll(true, true);
 
       this.moreEvent.emit(this.eventList[0].seq);
-
-      this.virtualScroller.invalidateCachedMeasurementAtIndex(0);
     }
   }