diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html index b8ca98d6..1b7c2279 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html @@ -95,11 +95,12 @@ []>; + eventList: Info[]; + eventListNew: Info[]; + eventListSubscription: Subscription; baseEventSeq = 0; roomInfo: RoomInfo; roomInfoSubscription: Subscription; @@ -127,6 +133,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { /** Timer 대화방의 대화 삭제를 위한 interval */ interval: any; + snackBarPreviewEvent: MatSnackBarRef; + constructor( private store: Store, private sessionStorageService: SessionStorageService, @@ -145,6 +153,12 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { ); } + setEventMoreInit() { + // 방정보가 바뀌면 이전대화 보기 관련 값들을 초기화 한다. + this.scrollUpinit = false; + this.eventMorePosition = 0; + } + ngOnInit() { this.loginResSubscription = this.store .pipe( @@ -161,9 +175,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { tap(roomInfo => { this.roomInfo = roomInfo; - // 방정보가 바뀌면 이전대화 보기 관련 값들을 초기화 한다. - this.scrollUpinit = false; - this.eventMorePosition = 0; + this.setEventMoreInit(); }) ) .subscribe(); @@ -188,15 +200,27 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { }) ); - this.eventList$ = this.store.pipe( - select(AppStore.MessengerSelector.EventSelector.selectAllInfoList), - tap(infoList => { - if (!!infoList && infoList.length > 0) { - this.baseEventSeq = infoList[0].seq; - this.readyToReply(); - } - }) - ); + this.eventListSubscription = this.store + .pipe( + select(AppStore.MessengerSelector.EventSelector.selectAllInfoList), + tap(infoList => { + if (!!this.eventList && this.eventList.length > 0) { + this.eventListNew = infoList.filter(info => { + if (info.seq <= this.eventList[this.eventList.length - 1].seq) { + return false; + } + return true; + }); + } + this.eventList = infoList; + + if (!!infoList && infoList.length > 0) { + this.baseEventSeq = infoList[0].seq; + this.readyToReply(); + } + }) + ) + .subscribe(); this.eventInfoStatus$ = this.store.pipe( select(AppStore.MessengerSelector.EventSelector.infoStatus) @@ -219,6 +243,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { if (!!this.userInfoListSubscription) { this.userInfoListSubscription.unsubscribe(); } + if (!!this.eventListSubscription) { + this.eventListSubscription.unsubscribe(); + } clearInterval(this.interval); } @@ -259,6 +286,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { } } + /** 대화전송 가능한 방인지 판단 */ getEnableSend() { if (!this.roomInfo) { return false; @@ -287,8 +315,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { } } - selectContact() {} - readyToReply(): void { setTimeout(() => { this.focusReplyInput(); @@ -304,6 +330,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { }); } + /** Scroll Handler */ scrollToBottom(speed?: number): void { if (this.eventMorePosition > 0) { if (this.psChatContent.directiveRef) { @@ -316,7 +343,34 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { speed ); - this.scrollUpinit = false; + this.eventMorePosition = 0; + }); + } + } else if (this.scrollUpinit) { + if (!!this.eventListNew && this.eventListNew.length > 0) { + let message = ''; + const info = this.eventListNew[this.eventListNew.length - 1]; + const senderUser = this.userInfoList.filter( + user => user.seq === info.senderSeq + ); + if (!!senderUser && senderUser.length > 0) { + message += `${senderUser[0].name} : `; + } + message += StringUtil.convertFinalEventMessage( + info.type, + info.sentMessageJson || info.sentMessage + ); + + this.snackBarPreviewEvent = this.snackBarService.open(message, 'GO', { + // duration: 3000, + verticalPosition: 'bottom', + horizontalPosition: 'center', + panelClass: ['chat-snackbar-class'] + }); + this.snackBarPreviewEvent.onAction().subscribe(() => { + this.setEventMoreInit(); + this.scrollToBottom(); + this.snackBarPreviewEvent.dismiss(); }); } } else { @@ -330,8 +384,37 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { } } } + onScrollup(event: any) { + this.scrollUpinit = true; + } + onScrollReachStart(event: any) { + this.onMoreEvent(this.baseEventSeq); + } + onScrollReachEnd(event: any) { + this.setEventMoreInit(); + if (!!this.snackBarPreviewEvent) { + this.snackBarPreviewEvent.dismiss(); + } + } + + /** More Event */ + onMoreEvent(seq: number) { + if (this.scrollUpinit && this.eventRemain) { + this.eventMorePosition = this.psChatContent.directiveRef.elementRef.nativeElement.scrollHeight; + + this.store.dispatch( + EventStore.info({ + roomSeq: this.roomInfo.roomSeq, + baseSeq: seq, + requestCount: CONST.EVENT_INFO_READ_COUNT + }) + ); + } + } async onSendMessage(message: string) { + this.setEventMoreInit(); + if (!message || message.trim().length === 0) { const result = await this.dialogService.open< AlertDialogComponent, @@ -378,24 +461,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { this.store.dispatch(RoomStore.updateOnlyAlarm({ roomInfo: this.roomInfo })); } - onScrollup(event: any) { - this.onMoreEvent(this.baseEventSeq); - } - /** More Event */ - onMoreEvent(seq: number) { - if (this.scrollUpinit && this.eventRemain) { - this.store.dispatch( - EventStore.info({ - roomSeq: this.roomInfo.roomSeq, - baseSeq: seq, - requestCount: CONST.EVENT_INFO_READ_COUNT - }) - ); - this.scrollUpinit = false; - this.eventMorePosition = this.psChatContent.directiveRef.elementRef.nativeElement.scrollHeight; - } - } - /** MassText Detail View */ onMassDetail(value: number) { this.store.dispatch( diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts index 98fdde8b..5b74fe46 100644 --- a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts +++ b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts @@ -104,7 +104,7 @@ export const reducer = createReducer( | string | null = StringUtil.convertFinalEventMessage( action.info.type, - action.info.sentMessage + action.info.sentMessageJson || action.info.sentMessage ); if (!finalEventMessage) { diff --git a/projects/ucap-webmessenger-ui/src/lib/services/snack-bar.service.ts b/projects/ucap-webmessenger-ui/src/lib/services/snack-bar.service.ts index 34f1181b..651ee820 100644 --- a/projects/ucap-webmessenger-ui/src/lib/services/snack-bar.service.ts +++ b/projects/ucap-webmessenger-ui/src/lib/services/snack-bar.service.ts @@ -1,6 +1,11 @@ import { Injectable } from '@angular/core'; -import { MatSnackBar, MatSnackBarConfig } from '@angular/material'; +import { + MatSnackBar, + MatSnackBarConfig, + MatSnackBarRef, + SimpleSnackBar +} from '@angular/material'; @Injectable({ providedIn: 'root' @@ -12,7 +17,7 @@ export class SnackBarService { message: string, action?: string, config?: MatSnackBarConfig - ): void { - this.matSnackBar.open(message, action, config); + ): MatSnackBarRef { + return this.matSnackBar.open(message, action, config); } }