ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

virtual scroll of chat room

Browse Source
This commit is contained in:
Richard Park 2020-01-17 12:29:04 +09:00
parent 3995f3ef01
commit 6e4ebd95cc
2 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,12 +4,13 @@
perfectScrollbar
fxFlexFill
#psChatContent
[bufferAmount]="10"
(psScrollUp)="onScrollup($event)"
(psYReachStart)="onYReachStart($event)"
(psYReachEnd)="onYReachEnd($event)"
[enableUnequalChildrenSizes]="true"
>
<div class="chat-messages" #scrollMe>
<div class="chat-messages" [style.opacity]="fixScreen ? 0 : 1">
<div
*ngIf="eventRemained && eventList.length > 0"
class="message-row view-previous"

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

@ -5,7 +5,9 @@ import {
EventEmitter,
Output,
ViewChild,
OnDestroy
OnDestroy,
ElementRef,
Self
} from '@angular/core';
import {
@ -102,7 +104,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
existNewMessage = new EventEmitter<Info<EventJson>>();
@ViewChild(PerfectScrollbarDirective, { static: false })
psChatContent?: PerfectScrollbarDirective;
psChatContent: PerfectScrollbarDirective;
@ViewChild(VirtualScrollerComponent, { static: false })
private virtualScroller: VirtualScrollerComponent;
@ -135,6 +137,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
moment = moment;
existReadHere = false;
fixScreen = false;
constructor(
private logger: NGXLogger,
@ -150,6 +153,13 @@ export class MessagesComponent implements OnInit, OnDestroy {
this.loginRes = loginRes;
});
this.roomInfoSubscription = this.roomInfo$.subscribe(roomInfo => {
this.eventList = undefined;
this.newEventList = undefined;
this.searchedList = undefined;
this.eventInfoStatus = undefined;
this.eventRemained = undefined;
this.userInfos = undefined;
this.initEventMore();
this.roomInfo = roomInfo;
});
@ -305,6 +315,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
return true;
}
if (curIndex > 0) {
if (!this.eventList[curIndex]) {
return false;
}
return (
this.datePipe.transform(
moment(this.eventList[curIndex].sendDate).toDate(),
@ -435,8 +448,10 @@ export class MessagesComponent implements OnInit, OnDestroy {
if (!!this.virtualScroller) {
const e = this.eventList.find(v => v.seq === eventSeq);
this.virtualScroller.scrollDebounceTime = 0;
this.virtualScroller.scrollInto(e);
this.fixScreen = true;
this.virtualScroller.scrollInto(e, false, undefined, 0, () => {
this.fixScreen = false;
});
}
}