Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts

@@ -290,6 +290,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
               this.store.dispatch(EventStore.infoIntervalClear({}));
             }, 1000);
           }
+
+          this.readyToReply();
         }
 
         this.roomInfoSubject.next(roomInfo);
@@ -378,7 +380,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
         } else {
           if (!!infoList && infoList.length > 0) {
             this.baseEventSeq = infoList[0].seq;
-            this.readyToReply();
           }
         }
       });

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

@@ -28,10 +28,11 @@ import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import moment from 'moment';
 import { FileDownloadItem } from '@ucap-webmessenger/api';
 import { TranslateService } from '@ngx-translate/core';
-import { Observable, Subscription } from 'rxjs';
+import { Observable, Subscription, timer } from 'rxjs';
 import { VirtualScrollerComponent, IPageInfo } from 'ngx-virtual-scroller';
 import { MessageBoxComponent } from './message-box.component';
 import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
+import { debounce } from 'rxjs/operators';
 
 @Component({
   selector: 'ucap-chat-messages',
@@ -181,50 +182,48 @@ export class MessagesComponent implements OnInit, OnDestroy {
       this.existReadToHereEvent = true;
       /** [E] initializing by changed room */
 
-      if (
+      if (!this.roomInfo || this.roomInfo.roomSeq !== roomInfo.roomSeq) {
-        !!this.roomInfo &&
-        !!roomInfo &&
-        this.roomInfo.roomSeq !== roomInfo.roomSeq
-      ) {
         this.initEventMore();
       }
     });
-    this.eventListSubscription = this.eventList$.subscribe(eventList => {
+    this.eventListSubscription = this.eventList$
-      this.eventList = eventList;
+      .pipe(debounce(() => timer(100)))
+      .subscribe(eventList => {
+        this.eventList = eventList;
 
-      if (!!eventList && eventList.length > 0) {
-        if (!this.readToHereEvent && this.existReadToHereEvent) {
-          this.readToHereEvent = this.getReadHere();
-        }
-
-        if (
-          this.baseEventSeq > 0 &&
-          !!this.roomInfo &&
-          !!this.roomInfo.lastReadEventSeq &&
-          this.baseEventSeq <= this.roomInfo.lastReadEventSeq
-        ) {
-          // 기존 대화 내용이 있는 상태에서 추가로 조회된 내용중에 read here 가 있을 경우.
-          this.firstCheckReadHere = false;
-        }
-      } else {
-        this.readToHereEvent = undefined;
-      }
-
-      this.changeDetectorRef.detectChanges();
-
-      if (this.searchingMode) {
-        const baseseq = this.baseEventSeq;
-        // setTimeout(() => {
-        //   this.doSearchTextInEvent(this.searchText, baseseq);
-        // }, 800);
-        this.baseEventSeq = eventList[0].seq;
-      } else {
         if (!!eventList && eventList.length > 0) {
-          this.baseEventSeq = eventList[0].seq;
+          if (!this.readToHereEvent && this.existReadToHereEvent) {
-          this.ready();
+            this.readToHereEvent = this.getReadHere();
+          }
+
+          if (
+            this.baseEventSeq > 0 &&
+            !!this.roomInfo &&
+            !!this.roomInfo.lastReadEventSeq &&
+            this.baseEventSeq <= this.roomInfo.lastReadEventSeq
+          ) {
+            // 기존 대화 내용이 있는 상태에서 추가로 조회된 내용중에 read here 가 있을 경우.
+            this.firstCheckReadHere = false;
+          }
+        } else {
+          this.readToHereEvent = undefined;
         }
-      }
+
-    });
+        this.changeDetectorRef.detectChanges();
+
+        if (this.searchingMode) {
+          const baseseq = this.baseEventSeq;
+          // setTimeout(() => {
+          //   this.doSearchTextInEvent(this.searchText, baseseq);
+          // }, 800);
+          this.baseEventSeq = eventList[0].seq;
+        } else {
+          if (!!eventList && eventList.length > 0) {
+            this.baseEventSeq = eventList[0].seq;
+            this.ready();
+          }
+        }
+      });
     this.newEventListSubscription = this.newEventList$.subscribe(
       newEventList => {
         this.newEventList = newEventList;
@@ -517,30 +516,27 @@ export class MessagesComponent implements OnInit, OnDestroy {
           () => {
             this.firstCheckReadHere = false;
           },
-          true,
+          false,
           false
         );
       } else {
-        if (
+        const lastEvent =
-          this.virtualScroller.viewPortInfo.endIndex ===
+          !!this.eventList && 0 < this.eventList.length
-          this.eventList.length - 2
+            ? this.eventList[this.eventList.length - 1]
-        ) {
+            : undefined;
-          this.swapScrollTo(
+
-            this.eventList[this.eventList.length - 1],
+        if (undefined === lastEvent) {
-            () => {},
+          return;
-            () => {},
-            false,
-            false
-          );
-        } else {
-          this.swapScrollTo(
-            this.eventList[this.eventList.length - 1],
-            () => {},
-            () => {},
-            true,
-            false
-          );
         }
+        const isInViewPortItems = this.isInViewPortItems(lastEvent.seq);
+        this.swapScrollTo(
+          this.eventList[this.eventList.length - 1],
+          () => {},
+          () => {},
+          -1 === this.virtualScroller.viewPortInfo.endIndex ||
+            !isInViewPortItems,
+          !isInViewPortItems
+        );
       }
     }
   }
@@ -555,9 +551,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
   clear() {}
 
   gotoPosition(eventSeq: number) {
-    const viewPortItemIndex = this.virtualScroller.viewPortItems.findIndex(
+    const isInViewPortItems = this.isInViewPortItems(eventSeq);
-      v => v.seq === eventSeq
-    );
 
     if (!!this.virtualScroller) {
       const e = this.eventList.find(v => v.seq === eventSeq);
@@ -572,13 +566,28 @@ export class MessagesComponent implements OnInit, OnDestroy {
             chatMessageBox.shake();
           }
         },
-        -1 === viewPortItemIndex,
+        !isInViewPortItems,
-        -1 === viewPortItemIndex,
+        !isInViewPortItems,
         50
       );
     }
   }
 
+  isInViewPortItems(eventSeq: number): boolean {
+    if (undefined === eventSeq) {
+      return false;
+    }
+    const viewPortItemIndex = this.virtualScroller.viewPortItems.findIndex(
+      v => v.seq === eventSeq
+    );
+
+    const newEvent =
+      !!this.newEventList &&
+      -1 !== this.newEventList.findIndex(e => e.seq === eventSeq);
+
+    return -1 !== viewPortItemIndex || newEvent;
+  }
+
   onClickOpenProfile(userSeq: number) {
     this.openProfile.emit(userSeq);
   }