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 perfectScrollbar
fxFlexFill fxFlexFill
#psChatContent #psChatContent
[bufferAmount]="10"
(psScrollUp)="onScrollup($event)" (psScrollUp)="onScrollup($event)"
(psYReachStart)="onYReachStart($event)" (psYReachStart)="onYReachStart($event)"
(psYReachEnd)="onYReachEnd($event)" (psYReachEnd)="onYReachEnd($event)"
[enableUnequalChildrenSizes]="true" [enableUnequalChildrenSizes]="true"
> >
<div class="chat-messages" #scrollMe> <div class="chat-messages" [style.opacity]="fixScreen ? 0 : 1">
<div <div
*ngIf="eventRemained && eventList.length > 0" *ngIf="eventRemained && eventList.length > 0"
class="message-row view-previous" 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, EventEmitter,
Output, Output,
ViewChild, ViewChild,
OnDestroy OnDestroy,
ElementRef,
Self
} from '@angular/core'; } from '@angular/core';
import { import {
@ -102,7 +104,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
existNewMessage = new EventEmitter<Info<EventJson>>(); existNewMessage = new EventEmitter<Info<EventJson>>();
@ViewChild(PerfectScrollbarDirective, { static: false }) @ViewChild(PerfectScrollbarDirective, { static: false })
psChatContent?: PerfectScrollbarDirective; psChatContent: PerfectScrollbarDirective;
@ViewChild(VirtualScrollerComponent, { static: false }) @ViewChild(VirtualScrollerComponent, { static: false })
private virtualScroller: VirtualScrollerComponent; private virtualScroller: VirtualScrollerComponent;
@ -135,6 +137,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
moment = moment; moment = moment;
existReadHere = false; existReadHere = false;
fixScreen = false;
constructor( constructor(
private logger: NGXLogger, private logger: NGXLogger,
@ -150,6 +153,13 @@ export class MessagesComponent implements OnInit, OnDestroy {
this.loginRes = loginRes; this.loginRes = loginRes;
}); });
this.roomInfoSubscription = this.roomInfo$.subscribe(roomInfo => { 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.initEventMore();
this.roomInfo = roomInfo; this.roomInfo = roomInfo;
}); });
@ -305,6 +315,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
return true; return true;
} }
if (curIndex > 0) { if (curIndex > 0) {
if (!this.eventList[curIndex]) {
return false;
}
return ( return (
this.datePipe.transform( this.datePipe.transform(
moment(this.eventList[curIndex].sendDate).toDate(), moment(this.eventList[curIndex].sendDate).toDate(),
@ -435,8 +448,10 @@ export class MessagesComponent implements OnInit, OnDestroy {
if (!!this.virtualScroller) { if (!!this.virtualScroller) {
const e = this.eventList.find(v => v.seq === eventSeq); const e = this.eventList.find(v => v.seq === eventSeq);
this.virtualScroller.scrollDebounceTime = 0; this.fixScreen = true;
this.virtualScroller.scrollInto(e); this.virtualScroller.scrollInto(e, false, undefined, 0, () => {
this.fixScreen = false;
});
} }
} }