download is added

package-lock.json

@@ -2323,6 +2323,12 @@
         "@types/webpack": "*"
       }
     },
+    "@types/file-saver": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.1.tgz",
+      "integrity": "sha512-g1QUuhYVVAamfCifK7oB7G3aIl4BbOyzDOqVyUfEr4tfBKrXfeH+M+Tg7HKCXSrbzxYdhyCP7z9WbKo0R2hBCw==",
+      "dev": true
+    },
     "@types/filesize": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@types/filesize/-/filesize-4.2.0.tgz",
@@ -6594,6 +6600,12 @@
         }
       }
     },
+    "file-saver": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz",
+      "integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw==",
+      "dev": true
+    },
     "fileset": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/fileset/-/fileset-2.0.3.tgz",

package.json

@@ -48,6 +48,7 @@
     "@types/electron-devtools-installer": "^2.2.0",
     "@types/extract-text-webpack-plugin": "^3.0.4",
     "@types/fs-extra": "^8.0.0",
+    "@types/file-saver": "^2.0.1",
     "@types/filesize": "^4.1.0",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
@@ -75,6 +76,7 @@
     "electron-store": "^4.0.0",
     "electron-updater": "^4.1.2",
     "electron-window-state": "^5.0.3",
+    "file-saver": "^2.0.2",
     "fs-extra": "^8.1.0",
     "filesize": "^4.1.2",
     "hammerjs": "^2.0.8",

projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/file-viewer.dialog.component.html

@@ -4,5 +4,6 @@
   [userSeq]="userSeq"
   [deviceType]="deviceType"
   [token]="token"
+  (download)="onDownload($event)"
   (closed)="onClosedViewer()"
 ></ucap-file-viewer>

projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/file-viewer.dialog.component.ts

@@ -10,6 +10,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { NGXLogger } from 'ngx-logger';
 import { FileEventJson } from '@ucap-webmessenger/protocol-event';
 import { DeviceType } from '@ucap-webmessenger/core';
