124 lines
3.0 KiB
TypeScript
124 lines
3.0 KiB
TypeScript
import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
|
|
import { BundleImageEventJson, Info } from '@ucap-webmessenger/protocol-event';
|
|
import { FileDownloadItem } from '@ucap-webmessenger/api';
|
|
import { NGXLogger } from 'ngx-logger';
|
|
import { RoomInfo } from '@ucap-webmessenger/protocol-room';
|
|
import { SelectFileInfo } from '@ucap-webmessenger/ui';
|
|
|
|
export interface Tile {
|
|
colspan?: number;
|
|
imgSrc?: string;
|
|
}
|
|
@Component({
|
|
selector: 'ucap-chat-message-box-bundle-image',
|
|
templateUrl: './bundle-image.component.html',
|
|
styleUrls: ['./bundle-image.component.scss']
|
|
})
|
|
export class BundleImageComponent implements OnInit {
|
|
@Input()
|
|
set message(m: Info<BundleImageEventJson>) {
|
|
this._message = m;
|
|
|
|
this.makeTileGrid();
|
|
}
|
|
get message() {
|
|
return this._message;
|
|
}
|
|
// tslint:disable-next-line: variable-name
|
|
_message: Info<BundleImageEventJson>;
|
|
|
|
@Input()
|
|
roomInfo: RoomInfo;
|
|
|
|
@Output()
|
|
save = new EventEmitter<{
|
|
fileInfo: BundleImageEventJson;
|
|
fileDownloadItem: FileDownloadItem;
|
|
type: string;
|
|
}>();
|
|
@Output()
|
|
fileViewer = new EventEmitter<SelectFileInfo>();
|
|
|
|
showExpired = false;
|
|
tiles: Tile[] = [];
|
|
|
|
constructor(private logger: NGXLogger) {}
|
|
|
|
ngOnInit() {
|
|
this.makeTileGrid();
|
|
}
|
|
|
|
makeTileGrid() {
|
|
if (
|
|
!this.message.sentMessageJson.thumbUrls ||
|
|
0 === this.message.sentMessageJson.thumbUrls.length ||
|
|
1 > this.message.sentMessageJson.fileCount
|
|
) {
|
|
return;
|
|
}
|
|
const fileCount = Number(this.message.sentMessageJson.fileCount);
|
|
|
|
this.tiles = [];
|
|
|
|
const remainder = fileCount % 3;
|
|
const quotient = Math.floor(fileCount / 3);
|
|
|
|
let checkCount: number;
|
|
|
|
if (remainder === 1 && fileCount > 1) {
|
|
checkCount = quotient - 1;
|
|
} else if (remainder === 2 && fileCount > 1) {
|
|
checkCount = quotient;
|
|
}
|
|
|
|
this.message.sentMessageJson.thumbUrls.forEach((v, idx) => {
|
|
const tile: Tile = {};
|
|
|
|
if (checkCount <= Math.floor(idx / 3)) {
|
|
tile.colspan = 3;
|
|
} else if (fileCount === 1) {
|
|
tile.colspan = 6;
|
|
} else {
|
|
tile.colspan = 2;
|
|
}
|
|
tile.imgSrc = this.message.sentMessageJson.baseUrl + v;
|
|
this.tiles.push(tile);
|
|
});
|
|
}
|
|
|
|
mouseEnter(event: MouseEvent): void {
|
|
if (!this.roomInfo || this.roomInfo.expiredFileStdSeq > this.message.seq) {
|
|
this.showExpired = true;
|
|
}
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
}
|
|
mouseLeave(event: MouseEvent): void {
|
|
if (!this.roomInfo || this.roomInfo.expiredFileStdSeq > this.message.seq) {
|
|
this.showExpired = false;
|
|
}
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
}
|
|
|
|
getExpiredFile() {
|
|
if (
|
|
!!this.roomInfo &&
|
|
this.roomInfo.expiredFileStdSeq <= this.message.seq
|
|
) {
|
|
return false;
|
|
} else {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
onClickFileViewer(index: number) {
|
|
if (!this.getExpiredFile()) {
|
|
this.fileViewer.emit({
|
|
attachmentSeq: this._message.sentMessageJson.attachmentSeq,
|
|
index
|
|
});
|
|
}
|
|
}
|
|
}
|