2020-01-15 13:53:17 +09:00
|
|
|
import {
|
|
|
|
Component,
|
|
|
|
OnInit,
|
|
|
|
Input,
|
|
|
|
EventEmitter,
|
|
|
|
Output,
|
|
|
|
AfterViewInit,
|
|
|
|
ElementRef,
|
|
|
|
ViewChild
|
|
|
|
} from '@angular/core';
|
|
|
|
|
|
|
|
import {
|
|
|
|
Info,
|
|
|
|
EventType,
|
|
|
|
InfoResponse,
|
|
|
|
EventJson,
|
|
|
|
FileEventJson,
|
|
|
|
MassTranslationEventJson
|
|
|
|
} from '@ucap-webmessenger/protocol-event';
|
|
|
|
import { NGXLogger } from 'ngx-logger';
|
|
|
|
import { DatePipe } from '@angular/common';
|
|
|
|
import moment from 'moment';
|
|
|
|
import { FileDownloadItem } from '@ucap-webmessenger/api';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'ucap-chat-message-box',
|
|
|
|
templateUrl: './message-box.component.html',
|
|
|
|
styleUrls: ['./message-box.component.scss']
|
|
|
|
})
|
|
|
|
export class MessageBoxComponent implements OnInit, AfterViewInit {
|
|
|
|
@Input()
|
|
|
|
message: Info<EventJson>;
|
|
|
|
|
|
|
|
@Input()
|
|
|
|
mine = false;
|
|
|
|
|
|
|
|
@Input()
|
2020-01-17 10:41:22 +09:00
|
|
|
highlight = false;
|
2020-01-15 13:53:17 +09:00
|
|
|
|
|
|
|
@Input()
|
|
|
|
existReadToHere = false;
|
|
|
|
|
|
|
|
@Input()
|
|
|
|
dateChanged = false;
|
|
|
|
|
|
|
|
@Input()
|
|
|
|
senderName: string;
|
|
|
|
|
|
|
|
@Input()
|
|
|
|
profileImageRoot: string;
|
|
|
|
|
|
|
|
@Input()
|
|
|
|
profileImage: string;
|
|
|
|
|
|
|
|
@Input()
|
|
|
|
eventInfoStatus?: InfoResponse;
|
|
|
|
|
|
|
|
@Input()
|
|
|
|
translationSimpleview = false;
|
|
|
|
|
|
|
|
@Input()
|
|
|
|
unreadCount: number;
|
|
|
|
|
|
|
|
@Output()
|
|
|
|
openProfile = new EventEmitter<number>();
|
|
|
|
|
|
|
|
@Output()
|
|
|
|
massDetail = new EventEmitter<number>();
|
|
|
|
|
|
|
|
@Output()
|
|
|
|
massTranslationDetail = new EventEmitter<{
|
|
|
|
message: Info<MassTranslationEventJson>;
|
|
|
|
contentsType: string;
|
|
|
|
}>();
|
|
|
|
|
|
|
|
@Output()
|
|
|
|
fileViewer = new EventEmitter<FileEventJson>();
|
|
|
|
|
|
|
|
@Output()
|
|
|
|
save = new EventEmitter<{
|
|
|
|
fileInfo: FileEventJson;
|
|
|
|
fileDownloadItem: FileDownloadItem;
|
|
|
|
type: string;
|
|
|
|
}>();
|
|
|
|
|
|
|
|
@Output()
|
|
|
|
contextMenu = new EventEmitter<{
|
|
|
|
event: MouseEvent;
|
|
|
|
message: Info<EventJson>;
|
|
|
|
type?: string;
|
|
|
|
}>();
|
|
|
|
|
|
|
|
@ViewChild('mbContainer', { static: true })
|
|
|
|
mbContainer: ElementRef<HTMLElement>;
|
|
|
|
|
|
|
|
EventType = EventType;
|
|
|
|
|
|
|
|
moment = moment;
|
|
|
|
|
|
|
|
firstEventSeq = 0;
|
|
|
|
existReadHere = false;
|
|
|
|
|
|
|
|
constructor(
|
|
|
|
private elementRef: ElementRef<HTMLElement>,
|
|
|
|
private logger: NGXLogger,
|
|
|
|
private datePipe: DatePipe
|
|
|
|
) {}
|
|
|
|
|
|
|
|
ngOnInit() {
|
2020-01-16 10:16:44 +09:00
|
|
|
this.mbContainer.nativeElement.classList.add('hide');
|
2020-01-15 13:53:17 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
ngAfterViewInit(): void {
|
2020-01-20 16:40:17 +09:00
|
|
|
// this.logger.debug(
|
|
|
|
// 'offsetHeight' + this.message.seq,
|
|
|
|
// this.mbContainer.nativeElement.offsetHeight
|
|
|
|
// );
|
|
|
|
// this.elementRef.nativeElement.style.height = `${this.mbContainer
|
|
|
|
// .nativeElement.offsetHeight + 20}px`;
|
|
|
|
// this.elementRef.nativeElement.style.maxHeight = `${this.mbContainer
|
|
|
|
// .nativeElement.offsetHeight + 20}px`;
|
2020-01-15 13:53:17 +09:00
|
|
|
this.mbContainer.nativeElement.classList.remove('hide');
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 정보성 Event 인지 판단.
|
|
|
|
* @description 정보성 event 일 경우 프로필, 일시 를 표현하지 않는다.
|
|
|
|
* Edit with reducers.ts / sync / updateRoomForNewEventMessage
|
|
|
|
*/
|
|
|
|
isInformation(info: Info<EventJson>) {
|
|
|
|
if (
|
|
|
|
info.type === EventType.Join ||
|
|
|
|
info.type === EventType.Exit ||
|
|
|
|
info.type === EventType.ForcedExit ||
|
|
|
|
info.type === EventType.RenameRoom ||
|
|
|
|
info.type === EventType.NotificationForTimerRoom ||
|
|
|
|
info.type === EventType.GuideForRoomTimerChanged
|
|
|
|
) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
onClickOpenProfile(event: MouseEvent, userSeq: number) {
|
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
|
|
|
|
|
|
|
this.openProfile.emit(userSeq);
|
|
|
|
}
|
|
|
|
|
|
|
|
/** [Event] MassTalk Detail View */
|
|
|
|
onMassDetail(value: number) {
|
|
|
|
this.massDetail.emit(value);
|
|
|
|
}
|
|
|
|
|
|
|
|
onMassTranslationDetail(params: {
|
|
|
|
message: Info<MassTranslationEventJson>;
|
|
|
|
contentsType: string;
|
|
|
|
}) {
|
|
|
|
this.massTranslationDetail.emit(params);
|
|
|
|
}
|
|
|
|
|
|
|
|
/** [Event] Image Viewer */
|
|
|
|
onFileViewer(fileInfo: FileEventJson) {
|
|
|
|
this.fileViewer.emit(fileInfo);
|
|
|
|
}
|
|
|
|
|
|
|
|
/** [Event] Attach File Save & Save As */
|
|
|
|
onSave(value: {
|
|
|
|
fileInfo: FileEventJson;
|
|
|
|
fileDownloadItem: FileDownloadItem;
|
|
|
|
type: string;
|
|
|
|
}) {
|
|
|
|
this.save.emit(value);
|
|
|
|
}
|
|
|
|
|
|
|
|
/** [Event] Context Menu */
|
|
|
|
onContextMenu(event: any, message: Info<EventJson>) {
|
|
|
|
if (
|
|
|
|
message.type === EventType.Translation ||
|
|
|
|
message.type === EventType.MassTranslation
|
|
|
|
) {
|
|
|
|
this.contextMenu.emit({ event: event.event, message, type: event.type });
|
|
|
|
} else {
|
|
|
|
this.contextMenu.emit({ event, message });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|