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 1587a7bd..6c16307f 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 @@ -142,6 +142,7 @@ export class MessagesComponent implements OnInit, OnDestroy { readToHereEvent: Info; swapped = false; + hidden = false; constructor( private logger: NGXLogger, @@ -384,9 +385,10 @@ export class MessagesComponent implements OnInit, OnDestroy { to: Info, preCallback: () => void, postCallback: () => void, - useSwap: boolean = true + useHide: boolean, + useSwap: boolean ) { - this.preSwapScroll(useSwap); + this.preSwapScroll(useHide, useSwap); if (!!preCallback) { preCallback(); } @@ -395,12 +397,12 @@ export class MessagesComponent implements OnInit, OnDestroy { if (!!postCallback) { postCallback(); } - this.postSwapScroll(useSwap); + this.postSwapScroll(useHide, useSwap); }, 100); }); } - preSwapScroll(useSwap: boolean = true) { + preSwapScroll(useHide: boolean, useSwap: boolean) { if (useSwap && !this.swapped) { this.chatMessagesBuffer.nativeElement.innerHTML = this.chatMessagesContainer.nativeElement.innerHTML; this.chatMessagesBuffer.nativeElement.scrollTop = this.chatMessagesContainer.nativeElement.scrollTop; @@ -408,10 +410,13 @@ export class MessagesComponent implements OnInit, OnDestroy { this.swapped = true; } - this.chatMessagesContainer.nativeElement.classList.add('hide'); + if (useHide && !this.hidden) { + this.chatMessagesContainer.nativeElement.classList.add('hide'); + this.hidden = true; + } } - postSwapScroll(useSwap: boolean = true) { + postSwapScroll(useHide: boolean, useSwap: boolean) { if (useSwap && this.swapped) { this.chatMessagesBuffer.nativeElement.innerHTML = ''; this.chatMessagesBuffer.nativeElement.scrollTop = 0; @@ -419,7 +424,10 @@ export class MessagesComponent implements OnInit, OnDestroy { this.swapped = false; } - this.chatMessagesContainer.nativeElement.classList.remove('hide'); + if (useHide && this.hidden) { + this.chatMessagesContainer.nativeElement.classList.remove('hide'); + this.hidden = false; + } } ready(): void { @@ -434,7 +442,9 @@ export class MessagesComponent implements OnInit, OnDestroy { () => {}, () => { this.firstCheckReadHere = false; - } + }, + true, + true ); } else { this.swapScroll( @@ -442,7 +452,9 @@ export class MessagesComponent implements OnInit, OnDestroy { () => {}, () => { this.storedScrollItem = undefined; - } + }, + true, + true ); } } else if (this.scrollUpInitalized) { @@ -460,15 +472,31 @@ export class MessagesComponent implements OnInit, OnDestroy { () => {}, () => { this.firstCheckReadHere = false; - } + }, + true, + true ); } else { - this.swapScroll( - this.eventList[this.eventList.length - 1], - () => {}, - () => {}, - false - ); + if ( + this.virtualScroller.viewPortInfo.endIndex === + this.eventList.length - 2 + ) { + this.swapScroll( + this.eventList[this.eventList.length - 1], + () => {}, + () => {}, + false, + false + ); + } else { + this.swapScroll( + this.eventList[this.eventList.length - 1], + () => {}, + () => {}, + true, + false + ); + } } } } @@ -499,7 +527,7 @@ export class MessagesComponent implements OnInit, OnDestroy { if (this.scrollUpInitalized && this.eventRemained) { this.storeScrollPosition(); - this.preSwapScroll(); + this.preSwapScroll(true, true); this.moreEvent.emit(this.eventList[0].seq);