import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { ucapAnimations } from '../../animations'; import { FileEventJson } from '@ucap-webmessenger/protocol-event'; import { DeviceType, FileUtil, MimeUtil } from '@ucap-webmessenger/core'; import { CommonApiService, FileDownloadItem } from '@ucap-webmessenger/api-common'; import { take, map } from 'rxjs/operators'; import { DomSanitizer } from '@angular/platform-browser'; @Component({ selector: 'ucap-image-viewer', templateUrl: './image-viewer.component.html', styleUrls: ['./image-viewer.component.scss'], animations: ucapAnimations }) export class ImageViewerComponent implements OnInit { @Input() fileInfo: FileEventJson; @Input() downloadUrl: string; @Input() userSeq: number; @Input() deviceType: DeviceType; @Input() token: string; @Output() closed = new EventEmitter(); @Output() download = new EventEmitter(); blob: Blob; imageSrc: string | ArrayBuffer; fileDownloadItem: FileDownloadItem; constructor( private domSanitizer: DomSanitizer, private commonApiService: CommonApiService ) { this.fileDownloadItem = new FileDownloadItem(); } ngOnInit() { this.commonApiService .fileTalkDownload( { userSeq: this.userSeq, deviceType: this.deviceType, token: this.token, attachmentsSeq: this.fileInfo.attachmentSeq, fileDownloadItem: this.fileDownloadItem }, this.downloadUrl ) .pipe( take(1), map(async blob => { this.blob = blob.slice( 0, blob.size, MimeUtil.getMimeFromExtension(this.fileInfo.fileExt) ); this.imageSrc = await FileUtil.fromBlobToDataUrl(this.blob); }) ) .subscribe(); } onClickDownload(): void { this.download.emit(this.blob); } onClickClose(): void { this.closed.emit(); } }