202 lines
4.4 KiB
TypeScript
Raw Normal View History

2020-01-15 13:53:17 +09:00
import {
Component,
OnInit,
Input,
EventEmitter,
Output,
AfterViewInit,
ElementRef,
2020-01-30 14:12:51 +09:00
ViewChild,
ChangeDetectorRef
2020-01-15 13:53:17 +09:00
} from '@angular/core';
2020-01-30 14:12:51 +09:00
import { shakeAnimation } from 'angular-animations';
2020-01-15 13:53:17 +09:00
import {
Info,
EventType,
InfoResponse,
EventJson,
FileEventJson,
MassTranslationEventJson
} from '@ucap-webmessenger/protocol-event';
import { NGXLogger } from 'ngx-logger';
import moment from 'moment';
import { FileDownloadItem } from '@ucap-webmessenger/api';
@Component({
selector: 'ucap-chat-message-box',
templateUrl: './message-box.component.html',
2020-01-30 14:12:51 +09:00
styleUrls: ['./message-box.component.scss'],
animations: [shakeAnimation()]
2020-01-15 13:53:17 +09:00
})
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;
2020-01-30 14:12:51 +09:00
shakeIt = false;
2020-01-15 13:53:17 +09:00
constructor(
2020-01-30 14:12:51 +09:00
private changeDetectorRef: ChangeDetectorRef,
private logger: NGXLogger
2020-01-15 13:53:17 +09:00
) {}
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 {
// 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 ||
2020-01-30 08:23:11 +09:00
info.type === EventType.NotificationForiOSCapture ||
2020-01-15 13:53:17 +09:00
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 });
}
}
2020-01-30 14:12:51 +09:00
shake() {
this.shakeIt = false;
this.changeDetectorRef.detectChanges();
setTimeout(() => {
this.shakeIt = true;
this.changeDetectorRef.detectChanges();
}, 1);
}
2020-01-15 13:53:17 +09:00
}