From bab7b405a198ec325d48ede70df8602e870ed0cd Mon Sep 17 00:00:00 2001 From: richard-loafle <44828666+richard-loafle@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:07:46 +0900 Subject: [PATCH] bug fixed --- .../components/messages.component.ts | 3 +- .../src/lib/components/messages.component.ts | 133 ++++++++++-------- 2 files changed, 75 insertions(+), 61 deletions(-) diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts index 161d4f12..8f36bf10 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts @@ -289,6 +289,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { this.store.dispatch(EventStore.infoIntervalClear({})); }, 1000); } + + this.readyToReply(); } this.roomInfoSubject.next(roomInfo); @@ -377,7 +379,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { } else { if (!!infoList && infoList.length > 0) { this.baseEventSeq = infoList[0].seq; - this.readyToReply(); } } }); diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts index c5e56161..6db51a32 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts +++ b/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,46 +182,48 @@ export class MessagesComponent implements OnInit, OnDestroy { this.existReadToHereEvent = true; /** [E] initializing by changed room */ - if (this.roomInfo.roomSeq !== roomInfo.roomSeq) { + if (!this.roomInfo || this.roomInfo.roomSeq !== roomInfo.roomSeq) { this.initEventMore(); } }); - this.eventListSubscription = this.eventList$.subscribe(eventList => { - this.eventList = eventList; + this.eventListSubscription = this.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; - this.ready(); + 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; + this.ready(); + } + } + }); this.newEventListSubscription = this.newEventList$.subscribe( newEventList => { this.newEventList = newEventList; @@ -513,30 +516,27 @@ export class MessagesComponent implements OnInit, OnDestroy { () => { this.firstCheckReadHere = false; }, - true, + false, false ); } else { - if ( - this.virtualScroller.viewPortInfo.endIndex === - this.eventList.length - 2 - ) { - this.swapScrollTo( - this.eventList[this.eventList.length - 1], - () => {}, - () => {}, - false, - false - ); - } else { - this.swapScrollTo( - this.eventList[this.eventList.length - 1], - () => {}, - () => {}, - true, - false - ); + const lastEvent = + !!this.eventList && 0 < this.eventList.length + ? this.eventList[this.eventList.length - 1] + : undefined; + + if (undefined === lastEvent) { + return; } + const isInViewPortItems = this.isInViewPortItems(lastEvent.seq); + this.swapScrollTo( + this.eventList[this.eventList.length - 1], + () => {}, + () => {}, + -1 === this.virtualScroller.viewPortInfo.endIndex || + !isInViewPortItems, + !isInViewPortItems + ); } } } @@ -551,9 +551,7 @@ export class MessagesComponent implements OnInit, OnDestroy { clear() {} gotoPosition(eventSeq: number) { - const viewPortItemIndex = this.virtualScroller.viewPortItems.findIndex( - v => v.seq === eventSeq - ); + const isInViewPortItems = this.isInViewPortItems(eventSeq); if (!!this.virtualScroller) { const e = this.eventList.find(v => v.seq === eventSeq); @@ -568,13 +566,28 @@ export class MessagesComponent implements OnInit, OnDestroy { chatMessageBox.shake(); } }, - -1 === viewPortItemIndex, - -1 === viewPortItemIndex, + !isInViewPortItems, + !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); }