-
+
image
{{ fileInfo.fileName }}
@@ -9,7 +9,7 @@
class="ucap-image-viewer-action"
matTooltip="이미지 크기 재설정"
matTooltipPosition="below"
- aria-label="Button that displays a tooltip in various positions"
+ aria-label=""
>
settings_overscan
@@ -18,7 +18,7 @@
class="ucap-image-viewer-action"
matTooltip="축소"
matTooltipPosition="below"
- aria-label="Button that displays a tooltip in various positions"
+ aria-label=""
>
zoom_out
@@ -27,7 +27,7 @@
class="ucap-image-viewer-action"
matTooltip="확대"
matTooltipPosition="below"
- aria-label="Button that displays a tooltip in various positions"
+ aria-label=""
>
zoom_in
@@ -36,7 +36,8 @@
class="ucap-image-viewer-action"
matTooltip="다운로드"
matTooltipPosition="below"
- aria-label="Button that displays a tooltip in various positions"
+ aria-label=""
+ (click)="onClickDownload()"
>
get_app
@@ -56,7 +57,13 @@
[value]="fileDownloadItem.downloadingProgress$ | async"
>
- ();
+ @Output()
+ download = new EventEmitter();
+
+ blob: Blob;
imageSrc: string | ArrayBuffer;
fileDownloadItem: FileDownloadItem;
- constructor(private commonApiService: CommonApiService) {
+ constructor(
+ private domSanitizer: DomSanitizer,
+ private commonApiService: CommonApiService
+ ) {
this.fileDownloadItem = new FileDownloadItem();
}
@@ -56,17 +64,21 @@ export class ImageViewerComponent implements OnInit {
.pipe(
take(1),
map(async blob => {
- const b = blob.slice(
+ this.blob = blob.slice(
0,
blob.size,
MimeUtil.getMimeFromExtension(this.fileInfo.fileExt)
);
- this.imageSrc = await FileUtil.toDataUrl(b);
+ this.imageSrc = await FileUtil.toDataUrl(this.blob);
})
)
.subscribe();
}
+ onClickDownload(): void {
+ this.download.emit(this.blob);
+ }
+
onClickClose(): void {
this.closed.emit();
}
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.ts
index 06e025c3..f6968345 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.ts
@@ -25,9 +25,19 @@ export class SoundViewerComponent implements OnInit {
@Input()
token: string;
+ @Output()
+ download = new EventEmitter();
+
@Output()
closed = new EventEmitter();
constructor() {}
+
ngOnInit() {}
+
+ onClickDownload(): void {}
+
+ onClickClose(): void {
+ this.closed.emit();
+ }
}
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.ts
index e934f02c..4728ccbb 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.ts
@@ -25,9 +25,19 @@ export class VideoViewerComponent implements OnInit {
@Input()
token: string;
+ @Output()
+ download = new EventEmitter();
+
@Output()
closed = new EventEmitter();
constructor() {}
+
ngOnInit() {}
+
+ onClickDownload(): void {}
+
+ onClickClose(): void {
+ this.closed.emit();
+ }
}
diff --git a/projects/ucap-webmessenger-ui/src/lib/directives/image.directive.ts b/projects/ucap-webmessenger-ui/src/lib/directives/image.directive.ts
index d13bed19..412f15fb 100644
--- a/projects/ucap-webmessenger-ui/src/lib/directives/image.directive.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/directives/image.directive.ts
@@ -5,8 +5,7 @@ import {
Output,
Input,
AfterViewInit,
- OnInit,
- HostListener
+ OnInit
} from '@angular/core';
import { NGXLogger } from 'ngx-logger';
@@ -28,7 +27,7 @@ export class ImageDirective implements OnInit, AfterViewInit {
default: string;
@Output()
- loaded = new EventEmitter();
+ loaded = new EventEmitter();
imageSrc: string;
@@ -53,7 +52,7 @@ export class ImageDirective implements OnInit, AfterViewInit {
ngAfterViewInit(): void {
if (this.imageSrc === this.default) {
this.elementRef.nativeElement.src = this.default;
- this.loaded.emit(this.elementRef.nativeElement.src);
+ this.loaded.emit(this.elementRef.nativeElement);
} else {
this.elementRef.nativeElement.src = this.default;
@@ -71,11 +70,11 @@ export class ImageDirective implements OnInit, AfterViewInit {
return;
}
this.elementRef.nativeElement.src = image.src;
- this.loaded.emit(this.elementRef.nativeElement.src);
+ this.loaded.emit(image);
};
image.onerror = () => {
this.elementRef.nativeElement.src = this.default;
- this.loaded.emit(this.elementRef.nativeElement.src);
+ this.loaded.emit(this.elementRef.nativeElement);
};
image.src = imageUrl;
}
+
![]()
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.scss
index 5bb0eb14..23287cd0 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.scss
@@ -26,11 +26,6 @@
height: 100%;
.ucap-image-viewer-image-wrapper {
- position: absolute;
- top: 10%;
- left: 10%;
- width: 80%;
- height: 80%;
}
}
}
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.ts
index 3f0c7de4..c766fed1 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.ts
@@ -7,6 +7,7 @@ import {
FileDownloadItem
} from '@ucap-webmessenger/api-common';
import { take, map } from 'rxjs/operators';
+import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'ucap-image-viewer',
@@ -33,11 +34,18 @@ export class ImageViewerComponent implements OnInit {
@Output()
closed = new EventEmitter