+import * as FileSaver from 'file-saver';
 
 export interface FileViewerDialogData {
   fileInfo: FileEventJson;
@@ -52,6 +53,10 @@ export class FileViewerDialogComponent implements OnInit, OnDestroy {
 
   ngOnDestroy(): void {}
 
+  onDownload(blob: Blob): void {
+    FileSaver.saveAs(blob, this.fileInfo.fileName);
+  }
+
   onClosedViewer(): void {
     this.dialogRef.close();
   }

projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.html

@@ -9,6 +9,7 @@
     [userSeq]="userSeq"
     [deviceType]="deviceType"
     [token]="token"
+    (download)="onDownload($event)"
     (closed)="onClosedViewer()"
   ></ucap-document-viewer>
   <ucap-image-viewer
@@ -18,6 +19,7 @@
     [userSeq]="userSeq"
     [deviceType]="deviceType"
     [token]="token"
+    (download)="onDownload($event)"
     (closed)="onClosedViewer()"
   ></ucap-image-viewer>
   <ucap-sound-viewer
@@ -27,6 +29,7 @@
     [userSeq]="userSeq"
     [deviceType]="deviceType"
     [token]="token"
+    (download)="onDownload($event)"
     (closed)="onClosedViewer()"
   ></ucap-sound-viewer>
   <ucap-video-viewer
@@ -36,6 +39,7 @@
     [userSeq]="userSeq"
     [deviceType]="deviceType"
     [token]="token"
+    (download)="onDownload($event)"
     (closed)="onClosedViewer()"
   ></ucap-video-viewer>
   <ucap-binary-viewer
@@ -45,6 +49,7 @@
     [userSeq]="userSeq"
     [deviceType]="deviceType"
     [token]="token"
+    (download)="onDownload($event)"
     (closed)="onClosedViewer()"
   ></ucap-binary-viewer>
 </div>

projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.ts

@@ -27,6 +27,9 @@ export class FileViewerComponent implements OnInit {
   @Input()
   token: string;
 
+  @Output()
+  download = new EventEmitter<Blob>();
+
   @Output()
   closed = new EventEmitter<void>();
 
@@ -48,6 +51,9 @@ export class FileViewerComponent implements OnInit {
         return FileViewerType.Binary;
     }
   }
+  onDownload(blob: Blob): void {
+    this.download.emit(blob);
+  }
 
   onClosedViewer(): void {
     this.closed.emit();

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.ts

@@ -25,9 +25,19 @@ export class BinaryViewerComponent implements OnInit {
   @Input()
   token: string;
 
+  @Output()
+  download = new EventEmitter<Blob>();
+
   @Output()
   closed = new EventEmitter<void>();
 
   constructor() {}
+
   ngOnInit() {}
+
+  onClickDownload(): void {}
+
+  onClickClose(): void {
+    this.closed.emit();
+  }
 }

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.ts

@@ -25,9 +25,19 @@ export class DocumentViewerComponent implements OnInit {
   @Input()
   token: string;
 
+  @Output()
+  download = new EventEmitter<Blob>();
+
   @Output()
   closed = new EventEmitter<void>();
 
   constructor() {}
+
   ngOnInit() {}
+
+  onClickDownload(): void {}
+
+  onClickClose(): void {
+    this.closed.emit();
+  }
 }

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html

@@ -1,5 +1,5 @@
 <div class="ucap-image-viewer-container">
-  <mat-toolbar color="primary" class="ucap-image-viewer-header">
+  <mat-toolbar color="accent" class="ucap-image-viewer-header">
     <mat-icon class="ucap-image-viewer-icon">image</mat-icon>
     <span class="ucap-image-viewer-title">{{ fileInfo.fileName }}</span>
     <span class="ucap-image-viewer-spacer"></span>
@@ -9,7 +9,7 @@
       class="ucap-image-viewer-action"
       matTooltip="이미지 크기 재설정"
       matTooltipPosition="below"
-      aria-label="Button that displays a tooltip in various positions"
+      aria-label=""
     >
       <mat-icon>settings_overscan</mat-icon>
     </button>
@@ -18,7 +18,7 @@
       class="ucap-image-viewer-action"
       matTooltip="축소"
       matTooltipPosition="below"
-      aria-label="Button that displays a tooltip in various positions"
+      aria-label=""
     >
       <mat-icon>zoom_out</mat-icon>
     </button>
@@ -27,7 +27,7 @@
       class="ucap-image-viewer-action"
       matTooltip="확대"
       matTooltipPosition="below"
-      aria-label="Button that displays a tooltip in various positions"
+      aria-label=""
     >
       <mat-icon>zoom_in</mat-icon>
     </button>
@@ -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()"
     >
       <mat-icon>get_app</mat-icon>
     </button>
@@ -56,7 +57,13 @@
     [value]="fileDownloadItem.downloadingProgress$ | async"
   ></mat-progress-bar>
   <div class="ucap-image-viewer-body">
-    <div class="ucap-image-viewer-image-wrapper">
+    <div
+      class="ucap-image-viewer-image-wrapper"
+      fxLayout="row"
+      fxLayout.xs="column"
+      fxFlexFill
+      fxLayoutAlign="center center"
+    >
       <img *ngIf="imageSrc" [src]="imageSrc" />
     </div>
   </div>

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%;
     }
   }
 }

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<void>();
 
+  @Output()
+  download = new EventEmitter<Blob>();
+
+  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();
   }

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<Blob>();
+
   @Output()
   closed = new EventEmitter<void>();
 
   constructor() {}
+
   ngOnInit() {}
+
+  onClickDownload(): void {}
+
+  onClickClose(): void {
+    this.closed.emit();
+  }
 }

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<Blob>();
+
   @Output()
   closed = new EventEmitter<void>();
 
   constructor() {}
+
   ngOnInit() {}
+
+  onClickDownload(): void {}
+
+  onClickClose(): void {
+    this.closed.emit();
+  }
 }

projects/ucap-webmessenger-ui/src/lib/directives/image.directive.ts

@@ -5,8 +5,7 @@ import {
   Output,
   Input,
   AfterViewInit,
-  OnInit,
+  OnInit
-  HostListener
 } from '@angular/core';
 
 import { NGXLogger } from 'ngx-logger';
@@ -28,7 +27,7 @@ export class ImageDirective implements OnInit, AfterViewInit {
   default: string;
 
   @Output()
-  loaded = new EventEmitter<string>();
+  loaded = new EventEmitter<HTMLImageElement>();
 
   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;
     }